/* ═══════════════════════════════════════════════════════════════════
   THE LETTER THAT MISSED THE POST
   Page-scoped styles for /the-letter-experience/ only.

   This file adds nothing to the design system and changes nothing in
   it. It defines only the shapes the system has no component for: a
   returned envelope, a drawer, a field of marks, and the writing
   sheet. Everything else on the page uses fenweh-site.css as it
   stands, so the type scale, the colours, the radii, the buttons, the
   chips, the fields and the FAQ are the site's own.

   Every colour below resolves to a design-system token. No new hues
   are introduced. The one addition is a monospace face, used only for
   postal furniture (the TO and FROM lines, the stamp, the reason it
   came back), because a letter form is the one place on this site
   where a typewriter voice carries meaning rather than decoration.

   Loaded after fenweh-site.css, so the tokens below are already
   defined. Every rule is prefixed .tl- and cannot reach another page.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --tl-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --tl-hair:rgba(31,36,48,.12);
  --tl-rule:rgba(31,36,48,.22);
  --tl-ink-70:rgba(31,36,48,.70);
  --tl-ink-55:rgba(31,36,48,.55);
  --tl-ink-38:rgba(31,36,48,.38);
  --tl-shadow:0 10px 28px -10px rgba(20,37,54,.28);
}

/* ── Moment 1: the returned envelope ─────────────────────────────────
   Full height so the letter is the only thing on screen, but never
   taller than the viewport allows on a short phone in landscape. */
/* The opening withholds the name for six moments, so it cannot carry a
   logo. It carries the contour instead, and it is the site's real one:
   fenweh-halos.js injects the same living SVG it uses everywhere else,
   so it drifts, travels its colours and answers the pointer. A static
   background image sat there inert, which is not what these do.

   This is only a container for the engine to inject into. The halo
   sizes itself to 128% of it, so the box is what sets the scale. */
.tl-m1{position:relative;min-height:min(88vh,760px);display:grid;
  place-items:center;padding-block:56px;overflow:hidden}
.tl-m1__halo{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(78vw,560px);aspect-ratio:1;pointer-events:auto;z-index:0}
.tl-m1__halo .fw-halo{opacity:.20}
.tl-m1 > .wrap{position:relative;z-index:1}
.tl-envelope{position:relative;width:100%;max-width:520px;margin:0 auto;
  background:var(--white);border:1px solid var(--tl-hair);
  border-radius:var(--r-lg);box-shadow:var(--tl-shadow);
  padding:30px 26px 26px}
.tl-envelope__row{display:flex;align-items:baseline;gap:12px;
  margin-bottom:12px}
.tl-envelope__k{font-family:var(--tl-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tl-ink-38);
  flex:0 0 46px}
.tl-envelope__v{font-family:var(--tl-mono);font-size:15px;
  color:var(--ink-900);border-bottom:1px solid var(--tl-hair);
  flex:1;padding-bottom:5px;min-height:22px}
.tl-envelope__reason{font-family:var(--tl-mono);font-size:15px;
  color:var(--ink-900);margin-top:16px;min-height:1.6em;line-height:1.6}
.tl-envelope__reason::after{content:"";display:inline-block;width:8px;
  height:1.05em;background:var(--saffron-500);vertical-align:-2px;
  margin-left:2px;animation:tl-caret 1s steps(1,end) infinite}
@keyframes tl-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* The stamp reads as ink pressed onto paper, so it sits slightly off
   square and slightly outside the envelope's corner. */
.tl-stamp{position:absolute;top:-14px;right:14px;
  font-family:var(--tl-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--saffron-600);border:2px solid var(--saffron-600);
  border-radius:3px;padding:6px 10px;background:var(--white);
  transform:rotate(-6deg)}

.tl-m1__line{font-family:var(--serif);font-weight:600;
  font-size:clamp(21px,4.4vw,30px);line-height:1.16;
  letter-spacing:-.012em;color:var(--ink-900);text-align:center;
  margin:30px auto 0;max-width:19ch;text-wrap:balance}

/* ── The quiet scroll cue ────────────────────────────────────────── */
.tl-cue{display:block;text-align:center;font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tl-ink-38);
  text-decoration:none;padding:16px 12px;min-height:44px}
.tl-cue:hover,.tl-cue:focus-visible{color:var(--saffron-600)}

