/* Postmello — marketing + legal site.
 *
 * One palette across all three surfaces (this site, the letter page, the
 * letter email): warm paper, mailbox red, bee honey. The old site ran a
 * saturated sky-blue gradient with white text and heavy drop shadows, which
 * fought the logo and dated the page; the logo is the only saturated thing
 * here now, and everything else gets out of its way.
 */

:root {
  /* ---- Ink ----
     Four steps, and the rule that governs them: **use whitespace to make this
     page quiet, never faint text.** Secondary copy used to sit at --ink-soft
     on a warm ground and looked elegant at reading distance while being hard
     to skim on a laptop, which is how a pricing section ended up invisible.
     Everything a visitor needs to understand is now --ink or --ink-soft;
     --ink-faint is for material nobody has to read. */
  --ink: #29211b;        /* headlines and anything primary */
  /* The mark sits a hair warmer and lighter than the headline ink. At Rubik 600
     across eight uppercase letters the wordmark carries more mass than any
     heading on the page, and at full --ink it read as the heaviest thing in the
     header rather than as a logo the page is printed under. */
  --ink-mark: #2c231d;   /* the wordmark, and only the wordmark */
  --ink-mid: #453b32;    /* ledes and the hero sentence — one step off black */
  --ink-soft: #62564c;   /* normal body, notes, nav links */
  --ink-faint: #918478;  /* TERTIARY ONLY: copyright, dates, separators */

  /* ---- Paper ----
     Three surfaces for the whole site, not a colour per section: the canvas,
     a barely-different second sheet, and one warm card. The accent colour IS
     the paper — the desks, stamps, stickers and bee bring every other colour
     on the page, and a standard web accent would only compete with them. */
  --paper: #faf7f2;      /* writing paper: the canvas */
  --paper-alt: #f7f2ea;  /* a second sheet — a tonal hair, not a band */
  --paper-card: #f1e8de; /* warm card stock: the one emphasised block */
  --card: #fdfbf8;       /* very light card: secondary information blocks */
  --line: #ddd4ca;
  --line-card: #ddd4ca;
  --red: #c8402f;
  --honey: #e9a227;
  --sky: #8fc3ee;

  /* Every surface carries the same seamless grain tile at 128px (the PNG is
     256px, so it lands 1:1 on a 2x screen). ~3.5% mean alpha: enough that the
     page reads as paper on a second look, not enough to touch legibility. */
  --grain: url("assets/paper-grain.png");
  --grain-size: 128px;

  /* ---- Faces ----
     THREE roles, and the rule is one line: **Rubik is the mark, Nunito is the
     voice, DM Mono is the apparatus.**

     --font-mark is Rubik Bold, and it is reserved for the wordmark — the header
     and the footer sign-off, nowhere else. That reservation is the whole point:
     a face used in one place reads as a logo, and the same face sprinkled over
     headings reads as a font choice. In sentences the product is always
     "Postmello"; only the mark is set POSTMELLO.

     --font-voice is Nunito and carries everything anyone reads as a sentence,
     from the hero down to the legal pages. It has the warmth of the app's own
     rounded lettering without tipping into a children's-book face, and unlike
     the old ui-rounded stack it is the SAME face for every visitor — the site
     used to render in SF Pro Rounded on Apple hardware and Segoe UI everywhere
     else, which is two different brands.

     --font-apparatus is DM Mono, for the postal furniture — eyebrows, plan
     names, the badge, the footer group labels. In THIS subject a monospace
     reads as franking and address labels rather than as code. Never set a
     paragraph in it. DM Mono ships 300/400/500 only, so apparatus text is
     weight 500 and never 600: asking for 600 gets a synthesised bold.

     These now come from Google Fonts (Patrick, 2026-08-15), so the site takes
     an external stylesheet where it previously took none. Every stack keeps its
     old system fallback, in that order, so a blocked or slow CDN degrades to
     what the site looked like yesterday rather than to Times New Roman. */
  --font-mark: "Rubik", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-voice: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-apparatus: "DM Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- Scales ----
     Until now this file had a palette and two lengths; every section then
     hard-coded its own margin and its own clamp(), which is why anything new
     bolted on looked bolted on. These are the three scales the page is built
     from, and nothing outside them should appear below. */

  /* Type. Ratio ~1.25, clamped so the top of the scale only arrives when
     there is width for it. Both ends are pinned deliberately: the low end is
     the phone reading size and the high end is the desktop one, so a clamp
     that only sets a maximum ends up phone-sized on a phone by accident.

     Rebuilt for Nunito (2026-08-15) and a step heavier and larger throughout.
     Nunito's x-height runs smaller than SF Pro Rounded's, so the old scale read
     a size down once the face changed; body copy also moves 17 → 19px, on the
     principle that **the page should be quiet because of whitespace, never
     because the text is small or faint.** */
  --fs-display: clamp(2.7rem, 5.2vw, 4.9rem);   /* 43 → 78px */
  --fs-section: clamp(2.15rem, 3.7vw, 3.4rem);  /* 34 → 54px */
  --fs-sub:     clamp(1.65rem, 2.4vw, 2.2rem);  /* 26 → 35px, subheadings */
  --fs-hero:    clamp(1.18rem, 1.55vw, 1.38rem);/* 19 → 22px */
  --fs-lede:    clamp(1.18rem, 1.4vw, 1.3rem);  /* 19 → 21px */
  --fs-body:    clamp(1.06rem, 0.95vw, 1.19rem);/* 17 → 19px */
  --fs-small:   1rem;                           /* 16px */
  --fs-micro:   0.85rem;                        /* 13.6px, DM Mono only */

  /* Space. Doubling-ish; --space-section is the page's vertical heartbeat and
     every band uses it, so the rhythm is set in one place. It runs to ~148px
     on a desktop: the sections are big pictures with a line of type over them,
     and at the old 104px they crowded into a scroll of panels. */
  --s-1: 6px;
  --s-2: 12px;
  --s-3: 20px;
  --s-4: 32px;
  --s-5: 52px;
  --s-6: 84px;
  --space-section: clamp(76px, 10vw, 148px);

  /* Measure. Prose stays near 65 characters; the hero and the collection grid
     get the page-wide one, which is what makes a desk nearly half the content
     width instead of a third of it. */
  --maxw: 720px;
  --maxw-wide: 940px;
  --maxw-page: 1200px;
  --maxw-read: 650px;
  --gutter: 22px;

  /* Cards are rare here and never SaaS cards: 12px is the ceiling, and nothing
     that uses it carries a drop shadow. --radius-media is for photographs,
     where a slightly larger corner reads as an object rather than a bleed. */
  --radius: 12px;
  --radius-media: 14px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  position: relative;
  font-family: var(--font-voice);
  color: var(--ink);
  line-height: 1.55;
  /* Nunito's regular is light on a warm ground; 450 is the weight at which body
     copy reads as ink rather than as grey. */
  font-weight: 450;
  font-size: var(--fs-body);
  background-color: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* The grain goes OVER the whole document rather than under it, and that is the
   difference between "the background has a texture" and "the site is printed
   on paper". It also fixes something a background-only grain broke: the hero
   JPEG has the device flattened onto a flat sheet of --paper, so against a
   textured page its surround appeared as a bare rectangle. Over the top,
   everything — page, photographs, tinted blocks — takes the same tooth.
   Absolute, not fixed: paper does not slide under the words as you scroll. */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--grain);
  background-size: var(--grain-size);
}

