/*
 * O Postal · variant styles (SD-019)
 *
 * Business Context: "O Postal" frames the €18 turnip-box as writing a real
 * bilhete-postal. Buyer types message + address directly onto a styled postcard
 * watched over by a reactive turnip mascot. All page-chrome tokens (colours,
 * fonts, field-error visibility) come from main.css; this file owns only the
 * postcard-specific layout and the mascot motion vocabulary.
 *
 * main.css must be linked first (--paper, --ink, --accent, etc. are inherited).
 * Do NOT redeclare any custom property already defined in main.css.
 *
 * @see prototypes/variants/postcard.html (locked design source)
 * @see PRODUCT-SPECS.md §6.2 (variant copy)
 * @see TECH-SPECS.md §18 SD-019
 */

/* ---------- local tokens not in main.css ---------- */
:root {
  --card:      #FBF6EA;
  --card-edge: #E4D6BC;
  --rule:      rgba(140,123,107,.30);
  --ctt:       #F5C000;
  --pay-yellow: #F4C430;
  --pay-ink:   #1A1A1A;
}

/* ---------- layout ---------- */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px 40px;
}

/* ---------- masthead ---------- */
.masthead { margin-bottom: 2px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.eyebrow .brand-tag { font-weight: 700; color: var(--accent); letter-spacing: .34em; }
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(26px,7.6vw,35px);
  line-height: .99;
  letter-spacing: -.015em;
  margin: 9px 0 5px;
  color: var(--ink);
}
h1 em { font-style: italic; color: var(--accent); font-weight: 500; }

/* ---------- scarcity strip ---------- */
.scarcity {
  margin: 9px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.scarcity .bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--paper-shade);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.scarcity .fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-ink), var(--accent));
}
.scarcity .left { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* ---------- stage ---------- */
.stage { margin-top: 6px; perspective: 1400px; position: relative; }

/* ---------- REACTIVE TURNIP MASCOT ---------- */
.mascot {
  width: 120px;
  height: 120px;
  margin: 0 auto -18px;
  display: block;
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 14px 16px rgba(31,24,20,.20));
  will-change: transform;
  cursor: pointer;
}

/* whole-character lean */
#lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .35s cubic-bezier(.3,1,.4,1);
}
.mascot.reading #lean { transform: translateY(1px) rotate(-1.5deg); }
.mascot.smug    #lean { transform: rotate(1.5deg); }
.mascot.gleeful #lean { transform: translateY(-1px); }

/* idle life */
.sway { transform-origin: 50% 96%; transform-box: fill-box; animation: sway 5.6s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }

.bob { transform-box: fill-box; animation: bob 4.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.4px); } }

.breathe { transform-origin: 50% 92%; transform-box: fill-box; animation: breathe 4.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.leaves { transform-origin: 50% 100%; transform-box: fill-box; transition: transform .3s ease; }
.leafwave { transform-origin: 50% 100%; transform-box: fill-box; animation: leafwave 4.8s ease-in-out infinite; }
@keyframes leafwave { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.eyelid { transform-origin: center; transform-box: fill-box; animation: blink 5s ease-in-out infinite; }
@keyframes blink { 0%,90%,100% { transform: scaleY(1); } 93%,95% { transform: scaleY(.08); } }

#pupils { transform-box: fill-box; }

/* eyes per mood */
#eyesNormal { transform-box: fill-box; transform-origin: center; transition: transform .25s ease, opacity .18s ease; }
.mascot.reading #eyesNormal { transform: translateY(2.2px); }
.mascot.smug    #eyesNormal { transform: translateY(1.4px) scaleY(.8); }
.mascot.eager   #eyesNormal { transform: translateY(-1.4px); }

#eyesHappy { opacity: 0; transition: opacity .18s ease; }
#grin      { opacity: 0; transition: opacity .16s ease; }
.mascot.gleeful #eyesNormal { opacity: 0; }
.mascot.gleeful #eyesHappy  { opacity: 1; }
.mascot.gleeful #mouth      { opacity: 0; }
.mascot.gleeful #grin       { opacity: 1; }

#cheeks { opacity: .4; transition: opacity .25s ease; }
.mascot.smug    #cheeks { opacity: .7; }
.mascot.gleeful #cheeks,
.mascot.eager   #cheeks { opacity: .92; }

/* sparkles */
#sparkle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.mascot.smug    #sparkle,
.mascot.gleeful #sparkle,
.mascot.eager   #sparkle { opacity: 1; animation: twinkle 1.4s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.mascot.burst #sparkle { opacity: 1; animation: burst .6s ease-out; }
@keyframes burst { 0% { opacity: 0; transform: scale(.3) rotate(-20deg); } 45% { opacity: 1; transform: scale(1.45) rotate(8deg); } 100% { opacity: 0; transform: scale(1) rotate(0); } }

/* leaves excited */
.mascot.gleeful .leaves,
.mascot.eager   .leaves { transform: translateY(-2px) scale(1.06); }
.mascot.gleeful .leafwave,
.mascot.eager   .leafwave { animation: leafexcited .42s ease-in-out infinite; }
@keyframes leafexcited { 0%,100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }

/* body motion */
.mascot.gleeful .bob { animation: laugh .4s ease-in-out infinite; }
@keyframes laugh { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2.6px) rotate(1deg); } }
.mascot.eager .bob { animation: eagerbounce .66s cubic-bezier(.3,.8,.4,1) infinite; }
@keyframes eagerbounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 70% { transform: translateY(0); } }