/* ── Moment 3: what we say instead ───────────────────────────────── */
.tl-said{display:grid;gap:12px;max-width:520px;margin:0 auto}
.tl-said li{list-style:none;font-family:var(--serif);
  font-size:clamp(17px,3.4vw,21px);color:var(--tl-ink-55);
  text-align:center;line-height:1.35}

/* ── Moment 4: the drawer ────────────────────────────────────────────
   A navy line, not faux wood. The handle is the affordance and the
   whole thing is a real button so it reaches the keyboard. */
.tl-drawer{display:block;width:100%;max-width:420px;margin:0 auto;
  background:transparent;border:1.5px solid var(--ink-900);
  border-radius:var(--r-md);padding:26px;cursor:pointer;
  transition:transform .28s ease,box-shadow .28s ease}
.tl-drawer:hover,.tl-drawer:focus-visible{transform:translateY(-2px);
  box-shadow:var(--tl-shadow)}
.tl-drawer__handle{display:block;width:56px;height:7px;border-radius:4px;
  background:var(--ink-900);margin:0 auto}
.tl-drawer__hint{display:block;text-align:center;font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tl-ink-38);margin-top:14px}
.tl-drawer[aria-expanded="true"] .tl-drawer__hint{opacity:0}

.tl-frags{max-width:640px;margin:0 auto;padding:0;
  display:grid;gap:0;overflow:hidden;
  max-height:0;transition:max-height .5s ease}
.tl-frags[data-open="true"]{max-height:1400px}
.tl-frags li{list-style:none;font-family:var(--serif);
  font-size:clamp(16px,3.2vw,19px);line-height:1.45;color:var(--ink-900);
  padding:20px 4px;border-bottom:1px solid var(--tl-hair)}
.tl-frags li:last-child{border-bottom:0}

/* ── Moment 5: the living archive ───────────────────────────────────
   One letter at a time. There is no grid, because a grid invites
   comparison and this is meant to invite recognition. */
.tl-letter{max-width:600px;margin:0 auto;text-align:center}
.tl-letter__who{font-family:var(--tl-mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tl-ink-38);
  margin-bottom:16px}
.tl-letter__body{font-family:var(--serif);
  font-size:clamp(19px,4vw,26px);line-height:1.34;color:var(--ink-900);
  min-height:4.2em;text-wrap:balance}
.tl-letter__foot{display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center;align-items:center;margin-top:26px}
.tl-felt{background:var(--lilac-100);color:var(--lilac-700)}
.tl-felt[aria-pressed="true"]{background:var(--lilac-500);color:var(--white)}

/* ── Moment 6: scale, made human ─────────────────────────────────── */
.tl-count{font-family:var(--serif);font-weight:600;
  font-size:clamp(46px,12vw,92px);line-height:1;letter-spacing:-.02em;
  color:var(--ink-900);text-align:center}
.tl-field{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
  max-width:640px;margin:30px auto 0}
.tl-field i{display:block;width:11px;height:8px;border-radius:1.5px;
  border:1px solid var(--tl-rule);opacity:0;
  transform:translateY(3px);transition:opacity .4s ease,transform .4s ease}
.tl-field[data-in="true"] i{opacity:.5;transform:none}

/* ── The writing sheet ───────────────────────────────────────────────
   A full-screen surface rather than a modal box, because the act it
   holds deserves the whole screen and nothing behind it. */
.tl-sheet{position:fixed;inset:0;z-index:120;background:var(--ivory);
  overflow-y:auto;display:none}
.tl-sheet[data-open="true"]{display:block}
.tl-sheet__bar{position:sticky;top:0;z-index:2;background:var(--ivory);
  border-bottom:1px solid var(--tl-hair);
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px}
.tl-sheet__note{font-family:var(--sans);font-size:12.5px;
  color:var(--tl-ink-55)}
.tl-sheet__x{background:transparent;border:0;font-size:22px;
  line-height:1;color:var(--ink-900);cursor:pointer;
  min-width:44px;min-height:44px;border-radius:var(--r-full)}
.tl-sheet__in{max-width:640px;margin:0 auto;padding:34px 20px 90px}
.tl-step{display:none}
.tl-step[data-on="true"]{display:block}

/* ── The sheet of paper ──────────────────────────────────────────────
   A textarea in a box is a form. This is meant to be a letter, so it is
   a sheet: a date, a salutation, and ruled lines the writing sits on.

   The rules are painted on the textarea itself rather than behind it,
   so the first line of text and the first rule share an origin and
   cannot drift apart. That only holds while the textarea never scrolls
   internally, because a textarea's background stays put while its text
   moves. So it grows to fit its content and the page scrolls instead,
   which also removes a nested scrollbar nobody wants mid-sentence.

   --tl-lh is the single source of truth: line-height, the rule spacing
   and the gradient stop all read from it. Change it in one place. */