/* Links are ink with a rule under them, not red text.
   Red is the mailbox — the one saturated thing in the logo and the art — and
   as a link colour it was the loudest element on a page whose whole system
   says the accent is the paper. Underlined ink is what a printed page does:
   the link is marked, not coloured. The rule sits at a third strength so it
   reads as a mark rather than a border, and it takes the mailbox red on
   hover, which is the one place that colour still earns its keep.

   The standing underline is kept for links INSIDE PROSE, deliberately, against
   the "no underline by default" rule that governs the chrome. In a paragraph an
   unmarked link is indistinguishable from bold text, and the Privacy Policy and
   the blog are mostly paragraph. Navigation, footer and the editorial links —
   which sit alone, where nothing can be confused with them — carry no rule
   until hover. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(41, 33, 27, 0.32);
  text-underline-offset: 0.17em;
  transition: text-decoration-color 120ms ease;
}
a:hover { text-decoration-color: var(--red); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Header ---------- */
.site-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px;
  max-width: var(--maxw);
  margin: 0 auto;
}
/* The landing page is built on the 1200px measure, so its header has to be
   too — at the 720px doc width the mark sat 200px inboard of the headline
   beneath it, which reads as two pages stacked. The legal pages keep the
   narrow one, where it lines up with the 720px card. */
.site-head--wide { max-width: var(--maxw-page); }
.site-head img {
  /* The mark is a cut-out mailbox, not a rounded app tile — it carries its own
     silhouette, so no border-radius, and it can run bigger than the 34px tile
     did without crowding the wordmark. */
  width: 46px; height: 46px;
}
/* THE MARK. Rubik Bold, all caps, positive tracking — the one place on the site
   that face appears, alongside the footer sign-off. Written "Postmello" in the
   markup and uppercased here, so screen readers and copy-paste get the name the
   way it is spoken while the header shows the logo.

   It used to be the body face at 1.05rem with negative tracking, which is to
   say: an icon followed by ordinary site text. */
.site-head .name {
  font-family: var(--font-mark);
  /* 600, not 700 (2026-08-15). Rubik's Bold at 27px uppercase was a heavier
     object than the H1 underneath it; Semibold keeps the authority and gives
     the counters back. Tracking eased 0.045 → 0.025em to match: the wider
     letterspacing was compensating for the weight. */
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.72rem);   /* 22 → 27.5px */
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--ink-mark);
  line-height: 1;
}
/* The wordmark is a link on every page but the home page, and it must not
   pick up the prose underline — it is a logo. */