/* one-shot pops */
@keyframes pop { 0% { transform: scale(1); } 30% { transform: scale(1.16); } 55% { transform: scale(.96); } 100% { transform: scale(1); } }
.mascot.pop { animation: pop .5s cubic-bezier(.3,1.45,.5,1); }

@keyframes boing { 0% { transform: scale(1) rotate(0); } 18% { transform: scale(1.2) rotate(-7deg); } 42% { transform: scale(.92) rotate(6deg); } 66% { transform: scale(1.07) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
.mascot.boing { animation: boing .62s cubic-bezier(.3,1.3,.5,1); }

#blep { opacity: 0; transform-box: fill-box; transform-origin: 50% 0%; }
.mascot.boing #blep { opacity: 1; animation: blep .62s ease; }
@keyframes blep { 0% { transform: scaleY(0); } 30% { transform: scaleY(1); } 80% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

@keyframes nudge { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.mascot.nudge .breathe { animation: nudge .2s ease; }

/* cunning states */
.mascot.wink #lidR { animation: wink .56s ease; }
@keyframes wink { 0%,100% { transform: scaleY(1); } 24%,56% { transform: scaleY(.08); } }

.mascot.waggle #browL,
.mascot.waggle #browR { opacity: 1 !important; animation: waggle .5s ease; }
@keyframes waggle { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-2.6px); } 50% { transform: translateY(0); } 75% { transform: translateY(-2.6px); } }

.mascot.scheming .leafwave { animation: rub .32s ease-in-out infinite; }
@keyframes rub { 0%,100% { transform: rotate(-7deg) scaleX(1); } 50% { transform: rotate(7deg) scaleX(.88); } }

#whistleO { opacity: 0; }
#notes { opacity: 0; transform-box: fill-box; }
.mascot.whistle #mouth   { opacity: 0; }
.mascot.whistle #whistleO { opacity: 1; }
.mascot.whistle #notes   { opacity: 1; animation: notefloat 1.4s ease-out; }
@keyframes notefloat { 0% { opacity: 0; transform: translate(0,2px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(7px,-15px) scale(1); } }

.mascot.lick #blep { opacity: 1; animation: lick .6s ease; }
@keyframes lick { 0% { opacity: 0; transform: translateY(-2px) scaleY(.2); } 30% { opacity: 1; transform: translateY(0) scaleY(1); } 68% { opacity: 1; transform: translate(4px,0) scaleY(.95); } 100% { opacity: 0; transform: translate(-3px,0) scaleY(.2); } }

/* event reactions */
.mascot.tilt #lean { transform: rotate(-9deg) translateY(1px) !important; }

.mascot.nod .bob { animation: nod .55s ease; }
@keyframes nod { 0%,100% { transform: translateY(0); } 28% { transform: translateY(4px); } 62% { transform: translateY(-1px); } }

.mascot.doubletake { animation: doubletake .62s ease; }
@keyframes doubletake { 0% { transform: scale(1) rotate(0); } 14% { transform: scale(1.13) translateY(-4px) rotate(-4deg); } 34% { transform: scale(.95) rotate(3deg); } 60% { transform: scale(1.05) rotate(-1deg); } 100% { transform: scale(1) rotate(0); } }
.mascot.doubletake #browL,
.mascot.doubletake #browR,
.mascot.whoa       #browL,
.mascot.whoa       #browR { opacity: 1 !important; }
.mascot.doubletake #eyesNormal,
.mascot.whoa       #eyesNormal { transform: scale(1.2) translateY(-1px) !important; }

.mascot.spin { animation: spin .72s cubic-bezier(.4,0,.3,1); }
@keyframes spin { 0% { transform: rotate(0) scale(1); } 55% { transform: rotate(280deg) scale(.9); } 100% { transform: rotate(360deg) scale(1); } }

/* shadow pulse */
#shadow { transform-box: fill-box; transform-origin: center; animation: shadowpulse 4.4s ease-in-out infinite; }
@keyframes shadowpulse { 0%,100% { opacity: .16; transform: scaleX(1); } 50% { opacity: .1; transform: scaleX(.88); } }

/* ---------- DOCKED MINI TURNIP ---------- */
.mascot.dock {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 58px;
  height: 58px;
  margin: 0;
  z-index: 60;
  opacity: 0;
  transform: translateX(-150%) scale(.7);
  pointer-events: auto;
  filter: drop-shadow(0 6px 11px rgba(31,24,20,.30));
  transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.25,.5,1);
}
.mascot.dock.show { opacity: 1; transform: translateX(0) scale(1); }

/* ---------- postcard ---------- */
.postcard {
  position: relative;
  background: linear-gradient(180deg,#FCF7EC 0%,#F4ECD9 100%);
  border-radius: 7px;
  border: 1px solid var(--card-edge);
  box-shadow: 0 1px 0 #fff inset, 0 22px 40px -22px rgba(31,24,20,.5), 0 4px 0 -1px var(--paper-shade);
  padding: 16px 15px 15px;
  transform: rotateX(1.2deg);
  transform-style: preserve-3d;
}
.postcard::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(140,123,107,.32);
  border-radius: 4px;
  pointer-events: none;
}

.pc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}
.pc-head .brand { font-weight: 700; color: var(--accent); letter-spacing: .3em; }

.pc-body {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  position: relative;
  z-index: 2;
}
.pc-left  { padding-right: 11px; border-right: 1.5px dashed var(--rule); min-width: 0; }
.pc-right { padding-left: 11px; position: relative; min-height: 188px; min-width: 0; }

/* Progressive emphasis — SD-014-safe. Every field stays present AND fully
   interactive on first paint (no reveal, no step gate); this is a purely
   visual de-emphasis. The address (destination) writing area is softly dimmed
   until the buyer engages, then brightens once and STAYS bright (the
   `addr-active` class is added one-way by initAddressReveal on the first
   message keystroke or address-field focus — never removed). The postage stamp
   stays crisp. One-way so the address can never appear to dim/"disappear" when
   the buyer clicks away. Where the class is never added (JS disabled), the
   address renders dimmed but is still fully interactive. */
.pc-right > :not(.stamp-wrap) { opacity: .5; }
.postcard.addr-active .pc-right > :not(.stamp-wrap) { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pc-right > :not(.stamp-wrap) { transition: opacity .3s ease; }
}

.label-mini {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* visually-hidden labels (accessibility) */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* MESSAGE textarea */
.write {
  display: block;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font-family: var(--font-handwritten);
  font-size: 25px;
  line-height: 34px;
  color: var(--accent);
  height: 136px;
  padding: 0 2px 6px;
  margin: 0;
  border-radius: 4px;
  letter-spacing: .2px;
  /* Rule sits at the writing baseline (Caveat 25px → baseline ≈ 26px into each
     34px line), so words rest ON the line and descenders dip through it,
     instead of floating ~8px above it. */
  background-image: repeating-linear-gradient(180deg, transparent 0 26px, var(--rule) 26px 27px, transparent 27px 34px);
  background-attachment: local;
  overflow: hidden;
  cursor: text;
  transition: box-shadow .18s ease, background-color .18s ease;
}
.write::placeholder { color: rgba(126,46,46,.34); font-style: italic; opacity: 1; }
.write:focus,
.editable:focus {
  box-shadow: 0 0 0 2px rgba(126,46,46,.5), 0 0 0 5px rgba(126,46,46,.12);
  background-color: rgba(255,255,255,.4);
}

.sigline { height: 16px; margin-top: 2px; overflow: visible; display: block; }
.sigline path {
  stroke: var(--accent);
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}

.sender-row { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.sender-row .de {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.sender-name {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font-family: var(--font-handwritten);
  font-size: 20px;
  color: var(--accent-ink);
  border-bottom: 1.5px dotted var(--border);
  padding: 0 4px 1px;
}
.sender-name::placeholder { color: var(--ink-mute); opacity: .6; }

.sender-self-note {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .05em;
  color: var(--accent);
  margin: 4px 0 0;
}


/* stamp */
.stamp-wrap { position: absolute; top: 0; right: 0; width: 58px; height: 78px; z-index: 3; text-align: center; }
.stamp { width: 58px; height: 68px; display: block; filter: drop-shadow(0 3px 5px rgba(31,24,20,.22)) rotate(2deg); }
.stamp text { font-family: var(--font-mono); }

.postmark {
  position: absolute;
  top: -3px;
  right: -2px;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: rotate(-14deg) scale(.7);
  pointer-events: none;
}
.postmark svg { width: 62px; height: 62px; }
.postmark text { font-family: var(--font-mono); fill: var(--accent); }

/* address area */
.para-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 2px;
  padding-top: 62px;
}
.editable {
  width: 100%;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  padding: 3px 2px;
  display: block;
  cursor: text;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .15s ease, background-color .15s ease;
}
textarea.editable { resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; }
.editable::placeholder { color: var(--ink-mute); opacity: .6; letter-spacing: 0; }
.editable.name { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.editable.name::placeholder { text-transform: none; letter-spacing: 0; }

.postal-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; border-bottom: 1px solid var(--rule); padding: 3px 2px; }
.postal-row .editable { border-bottom: none; padding: 0; }
/* Roomier postcode — 84px cramped "0000-000". Fill the column (capped) so it
   breathes without overflowing the narrow right column at 320px. */
.postal-row .editable.postal { font-weight: 700; color: var(--accent-ink); width: 100%; max-width: 150px; flex: 1 1 auto; min-width: 0; padding: 0 8px; box-sizing: border-box; letter-spacing: .04em; }

/* email strip */
.email-strip {
  margin-top: 14px;
  background: var(--paper-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.email-strip .et {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.editable.email {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  border-bottom: none;
  padding: 0;
}

/* ---------- field errors ---------- */
/* .field-error is display:none by default in main.css; .visible flips it on */

/* ---------- value strip ---------- */
.value {
  margin: 16px 0 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-soft);
}
.value .vitem {
  flex: 1;
  padding: 9px 6px;
  text-align: center;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.value .vitem:last-child { border-right: none; }
.value .vitem svg { width: 22px; height: 22px; display: block; }
.value .vt {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
}
.value .vt b { color: var(--ink); font-weight: 700; }

/* ---------- pay area ---------- */
.trust {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 18px 0 9px;
  line-height: 1.6;
}
.trust b { color: var(--ink-soft); font-weight: 700; }

/* payment mount area */
.payment-area { margin: 0 0 12px; }
.stripe-payment-mount { min-height: 48px; }
.payment-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.payment-placeholder__text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

.pay {
  width: 100%;
  min-height: 60px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, #F8CE3E, var(--pay-yellow));
  color: var(--pay-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .01em;
  box-shadow: 0 4px 0 #C99B14, 0 12px 22px -10px rgba(196,155,20,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 14px;
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.pay:active { transform: translateY(3px); box-shadow: 0 1px 0 #C99B14, 0 6px 14px -8px rgba(196,155,20,.6); }
.pay .lbl   { line-height: 1.1; }
.pay .price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  background: rgba(26,26,26,.09);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.pay:disabled { cursor: default; opacity: .72; }

/* shimmer */
.pay::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer { 0%,55% { left: -60%; } 80%,100% { left: 130%; } }

.pay-legal {
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  margin: 6px 0 0;
  line-height: 1.5;
}
.pay-legal a { color: var(--ink-mute); }

.footnote {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-mute);
  margin: 12px 0 0;
  line-height: 1.5;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.footnote span { color: var(--accent); }

/* ---------- CTT silhouette overlay (A4.2) ---------- */
.ctt-silhouette {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 72px;
  height: 96px;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity .4s ease;
}


/* counter warning */
.counter { font-variant-numeric: tabular-nums; }
.counter.warn { color: var(--accent); }

/* ---------- footer ---------- */
footer {
  text-align: center;
  padding: 24px 16px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.8;
}
footer a { color: var(--ink-mute); text-decoration: none; }
footer a:hover { color: var(--accent); }
.footer-brand { font-weight: 700; color: var(--accent); }
.footer-tag { margin-top: 2px; opacity: .6; }

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sway, .bob, .breathe, .leafwave, .eyelid,
  .mascot.pop, .mascot.gleeful .bob, .mascot.eager .bob,
  .mascot.gleeful .leafwave, .mascot.eager .leafwave,
  .mascot.smug #sparkle, .mascot.gleeful #sparkle, .mascot.eager #sparkle {
    animation: none !important;
  }
  .pay::before { animation: none; display: none; }
}

/* ---------- desktop layout fix (SD-019) ----------
   O Postal reuses id="order-form", which main.css turns into the index.html
   2-column preview+fields grid at ≥900px — that squeezed the postcard into a
   ~320px column. This variant owns its own single-column layout, so opt out of
   that grid and give the card a roomier centred column on desktop. */
@media (min-width: 900px) {
  #order-form:not([hidden]) { display: block; }
  .wrap { max-width: 640px; }
}

/* ===== SD-025 merge: declaração · espécime · seguro · veto ===== */
.declaracao{ max-width:560px; margin:0 auto 14px; border:1px solid var(--card-edge); background:var(--card); padding:12px 14px 8px; }
.decl-hero{ margin:0 0 10px; }
.decl-hero img{ width:100%; height:auto; display:block; border:1px solid var(--rule); }
.decl-caption{ font-weight:600; text-align:center; margin:0 0 8px; color:#1F1814; }
.decl-linhas{ list-style:none; margin:0; padding:0; font-family:ui-monospace,monospace; font-size:.74rem; color:#1F1814; }
.decl-linhas li{ padding:4px 0; border-bottom:1px dotted var(--rule); }
.decl-linhas li:last-child{ border-bottom:0; }
.decl-linhas span{ color:#8C7B6B; }

.especimes{ border:0; padding:0; max-width:560px; margin:0 auto 16px; text-align:center; }
.esp-titulo{ font-family:ui-monospace,monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:#8C7B6B; padding:0 0 8px; margin-inline:auto; }
.esp-row{ display:flex; gap:6px; }
.esp{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px; border:1px solid var(--rule); font-family:ui-monospace,monospace; color:#1F1814; cursor:pointer; background:var(--card); }
.esp input{ position:absolute; opacity:0; pointer-events:none; }
/* Full-colour specimen photo — same image as /box, consistent with the
   full-colour declaração flat-lay above it. (An earlier blue duotone flattened
   the photo into an icon-like blob at thumbnail size — removed.) Enlarged for
   visibility — the especimes row is wider than the box face. */
.esp-photo{ display:block; width:100%; max-width:120px; aspect-ratio:1; height:auto; object-fit:contain; margin-inline:auto; }
.esp-ref{ font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; }
.esp-estado{ font-size:.6rem; color:#8C7B6B; }
.esp:has(input:checked){ border:1.5px solid var(--accent-ink); }
.esp:has(input:checked)::after{ content:"escolhido"; position:absolute; top:-8px; right:-4px; padding:2px 5px; border:1.5px solid var(--accent-ink); color:var(--accent-ink); background:var(--card); font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; transform:rotate(-3deg); }
.esp:has(input:focus-visible){ outline:2px solid var(--accent-ink); outline-offset:2px; }
.esp-foot{ margin:10px 0 0; font-family:ui-monospace,monospace; font-size:.58rem; color:#8C7B6B; }

@media (max-width: 379px){
  .esp-row{ gap:5px; }
  .esp{ padding:9px 4px 8px; }
  .esp-ref{ letter-spacing:.08em; }
}

.seg-corpo{ flex:1; }

.seguro{ display:flex; gap:8px; align-items:flex-start; margin:12px 0 14px; cursor:pointer; }
.seguro input{ margin-top:2px; accent-color:var(--accent-ink); }
.seg-l{ display:block; font-family:ui-monospace,monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#1F1814; }
.seg-n{ display:block; font-size:.68rem; color:#8C7B6B; line-height:1.4; margin-top:2px; }

@keyframes veto-shake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-3px) rotate(-2deg) } 75%{ transform:translateX(3px) rotate(2deg) } }
.mascot.veto{ animation:veto-shake .42s ease-in-out 2; }
/* brows-down on refusal, parity with box.css — the specimen disapproves */
.mascot.veto #browL, .mascot.veto #browR{ opacity:1 !important; }
@keyframes mascot-picked{ 0%{ transform:scale(1) } 40%{ transform:scale(1.1) } 100%{ transform:scale(1) } }
.mascot.picked{ animation:mascot-picked .5s ease-out; }
@media (forced-colors: active){ .esp input{ position:static; opacity:1; pointer-events:auto; } }
@media (prefers-reduced-motion: reduce){ .mascot.veto{ animation:none; } .mascot.picked{ animation:none; } }