.tl-paper{--tl-lh:34px;
  background:var(--white);border:1px solid var(--tl-hair);
  border-radius:var(--r-lg);box-shadow:var(--tl-shadow);
  padding:26px 22px 30px;margin-top:20px}
.tl-paper__meta{display:flex;justify-content:flex-end;
  font-family:var(--tl-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tl-ink-38);margin-bottom:18px}
.tl-salutation{font-family:var(--serif);font-size:clamp(18px,4vw,21px);
  line-height:var(--tl-lh);color:var(--ink-900);margin:0}

.tl-write{display:block;width:100%;box-sizing:border-box;
  font-family:var(--serif);font-size:clamp(18px,4vw,21px);
  line-height:var(--tl-lh);color:var(--ink-900);
  border:0;padding:0;margin:0;resize:none;overflow:hidden;
  min-height:calc(var(--tl-lh) * 8);
  background-color:transparent;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--tl-lh) - 1px),
    var(--tl-hair) calc(var(--tl-lh) - 1px),
    var(--tl-hair) var(--tl-lh));
  background-attachment:local}
.tl-write:focus{outline:none}
.tl-write::placeholder{color:var(--tl-ink-38)}

/* Autosave, stated rather than implied. It appears when a save lands and
   fades back, so the reassurance is tied to the event rather than being
   a permanent claim on the screen. */
.tl-saved{display:flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:12.5px;color:var(--tl-ink-38);
  margin-top:14px;min-height:1.4em;
  opacity:0;transition:opacity .3s ease}
.tl-saved[data-on="true"]{opacity:1}
.tl-saved::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--lilac-500);flex:0 0 auto}

.tl-micro{font-family:var(--sans);font-size:13px;color:var(--tl-ink-38);
  min-height:1.4em;margin-top:6px}

/* On a phone the sheet runs to the edges, because a letter you are
   writing should not be a card floating on a background. The action
   stays reachable with the keyboard open. */
@media(max-width:639px){
  .tl-paper{border-radius:0;border-left:0;border-right:0;
    margin-left:-20px;margin-right:-20px;padding:22px 20px 26px;
    box-shadow:none}
  .tl-sheet__actions{position:sticky;bottom:0;background:var(--ivory);
    border-top:1px solid var(--tl-hair);padding:12px 0;margin-top:20px}
}

/* The seal. There is no undo, so it is a deliberate, single target. */
.tl-seal{position:relative;display:block;width:120px;height:120px;
  margin:26px auto 0;border-radius:50%;border:2px solid var(--saffron-600);
  background:var(--white);color:var(--saffron-600);cursor:pointer;
  font-family:var(--tl-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;transition:transform .2s ease}
.tl-seal:hover,.tl-seal:focus-visible{transform:scale(1.04)}

/* Sealing is the one irreversible thing on the page, so it is the one
   place worth animating: the stamp presses down, the colour sets like
   wax, and a single ring spreads out from the impression. It is short,
   it happens once, and the step only advances when it has landed. */
.tl-seal[data-sealing="true"]{cursor:default;
  animation:tl-press .62s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tl-press{
  0%  {transform:scale(1);   background:var(--white);         color:var(--saffron-600)}
  38% {transform:scale(.86); background:var(--saffron-600);   color:var(--white)}
  62% {transform:scale(1.04)}
  100%{transform:scale(1);   background:var(--saffron-600);   color:var(--white)}
}
.tl-seal::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--saffron-600);opacity:0;pointer-events:none}
.tl-seal[data-sealing="true"]::after{animation:tl-ring .74s ease-out .12s forwards}
@keyframes tl-ring{
  0%  {transform:scale(1);   opacity:.65}
  100%{transform:scale(1.75);opacity:0}
}
.tl-seal[disabled]{cursor:default}
.tl-seal[disabled]:hover{transform:none}

@media(prefers-reduced-motion:reduce){
  .tl-seal[data-sealing="true"]{animation:none;
    background:var(--saffron-600);color:var(--white)}
  .tl-seal[data-sealing="true"]::after{animation:none}
}

/* Consent tiers. Each is a full-width target with its own explanation,
   because a one-line checkbox cannot carry what these mean. */
