/* Whereabouts — shared by /whereabouts, /made and /thanks.
   Colours and type are the FEWL styleguide v2 (July 2026), not the riso pair.
   Riso red and blue live on the printed things and inside the placeholder
   drawings only — see wa-*.png. */

:root {
  --paper:  #F6F2E8;
  --navy:   #001444;
  --cobalt: #1A1AFF;
  --coral:  #F25F5F;
  --warm:   #E0DBD0;
  --stone:  #7A756C;
  --plum:   #622F53;
  --green:  #3F5A4A;

  --sans:  'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:  ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 680px;
}

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

body {
  background-color: var(--paper);
  /* Paper grain — generated, no image asset. Texture only, never on the type. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
  color: var(--navy);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main, header, footer { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

/* ── Type ──────────────────────────────────────────── */
/* Bricolage for headlines: uneven, drawn rather than constructed. It is the
   main reason this doesn't read as a generated page. */
h1, h2, h3 { font-family: var(--sans); font-weight: 600; line-height: 1.15; }
h2 { font-size: 34px; margin-bottom: 22px; }
h3 { font-size: 22px; margin-bottom: 10px; }
p { margin-bottom: 18px; }
p:last-child { margin-bottom: 0; }

a { color: var(--cobalt); }

section { padding: 64px 0; border-top: 1px solid rgba(122, 117, 108, 0.3); }
section:first-of-type { border-top: 0; }

/* Was monospace; now the page's sans. Class name kept so markup stays put. */
.mono { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; }
.small { font-size: 14px; }
.red  { color: var(--coral); }
.quiet { color: var(--stone); }

/* Small label above a block */
.label {
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; color: var(--plum);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px;
}

/* Plain stacked list — no bullets, one item per line */
.stack { font-family: var(--sans); font-size: 15.5px; line-height: 1.55; list-style: none; }
.stack li { margin-bottom: 14px; }
.stack li:last-child { margin-bottom: 0; }

/* ── Images ────────────────────────────────────────── */
/* Hard edges, thin stone rule, as if pasted in. No radius, no shadow. */
figure { margin: 0; }
img { display: block; width: 100%; height: auto; }
.shot { border: 1px solid var(--stone); }
.cap { font-family: var(--mono); font-size: 12px; color: var(--stone); margin-top: 10px; line-height: 1.5; }
/* Three elements sit slightly off square. Three, not more. */
.tilt-a { transform: rotate(-0.8deg); }
.tilt-b { transform: rotate(1.1deg); }
.tilt-c { transform: rotate(-1.3deg); }

/* Two places break the 680px column on purpose, and only when there's room. */
@media (min-width: 1100px) {
  .bleed { width: 940px; margin-left: -130px; }
  .bleed-l { margin-left: -56px; }
}

/* ── Hero ──────────────────────────────────────────── */
.hero { padding: 72px 0 64px; }
/* No monospace above the fold. Everything up here is the headline typeface,
   so the first screen reads as one voice instead of three. */
.hero .kicker {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt);
  margin-bottom: 34px;
}
.hero .claim {
  font-family: var(--sans); font-size: clamp(38px, 6.2vw, 62px); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.015em; color: var(--navy); margin: 0 0 22px;
}
.hero .lede { font-size: 19.5px; line-height: 1.55; margin-bottom: 30px; max-width: 30em; }
.hero-note {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.6;
  color: var(--stone); margin-top: 18px; max-width: 32em;
}
.hero .cap-plain { font-family: var(--sans); font-size: 13.5px; }

/* Bigger hero button, and the arrow instead of a price. */
.btn-lg { font-size: 15px; padding: 18px 32px; }
.arr { display: inline-block; margin-left: 8px; transition: transform 0.15s ease; }
.btn:hover .arr { transform: translateX(4px); }
.cta-line { margin-top: 34px; }

/* Show the thing next to the claim, don't describe it further down. */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* Let the photo ride up next to the last line of the claim instead of sitting
   in its own tidy box beside it. */
@media (min-width: 861px) {
  .hero-grid > figure.pinned { margin-top: 54px; margin-left: -26px; }
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border: 2px solid var(--coral); background: var(--coral);
  color: var(--paper); transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: transparent; color: var(--coral); }
.btn-blue { border-color: var(--cobalt); background: var(--cobalt); color: var(--paper); }
.btn-blue:hover { background: transparent; color: var(--cobalt); }
.btn-block { display: block; text-align: center; }

