/* neilspruce.com homepage mock-up (v2: collage fills the page).
   Type and colour follow the Better Angles Editorial Style Guide v2.0. The collage is the one deliberate exception.
   Fonts are self-hosted from fonts/ (latin subset), so the page makes no request to Google. */

@font-face {
  font-family: 'Special Elite'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/special-elite-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --paper: #FAF7F0;
  --sage: #E2ECCF;
  --ink: #202020;
  --ink-soft: #555555;
  --rule: #d8d8d8;
  --error: #8f2d1a;
  --font-display: 'Special Elite', 'Courier New', monospace;
  --font-body: 'IBM Plex Mono', 'Courier Prime', 'Courier New', monospace;
  --bar: 56px; /* header and footer height */
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.5;
}

a { color: inherit; }
img { display: block; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header and footer: the only paper strips on the page */
.top, footer {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--bar); padding: 0 24px; background: var(--paper);
}
.wordmark { font-weight: 600; text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.top nav a { text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.top nav a:hover, .top nav a:focus-visible { border-bottom-color: var(--ink); }
footer { flex-direction: column; justify-content: center; gap: 6px; padding: 14px 24px; font-size: 13px; color: var(--ink-soft); text-align: center; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.credit { margin: 0; font-size: 12px; }

/* The collage fills everything between the header and footer.
   The "stage" is a 1600 x 760 canvas scaled to cover the area (like background-size: cover),
   so on other shapes of screen the edge objects bleed off, which suits a collage. */
main { flex: 1 0 auto; display: flex; }
/* Worn parchment: golden aged-paper base (matched to the pin-up card's paper), soft blotches, fine grain,
   gently darkened edges and faint map folds (thirds one way, halves the other).
   All generated here (SVG noise and gradients), so there is no image to download. */
:root {
  --parchment: #f3d796;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.38 0 0 0 0 0.14 0 0 0 0.8 -0.30'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --blotch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0045 0.0065' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.80 0 0 0 0 0.55 0 0 0 0 0.18 0 0 0 1.5 -0.66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --stain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.009' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.70 0 0 0 0 0.45 0 0 0 0 0.14 0 0 0 2.0 -1.0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.collage {
  position: relative; flex: 1; overflow: hidden;
  background-color: var(--parchment);
  background-image:
    linear-gradient(90deg, transparent calc(33.333% - 8px), rgba(130,86,30,0.04) calc(33.333% - 3px), rgba(130,86,30,0.14) calc(33.333% - 1px), rgba(255,246,214,0.26) 33.333%, rgba(255,246,214,0.10) calc(33.333% + 3px), transparent calc(33.333% + 8px)),
    linear-gradient(90deg, transparent calc(66.667% - 8px), rgba(130,86,30,0.04) calc(66.667% - 3px), rgba(130,86,30,0.14) calc(66.667% - 1px), rgba(255,246,214,0.26) 66.667%, rgba(255,246,214,0.10) calc(66.667% + 3px), transparent calc(66.667% + 8px)),
    linear-gradient(180deg, transparent calc(50% - 8px), rgba(130,86,30,0.04) calc(50% - 3px), rgba(130,86,30,0.14) calc(50% - 1px), rgba(255,246,214,0.26) 50%, rgba(255,246,214,0.10) calc(50% + 3px), transparent calc(50% + 8px)),
    radial-gradient(ellipse at 50% 46%, rgba(255, 246, 214, 0.28) 0%, rgba(255, 246, 214, 0) 42%, rgba(150, 98, 34, 0.30) 100%),
    var(--stain),
    var(--blotch),
    var(--grain);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 900px 900px, 1100px 1100px, 300px 300px;
  box-shadow: inset 0 0 80px 6px rgba(150, 98, 34, 0.26), inset 0 0 14px rgba(110, 70, 24, 0.35);
  min-height: 560px; container-type: size;
}
.stage, .card {
  --u: max(calc(100cqw / 1600), calc(100cqh / 760)); /* 1 canvas pixel */
}
.stage {
  position: absolute; left: 50%; top: 50%;
  width: calc(1600 * var(--u)); height: calc(760 * var(--u));
  transform: translate(-50%, -50%);
}
.pile img {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  height: auto; transform: rotate(var(--r));
  filter: drop-shadow(0 5px 8px rgba(32, 32, 32, 0.22));
  pointer-events: none; user-select: none;
}

/* The card, centred, with the polaroid and pennant fixed to its corners */
.card {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(400px, calc(487 * var(--u)), 540px);
  background: var(--paper); padding: 34px 42px 26px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.16);
}
.card h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.25; margin: 0 0 16px;
  padding-right: 12px;
}
.card .sub { margin: 0 0 22px; max-width: 40ch; }

.signup { display: grid; gap: 10px; }
.signup input {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: 0; padding: 11px 12px;
}
.signup input::placeholder { color: var(--ink-soft); }
.signup input:focus-visible, .signup button:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
.signup button {
  font: inherit; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  border-radius: 0; padding: 13px 16px;
}
.signup button:hover { background: #000; }
.signup button:disabled { cursor: default; opacity: 0.7; }
.small-print { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.small-print a { text-underline-offset: 2px; }

/* The invisible spam trap. Real visitors never see or reach it. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { min-height: 1.5em; margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--error); }

/* Shown in place of the form after a successful signup */
.done { padding: 4px 0 6px; max-width: 40ch; }
.done:focus { outline: none; }
.done-title { font-weight: 600; font-size: 1.15rem; margin: 0 0 8px; }
.done p { margin: 0 0 10px; }

/* Polaroid: hangs off the card's top-left corner, clear of the headline */
.polaroid {
  position: absolute; z-index: 2; left: -27%; top: -13%; width: 34%;
  margin: 0; padding: 2.4% 2.4% 8.4%; background: #fffdf8;
  transform: rotate(-6deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 18px rgba(0, 0, 0, 0.25);
}
.polaroid img { width: 100%; height: auto; }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 4%;
  text-align: center; font-size: 13px; font-style: italic; color: var(--ink-soft);
}

/* Yorkshire pennant: its pole is fixed in the card's top-right corner, the flag flies outside */
.pennant {
  position: absolute; z-index: 2; left: calc(100% - 34px); top: -56px; width: 34%; height: auto;
  transform: rotate(7deg); transform-origin: 8% 100%;
  filter: drop-shadow(0 4px 6px rgba(32, 32, 32, 0.25));
  pointer-events: none; user-select: none;
}

/* Phones and small tablets: card first, polaroid and pennant pinned above it, then a small pile */
@media (max-width: 820px) {
  .collage { container-type: normal; min-height: 0; overflow: visible; display: flex; flex-direction: column; padding: 124px 16px 24px; }
  .stage { position: static; width: auto; height: auto; transform: none; order: 2; }
  .card {
    position: relative; left: auto; top: auto; transform: none;
    width: auto; padding: 58px 22px 24px; order: 1;
  }
  .card h1 { font-size: 2rem; padding-right: 0; }
  .polaroid { left: 6px; top: -108px; width: 130px; padding: 7px 7px 28px; }
  .pennant { left: auto; right: 24px; top: -66px; width: 100px; }
  .pile {
    order: 2; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px 10px; padding: 26px 0 0; align-items: center;
  }
  .pile img { position: static; width: 100%; transform: rotate(var(--r)); }
  .pile img:not(.m) { display: none; }
  .top { padding: 8px 16px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .top nav { font-size: 13px; gap: 2px 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .signup button { transition: background 0.15s; }
}