/* ============================================================================
   The postcard itself.
   ----------------------------------------------------------------------------
   Deliberately the most traditional surface in the product. The whole appeal is
   that it looks like something that came through the letterbox, and Sofo has
   confirmed four fixed elements: video in the middle, the note beside it, the
   stamp carrying the logo, and the button at the foot.

   Hard constraint: Sofo screenshots this card with a snipping tool and pastes
   the IMAGE into a CRM. So it must read perfectly as a flat still — nothing
   important may depend on hover, motion, or the video playing.
   ========================================================================== */

.pc-wrap { padding: 46px 20px 76px; display: flex; justify-content: center; }
@media (max-width: 700px) { .pc-wrap { padding: 26px 14px 48px; } }

.postcard {
  width: 100%; max-width: 900px; position: relative;
  background: var(--paper);
  border-radius: 12px;
  box-shadow: var(--lift-3);
  /* the faint tooth of real card stock */
  background-image:
    radial-gradient(rgba(120,100,70,.030) 1px, transparent 1px),
    radial-gradient(rgba(120,100,70,.022) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 2px 2px;
}
/* the airmail edge */
.postcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 12px; padding: 8px;
  background: repeating-linear-gradient(45deg,
    var(--post-red) 0 12px, var(--post-red) 12px 24px,
    #fdfbf7 24px 36px,
    var(--post-blue) 36px 48px, var(--post-blue) 48px 60px,
    #fdfbf7 60px 72px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  opacity: .88;
}

.pc-inner { padding: 40px 44px 32px; position: relative; }
@media (max-width: 700px) { .pc-inner { padding: 26px 22px 24px; } }

/* --------------------------------------------------------------- heading -- */
.pc-kicker {
  font-family: var(--body); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 10px;
}
.pc-headline {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 100;
  font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.45rem); line-height: 1.1;
  letter-spacing: -.02em; color: var(--accent); margin: 0;
}
.pc-rule {
  width: 58px; height: 3px; border-radius: 2px; background: var(--accent);
  opacity: .8; margin: 18px 0 24px;
}

/* ------------------------------------------------------------------ body -- */
.pc-body { display: grid; grid-template-columns: 1fr 1.04fr; gap: 34px; align-items: start; }
@media (max-width: 760px) { .pc-body { grid-template-columns: 1fr; gap: 24px; } }