/* ── What arrives — six squares ────────────────────── */
/* Squares, not icons. The whole envelope readable in five seconds. */
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 30px; list-style: none; margin-top: 8px; }
.cats .sq { display: block; width: 26px; height: 26px; margin-bottom: 12px; }
.cats h3 { font-size: 18px; margin-bottom: 6px; }
.cats p { font-size: 15.5px; line-height: 1.5; color: var(--stone); margin: 0; }
@media (max-width: 620px) { .cats { grid-template-columns: 1fr; gap: 26px; } }

/* The single-letter line. Deliberately a step down from the two cards —
   it's there for whoever goes looking, and shouldn't pull anyone off the 79. */
.aside {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  color: var(--stone); margin-top: 22px;
}
.aside a { color: var(--stone); }

/* ── Who's writing ─────────────────────────────────── */
.who { display: grid; grid-template-columns: 230px 1fr; gap: 32px; align-items: start; }
@media (max-width: 620px) { .who { grid-template-columns: 1fr; gap: 24px; } }

/* ── Price cards ───────────────────────────────────── */
/* Three columns, the middle one carried. The 19 on the left exists so the 79
   gets compared to something instead of being judged on its own. */
.cards {
  display: grid; grid-template-columns: 0.85fr 1.05fr 0.95fr;
  gap: 18px; margin-bottom: 22px; align-items: stretch;
}
.card { border: 1px solid var(--stone); padding: 26px 22px; display: flex; flex-direction: column; }
.card.featured { border: 2px solid var(--coral); position: relative; }
.card h3 { margin-bottom: 18px; }
.card .stack { flex: 1; margin-bottom: 24px; }
.card .stack li { font-size: 15.5px; }
.card-small h3 { color: var(--stone); }
.card-flag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 10px;
}
.btn-ghost { background: transparent; color: var(--stone); border-color: var(--stone); }
.btn-ghost:hover { background: var(--stone); color: var(--paper); }

/* The cards break the 680 column earlier than the hero does: three columns
   inside 680 are 200 px each, which is unreadable. */
@media (min-width: 1000px) and (max-width: 1099px) {
  .cards.bleed { width: 900px; margin-left: -110px; }
}

/* Under 1000 there isn't room for three. Stack them and put the 79 first —
   nobody should have to scroll past the 19 to find it. */
@media (max-width: 999px) {
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .cards.bleed { width: auto; margin-left: 0; }
  .card.featured { order: -1; }
}

/* ── Four answer lines ─────────────────────────────── */
.answers { display: grid; grid-template-columns: 90px 1fr; gap: 18px 16px; }
.answers dt { font-family: var(--sans); font-weight: 600; font-size: 12.5px; text-transform: uppercase; color: var(--plum); letter-spacing: 0.08em; padding-top: 5px; }
.answers dd { margin: 0; }
@media (max-width: 520px) {
  .answers { grid-template-columns: 1fr; gap: 6px 0; }
  .answers dd { margin-bottom: 18px; }
}

/* ── Footer ────────────────────────────────────────── */
footer { padding-top: 40px; padding-bottom: 56px; border-top: 1px solid rgba(122, 117, 108, 0.3);
  font-family: var(--sans); font-size: 14px; line-height: 1.65; color: var(--stone); }
footer p { margin-bottom: 14px; }
footer a { color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(0, 20, 68, 0.25); }
footer a:hover { border-bottom-color: var(--coral); }
footer .foot-made { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--navy); max-width: 30em; }
footer .foot-legal { font-size: 12.5px; margin-top: 22px; }
footer .foot-legal span { margin: 0 8px; }
footer .foot-legal a { color: var(--stone); border-bottom: 0; }
/* Room for the sticky price bar, so it never sits on the last line. */
@media (max-width: 760px) { footer { padding-bottom: 96px; } }

/* ── Made page cost table ──────────────────────────── */
.costs { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13.5px; }
.costs td { padding: 7px 0; border-bottom: 1px solid rgba(122, 117, 108, 0.3); }
.costs td:last-child { text-align: right; white-space: nowrap; }

/* ── Guarantee box ─────────────────────────────────── */
/* The reason someone sends 79 € to two people who won't have an address
   in four weeks. Earns its own frame, and a shove out of the column. */
.guarantee { border: 2px solid var(--coral); padding: 26px 24px; margin: 28px 0; background: var(--paper); }
.guarantee .label { margin-bottom: 14px; color: var(--coral); }
.guarantee p { font-size: 21px; line-height: 1.5; margin-bottom: 12px; }

