/* The Comeback Plan. Funnel pages v1.
   Paper, palette and type carried from bunkermentality.co.uk
   (projects/bunker-mentality/site/styles.css), with less flourish:
   nothing animates, and the reader gets bigger type and bigger targets
   because he is on a phone and not in a good state. Notes and reasoning
   in reference/design-plan.md.

   Pass 6 (16 Aug 2026, reference/relayout-brief-2026-08-16.md): the single
   34rem column was relaid as a one-screen two-column grid on desktop, so the
   opt-in form and its button sit on the first screen and the width is used.
   Vertical rhythm is now viewport-height aware, because a 720px laptop and a
   1080px monitor cannot share one set of margins. */

/* ---- Fonts, self-hosted ------------------------------------------- */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-v13-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/courier-prime-v11-latin-regular.woff2') format('woff2');
}

/* ---- Tokens -------------------------------------------------------- */

:root {
  --paper: #d6d3ca;
  --paper-light: #e1ded6;
  --paper-deep: #b8b4a8;
  --ink: #211f19;
  --ink-soft: #3b382f;
  --ink-faint: #6b675b;
  --rule: rgba(50, 47, 38, 0.45);
  --stamp: #454136;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --type: 'Courier Prime', 'Courier New', monospace;

  /* Measures. --measure is the one-job single column (pre-confirmation,
     privacy); --measure-wide is a grid column on the two-column pages. */
  --measure: 34rem;
  --measure-wide: 38rem;
  --grid-max: 72rem;

  /* Vertical rhythm, tied to the viewport height as well as its width, so a
     first screen that fits at 1080 also fits at 720. */
  --gap-s: clamp(0.7rem, 1.7vh, 1.15rem);
  --gap-m: clamp(1.1rem, 2.7vh, 1.9rem);
  --gap-l: clamp(1.5rem, 3.6vh, 2.6rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--type);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--ink-soft);
  background-color: var(--paper);
  /* Aged paper across the whole screen: uneven tone, age spots,
     darkened edges. Not a literal sheet of A4. */
  background-image:
    radial-gradient(ellipse 22% 12% at 82% 16%, rgba(110, 105, 92, 0.22), transparent 70%),
    radial-gradient(ellipse 30% 14% at 8% 58%, rgba(110, 105, 92, 0.16), transparent 70%),
    radial-gradient(ellipse 18% 10% at 68% 88%, rgba(110, 105, 92, 0.18), transparent 70%),
    radial-gradient(ellipse 12% 7% at 30% 6%, rgba(110, 105, 92, 0.13), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 28%, rgba(225, 222, 214, 0.6), transparent 85%),
    linear-gradient(160deg, rgba(184, 180, 168, 0.22), transparent 40%, rgba(184, 180, 168, 0.3));
  background-attachment: fixed;
  min-height: 100vh;
}

/* Screen-edge ageing, fixed so it frames the viewport. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow:
    inset 0 0 12px rgba(60, 56, 44, 0.28),
    inset 0 0 110px rgba(85, 80, 64, 0.3);
}

/* Paper fibre and speckle over everything, ink included: it is what makes
   the print sit IN the paper rather than on it. */
.mottle {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* ---- The sheet ----------------------------------------------------- */

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  --sheet-pad-top: clamp(2rem, 6vw, 4rem);
  padding: var(--sheet-pad-top) clamp(1.375rem, 6vw, 3rem) clamp(2rem, 5vw, 3.5rem);
  color: var(--ink-soft);
}

/* A page that is meant to be one screen: tighter margins, and the content
   centred in what is left after the footer. */
