/* ══════════════════════════════════════════════════════════════════
   CONTACT — the postcard, its companion cards, and the certificate
   of posting.

   Consolidated 2026-09-11. Built up across one session as a run of
   appends, it had 40 selectors declared repeatedly and 32 properties
   overridden by a later block. Every rule now appears once, with the
   value that was actually winning. No computed value changed — that
   was verified against a browser baseline, not assumed.
   ══════════════════════════════════════════════════════════════════ */

.contact-success {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border: 1px solid rgba(196,160,82,0.35);
  background: linear-gradient(180deg, rgba(245,240,235,0.4), rgba(255,255,255,0.6));
  border-radius: 6px;
}

.cs-icon {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-5);
}

.cs-icon__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(196,160,82,0.45);
  animation: cs-ringPulse 1.8s ease-out 0.1s both;
}

@keyframes cs-ringPulse {
              0%   { transform:scale(0.75); opacity:0; }
              60%  { transform:scale(1.05); opacity:1; }
              100% { transform:scale(1);    opacity:1; }
}

.cs-icon__ring--wave {
  animation: cs-ringWave 1.6s ease-out 0.7s 1 both;
  border-color: rgba(196,160,82,0.6);
}

@keyframes cs-ringWave {
              0%   { transform:scale(1);   opacity:0.9; }
              100% { transform:scale(1.5); opacity:0; }
}

.cs-icon__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0.4);
  background: var(--gold, #c4a052);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  box-shadow: 0 4px 14px rgba(196,160,82,0.35);
  animation: cs-popIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}

@keyframes cs-popIn {
              0%   { transform:translate(-50%,-50%) scale(0.4); opacity:0; }
              100% { transform:translate(-50%,-50%) scale(1);   opacity:1; }
}

.cs-icon__check path {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  animation: cs-draw 0.5s ease-out 0.7s both;
}

@keyframes cs-draw {
              to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-icon__ring, .cs-icon__ring--wave, .cs-icon__inner, .cs-icon__check path {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%,-50%) scale(1) !important;
  }

  .cs-icon__check path {
    stroke-dashoffset: 0 !important;
  }

}