/* ── Sticky price bar, mobile only ─────────────────── */
/* Sits above the cookie banner when both are up — see --consent-h. */
.pricebar {
  position: fixed; left: 0; right: 0; bottom: var(--consent-h, 0px);
  z-index: 900; display: none; align-items: center; gap: 14px;
  height: 56px; padding: 0 16px;
  background: var(--paper); border-top: 1px solid var(--cobalt);
}
.pricebar .pb-text { flex: 1; font-family: var(--sans); font-weight: 600; font-size: 14px; }
.pricebar .btn { padding: 10px 18px; }
@media (max-width: 760px) {
  .pricebar.is-on { display: flex; }
}

/* ── Notes to ourselves — everything still missing ─── */
/* Deliberately loud. Nothing here should survive to launch. */
.ph {
  border: 2px dashed var(--stone); padding: 24px 20px; margin: 32px 0;
  font-family: var(--mono); font-size: 13px; color: var(--stone); line-height: 1.6;
}
.ph strong { display: block; letter-spacing: 0.1em; margin-bottom: 8px; color: var(--plum); }
/* Notes must not eat a phone screen. Goes away with the last real asset. */
@media (max-width: 760px) {
  .ph { max-height: 420px; overflow: hidden; font-size: 11.5px; padding: 18px 14px; }
}
.tbd { font-family: var(--mono); font-size: 0.85em; color: var(--coral); }


/* ── Photo grid: the sort of thing that ends up in one ─ */
/* Phone pictures, mixed orientations. A masonry-ish two-up that doesn't
   pretend they were shot for a grid. */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 84px 24px; margin-top: 10px; }
.shots figure { margin: 0; }
.shots img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--warm);
}
/* Staggered, overlapping, different angles. The grid is still there
   underneath so it collapses cleanly to one column on a phone. */
.shots figure:nth-child(1) { transform: rotate(-3.6deg) translateY(10px); z-index: 1; }
.shots figure:nth-child(2) { transform: rotate(4.2deg) translate(-14px, 46px); z-index: 2; }
.shots figure:nth-child(3) { transform: rotate(2.6deg) translate(18px, -18px); z-index: 2; }
.shots figure:nth-child(4) { transform: rotate(-4.4deg) translate(-8px, 30px); z-index: 1; }
.shots figure { position: relative; }
.shots figure:nth-child(n) img { transform: none; }
@media (max-width: 620px) {
  .shots figure:nth-child(1) { transform: rotate(-2.6deg); }
  .shots figure:nth-child(2) { transform: rotate(3deg); }
  .shots figure:nth-child(3) { transform: rotate(-2deg); }
  .shots figure:nth-child(4) { transform: rotate(2.8deg); }
}
@media (max-width: 620px) { .shots { grid-template-columns: 1fr; gap: 40px; } }

/* The kids line sits next to their photo, same split as the portrait. */
.who figure { margin: 0; }
.who figure img { width: 100%; height: auto; display: block; }


/* ── Top bar ───────────────────────────────────────── */
/* The deadline and the only permanently visible way to the price. Sticky on
   every width, because on desktop there was no standing CTA at all. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap;
  background: var(--navy); color: var(--paper);
  padding: 9px 20px;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.35;
}
.topbar-cta {
  color: var(--paper); text-decoration: none; font-weight: 700;
  border-bottom: 1.5px solid var(--coral); padding-bottom: 1px; white-space: nowrap;
}
.topbar-cta:hover { color: var(--coral); border-color: var(--coral); }
@media (max-width: 520px) {
  .topbar { gap: 4px 14px; font-size: 12.5px; padding: 8px 16px; }
}

/* ── Photos as objects, not as images in a CMS ─────── */
/* A real offset shadow and a readable angle. Under half a degree nobody reads
   a tilt as intentional, it just looks like a rendering fault. */
/* Prints on a table: a tight contact shadow where the paper touches,
   plus a wide soft one. Two layers read as an object, one reads as a
   CSS effect. */
.shot {
  border: none;
  box-shadow:
    0 1px 2px rgba(0, 20, 68, 0.16),
    0 14px 34px -6px rgba(0, 20, 68, 0.22);
}
/* Angles like a Japanese city magazine: clearly set by hand, never
   all the same direction twice in a row. */
