/* pidgee me, a storybook that happens to send texts */

:root {
  --paper: #FFF3DC;
  --paper-2: #FFFCF2;
  --ink: #2E2620;
  --ink-soft: #7A6A57;
  --line: #E2D5BE;          /* soft tan, for dashes and quiet dividers */
  --outline: #2E2620;       /* the cartoon ink line, for anything solid */
  --land: #C7E8A4;
  --land-edge: #2E2620;
  --coral: #FF7A45;
  --coral-dark: #C9501C;
  --plum: #9B6DD6;
  --plum-dark: #6B45A0;
  --teal: #2FB89E;
  --grey: #94A0B2;
  --grey-dark: #6E7B8E;
  --grey-light: #C9D2DE;
  --radius: 20px;
  /* hard offset shadow, no blur: the sticker look */
  --hard: 5px 5px 0 var(--outline);
  --hard-sm: 3px 3px 0 var(--outline);
  --shadow: var(--hard);
  --font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Nunito",
          "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* A rule like `a.go { display: block }` otherwise beats the UA's
   `[hidden] { display: none }`, and hidden elements quietly show up. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--paper);
  /* faint paper speckle, drawn rather than fetched */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(200, 175, 130, .09) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(200, 175, 130, .07) 0 1px, transparent 1px);
  background-size: 28px 28px, 44px 44px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 28px 20px 72px; }
.narrow { max-width: 640px; }

/* ------------------------------------------------------------------ head */

.masthead { text-align: center; padding: 18px 0 6px; }
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.logo svg { width: 66px; height: 46px; overflow: visible; animation: logoBob 3.4s ease-in-out infinite; }
.logo:hover svg { animation-duration: 1.1s; }
@keyframes logoBob {
  0%, 100% { transform: translateY(-2px) rotate(-2deg); }
  50%      { transform: translateY(3px) rotate(2deg); }
}
.logo h1 {
  margin: 0; font-size: 2.7rem; font-weight: 800; letter-spacing: -.03em;
  transform: rotate(-1.5deg);
  paint-order: stroke; -webkit-text-stroke: 1px var(--outline);
}
.logo h1 span { color: var(--coral); }
.tagline { margin: 6px 0 0; color: var(--ink-soft); font-size: 1.02rem; }
.tagline b { color: var(--ink); font-weight: 700; }

nav.crumbs { text-align: center; margin: 14px 0 4px; font-size: .92rem; }
nav.crumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 2px dotted var(--line); }
nav.crumbs a:hover { color: var(--coral); border-color: var(--coral); }
nav.crumbs .sep { color: var(--line); margin: 0 8px; }

/* ------------------------------------------------------------------ card */

.card {
  background: var(--paper-2);
  border: 3px solid var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--hard);
  padding: 22px;
  margin: 22px 0;
  animation: popIn .42s cubic-bezier(.2, 1.5, .45, 1) both;
}
/* stagger them so the page assembles itself rather than appearing at once */
.card:nth-of-type(2) { animation-delay: .07s; }
.card:nth-of-type(3) { animation-delay: .14s; }
@keyframes popIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.card h2 {
  margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em;
}
.card .hint { margin: 0 0 16px; color: var(--ink-soft); font-size: .9rem; }

/* ----------------------------------------------------------------- forms */

label.field { display: block; margin: 0 0 16px; }
label.field > .lab {
  display: block; font-weight: 700; font-size: .88rem; margin-bottom: 6px;
  letter-spacing: .01em;
}
label.field > .lab .opt { font-weight: 500; color: var(--ink-soft); }

input[type="text"], input[type="tel"], input[type="password"], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--outline); border-radius: 13px;
  padding: 11px 13px; outline: none;
  box-shadow: var(--hard-sm);
  transition: box-shadow .14s, transform .14s;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--coral);
}
input::placeholder, textarea::placeholder { color: #B8AC98; }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1 1 220px; min-width: 0; }

/* ------------------------------------------------------- city type-ahead */

.ac-wrap { position: relative; display: block; }

.ac {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 5px; list-style: none;
  background: var(--paper-2); border: 2px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 26px rgba(59, 48, 38, .18);
  max-height: 300px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ac-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 12px; border-radius: 9px; cursor: pointer;
  font-size: .95rem; font-weight: 600;
  min-height: 44px;   /* a comfortable touch target */
}
.ac-item.active, .ac-item:hover { background: #FBEADF; color: var(--coral-dark); }
.ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-tag {
  flex: none; font-size: .64rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 99px; padding: 2px 7px;
}

/* what a typed city actually resolved to */
.resolved {
  display: block; margin-top: 5px; font-size: .8rem; font-weight: 600;
  min-height: 1.1em; color: var(--ink-soft);
}
.resolved.ok { color: var(--teal); }
.resolved.bad { color: var(--coral-dark); }
.resolved.busy { color: var(--ink-soft); font-style: italic; }

.counter { float: right; font-weight: 600; font-size: .8rem; color: var(--ink-soft); }
.counter.over { color: var(--coral-dark); }

.check {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--paper); border: 3px solid var(--outline);
  border-radius: 13px; padding: 12px 14px; margin: 0 0 16px; cursor: pointer;
  box-shadow: var(--hard-sm);
  transition: transform .12s;
}
.check:hover { transform: translate(-1px, -1px); }
.check input { margin: 2px 0 0; accent-color: var(--coral); width: 17px; height: 17px; flex: none; }
.check .t { font-size: .9rem; }
.check .t b { display: block; font-weight: 700; }
.check .t span { color: var(--ink-soft); }

.go {
  width: 100%; font: inherit; font-size: 1.1rem; font-weight: 800;
  color: #fff; background: var(--coral); letter-spacing: .01em;
  border: 3px solid var(--outline); border-radius: 16px;
  padding: 15px 20px; cursor: pointer;
  box-shadow: var(--hard);
  transition: transform .1s cubic-bezier(.3,1.6,.5,1), box-shadow .1s, background .15s;
}
.go:hover { background: #FF8C5C; transform: translate(-1px, -2px); box-shadow: 6px 7px 0 var(--outline); }
.go:active { transform: translate(4px, 5px) scaleY(.96); box-shadow: 1px 1px 0 var(--outline); }
.go:disabled {
  background: var(--grey-light); box-shadow: 0 4px 0 #AEB8C6;
  cursor: not-allowed; color: #6E7B8E;
}

.err {
  background: #FCEAE1; border: 2px solid #F0BFA6; color: #9C4A20;
  border-radius: 12px; padding: 11px 14px; font-size: .9rem; margin: 0 0 16px;
}

/* -------------------------------------------------------------- estimate */

.estimate {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin: 0 0 18px;
}
.est {
  background: var(--paper); border: 3px solid var(--outline);
  border-radius: 13px; padding: 11px 13px; text-align: center;
  box-shadow: var(--hard-sm);
}
.est .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); font-weight: 700; }
.est .v { font-size: 1.24rem; font-weight: 800; margin-top: 2px; }
.est .v small { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }

/* ------------------------------------------------------------------- map */

.mapbox {
  position: relative;
  background: var(--paper-2); border: 3px solid var(--outline);
  border-radius: var(--radius); box-shadow: var(--hard);
  padding: 10px; margin: 20px 0; overflow: hidden;
}

/* the little speech bubble that follows a bird that has sat down */
.bubble {
  position: absolute; z-index: 3; max-width: 240px;
  transform: translate(-50%, -140%);
  background: var(--paper-2); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px;
  padding: 8px 11px; font-size: .84rem; line-height: 1.35; font-weight: 600;
  box-shadow: 0 6px 16px rgba(59, 48, 38, .18);
  pointer-events: none;
}
/* The tail points at the bird. --ax is where the bird actually is along the
   bubble, since the bubble gets nudged sideways to stay on the map. */
.bubble::after {
  content: ''; position: absolute; left: var(--ax, 50%); bottom: -8px; margin-left: -7px;
  border: 7px solid transparent; border-top-color: var(--line); border-bottom: 0;
}
/* No room above, so it sits under the bird and the tail points up instead. */
.bubble.below { transform: translate(-50%, 0); }
.bubble.below::after {
  bottom: auto; top: -8px;
  border-top-color: transparent; border-bottom: 7px solid var(--line); border-top: 0;
}

/* how far is that, at whatever zoom the route happens to need */
.scalebar path {
  fill: none; stroke: #6E7B62; stroke-width: 1.8; stroke-linecap: square; opacity: .65;
}
.scalebar text {
  font-family: var(--font); font-size: 11px; font-weight: 700; fill: #5F6B55;
  paint-order: stroke; stroke: rgba(255, 255, 255, .8); stroke-width: 3;
  stroke-linejoin: round;
}

/* other towns in frame, so a zoomed in map still tells you where you are */
.lm-dot { fill: var(--land-edge); opacity: .8; }
.lm-label {
  font-family: var(--font); font-size: 11px; font-weight: 700; fill: #7E8F66;
  paint-order: stroke; stroke: rgba(255, 255, 255, .75); stroke-width: 3;
  stroke-linejoin: round;
}
.mapbox svg { display: block; width: 100%; height: auto; border-radius: 12px; }