.btn--cs-primary {
  background: var(--cs-clr, #784356);
  color: #fff;
  border: 1.5px solid var(--cs-clr, #784356);
  transition: filter 0.15s ease;
}

.btn--cs-primary:hover {
  filter: brightness(0.9);
}

.btn--cs-secondary {
  background: transparent;
  color: var(--cs-clr, #1b2530);
  border: 1.5px solid var(--cs-clr, #1b2530);
  transition: background 0.15s ease, color 0.15s ease;
}

.btn--cs-secondary:hover {
  background: var(--cs-clr, #1b2530);
  color: #fff;
}

/* Full-bleed: the map is the only thing in this section, so negative
         margins cancel the section's own padding on all four sides and the
         map becomes the section — no cream border round it. width:auto, not
         100vw: 100vw counts the scrollbar and would add a horizontal one. */
.contact-map {
  width: auto;
  margin: calc(var(--section-y) * -1) calc(var(--container-x) * -1);
  overflow: hidden;
  line-height: 0;
}

/* aspect-ratio, not vh — a phone's address bar changes vh mid-scroll and
         the map used to resize as you moved. This scales off its own width. */
.contact-map iframe {
  display: block;
  width: 100%;
  border: 0;
  aspect-ratio: 21 / 9;
  min-height: 320px;
  max-height: clamp(560px, 30vw, 720px);
}

/* Tablet: squarer, so the streets around the avenue stay readable. */
@media (max-width: 1024px) {
  .contact-map iframe {
    aspect-ratio: 16 / 10;
    max-height: 520px;
  }

}

/* Portrait phone: taller than it is wide, or a 21:9 map is a slit. */
@media (max-width: 640px) {
  .contact-map iframe {
    aspect-ratio: 4 / 5;
    min-height: 300px;
    max-height: 480px;
  }

}

/* Landscape phone: short viewport, so cap by height instead. */
@media (max-height: 500px) and (orientation: landscape) {
  .contact-map iframe {
    aspect-ratio: auto;
    height: 78dvh;
    min-height: 240px;
  }

}

/* ══ THE POSTCARD ══════════════════════════════════════════════════
   The contact form is a divided-back postcard, c.1910: aged stock,
   a hairline down the middle, FOR COMMUNICATION on the left, ADDRESS
   on the right, and the printer's stamp box in the corner.

   Nothing here is decoration over a form — the form IS the card. The
   textarea sits on the ruled lines in a handwriting face, so the card
   fills itself in as you type. On send it is stamped, franked, turned
   over to the picture side, and posted.

   Everything degrades: without CSS 3D it is a plain card that fades.
   Without JS it is an ordinary form that posts normally.
   ================================================================= */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;          /* variable — one file covers the range */
  font-display: swap;
  src: url('/fonts/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}

/* ══ POSTCARD — REFINEMENTS ════════════════════════════════════════
   Three things, after seeing it on screen:

   1. The card now holds a true postcard ratio (148x105mm ≈ 1.41; this
      scan is 1.567, so the card matches the scan and both faces agree).
      A postcard has finite room — so rather than the card stretching,
      the handwriting gets smaller as you fill it, which is what anyone
      does when they run out of card.

   2. The aged edge was six radial gradients and read flat. It is now a
      real edge: a fibre grain, a soft vignette pulled in from all four
      sides, and irregular foxing that does not sit in the corners in
      an obvious pattern.

   3. The flight is a keyframed arc rather than a straight transition,
      so the card lifts, banks, and goes — instead of sliding.
   ================================================================= */
/* ── nothing may move while the card is being sent ────────────────
   The card keeps its exact box for the whole sequence: the stamp, the
   postmark, the turn and the flight are all transforms, which never
   reflow. Belt and braces on the two that could: the flying card is
   taken out of flow so its rotation cannot widen the page, and the
   wrapper holds the space it left. */
.pc-wrap {
  --card-stock: #fbfaf5;
  --card-edge: #e6e0d0;
  --card-ink: #55534d;
  --card-ink-soft: #8d8a81;
  --card-rule:    #b9b4a6;
  --card-hand:    #2f3d55;      
  --card-frank:   #4a4f46;
  --line-h:       30px;         

  perspective: 2000px;
  max-width: 940px;
  margin: 0 auto;;
  --card-ratio: 1.567;
  max-width: 980px;
  position: relative;
}

/* ── the card itself ── */
.pc {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.pc__face {
  position: relative;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(40,35,25,0.10),
    0 12px 30px -8px rgba(40,35,25,0.22),
    0 40px 70px -30px rgba(40,35,25,0.30);
}

/* Aged stock: a flat warm base, then soft irregular foxing pulled in
   from the corners with layered radial gradients. Cheaper and calmer
   than a texture image, and it scales to any card size. */
/* ── 1. a real postcard shape ── */
/* ── 2. the edge ── */
/* ── keep the picture facing you all the way ──────────────────────
   overflow:hidden on a child of a preserve-3d parent flattens it, and a
   flattened face ignores backface-visibility — so once the card turned, the
   WRITING side carried on showing, mirrored, right through the flight.
   The form fills the card properly now, so the clip is not needed; and once
   the card has turned, the writing side is taken out of the picture entirely
   rather than trusting backface-visibility alone. */
/* visibility took the whole card out of the paint; opacity swaps the faces
   without touching layout or the 3D context. The write face fades as the card
   passes edge-on, so the turn still reads as a turn. */
.pc__face--write {
  background: radial-gradient(150% 120% at 50% 45%, #fdfcf9 40%, rgba(250,247,240,0) 78%),
    var(--card-stock);
  padding: clamp(20px, 3.2vw, 34px) clamp(22px, 3.6vw, 40px) clamp(16px, 2.4vw, 26px);
  aspect-ratio: var(--card-ratio);
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
  transition: opacity 220ms linear 260ms;
}

/* ── printed masthead ── */
.pc__masthead {
  text-align: center;
  margin-bottom: clamp(10px, 1.4vw, 16px);
}

.pc__title {
  font-family: var(--serif), Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 4.2vw, 2.9rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-ink);
  margin: 0;
  line-height: 1;
  opacity: 0.82;
}

/* ── the printed stamp box, top right ── */
.pc__stampbox {
  position: absolute;
  top: clamp(18px, 2.6vw, 30px);
  right: clamp(22px, 3.6vw, 40px);
  width: clamp(58px, 8vw, 84px);
  aspect-ratio: 5 / 6;
  border: 1px solid var(--card-rule);
  display: grid;
  place-items: center;
  padding: 4px;
}

.pc__stampbox::before,
.pc__stampbox::after {
  position: absolute;
  font-family: var(--sans), system-ui, sans-serif;
  font-size: clamp(0.42rem, 0.9vw, 0.58rem);
  letter-spacing: 0.06em;
  color: var(--card-ink-soft);
}

.pc__stampbox::before {
  content: '39-1';
  top: 3px;
  right: 5px;
}

.pc__stampbox::after {
  content: 'C.B.';
  bottom: 3px;
  right: 5px;
}

.pc__printed {
  position: absolute;
  top: calc(clamp(18px, 2.6vw, 30px) + clamp(58px, 8vw, 84px) * 1.2 + 7px);
  right: clamp(22px, 3.6vw, 40px);
  width: clamp(58px, 8vw, 84px);
  text-align: center;
  font-family: var(--sans), system-ui, sans-serif;
  font-size: clamp(0.4rem, 0.82vw, 0.52rem);
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--card-ink-soft);
}

/* The stamp we lick and stick on submit. Perforations are a dotted
   ring masked out of the edge — no image, and it prints crisply. */
.pc__stamp {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.5) rotate(-8deg);
  transition: opacity 260ms ease-out, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pc.is-stamped .pc__stamp {
  opacity: 1;
  transform: scale(1) rotate(-2.5deg);
}

.pc__stamp svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The postmark. Thumps down over the stamp, slightly off-centre,
   because a franking machine never lands square. */
.pc__frank {
  position: absolute;
  top: clamp(10px, 1.6vw, 18px);
  right: clamp(10px, 2vw, 24px);
  width: clamp(84px, 12vw, 128px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(2.6) rotate(-26deg);
  color: var(--card-frank);
}

.pc.is-franked .pc__frank {
  opacity: 0.78;
  transform: scale(1) rotate(-11deg);
  transition: opacity 90ms linear, transform 380ms cubic-bezier(0.34, 1.4, 0.5, 1);
}

.pc__frank svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── the divided back ── */
.pc__body {
  display: grid;
  grid-template-columns: 1fr 1px minmax(230px, 0.86fr);
  gap: 0 clamp(16px, 2.6vw, 30px);
  align-items: stretch;
  min-height: 0 !important;
  flex: 1;
}

.pc__rule {
  background: var(--card-rule);
  opacity: 0.7;
  margin: 4px 0 10px;
}

.pc__label {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: clamp(0.56rem, 1.05vw, 0.7rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--card-ink-soft);
  margin: 0 0 clamp(8px, 1.2vw, 12px);
  display: block;
}

/* ── left: the message, written on ruled lines ── */
.pc__comm {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.pc__re {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.pc__re-label {
  font-family: var(--serif), Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--card-ink-soft);
  flex: none;
}

.pc__select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--card-rule);
  padding: 2px 18px 3px 2px;
  font-family: 'Caveat', var(--serif), cursive;
  font-size: 1.22rem;
  color: var(--card-hand);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--card-ink-soft) 50%),
                    linear-gradient(135deg, var(--card-ink-soft) 50%, transparent 50%);
  background-position: right 6px top 60%, right 2px top 60%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.pc__select:focus-visible {
  outline: 2px solid var(--card-hand);
  outline-offset: 3px;
}

/* The open dropdown list is drawn by the OS, so it will not take the card
   styling — but the font does carry on most browsers, so the choices read as
   handwriting rather than dropping into a system face mid-card. */
.pc__select option {
  font-family: "Caveat", Georgia, serif;
  color: #2f3d55;
  font-size: 1.05rem;
  background: #fbfaf5;
}

/* The ruled lines and the textarea share one pitch (--line-h), so the
   handwriting sits ON the rules rather than drifting off them. */
.pc__message {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  padding: 0;
  resize: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--line-h) - 1px),
    rgba(185, 180, 166, 0.55) calc(var(--line-h) - 1px),
    rgba(185, 180, 166, 0.55) var(--line-h)
  );
  font-family: 'Caveat', var(--serif), cursive;
  font-size: 1.42rem;
  line-height: var(--line-h);
  color: var(--card-hand);
  letter-spacing: 0.004em;
  overflow: hidden;
  height: auto !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,115,100,0.35) transparent;
}

.pc__message::placeholder {
  color: rgba(120, 130, 150, 0.5);
  font-style: italic;
}

.pc__message:focus {
  outline: 0;
}

.pc__message:focus-visible {
  outline: 2px solid var(--card-hand);
  outline-offset: 6px;
}

/* ── right: the address side ── */
.pc__addr {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pc__to {
  font-family: 'Caveat', var(--serif), cursive;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--card-hand);
  margin: 0 0 clamp(14px, 2vw, 22px);
  opacity: 0.92;
}

.pc__from-label {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: clamp(0.5rem, 0.95vw, 0.62rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--card-ink-soft);
  margin: 0 0 8px;
}

.pc__fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pc__field {
  position: relative;
}

.pc__field label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-ink-soft);
  pointer-events: none;
}