.tilt-a { transform: rotate(-3.2deg); }
.tilt-b { transform: rotate(2.6deg); }
.tilt-c { transform: rotate(-3.8deg); }
.tilt-d { transform: rotate(3.4deg); }
.tilt-e { transform: rotate(-2.4deg); }
.shots img {
  border: none;
  box-shadow:
    0 1px 2px rgba(0, 20, 68, 0.16),
    0 14px 30px -6px rgba(0, 20, 68, 0.2);
}

/* ── Pill labels on the flat-lay ───────────────────── */
/* The photo already shows what's in the envelope. These say it out loud so
   nobody has to read the section underneath to understand the product. */
.pin-wrap { position: relative; display: block; }
.pin {
  position: absolute; z-index: 2;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  line-height: 1; letter-spacing: 0.01em; color: var(--paper);
  padding: 8px 13px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 20, 68, 0.28);
}
.pin-cobalt { background: var(--cobalt); transform: rotate(-2.5deg); }
.pin-green  { background: var(--green);  transform: rotate(1.8deg); }
.pin-plum   { background: var(--plum);   transform: rotate(2.4deg); }
.pin-navy   { background: var(--navy);   transform: rotate(-1.6deg); }
@media (max-width: 520px) {
  .pin { font-size: 10.5px; padding: 6px 10px; }
}

/* ── Hand-written numbers instead of colour squares ── */
/* Jakob's own hand, photographed and cut out. Not a handwriting webfont:
   on a page that advertises "addressed by hand", a fake one would undo the
   claim faster than anything else on here. */
.cats .num { display: block; height: 34px; margin-bottom: 12px; }
.cats .num img { height: 100%; width: auto; display: block; }
.cats li:nth-child(2n) .num img { transform: rotate(1.5deg); }
.cats li:nth-child(3n) .num img { transform: rotate(-2deg); }


/* ── Masthead ──────────────────────────────────────── */
/* The newsletter's sticker and the product's name in Jakob's own hand,
   overlapping like two things dropped on the same table. */
.masthead { display: flex; align-items: flex-end; gap: 0; margin-bottom: 14px; }
.mh-sticker {
  width: 118px; height: auto; flex: none;
  transform: rotate(-2.2deg);
  box-shadow: 0 4px 12px rgba(0, 20, 68, 0.18);
  position: relative; z-index: 1;
}
.mh-word {
  width: 300px; height: auto; flex: none;
  margin-left: 18px; margin-bottom: -12px;
  transform: rotate(-1.2deg);
  position: relative; z-index: 2;
}
.hero .kicker { margin-bottom: 26px; }
@media (max-width: 520px) {
  .mh-sticker { width: 96px; }
  .mh-word { width: 220px; margin-left: 12px; }
}


/* ── Hand-written marks ────────────────────────────── */
/* Captions carry the facts and stay set in type. These carry the aside,
   two to four words, and there are only a few of them on purpose. */
.marked { position: relative; }
.mark { position: absolute; z-index: 3; height: auto; pointer-events: none; }
.mark-arguing   { width: 210px; right: -14px; bottom: 5%; transform: rotate(-6deg); }
.mark-lastnight { width: 190px; left: 22px;  top: 22px;   transform: rotate(-4deg); }

/* Desktop: above the row, aimed down-left at the 79. Mobile: inside the
   card, pointing at the title, because the cards stack and there is no
   row to sit above. */
.mark-thisone { width: 200px; right: -196px; top: -58px; transform: rotate(-13deg); }
@media (max-width: 999px) {
  /* Light ink now, so it has to stay on the navy, fully above the card. */
  .mark-thisone { width: 150px; right: 8px; top: -50px; transform: rotate(-5deg); }
  /* The heading fits on one line on most phones, so the arrow needs its
     own row; without this it lands on "get it". */
  .band-navy .cards { margin-top: 58px; }
}
@media (max-width: 520px) {
  .mark-arguing   { width: 156px; right: -4px; bottom: 4%; }
  .mark-lastnight { width: 150px; left: 14px; top: 14px; }
}

/* Signed promise. Both names, because both of us are making it. */
.sigs { display: flex; align-items: flex-end; gap: 26px; margin-top: 18px; }
.sigs img { height: 46px; width: auto; }
.sigs img:first-child { transform: rotate(-3deg); }
.sigs img:last-child  { transform: rotate(2deg); margin-bottom: 3px; }


/* Camel note sits on the fence planks, the one light patch in that photo. */
.mark-host { position: relative; }
/* Inside .shots every img gets width 100%, a shadow and a tilt; the note
   must not inherit any of that, hence the long selector. */