.tl-tiers{display:grid;gap:12px;margin-top:22px}
.tl-tier{display:flex;gap:12px;align-items:flex-start;
  padding:15px 16px;border:1.5px solid var(--line-2);
  border-radius:var(--r-lg);background:var(--white);cursor:pointer}
.tl-tier:has(input:checked){border-color:var(--lilac-500);
  background:var(--lilac-100)}
.tl-tier input{margin-top:3px;width:19px;height:19px;flex:0 0 auto;
  accent-color:var(--lilac-700)}
.tl-tier b{display:block;font-family:var(--sans);font-size:15px;
  font-weight:700;color:var(--ink-900);margin-bottom:3px}
.tl-tier span{display:block;font-family:var(--sans);font-size:13px;
  line-height:1.5;color:var(--tl-ink-55)}

.tl-opt{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* ── Chips used as controls rather than labels ───────────────────────
   The design system's .chip is a static tag. These are answers, so they
   need a target size, a cursor and a selected state. That is added to
   the component rather than a lookalike being built beside it: the age
   and place rows were hand-rolled at 10px 15px on white while the row
   directly above them used the real .chip at 7px 14px on cream, which
   is two chip styles on one screen.

   The component alone is not enough here. .chip paints itself
   --cream-2, which is #F7F5F0, the exact value of --ivory, and the
   writing sheet's ground is ivory. On this page a plain .chip is
   therefore the same colour as the surface behind it with no border,
   which is invisible as a control: the row read as loose text and could
   not be recognised as selectable. So chips used as controls get a
   border and a paper ground here. That is the component extended for
   its context, not replaced. */
.chip[aria-pressed]{min-height:44px;cursor:pointer;font-family:var(--sans);
  border:1.5px solid var(--line-2);background:var(--white)}
.chip[aria-pressed="true"]{background:var(--ink-900);color:var(--white)}


/* ── Desktop ─────────────────────────────────────────────────────── */
@media(min-width:760px){
  .tl-envelope{padding:38px 34px 32px}
  .tl-field i{width:13px;height:9px}
  .tl-sheet__in{padding:48px 24px 110px}
}

/* ── Reduced motion ──────────────────────────────────────────────────
   The caret, the drawer and the field all animate. Under a reduced
   motion preference each becomes a state change rather than a
   transition, and nothing is lost but the movement. */
@media(prefers-reduced-motion:reduce){
  .tl-envelope__reason::after{animation:none;opacity:1}
  .tl-drawer,.tl-frags,.tl-field i,.tl-seal{transition:none}
  .tl-field i{opacity:.5;transform:none}
}

/* ── The crisis block ────────────────────────────────────────────────
   The site's own footer crisis panel is built for the dark footer
   ground. This is the same content on a light band and inside the
   writing sheet, so it borrows the shape and re-states the colour
   against ivory. It appears twice on purpose: once on the page, and
   once at the moment someone is about to hand a letter over. */
.tl-crisis{background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--saffron-500);border-radius:var(--r-lg);
  padding:18px 20px;margin-top:24px}
.tl-crisis p{font-family:var(--sans);font-size:14px;line-height:1.6;
  color:var(--tl-ink-70);margin:0}
.tl-crisis b{color:var(--ink-900)}

/* ── Chips used as answers rather than labels ────────────────────────
   The design system's .chip is a static tag. Here it is a control, so
   it gets a target size, a cursor and a selected state, without
   changing .chip anywhere else on the site. */
.tl-sheet .chip-row{display:flex;flex-wrap:wrap;gap:9px}

/* Each step focuses its own heading so a screen reader announces the
   move. That focus is programmatic, never a keyboard landing, so it
   should be heard and not seen. Keyboard focus elsewhere in the sheet
   keeps its ring. */
.tl-sheet [tabindex="-1"]:focus{outline:none}

/* Where you are in the sheet. Five steps with no indication of length
   is a page asking for trust while withholding it, but a loud progress
   bar would be wrong for what this asks of someone. So: quiet, and it
   announces itself to a screen reader when it changes. */
.tl-progress{font-family:var(--tl-mono);font-size:11px;letter-spacing:.1em;
  color:var(--tl-ink-38);white-space:nowrap;margin-left:auto;
  padding-right:4px}

/* The textarea carries its own visible salutation above it, so its label
   is for assistive tech only rather than shown twice. */