.site-head > a { text-decoration: none; }
.site-head nav { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.site-head .dot { color: var(--ink-faint); }
.site-head nav a {
  color: var(--ink-soft);
  font-weight: 550;
  font-size: 1.06rem;   /* 17px */
  text-decoration: none;
}
.site-head nav a:hover { color: var(--ink); text-decoration: none; }

/* ---------- Hero ---------- */
/* Two columns, and the product takes the larger one. The hero used to be a
   centred headline with the mascot beside it, and the actual app appeared
   below the fold as a separate figure — so the first screen of a page about a
   writing desk showed everything except the desk. Words left, desk right, and
   the visitor knows what this is before reading a line.
   43/57 rather than half and half: the text column lands near 480px, which is
   a comfortable measure for three short blocks, and every pixel it gives up
   goes to the screenshot. */
.hero {
  max-width: var(--maxw-page);
  margin: 0 auto;
  /* Almost nothing below: the next section brings its own --space-section, and
     stacking both left ~290px of empty paper under the device. */
  padding: clamp(20px, 3vw, 48px) var(--gutter) clamp(8px, 1.6vw, 24px);
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
/* One column below 900px, text first — which is already the source order, so
   nothing has to be reordered and the reading order stays the visual one. */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
    max-width: var(--maxw);
  }
}
.hero h1 {
  /* Balance beats a hard <br>: the headline keeps even lines at every width
     instead of stranding one word. */
  text-wrap: balance;
  font-size: var(--fs-display);
  margin: 0 0 var(--s-3);
  color: var(--ink);
  font-weight: 800;
  /* Nunito goes loose at display size; -0.025em is what pulls "A quiet place"
     back into one word-shape instead of five letters and four gaps. */
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.hero .tagline {
  font-size: var(--fs-hero);
  color: var(--ink-mid);
  max-width: var(--maxw-read);
  margin: 0 0 var(--s-4);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

/* The device is Apple's own iPad Air 13" (M4) product bezel, composited into
   the image itself rather than drawn in CSS. The bezel's screen hole is exactly
   2732x2048 — the native resolution of the simulator capture — so the shot
   lands 1:1 with no resampling. The surround is flattened onto --paper, so the
   JPEG's edge is invisible against the page and no alpha channel ships. Which
   also means NO border, radius or shadow here: the bezel already is the frame,
   and its drop shadow is baked into Apple's asset. */
.hero-shot {
  margin: 0;
}
.hero-shot > img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- The calm section: the mailbox, and the bee ---------- */
/* Words on one side, the thing the words describe on the other. Two versions
   preceded this: the writing canvas the step row already showed, then the bee
   alone — which illustrated the brand rather than the claim. The claim is
   "when a letter arrives, the flag goes up and it waits", and a mailbox with
   its flag up and three letters in it says that without a caption. */
.quiet-row {
  max-width: var(--maxw-page);
  margin: 0 auto;
  display: grid;
  /* Near enough to half and half — the words get 45% and the picture the
     rest. This is the philosophical middle of the product and the section it
     sits in can afford the asymmetry the letter-making row cannot. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}
/* And a little more air than its neighbours, for the same reason. */
#quiet { padding-block: calc(var(--space-section) * 1.15); }
.quiet-copy .lede { font-size: var(--fs-hero); }
.quiet-copy { text-align: left; }
/* Same specificity as `.feature .lede` loses to it on source order, and the
   sentence sat indented from its own heading by the auto margins. */
.quiet-row .quiet-copy .lede { margin-inline: 0 auto; }
.quiet-shot {
  position: relative;
  margin: 0;
  max-width: 520px;
  justify-self: center;
}
.quiet-shot > img:not(.bee):first-child {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-media);
  border: 1px solid var(--line);
}
/* Off the left edge on purpose: fully inside the frame the bee reads as a
   sticker lying on the desk, and half outside it reads as arriving. It carries
   a letter and the art already faces right, so it is flying INTO the picture,
   towards the box. A fifth of the frame wide — a character in the scene, not
   the subject of it. */
.quiet-bee {
  position: absolute;
  left: -7%;
  top: 40%;
  width: 21%;
  height: auto;
  filter: drop-shadow(-3px 7px 11px rgba(42, 33, 24, 0.20));
}
/* Stacked below 760px, picture under the sentence. */
@media (max-width: 760px) {
  .quiet-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--s-4);
  }
  .quiet-copy { text-align: center; }
  .quiet-copy .lede { margin-inline: auto; }
  .quiet-shot { max-width: 340px; }
  /* Barely outside the frame rather than 5% out: at 375px the picture is
     nearly full width, and the same overhang put the bee's wing on the
     viewport edge. */
  .quiet-bee { left: -1%; width: 22%; }
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  /* DM Mono ships 300/400/500 — 600 would be a synthesised bold. */
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--font-apparatus);
  font-size: var(--fs-micro);
  /* No text-transform here, unlike the other apparatus text: it would render
     Apple's "iPad" as "IPAD". */
  letter-spacing: 0.05em;
}

/* ---------- Steps ---------- */
/* Bezel-free on purpose: the hero shot has already said "iPad", and repeating
   the frame three more times spends ~15% of each image on chrome the reader no
   longer needs. Matches .shot's 940px so the row's outer edges line up with the
   hero above it.
   auto-fit rather than a fixed 3 columns: at 300px a panel is still legible,
   below that the row folds to two and then one on its own.

   Now a child of .feature, which owns the vertical rhythm and the gutter — the
   row used to be its own top-level section and carried its own margins, which
   is how the page ended up with two different section spacings. */
.steps {
  max-width: var(--maxw-page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.steps figure {
  margin: 0;
}
/* A hairline and a small radius, no shadow. Without the bezel these are bare
   crops, and cream-on-cream needs *some* edge or the paper in the shot bleeds
   into the paper of the page; a shadow would be the heavier way to say it. */
.steps img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
}
/* Captions carry the sequence, so they are labels rather than footnotes: full
   --ink, 600, and tightened tracking at size. At 0.95rem/--ink-mid they read as
   image credits and the row lost its "paper, writing, stamp" reading. */
/* Labels, not captions: at 16px they were image credits under three big
   pictures, and this row IS the section's copy. */
.steps figcaption {
  margin-top: 14px;
  text-align: center;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.5vw, 1.32rem);
  font-weight: 700;
  letter-spacing: -0.018em;
}

/* ---------- Feature bands ---------- */
/* Three sections of equal weight, each: a big heading, one line of lede, and
   one large piece of supporting art. Stacked and centred rather than the
   alternating left/right zigzag every SaaS page uses — the art here is
   landscape screenshots of a desk, and a half-width column would shrink the
   very craft the section exists to show.

   Bands alternate ground (paper / paper-deep / paper) so the three separate
   without any card, rule or number. They are not a sequence, so they are not
   numbered: order carries priority, not steps. */