.shots .mark-host img.mark-wildlife {
  width: 172px; left: 4%; bottom: 6%;
  transform: rotate(-5deg); box-shadow: none; border: none;
}

/* ── OK stamp ──────────────────────────────────────── */
/* Real stamp ink, photographed. Multiply so it sits in the paper like a
   stamp does, instead of floating on top of it like a sticker. */
.stamp-ok { position: absolute; height: auto; mix-blend-mode: multiply; pointer-events: none; z-index: 3; }
.guarantee { position: relative; }
.guarantee .stamp-ok { width: 168px; right: -30px; top: -34px; transform: rotate(-7deg); opacity: 0.94; }
@media (max-width: 520px) {
  .guarantee .stamp-ok { width: 104px; right: -6px; top: -22px; }
}
/* Thanks page: the order, stamped. */
.thanks-fig { max-width: 420px; }
.stamp-thanks { width: 190px; right: -18px; bottom: 16%; transform: rotate(-9deg); }

.masthead + h2 { margin-top: 26px; }


/* ── Bands ─────────────────────────────────────────── */
/* Two, not six. The photo spread on warm grey, the decision on navy.
   Full-bleed without touching the column: a huge shadow paints the
   background sideways and clip-path keeps it from spilling vertically. */
.band {
  position: relative;
  box-shadow: 0 0 0 100vmax var(--band-bg);
  clip-path: inset(0 -100vmax);
  background: var(--band-bg);
  padding-top: 64px; padding-bottom: 72px;
}
.band-warm { --band-bg: var(--warm); }
.band-navy { --band-bg: var(--navy); color: var(--paper); }

/* Section separators would cut through a band; drop them at its edges. */
.band + section, section + .band { border-top: none; }

/* Navy band: type flips to paper, cards and the guarantee become
   paper slips lying on it. */
.band-navy h2,
.band-navy > p,
.band-navy .mono { color: var(--paper); }
.band-navy .aside { color: #B9B4A8; }
.band-navy .aside a { color: #B9B4A8; }
.band-navy .card { background: var(--paper); color: var(--navy); border-color: transparent; }
.band-navy .card.featured { border-color: var(--coral); }
.band-navy .card-small h3 { color: var(--stone); }
.band-navy .btn-ghost { color: var(--stone); border-color: var(--stone); }
.band-navy .guarantee { background: var(--paper); color: var(--navy); }
/* On navy the stamp can't hang off the box with multiply; it would turn
   black. It sits fully on the paper instead. */
.band-navy .guarantee .stamp-ok { right: 16px; top: 12px; width: 128px; }
.band-navy .guarantee .label { min-height: 48px; }
@media (max-width: 520px) {
  .band-navy .guarantee .stamp-ok { right: 8px; top: 8px; width: 96px; }
  /* Keep the label clear of the stamp: it wraps before it reaches the ink. */
  .band-navy .guarantee .label { padding-right: 100px; }
}

.shots figcaption { position: relative; z-index: 4; }


/* ── Hand-drawn frame on the 79 card ───────────────── */
/* Jakob's own box, drawn once. border-image keeps the four corners
   exactly as drawn (the crossings, the gap top left) and only stretches
   the straight runs, so the same drawing fits the tall desktop card and
   the squarer phone card without the stroke getting fat or thin.
   Slices are in image pixels: top right bottom left. */
.card.featured,
.band-navy .card.featured {
  border-style: solid;
  border-color: transparent;
  border-width: 18px 17px 18px 24px;
  border-image: url("/assets/frame-79.webp") 90 84 92 118 stretch;
  padding: 22px 26px 26px 20px;
}


/* Hand-written list title: the one heading where the form proves the
   claim. Text stays in the DOM for screen readers and search. */
.cats h3.hand-title { margin-bottom: 4px; line-height: 0; }
.cats h3.hand-title img { height: 46px; width: auto; display: block; margin-left: -3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The last answer block doesn't need a full section's worth of air before the footer. */
main > section:last-child { padding-bottom: 40px; }

/* ── Thanks page: pass it on ───────────────────────── */
.share h2 { font-size: 28px; }
.share-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.share-row .btn { font-family: var(--sans); }
button.btn { cursor: pointer; }
.share-note { margin-top: 14px; font-family: var(--sans); font-size: 14px; color: var(--stone); }
@media (max-width: 520px) { .share-row .btn { flex: 1 1 100%; text-align: center; } }