.tl-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Keeping the link that deletes the letter ────────────────────────
   The earlier version was a button reading "Keep the link that deletes
   it", which is opaque and, worse, invited a click when the thing you
   actually need to do is save it. It is now a block that explains what
   the link is, shows it, and copies it.

   It was also hidden with the hidden attribute alone, which does not
   work on a .btn: the UA rule [hidden]{display:none} loses to
   .btn{display:inline-flex}, so a dead control was on screen for
   everyone. The rule below makes hidden mean hidden inside this page
   regardless of what else sets display. */
[hidden]{display:none !important}

.tl-keep{margin-top:30px;padding:20px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--white);text-align:left}
.tl-keep h3{font-family:var(--serif);font-size:18px;color:var(--ink-900);
  margin-bottom:8px}
.tl-keep p{font-family:var(--sans);font-size:13.5px;line-height:1.6;
  color:var(--tl-ink-55);margin:0}
.tl-keep__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.tl-keep__url{flex:1 1 220px;min-width:0;font-family:var(--tl-mono);
  background:var(--ivory)}
.tl-keep__said{font-family:var(--sans);font-size:12.5px;
  color:var(--lilac-700);margin-top:10px;min-height:1.3em}

/* ── The delete page ─────────────────────────────────────────────── */
.tl-del{margin-top:26px}
.tl-del__ref{font-family:var(--tl-mono);font-size:13px;color:var(--ink-900);
  background:var(--ivory);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 14px;word-break:break-all;
  margin-top:6px}


/* ── Telling the drawer and the archive apart ────────────────────────
   These two sat next to each other as centred quoted text and read as
   the same section twice. They are not the same thing: the drawer holds
   the kinds of things that go unsaid, several at once, ours and
   illustrative. The archive holds one letter a person left, presented
   as the object it is.

   So the archive letter now sits on paper, echoing the envelope from
   the opening, and the drawer stays a bare stack of scraps. The
   difference is now the first thing you see rather than something you
   have to read for. */
.tl-letter__sheet{background:var(--white);border:1px solid var(--tl-hair);
  border-radius:var(--r-lg);box-shadow:var(--tl-shadow);
  padding:30px 26px;max-width:520px;margin:0 auto}
.tl-letter__sheet .tl-letter__body{min-height:0}

/* Until real letters back this section, it must not present written
   examples as things people actually left. Removed by flipping
   ARCHIVE_IS_SAMPLE in the builder on the day that changes. */
.tl-sample{font-family:var(--sans);font-size:12.5px;color:var(--tl-ink-38);
  text-align:center;margin:14px 0 26px}

/* ── A way in, at any point ──────────────────────────────────────────
   Writing the letter is what this page is for, and the first button
   that opened it sat four screens down, 59% of the way through. Anyone
   who arrived already knowing what they wanted to say had to scroll
   past two thirds of the page to be allowed to say it.

   This reuses the site's own persistent action bar, which already
   appears once past the opening and retracts near the footer where the
   same action is offered in full, so moment 1 stays uninterrupted and
   nothing nags at the end. The site limits it to phones because
   elsewhere it is a booking prompt; here it is the point of the page,
   so on a larger screen it becomes a quiet floating action instead of
   a full-width bar, which would be far too heavy for this. */
@media(min-width:761px){
  .mcta--letter{display:block;position:fixed;left:auto;right:26px;bottom:26px;
    z-index:900;background:transparent;border:0;padding:0;
    transform:translateY(160%);
    transition:transform .34s cubic-bezier(.16,1,.3,1)}
  .mcta--letter.is-in{transform:none}
  .mcta--letter .btn{box-shadow:var(--tl-shadow)}
}
/* While the sheet is open it is the only thing on screen. */
body.tl-writing .mcta--letter{display:none}
@media(prefers-reduced-motion:reduce){
  .mcta--letter{transition:none}
}

/* ── The optional rows ───────────────────────────────────────────────
   Two rows of chips with nothing naming them: a sighted reader had to
   infer which row was age and which was place, and a screen reader
   heard seven unlabelled buttons in a row. Each group now has a visible
   heading that is also its accessible name, through role="group" and
   aria-labelledby. */
.tl-optgroup{margin-top:18px}
.tl-optlabel{font-family:var(--sans);font-size:13px;font-weight:700;
  color:var(--ink-700);margin:0 0 8px}

