:root{--paper:#f5f1e7;--ink:#243f4b;--sage:#68745e;--orange:#b16a40;--line:#d5d3c4}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 'Trebuchet MS',Arial,sans-serif}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.wrap{max-width:1300px;margin:auto;padding-left:58px;padding-right:58px}header{max-width:1420px;margin:auto;padding:24px 58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{width:260px;height:auto;display:block}nav{display:flex;gap:36px;align-items:center;font-size:13px}nav a:hover,.text-link:hover{color:var(--orange)}.nav-cta{border:1px solid var(--ink);padding:10px 20px;border-radius:3px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:55px;padding-top:72px;padding-bottom:75px;min-height:670px;align-items:center}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2px;margin:0 0 22px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-2px;line-height:1.08}h1{font-size:76px;margin-bottom:24px}em{font-weight:400;color:var(--sage)}.intro{font-size:17px;line-height:1.8;color:#506169}.actions{display:flex;gap:26px;align-items:center;margin-top:29px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;background:var(--ink);color:var(--paper);padding:14px 23px;border-radius:3px;font-size:13px;transition:.2s}.button:hover{background:var(--sage);transform:translateY(-2px)}.text-link{font-size:12px;border:0;background:transparent;padding:0 0 3px;border-bottom:1px solid #9da899}.hero-note{font-size:10px;color:#596861;margin:25px 0 0}.paper-scene{position:relative;height:490px}.letter{position:absolute;width:330px;min-height:400px;right:0;top:52px;background:#fffdf6;padding:30px 32px;transform:rotate(6deg);box-shadow:0 12px 40px #243f4b16;border:1px solid #e6e1d4}.letter-top{display:flex;justify-content:space-between;font-size:6px;letter-spacing:1px;border-bottom:1px solid var(--line);padding-bottom:14px}.hand{font-family:'Segoe Print','Bradley Hand',cursive;font-style:italic}.hello{font-size:28px;margin:22px 0 16px}.letter-question{font:23px/1.4 Georgia,serif}.letter-small{font:12px/1.6 Georgia,serif;color:#6a746a}.signature{font-size:20px;line-height:1.2;margin-bottom:18px}.letter-foot{font-size:6px;letter-spacing:2px;border-top:1px solid var(--line);padding-top:14px}.postcard{position:absolute;width:315px;height:370px;left:-5px;top:29px;background:#dce0cf;transform:rotate(-11deg);box-shadow:0 9px 26px #243f4b15;padding:17px}.postcard img{width:245px;height:auto;display:block;margin:8px auto}.postcard>div{border-top:1px solid #a7b29b;padding-top:11px;text-align:center;font-size:9px;letter-spacing:3px}.orbit{position:absolute;top:0;right:15px;font:italic 14px Georgia;color:var(--sage);transform:rotate(4deg)}.round-label{position:absolute;bottom:0;left:27px;width:96px;height:96px;border-radius:50%;background:var(--orange);color:#fff7e7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:9px;letter-spacing:1.5px;line-height:1.5;transform:rotate(-10deg)}.ribbon{display:flex;justify-content:center;gap:66px;align-items:center;border-block:1px solid var(--line);padding:19px;background:#e9eadf;font:18px Georgia,serif}.why{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-top:90px;padding-bottom:82px}h2{font-size:43px;margin-bottom:20px}.why-copy{font-size:14px;color:#53635f;padding-top:3px}.why-copy p{margin-bottom:17px}.closing-line{color:var(--ink);font:italic 18px/1.5 Georgia,serif}.map-section{background:#e5e9df;padding:66px 0 52px;border-block:1px solid #d3d9cc}.section-top{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:30px}.section-top h2{margin-bottom:0}.section-top>p{font-size:13px;color:#53635f}.map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:20px;border-top:1px solid #c7d0c0}.tabs{display:flex;gap:4px}.tabs button{font-size:11px;background:none;border:1px solid transparent;padding:9px 15px;border-radius:3px}.tabs button.active{background:var(--ink);color:var(--paper)}.select-label{font-size:10px;color:#495d53;display:flex;gap:10px;align-items:center}select{border:1px solid #b3beaa;background:#f5f3e9;font-size:12px;padding:8px;max-width:210px}.mode-note{font-size:11px;color:#52634f;margin:15px 0 10px}.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:25px;align-items:stretch}.map-area{position:relative;min-width:0}#map{width:100%;height:auto;display:block}.state{fill:#c4cdb9;stroke:#edf0e5;stroke-width:1.7;cursor:pointer;transition:fill .16s;vector-effect:non-scaling-stroke}.state:hover,.state:focus-visible{fill:#9aa989;outline:none;stroke:var(--ink);stroke-width:2.5}.state.selected{fill:var(--sage);stroke:var(--ink);stroke-width:2}.state.published{fill:#859f89}.marker{pointer-events:none}.legend{display:flex;gap:17px;align-items:center;flex-wrap:wrap;font-size:9px;color:#4d6054;padding-top:10px}.legend i{width:8px;height:8px;background:#c4cdb9;display:inline-block;border-radius:50%;margin-right:4px}.legend i.shared{background:var(--ink)}.map-hint{margin-left:auto}#hover-label{display:none;position:absolute;padding:5px 12px;background:var(--ink);color:var(--paper);font-size:11px;pointer-events:none;border-radius:2px}#state-panel{padding:26px;background:#f6f3e9;border:1px solid #d6dbce;min-height:335px;margin-top:15px;display:flex;flex-direction:column}.panel-tag{font-size:8px;letter-spacing:1.6px;font-weight:bold;color:var(--sage);text-transform:uppercase;margin-bottom:18px}.panel-icon{width:52px;height:52px;margin-bottom:20px}#state-panel h3{font:30px/1.2 Georgia;margin-bottom:16px}#state-panel p{font-size:12px;line-height:1.8;color:#52635e}.panel-bottom{padding-top:19px;border-top:1px solid var(--line);margin-top:auto;font-size:9px;color:var(--sage)}.demo-badge{background:#ead8b7;color:#674422;padding:3px 7px;font-size:8px;display:inline-block;margin-bottom:16px;align-self:start}.sample-card{border:1px dashed #bfc8b5;padding:15px;font:italic 16px/1.5 Georgia;margin:5px 0 20px}.steps{padding-top:83px;padding-bottom:87px}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:42px}.step-grid article{border-top:1px solid var(--line);padding-top:20px}.step-number{color:var(--orange);font-size:12px}.step-grid h3{font:25px Georgia;margin:16px 0 13px}.step-grid p{font-size:13px;color:#53635f}.join{background:var(--ink);color:var(--paper);padding:65px 0 30px}.join-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:85px}.join .eyebrow{color:#c6ceb8}.join h2{font-size:55px}.join em{color:#cfba86}.join p{font-size:13px;line-height:1.9;color:#d5dcd5}.join .mail-note{font-size:11px;max-width:350px;color:#b8c6bd}.prompt-card{background:#f1eedf;color:var(--ink);padding:33px;transform:rotate(2deg);align-self:center;box-shadow:8px 10px 0 #506658}.prompt-card .eyebrow{font-size:8px;color:var(--sage)}.prompt-card #prompt-text{font:27px/1.35 Georgia;color:var(--ink);margin:24px 0}.prompt-bottom{font-size:9px;color:var(--sage);border-top:1px solid #c9cdbb;padding-top:18px;margin-top:25px}.permission{display:flex;gap:18px;align-items:center;border-top:1px solid #52676b;margin-top:45px;padding-top:22px}.permission p{font-size:10px;max-width:870px;margin:0;color:#bdccc3}.last-note{padding-top:65px;padding-bottom:65px;text-align:center}.last-note img{width:72px;height:auto;margin-bottom:15px}.last-note p{font:27px/1.4 Georgia;margin:0}.last-note em{color:var(--ink)}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:27px!important;padding-bottom:27px!important}footer .logo{width:180px}footer p{font-size:9px;color:#596861;margin:0}.skip{position:absolute;top:-100px;left:20px;background:var(--ink);color:white;padding:10px;z-index:10}.skip:focus{top:10px}
@media(max-width:1050px){.wrap{padding-left:30px;padding-right:30px}header{padding:20px 30px}.logo{width:220px}.hero{gap:20px}h1{font-size:61px}.paper-scene{transform:scale(.88);transform-origin:center right}.map-layout{grid-template-columns:minmax(0,1fr) 240px}.why{gap:35px}h2{font-size:36px}.join-layout{gap:50px}.actions{gap:15px}.button{gap:20px}.map-hint{display:none}}@media(max-width:760px){header{padding:16px 22px;flex-wrap:wrap;gap:14px}.logo{width:220px}nav{width:100%;justify-content:space-between;gap:10px;font-size:11px}.nav-cta{padding:5px 11px}.wrap{padding-left:23px;padding-right:23px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:39px;padding-bottom:32px;gap:15px}h1{font-size:58px;letter-spacing:-1.9px}.eyebrow{font-size:8px;letter-spacing:1.5px}.intro{font-size:14px}.hero-note{font-size:8px}.paper-scene{height:420px;max-width:430px;width:100%;margin:auto;transform:scale(.9);transform-origin:center}.postcard{width:250px;height:320px;top:40px;left:0}.postcard img{width:210px}.letter{width:270px;right:0;top:60px;min-height:340px;padding:23px}.letter-question{font-size:20px}.letter-small{margin-bottom:12px}.hello{font-size:24px}.round-label{bottom:0;left:5px;width:80px;height:80px;font-size:8px}.orbit{font-size:12px}.ribbon{gap:12px;font-size:11px;padding:15px 12px}.why{grid-template-columns:1fr;gap:10px;padding-top:50px;padding-bottom:35px}h2{font-size:34px;letter-spacing:-1px}.why-copy{font-size:13px}.section-top{display:block}.section-top>p{margin-top:18px}.map-section{padding:40px 0 30px}.map-toolbar{flex-wrap:wrap}.select-label{width:100%;justify-content:space-between}select{flex:1;max-width:none}.tabs{width:100%}.tabs button{flex:1;font-size:10px;padding:8px}.mode-note{font-size:10px}.map-layout{grid-template-columns:1fr;gap:10px}.legend{font-size:8px;padding-top:0}#state-panel{min-height:240px;margin-top:10px;padding:22px}.panel-icon{width:40px;height:40px;margin-bottom:12px}#state-panel h3{font-size:26px;margin-bottom:10px}.panel-tag{margin-bottom:10px}.steps{padding-top:44px;padding-bottom:35px}.steps .text-link{display:inline-block;margin-top:15px}.step-grid{grid-template-columns:1fr;gap:14px;margin-top:22px}.step-grid article{display:grid;grid-template-columns:30px 1fr;column-gap:12px;padding-top:16px}.step-grid h3{margin:0 0 8px;font-size:23px}.step-grid p{grid-column:2;font-size:12px}.step-number{padding-top:5px}.join{padding-top:40px}.join-layout{grid-template-columns:1fr;gap:22px}.join h2{font-size:45px}.prompt-card{padding:25px;margin:0 4px 10px}.permission{margin-top:32px}.permission p{font-size:9px}.last-note{padding-top:43px;padding-bottom:43px}.last-note p{font-size:23px}footer{flex-wrap:wrap;gap:15px}footer p{font-size:8px}footer .text-link{font-size:10px}footer .logo{width:160px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.map-section .section-top > p {
  max-width: 270px;
}

.line-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
  flex: none;
}