/* The sender lines were 1.2rem against 1.3rem for the address opposite and
   1.42rem for the message — the hand you write your own details in looked
   smaller than everything around it. Brought up level with the address. */
.pc__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--card-rule);
  background: transparent;
  padding: 7px 2px 5px 4.6em;
  font-family: 'Caveat', var(--serif), cursive;
  font-size: 1.34rem;
  line-height: 1.5;
  color: var(--card-hand);
}

/* The placeholder was set smaller than the type it sits in, so "optional"
   read as shrunken rather than quiet. Same size, just lighter. */
.pc__input::placeholder {
  color: rgba(150,145,132,0.6);
  font-size: 1em;
  opacity: 1;
}

.pc__input:focus {
  outline: 0;
  border-bottom-color: var(--card-hand);
}

.pc__input:focus-visible {
  outline: 2px solid var(--card-hand);
  outline-offset: 3px;
}

.pc__input:user-invalid {
  border-bottom-color: #a8434f;
}

/* ── send ── */
/* Post It sits in the bottom-right corner of the card, where you would
   sign off, with the reassurance line opposite it. */
/* The send row needs room for the rule that now sits outside the button. */
.pc__send {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-4);
  padding-right: 4px;
}

.pc__hint {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--card-ink-soft);
  padding-bottom: 4px;
}