.feature {
  padding: var(--space-section) var(--gutter);
}
/* The last section is typographic and the footer that follows brings its own
   air, so the full section padding underneath it opened a hole big enough to
   read as a missing block. */
main > .feature:last-child { padding-bottom: var(--s-5); }
/* A different sheet of paper, not a coloured band. --paper-alt is three units
   off the canvas — at the old --paper-deep these read as two full-width
   rectangles of another colour, which is the one thing the page's own
   background is not allowed to do. The hairline at each edge is what makes the
   change legible: a paper edge rather than a block. */
.feature--band {
  background-color: var(--paper-alt);
  border-block: 1px solid var(--line);
}
.feature-head {
  max-width: var(--maxw-wide);
  margin: 0 auto var(--s-6);
  text-align: center;
}
/* A heading with nothing under it (the letter-making and business-model
   sections are now a heading plus their art) needs less air beneath it than a
   heading with a sentence — otherwise the h2 floats between two voids. */
.feature-head:has(> h2:only-child) { margin-bottom: var(--s-5); }
/* Rules either side of the heading were tried and cut (Patrick, 2026-08-13:
   "the blue dividers are a strange choice and look weird"). The alternating
   band grounds already separate the sections, so the heading needs no device
   of its own — which leaves the type to do it, at full size. */
.feature h2 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-section);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  /* On the h2, not on its span: balancing is a block-level operation and had
     no effect on an inline child, which is why the left-aligned calm heading
     broke as "…without keeping / up." */
  text-wrap: balance;
}
.feature .lede {
  /* Two limits, and the tighter one wins: 58ch keeps the measure readable at
     small sizes, --maxw-read caps it at ~650px once the type is large enough
     that 58 characters would run wider than that. */
  max-width: min(58ch, var(--maxw-read));
  margin: 0 auto;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-mid);
  text-wrap: pretty;
}
/* The one flat claim left on the page: "No ads · No subscription required to
   write letters", under the three plan columns. Full --ink and 600 against the
   lede's --ink-mid — it is the sentence a reader should leave the section
   with, and it earns that by weight rather than by being a badge or a callout
   box. */
.feature .claim {
  max-width: min(52ch, var(--maxw-read));
  margin: var(--s-5) auto 0;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}

/* ---------- The circle of drawers ---------- */
/* Five drawers, each cut from a different desk, scattered instead of lined up.
   A straight row is what the single cropped strip already was, and it read as
   one thing repeated; broken apart, with each drawer tipped a degree or two and
   sitting at its own height, they read as five people. The tilts are fixed
   values rather than random so the arrangement is the same every load — this is
   a composition, not a shuffle. */
.circle {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-4) var(--s-3);
}
.circle img {
  /* Sized so all five fit one line at the wide measure: 5 x 168 + 4 x 20 = 920.
     At 186 they broke 4 + 1, and a single orphaned drawer reads as a mistake
     rather than as a scatter. */
  width: clamp(132px, 16vw, 168px);
  height: auto;
  display: block;
  filter: drop-shadow(-3px 6px 10px rgba(42, 33, 24, 0.16));
}
.circle img:nth-child(1) { transform: rotate(-2.5deg) translateY(4px); }
.circle img:nth-child(2) { transform: rotate(1.5deg)  translateY(-8px); }
.circle img:nth-child(3) { transform: rotate(-1deg)   translateY(6px); }
.circle img:nth-child(4) { transform: rotate(2deg)    translateY(-5px); }
.circle img:nth-child(5) { transform: rotate(-1.5deg) translateY(3px); }

/* The struck-through `.absences` list (photos / video / GIFs / threads /
   typing dots / read receipts) and the `.uses` list of relationships both
   lived here. Both are gone, for the same reason: they defined the product by
   enumeration, in the apparatus face, at the two moments the page most needed
   to sound like a person. Their content survives as prose — one bold line in
   the quiet section, one lede in the contacts section.

   Nothing on this page animates, so the only motion to answer for is the
   drawers' fixed tilts and the smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .circle img { transform: none; }
}

/* ---------- The worlds ---------- */
/* Two across, each nearly half the 1200px content measure — about 580px, or
   roughly double what a three-across row gave them. This was a carousel first
   (one visible, three hidden behind a swipe) and then a three-up row, and both
   made the desks read as variants of one product. At 580px you can see the
   mailbox, the plate, the paper on the desk: six places rather than six
   thumbnails, which is the only reason this section exists.

   Fixed 2 columns rather than auto-fit: with six items auto-fit can settle on
   a count that strands an orphan on the last row. */
.collections {
  max-width: var(--maxw-page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-4);
}
.collections figure {
  margin: 0;
  /* The plate name reads before the picture, the way a place is labelled on a
     map. figcaption is legal as the first child of a figure, so this needs no
     ordering trick and the DOM order is the reading order. */
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
/* No border. These are the most colourful things on the site and they carry
   their own edges — a hairline round each one turned six places into six
   cards. The radius stays so they read as objects rather than as bleeds. */
.collections img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-media);
}
/* Understated (2026-08-15). These were mono, uppercase and letterspaced — set
   like brass nameplates, on the theory that a collection name is taxonomy. Six
   of them across the most colourful block on the site, and the labels were
   performing as hard as the pictures. Fairy Glen, Seaside Post and Ember Peak
   are imaginative enough on their own; the name only has to say which desk you
   are looking at. Nunito, sentence case, full ink. */