.eyebrow .ink-mark {
  width: 13px;
  height: 13px;
  margin-right: 6px;
  color: var(--orange);
}

.round-label .ink-mark {
  width: 12px;
  height: 12px;
  margin-top: 4px;
}

.ribbon .ink-mark {
  width: 13px;
  height: 13px;
  color: var(--orange);
}

.permission .mail-icon {
  width: 21px;
  height: 21px;
  color: #c0a66d;
}

.postal-trail {
  position: absolute;
  bottom: 5px;
  left: -8px;
  width: 160px;
  height: 100px;
  color: var(--orange);
  pointer-events: none;
}

.postal-trail path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: .65;
}

.letter-turn {
  left: 12px;
  bottom: 4px;
  border: 1px solid #9a542f;
  box-shadow: 0 4px 12px #70412630;
}

.letter-turn[hidden] {
  display: none;
}

.letter-turn:hover,
.letter-turn:focus-visible {
  background: #945332;
}

.letter-turn .line-icon {
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .postal-trail { width: 128px; height: 80px; }
  .letter-turn { left: 5px; bottom: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy.in-view > :not(.motion-toggle) {
    animation: content-arrive 720ms cubic-bezier(.18, .7, .22, 1) backwards;
  }

  .hero-copy h1 { animation-delay: 90ms; }
  .hero-copy .intro { animation-delay: 180ms; }
  .hero-copy .actions { animation-delay: 250ms; }
  .hero-copy .hero-note { animation-delay: 320ms; }

  .paper-scene.in-view .postcard {
    animation: postcard-settle 1100ms cubic-bezier(.2, .7, .22, 1) backwards;
  }

  .paper-scene.in-view .letter {
    animation: letter-settle 1200ms 120ms cubic-bezier(.2, .7, .22, 1) backwards;
  }

  .paper-scene.in-view .postal-trail path {
    stroke-dasharray: 1;
    animation: trace-route 1350ms 300ms ease-out backwards;
  }

  .letter-turn {
    transition: transform 220ms ease, background-color 220ms ease;
  }

  .letter-turn:hover,
  .letter-turn:focus-visible { transform: translateY(-5px) rotate(-5deg); }
  .letter-turn:active { transform: scale(.94) rotate(-10deg); }

  .paper-scene.in-view .letter-turn {
    animation: stamp-press 550ms 760ms ease-out backwards;
  }

  .letter-face:not([hidden]) {
    animation: letter-side 530ms cubic-bezier(.2, .75, .22, 1) backwards;
  }

  .why-copy.in-view,
  .map-layout.in-view,
  .step-grid.in-view,
  .last-note.in-view,
  .prompt-card.in-view > *,
  #state-panel > * {
    animation: content-arrive 560ms ease-out;
  }

  #map .marker {
    transform-box: fill-box;
    transform-origin: center;
    animation: map-stamp 520ms cubic-bezier(.2, .75, .25, 1) backwards;
  }

  @keyframes content-arrive {
    from { opacity: .45; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes postcard-settle {
    from { opacity: .5; transform: translate(20px, 27px) rotate(-2deg); }
    to { opacity: 1; transform: rotate(-11deg); }
  }

  @keyframes letter-settle {
    from { opacity: .55; transform: translate(-16px, 36px) rotate(-5deg); }
    to { opacity: 1; transform: rotate(6deg); }
  }

  @keyframes trace-route {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }

  @keyframes stamp-press {
    from { opacity: 0; transform: scale(1.32) rotate(-20deg); }
    70% { opacity: 1; transform: scale(.94) rotate(-8deg); }
    to { opacity: 1; transform: rotate(-10deg); }
  }

  @keyframes letter-side {
    from { opacity: .35; transform: perspective(640px) rotateY(-28deg) translateX(10px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes map-stamp {
    from { opacity: .3; transform: scale(1.7) rotate(-14deg); }
    75% { opacity: 1; transform: scale(.93); }
    to { opacity: 1; transform: none; }
  }
}

/* The opening shares its background with the toolbar until the page moves. */
html { scroll-padding-top: 106px; }
.site-header {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  max-width: none;
  border-color: transparent;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.site-header.is-scrolled {
  background: rgba(245, 241, 231, .96);
  border-color: var(--line);
  box-shadow: 0 4px 20px #243f4b09;
}
.reading-progress {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  pointer-events: none;
}
.skip { z-index: 11; }
.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 115px;
  padding-bottom: 55px;
}
.hero h1 { font-size: clamp(70px, 8vw, 116px); line-height: .98; }
.hero-note { max-width: 38ch; font-size: 13px; }
.hero .intro { max-width: 46ch; }
.orbit { max-width: 90%; }
.email-link {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #c6ceb8;
  border-radius: 3px;
  font-size: 13px;
}
.email-link span { color: #c6ceb8; overflow-wrap: anywhere; }
.email-link:hover { background: #ffffff15; }
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  font-size: 12px;
}
.footer-links a { text-decoration: underline; text-underline-offset: 4px; }
.privacy-page { max-width: 860px; padding-block: 60px; }
.privacy-page h1 { font-size: clamp(44px, 7vw, 76px); }
.privacy-page h2 { font-size: 27px; margin-top: 32px; }
.privacy-page a { text-decoration: underline; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  html { scroll-padding-top: 112px; }
  .hero { padding-top: 124px; padding-bottom: 22px; gap: 2px; }
  .hero h1 { font-size: clamp(61px, 15vw, 84px); margin-bottom: 18px; }
  .hero .actions { margin-top: 18px; }
  .hero-note { margin-top: 16px; font-size: 11px; }
  .hero .paper-scene { margin-top: 15px; }
}

@media (prefers-reduced-motion: no-preference) {
  .paper-scene .postcard {
    translate: calc(var(--paper-x, 0px) * -.65) calc(var(--paper-y, 0px) * -.6 - var(--paper-scroll, 0px));
    transition: translate 260ms ease-out;
  }
  .paper-scene .letter {
    translate: var(--paper-x, 0px) calc(var(--paper-y, 0px) + var(--paper-scroll, 0px));
    transition: translate 260ms ease-out;
  }
  .text-link .line-icon, .button .line-icon, .nav-cta .line-icon {
    transition: transform 200ms ease-out;
  }
  .text-link:is(:hover,:focus-visible) .line-icon,
  .button:is(:hover,:focus-visible) .line-icon,
  .nav-cta:is(:hover,:focus-visible) .line-icon { transform: translate(2px, -2px); }
  .state { transition: fill 220ms ease, stroke 220ms ease; }
  .state.selected { animation: state-ink 520ms ease-out; }
  @keyframes state-ink {
    from { fill: #c4a87c; stroke-width: 4px; }
    to { stroke-width: 2px; }
  }
}

@font-face {
  font-family: Kalam;
  src: url('assets/fonts/kalam-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body { font-family: "Trebuchet MS", sans-serif; background: #f5eee2; }
.site-header.is-scrolled { background: rgba(245, 238, 226, .97); }
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 77% 49%, #d9a77524, transparent 60%);
}
.eyebrow { letter-spacing: .13em; }
.hand, .orbit, .closing-line { font-family: Kalam, "Bradley Hand", cursive; font-style: normal; }
.why-copy, .step-grid p { font-size: clamp(15px, 1.4vw, 17px); }
.hero-note { color: #52645d; font-size: 14px; }
.join p:not(.eyebrow), .privacy-page p { font-size: 16px; }
.join .permission p, .join .prompt-bottom { font-size: 13px; }
.join #prompt-text { font-size: clamp(23px, 3vw, 34px); }
.site-footer p { font-size: 12px; }
.motion-toggle {
  padding: 7px 0;
  min-height: 36px;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #59665c;
  font-size: 12px;
}
.postal-spark { fill: #a9603c; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after {
  animation: none !important;
  transition: none !important;
}
html:has(.motion-paused) { scroll-behavior: auto; }
.motion-paused .paper-scene .postcard,
.motion-paused .paper-scene .letter { translate: none; }

@media (prefers-reduced-motion: no-preference) {
  .paper-scene.in-view .postal-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: postal-glow 4s ease-in-out infinite;
  }

  @keyframes postal-glow {
    0%, 100% { opacity: .45; transform: scale(.8); }
    50% { opacity: .95; transform: scale(1.4); }
  }
}

@media (max-width: 760px) {
  .hero-note { font-size: 13px; }
}

@media (prefers-reduced-motion: no-preference) {
  .paper-scene.in-view .postcard img {
    animation: postcard-breathe 7s ease-in-out 1.2s infinite;
  }

  @keyframes postcard-breathe {
    0%, 100% { transform: none; }
    50% { transform: translateY(-4px) rotate(1deg); }
  }
}