/* Track n Quack: the medoraversion.
   Crayon-on-an-index-card theme, layered on top of tq.css (load this file after it, add class "medora" to <body>,
   and put the #m-wobble / #m-wobble-s filter <svg> at the top of <body>; see any page for the snippet).
   The pins, ducks, lettering and the yellow scribble are cut straight out of the hand-drawn card (assets/medora/*.webp).
   The Duck Driver License keeps its DMV look on purpose: a crayon website issuing a very serious license is the joke.
   Fonts (Google): Gochi Hand (marker headings), Gloria Hallelujah (marker body; Patrick Hand looked too tidy next to the card, Coming Soon too thin, Mali lasted ten minutes).
   Body weight lives in --print-w so the next font swap is a two-line change. */

:root {
  --m-pencil: #474a55;
  --m-pencil-soft: #6f7382;
  --m-marker: #e0692a;
  --m-wave: #4a6fc4;
  --m-paper: #fffdf7;
  --m-yellow: #fff2a8;
  --m-blue: #4a5aa8;
  --m-brown: #6b4a3a;
  --m-orange: #ec6a25;
  --m-purple: #7a46b4;
  --m-green: #2f8f58;
  --m-shadow: rgba(71,74,85,0.18);
  --hand: 'Gochi Hand', 'Gloria Hallelujah', 'Comic Sans MS', cursive;
  --print: 'Gloria Hallelujah', 'Comic Sans MS', cursive;
  --print-w: 400;
  --tile: url(/assets/medora/tile.webp);
  /* two hand-drawn corner shapes: nothing is quite round, nothing is quite square */
  --r1: 18px 22px 15px 24px / 22px 15px 24px 18px;
  --r2: 24px 14px 22px 16px / 16px 22px 14px 24px;
  --r3: 14px 18px 12px 20px / 18px 12px 20px 14px;
}

