/* Brand tokens + the postcard "wall card", shared by index.html and wall.html. */
:root{
  --navy:#30305B; --purple:#933F78; --pink:#EA5A64; --yellow:#FFA22E; --green:#38A84D;
  --ink:#2b2b3a; --cream:#fffdf7; --line:#e6ddc8; --muted:#6b6450; --lilac:#cdb6e0;
  --mono:'Space Mono',ui-monospace,monospace; --hand:'Caveat',cursive;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background-color:#30305B}
body{margin:0;min-height:100vh;background-repeat:no-repeat;font-family:'Atkinson Hyperlegible',system-ui,Arial,sans-serif;color:#fff;font-size:18px;line-height:1.5;
  background-color:var(--navy);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 540px at 50% -8%, rgba(147,63,120,.32), transparent 62%),
    radial-gradient(820px 420px at 88% 8%, rgba(255,162,46,.10), transparent 60%)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.logo{height:54px;width:auto;display:block}
.airmail{height:6px;background:repeating-linear-gradient(-45deg,
  var(--navy) 0 9px, var(--cream) 9px 13px, var(--pink) 13px 22px, var(--cream) 22px 26px,
  var(--yellow) 26px 35px, var(--cream) 35px 39px, var(--green) 39px 48px, var(--cream) 48px 52px);opacity:.9}

.wcard{background:var(--cream);color:var(--ink);border-radius:5px;box-shadow:0 12px 30px rgba(0,0,0,.28);overflow:hidden;position:relative;
  border-top:6px solid var(--edge,var(--purple))}
.wcard .w-body{padding:18px 20px 16px}
.wcard .w-to{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.wcard .w-msg{font-family:var(--hand);font-weight:700;color:var(--navy);font-size:1.6rem;line-height:1.12;margin:0 0 12px;overflow-wrap:anywhere}
.wcard .w-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.wcard .w-from{font-size:.82rem;color:var(--muted);margin:0}
.wcard .w-from b{color:var(--navy)}
.wcard .w-tag{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--edge,var(--purple));border:1.5px solid currentColor;border-radius:4px;padding:2px 6px;white-space:nowrap}
.wcard.example{opacity:.85}
.wcard.example .w-to::after{content:" · example";color:var(--pink)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}