.pc__post {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fbfaf5;
  background: var(--primary, #784356);
  border: 0;
  padding: 14px 30px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, opacity 200ms ease;
}

.pc__post:hover:not(:disabled) {
  background: #5f3444;
  transform: translateY(-1px);
}

.pc__post:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ── the picture side ── */
/* The picture side gets the same cut edge, so both faces feel like one card. */
.pc__face--picture {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: #fdfcf8;
  padding: clamp(9px, 1.3vw, 15px);
  display: grid;
  box-shadow: inset 0 0 0 1px rgba(150,132,96,0.16);
  opacity: 0;
  transition: opacity 200ms linear 380ms;
}

.pc__face--picture svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
}

/* ── the sequence ── */
.pc.is-turning {
  transform: translateY(-14px) rotateY(180deg);
}

/* ── 3. the flight ── */
/* ── the flight, in 2D ────────────────────────────────────────────
   The turn needs 3D; the flight does not, and asking for both was the
   problem. An animated, will-change:transform element gets its own
   compositor layer, which flattens preserve-3d — so during the flight the
   rotated picture face simply stopped painting and the card vanished.

   Once the card has turned, the picture face is un-rotated and shown as a
   plain 2D element, and the flight keyframes carry no rotateY at all. The
   turn still happens in 3D; only the departure is flat. */
/* The flying card stays IN the flow. Taking it out was what collapsed the
   column mid-flight and made the page jump; a transform cannot reflow or
   widen anything, so it was never needed. */
.pc.is-posted {
  transform: translate(78vw, -58vh) rotateY(180deg) rotateZ(19deg) scale(0.34);
  opacity: 0;
  transition: none;
  animation: pc-post 1250ms cubic-bezier(0.4, 0.02, 0.9, 0.55) forwards;
  transform-style: flat;
  position: relative;
  inset: auto;
  pointer-events: none;
}

/* Status line, shared with the old form so error handling is unchanged. */
.pc__status {
  display: none;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 4px;
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.85rem;
}

/* ── narrow screens: the card stacks, but stays a card ── */
@media (max-width: 720px) {
  .pc-wrap {
    --line-h: 28px;
  }

  .pc__body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .pc__rule {
    display: none;
  }

  .pc__addr {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--card-rule);
  }

  .pc__stampbox {
    width: 52px;
  }

  .pc__printed {
    display: none;
  }

  .pc__title {
    font-size: 1.45rem;
    padding-right: 60px;
  }

  .pc__masthead {
    text-align: left;
  }

  .pc.is-posted {
    transform: translate(60vw, -50vh) rotateY(180deg) rotateZ(19deg) scale(0.4);
  }

}

/* ── anyone who would rather not be spun about ── */
@media (prefers-reduced-motion: reduce) {
  .pc, .pc__stamp, .pc__frank {
    transition-duration: 1ms !important;
  }

  .pc.is-turning {
    transform: none;
  }

  .pc.is-posted {
    transform: none;
    opacity: 0;
    transition: opacity 320ms linear;
  }

  .pc__face--picture {
    display: none;
  }

}

/* ── dark theme: the card stays a card, the page around it darkens ── */
:is(.dark) .pc-wrap {
  --card-stock: #efeade;
  --card-edge: #d8d2c2;
  --card-ink: #4b4943;
  --card-ink-soft: #83807a;
  --card-rule: #b0aa9c;
}

:is(.dark) .pc__face {
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 18px 46px -12px rgba(0,0,0,0.6);
}

/* Honeypot and screen-reader-only labels. These were inline styles on the
   old form; they live here now because inline style= trips the WAF. */
.pc__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pc-wrap .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The card is gone but the layout must not jump — the success block that
   replaces it inherits the space. */
.pc-wrap.is-done {
  min-height: 0;
}

/* A real card front is an artefact — it gets shown whole. Cropping it to fill
   a taller card ate both ends of the printed caption, so the print sits on the
   card stock with its own margins, the way it would in an album. */
.pc__face--picture.has-photo {
  padding: 0;
  background: var(--card-stock);
  place-items: center;
}

.pc__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 3px;
}

.pc__message::-webkit-scrollbar {
  width: 5px;
}

.pc__message::-webkit-scrollbar-track {
  background: transparent;
}

.pc__message::-webkit-scrollbar-thumb {
  background: rgba(120,115,100,0.3);
  border-radius: 3px;
}

/* Cramming more on: two steps down before it will scroll at all. The rule
   pitch follows the type, so the writing stays on the lines either way. */
.pc__message.is-tight {
  font-size: 1.2rem;
  line-height: 26px;
}

.pc__message.is-tighter {
  font-size: 1.04rem;
  line-height: 22px;
}

.pc-wrap:has(.pc__message.is-tight) {
  --line-h: 26px;
}

.pc-wrap:has(.pc__message.is-tighter) {
  --line-h: 22px;
}

/* Paper fibre. A single tiny turbulence tile, held well back — enough to
   kill the flatness of a plain fill without ever reading as "texture". */
.pc__face--write::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 3px;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* The edge itself: a tight vignette on all four sides so the border darkens
   the way handled card does, plus a few irregular foxing blooms that are
   deliberately not symmetrical. */