html:has(body.medora) { overflow-x: clip; }
body.medora {
  overflow-x: clip;
  background: #fffbe6 var(--tile) center top / 600px 300px repeat;
  color: var(--m-pencil);
  font-family: var(--print);
  font-weight: var(--print-w);
  font-size: 20px;
  line-height: 1.4;
}
.medora h1, .medora h2, .medora h3 { font-family: var(--hand); font-weight: 400; color: var(--m-marker); letter-spacing: 0.01em; line-height: 1; }
.medora h1 { font-size: clamp(46px, 7vw, 92px); }
.medora h2 { font-size: clamp(38px, 5vw, 62px); }
.medora h3 { font-size: clamp(28px, 3vw, 38px); }
.medora a { color: var(--m-pencil); text-decoration-color: var(--m-wave); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.medora a:hover { text-decoration-style: wavy; text-decoration-thickness: 2px; }
.medora .tq-lede { font-size: clamp(20px, 1.6vw, 23px); font-weight: var(--print-w); color: var(--m-pencil); }
.medora .tq-eyebrow { font-family: var(--hand); font-size: 20px; letter-spacing: 0.02em; text-transform: none; color: var(--m-wave); }
.medora .tq-crumbs { font-family: var(--print); font-size: 19px; font-weight: var(--print-w); }
.medora .tq-mono { font-family: var(--mono); font-size: 0.9em; }
.medora .tq-dots { background-image: none; }
.medora ::selection { background: var(--m-yellow); }

/* ---------- Pencil-drawn boxes ----------
   The border lives on a pseudo-element with the wobble filter, so the text on top never blurs. */
.m-box, .medora .tq-card { position: relative; isolation: isolate; padding: clamp(22px, 3.5vw, 40px); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.m-box::before, .medora .tq-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--m-paper); border: 3px solid var(--m-pencil); border-radius: var(--r1);
  box-shadow: 5px 6px 0 var(--m-shadow);
  filter: url(#m-wobble);
}
.m-box--yellow::before, .medora .tq-card--yellow::before { background: var(--m-yellow) var(--tile) center / 600px 300px; background-blend-mode: multiply; }
.medora .tq-card--sky::before { background: #dfe9fb var(--tile) center / 600px 300px; background-blend-mode: multiply; }
.medora .tq-card--flat::before { box-shadow: none; }
.m-box--tilt { transform: rotate(-0.6deg); }
.m-box--tilt2 { transform: rotate(0.5deg); }
.m-box--r2::before { border-radius: var(--r2); }

/* A strip of tape, like the real card.
   THE TAPE RULE: tape goes dead centre on the top edge, the way a person tapes
   something to a wall. One strip per thing, half on the thing and half off it.
   Never on one corner, never off to one side, never two strips on one thing,
   never on the bottom. Usage: <span class="m-tape"></span> as the first child of
   a positioned box. .m-tape leans left a touch, .m-tape--r leans right; alternate
   them between neighbours so they don't look stamped. The tape in
   tq-license.js (photo and QR) follows the same rule. Full rule: README.md, Design rules. */
.m-tape { position: absolute; left: 50%; top: -15px; width: 112px; height: 30px; background: rgba(255,252,235,0.55); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 1px 2px var(--m-shadow); transform: translateX(-50%) rotate(-3deg); pointer-events: none; z-index: 2; }
.m-tape--r { transform: translateX(-50%) rotate(2.5deg); }

/* ---------- Header: nav links, then the card itself (pins, lettering, pond, tagline) ---------- */
.medora .tq-header { background: transparent; border-bottom: 0; }
.medora .tq-nav { padding-top: 22px; padding-bottom: 6px; justify-content: center; }
.medora .tq-navlinks { font-family: var(--print); font-weight: var(--print-w); font-size: 20px; gap: 8px 30px; justify-content: center; }
.medora .tq-navlinks a.tq-link { text-decoration: none; border-bottom: 2px solid transparent; padding: 8px 0; }
.medora .tq-navlinks a.tq-link:hover { border-bottom-color: var(--m-wave); }
.m-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 10px; }
.m-pins { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 4vw, 64px); width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--pad); }
.m-pins img { width: clamp(44px, 8vw, 96px); height: auto; display: block; transform-origin: 50% 90%; }
.m-pins img:nth-child(1) { transform: rotate(-4deg); }
.m-pins img:nth-child(2) { transform: translateY(6px) rotate(2deg); }
.m-pins img:nth-child(3) { transform: rotate(-1deg); }
.m-pins img:nth-child(4) { transform: translateY(4px) rotate(3deg); }
.m-pins img:nth-child(5) { transform: rotate(-3deg); }
.m-title { width: min(560px, 78vw); height: auto; display: block; margin-top: 10px; }
.m-tagline { width: min(620px, 82vw); height: auto; display: block; margin: 2px 0 0; }
.m-pond { position: relative; width: 100%; max-width: 1400px; height: clamp(64px, 7.4vw, 106px); margin: 12px auto 0; line-height: 0; }
.m-pond .wave { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; display: block; }
.m-pond .duck { position: absolute; width: clamp(64px, 9vw, 120px); height: auto; bottom: 44%; }
.m-pond .duck--l { left: 17%; }
.m-pond .duck--r { right: 19%; width: clamp(72px, 10vw, 136px); bottom: 46%; }
/* inner pages: same card, smaller, no tagline */
.m-card--compact { gap: 2px; padding-top: 4px; }
.m-card--compact .m-pins { gap: clamp(12px, 3vw, 44px); }
.m-card--compact .m-pins img { width: clamp(34px, 5vw, 62px); }
.m-card--compact .m-title { width: min(360px, 58vw); margin-top: 16px; }
.m-card--compact .m-pond { height: clamp(44px, 4.6vw, 66px); margin-top: 8px; }
.m-card--compact .m-pond .duck { width: clamp(48px, 5.6vw, 76px); }
.m-card--compact .m-pond .duck--r { width: clamp(54px, 6.2vw, 84px); }
@media (prefers-reduced-motion: no-preference) {
  .m-pins img { animation: m-bob 4.5s ease-in-out infinite; }
  .m-pins img:nth-child(2) { animation-delay: -0.9s; } .m-pins img:nth-child(3) { animation-delay: -1.8s; }
  .m-pins img:nth-child(4) { animation-delay: -2.7s; } .m-pins img:nth-child(5) { animation-delay: -3.6s; }
  @keyframes m-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  .m-pond .duck { animation: m-float 6s ease-in-out infinite; transform-origin: 50% 100%; }
  .m-pond .duck--r { animation-delay: -3s; }
  @keyframes m-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
}
.m-divider { width: 100%; max-width: 1400px; margin: 0 auto; display: block; height: clamp(46px, 6.5vw, 94px); object-fit: cover; object-position: 20% 50%; opacity: 0.9; }
.m-divider--flip { transform: scaleX(-1); }