.land { fill: var(--land); stroke: var(--land-edge); stroke-width: 3.5; stroke-linejoin: round; }
.cloud ellipse { fill: #fff; stroke: var(--outline); stroke-width: 1.4; opacity: .95; }
.clouds { animation: drift 90s linear infinite; }
@keyframes drift { from { transform: translateX(-14px); } to { transform: translateX(14px); } }

.route {
  fill: none; stroke: var(--outline); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 2 11; opacity: .45;
}
.route-flown {
  fill: none; stroke: var(--coral); stroke-width: 4.5; stroke-linecap: round;
  paint-order: stroke; transition: stroke-dashoffset .6s linear;
}
.route-ghost { opacity: .3; }
.bird-ghost { opacity: .55; }

.pin-halo { fill: var(--coral); opacity: .18; }
.pin-dot { fill: var(--coral); stroke: var(--outline); stroke-width: 2.2; }
.pin-from .pin-halo { fill: var(--teal); opacity: .18; }
.pin-from .pin-dot { fill: var(--teal); }
.pin-label {
  font-family: var(--font); font-size: 14px; font-weight: 800; fill: var(--ink);
  paint-order: stroke; stroke: var(--paper-2); stroke-width: 4; stroke-linejoin: round;
}

/* ---------------------------------------------------------------- pigeon */

/* Ink outlines on every filled part. Highlights (belly, cere, glint) stay
   unoutlined so they read as shading rather than separate objects. */
.p-body, .p-head, .p-neck, .p-beak, .p-tail,
.p-wing, .p-wing-back, .p-wing-fold {
  stroke: var(--outline); stroke-width: 1.6;
  stroke-linejoin: round; paint-order: stroke;
}
.p-body { fill: var(--grey); }
.p-belly { fill: var(--grey-light); }
.p-neck { fill: var(--teal); }
.p-head { fill: var(--grey); }
.p-beak { fill: var(--coral); }
.p-cere { fill: #F2E4D6; }
.p-eye {
  fill: var(--ink);
  transform-box: fill-box; transform-origin: center;
  animation: blink 5.4s ease-in-out infinite;
}
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96.5%         { transform: scaleY(.12); }
}
.p-eye-glint { fill: #fff; }
.p-eye-x { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.p-tail { fill: var(--grey-dark); }
.p-feet { stroke: var(--coral); stroke-width: 2; stroke-linecap: round; fill: none; }
.p-wing { fill: var(--grey-dark); }
.p-wing-back { fill: #5E6A7C; }

.pidge { filter: drop-shadow(0 4px 3px rgba(59, 48, 38, .22)); }
.flap { animation: flap .42s ease-in-out infinite alternate; transform-origin: -4px -1px; }
.flap-back { animation: flapback .42s ease-in-out infinite alternate; transform-origin: -6px -3px; }
@keyframes flap { from { transform: rotate(-16deg) scaleY(.92); } to { transform: rotate(34deg) scaleY(1.05); } }
@keyframes flapback { from { transform: rotate(14deg); } to { transform: rotate(-24deg); } }

.pidge-dead { filter: drop-shadow(0 2px 2px rgba(59, 48, 38, .3)) saturate(.55); }
.pidge-dead .p-body, .pidge-dead .p-head { fill: #9AA2AC; }
.pidge-dead .p-neck { fill: #8E9AA6; }

/* standing bird */
.p-leg { stroke: var(--coral); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.p-foot { stroke: var(--coral); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.p-wing-fold { fill: var(--grey-dark); }


/* the bird bobs gently while it flies */
.bird-layer { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
.bird-layer.still { animation: none; }

/* the drop, flare and settle as it comes in to land */
.bird-layer.touchdown { animation: touchdown .6s cubic-bezier(.3, .8, .35, 1) both; }
@keyframes touchdown {
  0%   { transform: translateY(-34px) rotate(-9deg); }
  55%  { transform: translateY(3px) rotate(2deg); }
  74%  { transform: translateY(-5px) rotate(-1deg); }
  88%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

/* ------------------------------------------------------------ statusline */

.status { text-align: center; margin: 4px 0 0; }
.status .big {
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.status .lab { color: var(--ink-soft); font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.bar {
  height: 12px; background: var(--paper); border: 2px solid var(--line);
  border-radius: 99px; overflow: hidden; margin: 16px 0 8px;
}
.bar > i { display: block; height: 100%; background: var(--coral); border-radius: 99px; transition: width .6s linear; }
.bar.dead > i { background: var(--grey); }

.legs { display: flex; justify-content: space-between; font-size: .84rem; color: var(--ink-soft); font-weight: 600; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 18px; }

/* ---------------------------------------------------------- hand it over */

.handoff { border-color: #CFE3C6; background: #F4FAF2; }
.handoff h2 { color: #2E7D46; }
.handoff-btns { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .handoff-btns { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

a.go {
  display: block; text-align: center; text-decoration: none; line-height: 1.3;
}
button.go.ghost, a.go.ghost {
  background: var(--paper-2); color: var(--ink);
  box-shadow: 0 4px 0 var(--line); border: 2px solid var(--line);
}
button.go.ghost:hover, a.go.ghost:hover { background: #fff; }

.handoff-note {
  margin: 14px 0 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.6;
}

/* the actual text to copy, shown rather than hidden behind a button */
.handoff-text {
  width: 100%; font: inherit; font-size: .95rem; line-height: 1.5;
  color: var(--ink); background: var(--paper-2);
  border: 2px dashed #BFD9B4; border-radius: 12px;
  padding: 12px 14px; margin: 0 0 12px; resize: vertical;
  -webkit-user-select: all; user-select: all;
}
.handoff-text:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(63, 158, 140, .15); }

.remind { margin-top: 14px; font-size: .92rem; padding: 12px 16px; }

/* ------------------------------------------------- the scroll, on the map */

/* The whole sequence is timed in CSS so the stages cannot drift apart:
     0.00s  the bird drops in and settles          (.touchdown)
     0.55s  a rolled scroll appears at its feet    (.scroll.arrive)
     0.85s  the scroll unravels                    (.note-paper.open)
     1.30s  the writing appears                    (inkIn)
   Anchored at --fx/--fy, which the script sets to the bird's feet. */

.scroll {
  position: absolute; z-index: 6;
  width: min(74%, 380px);
  text-align: center;
  left: var(--fx, 50%); top: var(--fy, 50%);
  transform-origin: top center;
  transform: translateX(-50%) scaleY(.06) scaleX(.5);
  opacity: 0;
  filter: drop-shadow(0 8px 18px rgba(59, 48, 38, .3));
  transition: transform .34s cubic-bezier(.34, 1.35, .5, 1) .55s,
              opacity .22s ease .55s;
}
.scroll.arrive { transform: translateX(-50%) scale(1); opacity: 1; }

/* No room below the bird, so it hangs the other way and opens upward. */
.scroll.up {
  top: auto; bottom: var(--fy, 50%);
  transform-origin: bottom center;
}

/* the twine from the bird's foot to the roll. --tx is the bird's position
   along the scroll, since the scroll gets nudged sideways to stay on the map */
.scroll::before {
  content: ''; position: absolute; left: var(--tx, 50%); top: -11px;
  width: 2px; height: 12px; margin-left: -1px;
  background: #C0A87E; border-radius: 2px;
  opacity: 0; transition: opacity .2s ease .62s;
}
.scroll.up::before { top: auto; bottom: -11px; }
.scroll.arrive::before { opacity: 1; }

/* the rolled ends of the scroll */
/* The rolled ends. Ink outline and a hard shadow, like every other object on
   the site: the soft tan gradient it had before belonged to a different, more
   realistic drawing than the one we are making. */
.note-roll {
  height: 17px; border-radius: 99px;
  background: linear-gradient(180deg, #FBF3E2 0 45%, #E8D5AE 45% 100%);
  border: 3px solid var(--outline);
  box-shadow: 2px 2px 0 rgba(59, 48, 38, .28);
  position: relative; z-index: 2;
}
/* A darker seam down the middle, so it reads as rolled rather than as a pill. */
.note-roll::after {
  content: ''; position: absolute; left: 10px; right: 10px; top: 50%;
  height: 2px; margin-top: -1px; border-radius: 2px;
  background: rgba(59, 48, 38, .22);
}
/* End caps: the cut face of the roll, which is what makes it a tube. */
.note-roll::before {
  content: ''; position: absolute; top: -3px; bottom: -3px; left: -3px;
  width: 15px; border-radius: 99px;
  background: radial-gradient(circle at 55% 50%, #D8BF92 0 34%, #EFE0BE 36% 100%);
  border: 3px solid var(--outline);
}
.note-roll.bottom::before { left: auto; right: -3px; }

.note-paper {
  display: grid; grid-template-rows: 0fr;
  /* delayed until the bird has landed and the roll has appeared at its feet,
     so the stages are sequenced by CSS rather than by a timer */
  transition: grid-template-rows .62s cubic-bezier(.22, .9, .3, 1) .85s;
  /* Aged paper: ruled lines, a warm tint, and a shadow under each roll so the
     sheet reads as curling out of them rather than being a flat panel stuck
     between two pills. The gradients are fixed to the paper, not the text, so
     nothing slides while the scroll unrolls. */
  background:
    /* curl shadow at the top and bottom edges */
    linear-gradient(180deg, rgba(120, 96, 60, .20), transparent 22px),
    linear-gradient(0deg, rgba(120, 96, 60, .16), transparent 18px),
    /* a faint warm blotch, so the sheet is not perfectly even */
    radial-gradient(120% 60% at 18% 12%, rgba(198, 160, 96, .13), transparent 60%),
    radial-gradient(90% 50% at 88% 82%, rgba(198, 160, 96, .11), transparent 60%),
    /* ruled lines */
    repeating-linear-gradient(180deg,
      transparent 0 27px,
      rgba(122, 146, 178, .18) 27px 28px),
    #FDF4E0;
  border-left: 3px solid var(--outline); border-right: 3px solid var(--outline);
  box-shadow: 2px 2px 0 rgba(59, 48, 38, .28);
  box-shadow: inset 0 0 30px rgba(196, 168, 116, .2);
}
.note-paper.open { grid-template-rows: 1fr; }
.note-inner { overflow: hidden; padding-bottom: 30px; }   /* clear space for the seal */
.note-paper.open .note-inner > * { animation: inkIn .4s ease 1.3s both; }

.under-map { text-align: center; margin: -6px 0 4px; }

.reply { text-align: center; background: #F6F2FA; border-color: #DCCFE9; }
.reply h2 { color: var(--plum); }
.reply .hint { margin-bottom: 14px; }
.reply .go { background: var(--plum); box-shadow: 0 4px 0 #6E4F8E; }
.reply .go:hover { background: #9E7CC0; }

.note-text {
  margin: 0; padding: 24px 26px 4px;
  /* Handwriting, from fonts already on the device. No webfont: the CSP allows
     only same-origin, and a note that arrives by pigeon should not be set in
     the same typeface as the rest of the interface. */
  font-family: 'Bradley Hand', 'Segoe Script', 'Snell Roundhand', 'Apple Chancery',
               'Comic Sans MS', cursive;
  font-size: 1.3rem; line-height: 1.42; font-weight: 600;
  color: #3E3B52;                       /* ink blue-black, not interface black */
  overflow-wrap: anywhere;
  /* Sits on the ruled lines rather than floating between them. */
  text-align: center;
}
.note-from {
  margin: 0; padding: 2px 26px 18px; color: #6B6480; font-size: 1rem;
  text-align: center;
  font-family: 'Bradley Hand', 'Segoe Script', 'Snell Roundhand', 'Apple Chancery',
               'Comic Sans MS', cursive;
}
/* The apology is a note in the margin, in the interface font, so it is clearly
   the loft speaking rather than the sender. */
.note-late {
  margin: 0 20px 6px; padding: 9px 12px;
  background: rgba(214, 190, 140, .22);
  border: 2px dashed #CBB489; border-radius: 10px;
  color: #7A6440; font-size: .78rem; font-style: italic;
}
/* a very long message must not push the scroll off the map */
.note-inner { max-height: 62vh; }
.note-paper.open .note-inner { overflow-y: auto; }

@keyframes inkIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

button.replay {
  margin-top: 14px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  border: 2px dotted var(--line); border-radius: 10px; padding: 7px 14px;
}
button.replay:hover { color: var(--coral); border-color: var(--coral); }

.bar.resting > i { background: var(--plum); }

.eulogy {
  background: #F3EFE6; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 20px; text-align: center; margin: 20px 0;
}
.eulogy h2 { margin: 8px 0 6px; font-size: 1.3rem; }
.eulogy p { margin: 0; color: var(--ink-soft); }
.eulogy .cause { font-style: italic; color: var(--ink); margin-top: 8px; }
.eulogy svg { width: 90px; height: 70px; overflow: visible; }

.landed { background: #E9F4EA; border-color: #B9DCBE; }
.landed h2 { color: #2E7D46; }

/* ---------------------------------------------------------------- aviary */

.board { display: grid; gap: 12px; }
.bird-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper-2); border: 3px solid var(--outline);
  border-radius: 15px; padding: 12px 16px; text-decoration: none; color: inherit;
  box-shadow: var(--hard-sm);
  transition: transform .12s cubic-bezier(.3,1.5,.5,1), box-shadow .12s, background .15s;
}
.bird-row:hover {
  transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--coral);
  background: #FFF8EC;
}
.bird-row .nm { font-weight: 800; min-width: 96px; }
.bird-row .rt { color: var(--ink-soft); font-size: .9rem; flex: 1; min-width: 0; }
.bird-row .pg { width: 92px; flex: none; }
.bird-row .st { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; min-width: 62px; text-align: right; }
.st.flying { color: var(--coral); }
.st.arrived { color: #2E7D46; }
.st.resting { color: var(--plum); }
/* block, not inline: these are spans, so height and width need a block box */
.mini-bar {
  display: block; width: 100%; height: 8px; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 99px; overflow: hidden;
}
.mini-bar > i { display: block; height: 100%; background: var(--coral); min-width: 2px; }
.mini-bar.resting > i { background: var(--plum); }
.mini-bar.lost > i { background: var(--grey); }

.empty { text-align: center; color: var(--ink-soft); padding: 40px 20px; }

/* ----------------------------------------------------------------- misc */

.footnote { text-align: center; color: var(--ink-soft); font-size: .84rem; margin-top: 28px; line-height: 1.7; }
.footnote a { color: var(--coral); }
.share {
  display: flex; gap: 8px; align-items: center; margin-top: 14px;
  background: var(--paper); border: 2px dashed var(--line); border-radius: 12px; padding: 10px 12px;
}
.share input { border: none; background: transparent; padding: 0; font-size: .86rem; color: var(--ink-soft); }
.share input:focus { box-shadow: none; }
.share button {
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  background: var(--ink); color: var(--paper-2); border: none;
  border-radius: 8px; padding: 7px 12px; flex: none;
}

@media (max-width: 560px) {
  .wrap { padding: 16px 14px 56px; }
  .logo h1 { font-size: 1.85rem; }
  .logo svg { width: 46px; }
  .tagline { font-size: .94rem; }
  .card { padding: 16px; border-radius: 14px; }
  .mapbox { padding: 6px; margin: 14px 0; }

  .status .big { font-size: 2rem; }

  /* the two city fields stack rather than squeezing side by side */
  .row { gap: 0; }
  .row > * { flex: 1 1 100%; }

  .bird-row { flex-wrap: wrap; gap: 8px 12px; }
  .bird-row .rt { flex-basis: 100%; order: 3; }
  .bird-row .pg { width: 100%; order: 4; }
  .bird-row .nm { min-width: 0; flex: 1; }

  .facts, .estimate { grid-template-columns: 1fr 1fr; gap: 8px; }
  .est { padding: 9px 10px; }
  .est .v { font-size: 1.05rem; }

  .note-text { font-size: 1.1rem; padding: 20px 18px 6px; }
  .note-from, .note-late { padding-left: 18px; padding-right: 18px; }
  .note-late { margin-left: 14px; margin-right: 14px; }

  .bubble { max-width: 62vw; font-size: .78rem; padding: 7px 9px; }

  .share { flex-wrap: wrap; }
  .share input { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .flap, .flap-back, .bird-layer, .clouds { animation: none; }
  .route-flown, .bar > i { transition: none; }
}


/* ------------------------------------------- what a stopped bird is doing */

/* speed lines, so a bird creeping along at true pigeon pace still reads as
   flying rather than pinned to the map */
.p-speed path {
  stroke: var(--outline); stroke-width: 1.6; stroke-linecap: round; fill: none;
  opacity: 0; animation: whoosh 1.1s ease-out infinite;
}
@keyframes whoosh {
  0%   { opacity: 0; transform: translateX(6px); }
  35%  { opacity: .5; }
  100% { opacity: 0; transform: translateX(-8px); }
}

/* asleep */
.zzz {
  font-family: var(--font); font-weight: 800; fill: var(--ink);
  opacity: 0; animation: zzzUp 2.6s ease-out infinite;
}
@keyframes zzzUp {
  0%   { opacity: 0; transform: translate(0, 4px) rotate(-8deg); }
  30%  { opacity: .95; }
  100% { opacity: 0; transform: translate(6px, -12px) rotate(10deg); }
}

/* found a bagel */
.bagel-o { fill: #E8B96B; stroke: var(--outline); stroke-width: 1.6; }
.bagel-hole { fill: var(--land); stroke: var(--outline); stroke-width: 1.2; }
.bagel { animation: nibble 1.5s ease-in-out infinite; }
@keyframes nibble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg) translateY(-1px); } }
.crumb { fill: #C9954A; }

/* patched up after a plane or a crow */
.bandage { fill: #FFF6E8; stroke: var(--outline); stroke-width: 1.5; }
.bandage-line { stroke: var(--outline); stroke-width: 1.1; opacity: .5; fill: none; }

/* flew into a window */
.star { fill: #FFD34D; stroke: var(--outline); stroke-width: 1.2; animation: twinkle 1.5s ease-in-out infinite; }
.stars { animation: orbit 4s linear infinite; }
@keyframes twinkle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes orbit { to { transform: rotate(360deg); } }

/* caught in the rain */
.raincloud { fill: #C6CEDA; stroke: var(--outline); stroke-width: 1.5; }
.drop { fill: #6FB7E8; stroke: var(--outline); stroke-width: 1; animation: fall 1.2s linear infinite; }
@keyframes fall {
  0%   { opacity: 0; transform: translateY(-3px); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

/* lost a feather to a hawk, or to the wrong flock */
.feather-vane { fill: var(--grey-light); stroke: var(--outline); stroke-width: 1.4; }
.feather-quill { stroke: var(--outline); stroke-width: 1.3; fill: none; }
.feather { animation: drift 3.4s ease-in-out infinite; }
@keyframes drift {
  0%   { opacity: 0; transform: translateY(-4px) rotate(-10deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(6px, 26px) rotate(65deg); }
}

/* just looking at a river */
.ripple {
  fill: none; stroke: #6FB7E8; stroke-width: 1.4;
  animation: ripple 2.4s ease-out infinite;
  transform-box: fill-box; transform-origin: center;
  stroke-width: 1.6;
}
@keyframes ripple {
  0%   { opacity: .9; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.8); }
}

@media (prefers-reduced-motion: reduce) {
  .p-speed path, .zzz, .bagel, .star, .stars, .drop, .feather, .ripple,
  .p-eye, .logo svg { animation: none; }
}


/* ---------------------------------------------------- flight status board */

.fb-head, .fb-row {
  display: grid; align-items: center; gap: 12px;
  /* the name column sizes to the longest pigeon, so Bartholomew does not
     run into the route beside him */
  grid-template-columns: minmax(92px, max-content) 1fr 90px 74px 104px;
}
.fb-head {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0 14px 8px;
}
.fb-row {
  background: var(--paper-2); border: 3px solid var(--outline); border-radius: 14px;
  padding: 11px 14px; margin-bottom: 10px; text-decoration: none; color: inherit;
  box-shadow: var(--hard-sm);
  transition: transform .12s cubic-bezier(.3,1.5,.5,1), box-shadow .12s, background .15s;
}
.fb-row:hover {
  transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--coral); background: #FFF8EC;
}
.fb-bird { font-weight: 800; padding-right: 10px; white-space: nowrap; }
.fb-leg { min-width: 0; font-size: .93rem; }
.fb-leg b { font-weight: 700; }
.fb-arrow { color: var(--coral); font-weight: 800; margin: 0 5px; }
.fb-eta { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .88rem; }
.fb-bar {
  display: block; height: 9px; background: var(--paper);
  border: 2px solid var(--outline); border-radius: 99px; overflow: hidden;
}
.fb-bar > i { display: block; height: 100%; background: var(--coral); min-width: 2px; }

.fb-status {
  font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-align: center;
  border: 2px solid var(--outline); border-radius: 99px; padding: 4px 6px;
}
.fb-status.flying { background: #FFE2CF; color: var(--coral-dark); }
/* a stopped bird blinks, the way a delayed flight does on a real board */
.fb-status.resting {
  background: #EFE2FB; color: var(--plum-dark);
  animation: blinkStatus 1.6s steps(1, end) infinite;
}
@keyframes blinkStatus { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .35; } }

@media (max-width: 620px) {
  .fb-head { display: none; }
  .fb-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "bird status" "leg leg" "bar eta";
    gap: 8px 10px;
  }
  .fb-bird { grid-area: bird; }
  .fb-status { grid-area: status; }
  .fb-leg { grid-area: leg; }
  .fb-bar { grid-area: bar; align-self: center; }
  .fb-eta { grid-area: eta; text-align: right; }
}

/* the header bird is not going anywhere, so it does not need speed lines */
.logo .p-speed { display: none; }

/* -------------------------------------------------------- tap a bird */

.bird-hit { cursor: pointer; }
.bird-hit:focus { outline: none; }
.bird-hit:hover .pidge, .bird-hit:focus .pidge { filter: drop-shadow(0 0 0 var(--coral)); }
.bird-hit:hover, .bird-hit:focus-visible { transform-box: fill-box; }

.map-hint {
  margin: 6px 0 2px; text-align: center;
  font-size: .8rem; font-weight: 700; color: var(--ink-soft);
}

.peek {
  position: relative;
  background: var(--paper-2); border: 3px solid var(--outline);
  border-radius: var(--radius); box-shadow: var(--hard);
  padding: 14px 20px 20px; margin: 18px 0; text-align: center;
}
.peek.in { animation: popIn .38s cubic-bezier(.2, 1.5, .45, 1) both; }
.peek-scene { display: block; width: 190px; height: 158px; margin: 0 auto; overflow: visible; }
.peek h3 { margin: 2px 0 6px; font-size: 1.35rem; font-weight: 800; }
.peek-what { margin: 0 auto 8px; max-width: 34em; color: var(--ink); font-size: .96rem; }
.peek-route {
  margin: 0 0 14px; color: var(--ink-soft); font-size: .85rem; font-weight: 700;
}
.peek .go { max-width: 300px; margin: 0 auto; }
.peek-x {
  position: absolute; top: 8px; right: 10px;
  width: 34px; height: 34px; line-height: 1; font-size: 1.4rem; font-weight: 800;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--outline); border-radius: 50%; cursor: pointer;
}
.peek-x:hover { background: var(--coral); color: #fff; }

/* ------------------------------------------- the opening cartoon */

/* Sits on top of the map inside the same frame, then dissolves to reveal it. */
.scenebox {
  position: absolute; inset: 10px; z-index: 4;
  overflow: hidden; border-radius: 12px;
  background: var(--paper-2);
}
.scenebox svg { display: block; width: 100%; height: 100%; border-radius: 12px; }
.scenebox.sc-done { animation: sceneOut .5s ease forwards; pointer-events: none; }
@keyframes sceneOut { to { opacity: 0; transform: scale(1.04); } }

@media (max-width: 560px) { .scenebox { inset: 6px; } }

/* parallax: three depths, each at its own pace */
.sc-l1 > g { animation: scroll 26s linear infinite; }
.sc-l2 > g { animation: scroll 11s linear infinite; }
.sc-l3 > g { animation: scroll 5s linear infinite; }
.sc-l1 > g:nth-child(2), .sc-l2 > g:nth-child(2), .sc-l3 > g:nth-child(2) {
  animation-name: scroll2;
}
@keyframes scroll  { from { transform: translateX(0); }    to { transform: translateX(-480px); } }
@keyframes scroll2 { from { transform: translateX(480px); } to { transform: translateX(0); } }

.sc-far   { fill: #9FBFA8; stroke: var(--outline); stroke-width: 2.5; stroke-linejoin: round; }
.sc-snow  { fill: #FFFDF6; stroke: var(--outline); stroke-width: 2; stroke-linejoin: round; }
.sc-cactus{ fill: #6FB57A; stroke: var(--outline); stroke-width: 2.4; stroke-linejoin: round; }
.sc-dune  { fill: #F0D2A0; stroke: var(--outline); stroke-width: 2.4; }
.sc-grass { fill: #86C46B; stroke: var(--outline); stroke-width: 1.8; }
.sc-barn  { fill: #D9705A; stroke: var(--outline); stroke-width: 2.4; }
.sc-barn-roof { fill: #8E5B4A; stroke: var(--outline); stroke-width: 2.4; stroke-linejoin: round; }
.sc-trunk { fill: #9A6B4A; stroke: var(--outline); stroke-width: 2; }
.sc-tree  { fill: #5EA86B; stroke: var(--outline); stroke-width: 2.4; stroke-linejoin: round; }
.sc-tower { fill: #C8D4E4; stroke: var(--outline); stroke-width: 2.4; }
.sc-window{ fill: #FFE9A8; stroke: var(--outline); stroke-width: 1.2; }
.sc-wave  { fill: #6FC5F0; stroke: var(--outline); stroke-width: 2.2; }
.sc-wave-2{ fill: #4FAEE0; opacity: .9; }
.sc-ground{ fill: #C7E8A4; }
.sc-ground-line { stroke: var(--outline); stroke-width: 3; fill: none; }
.sc-cloud ellipse { fill: #fff; stroke: var(--outline); stroke-width: 1.6; }

/* The bird's position comes from the transform attribute set in script; these
   only nudge it, so they stay correct at any frame size. */
.sc-bird.sc-fly > g  { animation: scBob 2.4s ease-in-out infinite; }
.sc-bird.sc-land > g { animation: scLand 2.4s cubic-bezier(.4,.1,.5,1) forwards; }
@keyframes scBob  { 0%,100% { transform: translateY(-9px); } 50% { transform: translateY(9px); } }
@keyframes scLand {
  0%   { transform: translateY(-46px) rotate(-7deg); }
  70%  { transform: translateY(6px) rotate(3deg); }
  85%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.sc-cap {
  font-family: var(--font); font-size: 17px; font-weight: 800; fill: var(--ink);
  paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 5;
  stroke-linejoin: round;
  animation: capIn .5s ease .2s both;
}
@keyframes capIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }

.scene-skip {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer;
  background: var(--paper-2); color: var(--ink);
  border: 2px solid var(--outline); border-radius: 99px; padding: 5px 12px;
}
.scene-skip:hover { background: var(--coral); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sc-l1 > g, .sc-l2 > g, .sc-l3 > g, .sc-bird { animation: none; }
}

/* a note that is not ours to read */
.scroll.sealed .note-text { font-style: italic; color: var(--ink-soft); }
.scroll.sealed .note-paper { background: #F3EEE2; }
.scroll.sealed .note-from { font-size: .82rem; }

/* --------------------------------------------- picking out one flight path */

.route-on  { stroke: var(--coral); opacity: 1; stroke-width: 4; stroke-dasharray: none; }
.route-off { opacity: .12; }
.pin.route-off { opacity: .18; }

.sel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  background: var(--paper-2); border: 3px solid var(--outline);
  border-radius: 14px; box-shadow: var(--hard-sm);
  padding: 11px 16px; margin: -6px 0 18px;
  animation: popIn .3s cubic-bezier(.2, 1.5, .45, 1) both;
}
.sel-name { font-weight: 800; font-size: 1.05rem; }
.sel-leg { font-weight: 700; }
.sel-leg b { color: var(--coral); }
.sel-meta { color: var(--ink-soft); font-size: .85rem; font-weight: 600; }

/* scenery for the wider set of places */
.sc-mesa   { fill: #C97A4E; stroke: var(--outline); stroke-width: 2.4; stroke-linejoin: round; }
.sc-mesa-2 { fill: #B4663F; stroke: var(--outline); stroke-width: 2.4; stroke-linejoin: round; }
.sc-strata { stroke: #9A5233; stroke-width: 2; opacity: .55; fill: none; }
.sc-fir    { fill: #3F8A5C; stroke: var(--outline); stroke-width: 2.2; stroke-linejoin: round; }
.sc-butte  { fill: #D9CE8E; stroke: var(--outline); stroke-width: 2.2; }
.sc-scrub  { fill: #A8A362; stroke: var(--outline); stroke-width: 1.8; }
.sc-mill      { fill: #E4E0D2; stroke: var(--outline); stroke-width: 2; }
.sc-mill-hub  { fill: #8E8B7A; stroke: var(--outline); stroke-width: 1.8; }
.sc-mill-blade{ stroke: var(--outline); stroke-width: 3; stroke-linecap: round; fill: none;
                transform-box: fill-box; transform-origin: 0 100%; }
.sc-field  { fill: #B9DD7E; stroke: var(--outline); stroke-width: 2; }
.sc-field-2{ fill: #D8CE72; stroke: var(--outline); stroke-width: 2; }
.sc-silo   { fill: #E8E2CE; stroke: var(--outline); stroke-width: 2.4; }
.sc-water  { fill: #7FC4D8; }
.sc-moss   { fill: #74A86B; stroke: var(--outline); stroke-width: 2.2; }
.sc-vine   { stroke: #5F8A56; stroke-width: 2; fill: none; }
.sc-reed   { stroke: #6F9A54; stroke-width: 2.4; fill: none; }
.sc-boat   { fill: #D9705A; stroke: var(--outline); stroke-width: 2.2; }
.sc-sail   { fill: #FFFDF6; stroke: var(--outline); stroke-width: 2.2; stroke-linejoin: round; }

/* ------------------------------------------------------------- the globe */

  font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer;
  background: var(--paper-2); color: var(--ink);
  border: 3px solid var(--outline); border-radius: 99px; padding: 7px 18px;
  box-shadow: var(--hard-sm);
}
.vt.on { background: var(--coral); color: #fff; }
.vt:hover { transform: translate(-1px, -1px); }

.globebox { background: #F4F7FB; }
#globe { touch-action: none; cursor: grab; }
#globe.gl-dragging { cursor: grabbing; }

.gl-sea   { fill: url(#gl-sea); }
.gl-shine { fill: url(#gl-shine); pointer-events: none; }
.gl-rim   { fill: none; stroke: var(--outline); stroke-width: 3.5; }
.gl-grid path { fill: none; stroke: #fff; stroke-width: 1; opacity: .35; }
.gl-land path {
  fill: var(--land); stroke: var(--outline); stroke-width: 2;
  stroke-linejoin: round;
}
.gl-route {
  fill: none; stroke: var(--outline); stroke-width: 2.4;
  stroke-dasharray: 2 8; opacity: .5; stroke-linecap: round;
}
.gl-route.gl-on { stroke: var(--coral); stroke-dasharray: none; stroke-width: 3.4; opacity: 1; }
.gl-route.gl-off, .gl-pin.gl-off { opacity: .12; }
.gl-pin { fill: var(--coral); stroke: var(--outline); stroke-width: 1.6; }
.gl-bird { cursor: pointer; }

.sel-zoom {
  font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer;
  background: var(--coral); color: #fff;
  border: 2px solid var(--outline); border-radius: 99px; padding: 5px 12px;
  margin-left: auto;
}

/* globe tap targets: invisible, but thumb sized */
.gl-hit { fill: transparent; cursor: pointer; }
.gl-route-hit { fill: none; stroke: transparent; stroke-width: 22; cursor: pointer; }

/* the board rows are buttons now */
button.fb-row {
  width: 100%; font: inherit; color: inherit; text-align: left;
  cursor: pointer; min-height: 56px;
}
button.fb-row:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--outline); }
.fb-row.on { background: #FFF2E4; box-shadow: 5px 5px 0 var(--coral); }

/* -------------------------------------------------------- country drill-in */

.gl-country { fill: var(--land); stroke: var(--outline); stroke-width: 1.4; stroke-linejoin: round; }
.gl-country.gl-hot { fill: #A8E08A; cursor: pointer; stroke-width: 2; }
.gl-country.gl-hot:hover { fill: #FFD9A0; }

.countrybar {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 -6px;
}
.cb-back {
  font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer;
  background: var(--paper-2); color: var(--ink);
  border: 3px solid var(--outline); border-radius: 99px; padding: 8px 16px;
  box-shadow: var(--hard-sm); min-height: 44px;
}
.cb-back:hover { background: var(--coral); color: #fff; }
.cb-name { font-size: 1.25rem; font-weight: 800; }

.land-here { fill: #B7E88F; }
.land-near { }
.land-near { fill: #DCE9CE; opacity: .85; }

/* =========================================================================
   THE REVAMP: hero, grouped form, drawn assets
   ========================================================================= */

/* ------------------------------------------------------------- the hero */

.hero { position: relative; margin-bottom: 8px; }
.hero-sky { position: absolute; inset: 0; overflow: hidden; }
.hero-sky svg { width: 100%; height: 100%; display: block; }
.hero-front {
  position: relative; z-index: 2;
  text-align: center; padding: 18px 20px 34px;
}
.hero-loft { width: 132px; margin: 0 auto -6px; }
.hero-loft svg { width: 100%; height: auto; display: block; overflow: visible; }

.hero .logo { display: inline-block; }
.hero .logo h1 { font-size: 3rem; }
.hero .tagline {
  max-width: 30em; margin: 8px auto 0; color: var(--ink);
  font-weight: 600; text-shadow: 0 2px 0 rgba(255,255,255,.7);
}

/* a torn paper edge where the sky meets the page */
.hero-edge {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; z-index: 3;
  background:
    radial-gradient(circle at 10px -4px, transparent 12px, var(--paper) 12px) repeat-x;
  background-size: 24px 18px;
}

/* the sky art itself */
.a-sun-face { fill: #FFD34D; stroke: var(--outline); stroke-width: 3; }
.a-ray { stroke: var(--outline); stroke-width: 3; stroke-linecap: round; fill: none; }
.a-sun { animation: sunTurn 34s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sunTurn { to { transform: rotate(360deg); } }
.a-cloud ellipse { fill: #fff; stroke: var(--outline); stroke-width: 2.4; }
.art-banner .a-cloud { animation: heroDrift 26s ease-in-out infinite alternate; }
@keyframes heroDrift { from { transform: translateX(-10px); } to { transform: translateX(12px); } }
.a-flyer { animation: heroFly 7s ease-in-out infinite alternate; }
@keyframes heroFly { from { transform: translate(120px, 62px) scale(1); } to { transform: translate(180px, 44px) scale(1); } }

/* the loft */
.a-post { fill: #A97C50; stroke: var(--outline); stroke-width: 3; }
.a-post-brace { stroke: var(--outline); stroke-width: 3; stroke-linecap: round; fill: none; }
.a-loft-body { fill: #F4E3C4; stroke: var(--outline); stroke-width: 3.5; }
.a-loft-roof { fill: #E0705A; stroke: var(--outline); stroke-width: 3.5; stroke-linejoin: round; }
.a-loft-ridge { stroke: var(--outline); stroke-width: 2.4; opacity: .5; fill: none; }
.a-loft-board { fill: #C9A16B; stroke: var(--outline); stroke-width: 3; }
.a-loft-hole { fill: #4A3B2E; stroke: var(--outline); stroke-width: 2.6; stroke-linejoin: round; }
.a-vane { stroke: var(--outline); stroke-width: 3; stroke-linecap: round; fill: none; }
.a-vane-arrow { stroke: var(--outline); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.a-loft-topbird { animation: perch 3.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes perch { 0%,100% { transform: translate(96px,22px) scale(.42) rotate(0); } 50% { transform: translate(96px,20px) scale(.42) rotate(-3deg); } }

/* ------------------------------------------------------- headings, trim */

h2.scribble { position: relative; display: inline-block; padding-bottom: 4px; }
.squig { display: block; height: 9px; margin-top: 2px; }
.squig svg { width: 100%; height: 9px; display: block; overflow: visible; }
.a-squiggle { fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linecap: round; }

.bunting { height: 20px; margin: -8px -8px 10px; }
.bunting svg { width: 100%; height: 20px; display: block; }
.a-bunt-string { fill: none; stroke: var(--outline); stroke-width: 2; }
.a-bunt { stroke: var(--outline); stroke-width: 2; stroke-linejoin: round; }

/* ------------------------------------------------------ grouped fields */

.group {
  position: relative;
  border: 3px dashed #E0CFAC; border-radius: 16px;
  padding: 22px 16px 8px; margin: 26px 0 18px;
}
.group-tag {
  position: absolute; top: -13px; left: 14px;
  background: var(--paper-2); padding: 2px 12px;
  border: 3px solid var(--outline); border-radius: 99px;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.lab-ico { margin-right: 6px; }
label.field > .lab .opt { display: block; font-weight: 500; font-size: .8rem; margin-top: 1px; }

/* ---------------------------------------------------------- the notepaper */

.notepaper { display: block; position: relative; }
.perf { display: block; height: 11px; }
.perf svg { display: block; width: 100%; height: 11px; }
.a-perf { fill: var(--paper-2); stroke: var(--outline); stroke-width: 2; }
.perf-top { margin-bottom: -3px; }
.perf-bottom { transform: rotate(180deg); margin-top: -3px; }
.field-note textarea {
  border-radius: 0; border-top: none; border-bottom: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, #E6DCC4 27px 28px),
    var(--paper-2);
  line-height: 28px; padding-top: 8px; min-height: 116px;
}

/* ------------------------------------------------------------ the steps */

ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
ol.steps li {
  position: relative; counter-increment: s;
  padding: 0 0 14px 44px; font-size: .95rem; line-height: 1.55; color: var(--ink-soft);
}
ol.steps li b { color: var(--ink); }
ol.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; line-height: 26px; text-align: center;
  font-weight: 800; font-size: .95rem;
  background: var(--coral); color: #fff;
  border: 3px solid var(--outline); border-radius: 50%;
}
ol.steps li:last-child { padding-bottom: 0; }

.aside {
  display: flex; gap: 12px; align-items: flex-start;
  background: #FFF6E4; border: 3px solid var(--outline); border-radius: 14px;
  padding: 14px 16px; margin-top: 18px; box-shadow: var(--hard-sm);
}
.aside-ico { font-size: 1.6rem; line-height: 1; flex: none; }
.aside p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }

/* --------------------------------------------------------- the big button */

.go-big { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 1.18rem; padding: 17px 20px; }
.go-bird { width: 34px; height: 26px; flex: none; }
.go-bird svg { width: 100%; height: 100%; overflow: visible; }
.go:hover .go-bird { animation: eager .5s ease-in-out infinite alternate; }
@keyframes eager { from { transform: translateX(0); } to { transform: translateX(5px); } }

/* -------------------------------------------------------- empty states */

.art-empty { width: 190px; height: auto; display: block; margin: 0 auto 4px; }
.a-empty-line {
  font-family: var(--font); font-size: 13px; font-weight: 800; fill: var(--ink-soft);
}

/* wax seal on a delivered note */
.art-seal { width: 46px; height: 46px; display: block; margin: 0 auto 10px; }
.a-wax { fill: #D2503C; stroke: var(--outline); stroke-width: 2.4; stroke-linejoin: round; }
.a-wax-in { fill: none; stroke: #8E2E20; stroke-width: 2; }
.a-wax-letter { font-family: var(--font); font-size: 18px; font-weight: 800; fill: #FFF0E6; }

@media (max-width: 560px) {
  .hero .logo h1 { font-size: 2.2rem; }
  .hero-loft { width: 108px; }
  .hero-front { padding: 12px 16px 28px; }
  .group { padding: 20px 12px 6px; }
}

/* slimmer hero for the inner pages */
.hero-slim .hero-front { padding: 14px 20px 30px; }
.hero-slim .logo { display: inline-flex; align-items: center; gap: 10px; }
.hero-slim .logo h1 { font-size: 2.1rem; }
.logo-bird { width: 58px; height: 42px; display: block; }
.logo-bird svg { width: 100%; height: 100%; overflow: visible; }
.hero-slim .tagline { font-size: .96rem; }

/* A wax seal closes a letter, so it sits at the foot of the sheet and slightly
   askew, the way a real one is pressed. */
.note-seal {
  position: absolute; right: 16px; bottom: 6px; z-index: 3;
  transform: rotate(-9deg);
  filter: drop-shadow(1px 2px 0 rgba(59, 48, 38, .3));
}
.note-seal svg { width: 40px; height: 40px; display: block; }
.note-paper { position: relative; }

/* invisible thumb-sized target under each bird on the flat map */
.hit-pad { fill: transparent; }
.bird-hit { cursor: pointer; }

/* ------------------------------------------------------------- back bar */

/* Every page below the front door gets one of these. Left is where you came
   from, right is always a way to start your own. */
.backbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px 0 4px;
}
.bb-back, .bb-home {
  font: inherit; font-size: .86rem; font-weight: 800; text-decoration: none;
  border: 3px solid var(--outline); border-radius: 99px;
  padding: 9px 16px; min-height: 44px;
  display: inline-flex; align-items: center;
  box-shadow: var(--hard-sm);
  transition: transform .12s, box-shadow .12s, background .15s;
}
.bb-back { background: var(--paper-2); color: var(--ink); }
.bb-back:hover { background: var(--coral); color: #fff; }
.bb-home { background: var(--coral); color: #fff; }
.bb-home:hover { background: #FF8C5C; }
.bb-back:active, .bb-home:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--outline); }

@media (max-width: 560px) {
  .bb-back, .bb-home { font-size: .8rem; padding: 9px 13px; }
}

/* ------------------------------------------- the bespoke resting scenes */

.sc-bird.sc-rest > g { animation: restBreathe 3.4s ease-in-out infinite; }
@keyframes restBreathe { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.sc-cap-night { fill: #FFF6E0; stroke: rgba(20,24,50,.65); }

/* bagel: a bench, a big bagel, a hopeful friend */
.rs-bench { fill: #C08A52; stroke: var(--outline); stroke-width: 3; }
.rs-bench-leg { stroke: var(--outline); stroke-width: 5; stroke-linecap: round; fill: none; }
.rs-bagel { animation: nibble 1.6s ease-in-out infinite; transform-box: fill-box; }
.rs-friend { animation: hopeful 2.8s ease-in-out infinite; }
@keyframes hopeful { 0%,100% { transform: translateX(0) } 50% { transform: translateX(-8px) } }

/* sleep: night, a moon, a branch */
.rs-moon { fill: #FFF3C4; stroke: var(--outline); stroke-width: 3; }
.rs-moon-bite { fill: #3A4778; stroke: none; }
.rs-star { fill: #FFF6D8; animation: twinkle 2.4s ease-in-out infinite; }
.rs-branch { fill: #6B4B33; stroke: var(--outline); stroke-width: 3; stroke-linejoin: round; }
.rs-leaf { fill: #4E8A50; stroke: var(--outline); stroke-width: 2.4; }
.rs-night .zzz { fill: #FFF6E0; }

/* bandage: a fence post and the departing plane */
.rs-post { fill: #A97C50; stroke: var(--outline); stroke-width: 3; }
.rs-wire { stroke: var(--outline); stroke-width: 2.4; fill: none; opacity: .7; }
.rs-plane-body { fill: #E8EEF6; stroke: var(--outline); stroke-width: 3; stroke-linejoin: round; }
.rs-plane-wing, .rs-plane-tail { fill: #C6D2E2; stroke: var(--outline); stroke-width: 3; stroke-linejoin: round; }
.rs-plane { animation: flyoff 6s linear infinite; }
@keyframes flyoff { from { transform: translate(60%, 20%) } to { transform: translate(100%, 14%) } }
.rs-trail { stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .8; animation: whoosh 1.4s ease-out infinite; }

/* rain: a leaf to hide under */
.rs-bigleaf { fill: #5FA65C; stroke: var(--outline); stroke-width: 3.5; stroke-linejoin: round; }
.rs-stem { stroke: var(--outline); stroke-width: 4; fill: none; }
.rs-rain { stroke: #7FC4F0; stroke-width: 3; stroke-linecap: round; animation: pour .9s linear infinite; }
@keyframes pour { from { transform: translateY(-20px); opacity: 0 } 20% { opacity: .9 } to { transform: translateY(260px); opacity: 0 } }
.rs-puddle { fill: #8FC8E8; stroke: var(--outline); stroke-width: 2.4; }

/* stars: the very clean window */
.rs-glass { fill: #DFF1FF; stroke: var(--outline); stroke-width: 4; opacity: .85; }
.rs-frame { stroke: var(--outline); stroke-width: 4; fill: none; }
.rs-smudge { fill: #fff; stroke: #BBD8EA; stroke-width: 2; opacity: .9; }
.rs-sill { fill: #C9A16B; stroke: var(--outline); stroke-width: 3; }

/* feather: the hawk, leaving */
.rs-hawk-body, .rs-hawk-wing { fill: #6B5B4A; stroke: var(--outline); stroke-width: 2.6; stroke-linejoin: round; }
.rs-hawk { animation: flyoff 7s linear infinite; }
.rs-feather { animation: drift 3.6s ease-in-out infinite; }

/* stare: a river */
.rs-river { fill: #7FC4E8; }
.rs-ripple2 { fill: none; stroke: #fff; stroke-width: 2.4; opacity: .8; animation: ripple 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.rs-reed2 { stroke: #6F9A54; stroke-width: 4; stroke-linecap: round; fill: none; }

/* the shared set: floor, horizon, background */
.rs-ground { stroke: none; }
.rs-horizon { stroke: var(--outline); stroke-width: 4; fill: none; }
.rs-tuft { fill: #8FBF63; stroke: var(--outline); stroke-width: 2; }
.rs-hill { fill: #A9CE7E; stroke: var(--outline); stroke-width: 3; stroke-linejoin: round; }
.rs-hill-wet { fill: #7E9A6A; stroke: var(--outline); stroke-width: 3; }
.rs-hill-night { fill: #22301F; stroke: var(--outline); stroke-width: 3; }
.rs-rail { stroke: #7C8A96; stroke-width: 4; fill: none; }
.rs-trunk2 { fill: #9A6B4A; stroke: var(--outline); stroke-width: 3; }
.rs-canopy { fill: #6BB061; stroke: var(--outline); stroke-width: 3.5; }
.rs-rail2 { stroke: var(--outline); stroke-width: 4; fill: none; opacity: .8; }
.rs-wall { fill: #E7DCC6; }
.rs-frame-outer { fill: none; stroke: var(--outline); stroke-width: 5; }
.rs-cloud ellipse { fill: #fff; stroke: var(--outline); stroke-width: 2.6; }
.rs-cloud { animation: heroDrift 30s ease-in-out infinite alternate; }

/* ------------------------------------------------------- the extra poses */

.pose-sleep .p-shut, .pose-hunched .p-shut {
  stroke: var(--outline); stroke-width: 2; fill: none; stroke-linecap: round;
}
.p-spiral { fill: none; stroke: var(--outline); stroke-width: 1.8; stroke-linecap: round; }
.p-leg { stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.p-back-line { stroke: var(--outline); stroke-width: 1.6; opacity: .35; fill: none; }
.p-shakeline { stroke: var(--outline); stroke-width: 2.2; stroke-linecap: round; fill: none; opacity: .55; }

/* a little life in each */
.pose-sleep   { animation: snooze 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes snooze { 0%,100% { transform: scale(1) } 50% { transform: scale(1.04, .97) } }
.pose-peck    { animation: peck 1.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 20% 80%; }
@keyframes peck { 0%,60%,100% { transform: rotate(0) } 30% { transform: rotate(9deg) } }
.pose-dazed   { animation: wobble 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wobble { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) } }
.pose-hunched { animation: shiver .28s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes shiver { from { transform: translateX(-.8px) } to { transform: translateX(.8px) } }
.pose-shake   { animation: shakeit .18s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes shakeit { from { transform: rotate(-3deg) } to { transform: rotate(3deg) } }
.pose-back    { animation: lookabout 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes lookabout { 0%,100% { transform: rotate(0) } 45% { transform: rotate(3deg) } }

/* ------------------------------------------------- scene depth and light */

.fx-haze { fill: #FFFFFF; opacity: .28; }
.fx-haze-night { fill: #6B7BB8; opacity: .22; }

.fx-shadow { fill: #2E2620; opacity: .18; }
.fx-shadow-night { fill: #0B1026; opacity: .38; }

/* out-of-focus foreground: dark, soft, close to the lens */
.fx-fore { fill: #2F4A2A; opacity: .7; filter: blur(1.6px); }
.fx-fore-night { fill: #101A2E; opacity: .8; filter: blur(1.6px); }
.fx-sway { transform-box: fill-box; transform-origin: 100% 0; animation: foreSway 7s ease-in-out infinite alternate; }
@keyframes foreSway { from { transform: rotate(-1.2deg) } to { transform: rotate(1.2deg) } }

/* a warm light over the day scenes, a cool one at night, then a vignette */
.fx-wash {
  fill: #FFB25E; opacity: .1; mix-blend-mode: multiply; pointer-events: none;
}
.fx-wash-night {
  fill: #2A3570; opacity: .18; mix-blend-mode: multiply; pointer-events: none;
}
.fx-vignette {
  fill: none; pointer-events: none;
  stroke: #2E2620; stroke-width: 80; opacity: .1; filter: blur(26px);
}

/* ============================================================ anime layers
   Painted plate + animated character + effects + a slow camera move. The
   background is a painting; everything that moves is layered over it, which
   is how the real thing is put together. */

.anime { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; }
.anime-bg {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate(-1%, 0); }
  to   { transform: scale(1.12) translate(2%, -1.5%); }
}

/* god rays across the plate */
.anime-rays {
  position: absolute; inset: -20%;
  background: repeating-linear-gradient(102deg,
    rgba(255,240,200,.22) 0 14px, rgba(255,240,200,0) 14px 64px);
  mix-blend-mode: screen; opacity: .55;
  animation: rays 14s ease-in-out infinite alternate;
}
@keyframes rays { from { transform: translateX(-3%) } to { transform: translateX(3%) } }

/* the character sits in the scene, with a soft contact shadow */
.anime-char {
  position: absolute; left: 26%; bottom: 8%;
  width: 34%; height: auto; overflow: visible;
  filter: drop-shadow(0 10px 10px rgba(30,40,20,.45));
  animation: charBob 4.5s ease-in-out infinite;
}
@keyframes charBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-1.2%) } }

.anime-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mote { fill: #FFF6D8; opacity: 0; animation: mote 9s linear infinite; }
@keyframes mote {
  0% { opacity: 0; transform: translate(0, 20px) }
  25% { opacity: .85 }
  100% { opacity: 0; transform: translate(26px, -70px) }
}

/* a final colour grade to marry character and plate */
.anime-grade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 60% 30%, rgba(255,200,120,.16), rgba(20,30,50,.3));
  mix-blend-mode: soft-light;
}
.anime-cap {
  position: absolute; left: 0; right: 0; top: 14px; margin: 0; text-align: center;
  font-weight: 800; font-size: 1.05rem; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.8);
}

/* the painted character, composited into the painted plate */
.anime-char2 {
  position: absolute; left: 24%; bottom: 9%; width: 30%;
  filter: drop-shadow(0 14px 12px rgba(30,40,20,.42));
  animation: charBob 4.5s ease-in-out infinite;
}

/* a scene clip */
.clip { border: 3px solid var(--outline); border-radius: 14px; overflow: hidden; box-shadow: var(--hard-sm); background: #000; }
.clip video { display: block; width: 100%; height: auto; }

/* a painted clip filling the scene frame */
.scenebox-clip { background: #0d1116; }
/* The clip is 16:9 and must be seen whole, so while one is playing the frame
   takes the clip's shape rather than the map's. `cover` cropped the sides off
   a portrait phone frame, which is the one thing a scene cannot afford. */
#scene { position: absolute; inset: 0; }
/* 4:3 is what the generator produces; JS overrides it per clip. */
.mapbox.clip-mode { aspect-ratio: 4 / 3; }
/* Flush to the frame, so the frame's ratio is the video's ratio and
   `contain` has nothing left to letterbox. */
.mapbox.clip-mode .scenebox { inset: 0; }
.scene-video {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: contain; border-radius: 10px; background: #0d1116;
}
.scene-cap {
  position: absolute; left: 0; right: 0; top: 14px; margin: 0; padding: 0 16px;
  text-align: center; font-weight: 800; font-size: 1.05rem; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.9);
  pointer-events: none;
}
@media (max-width: 560px) { .scene-cap { font-size: .92rem; top: 10px; } }

/* the scene gallery */
.gallery { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 18px 0; }
@media (min-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } }
.gal-card { background: var(--paper-2); border: 3px solid var(--outline); border-radius: var(--radius); box-shadow: var(--hard); overflow: hidden; }
.gal-clip { border: none; border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3; background: #0d1116; }
.gal-clip video { width: 100%; height: 100%; object-fit: contain; }
.gal-cap { padding: 12px 16px 14px; }
.gal-cap b { display: block; font-size: 1.02rem; font-weight: 800; }
.gal-cap span { display: block; margin-top: 2px; font-size: .86rem; color: var(--ink-soft); }

.paid { background: #EAF7EC; border-color: #2E7D46; }
.paid h2 { color: #2E7D46; }
.paid p { margin: 4px 0 0; font-size: .94rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ legal */

/* Long-form text needs to be plainly readable, so these pages step back from
   the cartoon styling: normal weights, real line height, no hard shadows on
   the text itself. The chrome around them stays in the house style. */
.legal { text-align: left; }
.legal h3 {
  font-size: 1.02rem; font-weight: 900; margin: 26px 0 8px;
  color: var(--ink); letter-spacing: .01em;
}
.legal p, .legal li { line-height: 1.62; font-size: .93rem; color: var(--ink); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--coral); font-weight: 700; }
.legal code {
  background: rgba(0, 0, 0, .06); border-radius: 5px;
  padding: 1px 5px; font-size: .86em;
}
.legal-date {
  font-size: .8rem; opacity: .62; font-weight: 700;
  margin: -4px 0 16px !important;
}
.legal-lead { font-size: 1rem !important; font-weight: 600; }

.legal-tldr {
  list-style: none; padding: 14px 16px; margin: 0 0 8px;
  background: #FFF9EE; border: 2px solid var(--outline); border-radius: 12px;
}
.legal-tldr li { margin-bottom: 8px; padding-left: 22px; position: relative; }
.legal-tldr li:last-child { margin-bottom: 0; }
.legal-tldr li::before {
  content: '\1F54A'; position: absolute; left: 0; top: 0; font-size: .9em;
}

/* Wide on a desktop, scrollable rather than squashed on a phone. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal-table {
  width: 100%; border-collapse: collapse; font-size: .87rem;
  min-width: 460px;
}
.legal-table th, .legal-table td {
  text-align: left; padding: 9px 10px; vertical-align: top;
  border-bottom: 2px solid rgba(0, 0, 0, .1);
}
.legal-table th {
  font-weight: 900; background: #FFF9EE;
  border-bottom: 2px solid var(--outline);
}
.legal-table td:last-child { white-space: normal; opacity: .85; }

.legal-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin: 20px 0 8px; font-size: .85rem;
}
.legal-links a { color: var(--ink); opacity: .72; font-weight: 700; }
.legal-links a:hover { opacity: 1; color: var(--coral); }
.legal-links .sep { opacity: .35; }

.erase-card { margin-top: 14px; }
.erase-card .hint { margin-bottom: 12px; }
.go-quiet {
  background: #fff; color: var(--ink);
  border: 2px solid var(--outline); box-shadow: var(--hard-sm);
}
.go-quiet:hover { background: #FFE9E2; color: var(--coral); }
.erase-confirm { margin-top: 10px !important; font-weight: 800; color: var(--coral); }

/* ------------------------------------------------------------------ admin */

/* A private dashboard, so it drops the cartoon entirely and optimises for
   reading numbers fast. Nobody but the operator ever sees this page. */
.admin-body { background: #F3F5F8; }
.adm-head { text-align: center; margin: 24px 0 18px; }
.adm-head h1 { font-size: 1.5rem; font-weight: 900; margin: 0 0 4px; }

.adm-grid {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.adm-grid-sm { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 0; }

.adm-stat {
  background: #fff; border: 2px solid var(--outline); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--hard-sm);
}
.adm-k { font-size: .72rem; font-weight: 800; opacity: .6; text-transform: uppercase; letter-spacing: .04em; }
.adm-v { font-size: 1.5rem; font-weight: 900; line-height: 1.15; margin: 3px 0 1px; }
.adm-n { font-size: .72rem; opacity: .58; font-weight: 600; }

.adm-card { text-align: left; margin-bottom: 16px; }
.adm-card h2 { font-size: 1.05rem; font-weight: 900; margin: 0 0 4px; }

.adm-chart { margin: 12px 0 14px; }
.adm-svg { width: 100%; height: 150px; display: block; }
.adm-axis { stroke: rgba(0,0,0,.18); stroke-width: 1.5; }
.adm-max { font-size: 11px; fill: rgba(0,0,0,.4); font-weight: 700; }
.adm-xaxis {
  display: flex; justify-content: space-between;
  font-size: .7rem; opacity: .5; font-weight: 700; margin-top: 2px;
}

.adm-fun { margin-bottom: 14px; }
.adm-fun-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .86rem; margin-bottom: 4px; gap: 10px;
}
.adm-fun-top i { font-style: normal; opacity: .55; font-size: .78rem; }
.adm-fun-track { background: rgba(0,0,0,.08); border-radius: 99px; height: 10px; overflow: hidden; }
.adm-fun-fill { background: var(--coral); height: 100%; border-radius: 99px; }

.adm-warn { background: #FFF8E8; }
.adm-warn ul { margin: 8px 0 0; padding-left: 20px; }
.adm-warn li { font-size: .86rem; line-height: 1.55; margin-bottom: 7px; }

.colophon {
  text-align: center; font-size: .72rem; opacity: .5;
  margin: 10px 0 18px; line-height: 1.5;
}
.colophon a { color: inherit; text-decoration: underline; }
.colophon a:hover { color: var(--coral); opacity: 1; }

/* Erasure stays reachable, but as one quiet line rather than a panel. A card
   headed "Delete this" sat in the middle of the page you had just sent
   something from, which read as a warning rather than an option. */
.erase-line { text-align: center; font-size: .76rem; opacity: .45; margin: 16px 0 0; }
.erase-line a { color: inherit; text-decoration: underline; }
.erase-line a:hover { color: var(--coral); opacity: 1; }
.erase-err { color: var(--coral); display: block; margin-bottom: 4px; }

/* ------------------------------------------------- the flight map, dressed */

/* The map used to be a flat green shape on bare paper. These are the cheap
   parts of a drawn map: water under it, a lighter line inside the coast, a few
   clouds and a compass. Everything here is behind or beside the route, so none
   of it competes with the bird. */
.m-shore {
  fill: none; stroke: #FFFFFF; stroke-width: 1.4; opacity: .5;
  stroke-linejoin: round; pointer-events: none;
}

.m-tex { fill: url(#mtex); stroke: none; pointer-events: none; }


/* ------------------------------------------------ the country view, dressed */

/* It was one flat green shape on flat blue. These give it the same drawn feel
   as the flight map: hills on the country you drilled into, waves in the sea,
   and a handful of cities so the outline has a sense of scale. */
.c-waves { fill: url(#cwave); pointer-events: none; }
.c-tex { fill: url(#ctex); stroke: none; pointer-events: none; }

.c-marks { pointer-events: none; }
.c-dot { fill: #5C7A4A; opacity: .75; }
.c-lab {
  font-size: 10px; font-weight: 800; fill: #4E6640; opacity: .85;
  paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 2.5;
}

/* -------------------------------------------------------- the send ritual */

/* A bird comes to collect the note when you press the button. It covers the
   page for about five seconds, which is the point: this is the moment the app
   stops being a form. Always skippable, and it never blocks the dispatch that
   has already happened behind it. */
.sendoff-open { overflow: hidden; }
.sendoff {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(28, 22, 16, .82);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: sendoffIn .28s ease both;
}
@keyframes sendoffIn { from { opacity: 0; } to { opacity: 1; } }

.sendoff-frame {
  position: relative; width: min(560px, 100%);
  aspect-ratio: 4 / 3;
  border: 3px solid var(--outline); border-radius: 16px;
  overflow: hidden; background: #0d1116; box-shadow: var(--hard);
}
.sendoff-clip { position: absolute; inset: 0; }
.sendoff-clip .scene-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.sendoff-skip {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  border: 2px solid var(--outline); border-radius: 99px; padding: 5px 14px;
}

/* ------------------------------------------------------ the aviary button */

/* This used to be a grey text link next to "how it works", which buried the one
   page that shows what the app actually does. It is now the second thing on the
   page after the form, and it says how many birds are up. */
.aviary-cta {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 12px 14px;
  background: var(--paper-2); color: var(--ink); text-decoration: none;
  border: 3px solid var(--outline); border-radius: 14px;
  box-shadow: var(--hard-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.aviary-cta:hover, .aviary-cta:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--outline);
  background: #FFF7E6;
}
.aviary-cta:active { transform: translate(0, 0); box-shadow: var(--hard-sm); }

.ac-bird { width: 46px; height: 34px; flex: none; }
.ac-bird svg { width: 100%; height: 100%; overflow: visible; }
.ac-bird .flyer { animation: ctaBob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ctaBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

.ac-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ac-text b { font-size: .98rem; font-weight: 900; }
.ac-sub { font-size: .78rem; opacity: .62; font-weight: 600; }
.ac-go { margin-left: auto; font-size: 1.2rem; font-weight: 900; color: var(--coral); flex: none; }

@media (prefers-reduced-motion: reduce) { .ac-bird .flyer { animation: none; } }

/* One line under the speed picker, only when a paid tier is chosen. The perk is
   invisible otherwise: nobody would guess an Express bird gets a cape. */
.speed-perk {
  display: block; margin-top: 6px;
  font-size: .78rem; font-weight: 700; color: var(--coral);
}
.speed-perk::before { content: '\2726\00a0'; }

/* --------------------------------------------------------------- the loft */

/* Long-form reading, in the app's clothes. Body text is the interface font on
   purpose: the handwriting is right for forty words on a scroll and punishing
   for nine hundred. Handwriting is kept for the title and pull quotes. */
.post { text-align: left; }
.post-date { font-size: .76rem; font-weight: 800; opacity: .55; margin: 0 0 4px; }
.post-title {
  font-size: 1.7rem; font-weight: 900; line-height: 1.18; margin: 0 0 18px;
  letter-spacing: -.01em;
}
.post p { font-size: 1.02rem; line-height: 1.72; margin: 0 0 17px; }
.post h2 {
  font-size: 1.14rem; font-weight: 900; margin: 30px 0 10px;
}
.post ul { margin: 0 0 17px; padding-left: 20px; }
.post li { line-height: 1.68; margin-bottom: 8px; }
.post a { color: var(--coral); font-weight: 700; }
.post b { font-weight: 900; }

.post blockquote {
  margin: 22px 0; padding: 14px 18px;
  background: #FDF4E0; border: 3px solid var(--outline); border-radius: 12px;
  box-shadow: var(--hard-sm);
}
.post blockquote p {
  margin: 0; font-size: 1.16rem; line-height: 1.45;
  font-family: 'Bradley Hand', 'Segoe Script', 'Snell Roundhand', 'Apple Chancery',
               'Comic Sans MS', cursive;
  color: #3E3B52;
}

/* Sources are part of the promise, not an afterthought, so they get a box. */
.post-sources {
  margin: 30px 0 8px; padding: 14px 16px;
  background: var(--paper-2); border: 2px dashed var(--outline); border-radius: 12px;
}
.post-sources h3 { margin: 0 0 8px; font-size: .9rem; font-weight: 900; }
.post-sources ul { margin: 0; padding-left: 18px; }
.post-sources li { font-size: .86rem; margin-bottom: 5px; }
.post-check { margin: 10px 0 0 !important; font-size: .78rem; opacity: .62; font-style: italic; }

.post-cta { text-align: center; margin: 26px 0 0 !important; }

.post-list { display: grid; gap: 12px; margin: 4px 0 8px; }
.post-card {
  display: block; padding: 14px 16px; text-decoration: none; color: var(--ink);
  background: var(--paper-2); border: 3px solid var(--outline); border-radius: 14px;
  box-shadow: var(--hard-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.post-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--outline); }
.pc-date { display: block; font-size: .72rem; font-weight: 800; opacity: .5; margin-bottom: 3px; }
.post-card b { display: block; font-size: 1.02rem; font-weight: 900; line-height: 1.28; margin-bottom: 4px; }
.pc-sum { display: block; font-size: .85rem; opacity: .68; line-height: 1.5; }

/* The recipient's card while the bird is still out. They arrive from a text
   with no idea when to return, and a countdown does not answer that. */
.waiting { text-align: center; }
.wait-when { font-size: 1.14rem; font-weight: 800; margin: 0 0 6px; }
.wait-what { font-size: .86rem; opacity: .68; margin: 0 0 14px; line-height: 1.5; }

.adm-note {
  margin-top: 10px; padding: 10px 12px; font-size: .82rem; line-height: 1.5;
  background: #FFF8E8; border: 2px dashed var(--outline); border-radius: 10px;
}
.adm-note span { display: block; opacity: .6; font-size: .76rem; margin-top: 3px; }