.pc__face--write::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 3px;
  background: linear-gradient(to right,  rgba(176,160,124,0.34), rgba(176,160,124,0) 5%),
    linear-gradient(to left,   rgba(176,160,124,0.30), rgba(176,160,124,0) 4.5%),
    linear-gradient(to bottom, rgba(176,160,124,0.30), rgba(176,160,124,0) 6%),
    linear-gradient(to top,    rgba(168,150,112,0.34), rgba(168,150,112,0) 6.5%),
    radial-gradient(38% 30% at 9% 88%,  rgba(178,158,116,0.26), rgba(178,158,116,0) 68%),
    radial-gradient(26% 34% at 96% 34%, rgba(184,166,126,0.22), rgba(184,166,126,0) 70%),
    radial-gradient(30% 18% at 62% 3%,  rgba(180,162,122,0.20), rgba(180,162,122,0) 72%),
    radial-gradient(20% 26% at 30% 97%, rgba(170,150,110,0.18), rgba(170,150,110,0) 70%);
  box-shadow: inset 0 0 0 1px rgba(150,132,96,0.16),      
    inset 0 0 22px rgba(150,132,96,0.10);
}

/* Everything real sits above the two overlays. Only the in-flow items get
   position:relative — the stamp box, the printed line and the franking mark
   are absolutely positioned, and forcing relative on them dropped them into
   the flow, shoved the card contents down and clipped the send row. */
.pc__masthead, .pc__body, .pc__send {
  position: relative;
  z-index: 1;
}

.pc__stampbox, .pc__printed, .pc__frank {
  z-index: 2;
}

@keyframes pc-post {
  0%   { transform: translate(0,0) rotateY(180deg) rotateZ(0deg) scale(1);              opacity: 1; }
  18%  { transform: translate(-2%, -9%) rotateY(180deg) rotateZ(-4deg) scale(1.04);      opacity: 1; }
  100% { transform: translate(86vw, -72vh) rotateY(180deg) rotateZ(26deg) scale(0.28);   opacity: 0; }
}

@media (max-width: 720px) {
  /* Stacked, the card cannot hold a landscape ratio and still be usable. */
  .pc__face--write {
    aspect-ratio: auto;
  }

  .pc__message {
    overflow: visible;
  }

  .pc.is-posted {
    animation-name: pc-post-sm;
  }

  @keyframes pc-post-sm {
    0%   { transform: translate(0,0) rotateY(180deg) scale(1);                        opacity: 1; }
    18%  { transform: translate(0,-6%) rotateY(180deg) rotateZ(-4deg) scale(1.03);    opacity: 1; }
    100% { transform: translate(62vw,-64vh) rotateY(180deg) rotateZ(24deg) scale(0.3); opacity: 0; }
  }

}

@media (prefers-reduced-motion: reduce) {
  .pc.is-posted {
    animation: none;
    opacity: 0;
    transition: opacity 320ms linear;
  }

}

/* ── 4. the card gets the full column; the panels sit underneath ──
   Scoped to this section by its brand-section attribute rather than
   editing .editorial-article, which half the site shares. */
[data-brand-section="send_message"] .editorial-article {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* ══ COMPANION CARDS ═══════════════════════════════════════════════
   The two panels below the postcard, as smaller cards cut from the same
   stock: identical width to the card above, the same hairline edge, the
   same printed-grey small caps, and the address in the same hand.
   All scoped to this section — .editorial-cta-panel is shared site-wide
   and is not touched.
   ================================================================= */
[data-brand-section="send_message"] .editorial-article__sidebar {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-5);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;;
}

[data-brand-section="send_message"] .editorial-article__sidebar > * {
  flex: 1 1 320px;
  margin: 0;
}

/* The stamp arrives when you press the button — the label says so, which is
   what makes the empty box read as anticipation rather than a broken image.
   Sequence: press, a beat, the stamp lands, the postmark franks it, the card
   turns over and goes. */
/* ── filling the card ────────────────────────────────────────────
   The flex children of the card are the masthead and the FORM — the
   body and send row are one level further in. So flex:1 on .pc__body
   was doing nothing and the card carried ~130px of dead space under
   the button. The form has to be the thing that grows. */
.pc__face--write > .contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pc.is-turning .pc__face--write,
.pc.is-posted  .pc__face--write {
  opacity: 0;
}

.pc.is-turning .pc__face--picture,
.pc.is-posted  .pc__face--picture {
  opacity: 1;
}

.pc.is-posted .pc__face--picture {
  transform: none;
  backface-visibility: visible;
}

.pc.is-posted .pc__face--write {
  opacity: 0;
}

@keyframes pc-post {
  0%   { transform: translate(0,0) rotateZ(0deg) scale(1);            opacity: 1; }
  18%  { transform: translate(-2%,-9%) rotateZ(-4deg) scale(1.04);    opacity: 1; }
  100% { transform: translate(86vw,-72vh) rotateZ(26deg) scale(0.28); opacity: 0; }
}