/* ---------- Buttons: crayon fill, pencil outline drawn on a wobbly pseudo-element ---------- */
.medora .tq-btn {
  position: relative; isolation: isolate;
  font-family: var(--hand); font-weight: 400; font-size: 23px; letter-spacing: 0.01em; height: 60px; padding: 0 28px;
  color: #fff; background: transparent; border: 0; border-radius: 0; box-shadow: none; text-shadow: 0 1px 0 rgba(0,0,0,0.18);
  transition: transform .12s ease;
}
.medora .tq-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--m-orange) var(--tile) center / 400px 200px; background-blend-mode: multiply;
  border: 3px solid var(--m-pencil); border-radius: var(--r3); box-shadow: 4px 5px 0 var(--m-pencil);
  filter: url(#m-wobble-s);
  transition: box-shadow .12s ease;
}
.medora .tq-btn:hover { color: #fff; transform: translate(-2px, -2px); }
.medora .tq-btn:hover::before { box-shadow: 6px 7px 0 var(--m-pencil); }
.medora .tq-btn:active { transform: translate(2px, 3px); }
.medora .tq-btn:active::before { box-shadow: 1px 2px 0 var(--m-pencil); }
.medora .tq-btn[disabled] { transform: none; }
.medora .tq-btn--cream { color: var(--m-pencil); text-shadow: none; }
.medora .tq-btn--cream::before { background: var(--m-paper); border-radius: var(--r2); }
.medora .tq-btn--cream:hover { color: var(--m-pencil); }
.medora .tq-btn--yellow { color: var(--m-pencil); text-shadow: none; }
.medora .tq-btn--yellow::before { background: var(--m-yellow) var(--tile) center / 400px 200px; background-blend-mode: multiply; }
.medora .tq-btn--blue::before { background-color: var(--m-wave); }
.medora .tq-btn--small { height: 50px; font-size: 21px; padding: 0 22px; }
.medora .tq-btn--small::before { box-shadow: 3px 4px 0 var(--m-pencil); }
.medora .tq-btn--big { height: 66px; font-size: 25px; }
.medora .tq-btn svg { stroke-width: 2.5; }
.medora .tq-btn .m-arrow { stroke-width: 2.4; width: 26px; height: 22px; margin-right: -4px; }
.medora .tq-btn:focus-visible, .medora .tq-input:focus, .medora .tq-select:focus, .medora .tq-textarea:focus, .medora .tq-link:focus-visible, .medora .tq-pick:focus-within, .medora .tq-vibe:focus-within { outline: 3px dashed var(--m-wave); outline-offset: 3px; }

/* ---------- Pills, labels, inputs ---------- */
.medora .tq-pill {
  font-family: var(--hand); font-weight: 400; font-size: 19px; letter-spacing: 0.01em; text-transform: none;
  background: transparent; color: var(--m-pencil); border: 2px solid var(--m-pencil); border-radius: var(--r2); padding: 4px 14px; box-shadow: none;
}
.medora .tq-pill--light { background: var(--m-paper); border-width: 2.5px; padding: 6px 16px; box-shadow: 3px 3px 0 var(--m-shadow); }
.medora .tq-pill--blue { color: var(--m-wave); border-color: var(--m-wave); background: rgba(255,255,255,0.6); }
.medora .tq-pill--yellow { color: var(--m-brown); border-color: var(--m-brown); border-style: dashed; background: rgba(255,255,255,0.6); }
.medora .tq-pill--orange { color: var(--m-marker); border-color: var(--m-marker); background: rgba(255,255,255,0.6); }
.medora .tq-label { font-family: var(--hand); font-weight: 400; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--m-pencil); }
.medora .tq-label small { font-family: var(--print); font-weight: var(--print-w); font-size: 17px; color: var(--m-pencil-soft); }
.medora .tq-input, .medora .tq-select, .medora .tq-textarea {
  font-family: var(--print); font-weight: var(--print-w); font-size: 21px; color: var(--m-pencil);
  background: var(--m-paper); border: 2.5px solid var(--m-pencil); border-radius: var(--r2); height: 58px; box-shadow: 2px 3px 0 var(--m-shadow);
}
.medora .tq-field:nth-of-type(even) .tq-input, .medora .tq-field:nth-of-type(even) .tq-select { border-radius: var(--r1); }
.medora .tq-input::placeholder, .medora .tq-textarea::placeholder { color: #9a9eab; font-weight: var(--print-w); }
.medora .tq-input--mono { font-family: var(--mono); font-size: 21px; }
.medora .tq-input[aria-invalid="true"] { border-color: #c8382e; box-shadow: 2px 3px 0 rgba(200,56,46,0.25); }
.medora .tq-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23474a55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.medora .tq-error { font-family: var(--print); font-weight: var(--print-w); font-size: 18px; color: #c8382e; }
.medora .tq-note { border: 2px dashed var(--m-pencil-soft); border-radius: var(--r1); background: rgba(255,255,255,0.55); font-size: 18px; font-weight: var(--print-w); }
.medora .tq-note strong { font-family: var(--hand); font-weight: 400; font-size: 20px; }
.medora .tq-toast { font-family: var(--print); font-weight: var(--print-w); font-size: 19px; background: var(--m-paper); border: 2.5px solid var(--m-pencil); border-radius: var(--r1); box-shadow: 4px 5px 0 var(--m-shadow); color: var(--m-pencil); }
/* file picker drawn to match (the browser's own button looks like it wandered in from another website) */
.m-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; position: relative; }
.m-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.m-file .m-file__btn { pointer-events: none; height: 50px; font-size: 21px; padding: 0 20px; }
.m-file .m-file__name { font-size: 18px; color: var(--m-pencil-soft); pointer-events: none; }
.m-file:has(input:focus-visible) .m-file__btn { outline: 3px dashed var(--m-wave); outline-offset: 3px; }

/* ---------- Sections ---------- */
.medora .tq-section--hero { background: transparent; border-bottom: 0; padding-top: clamp(24px, 4vw, 48px); }
.medora .tq-section--navy { background: transparent; color: var(--m-pencil); }
.medora .tq-section--navy h2 { color: var(--m-marker); }
.medora .tq-section--navy .tq-eyebrow { color: var(--m-wave); }
.medora .tq-section { padding: clamp(40px, 6vw, 88px) 0; }
.m-license { position: relative; transform: rotate(-1.5deg); }
.m-license .tq-lic { box-shadow: 6px 8px 0 rgba(71,74,85,0.22); }
/* The crayon license (assets/tq-license.js) draws itself; only its shadow and the flip button live here. */
.tql-card { box-shadow: 6px 8px 0 rgba(71,74,85,0.22); }
.tql-mini { box-shadow: 5px 6px 0 rgba(71,74,85,0.22); }
.tql-flip { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.tql-flip > .m-license, .tql-flip > .tql-card { width: 100%; }
.tql-flip-btn { font-family: var(--hand); font-size: 21px; line-height: 1.2; color: var(--m-wave); background: none; border: 0; border-bottom: 2px dashed currentColor; border-radius: 0; padding: 2px 2px 1px; cursor: pointer; }
.tql-flip-btn:hover { color: var(--m-marker); }
.tql-flip-btn:focus-visible { outline: 3px dashed var(--m-wave); outline-offset: 5px; }
.m-caption { margin: 22px 0 0; text-align: center; font-family: var(--print); font-size: 18px; color: var(--m-pencil-soft); }
.medora .tq-price { font-family: var(--hand); color: var(--m-marker); }

/* ---------- Duck page (finder first): "You found ___!" + the stop form, then the license ---------- */
.medora [hidden] { display: none !important; }
.m-duck { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 44px 56px; align-items: start; }
.m-duck__card { justify-self: center; width: 100%; max-width: 620px; }
@media (min-width: 1000px) { .m-duck__card { position: sticky; top: 24px; margin-top: 64px; } }
/* found / hid: two crayon pills that act as radio buttons */
.m-toggle { display: flex; flex-wrap: wrap; gap: 12px 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.m-toggle legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; }
.m-toggle label { position: relative; display: inline-flex; cursor: pointer; }
.m-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.m-toggle span { display: inline-flex; align-items: center; height: 52px; padding: 0 22px; font-family: var(--hand); font-size: 23px; color: var(--m-pencil); background: var(--m-paper); border: 2.5px solid var(--m-pencil); border-radius: var(--r3); box-shadow: 3px 4px 0 var(--m-shadow); transition: transform .12s ease; }
.m-toggle label + label span { border-radius: var(--r2); }
.m-toggle input:checked + span { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.18); background: var(--m-wave) var(--tile) center / 400px 200px; background-blend-mode: multiply; box-shadow: 1px 2px 0 var(--m-pencil); transform: translate(2px, 2px); }
.m-toggle input:focus-visible + span { outline: 3px dashed var(--m-wave); outline-offset: 3px; }
/* the bot trap: people never see it, form-filling bots do */
.m-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.medora input[type="date"].tq-input { min-width: 0; }
.m-done h3 { font-size: clamp(34px, 4vw, 46px); }
.m-done h3:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .m-toggle span { transition: none; } }

/* ---------- Trail: every stop gets one of the five pins ---------- */
.medora .tq-trail li { border-top: 2px dashed rgba(71,74,85,0.35); gap: 16px; padding: 18px 0; }
.medora .tq-trail .pin { flex: 0 0 38px; width: 38px; height: auto; margin-top: -4px; }
.medora .tq-trail .n { display: none; }
.medora .tq-trail .place { font-family: var(--hand); font-weight: 400; font-size: 27px; color: var(--m-pencil); line-height: 1.05; }
.medora .tq-trail .detail { font-size: 19px; font-weight: var(--print-w); }
.medora .tq-trail .meta { font-size: 17px; font-weight: var(--print-w); color: var(--m-pencil-soft); }
.medora .tq-trail .body { gap: 5px; }

/* ---------- Order forms ---------- */
.medora .tq-step__num { width: 44px; height: 54px; flex-basis: 44px; border: 0; border-radius: 0; background: url(/assets/medora/pin_blue.webp) center / contain no-repeat; color: transparent; font-size: 0; }
.medora .tq-step:nth-of-type(2) .tq-step__num { background-image: url(/assets/medora/pin_orange.webp); }
.medora .tq-step:nth-of-type(3) .tq-step__num { background-image: url(/assets/medora/pin_green.webp); }
.medora .tq-step:nth-of-type(4) .tq-step__num { background-image: url(/assets/medora/pin_purple.webp); }
.medora .tq-pick, .medora .tq-vibe { background: var(--m-paper); border: 2.5px solid var(--m-pencil); border-radius: var(--r3); box-shadow: 3px 4px 0 var(--m-shadow); }
.medora .tq-pick:nth-child(even), .medora .tq-vibe:nth-child(even) { border-radius: var(--r2); }
.medora .tq-pick:hover { box-shadow: 5px 6px 0 var(--m-shadow); }
.medora .tq-pick .art { border: 2px solid var(--m-pencil); border-radius: 10px 14px 10px 14px / 14px 10px 14px 10px; }
.medora .tq-pick .name { font-family: var(--hand); font-weight: 400; font-size: 17px; }
.medora .tq-pick .num { color: var(--m-pencil-soft); }
.medora .tq-pick:has(input:checked), .medora .tq-vibe:has(input:checked) { background: var(--m-yellow) var(--tile) center / 600px 300px; background-blend-mode: multiply; }
.medora .tq-pick:has(input:checked)::after { background-color: var(--m-green); width: 30px; height: 30px; border: 2px solid var(--m-paper); }
.medora .tq-vibe .lab { font-family: var(--hand); font-weight: 400; font-size: 14px; letter-spacing: 0.02em; text-transform: none; }
.medora .tq-drop { border: 2.5px dashed var(--m-pencil); border-radius: var(--r1); background: var(--m-paper); }
.medora .tq-drop.is-over { background: var(--m-yellow); }
.medora .tq-drop .hint { font-size: 17px; font-weight: var(--print-w); }
.medora .tq-drop img { border: 2.5px solid var(--m-pencil); border-radius: var(--r3); }
.medora .tq-qty { border: 2.5px solid var(--m-pencil); border-radius: var(--r3); background: var(--m-paper); box-shadow: 2px 3px 0 var(--m-shadow); }
.medora .tq-qty button { background: var(--m-paper); font-family: var(--hand); font-weight: 400; color: var(--m-pencil); }
.medora .tq-qty button:hover { background: var(--m-yellow); }
.medora .tq-qty input { background: var(--m-paper); color: var(--m-pencil); }
.medora .tq-summary { font-weight: var(--print-w); font-size: 19px; }
.medora .tq-summary .total { border-top: 2px dashed rgba(71,74,85,0.4); font-family: var(--hand); font-weight: 400; font-size: 27px; color: var(--m-marker); }
.medora .tq-order__side .tq-mini { box-shadow: 6px 6px 0 rgba(71,74,85,0.22); }

/* ---------- Homepage bits ---------- */
.m-places { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.m-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; }
.m-steps li { display: flex; gap: 16px; align-items: flex-start; }
.m-steps img { flex: 0 0 40px; width: 40px; height: auto; margin-top: -2px; }
.m-steps .t { font-family: var(--hand); font-size: 26px; color: var(--m-pencil); line-height: 1.05; display: block; margin-bottom: 4px; }
.m-steps p { font-size: 19px; }
.m-map { position: relative; width: 100%; aspect-ratio: 5 / 4; max-width: 620px; margin: 0 auto; }
.m-map svg.route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-map .stop { position: absolute; width: 11%; transform: translate(-50%, -92%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.m-map .stop img { width: 100%; height: auto; display: block; }
.m-map .stop span { font-family: var(--hand); font-size: clamp(15px, 1.6vw, 22px); color: var(--m-pencil); white-space: nowrap; background: rgba(255,253,247,0.7); padding: 0 6px; border-radius: 8px; }
.m-map .water { position: absolute; left: -4%; width: 108%; height: 14%; object-fit: cover; opacity: 0.85; }
.m-product { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.m-product .tq-mini { align-self: center; transform: rotate(-2deg); box-shadow: 6px 6px 0 rgba(71,74,85,0.22); }
.m-product + .m-product .tq-mini { transform: rotate(1.5deg); }
.m-product .tql-mini { transform: rotate(-2deg); }
.m-product + .m-product .tql-mini { transform: rotate(1.5deg); }
.m-product .price { font-family: var(--hand); font-size: 40px; color: var(--m-marker); line-height: 1; }
.m-product .price small { font-family: var(--print); font-weight: var(--print-w); font-size: 17px; color: var(--m-pencil-soft); margin-left: 6px; }

/* ---------- The original card, framed like a photo on the fridge ---------- */
.m-polaroid { background: #fff; padding: 12px 12px 18px; border: 1px solid rgba(71,74,85,0.2); box-shadow: 4px 6px 0 var(--m-shadow); transform: rotate(2deg); max-width: 420px; width: 100%; position: relative; }
.m-polaroid img { width: 100%; height: auto; display: block; border: 1px solid rgba(71,74,85,0.15); }
.m-polaroid figcaption { font-family: var(--hand); font-size: 20px; color: var(--m-pencil); margin-top: 10px; text-align: center; }

/* ---------- Footer ---------- */
.medora .tq-footer { background: transparent; color: var(--m-pencil); padding-top: 24px; }
.medora .tq-footer .tq-wrap { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.medora .tq-footer .m-url { width: min(360px, 70vw); height: auto; display: block; }
.medora .tq-footer nav { font-family: var(--print); font-weight: var(--print-w); font-size: 19px; justify-content: center; }
.medora .tq-footer nav a { color: var(--m-pencil); padding: 8px 0; }
.medora .tq-footer small { font-size: 17px; color: var(--m-pencil-soft); }

@media (max-width: 640px) {
  .m-tape { width: 84px; height: 24px; top: -12px; }
  .medora .tq-trail .pin { flex-basis: 30px; width: 30px; }
  .medora .tq-trail .place { font-size: 24px; }
  .m-steps img { flex-basis: 32px; width: 32px; }
  .m-map .stop { width: 14%; }
}
@media (prefers-reduced-motion: reduce) {
  .m-pins img, .m-pond .duck { animation: none; }
  .medora .tq-btn { transition: none; }
}