/* ── The card ────────────────────────────────────────────────────────
   The same inland letter the homepage uses, so the campaign has one
   object rather than a promo panel in one place and a navy rectangle in
   another. Paper ground, the double printed rule, a franking block
   pressed askew, the fold you would tear along.

   The drawing is chosen from who the letter was written to, which is
   the only thing on the card that is not fixed. It still carries no
   part of the letter itself. */
.tl-card{max-width:320px;margin:22px auto 0;aspect-ratio:9/16;
  background:var(--ivory);border:1px solid var(--indigo-700);
  border-radius:2px;padding:6px;overflow:hidden}
.tl-card[data-shape="square"]{aspect-ratio:1}
.tl-card__rule{height:100%;border:1px solid rgba(31,36,48,.22);border-radius:1px;
  padding:16px 16px 14px;display:flex;flex-direction:column}
.tl-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tl-card__k{font-family:var(--tl-mono);font-size:8px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-500);padding-top:5px}
.tl-card__stamp{font-family:var(--tl-mono);font-size:7px;line-height:1.25;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
  color:var(--saffron-600);border:1.5px solid var(--saffron-600);
  border-radius:2px;padding:4px 6px;transform:rotate(-5deg);flex:0 0 auto}
.tl-card__art{display:block;width:64%;max-width:190px;height:auto;
  margin:16px auto 4px;flex:0 0 auto}
.tl-card__line{font-family:var(--serif);font-weight:600;font-size:18px;
  line-height:1.28;color:var(--ink-900);margin:auto 0;text-wrap:balance;
  text-align:center}
.tl-card__fold{border-top:1px dashed rgba(31,36,48,.28);margin-bottom:10px}
.tl-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.tl-card__lockup{width:64px;height:auto;flex:0 0 auto}
.tl-card__date{font-family:var(--tl-mono);font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-500);margin:0}

/* The addressee belongs to the writer, so it is editable on the letter
   itself rather than fixed at the point the sheet opened. Getting a name
   wrong should not mean closing the letter, scrolling back and starting
   again. It reads as part of the sentence, and only shows it is a field
   when it has focus. */
.tl-salutation__name{font-family:inherit;font-size:inherit;line-height:inherit;
  color:inherit;background:transparent;border:0;padding:0 2px;
  border-bottom:1px dashed var(--tl-hair);min-width:5ch}
.tl-salutation__name:focus{outline:none;border-bottom-color:var(--saffron-500)}
.tl-salutation__name::placeholder{color:var(--tl-ink-38)}

/* ── Keeping your own letter ─────────────────────────────────────────
   This comes before the card, because the words are the thing and the
   shareable object is the lesser of the two. The sheet is the one that
   was written on, now read-only. */
.tl-paper--done{margin-top:20px}
.tl-keep-body{font-family:var(--serif);font-size:clamp(17px,3.6vw,20px);
  line-height:var(--tl-lh);color:var(--ink-900);margin:0;white-space:pre-wrap;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--tl-lh) - 1px),
    var(--tl-hair) calc(var(--tl-lh) - 1px),
    var(--tl-hair) var(--tl-lh))}

/* ── Print ───────────────────────────────────────────────────────────
   Printing a page built as a full-screen sheet gives you the chrome,
   the nav and a cropped overlay. So there is a node that exists only
   for print, holding the date, the salutation and the letter, and on
   paper it is the only thing on the page. */
.tl-print{display:none}
@media print{
  body > *{display:none !important}
  .tl-print{display:block !important;padding:0;color:#000;background:#fff}
  .tl-print__date{font-family:var(--tl-mono);font-size:10pt;letter-spacing:.12em;
    text-transform:uppercase;color:#555;text-align:right;margin:0 0 18pt}
  .tl-print__sal{font-family:var(--serif);font-size:16pt;font-weight:600;
    margin:0 0 10pt}
  .tl-print__body{font-family:var(--serif);font-size:13pt;line-height:1.75;
    white-space:pre-wrap;margin:0}
  .tl-print__mark{font-family:var(--tl-mono);font-size:8pt;letter-spacing:.12em;
    text-transform:uppercase;color:#777;margin-top:28pt}
  @page{margin:22mm}
}

/* Letter Notes, 20 Aug. The hero gains a quieter second line under the
   headline, and the privacy note on the question step moves below the buttons
   as a footnote rather than sitting under the field. */
.tl-m1__sub{margin:14px auto 0;max-width:34ch;font-size:16px;line-height:1.5;
  color:var(--ink-500);text-align:center}
.hint--foot{margin-top:14px;font-size:12.5px;opacity:.85}