.collections figcaption {
  text-align: center;
  font-size: clamp(1.12rem, 1.3vw, 1.25rem);   /* 18 → 20px */
  font-weight: 680;
  letter-spacing: -0.008em;
  color: var(--ink);
}

/* On a phone the same grid would make each world a ~150px card, which is the
   thumbnail problem the section was rebuilt to escape. So the grid becomes one
   large world at a time on a scroll-snap rail, with the next one showing at
   the edge so it is obvious there are more.

   CSS scroll-snap, not a JS carousel: native momentum, no autoplay, no dots,
   nothing to pause for reduced motion. The rail is full-bleed (negative
   margins cancel the section gutter) so a world can reach the screen edge, and
   scroll-padding keeps the snapped item off it. */
@media (max-width: 760px) {
  .collections {
    display: flex;
    gap: var(--s-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    /* Room for the peeking neighbour's shadow-free edge, and for the caption
       of the snapped one; without it the rail clips at the figure box. */
    padding-bottom: var(--s-1);
    scrollbar-width: none;
  }
  .collections::-webkit-scrollbar { display: none; }
  .collections figure {
    /* 78%, not 100%: the remaining fifth of the screen shows the start of the
       next desk, which is what tells a thumb there is anything to swipe. */
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
/* The rail is a scrollable region, so it has to be reachable by keyboard —
   Safari does not focus scroll containers on its own, hence tabindex in the
   markup and a visible ring here. */
.collections:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 8px;
  border-radius: var(--radius-media);
}

/* The drawer rail, one photograph rather than five cut-outs. */
.drawer-row {
  max-width: var(--maxw-wide);
  margin: 0 auto;
}
.drawer-row img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-media);
}

/* ---------- The editorial interlude ---------- */
/* Two ideas, one section, sitting between the calm section and the
   collections. Compact on purpose — this is an interlude, not a third pillar,
   so it runs at roughly three-quarters of the page's section rhythm and its
   headings are a size below every other h2 on the page.

   Editorial, not promotional: no cards, no shadows, no illustrations, no
   buttons. One hairline between the columns is the entire apparatus. */
.editorial-section { padding-block: calc(var(--space-section) * 0.72); }
.editorial {
  max-width: var(--maxw-page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 6vw, 96px);
}
.editorial-col + .editorial-col {
  border-left: 1px solid var(--line);
  padding-left: clamp(40px, 6vw, 96px);
  /* The gap already separates them; the rule needs the same space on both
     sides of itself or it reads as attached to the second column. */
  margin-left: calc(-1 * clamp(40px, 6vw, 96px) / 2);
}
/* Eyebrows are dark, not decorative grey. They label the two ideas, and a
   label nobody can read is just texture. */
.eyebrow {
  margin: 0 0 var(--s-3);
  font-family: var(--font-apparatus);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.editorial h2 {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.68rem, 2.5vw, 2.25rem);   /* 27 → 36px */
  font-weight: 750;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.editorial p:not(.eyebrow) {
  margin: 0 0 var(--s-4);
  max-width: 46ch;
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--ink-soft);
}
/* No rule until you reach for it. These sit alone under a paragraph with
   nothing around them to be confused with, so the standing underline was
   decoration; the arrow already says "this goes somewhere". On hover the rule
   arrives and the arrow steps 3px in the direction it points. */
.editorial-link {
  display: inline-block;
  font-size: 1.09rem;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
.editorial-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--red);
}
.editorial-link span {
  display: inline-block;
  transition: transform 140ms ease;
}
.editorial-link:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .editorial-link span { transition: none; }
  .editorial-link:hover span { transform: none; }
}
@media (max-width: 760px) {
  .editorial {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    max-width: var(--maxw-read);
  }
  /* Stacked, the vertical rule becomes a horizontal one between the two. */
  .editorial-col + .editorial-col {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: var(--s-5);
    margin-left: 0;
  }
}

/* ---------- The stationery spread ---------- */
/* Six desks say where you sit; this says what you can make there, which is the
   half of a collection the desk shots cannot show. It sits INSIDE the
   collections section, after the grid, rather than becoming a seventh section
   of its own — it is evidence for a claim already made, not a new argument.

   Every piece is a real shipped asset, one collection each where possible.
   Laid out in CSS rather than baked into a single JPEG for two reasons: any
   piece can be swapped for a better one without a re-render, and a phone can
   get a different arrangement instead of the same picture at a third the size.

   Percentage geometry inside an aspect-ratio box, so the whole composition
   scales as one object: at 1200px or 780px every overlap lands identically.
   The angles are fixed values — this is a composition, not a shuffle. */
/* A note on the grid, not a heading for what follows — so it sits close under
   the desks and well clear of the subheading beneath it. */