.sheet--screen {
  --sheet-pad-top: clamp(1.25rem, 3.5vh, 2.75rem);
  padding-top: var(--sheet-pad-top);
  padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

.screen {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* The single-column pages (pre-confirmation, privacy). */
.column {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}
.column--wide { max-width: 38rem; }

/* The SVG filter definitions. Out of flow, no size, never seen. */
.filters { position: absolute; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- The two-column first screen ------------------------------------ */

.split {
  display: grid;
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  gap: var(--gap-m);
}

.split > * {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
}

/* Capture page: headline block, then the guide, then the prose and the form.
   That stacking order is the phone reading order, and the desktop grid below
   moves the guide into its own column without touching the markup. */
@media (min-width: 60rem) {
  .split {
    gap: var(--gap-m) clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
  }
  .split > * { margin-inline: 0; }

  .split--capture {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-areas:
      'head aside'
      'body aside';
  }
  .split--capture .split__head { grid-area: head; }
  .split--capture .split__body { grid-area: body; }
  .split--capture .split__aside { grid-area: aside; align-self: center; }

  .split--offer { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .split--offer > * { max-width: none; }
  .split--offer .split__side { align-self: center; }

  /* The left column of the download page rules off one margin: stamp,
     headline, cover, button and note all range left together. */
  .split--offer .mockup-frame { justify-content: flex-start; padding-left: 0.5rem; }
  .split--offer .download .btn { margin-inline: 0; }
  .split--offer .download .smallprint { margin-inline: 0; text-align: left; }
}

/* ---- Masthead: a worn rubber stamp --------------------------------- */

.masthead { text-align: center; }
/* The stamp as the page's letterhead, centred over both columns. */
.masthead--page { width: 100%; margin-bottom: var(--gap-m); }
.screen--stacked { flex-direction: column; justify-content: center; }
@media (min-width: 60rem) { .split--offer .hero { margin-top: 0; } }
.plate {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.95rem, 2.8vw, 1.15rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em; /* balance the tracking */
  text-transform: uppercase;
  color: var(--stamp);
  text-decoration: none;
  border: 4px double var(--stamp);
  padding: 0.55em 0.8em 0.5em;
  transform: rotate(-2.2deg);
  filter: url(#stampwear);
  opacity: 0.75;
  /* ink-starved patches, so the stamp is not evenly printed */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0.9 0.9 0 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0.9 0.9 0 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

/* ---- Print --------------------------------------------------------- */

.hero {
  margin-top: var(--gap-m);
  text-align: center;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 8.4vw, 3.5rem);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* The letterpress bleed is the capture page's one bit of flourish.
   Body pages carry the paper and the type, and nothing else. */
.hero--inked h1 { filter: url(#inkbleed); }

.subhead {
  margin-top: var(--gap-s);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* On a wide screen the first screen reads as a printed page: the stamp,
   the headline and the prose all range left off one margin. */
@media (min-width: 60rem) {
  .split .masthead, .split .hero { text-align: left; }
  h1 { font-size: clamp(2.1rem, min(3.6vw, 5.4vh), 3.25rem); }
  .subhead { text-wrap: pretty; }
}

/* ---- Body prose ---------------------------------------------------- */

.prose {
  margin-top: var(--gap-m);
  text-align: left;
}
.prose p + p { margin-top: 1.3em; }

.split__body .prose { margin-top: 0; }

/* A printed rule, used to separate one part of the sheet from the next.
   Kept for later use; the download page no longer needs it now that the
   guide and the offer sit side by side. */
.rule {
  width: 5.5rem;
  height: 2px;
  margin: var(--gap-l) auto;
  background: var(--rule);
  border: 0;
}

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}

/* ---- The guide, drawn as a printed cover ---------------------------- */

.mockup-frame {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0.5rem 1.25rem;
}

.mockup {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(100%, 22rem);
  aspect-ratio: 1 / 1.414;
  padding: 11% 9% 9%;
  color: var(--ink-soft);
  background-color: var(--paper-light);
  /* the same ageing as the sheet, at sheet-of-paper scale */
  background-image:
    radial-gradient(ellipse 55% 26% at 20% 10%, rgba(110, 105, 92, 0.13), transparent 70%),
    radial-gradient(ellipse 42% 20% at 82% 84%, rgba(110, 105, 92, 0.15), transparent 70%),
    linear-gradient(152deg, rgba(255, 255, 255, 0.32), transparent 42%, rgba(184, 180, 168, 0.34));
  border: 1px solid rgba(50, 47, 38, 0.26);
  transform: rotate(2.4deg);
  box-shadow:
    inset 0 0 30px rgba(85, 80, 64, 0.22),
    7px 11px 24px rgba(45, 42, 33, 0.26);
}

/* The printer's rule at the foot of the cover. Decorative: it gives the
   lower half of the sheet something to sit against, the way a printed
   cover has an imprint line. */
.mockup::after {
  content: '';
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: 13%;
  height: 1px;
  background: rgba(50, 47, 38, 0.32);
}

.mockup .plate {
  font-size: 3.6cqw;
  border-width: 3px;
  transform: rotate(-1.8deg);
}

.mockup__title {
  margin-top: 22%;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5cqw;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.mockup__sub {
  margin-top: 6%;
  font-family: var(--type);
  font-size: 4.1cqw;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* The download page shows the guide smaller: the button is the job there,
   the cover is only the reminder of what is being opened. */
.mockup-frame--small .mockup { width: min(100%, 13.5rem, 26vh); }

@media (max-width: 39.999rem) {
  /* On a phone the cover would push the form a screen and a half down, so
     it comes out. The brief allows this and the form is what matters. */
  .split--capture .mockup-frame { display: none; }
  .mockup-frame--small .mockup { width: min(42%, 7.5rem); }
  /* Ad traffic is mostly phones. The type stays big for a man in a bad
     state, but not so big that the form is a screen away: 17px on 1.6
     brings the field to the foot of the first screen on a 390x664 view. */
  body { font-size: 1.0625rem; line-height: 1.6; }
  .sheet--screen { --sheet-pad-top: 1rem; }
  .split--capture .hero { margin-top: var(--gap-s); }
  .split--capture .signup { margin-top: var(--gap-s); }
}

/* ---- The form, printed like a paper form --------------------------- */

.signup { margin-top: var(--gap-m); }

form { text-align: left; }

label {
  display: block;
  font-family: var(--type);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

input[type='email'] {
  display: block;
  width: 100%;
  font-family: var(--type);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink);
  /* a printed form box: faintly filled, ruled all round, heavier write-line */
  background: rgba(230, 227, 219, 0.5);
  border: 1px solid rgba(50, 47, 38, 0.35);
  border-bottom: 2px solid var(--ink-soft);
  border-radius: 0;
  padding: 0.75em 0.7em;
  min-height: 3.25rem;
  box-shadow: inset 0 1px 3px rgba(50, 47, 38, 0.12);
}
input[type='email']::placeholder {
  color: var(--ink-faint);
  opacity: 0.7;
  font-style: italic;
}
input[type='email']:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(50, 47, 38, 0.12), 0 2px 0 0 var(--ink);
}

/* Field and button on one line once there is room for both. */
.form-row {
  display: grid;
  gap: 0.9rem;
  max-width: var(--measure-wide);
}
@media (min-width: 34rem) {
  .form-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0.7rem;
    align-items: stretch;
  }
}

/* ---- Buttons: inked blocks, big enough for a thumb ------------------ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  font-family: var(--type);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--paper-light);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 0.8em 1rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--stamp);
  border-color: var(--stamp);
  color: var(--paper-light);
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: default; }

.status {
  margin-top: 0.9rem;
  font-family: var(--type);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  /* A ruled left margin so the line reads as a note against the form,
     and is visible whatever the state of the button next to it. */
  border-left: 3px solid var(--stamp);
  padding-left: 0.7rem;
}
.status:empty { display: none; }

/* The line under the form. Not the footer's job any more. */
.formnote {
  margin-top: var(--gap-s);
  font-family: var(--type);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---- The offer block: a coupon printed on the same sheet ------------ */

.offer {
  border: 3px double var(--rule);
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  background: rgba(230, 227, 219, 0.32);
}
.offer h2 { text-align: center; }
.offer p { margin-top: 1.15em; }

/* The paid plan's cover sits inside the coupon beside the copy, small: the
   reader sees the thing he is buying, in the same paper as the free one. */
.offer__row { margin-top: 1.15em; }
.offer__row p { margin-top: 0; }
.mockup--paid {
  width: min(48%, 7.5rem);
  margin: 0 auto 1rem;
  transform: rotate(-2.2deg);
  padding: 9% 7% 7%;
}
.mockup--paid .plate { font-size: 5cqw; border-width: 2px; }
.mockup--paid .mockup__title { margin-top: 18%; font-size: 12.5cqw; }
.mockup--paid .mockup__sub { margin-top: 7%; font-size: 6.2cqw; line-height: 1.35; }
.mockup--paid::after { left: 30%; right: 30%; bottom: 12%; }
@media (min-width: 34rem) {
  .offer__row { display: grid; grid-template-columns: 6.75rem 1fr; gap: 1.25rem; align-items: start; }
  .mockup--paid { width: 100%; margin: 0.35rem 0 0; }
}
/* The price line: same face as the rest, set in full ink so the number
   is the first thing found when the eye scans the block. */
.price-line {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
}
.offer .btn { margin-top: 1.3rem; }
.price-line--under { margin-top: 0.9rem; text-align: center; font-size: 1rem; }

/* The coupon's prose is set a little tighter than the page's, so the whole
   box lands on the first screen on a 720px laptop. */
@media (min-width: 60rem) {
  .offer p { font-size: 1.0625rem; line-height: 1.62; }
  .offer .price-line { font-size: 1.1rem; }
}

.smallprint {
  max-width: 26rem;
  margin-top: 0.85rem;
  margin-inline: auto;
  font-family: var(--type);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
  text-wrap: balance;
}

.download { margin-top: var(--gap-m); }
.download .smallprint { margin-top: 0.9rem; }

/* ---- Footer: the printer's imprint --------------------------------- */

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 1.25rem;
  width: 100%;
  margin-top: auto;
  padding-top: var(--gap-l);
  text-align: center;
  font-family: var(--type);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
footer a {
  color: var(--ink-faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* comfortable to hit without turning the imprint into a button */
  display: inline-block;
  padding: 0.35rem 0.25rem;
}
footer a:hover { color: var(--ink); }

a { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }

/* ---- Wider screens -------------------------------------------------- */

@media (min-width: 40rem) {
  .download .btn { max-width: 27rem; margin-inline: auto; }
  .offer .btn { max-width: 27rem; margin-inline: auto; }
}

/* Nothing on these pages animates. The rule stays as a guard against
   anything added later. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}