/* The Poem Pros: paper and ribbon. Cream paper, black ink, and the red half of a two-colour
   typewriter ribbon, used only where a typist would switch to it. Typed things in Courier Prime;
   reading text in Source Serif 4. */
:root {
  --paper: #FAF5E6; /* a warm cream with little yellow in it: #FFFDD0 read cream on iPhones but office-paper yellow on Android screens */
  --sheet: #fffefa;
  --band: #F1E8D0;
  --ink: #1d1a17;
  --ink-soft: #5e5546;
  --stamp: #2b2620;
  --line: #d8cfb4;
  --ribbon: #d9182b; /* brighter than #cc0014, which read as nearly black in thin strokes on Android; still 4.7:1 on the cream */
  --airmail-blue: #1f4e8c;
  --typed: 'Courier Prime', 'American Typewriter', 'Courier New', monospace;
  --read: 'Source Serif 4', Georgia, serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: clamp(17px, 2.4vw, 19px)/1.6 var(--read);
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--ink); }
a:hover { color: var(--ribbon); }
:focus-visible { outline: 3px solid var(--ribbon); outline-offset: 3px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.typed { font-family: var(--typed); }
.kicker { margin: 0 0 18px; font-family: var(--typed); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
h2 { margin: 0 0 16px; font-family: var(--typed); font-size: 30px; line-height: 1.25; }

/* Header */
.site-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
.wordmark { font-family: var(--typed); font-weight: 700; font-size: 20px; text-decoration: none; letter-spacing: .02em; }
.site-nav { display: flex; flex-wrap: wrap; gap: 8px .75em; font-family: var(--typed); font-size: 17px; }
.site-nav a { text-decoration: none; }
.site-nav a + a::before { content: "·"; display: inline-block; margin-right: .75em; color: var(--ribbon); text-decoration: none; }
.site-nav a.bol::before { content: none; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ribbon); text-underline-offset: 5px; }

/* The bunting: one typed letter per card, on a sagging string. Sizes are shares of the string's
   width (margin-top % is too), so it scales down to a phone as one piece. Each bunting sets
   --card, --space and --letter; each card its own --drop and --tilt. */
.bunting { position: relative; margin: 0 auto 56px; container-type: inline-size; }
.bunting svg { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.bunting svg path { fill: none; stroke: #8a7f6a; stroke-width: 1.5; }
.bunting h1 { margin: 0; position: relative; display: flex; justify-content: space-between; align-items: flex-start; font-size: inherit; }
.bunting .card {
  width: var(--card); aspect-ratio: 64 / 76; margin-top: var(--drop); transform: rotate(var(--tilt));
  background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(60, 40, 10, .12);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--typed); font-weight: 700; font-size: var(--letter); line-height: 1;
}
.bunting .card.red { color: var(--ribbon); }
.bunting .gap { width: var(--space); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 3px; font-family: var(--typed); font-weight: 700; font-size: 18px; text-decoration: none; }
.button.ribbon {
  /* a raised key: a flat red face, a darker red edge under it, a soft shadow on the paper; pressed, it
     sinks onto its edge */
  position: relative; top: 0; border: 0; color: #fff8ee;
  background: var(--ribbon);
  box-shadow: 0 3px 0 #8e0f1c, 0 6px 12px rgba(120, 10, 20, .26);
  text-shadow: 0 -1px 0 rgba(90, 0, 8, .35);
  transition: top .06s, box-shadow .06s, background .15s;
}
.button.ribbon:hover { color: #fff8ee; background: #e3253a; }
.button.ribbon:active { top: 2px; box-shadow: 0 1px 0 #8e0f1c, 0 2px 5px rgba(120, 10, 20, .24); }
.button.ribbon[disabled] { top: 0; }
.button.outline { border: 1.5px solid var(--ink); }
.soon { font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.more { font-family: var(--typed); font-weight: 700; font-size: 19px; color: var(--ribbon); }

/* Hero */
.hero { padding-top: 28px; padding-bottom: 72px; }
.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.split > .text { flex: 1 1 420px; min-width: 0; }
.split > figure { flex: 1 1 280px; max-width: 400px; min-width: 0; margin-inline: auto; }
.headline { margin: 0 0 24px; font-family: var(--typed); font-size: clamp(28px, 4.2vw, 38px); line-height: 1.3; min-height: 3.9em; }
.caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--ribbon); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lede { margin: 0 0 32px; max-width: 34em; }

/* A photo as a print, its white border and a slight tilt */
.print { margin: 0; position: relative; transform: rotate(1.5deg); }
.print.left { transform: rotate(-1.5deg); }
.print .frame { background: var(--sheet); padding: 14px 14px 18px; box-shadow: 0 6px 18px rgba(60, 40, 10, .18); }
.print img { display: block; width: 100%; height: auto; object-fit: cover; }
.print figcaption { margin-top: 12px; font-family: var(--typed); font-size: 16px; color: var(--ink-soft); }

/* A sheet of typing paper on a band */
.band { padding: clamp(40px, 9vw, 72px) 16px; background: var(--band); }
.sheet { max-width: 760px; margin: 0 auto; background: var(--sheet); padding: clamp(28px, 7vw, 56px) clamp(22px, 7vw, 64px); box-shadow: 0 1px 0 #e8dfbd, 0 10px 30px rgba(60, 40, 10, .12); font-family: var(--typed); }
.sheet h2 { font-size: 28px; margin-bottom: 28px; }
.typed-list { margin: 0 0 28px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 32px; font-family: var(--typed); font-size: 19px; }
.sheet .last { margin: 0; font-size: 22px; }
.sheet .last em { font-style: normal; font-weight: 700; color: var(--ribbon); }

/* Postmarks: hosts in the language of mail, rather than other companies' logos */
.section { padding-top: clamp(56px, 10vw, 88px); padding-bottom: clamp(56px, 10vw, 88px); }
/* Four across, so the eight sit in two even rows (two across, four rows, on a phone) */
.postmarks { margin: 0 0 36px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 680px; }
.postmarks li {
  aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--stamp);
  box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px var(--stamp);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 18px; font-family: var(--typed); color: var(--stamp);
}
.postmarks li:nth-child(4n+1) { transform: rotate(-6deg); }
.postmarks li:nth-child(4n+2) { transform: rotate(4deg); }
.postmarks li:nth-child(4n+3) { transform: rotate(-2deg); }
.postmarks li:nth-child(4n) { transform: rotate(6deg); }
.postmarks small { font-size: 11px; letter-spacing: .14em; }
.postmarks strong { font-size: 15px; line-height: 1.2; margin-top: 4px; }

/* Airmail */
.airmail { max-width: 1072px; margin: 0 auto; padding: 10px; background: repeating-linear-gradient(135deg, var(--ribbon) 0 18px, var(--paper) 18px 30px, var(--airmail-blue) 30px 48px, var(--paper) 48px 60px); }
.airmail .inner { background: var(--sheet); padding: clamp(26px, 6vw, 44px) clamp(20px, 6vw, 48px); }
.airmail .countries { margin: 0 0 26px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 .6em; font-family: var(--typed); font-size: 19px; line-height: 2; }
.airmail .countries li { white-space: nowrap; }
.airmail .countries li:not(:last-child)::after { content: " ·"; }
.airmail .close { margin: 0; font-family: var(--typed); font-size: 22px; font-weight: 700; }

/* Video */
.video { max-width: 720px; margin: 0 auto; }
.video lite-youtube { max-width: 100%; }

/* Roster */
.roster { margin: 0; padding: 0; list-style: none; columns: 3 200px; column-gap: 32px; font-family: var(--typed); font-size: 18px; line-height: 1.9; }

.story p { margin: 0 0 20px; }
.story p.first::first-letter { font-family: var(--typed); font-weight: 700; font-size: 3.35em; float: left; line-height: .82; margin: 4px 6px 0 0; color: var(--ribbon); }
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .story p.first::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 .12em 0 0; -webkit-initial-letter: 2; initial-letter: 2; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 28px; padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-family: var(--typed); font-size: 16px; color: var(--ink-soft); }
.site-footer a { color: var(--ink-soft); }

@media (max-width: 600px) {
  .site-nav { gap: 6px .5em; font-size: 15px; justify-content: center; }
  .site-nav a + a::before { margin-right: .5em; }
  .split { gap: 40px; }
  .postmarks { grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; gap: 16px 28px; }
  .postmarks li { padding: 12px; }
  .postmarks strong { font-size: 14px; }
  .site-header { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
}

/* A smaller print beside a section's text */
.split > figure.small { flex-basis: 240px; max-width: 300px; }

/* Events: how it works, as a typed numbered list */
.steps { margin: 0 0 32px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; max-width: 34em; }
.steps li { counter-increment: step; position: relative; padding-left: 2.2em; }
.steps li::before { content: counter(step) "."; position: absolute; left: 0; font-family: var(--typed); font-weight: 700; color: var(--ribbon); }
.steps strong { font-family: var(--typed); }

/* Every client, typed as one flowing line, so there are no uneven rows at any width */
.guestbook .clients { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px .55em; font-size: 17px; line-height: 1.9; text-align: center; }
.guestbook .clients li { white-space: nowrap; }
.guestbook .clients li:not(:last-child)::after { content: " ·"; color: var(--ribbon); }
.guestbook .clients li.eol::after, .airmail .countries li.eol::after { content: none; }
.guestbook { max-width: 960px; }

/* The booking form */
.subtext { margin: 0 0 30px; font-size: 16px; color: var(--ink-soft); }
.subtext a { color: var(--ink-soft); }
.booking { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.booking .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.booking .wide { grid-column: 1 / -1; }
.booking label { font-family: var(--typed); font-weight: 700; font-size: 17px; }
.booking .optional { font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.booking input, .booking select, .booking textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #b9ae8f; border-radius: 3px;
  background: var(--sheet); color: var(--ink); font: 18px/1.4 var(--typed);
}
.booking textarea { resize: vertical; }
.booking input:focus, .booking select:focus, .booking textarea:focus { outline: 3px solid var(--ribbon); outline-offset: 1px; border-color: var(--ink); }
.booking button { border: 0; cursor: pointer; justify-self: start; align-self: flex-start; }
.booking .hint { margin: 6px 0 0; font-size: 16px; color: var(--ink-soft); }
.booking .hint a { color: var(--ink-soft); }

@media (max-width: 600px) {
  .booking { grid-template-columns: 1fr; }
}

/* The hidden field bots fill in and people never see */
.booking .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.booking .hint.problem { color: var(--ribbon); }
.booking button[disabled] { opacity: .7; cursor: progress; }
.thanks { padding: 28px 30px; background: var(--sheet); border-left: 0; box-shadow: 0 6px 18px rgba(60, 40, 10, .12); }
.thanks h3 { margin: 0 0 10px; font-family: var(--typed); font-size: 22px; color: var(--ribbon); }
.thanks p { margin: 0; }

/* Send a quippie: the paper at its real proportions (3 by 4.5 inches), and inside it a grid of type
   positions - 22 columns by 22 lines at pica, with two fifths of an inch round it - so a cell is one
   strike of the typewriter. The stage is the paper's width; everything is measured in shares of it
   (cqw), so the paper, the type and the feed scale as one piece. The paper starts almost wholly inside
   the machine, with its first line at the roller, and rises one line (5.556cqw) per line typed: --row
   is the line the carriage is on. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quippie-page { display: flex; flex-direction: column; align-items: center; padding-top: 0; padding-bottom: clamp(56px, 10vw, 88px); }
.quippie-intro { max-width: 34em; text-align: center; margin-bottom: 18px; }
.quippie-intro p { margin: 0 0 10px; }
.quippie-title { margin: 0 0 8px; font-family: var(--typed); font-size: clamp(30px, 5vw, 40px); line-height: 1.2; }
.quippie { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* A short window: about six lines of paper show above the roller, the rest fading out at the top as
   it rises behind the machine; "Take it out" (.out) shows the whole card. */
.stage { --w: min(540px, 90vw); position: relative; width: var(--w); height: calc(var(--w) * 0.54); container-type: inline-size; overflow: hidden; cursor: text; transition: height .3s, width .3s; }
.stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12cqw; z-index: 3; background: linear-gradient(var(--paper), rgba(250, 245, 230, 0)); pointer-events: none; }
/* pulled out, the whole paper fits in the window, so it can be seen - and screenshotted - in one piece */
.stage.out { --w: min(540px, 90vw, calc((100vh - 24px) / 1.54)); --w: min(540px, 90vw, calc((100svh - 24px) / 1.54)); height: calc(var(--w) * 1.54); }
.stage.out::before, .stage.out .machine, .stage.out .start-hint { display: none; }
.stage.out .card { top: 2cqw; transform: none; }
.start-hint { position: absolute; left: 0; right: 0; top: 9cqw; margin: 0; text-align: center; font-family: var(--typed); font-size: 4.2cqw; color: var(--ink-soft); transition: opacity .3s; }
.stage.started .start-hint { opacity: 0; }
.stage.turning .card { transition: none; } /* the paper follows the finger */
.quippie .card {
  position: absolute; left: 0; top: 20.556cqw; display: block; width: 100%; aspect-ratio: 3 / 4.5; z-index: 1;
  filter: drop-shadow(0 5px 10px rgba(60, 40, 10, .22));
  transform: translateY(calc((var(--row, 0) + var(--look, 0)) * -5.5556cqw)); transition: transform .3s cubic-bezier(.3, .7, .2, 1);
}
.machine { position: absolute; left: -2%; right: -2%; top: 40cqw; bottom: 0; z-index: 2; }
.machine .roller { position: absolute; left: 0; right: 0; top: 0; height: 6cqw; border-radius: 3cqw; background: linear-gradient(#4a4138, #1d1a17 55%, #3a332b); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.machine .body { position: absolute; left: 4%; right: 4%; top: 4cqw; bottom: 0; border-radius: 2cqw 2cqw 0 0; background: linear-gradient(#5b5145, #3a332b); }
.quippie .type {
  position: absolute; top: 9.259%; bottom: 9.259%; left: 13.333%; right: 13.333%;
  display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); grid-template-rows: repeat(22, minmax(0, 1fr));
  font-family: var(--typed); font-size: 5.5cqw; line-height: 1; color: #1d1a17;
}
/* The paper: beige kraft stock, a sheet folded and torn into eighths. Its torn sides are drawn by
   quippie.js as a clip-path; the shadow sits on the card around it, since a clip cuts its own shadow. */
.quippie .paper {
  position: absolute; inset: 0;
  background-color: #e4cfa4;
  background-image:
    radial-gradient(rgba(255, 250, 235, .18) 0.6px, transparent 1px),
    radial-gradient(rgba(90, 70, 40, .10) 0.6px, transparent 1px),
    repeating-linear-gradient(27deg, rgba(120, 95, 60, .05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-61deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 11px),
    linear-gradient(165deg, rgba(255, 250, 235, .18), rgba(150, 105, 55, .10));
  background-size: 3px 3px, 5px 5px, auto, auto, auto;
  background-position: 0 0, 1px 2px, 0 0, 0 0, 0 0;
}
.quippie .type { z-index: 1; }
.quippie .cell { display: flex; align-items: center; justify-content: center; white-space: pre; }
.quippie .cell > * { pointer-events: none; }
.quippie .cell { color: rgba(24, 20, 16, var(--ink, .9)); }
.quippie .cell.red { color: var(--ribbon); }
.quippie .cell.patch { background: #fbfaf4; box-shadow: 0 0 0 .5px rgba(150, 130, 90, .35), inset 0 0 2px rgba(0, 0, 0, .05); border-radius: 1px; }
.quippie .cell.strike { animation: strike .09s ease-out; }
@keyframes strike { from { transform: scale(1.25); opacity: .3; } }
.quippie .cell.caret { box-shadow: inset 0 -2px 0 var(--ribbon); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { box-shadow: none; } }
.quippie .typed-input {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; resize: none; overflow: hidden;
  background: transparent; color: transparent; caret-color: transparent; font-size: 16px; opacity: .01;
}
.stage:focus-within .card { outline: 3px solid var(--ribbon); outline-offset: 4px; }
.quippie .controls { width: min(540px, 90vw); margin-top: 20px; }
.quippie .ribbons { margin: 0 0 14px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quippie .ribbons legend { float: left; margin-right: 6px; font-family: var(--typed); font-weight: 700; font-size: 16px; }
.quippie .ribbons label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid #b9ae8f; border-radius: 3px; font: 700 15px var(--typed); cursor: pointer; }
.quippie .ribbons input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.quippie .ribbons label:has(input:checked) { border-color: var(--ink); background: var(--sheet); }
.quippie .ribbons label:has(input:focus-visible) { outline: 3px solid var(--ribbon); outline-offset: 2px; }
.quippie .ribbons .optional { font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.quippie .dot { width: 12px; height: 12px; border-radius: 50%; }
.quippie .dot.black { background: var(--ink); }
.quippie .dot.red { background: var(--ribbon); }
.quippie .dot.white { background: #fff; box-shadow: 0 0 0 1.5px #b9ae8f; }
.quippie .status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; }
.quippie .count { margin: 0; font-family: var(--typed); font-size: 16px; color: var(--ink-soft); }
.quippie .note { min-height: 1.6em; margin: 8px 0 0; font-family: var(--typed); font-size: 15px; color: var(--ribbon); }
.quippie-page .how { margin: 6px 0 0; font-size: 16px; color: var(--ink-soft); }
.quippie .switch { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink); font: 700 15px var(--typed); cursor: pointer; }
.quippie .switch[aria-pressed="false"] { color: var(--ink-soft); border-color: #b9ae8f; }
.quippie .order { margin-top: 32px; text-align: center; }
.quippie .order .hint { margin: 10px 0 0; font-size: 16px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .quippie .cell.caret { animation: none; } .quippie .card { transition: none; } }
.quippie .status .switches { display: flex; gap: 8px; margin-left: auto; }
.quippie .count { white-space: nowrap; }

/* The discards pile: the discard, the fresh (or picked-up) card fed in, and the pile, each card small
   on its own torn piece and a button to pick it back up. "loading" puts the next card in place unseen
   and without motion; "feeding" brings it up from inside the machine. */
.stage.burying .card { transition: transform .38s ease-in, opacity .38s ease-in; transform: translateY(40cqw) rotate(-4deg); opacity: 0; }
.stage.loading .card { transition: none; opacity: 0; }
.stage.feeding .card { animation: feed .42s cubic-bezier(.2, .7, .3, 1); }
@keyframes feed { from { transform: translateY(22cqw); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.quippie .bury { width: 100%; margin-top: 12px; }
.discards { margin-top: 10px; border: 1.5px solid #b9ae8f; border-radius: 3px; background: rgba(255, 254, 250, .5); }
.discards summary { min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--typed); }
.discards summary::marker, .discards summary::-webkit-details-marker { display: none; }
.discards summary::before { content: "▸"; color: var(--ink-soft); transition: transform .2s; }
.discards[open] summary::before { transform: rotate(90deg); }
.discards .pile-title { font-weight: 700; font-size: 16px; }
.discards .pile-count { font-size: 15px; color: var(--ink-soft); }
.discards summary.nudge { animation: nudge .5s ease-out; }
@keyframes nudge { 30% { background: rgba(204, 0, 20, .08); transform: translateX(4px); } }
.discards .hint { margin: 0 14px 16px; font-size: 15px; color: var(--ink-soft); }
.discards [data-clear] { margin: 0 14px 16px; }
.pile { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 20px 16px; margin: 0 14px 18px; }
.pile li { display: flex; flex-direction: column; align-items: center; }
.discard { position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; container-type: inline-size; filter: drop-shadow(0 3px 6px rgba(60, 40, 10, .2)); transition: transform .15s; }
.discard:hover { transform: translateY(-3px) rotate(-1deg); }
.discard:focus-visible { outline: 3px solid var(--ribbon); outline-offset: 4px; }
.discard > .paper { position: relative; display: block; width: 100%; height: auto; inset: auto; aspect-ratio: 3 / 4.5; }
.discard .mini-type {
  position: absolute; top: 9.259%; left: 13.333%; right: 13.333%; height: calc(100cqw * 1.5 * .81481);
  display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); grid-template-rows: repeat(22, minmax(0, 1fr));
  font-family: var(--typed); font-size: 5.5cqw; line-height: 1; color: rgba(24, 20, 16, .88);
}
.discard .mini-type > span { display: flex; align-items: center; justify-content: center; }
.discard .mini-type .red { color: var(--ribbon); }
.discard .mini-type .patch { background: #fbfaf4; }
.pile .when { margin-top: 8px; font-family: var(--typed); font-size: 13px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .stage.burying .card { transition: none; } .discards summary.nudge { animation: none; } .discard { transition: none; } }

/* Ordering */
.quippie .order .hint.problem { color: var(--ribbon); }
.quippie .order .button[disabled] { cursor: progress; }
.quippie .ordered { margin: 0 auto 22px; max-width: 30em; padding: 22px 26px; background: var(--sheet); box-shadow: 0 6px 18px rgba(60, 40, 10, .12); }
.quippie .ordered h2 { margin: 0 0 8px; font-size: 22px; color: var(--ribbon); }
.quippie .ordered p { margin: 0; }

/* The envelope: like the discards pile, but the cards in it go to one address together */
.envelope { margin: 0 auto 18px; width: min(540px, 90vw); text-align: left; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--sheet); }
.envelope summary { min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--typed); }
.envelope summary::marker, .envelope summary::-webkit-details-marker { display: none; }
.envelope summary::before { content: "✉"; color: var(--ribbon); }
.envelope .pile-title { font-weight: 700; font-size: 16px; }
.envelope .env-count { font-size: 15px; color: var(--ink-soft); }
.envelope summary.nudge { animation: nudge .5s ease-out; }
.envelope .hint { margin: 0 14px 16px; font-size: 15px; color: var(--ink-soft); }
.order-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* A letter struck over another after a backspace: on top of it, in the same cell */
.quippie .cell { position: relative; }
.quippie .cell .layer, .discard .mini-type .layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(24, 20, 16, var(--ink, .85)); }
.quippie .cell .layer.red, .discard .mini-type .layer.red { color: var(--ribbon); }
.discard .mini-type > span { position: relative; }

/* Home: the bunting is the page's title, at the very top, with the nav under it */
/* nowrap: a wrapping column sizes the title's height before giving it its width, and a bunting with no
   width yet has no height - the nav then sat on top of the cards */
.site-header.home { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 26px; padding-top: 26px; padding-bottom: 8px; }
.site-header.home .title-link { display: block; text-decoration: none; color: inherit; }
.site-header.home .bunting { margin: 0 auto; }
.site-header.home .site-nav { justify-content: center; }
.site-header.home + main .hero { padding-top: 34px; }

/* Phone: on Home the two buttons come first, then the line about what we do, then the photo */
@media (max-width: 600px) {
  .hero .split > .text { display: flex; flex-direction: column; container-type: inline-size; }
  .hero .split > .text .actions { order: -1; margin-bottom: 26px; justify-content: center; }
  /* three lines on a phone: the longest, "ideas to send typewritten", is 25 characters of 0.6em */
  .hero .headline { min-height: 0; font-size: min(28px, calc(100cqw / 15.4)); }
}

/* Send: the CRAFT A QUIPPIE bunting is the page's title */
/* wider than the text under it: centred on the page, not squeezed into the intro's column */
.quippie-intro .bunting { width: min(820px, 94vw); margin: 8px 0 26px 50%; transform: translateX(-50%); }

/* Send, organised: one column the machine's width; a quiet row of tools; one red action, one outline
   action and a text link; the price once; the envelope as a strip; the rest folded away. */
.quippie-intro p { max-width: 30em; margin: 0 auto; }
.quippie .tools, .quippie .order, .quippie-page .folded, .quippie .note { width: min(540px, 90vw); }
.quippie .tools { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.quippie .tools .ribbons { margin: 0; gap: 6px; }
.quippie .tools .ribbons label { min-height: 40px; padding: 0 12px; font-size: 14px; }
.quippie .tools .count { font-size: 14px; }
.quippie .tools .switches { display: flex; gap: 6px; margin-left: auto; }
.quippie .tool { min-height: 40px; padding: 0 12px; border: 1.5px solid #c9bea0; border-radius: 3px; background: transparent; color: var(--ink-soft); font: 700 14px var(--typed); cursor: pointer; }
.quippie .tool:hover { color: var(--ink); border-color: var(--ink); }
.quippie .tool[data-sound][aria-pressed="true"] { color: var(--ink); }
.quippie .note { min-height: 1.4em; margin: 6px 0 0; font-size: 14px; }
.quippie .order { margin-top: 12px; text-align: left; }
.button.wide { width: 100%; justify-content: center; }
.quippie .secondary { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quippie .secondary .switch { min-height: 44px; }
.text-button { padding: 8px 4px; border: 0; background: none; color: var(--ink-soft); font: 15px var(--typed); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.text-button:hover { color: var(--ribbon); }
.quippie .price { margin: 12px 0 0; font-size: 15px; color: var(--ink-soft); text-align: center; }
.quippie .envelope { width: 100%; margin: 18px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.quippie .envelope summary { padding: 10px 0; min-height: 0; }
.quippie .env-cards { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px 10px; margin: 4px 0 8px; }
.quippie .env-cards .when { font-size: 11px; margin-top: 4px; }
.quippie-page .folded { margin-top: 22px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.quippie-page .folded > summary { min-height: 44px; padding: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; font: 700 15px var(--typed); color: var(--ink-soft); }
.quippie-page .folded > summary::marker, .quippie-page .folded > summary::-webkit-details-marker { display: none; }
.quippie-page .folded > summary::before { content: "▸"; transition: transform .2s; }
.quippie-page .folded[open] > summary::before { transform: rotate(90deg); }
.quippie-page .folded .how { margin: 0 0 12px; font-size: 15px; }
.quippie .discards.folded { margin-top: 0; }
.quippie .discards .hint, .quippie .discards [data-clear], .quippie .discards .pile { margin-left: 0; margin-right: 0; }
@media (max-width: 600px) {
  .button.wide { font-size: 16px; padding: 0 14px; }
}

/* the status line: what the machine just said on the left, lines left on the right */
.quippie .status-line { width: min(540px, 90vw); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.quippie .status-line .note { width: auto; margin: 0; flex: 1; }
.quippie .status-line .count { flex: none; margin: 0; font-size: 14px; }
.quippie .tools { flex-wrap: nowrap; }
.quippie .text-button { white-space: nowrap; }
.quippie-intro { margin-bottom: 6px; }
@media (max-width: 600px) {
  .quippie .tools { flex-wrap: wrap; }
  .quippie .tools .ribbons { flex-wrap: nowrap; }
  .quippie .tools .switches { margin-left: 0; }
  .quippie .tools .ribbons label, .quippie .tool { padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .quippie .secondary { flex-direction: column; align-items: stretch; gap: 4px; }
  .quippie .secondary .switch { width: 100%; }
  .quippie .secondary .text-button { align-self: center; }
}

/* the discards pile sits right under Start over, the link that sends cards to it */
.quippie .order .discards.folded { margin: 6px 0 4px; border-top: 0; }
.quippie .order .discards.folded > summary { min-height: 36px; font-size: 14px; }

/* under the buy button: a line for anything that goes wrong, then the terms, folded */
.quippie .order-note { margin: 6px 0 0; min-height: 0; font-size: 15px; color: var(--ink-soft); text-align: center; }
.quippie .order-note:empty { margin: 0; } /* kept in the layout, so screen readers hear what appears in it */
.quippie .terms { margin-top: 10px; border-top: 0; }
.quippie .terms > summary { min-height: 36px; font-size: 14px; }
.quippie .terms-list { margin: 0 0 12px; padding-left: 18px; font-size: 15px; color: var(--ink-soft); }
.quippie .terms-list li { margin-bottom: 6px; }
.quippie .terms-list strong { color: var(--ink); }

/* Privacy: a plain reading page */
.privacy h1 { margin: 28px 0 6px; font-family: var(--typed); font-size: clamp(30px, 5vw, 40px); }
.privacy h2 { margin: 34px 0 10px; font-size: 22px; }
.privacy ul { padding-left: 20px; }
.privacy li { margin-bottom: 10px; }

/* Send: the choice first - prompt mode or pro mode - then the one chosen */
.quippie[hidden], .mode-choice[hidden] { display: none; }
.mode-choice { width: min(540px, 90vw); display: grid; gap: 14px; margin: 18px 0 0; }
.mode { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; text-align: left; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--sheet); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 #b9ae8f; transition: transform .12s, border-color .12s; }
.mode:hover { transform: translateY(-2px); border-color: var(--ribbon); }
.mode:active { transform: translateY(1px); box-shadow: 0 1px 0 #b9ae8f; }
.mode:focus-visible { outline: 3px solid var(--ribbon); outline-offset: 3px; }
.mode-name { font: 700 22px var(--typed); }
.mode-name::after { content: " \2192"; color: var(--ribbon); }
.mode-what { font: 17px/1.45 var(--read); color: var(--ink-soft); }
@media (min-width: 760px) { .mode-choice { width: min(760px, 94vw); grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .mode { transition: none; } }

.quippie .mode-bar { width: min(540px, 90vw); margin: 4px 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 700 15px var(--typed); }
.quippie:not([data-mode]) .mode-bar, .quippie:not([data-mode="prompt"]) .prompt-card { display: none; }
.quippie[data-mode="prompt"] .stage, .quippie[data-mode="prompt"] .tools, .quippie[data-mode="prompt"] .status-line,
.quippie[data-mode="prompt"] [data-discard], .quippie[data-mode="prompt"] .discards { display: none; }

/* Prompt mode: an index card of a form */
.prompt-card { width: min(540px, 90vw); display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 18px; background: var(--sheet); border: 1.5px solid #b9ae8f; border-radius: 3px; box-shadow: 0 6px 18px rgba(60, 40, 10, .1); }
.prompt-card label { margin-top: 12px; font: 700 17px var(--typed); }
.prompt-card label:first-child { margin-top: 0; }
.prompt-card .optional { font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.prompt-card textarea, .prompt-card input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #b9ae8f; border-radius: 3px; background: #fff; color: var(--ink); font: 18px/1.4 var(--typed); }
.prompt-card textarea { resize: vertical; }
.prompt-card textarea:focus, .prompt-card input:focus { outline: 3px solid var(--ribbon); outline-offset: 1px; border-color: var(--ink); }
.prompt-card .prompt-note { margin: 10px 0 0; font-size: 15px; color: var(--ink-soft); }

/* The envelope: each card with its settings beside it - copies, and as is or creative license */
.quippie .env-note { margin: 0 0 12px; font-size: 14px; }
.quippie .env-cards { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 14px; }
.quippie .env-cards li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.env-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.env-settings .env-name { flex-basis: 100%; font: 700 14px var(--typed); }
.env-settings .copies { display: inline-flex; align-items: center; gap: 4px; }
.quippie .env-settings .copies .tool { min-width: 40px; padding: 0; font-size: 18px; color: var(--ink); }
.quippie .env-settings .copies .tool[disabled] { opacity: .35; cursor: default; }
.env-settings output { min-width: 5.5em; text-align: center; font: 14px var(--typed); }
.env-settings .license { min-height: 40px; max-width: 100%; padding: 0 8px; border: 1.5px solid #c9bea0; border-radius: 3px; background: var(--sheet); color: var(--ink); font: 14px var(--typed); }
.env-settings .license-fixed { font: 14px var(--typed); color: var(--ink-soft); }
.discard .mini-idea { position: absolute; inset: 9% 9%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; font: 8px/1.25 var(--read); color: var(--ink); text-align: left; }

/* Home, About and Events: the line over the opening paragraph, said out loud */
.kicker.asked { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; line-height: 1.35; letter-spacing: .04em; color: var(--ribbon); }
.mode-tag { font: 700 14px var(--typed); letter-spacing: .06em; text-transform: uppercase; color: var(--ribbon); }
.quippie .ordered [data-share-sent] { margin-top: 16px; }