@media (max-width: 720px) {
  @keyframes pc-post-sm {
    0%   { transform: translate(0,0) scale(1);                        opacity: 1; }
    18%  { transform: translate(0,-6%) rotateZ(-4deg) scale(1.03);    opacity: 1; }
    100% { transform: translate(62vw,-64vh) rotateZ(24deg) scale(0.3); opacity: 0; }
  }

}

.pcx-card {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.8vw, 32px);
  background: radial-gradient(150% 120% at 50% 40%, #fdfcf9 42%, rgba(250,247,240,0) 80%),
    var(--card-stock, #fbfaf5);
  box-shadow: inset 0 0 0 1px rgba(150,132,96,0.18),
    0 1px 2px rgba(40,35,25,0.08),
    0 10px 26px -12px rgba(40,35,25,0.18);
  border-radius: 3px;
}

.pcx-card__label {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--card-ink-soft, #8d8a81);
}

.pcx-card__rule {
  border: 0;
  width: 34px;
  height: 1px;
  background: var(--gold);
  margin: 14px 0 18px;
  opacity: 0.8;
}

/* The same hand as the card above — it is the same address, after all. */
.pcx-hand {
  font-family: 'Caveat', var(--serif), cursive;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--card-hand, #2f3d55);
}

.pcx-card__address {
  font-style: normal;
  margin: 0 0 var(--space-5);
}

.pcx-card__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pcx-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pcx-row__label {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--card-ink-soft, #8d8a81);
}

.pcx-row__value {
  font-family: 'Caveat', var(--serif), cursive;
  font-size: 1.25rem;
  color: var(--card-hand, #2f3d55);
  text-decoration: none;
  transition: color var(--fast);
}

.pcx-row__value:hover, .pcx-row__value:focus-visible {
  color: var(--primary);
}

.pcx-card__link {
  margin-top: auto;
  padding-top: var(--space-6);
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-dark);
  text-decoration: none;
  transition: color var(--fast);
}

.pcx-card__link:hover, .pcx-card__link:focus-visible {
  color: var(--charcoal);
}

.pcx-card__title {
  font-family: var(--serif), Georgia, serif;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 300;
  color: var(--card-ink, #55534d);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.pcx-card__lead {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--mid);
  margin: 0 0 var(--space-6);
  max-width: 34ch;
}

.pcx-card__cta {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fbfaf5;
  background: var(--primary, #784356);
  padding: 14px 30px;
  text-decoration: none;
  transition: background var(--fast), transform var(--fast);
}

.pcx-card__cta:hover, .pcx-card__cta:focus-visible {
  background: #5f3444;
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .pcx-card {
    flex-basis: 100%;
  }

}

:is(.dark) .pcx-card {
  background: radial-gradient(150% 120% at 50% 40%, #f3efe4 42%, rgba(239,234,222,0) 80%),
    #efeade;
  box-shadow: inset 0 0 0 1px rgba(120,104,76,0.22),
    0 2px 4px rgba(0,0,0,0.35),
    0 14px 30px -14px rgba(0,0,0,0.5);
}

/* "Re." shares the FOR COMMUNICATION row, so the writing beneath starts level
   with the address opposite instead of a line below it. */
/* Baseline-aligning a 0.7rem label against 1.22rem handwriting drops the
   label by the ascent difference, so it no longer sat level with ADDRESS
   opposite. Align the row to the top and let "Re." hang from the same line
   instead — labels level, writing level. */
.pc__comm-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 2vw, 22px);
  margin-bottom: clamp(8px, 1.2vw, 12px);
}

.pc__comm-head .pc__label {
  margin: 0;
  flex: none;
}

.pc__comm-head .pc__re {
  flex: 1;
  min-width: 0;
  margin: 0;
  align-items: baseline;
  transform: translateY(-7px);
}

/* Why booking direct is worth it — set as a short list rather than a
   paragraph, because these are four separate reasons, not one sentence. */
.pcx-points {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pcx-point {
  position: relative;
  padding-left: 20px;
  font-family: var(--sans), system-ui, sans-serif;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--mid);
}

.pcx-point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--gold);
}

/* ══ THE CERTIFICATE OF POSTING ════════════════════════════════════
   The thank-you, as a Victorian jobbing-printer's card: the same stock
   and width as the postcard, an inset double-rule frame, a stacked and
   centred hierarchy, thick-thin rules with a fleuron between, and the
   reply signed in the same hand as the card that just went.

   Every string still comes from the contact.success_* settings.
   ================================================================= */