.pc-message {
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 14;
  font-weight: 400; font-size: 1.12rem; line-height: 1.62;
  color: var(--ink); white-space: pre-wrap; margin: 0;
}
.pc-sign {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px dashed color-mix(in srgb, var(--line) 80%, #c9bfa9);
  font-size: .93rem; color: var(--ink-3);
}
.pc-sign strong {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.1rem; color: var(--ink); margin: 3px 0 1px;
}

/* ------------------------------------------------------------ stamp area -- */
/* The stamp belongs in the true top-right corner, as on any real postcard.
   The heading is padded clear of it so the two can never collide — the earlier
   in-flow version pushed the video halfway down the card and buried the lead. */
.stamp-area {
  width: 102px; text-align: center;
  position: absolute; top: 34px; right: 40px; z-index: 3;
}
.pc-head { padding-right: 150px; }
@media (max-width: 760px) {
  .stamp-area { position: relative; margin: 0 24px 26px auto; }
  .pc-head { padding-right: 0; }
}
.stamp {
  width: 102px; height: 118px; margin: 0 0 0 auto; position: relative; overflow: hidden;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  /* perforations, drawn rather than imaged so they stay crisp at any size */
  -webkit-mask: radial-gradient(circle 5px at 0 0, #0000 97%, #000) -5px -5px / 16px 16px round;
          mask: radial-gradient(circle 5px at 0 0, #0000 97%, #000) -5px -5px / 16px 16px round;
}
/* The picture is lifted out of the flex flow so the printed frame and the
   FIRST CLASS band can sit ON TOP of it rather than be squeezed beside it. */
.stamp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stamp .denom { font-size: 1.5rem; color: var(--accent); line-height: 1; }

/* ---- when the sender has supplied their own stamp picture -----------------
   A stamp people design for themselves almost always already contains a frame,
   a denomination and a cancellation -- Sofo's does. Printing ours over the top
   produced a stamp inside a stamp and two postmarks. So when there is artwork
   the card stands back: no perforations, no border, no tinted ground, and the
   picture keeps its own proportions instead of being cropped to a portrait box.
   A landscape stamp may therefore be wider than 102px; the headline's clearance
   grows to match. None of this applies when the box is empty -- the plain star
   stamp, FIRST CLASS band, cancel and postmark are all untouched. */
.stamp.has-art {
  width: auto; height: 118px; max-width: 190px; overflow: visible;
  background: none; border: 0;
  -webkit-mask: none; mask: none;
  display: block;
}
.stamp.has-art img {
  position: static; inset: auto;
  width: auto; height: 118px; max-width: 190px;
  object-fit: contain; display: block; margin-left: auto;
}
.stamp-area.has-art { width: auto; }
.pc-inner.has-art .pc-head { padding-right: 232px; }
@media (max-width: 760px) {
  .pc-inner.has-art .pc-head { padding-right: 0; }
}

/* (1) The printed frame, just inside the perforations. It is what makes a
   rectangle read as a postage stamp: without it an uploaded logo looks merely
   like a cropped photograph. Drawn above the picture so a dark logo cannot
   swallow it. */
.stamp .stamp-frame {
  position: absolute; inset: 6px; z-index: 2; pointer-events: none;
  border: 1.4px solid rgba(255,255,255,.92);
  box-shadow: 0 0 0 1.4px color-mix(in srgb, var(--accent) 65%, #fff),
              inset 0 0 0 1.6px color-mix(in srgb, var(--accent) 65%, #fff);
}

/* (2) The FIRST CLASS mark, sitting in the band where a stamp carries its
   denomination. It now shows whether or not the sender uploaded their own
   stamp picture -- the translucent strip keeps it legible over any logo. */
.stamp .stamp-label {
  position: absolute; left: 8px; right: 8px; top: 9px; z-index: 3;
  font-family: var(--body); font-size: .46rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-align: center;
  color: var(--accent); background: rgba(255,255,255,.84);
  padding: 2px 0; line-height: 1.25;
}

/* (3) Wavy cancellation lines struck across the stamp and on across the card,
   the way a real cancel runs off the stamp and onto the envelope. Drawn as an
   SVG mask filled with the brand colour rather than an image file, so it stays
   crisp at any size and re-tints itself for each of the three brands. */
.stamp-area .cancel {
  position: absolute; z-index: 4; pointer-events: none;
  top: 34px; left: -34px; width: 172px; height: 26px;
  transform: rotate(-9deg); opacity: .58;
  background-color: var(--accent);
  /* An uploaded stamp is often a dark photograph, and brand-coloured ink on a
     dark photograph is no ink at all. drop-shadow follows the mask's own alpha
     shape, so this puts a hairline of light around each wave and the cancel
     reads on a black stamp and on cream card alike. */
  filter: drop-shadow(0 0 1px rgba(255,255,255,1))
          drop-shadow(0 0 1px rgba(255,255,255,1))
          drop-shadow(0 0 3px rgba(255,255,255,.7));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='26'%20viewBox='0%200%2060%2026'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%3E%3Cpath%20d='M0%203.5q7.5-3%2015%200t15%200t15%200t15%200'/%3E%3Cpath%20d='M0%2010q7.5-3%2015%200t15%200t15%200t15%200'/%3E%3Cpath%20d='M0%2016.5q7.5-3%2015%200t15%200t15%200t15%200'/%3E%3Cpath%20d='M0%2023q7.5-3%2015%200t15%200t15%200t15%200'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='26'%20viewBox='0%200%2060%2026'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%3E%3Cpath%20d='M0%203.5q7.5-3%2015%200t15%200t15%200t15%200'/%3E%3Cpath%20d='M0%2010q7.5-3%2015%200t15%200t15%200t15%200'/%3E%3Cpath%20d='M0%2016.5q7.5-3%2015%200t15%200t15%200t15%200'/%3E%3Cpath%20d='M0%2023q7.5-3%2015%200t15%200t15%200t15%200'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 60px 26px;  mask-size: 60px 26px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
/* The postmark is struck ACROSS the stamp, cancelling it, exactly as a real one
   is. That is both more authentic and structurally useful: it keeps the whole
   stamp block short, so the video beside it can start at the top of the card
   instead of being pushed down past a stack of stamp-then-postmark. */
.postmark {
  position: absolute; left: -14px; bottom: -10px; width: 132px;
  transform: rotate(-9deg); pointer-events: none;
  font-family: var(--body); font-size: .56rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.45;
  text-align: center;
  color: color-mix(in srgb, var(--accent) 62%, #6f6659); opacity: .72;
}
.postmark span { display: block; }
.postmark::before, .postmark::after {
  content: ""; display: block; height: 1.5px; margin: 0 auto; background: currentColor; opacity: .5;
}
.postmark::before { width: 118px; margin-bottom: 4px; }
.postmark::after  { width: 118px; margin-top: 4px; }

/* ----------------------------------------------------------------- media -- */
.pc-media {
  position: relative; border-radius: 8px; overflow: hidden;
  background: #11151b; aspect-ratio: 16 / 10;
  box-shadow: 0 2px 8px rgba(22,32,46,.18), 0 12px 30px rgba(22,32,46,.16);
}
.pc-media video, .pc-media img.poster, .pc-media iframe {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.pc-media .play-badge { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pc-media .play-badge i {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 4px 20px rgba(0,0,0,.42);
  display: grid; place-items: center;
}
.pc-media .play-badge i::after {
  content: ""; margin-left: 6px;
  border-left: 23px solid var(--accent);
  border-top: 15px solid transparent; border-bottom: 15px solid transparent;
}
.pc-media.is-playing .play-badge { display: none; }
.pc-media .media-tag {
  position: absolute; left: 11px; bottom: 11px;
  background: rgba(10,14,20,.66); color: #fff;
  font-family: var(--body); font-size: .62rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(3px);
}
.pc-media .embed-fallback, .pc-media .audio-art {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #000));
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px;
}
.pc-media .audio-art span {
  font-family: var(--body); font-size: .66rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.pc-media.empty {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(45deg,#f2ede1 0 11px,#eae4d5 11px 22px);
  color: var(--ink-3); font-size: .9rem; box-shadow: none;
  border: 1px dashed var(--line);
}
.pc-media.empty a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* ------------------------------------------------------------------- cta -- */
.pc-cta { margin-top: 30px; text-align: center; }
.pc-cta a {
  display: inline-block; background: var(--accent); color: #fff;
  font-family: var(--body); font-weight: 700; font-size: 1rem;
  letter-spacing: .01em; text-decoration: none;
  padding: 15px 34px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(22,32,46,.16), 0 10px 24px rgba(22,32,46,.14);
  transition: transform .12s ease;
}
.pc-cta a:hover { transform: translateY(-1px); }

/* ----------------------------------------------------------------- share -- */
.pc-share {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--line) 85%, #d9cfba);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.pc-share .share-label {
  width: 100%; text-align: center; margin-bottom: 6px;
  font-family: var(--body); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.pc-share a, .pc-share button {
  font-family: var(--body); font-size: .84rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,.72); border: 1px solid var(--line);
  padding: 8px 15px; border-radius: 999px;
  transition: color .12s ease, border-color .12s ease;
}
.pc-share a:hover, .pc-share button:hover { color: var(--accent); border-color: var(--accent); }

.pc-foot {
  text-align: center; margin-top: 26px;
  font-family: var(--body); font-size: .78rem; color: var(--ink-3);
}
.pc-foot a { color: var(--accent); text-decoration: none; }

/* ------------------------------------------------- send by email + flashes -- */
.pc-share-mail {
  margin: 0.9rem 0 0;
  display: grid;
  gap: 0.55rem;
  max-width: 26rem;
}
.pc-share-mail label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.pc-share-mail .opt { opacity: 0.6; font-style: italic; }
.pc-share-mail input,
.pc-share-mail textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.95rem;
  color: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(128, 128, 128, 0.45);
  border-radius: 6px;
  box-sizing: border-box;
}
.pc-share-mail textarea { resize: vertical; }
.pc-share-mail button[type=submit] {
  justify-self: start;
  padding: 0.5rem 1.1rem;
  font: inherit;
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: 1px solid var(--accent, currentColor);
  border-radius: 6px;
}
.pc-share-mail button[type=submit]:hover { color: var(--accent); }

.pc-flash { margin: 0.9rem 0 0; }
.pc-flash p {
  margin: 0 0 0.4rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  font-size: 0.92rem;
  border: 1px solid;
}
.pc-flash-ok { border-color: rgba(70, 160, 90, 0.7); background: rgba(70, 160, 90, 0.12); }
.pc-flash-error { border-color: rgba(190, 70, 70, 0.7); background: rgba(190, 70, 70, 0.12); }