.collections-note {
  max-width: var(--maxw-read);
  margin: var(--s-5) auto 0;
  text-align: center;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* A subheading, deliberately a third the size of the section h2 above it: the
   spread is a flourish inside the collections section, not another argument. */
.stationery-head {
  max-width: var(--maxw-page);
  margin: var(--s-6) auto var(--s-5);
  text-align: center;
  font-size: var(--fs-sub);
  font-weight: 720;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stationery {
  position: relative;
  max-width: var(--maxw-page);
  margin: 0 auto;
  aspect-ratio: 1200 / 520;
}
.stationery img {
  position: absolute;
  display: block;
  height: auto;
}
/* Papers: opaque rectangles, so they need their own soft shadow to sit on the
   page and a hairline to keep cream-on-cream from bleeding into the ground. */
.st-paper {
  width: 24%;
  border-radius: 3px;
  border: 1px solid var(--line);
  box-shadow: -4px 8px 16px rgba(42, 33, 24, 0.13);
}
/* Tops ALTERNATE high/low, and that is load-bearing rather than decorative.
   Every paper in a fan has its right side covered by the next one, and three of
   these carry their art on the right: the dragon top-right, the frangipani
   bottom-right, the toadstool on the envelope. A sheet whose art is at the TOP
   therefore sits high with a low neighbour, and one whose art is at the BOTTOM
   sits low with a high neighbour, so the covering sheet reaches only the half
   that is empty cream. Change the order and the art disappears. */
.st-paper--1 { left: 0.5%;  top: 4%;  transform: rotate(-6deg); z-index: 1; }  /* wisteria: top */
.st-paper--2 { left: 13%;   top: 22%; transform: rotate(3deg);  z-index: 2; }  /* lanterns: all over */
.st-paper--3 { left: 25.5%; top: 3%;  transform: rotate(-2deg); z-index: 3; }  /* lighthouse: lower left */
.st-paper--4 { left: 38%;   top: 21%; transform: rotate(4deg);  z-index: 4; }  /* macarons: bottom row */
.st-paper--5 { left: 50.5%; top: 3%;  transform: rotate(-3deg); z-index: 6; }  /* dragon: TOP right */
.st-paper--6 { left: 63%;   top: 21%; transform: rotate(2deg);  z-index: 7; }  /* frangipani: BOTTOM right */
/* Behind the last sheet, not over it — over it, the envelope covered exactly
   the corner the frangipani lives in. It still reads: the paper ends at 87%
   and the envelope runs to the edge, so its own toadstool corner is clear. */
.st-envelope {
  position: absolute;
  width: 24%;
  top: 26%;
  right: 0.5%;
  transform: rotate(3deg);
  z-index: 5;
  filter: drop-shadow(-4px 8px 14px rgba(42, 33, 24, 0.16));
}
/* One prop per collection, paired with its own paper and set at a different
   height from its neighbour — evenly spaced along the bottom they line up into
   exactly the product row this section exists to avoid. The koi stamp is the
   exception and sits ON the envelope, where a stamp goes. */
.st-stamp, .st-sticker {
  z-index: 8;
  filter: drop-shadow(-2px 4px 7px rgba(42, 33, 24, 0.20));
}
.st-stamp   { width: 6.1%; }
.st-sticker { width: 5.6%; }
/* Twelve pieces along the foot of the fan — a stamp and a sticker from each
   collection — at ALTERNATING heights. Level, twelve of anything is a product
   row; staggered, they read as things set down. Sizes come down a notch from
   the six-piece version or they run into each other. */
.st-sticker--1 { left: 2.5%;  top: 65%; transform: rotate(-9deg); }  /* Fairy Glen */
.st-stamp--1   { left: 9.5%;  top: 76%; transform: rotate(5deg); }
.st-stamp--2   { left: 18%;   top: 67%; transform: rotate(-6deg); }  /* Seaside Post */
.st-sticker--2 { left: 25.5%; top: 78%; transform: rotate(7deg); }
.st-sticker--3 { left: 33%;   top: 67%; transform: rotate(8deg); }   /* Petit Café */
.st-stamp--3   { left: 40%;   top: 78%; transform: rotate(-4deg); }
.st-sticker--4 { left: 48%;   top: 68%; transform: rotate(6deg); }   /* Japanese Garden */
.st-stamp--4   { left: 55.5%; top: 79%; transform: rotate(-7deg); }  /* Baan Naa */
.st-sticker--5 { left: 63%;   top: 69%; transform: rotate(4deg); }
.st-stamp--5   { left: 70.5%; top: 79%; transform: rotate(-5deg); }  /* Ember Peak */
.st-sticker--6 { left: 78%;   top: 69%; transform: rotate(9deg); }
/* On the strip of envelope the last sheet leaves showing, clear of its own
   toadstool corner. */
.st-stamp--6   { left: 89%;   top: 30%; transform: rotate(-4deg); z-index: 9; }

/* On a phone the composition would put a 7%-wide stamp at 24px, which is a
   speck. The absolute geometry is dropped entirely and the pieces scatter in
   normal flow instead — same pieces, same fixed tilts, sizes that survive.

   Everything stays: three papers to a row rather than two, because at 44% the
   same fifteen objects ran 1200px down a phone, and the brief for this block
   is that it must not make the page substantially longer. Small and complete
   beats large and truncated — it is a spread, not a gallery. */
@media (max-width: 760px) {
  .stationery {
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s-2) var(--s-1);
  }
  .stationery img {
    position: static;
    top: auto; left: auto; right: auto;
  }
  .stationery .st-paper    { width: 31%; }
  .stationery .st-envelope { width: 31%; }
  .stationery .st-stamp    { width: 15%; }
  .stationery .st-sticker  { width: 14%; }
}

/* ---------- The plans: free core, optional additions ---------- */
/* Two earlier builds presented the three offerings as equals — first with
   vertical dividers, then with a rule over each column — and both made the
   reader assemble the story themselves. The story is not "three things". It
   is: Postmello is free, and there are two ways to add to it. So the shape now
   says that before any of it is read: one wide block, the words "Add more",
   then a pair.

   Pale warm fills rather than rules. The blocks have to read as objects to be
   grouped at all, and --paper-deep against --paper is about as little contrast
   as can do that — a tint, not a card: no border, no shadow, nothing to click.
   The floating top rules that were here added structure without hierarchy.

   Contrast was the other failure: eyebrows at --ink-soft/13px and notes at the
   same colour vanished at laptop distance on a warm ground. Eyebrows are
   bigger and --ink-mid now, notes are --ink-mid rather than --ink-soft, and
   the middle line is the biggest thing in every block. */
.plans {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.plans--add { grid-template-columns: repeat(2, 1fr); }
/* The two optional blocks are OUTLINED on near-white stock; the free one is
   FILLED on the warm card. Same paper family, different weight of sheet — the
   one you get is the substantial one, and the two you may add sit lighter. All
   three keep the page's typography exactly; nothing here gets a plan colour, a
   pill, a tick or a button. */
.plan {
  text-align: left;
  background-color: var(--card);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-media);
  padding: var(--s-4) var(--s-4) calc(var(--s-4) - 4px);
}
.plan--included {
  background-color: var(--paper-card);
  border-color: transparent;
  padding: var(--s-5) var(--s-4);
}
/* Plan names are taxonomy, so they keep the monospace — the page's small
   accent vocabulary, used for collection names and plan names and nothing
   else. 14px semibold: an eyebrow that can still be read. */
.plans dt {
  font-family: var(--font-apparatus);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: var(--s-2);
}
.plans dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.plans dd strong {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.plan--included dd strong { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.plans dd span {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-soft);
}
/* The hinge. Small and centred between the free block and the pair, in the
   apparatus face so it reads as a label on the group rather than as a fourth
   heading. */
.plans-more {
  margin: var(--s-4) auto var(--s-3);
  text-align: center;
  font-family: var(--font-apparatus);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Reassurance. Not a headline, but it was nearly invisible at --fs-small in
   --ink-soft, and it is the sentence that answers "so what is the catch". Full
   --ink at 600, and no strip behind it — a fourth tinted block below three
   tinted blocks would just look like a plan with no name. */
.reassurance {
  max-width: 880px;
  margin: var(--s-5) auto 0;
  font-size: clamp(1.06rem, 1.2vw, 1.12rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
}
/* One column on a phone: the pair side by side at 340px gives each block
   eleven characters a line. */
@media (max-width: 760px) {
  .plans, .plans--add {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .plans-more, .reassurance { max-width: 420px; }
}

/* ---------- Blog ---------- */
/* Articles sit on the paper itself rather than in the white card the legal
   pages use: those are documents to be consulted, these are meant to be read,
   and a 680px measure on the open page is the difference. Same palette, same
   faces, same grain — the blog is the site in long form, not a second site. */
/* --maxw, not a bespoke 680: with the gutter this puts the text edge exactly
   under the wordmark in the header, which a 680px box missed by 20px. */
.post, .blog-index {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--gutter) var(--s-6);
}
/* The blog is more editorial than the rest of the site but it is NOT a second
   brand: no serif, same three voices, same paper. An article title runs close
   to the homepage hero because on that page it IS the hero. */
.post h1, .blog-index h1 {
  margin: var(--s-3) 0 var(--s-3);
  font-size: clamp(2.25rem, 3.8vw, 3.9rem);   /* 36 → 62px */
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
/* The article's own subtitle, carried down from the piece rather than written
   for the web: it states the argument before the first paragraph starts. */
.post-deck {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);   /* 21 → 26px */
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink-mid);
  text-wrap: balance;
}
/* The byline takes the apparatus face — lower case, not the uppercase the
   eyebrows use. A typewritten credit under a headline is exactly the register
   this brand is in, and it separates the attribution from the prose without a
   rule or a colour. */
.post-meta {
  margin: 0 0 var(--s-5);
  font-family: var(--font-apparatus);
  font-size: 0.94rem;   /* 15px */
  font-weight: 500;
  color: var(--ink-soft);
}
/* A line the author set on its own and put in bold — a beat in the argument,
   not a heading. Given air either side and full ink, so it lands as one. */
.post-beat {
  margin: var(--s-4) 0 !important;
  font-size: 1.28rem !important;
  line-height: 1.45;
  color: var(--ink) !important;
}
.post-beat strong { font-weight: 600; }
.post p, .blog-index > p {
  font-size: 1.19rem;   /* 19px */
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
}
.post h2 {
  margin: var(--s-6) 0 var(--s-3);
  font-size: clamp(1.6rem, 2.3vw, 2.3rem);   /* 26 → 37px */
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* A subsection inside a section — "Replying on the letter itself". Close to
   body size and set in the ink of a heading: it has to be a step DOWN from the
   h2 above it, or the article grows a second layer of section breaks. */
.post h3 {
  margin: var(--s-5) 0 var(--s-3);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.post strong { color: var(--ink); font-weight: 600; }
/* The one pull-quote device: a hairline and a size, no italics and no quote
   marks — the same reasoning that took the italics off the footer tagline. */
.post blockquote {
  margin: var(--s-5) 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--line);
  font-size: 1.32rem;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.post ul { margin: 0 0 var(--s-3); padding-left: 1.15rem; }
.post li {
  font-size: 1.19rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}
.post-end {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* The index. Entries, not cards: a title, a sentence and a byline, separated
   by the same hairline the rest of the site uses for structure. */
.blog-intro { margin-bottom: var(--s-5) !important; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.post-list li:last-child { border-bottom: 1px solid var(--line); }
/* Blog-card headings sit at the editorial scale, a clear step under an article
   title but well above the deck beneath them. */
.post-list h2 {
  margin: 0 0 var(--s-2);
  font-size: clamp(1.62rem, 2.3vw, 2.1rem);   /* 26 → 34px */
  font-weight: 720;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.post-list h2 a { color: var(--ink); }
.post-list h2 a { text-decoration: none; }
.post-list h2 a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.post-list p {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-soft);
}
/* The subtitle repeated on the index, so the list says what each piece argues
   rather than only what it is called. */
.post-list-deck {
  font-size: clamp(1.15rem, 1.5vw, 1.28rem) !important;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-mid) !important;
  letter-spacing: -0.012em;
}
.post-list .post-meta { margin: 0 0 var(--s-3); font-size: 0.92rem; }
/* Whole-entry hover, so the target is the block and not just the six words of
   the title. */
.post-list li:hover h2 a { text-decoration: underline; text-decoration-color: var(--red); }
/* The current page in the nav is stated, not styled loudly. */
.site-head nav a[aria-current="page"] { color: var(--ink); font-weight: 650; }

/* ---------- Cards / doc pages ---------- */
.card,
.doc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  margin: 0 auto 32px;
  max-width: var(--maxw);
}
.doc h1 { margin-top: 0; font-size: 2.1rem; font-weight: 780; letter-spacing: -0.02em; line-height: 1.14; }
.doc h2 { font-size: 1.28rem; font-weight: 720; margin-top: 34px; color: var(--ink); letter-spacing: -0.012em; }
/* The Help page's questions. They were <h2 style="font-size:1.1rem"> — a
   heading level lied about in an inline style, five times, so a screen reader
   heard five sibling sections where there is one list of questions. Same size
   they rendered at before. */
.doc h3 { font-size: 1.16rem; font-weight: 700; margin-top: 30px; color: var(--ink); letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--ink-soft); line-height: 1.6; }
/* A date is genuinely tertiary — one of the few things --ink-faint is for. */
.doc .updated { color: var(--ink-faint); font-family: var(--font-apparatus); font-size: 0.85rem; margin-top: -8px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
/* Back links are navigation, so no standing rule under them; they take one on
   hover like the nav does. */
.back {
  color: var(--ink-soft);
  font-weight: 550;
  text-decoration: none;
}
.back:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); }
.doc a.back { display: inline-block; margin-bottom: 18px; font-weight: 650; }

.contact-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 18px;
}

/* ---------- Footer ---------- */
footer {
  text-align: center;
  /* Less above than a section break: the plans block that precedes it is
     typographic and already surrounded by air, so the full 84px on top of the
     section's own padding read as a hole. */
  padding: var(--s-4) 22px 44px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  max-width: var(--maxw);
  margin: 0 auto;
}
footer a { color: var(--ink-soft); font-weight: 550; font-size: 1rem; margin: 0 8px; text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); }
footer .dot { color: var(--ink-faint); }
footer .fine { display: block; margin-top: 10px; font-size: 0.875rem; font-weight: 450; color: var(--ink-faint); }

/* The one sign-off on the page, and it happens once. The page used to end
   three times over — a bolded claim under the plans, a gap, a centred
   name-and-tagline block, then the links — so it kept looking finished and
   then continuing. Name, tagline, links and copyright are one tight block now.

   "Letters at your own pace." replaces "One letter at a time." It names the
   distinction (letters rather than messages, and no clock) where the old line
   was gentle but unownable, and it holds for a grandparent as well as a
   nine-year-old. */
footer .signoff {
  margin: 0 0 var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* The mark again, and the only other place Rubik is allowed. Same treatment as
   the header at a size down: uppercased here, "Postmello" in the markup. */
footer .signoff-name {
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: 1.32rem;   /* 21px */
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--ink-mark);
  line-height: 1.15;
}
/* Not italic. Italics made the tagline read as a quotation or a decorative
   aside; upright, at nearly body size, it reads as brand copy — which is what
   it is. */
footer .signoff-line {
  font-size: 1.12rem;   /* 18px */
  font-weight: 500;
  color: var(--ink-mid);
}

/* Three labelled groups instead of one run of four links (2026-08-15).
   Blog · Help · Privacy Policy · Terms in a single row gave a legal page and a
   blog post the same weight and left nowhere to put an address, so a visitor
   looking for "how does this work for kids" or "who do I write to" had to guess
   which link hid it. Grouping says which is which in three words.

   Deliberately NOT a corporate footer: no Company, no Careers, no Partners, no
   social row, and nothing here that does not exist. Three groups, one line of
   labels, same quiet centre as before. */
footer .foot-groups {
  display: flex;
  justify-content: center;
  gap: clamp(var(--s-4), 7vw, var(--s-6));
  text-align: left;
  margin-bottom: var(--s-3);
}
.foot-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* The group labels are furniture, not links, so they take the apparatus face —
   the same reasoning as the plate names and the badge. Small and faint is right
   HERE (contra the whitespace-not-faint-text rule): nobody needs to read the
   word "Trust", it only has to separate the columns for someone scanning. */
.foot-label {
  margin: 0 0 2px;
  font-family: var(--font-apparatus);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Stacked, so the horizontal margin that separates inline footer links would
   only push each column off its own label. */
footer .foot-group a {
  margin: 0;
  font-size: 0.98rem;
}

@media (max-width: 560px) {
  /* One centred column each, in the same order. Two-up wrapping put Contact
     under Explore and left a hole where Trust should have been. */
  footer .foot-groups {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
  }
}

@media (max-width: 520px) {
  .doc, .card { padding: 26px 20px; }
  .site-head nav { gap: 14px; }
}