.csx {
  --card-stock: #fbfaf5;
  --card-ink:     #55534d;
  --card-ink-soft:#8d8a81;
  --card-rule:    #b9b4a6;
  --card-hand:    #2f3d55;

  position: relative;
  width: 100%;
  max-width: 980px;              
  margin: 0 auto;
  padding: clamp(34px, 4.4vw, 58px) clamp(28px, 4vw, 56px);
  text-align: center;
  border-radius: 3px;
  background: radial-gradient(150% 120% at 50% 42%, #fdfcf9 40%, rgba(250,247,240,0) 80%),
    var(--card-stock);
  box-shadow: inset 0 0 0 1px rgba(150,132,96,0.18),
    inset 0 0 26px rgba(150,132,96,0.10),
    0 1px 2px rgba(40,35,25,0.10),
    0 12px 30px -8px rgba(40,35,25,0.22),
    0 40px 70px -30px rgba(40,35,25,0.28);
}

/* Paper fibre, as on the card. */
.csx::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 3px;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* The printer's frame: a heavy rule and a hairline, inset from the edge.
   This is the detail that says 1900 more than any typeface does. */
.csx::before {
  content: '';
  position: absolute;
  inset: clamp(12px, 1.5vw, 18px);
  pointer-events: none;
  border: 2px solid rgba(120,104,76,0.30);
  outline: 1px solid rgba(120,104,76,0.30);
  outline-offset: 3px;
  border-radius: 1px;
}

.csx > * {
  position: relative;
  z-index: 1;
}

/* The franking mark, sitting in the corner as though the card were stamped
   on receipt. Quiet — it is a motif here, not an event. */
.csx__mark {
  position: absolute;
  top: clamp(22px, 3vw, 40px);
  right: clamp(24px, 3.4vw, 46px);
  width: clamp(64px, 8vw, 92px);
  aspect-ratio: 1;
  color: #6a6e62;
  opacity: 0.34;
  transform: rotate(-9deg);
  z-index: 1;
}

.csx__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.csx__masthead {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: clamp(0.58rem, 1.1vw, 0.7rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--card-ink-soft);
  margin: 0;
  text-indent: 0.32em;
}

/* Thick-thin, with a fleuron set into the middle. */
.csx__rule--double {
  position: relative;
  border: 0;
  height: 4px;
  width: min(300px, 62%);
  margin: clamp(16px, 2vw, 22px) auto clamp(22px, 2.6vw, 30px);
  background: linear-gradient(to bottom,
      var(--card-rule) 0, var(--card-rule) 1.5px,
      transparent 1.5px, transparent 3px,
      var(--card-rule) 3px, var(--card-rule) 3.6px);
}

.csx__rule--double::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: var(--card-stock) center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23a89a78' stroke-width='1.3'%3E%3Cpath d='M20 4c-4 0-6 3-6 6s2 6 6 6 6-3 6-6-2-6-6-6z'/%3E%3Cpath d='M14 10c-4 0-7-2-9-4M26 10c4 0 7-2 9-4M14 10c-4 0-7 2-9 4M26 10c4 0 7 2 9 4'/%3E%3C/g%3E%3C/svg%3E");
}

.csx__title {
  font-family: var(--serif), Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  color: var(--card-ink);
  margin: 0 0 clamp(18px, 2.2vw, 26px);
}

.csx__body {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.06rem);
  line-height: 1.85;
  color: var(--mid);
  margin: 0 auto clamp(10px, 1.4vw, 14px);
  max-width: 52ch;
  white-space: pre-wrap;
}

.csx__subtext {
  font-family: var(--serif), Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  color: var(--card-ink-soft);
  margin: 0 auto clamp(28px, 3.4vw, 40px);
  max-width: 46ch;
  white-space: pre-wrap;
}

/* Buttons as printed tickets — a rule, not a slab. */
.csx__actions {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.4vw, 40px);
}

.csx__cta {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-indent: 0.22em;
  color: var(--primary, #784356);
  text-decoration: none;
  padding: 13px 28px;
  border: 1px solid rgba(120,104,76,0.42);
  box-shadow: 0 0 0 3px var(--card-stock), 0 0 0 4px rgba(120,104,76,0.22);
  transition: background var(--fast), color var(--fast);
}

.csx__cta:hover, .csx__cta:focus-visible {
  background: var(--primary, #784356);
  color: #fbfaf5;
}

.csx__cta--quiet {
  color: var(--card-ink-soft);
}

.csx__cta--quiet:hover, .csx__cta--quiet:focus-visible {
  background: var(--card-ink);
  color: #fbfaf5;
}

/* Signed in the same hand as the card. */
.csx__signature {
  font-family: 'Caveat', var(--serif), cursive;
  font-size: clamp(1.25rem, 2.1vw, 1.5rem);
  line-height: 1.5;
  color: var(--card-hand);
  margin: 0 0 clamp(18px, 2.4vw, 26px);
}

.csx__footnote {
  font-family: var(--sans), system-ui, sans-serif;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-indent: 0.2em;
  color: var(--card-ink-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .csx__mark {
    position: static;
    margin: 0 auto clamp(12px,3vw,18px);
    transform: rotate(-6deg);
  }

  .csx::before {
    inset: 9px;
  }

}

:is(.dark) .csx {
  --card-stock: #efeade;
  --card-ink: #4b4943;
  --card-ink-soft: #83807a;
  --card-rule: #b0aa9c;
}

/* The old modern panel: tick-in-a-ring and its animations are gone with the
   markup, but the rules linger further up this file — make sure nothing of it
   can reappear. */
.contact-success .cs-icon {
  display: none;
}

/* ── the buttons, as printed labels ───────────────────────────────
   A flat modern slab sat oddly on aged card. These keep the burgundy so
   the main action still reads as the main action, but gain the offset
   double rule a jobbing printer would have set around a label. */
.pc__post,
.pcx-card__cta {
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow: 0 0 0 3px var(--card-stock, #fbfaf5),
    0 0 0 4px rgba(120,104,76,0.34);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

.pc__post:hover:not(:disabled),
.pcx-card__cta:hover,
.pcx-card__cta:focus-visible {
  box-shadow: 0 0 0 3px var(--card-stock, #fbfaf5),
    0 0 0 4px rgba(120,104,76,0.55);
}

/* The page must not gain a scrollbar just because the card flew off to
   the right — that shifts everything sideways by 15px. */
.contact-form, .pc-wrap {
  max-width: 100%;
}

/* overflow-x: clip on the section was clipping the thank-you card. The flying
   card is out of flow and cannot widen the page on its own, so the clip is not
   needed — the body-level guard is enough. */
[data-brand-section="send_message"] {
  overflow-x: visible;
}

/* The column keeps the height the form had; the thank-you card is centred in
   it, so nothing below the card moves at any point in the sequence. */
/* Undo the pinning experiment: no flex centring, no stranded eyebrow, no
   forced column height. Only the postcard is swapped for the thank-you card,
   and the two are within 4px of each other. */
[data-brand-section="send_message"] .editorial-article__body.is-sent {
  display: block;
  align-items: center;
  justify-content: center;
}

[data-brand-section="send_message"] .editorial-article__body.is-sent .contact-success {
  margin: 0 auto;
}

/* The "Send us a message" eyebrow is a sibling of the card, not part of it, so
   centring the column left it stranded alongside — and it is the wrong words
   once the card has gone anyway. */
[data-brand-section="send_message"] .editorial-article__body.is-sent > .eyebrow {
  display: inline-block;
}

/* On a phone there is no room for the label and "Re." on one line — the
   select was being squeezed until it ran off the card. The two-column
   alignment that the shared row exists to fix does not apply here anyway,
   because the columns are stacked. So it goes back to its own line. */
@media (max-width: 720px) {
  .pc__comm-head {
    display: block;
  }

  .pc__comm-head .pc__label {
    display: block;
    margin-bottom: 8px;
  }

  .pc__comm-head .pc__re {
    transform: none;
    width: 100%;
  }

}

/* ── the stamp on a narrow card ───────────────────────────────────
   Absolutely positioning the stamp top-right works on a 980px card.
   At 400px it lands on top of the masthead AND the "Re." row. On a
   narrow card it goes into the flow instead: its own line, right
   aligned, above everything — which is where it sits on a real card
   anyway. The frank follows it, still landing over the stamp. */
@media (max-width: 720px) {
  .pc__face--write {
    display: flex;
    flex-direction: column;
  }

  .pc__stampbox {
    position: static;
    order: -1;
    align-self: flex-end;
    width: 58px;
    margin: 0 0 2px;
  }

  .pc__frank {
    top: clamp(6px, 2vw, 14px);
    right: clamp(4px, 2vw, 12px);
    width: clamp(74px, 22vw, 104px);
  }

  /* No negative margin: pulling the masthead up put POST CARD straight
       under the stamp. The stamp gets its own line; the masthead sits below. */
  .pc__masthead {
    text-align: left;
    margin-top: 0;
  }

  .pc__title {
    padding-right: 72px;
  }

  .pc__comm-head {
    padding-right: 0;
  }

}


/* ══ TABLET FIX ════════════════════════════════════════════════════
   Spotted on a tablet: Stamp & Send sitting on top of the Email and
   Phone fields, and "Re. a booking enqu" cut off.

   Cause: aspect-ratio hard-locked the card height, and .pc__body has
   min-height:0, so when the address column needed more room than the
   ratio allowed the body shrank and its content spilled over the send
   row instead of the card growing. The ratio has to be a FLOOR, not a
   cage.

   Container query rather than a viewport one, because what matters is
   how wide the CARD is, not the window — the card is 980px on a wide
   screen and full-width on a narrow one.                             */
/* Viewport-based, NOT a container query. container-type on .pc-wrap — which
   carries the perspective and holds an element that animates — sent the
   renderer into 45-second layout stalls. A plain floor cannot loop.
   min(): 625px is the correct floor for the 980px card on a wide screen;
   63.8vw approximates the card width once it goes full-bleed.            */
.pc__face--write {
  aspect-ratio: auto;
  min-height: min(625px, 63.8vw);
}

/* The label row wraps instead of squeezing the subject until it truncates. */
.pc__comm-head { flex-wrap: wrap; row-gap: 6px; }
.pc__comm-head .pc__re { min-width: 16ch; }

/* The address column and the send row were ending flush against each other,
   which is how the overlap started. Keep them apart regardless of height. */
.pc__body { padding-bottom: 10px; }
.pc__addr { padding-bottom: 4px; }