/* Aftershow (Page Lemon app template): Lost Footpaths, a walking podcast's supporters' app.
   Art direction 2026-10-25 (docs/templates/app-art-direction-2026-10-23.md, family B): a folded walking map.
   Every episode is an Explorer Orange map cover with a big sheet number and a map window; the player is a grid-reference
   scrubber laid over contour lines, with a dashed Path Red footpath that fills along the route. Mailbag messages are
   postcards with a postmark for their status. Barlow Condensed (display) with Source Serif 4 (reading text).
   kit.css (never edited here) gives behaviour, layout and accessibility; every colour, font, radius and surface is set here.
   Contrast: ink #1E1A14 on orange 7.1, brown #7A4520 on map white 7.6, white on moor green 6.4, white on path red 5.7. */
:root {
  --m-orange: #F28C28;
  --m-ink: #1E1A14;
  --m-white: #FFFDF4;
  --m-brown: #7A4520;
  --m-green: #2E6B3F;
  --m-red: #C8202A;
  --m-bg: #FFFDF4;
  --m-sheet: #FFFFFF;
  --m-sheet-2: #F6EEDC;
  --m-text: #1E1A14;
  --m-muted: #5A4632;
  --m-tan: #7A4520;
  --m-rule: #1E1A14;
  --m-cline: #7A4520;
  --m-routebg: #FFFDF4;
  --m-redtext: #B01C25;
  --m-btn-bg: #1E1A14;
  --m-btn-fg: #FFFDF4;
  --m-shadow: rgba(30, 26, 20, .16);
  --m-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --m-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --m-on-colour: #FFFFFF;
  --m-ink-a3: rgba(30, 26, 20, .3);
  --m-ink-a14: rgba(30, 26, 20, .14);
  --m-ink-a09: rgba(30, 26, 20, .09);
  --m-white-a1: rgba(255, 255, 255, .1);
  --m-ink-a45: rgba(30, 26, 20, .45);
  --m-ink-a16: rgba(30, 26, 20, .16);
  --m-black-a12: rgba(0, 0, 0, .12);
  --m-black-a3: rgba(0, 0, 0, .3);
  --m-ink-a1: rgba(30, 26, 20, .1);
  --m-white-a12: rgba(255, 255, 255, .12);
  --m-ink-a08: rgba(30, 26, 20, .08);
  --m-ink-a25: rgba(30, 26, 20, .25);
  --m-ink-a28: rgba(30, 26, 20, .28);
  --m-ink-a4: rgba(30, 26, 20, .4);
  --m-orange-a32: rgba(242, 140, 40, .32);
  --m-ink-a35: rgba(30, 26, 20, .35);
  --m-shelf-edge: #7A4520;

  --k-brand: var(--m-red);
  --k-brand-ink: #FFFFFF;
  --k-brand-soft: #FBE3DC;
  --k-hero: var(--m-ink);
  --k-hero-ink: var(--m-white);
  --k-gold: var(--m-orange);
  --k-bg: var(--m-bg);
  --k-surface: var(--m-sheet);
  --k-surface-2: var(--m-sheet-2);
  --k-line: rgba(30, 26, 20, .14);
  --k-line-strong: rgba(30, 26, 20, .4);
  --k-text: var(--m-text);
  --k-muted: var(--m-muted);
  --k-faint: var(--m-muted);
  --k-ok: var(--m-green);
  --k-ok-soft: #E1EEE3;
  --k-warn: #8A4B00;
  --k-warn-soft: #FDEBD3;
  --k-danger: var(--m-red);
  --k-font: var(--m-serif);
  --k-font-display: var(--m-display);
  --k-r-s: 3px; --k-r-m: 4px; --k-r-l: 4px; --k-r-xl: 6px;
  --k-shadow-1: none;
  --k-shadow-2: 6px 7px 0 var(--m-shadow);
  --k-max: 1240px;
}
/* Night map: deep brown-black ground, orange covers stay orange, contours glow faintly */
@media (prefers-color-scheme: dark) {
  :root {
    --m-bg: #15110C;
    --m-sheet: #211A12;
    --m-sheet-2: #2C2318;
    --m-text: #FFFDF4;
    --m-muted: #D9C9AE;
    --m-tan: #E2AE78;
    --m-rule: #8C7458;
    --m-cline: #E2AE78;
    --m-routebg: #1A140D;
    --m-redtext: #FF8A7E;
    --m-btn-bg: #F28C28;
    --m-btn-fg: #1E1A14;
    --m-shadow: rgba(0, 0, 0, .5);
    --k-brand: #FF8A7E;
    --k-brand-ink: #1E1A14;
    --k-brand-soft: rgba(255, 138, 126, .14);
    --k-line: rgba(255, 253, 244, .12);
    --k-line-strong: rgba(255, 253, 244, .32);
    --k-ok: #7CCB93;
    --k-ok-soft: rgba(124, 203, 147, .14);
    --k-warn-soft: rgba(242, 140, 40, .16);
    --k-danger: #FF8A7E;
    --m-shelf-edge: #4A3420;
  }
}
/* On an orange field the ink button stays ink in both schemes */
.m-poster, .m-welcome, .m-plan-s, .m-idcover { --m-btn-bg: var(--m-ink); --m-btn-fg: var(--m-white); }

body.k-app { background: var(--k-bg); color: var(--k-text); font-family: var(--m-serif); }
.k-app h1, .k-app h2, .k-app h3 { font-family: var(--m-display); }
.k-app .k-kicker { font: 700 .9375rem/1.2 var(--m-display); text-transform: uppercase; letter-spacing: .08em; color: var(--m-tan); }
.k-app .k-help { font-family: var(--m-serif); color: var(--k-muted); }
.s-gap { margin-top: 24px; }
.s-gap-s { margin-top: 12px; }

/* ---------- buttons ---------- */
.k-app .k-btn { border-radius: 3px; background: var(--m-btn-bg); color: var(--m-btn-fg); font: 700 1.125rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 3px 0 var(--m-ink-a3); }
.k-app .k-btn:hover { filter: none; background: var(--m-red); color: var(--m-on-colour); }
.k-app .k-btn-lg { font-size: 1.25rem; }
.k-app .k-btn-2 { background: var(--m-white); color: var(--m-ink); box-shadow: inset 0 0 0 2px var(--m-ink); }
.k-app .k-btn-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 2.5px currentColor; }
.k-app .k-btn-line:hover, .k-app .k-btn-2:hover { background: var(--m-ink); color: var(--m-white); }
.k-app .k-btn .m-play-i, .m-cover .m-play-i { fill: currentColor; stroke: none; }
.k-app :focus-visible { outline: 3px solid var(--m-red); outline-offset: 2px; }
.m-poster :focus-visible, .m-welcome :focus-visible, .m-cover:focus-visible, .k-top :focus-visible { outline-color: var(--m-ink); }

/* ---------- member shell: orange cover band on top, ink tab strip ---------- */
.m-app .k-top { background: var(--m-orange); color: var(--m-ink); border-bottom: 3px solid var(--m-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.m-app .k-top .k-brand { color: var(--m-ink); font: 800 1.375rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .02em; }
.m-app .k-top .k-brand img, .m-pub .k-top .k-brand img { border-radius: 4px; box-shadow: 0 0 0 2px var(--m-ink); }
.m-top-note { display: none; margin: 0; font: 700 .875rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .12em; color: var(--m-ink); padding-left: 14px; border-left: 2px solid var(--m-ink); }
.k-app .k-top a.k-signin { background: var(--m-ink); color: var(--m-white); border-radius: 3px; font: 700 1.0625rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .05em; }
.k-app .k-top .k-avatar { background: var(--m-white); color: var(--m-ink); border-radius: 4px; box-shadow: 0 0 0 2px var(--m-ink); font: 800 1.125rem/1 var(--m-display); }
.m-app .k-tabs { background: var(--m-orange); border-top: 0; border-bottom: 3px solid var(--m-ink); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.m-app .k-tabs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--m-ink); font: 700 .9375rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .06em; border-radius: 0; }
.m-app .k-tabs a[aria-current="page"] { color: var(--m-ink); background: none; box-shadow: inset 0 -4px 0 var(--m-ink); }
@media (min-width: 1024px) {
  .m-top-note { display: block; }
  .m-app[data-k-nav="top"] .k-top { padding-top: 16px; padding-bottom: 16px; }
  .m-app[data-k-nav="top"] .k-top .k-brand { font-size: 1.875rem; }
  .m-app[data-k-nav="top"] .k-tabs { background: var(--m-orange); border-top: 0; border-bottom: 0; }
  .m-app[data-k-nav="top"] .k-tabs a { min-height: 44px; padding: 0 22px; color: var(--m-ink); font: 700 .9375rem/1 var(--m-display); letter-spacing: .06em; }
  .m-app[data-k-nav="top"] .k-tabs a:hover { color: var(--m-ink); text-decoration: underline; text-underline-offset: 4px; }
  .m-app[data-k-nav="top"] .k-tabs a[aria-current="page"] { background: none; color: var(--m-ink); box-shadow: inset 0 -4px 0 var(--m-ink); }
}
@media (max-width: 1023px) { .m-app .k-top .k-brand span { white-space: normal; line-height: .95; } }

/* page heading: the member's situation, set big and tight */
.k-app .k-pagehead { margin: 20px 0 24px; align-items: flex-end; }
.k-app .k-pagehead h1 { font: 800 clamp(2.5rem, 8vw, 4.75rem)/.88 var(--m-display); text-transform: uppercase; letter-spacing: -.005em; }
.k-app .k-pagehead .k-kicker { margin-bottom: 8px; }

/* ---------- the map cover (every episode) ---------- */
.m-cover { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 12px 12px 22px; background: var(--m-orange); color: var(--m-ink); text-decoration: none; border-radius: 2px; box-shadow: inset 10px 0 0 var(--m-ink-a14), 6px 7px 0 var(--m-shadow); overflow: hidden; }
.m-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: linear-gradient(90deg, transparent calc(50% - 1px), var(--m-ink-a09) 50%, var(--m-white-a1) calc(50% + 1px), transparent calc(50% + 18px)); }
.m-cover-top { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--m-ink); font: 700 .75rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .1em; }
.m-cover-top span:last-child { text-align: right; }
.m-cover-no { font: 800 4.25rem/.8 var(--m-display); letter-spacing: -.02em; margin-top: 4px; }
.m-cover-t { font: 700 1.25rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.m-cover-win { display: block; margin-top: auto; aspect-ratio: 16 / 10; border: 3px solid var(--m-ink); background: var(--m-white); overflow: hidden; }
.m-cover-win img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-cover-meta { display: flex; align-items: center; gap: 6px; font: 700 .9375rem/1.1 var(--m-display); text-transform: uppercase; letter-spacing: .04em; }
a.m-cover { transition: transform .18s ease, box-shadow .18s ease; }
a.m-cover:hover { transform: translateY(-4px); box-shadow: inset 10px 0 0 var(--m-ink-a14), 8px 12px 0 var(--m-shadow); }
.m-locked .m-cover-win img { filter: grayscale(1) opacity(.5); }
.m-locked .m-cover-meta { color: inherit; }
.m-cover-s .m-cover-no { font-size: 3.25rem; }
.m-cover-s .m-cover-t { font-size: 1.0625rem; }
@media (prefers-color-scheme: dark) { .m-cover-win img { filter: brightness(.92); } .m-locked .m-cover-win img { filter: grayscale(1) opacity(.45); } }

/* ---------- Home: the open map (cover beside the unfolded sheet) ---------- */
.m-open { display: grid; grid-template-columns: minmax(0, 1fr); border: 3px solid var(--m-rule); background: var(--k-surface); box-shadow: 10px 10px 0 var(--m-shadow); }
.m-open > .m-cover { border-radius: 0; box-shadow: inset 10px 0 0 var(--m-ink-a14); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 14px; }
.m-open > .m-cover .m-cover-top { grid-column: 1 / -1; }
.m-open > .m-cover .m-cover-no { font-size: 5rem; }
.m-open > .m-cover .m-cover-t, .m-open > .m-cover .m-cover-win { display: none; }
.m-open > .m-cover .m-cover-meta { padding-bottom: 6px; }
.m-open-sheet { position: relative; min-width: 0; padding: 20px 16px 22px; background-image: linear-gradient(90deg, transparent calc(50% - 1px), var(--k-line) 50%, transparent calc(50% + 16px)); }
.m-open-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 .9375rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .06em; color: var(--m-tan); }
.m-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; background: var(--m-red); color: var(--m-on-colour); letter-spacing: .08em; }
.m-open h2 { margin-top: 12px; font: 800 clamp(2rem, 7vw, 3.5rem)/.9 var(--m-display); text-transform: uppercase; }
.m-open-d { margin-top: 12px; font-size: 1.125rem; line-height: 1.5; color: var(--k-text); max-width: 56ch; }
.m-open-act { margin-top: 18px; }
.m-open-act .k-btn { width: 100%; }
.m-lock-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .9375rem; color: var(--k-muted); }
@media (min-width: 720px) {
  .m-open { grid-template-columns: minmax(230px, 260px) minmax(0, 1fr); }
  .m-open > .m-cover { display: flex; align-items: stretch; padding: 18px 18px 18px 30px; gap: 12px; }
  .m-open > .m-cover .m-cover-no { font-size: 8rem; }
  .m-open > .m-cover .m-cover-win { display: block; aspect-ratio: 4 / 5; margin-top: 0; }
  .m-open-sheet { padding: 28px 32px 30px; }
  .m-open-act .k-btn { width: auto; }
  .m-open h2 { font-size: clamp(2.5rem, 4.2vw, 3.75rem); }
}

/* ---------- the grid-reference scrubber with the walked footpath ---------- */
.m-route { margin-top: 24px; }
.m-route-sheet { position: relative; aspect-ratio: 800 / 260; border: 2px solid var(--m-rule); background: var(--m-routebg); overflow: hidden; }
.m-route-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-wood path { fill: var(--m-green); opacity: .16; }
.m-grid-l path { stroke: var(--m-cline); stroke-width: 1; opacity: .3; }
.m-contour { fill: none; stroke: var(--m-cline); stroke-width: 1.6; opacity: .75; }
.m-contour .m-index { stroke-width: 3; }
.m-stream { fill: none; stroke: var(--m-green); stroke-width: 3.5; opacity: .7; }
.m-path-base { fill: none; stroke: var(--m-brown); stroke-width: 5; stroke-dasharray: 12 9; stroke-linecap: round; opacity: .4; }
.m-path { fill: none; stroke: var(--m-red); stroke-width: 6.5; stroke-linecap: round; }
.m-stile path, .m-trig path { fill: none; stroke: var(--m-text); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.m-trig circle { fill: var(--m-text); }
.m-spot { font: 700 20px var(--m-display); fill: var(--m-text); }
.m-ruler { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 2px solid var(--m-rule); border-top: 0; background: var(--m-orange); color: var(--m-ink); }
.m-ruler span { padding: 5px 6px; font: 700 .875rem/1 var(--m-display); letter-spacing: .04em; border-left: 1px solid var(--m-ink-a45); }
.m-ruler span:first-child { border-left: 0; }
.m-thumb { position: absolute; top: -8px; bottom: 0; left: calc(30% - 2px); width: 4px; background: var(--m-red); box-shadow: 0 0 0 1.5px var(--m-white); }
.m-thumb::before { content: ""; position: absolute; top: -6px; left: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--m-red); box-shadow: 0 0 0 2px var(--m-white); }
/* the playing state is drawn static: solid to the stile (14:20, or 8:10 on B6), the rest dashed at 40% */
.m-route-sheet { --m-text: var(--m-ink); --m-cline: var(--m-brown); --m-routebg: var(--m-white); }
.m-where { position: absolute; left: calc(30% + 12px); top: 12px; padding: 5px 8px; background: var(--m-ink); color: var(--m-white); font: 800 1.125rem/1 var(--m-display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) { .m-open-sheet .m-thumb { left: calc(24% - 2px); } .m-open-sheet .m-where { left: calc(24% + 12px); } }
.m-chapters { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.m-chapters li { min-width: 0; border-left: 3px solid var(--m-red); padding-left: 10px; }
.m-chapters li > a, .m-chapters li { color: inherit; text-decoration: none; }
.m-chapters li > a { display: block; min-height: 44px; }
.m-chapters li > a:hover span { text-decoration: underline; }
.m-chapters b { display: block; font: 800 1.375rem/1 var(--m-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.m-chapters span { display: block; margin-top: 3px; font-size: .9375rem; line-height: 1.3; color: var(--k-muted); }
@media (min-width: 720px) { .m-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- shelves of covers ---------- */
.m-shelf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 3px solid var(--m-rule); }
.m-shelf-head h2 { font: 800 clamp(1.75rem, 4vw, 2.5rem)/.95 var(--m-display); text-transform: uppercase; }
.m-shelf-head a { display: inline-flex; align-items: center; min-height: 44px; font: 700 1.125rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .06em; color: var(--m-redtext); }
.m-shelf-head > span, .m-shelf-head .k-help { font: 600 1rem/1.2 var(--m-display); text-transform: uppercase; letter-spacing: .06em; color: var(--k-muted); margin: 0; }
.m-shelf { margin-top: 20px; }
.m-shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 16px; overflow-x: auto; padding: 4px 4px 22px; border-bottom: 10px solid var(--m-shelf-edge); scroll-snap-type: x proximity; }
.m-shelf-row > * { scroll-snap-align: start; }
@media (max-width: 719px) { .m-shelf-row { grid-auto-columns: 158px; } }

/* plan badge: a small map cover */
.m-badge { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 14px 6px 6px; border: 2px solid var(--m-rule); background: var(--k-surface); color: var(--k-text); text-decoration: none; }
.m-badge-cover { flex: none; display: grid; place-items: center; width: 42px; height: 52px; background: var(--m-orange); color: var(--m-ink); font: 800 1.875rem/1 var(--m-display); box-shadow: inset 5px 0 0 var(--m-ink-a16); }
.m-badge b { display: block; font: 800 1.25rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .02em; }
.m-badge span span { display: block; margin-top: 3px; font-size: .875rem; color: var(--k-muted); }
.m-badge-n { margin-left: 8px; padding-left: 12px; border-left: 2px solid var(--k-line-strong); font: 700 1rem/1.1 var(--m-display); text-transform: uppercase; letter-spacing: .05em; color: var(--m-redtext); }
.m-badge:hover { border-color: var(--m-red); }

/* ---------- Home: board ---------- */
.m-home { gap: 28px 24px; }
.m-home > * + * { margin-top: 0; }
.m-home > *, .m-shelf { min-width: 0; max-width: 100%; }
.m-mailhome { min-width: 0; }
.m-side { display: grid; gap: 18px; align-content: start; }
.m-side > * + * { margin-top: 0; }
@media (max-width: 1023px) { .m-home { display: flex; flex-direction: column; } }

/* the fingerpost (next episode, notes) */
.m-post { position: relative; margin: 0; padding: 16px 44px 18px 18px; background: var(--m-green); color: var(--m-on-colour); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); }
.m-post p { margin: 0; }
.m-post-arm { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font: 800 1.375rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .03em; }
.m-post-arm span { font-weight: 600; font-size: 1.125rem; }
.m-post-t { margin-top: 8px !important; font-size: 1.0625rem; line-height: 1.45; }
.m-post-d { margin-top: 6px !important; font-size: .9375rem; line-height: 1.45; }
.m-post-s .m-post-arm { font-size: 1.1875rem; }
.m-ask { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; border: 2px solid var(--m-rule); background: var(--k-surface); color: var(--k-text); text-decoration: none; box-shadow: 4px 5px 0 var(--m-shadow); }
.m-ask b { display: block; font: 800 1.25rem/1 var(--m-display); text-transform: uppercase; }
.m-ask span span { display: block; margin-top: 3px; font-size: .9375rem; color: var(--k-muted); }
.m-ask-stamp { flex: none; display: grid; place-items: center; width: 44px; height: 52px; background: var(--m-orange); color: var(--m-ink); outline: 2px dotted var(--m-ink); outline-offset: -5px; }
.m-ask:hover { border-color: var(--m-red); }

/* ---------- postcards (mailbag rows) ---------- */
.k-app .k-list.m-cards { background: none; box-shadow: none; border-radius: 0; overflow: visible; display: grid; gap: 18px; }
.m-card, .k-app .k-row.m-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; min-height: 0; background: var(--k-surface); color: var(--k-text); border: 1px solid var(--k-line-strong); border-radius: 2px; box-shadow: 5px 6px 0 var(--m-shadow); align-items: stretch; }
.k-app .k-row.m-card + .k-row::before { content: none; }
.m-card-l { min-width: 0; padding: 18px 18px 16px; }
.m-card-r { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 12px 18px 16px; border-top: 2px dashed var(--k-line-strong); }
.m-card-seg { display: block; font: 700 .875rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .1em; color: var(--m-redtext); }
.m-card-q { display: block; margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; color: var(--k-text); }
.m-card-sig { display: block; margin-top: 10px; font-style: italic; font-size: .9375rem; color: var(--k-muted); }
.m-card-ps { display: block; margin-top: 12px; padding-top: 10px; border-top: 2px dashed var(--m-red); font-style: italic; font-size: 1rem; line-height: 1.45; quotes: none; }
.m-card-ps::before { content: "Tamsin and Gil: "; font: 700 .9375rem var(--m-display); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--m-redtext); }
.m-card-ps::after { content: none; }
.m-card-ps:empty { display: none; }
.m-stamp { width: 52px; height: 62px; padding: 5px; background: var(--m-white); outline: 2px dotted var(--m-ink); outline-offset: -2px; transform: rotate(3deg); }
.m-stamp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-postmark, .k-app .m-card .k-badge-state.m-postmark { display: inline-grid; place-items: center; justify-self: start; min-height: 0; max-width: 100%; padding: 9px 14px; border: 3px double currentColor; border-radius: 999px; background: transparent; color: var(--m-tan); font: 800 .9375rem/1.05 var(--m-display); text-transform: uppercase; letter-spacing: .06em; text-align: center; white-space: normal; transform: rotate(-6deg); }
.k-app .m-card .k-badge-state.m-postmark::before { content: none; }
.k-app .m-card[data-k-state="active"] .m-postmark { color: var(--k-ok); }
.k-app .m-card[data-k-state="ok"] .m-postmark, .m-postmark-ok { color: var(--m-redtext); }
.k-app .m-card[data-k-state="done"] .m-postmark { color: var(--k-muted); }
.m-card-to { display: none; }
.m-card-r .k-steps { grid-column: 1 / -1; margin-top: 2px; }
.m-card .k-steps li { font: 700 .8125rem/1.1 var(--m-display); text-transform: uppercase; letter-spacing: .05em; color: var(--k-muted); }
.m-card .k-steps li::before, .k-app .m-card .k-steps:not(.k-steps-v) li::before { height: 0; background: none; border-top: 3px dashed var(--k-line-strong); border-radius: 0; animation: none; }
.k-app .m-card .k-steps:not(.k-steps-v) li.k-done::before, .k-app .m-card .k-steps:not(.k-steps-v) li.k-now::before { background: none; border-top-color: var(--m-red); border-top-style: solid; }
.m-card .k-steps li.k-now { color: var(--k-text); }
@media (min-width: 720px) {
  .m-card, .k-app .k-row.m-card { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .m-card-l { padding: 22px 24px 20px; border-right: 2px solid var(--k-line); }
  .m-card-r { grid-template-columns: minmax(0, 1fr) auto; align-content: start; padding: 18px 20px; border-top: 0; }
  .m-card-r .m-stamp { grid-column: 2; grid-row: 1; }
  .m-card-r .m-postmark { grid-column: 1; grid-row: 1; }
  .m-card-to { grid-column: 1 / -1; display: grid; gap: 0; font-style: italic; color: var(--k-muted); font-size: .9375rem; }
  .m-card-to span { padding: 6px 0 3px; border-bottom: 1px solid var(--k-line-strong); }
}
.m-empty { border: 2px dashed var(--k-line-strong); background: var(--k-surface); }
.k-app .m-empty .k-empty-art { background: var(--m-orange); color: var(--m-ink); border-radius: 4px; }
.k-app .m-empty h3 { font: 800 1.5rem/1 var(--m-display); text-transform: uppercase; }

/* ---------- Mailbag ---------- */
.k-app .m-marks { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.k-app .m-marks .k-stat { display: grid; place-items: center; align-content: center; width: 112px; height: 112px; padding: 10px; border-radius: 50%; border: 3px double var(--m-tan); background: transparent; box-shadow: none; text-align: center; transform: rotate(-4deg); }
.k-app .m-marks .k-stat:nth-child(2n) { transform: rotate(5deg); }
.k-app .m-marks .k-stat b { font: 800 2.25rem/1 var(--m-display); color: var(--k-text); }
.k-app .m-marks .k-stat span { margin-top: 2px; font: 700 .75rem/1.05 var(--m-display); text-transform: uppercase; letter-spacing: .06em; color: var(--m-tan); }
.m-mailist { min-width: 0; }
.m-blank { position: relative; padding: 24px 22px; border: 1px solid var(--k-line-strong); border-radius: 2px; background: var(--k-surface); box-shadow: 6px 7px 0 var(--m-shadow); }
.m-blank h2 { padding-right: 76px; font: 800 2rem/.95 var(--m-display); text-transform: uppercase; }
.m-blank > .k-help { padding-right: 70px; }
.m-blank-stamp { position: absolute; top: 18px; right: 18px; width: 58px; height: 70px; padding: 6px; outline: 2px dashed var(--k-line-strong); outline-offset: -2px; transform: rotate(4deg); }
.m-blank-stamp img { display: block; width: 100%; height: 100%; }
.a-prio { display: flex; align-items: center; gap: 6px; margin-top: 10px; font: 700 1rem/1.1 var(--m-display); text-transform: uppercase; letter-spacing: .05em; color: var(--m-redtext); }
.k-app .m-blank .k-field > label { font: 700 .9375rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .07em; color: var(--m-tan); }
.k-app .m-blank input, .k-app .m-blank select, .k-app .m-blank textarea { border: 0; border-bottom: 2px solid var(--m-rule); border-radius: 0; background-color: transparent; color: var(--k-text); font: 400 1.0625rem/1.5 var(--m-serif); box-shadow: none; }
.k-app .m-blank textarea { min-height: 168px; resize: vertical; line-height: 32px; padding-top: 2px; background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--k-line-strong) 31px 32px); background-attachment: local; border: 1px solid var(--k-line); border-bottom: 2px solid var(--m-rule); }
.k-app .m-blank select { border: 2px solid var(--m-rule); padding-left: 10px; }
.k-app .m-blank :is(input, select, textarea):focus { outline: 3px solid var(--m-red); outline-offset: 1px; }
.m-post-s { margin-top: 0; }
@media (min-width: 1024px) { .k-pagehead-actions .a-ask { display: none; } }
@media (max-width: 1023px) { .p-formfirst { display: flex; flex-direction: column; gap: 0; } .p-formfirst > aside { order: -1; margin-top: 0; } .p-formfirst > section { margin-top: 28px; } .k-pagehead-actions .a-ask { display: none; } }

/* ---------- Bonus: a grid of covers ---------- */
.m-legend { margin: 0 0 26px; padding: 14px 0; border-block: 3px solid var(--m-rule); }
.k-app .m-legend b { font: 800 2.5rem/1 var(--m-display); }
.k-app .m-legend span { font: 700 .875rem/1.1 var(--m-display); text-transform: uppercase; letter-spacing: .07em; color: var(--m-tan); }
.m-bonus > div { display: grid; gap: 24px; }
.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.m-cover-first .m-cover-no { font-size: 5.5rem; }
@media (min-width: 720px) {
  .m-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .m-cover-first { grid-column: span 2; grid-row: span 2; padding: 20px 20px 20px 34px; }
  .m-cover-first .m-cover-no { font-size: 10rem; }
  .m-cover-first .m-cover-t { font-size: 2.25rem; }
  .m-cover-first .m-cover-top { font-size: .9375rem; }
  .m-cover-first .m-cover-meta { font-size: 1.25rem; }
}
.k-app .m-gate { --k-c: var(--m-green); grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 18px 20px; border-radius: 0; background: var(--m-green); color: var(--m-on-colour); box-shadow: none; }
.k-app .m-gate > .k-tile { background: var(--m-on-colour); color: var(--m-green); border-radius: 4px; }
.k-app .m-gate b { font: 800 1.5rem/1 var(--m-display); text-transform: uppercase; }
.k-app .m-gate span { color: var(--m-on-colour); font-size: 1rem; }
.k-app .m-gate .k-btn { grid-column: 2; justify-self: start; margin-top: 10px; }

/* ---------- Plans: three covers at three scales ---------- */
.k-app .m-plans { gap: 24px; align-items: stretch; }
@media (min-width: 1024px) { .k-app .m-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k-app .m-plan { position: relative; gap: 12px; padding: 16px 18px 20px 30px; border-radius: 2px; box-shadow: inset 12px 0 0 var(--m-ink-a16), 7px 8px 0 var(--m-shadow); overflow: hidden; }
.m-plan::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: linear-gradient(90deg, transparent calc(50% - 1px), var(--m-ink-a09) 50%, var(--m-white-a1) calc(50% + 1px), transparent calc(50% + 20px)); }
.m-plan > * { position: relative; z-index: 1; }
.m-plan-top { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding-bottom: 6px; border-bottom: 2px solid currentColor; font: 700 .875rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .1em; }
.k-app .m-plan h3 { font: 800 3.25rem/.85 var(--m-display); text-transform: uppercase; }
.m-plan-win { display: block; aspect-ratio: 16 / 9; border: 3px solid var(--m-ink); background: var(--m-white); overflow: hidden; }
.m-plan-win img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-plan-l .m-plan-win img { transform: none; }
.m-plan-p .m-plan-win img { transform: scale(1.5); transform-origin: 55% 45%; }
.k-app .m-plan .k-price { font: 800 2.75rem/1 var(--m-display); color: inherit; }
.k-app .m-plan .k-price small { font: 600 1.125rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .05em; color: inherit; }
.k-app .m-plan ul { font-size: 1rem; line-height: 1.4; }
.k-app .m-plan li .k-i { color: inherit; }
.k-app .m-plan-l { background: var(--m-green); color: var(--m-on-colour); }
.k-app .m-plan-s { background: var(--m-orange); color: var(--m-ink); }
.k-app .m-plan-p { background: var(--m-red); color: var(--m-on-colour); }
.k-app .m-plan-p::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(33% - 1px), var(--m-black-a12) 33%, transparent calc(33% + 14px), transparent calc(66% - 1px), var(--m-black-a12) 66%, transparent calc(66% + 14px)), linear-gradient(180deg, transparent calc(50% - 1px), var(--m-black-a12) 50%, transparent calc(50% + 12px)); }
.k-app .m-plan-feature { box-shadow: inset 12px 0 0 var(--m-ink-a16), 0 0 0 3px var(--m-ink), 9px 10px 0 var(--m-shadow); }
.k-app .m-plan .p-flag { position: absolute; top: 46px; right: 14px; z-index: 2; background: var(--m-ink); color: var(--m-white); border-radius: 2px; font: 700 .875rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .07em; padding: 7px 10px; transform: rotate(3deg); }
.k-app .m-plan .k-btn { margin-top: auto; }
.k-app .m-plan-l .k-btn, .k-app .m-plan-p .k-btn { background: var(--m-white); color: var(--m-ink); box-shadow: inset 0 0 0 2px var(--m-ink), 0 3px 0 var(--m-black-a3); }
.k-app .m-plan .k-btn:hover { background: var(--m-ink); color: var(--m-white); }
.k-app .m-now { --k-c: var(--m-orange); margin-bottom: 20px; border-radius: 0; background: var(--k-surface); border: 2px solid var(--m-rule); box-shadow: inset 10px 0 0 var(--m-orange); padding-left: 26px; }
.k-app .m-now > .k-tile, .k-app .m-paynote > .k-tile { background: var(--m-orange); color: var(--m-ink); border-radius: 4px; }
.k-app .m-now b, .k-app .m-paynote b { font: 800 1.375rem/1 var(--m-display); text-transform: uppercase; }
.k-app .m-now span, .k-app .m-paynote span { font-size: .9375rem; color: var(--k-muted); }
.k-app .m-paynote { --k-c: var(--m-brown); border-radius: 0; background: transparent; border-top: 3px solid var(--m-rule); padding: 18px 0 0; }

/* ---------- Account: map-white sheets with an orange cover edge ---------- */
.k-app .m-acct .k-account h3 { font: 800 1.5rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .02em; margin-left: 0; }
.k-app .m-acct .k-account > p:first-child, .k-app .m-acct .k-account ul, .k-app .m-acct .k-account form:has(input[type="text"], select, textarea), .k-app .m-acct .k-account form:last-of-type:has(input[type="checkbox"]), .k-app .m-acct .k-account > form:not(:has(input:not([type="hidden"]), select, textarea)) > button { border-radius: 0; background: var(--k-surface); box-shadow: inset 10px 0 0 var(--m-orange); border: 1px solid var(--k-line-strong); padding-left: 28px; }
.k-app .m-acct .k-account button { border-radius: 3px; font: 700 1.0625rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .05em; }
.k-app .m-acct .k-account > form:not(:has(input:not([type="hidden"]), select, textarea)) > button { font: 700 1.125rem/1 var(--m-display); }
.k-app .m-acct .k-account form:has(input[type="text"], select, textarea) button { background: var(--m-btn-bg); color: var(--m-btn-fg); }
.k-app .m-acct .k-account form:has(input[type="text"], select, textarea) label { font: 700 .9375rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .07em; color: var(--m-tan); }
.m-idcover { position: relative; display: grid; gap: 12px; justify-items: start; padding: 16px 18px 20px 30px; background: var(--m-orange); color: var(--m-ink); box-shadow: inset 12px 0 0 var(--m-ink-a16), 7px 8px 0 var(--m-shadow); overflow: hidden; }
.m-idcover .m-cover-top { justify-self: stretch; }
.k-app .m-idcover .k-avatar { width: 84px; height: 84px; border-radius: 4px; background: var(--m-white); color: var(--m-ink); box-shadow: 0 0 0 3px var(--m-ink); font: 800 2.25rem/1 var(--m-display); }
.m-idcover-name { font: 800 2.5rem/.9 var(--m-display); text-transform: uppercase; overflow-wrap: anywhere; }
.m-idcover-d { font-size: .9375rem; line-height: 1.45; }
.k-app .m-links { border: 2px solid var(--m-rule); border-radius: 0; background: var(--k-surface); }
.k-app .m-links .k-row-title { font: 700 1.25rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .03em; }
.k-app .m-links .k-row-sub { font-size: .9375rem; white-space: normal; }
.k-app .m-links .k-tile { background: var(--m-orange); color: var(--m-ink); border-radius: 4px; }
@media (max-width: 1023px) { .m-acct > aside { order: -1; } }

/* ---------- signed out: the welcome as a map cover ---------- */
.k-app .m-welcome { position: relative; margin-top: 16px; padding: 22px 18px 26px; background: var(--m-orange); color: var(--m-ink); border: 3px solid var(--m-ink); box-shadow: 10px 10px 0 var(--m-shadow); overflow: hidden; }
.m-welcome::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - 1px), var(--m-ink-a1) 50%, var(--m-white-a12) calc(50% + 1px), transparent calc(50% + 24px)), linear-gradient(180deg, transparent calc(50% - 1px), var(--m-ink-a08) 50%, transparent calc(50% + 18px)); }
.m-welcome > * { position: relative; }
.k-app .m-welcome h1 { font: 800 clamp(2.75rem, 10vw, 5.5rem)/.86 var(--m-display); text-transform: uppercase; letter-spacing: -.005em; }
.k-app .m-welcome .k-kicker { color: var(--m-ink); }
.k-app .m-welcome .k-lead { color: var(--m-ink); font-size: 1.125rem; line-height: 1.5; }
.k-app .m-welcome .k-perks li { font-size: 1rem; }
.k-app .m-welcome .k-perks .k-tile { background: var(--m-ink); color: var(--m-orange); border-radius: 4px; }
.k-app .m-welcome .k-help { color: var(--m-ink); }
.k-app .m-welcome .k-welcome-art { border: 4px solid var(--m-ink); border-radius: 0; box-shadow: 8px 8px 0 var(--m-ink-a25); background: var(--m-white); }
.k-app .m-welcome .k-welcome-art::after { content: none; }
.k-app .m-welcome .k-welcome-art figcaption { left: 0; right: auto; bottom: 0; padding: 10px 14px; background: var(--m-ink); color: var(--m-white); font: 700 1rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 1024px) { .k-app .m-welcome { padding: 40px 44px; min-height: 0; } }

.k-app .k-foot { border-top: 3px solid var(--m-rule); color: var(--k-muted); font-family: var(--m-serif); }
.k-foot a, .k-foot span { min-height: 24px; display: inline-flex; align-items: center; }
.k-foot a { color: var(--k-muted); }
.k-app textarea { min-height: 120px; resize: vertical; }
.k-badge { height: auto; white-space: normal; }

/* ---------- public page: the poster is one huge map cover ---------- */
.m-pub .p-main { display: block; }
.m-pub .k-top.m-pubtop { position: sticky; top: 0; z-index: 20; background: var(--m-orange); color: var(--m-ink); border-bottom: 3px solid var(--m-ink); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 10px 16px; }
.m-pubtop .k-brand { color: var(--m-ink); font: 800 1.375rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .02em; }
.m-publinks { display: none; gap: 4px; margin-left: auto; }
.m-publinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--m-ink); text-decoration: none; font: 700 1.125rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .06em; }
.m-publinks a:hover { text-decoration: underline; text-underline-offset: 4px; }
.m-pubtop .k-top-end { margin-left: auto; }
@media (min-width: 720px) { .m-publinks { display: flex; } .m-pubtop .k-top-end { margin-left: 12px; } }
@media (min-width: 1024px) { .m-pub .k-top.m-pubtop { padding: 14px max(40px, calc((100vw - 1320px) / 2 + 24px)); } .m-pubtop .k-brand { font-size: 1.75rem; } }

.m-poster { position: relative; overflow: hidden; background: var(--m-orange); color: var(--m-ink); padding: 22px 16px 44px; }
.m-poster::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, transparent calc(25% - 1px), var(--m-ink-a1) 25%, var(--m-white-a12) calc(25% + 1px), transparent calc(25% + 34px), transparent calc(50% - 1px), var(--m-ink-a1) 50%, var(--m-white-a12) calc(50% + 1px), transparent calc(50% + 34px), transparent calc(75% - 1px), var(--m-ink-a1) 75%, var(--m-white-a12) calc(75% + 1px), transparent calc(75% + 34px)),
  linear-gradient(180deg, transparent calc(52% - 1px), var(--m-ink-a09) 52%, transparent calc(52% + 28px)); }
.m-poster::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 14px; background: var(--m-ink-a16); }
.m-poster-in { position: relative; max-width: 1320px; margin: 0 auto; display: grid; gap: 18px; grid-template-areas: "top" "h1" "sub" "foot" "win"; }
.m-poster-top { grid-area: top; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; padding-bottom: 8px; border-bottom: 3px solid var(--m-ink); font: 700 .9375rem/1.1 var(--m-display); text-transform: uppercase; letter-spacing: .1em; }
.m-poster h1 { grid-area: h1; font: 800 clamp(4.25rem, 21vw, 11.75rem)/.82 var(--m-display); text-transform: uppercase; letter-spacing: -.01em; margin: 6px 0 0; }
.m-poster-sub { grid-area: sub; margin: 0; font: 600 clamp(1.375rem, 4.4vw, 2rem)/1.05 var(--m-display); text-transform: uppercase; letter-spacing: .01em; max-width: 30ch; }
.m-poster-foot { grid-area: foot; display: grid; gap: 18px; align-content: start; }
.m-poster-lead { margin: 0; font-size: 1.125rem; line-height: 1.5; max-width: 52ch; }
.m-poster .k-btn-line { color: var(--m-ink); }
.m-poster-win { grid-area: win; position: relative; margin: 8px 0 0; border: 4px solid var(--m-ink); background: var(--m-white); aspect-ratio: 16 / 10; box-shadow: 10px 10px 0 var(--m-ink-a28); }
.m-poster-win img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-poster-win figcaption { position: absolute; left: -4px; top: -4px; display: flex; align-items: stretch; background: var(--m-ink); color: var(--m-white); }
.m-poster-win figcaption b { padding: 8px 14px 4px; background: var(--m-ink); color: var(--m-orange); font: 800 clamp(3.5rem, 12vw, 7rem)/.85 var(--m-display); }
.m-poster-win figcaption span { align-self: end; padding: 0 14px 10px 0; font: 700 1rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .08em; }
.m-key { display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0 0; padding-top: 12px; border-top: 2px solid var(--m-ink); }
.m-key div { padding: 0 18px; border-left: 2px solid var(--m-ink-a4); }
.m-key div:first-child { padding-left: 0; border-left: 0; }
.m-key dt { font: 800 2.25rem/1 var(--m-display); }
.m-key dd { margin: 2px 0 0; font: 700 .875rem/1.1 var(--m-display); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 1024px) {
  .m-poster { padding: 30px 40px 64px; }
  .m-poster-in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "top top" "h1 h1" "sub win" "foot win"; column-gap: 56px; row-gap: 22px; }
  .m-poster-win { margin-top: 10px; align-self: start; }
  .m-poster-foot { align-self: end; }
}
.m-sec { max-width: 1320px; margin: 0 auto; padding: 56px 16px 8px; }
.m-sec-head { margin-bottom: 22px; }
.m-sec-head h2 { font: 800 clamp(2.5rem, 7vw, 4.5rem)/.88 var(--m-display); text-transform: uppercase; margin-top: 6px; }
.m-sec-head p:not(.k-kicker) { margin-top: 12px; font-size: 1.125rem; line-height: 1.5; color: var(--k-muted); max-width: 62ch; }
.m-route-help { margin-top: 12px; font-style: italic; color: var(--k-muted); }
.m-shelf-pub { grid-auto-columns: minmax(200px, 1fr); }
.m-mailpub { display: grid; gap: 32px; align-items: center; }
.m-mailpub-text h2 { font: 800 clamp(2.5rem, 7vw, 4.5rem)/.88 var(--m-display); text-transform: uppercase; margin: 6px 0 12px; }
.m-mailpub-text > p:not(.k-kicker) { font-size: 1.125rem; line-height: 1.5; color: var(--k-muted); max-width: 52ch; margin-bottom: 18px; }
.m-mailpub-text .m-hosts { margin-top: 20px; font-size: 1rem; }
.m-hosts b { font-family: var(--m-display); text-transform: uppercase; letter-spacing: .04em; color: var(--k-text); }
.m-card-demo { transform: rotate(-1.5deg); }
@media (min-width: 1024px) { .m-mailpub { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } .m-sec { padding: 80px 40px 8px; } }
.m-signband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 72px; padding: 36px max(16px, calc((100vw - 1320px) / 2 + 24px)); background: var(--m-green); color: var(--m-on-colour); }
.m-signband h2 { font: 800 clamp(2.25rem, 6vw, 3.5rem)/.9 var(--m-display); text-transform: uppercase; }
.m-signband p { margin-top: 8px; font-size: 1.0625rem; }
.m-signband .k-btn { --m-btn-bg: var(--m-ink); --m-btn-fg: var(--m-white); }
.m-pubfoot { max-width: 1320px; margin: 0 auto; padding: 18px 16px 40px; }
@media (min-width: 1024px) { .m-pubfoot { padding: 22px 40px 48px; } }

/* ---------- privacy ---------- */
.m-priv-main { padding: 32px 16px 0; }
.m-prose { max-width: 820px; margin: 0 auto; padding: 28px 22px 32px 36px; background: var(--k-surface); border: 2px solid var(--m-rule); box-shadow: inset 12px 0 0 var(--m-orange), 8px 9px 0 var(--m-shadow); }
.m-prose h1 { font: 800 clamp(3rem, 10vw, 5rem)/.88 var(--m-display); text-transform: uppercase; }
.m-prose h2 { margin-top: 30px; font: 800 1.75rem/1 var(--m-display); text-transform: uppercase; }
.m-prose p, .m-prose li { margin-top: 10px; font-size: 1.0625rem; line-height: 1.6; color: var(--k-text); }
.m-prose ul { padding-left: 20px; margin: 8px 0; }
.m-prose a { color: var(--m-redtext); }
.m-prose .tip { margin-top: 18px; padding: 12px 16px; background: var(--m-orange); color: var(--m-ink); font-weight: 600; }
.blank { background: var(--m-orange-a32); color: inherit; border-radius: 2px; padding: 0 4px; }
.m-prose .tip .blank { background: var(--m-white); color: var(--m-ink); }
.m-priv .m-pubfoot { margin-top: 40px; }
@media (min-width: 1024px) { .m-prose { padding: 44px 52px 48px 64px; } .m-priv-main { padding-top: 56px; } }

/* ---------- reduced motion: the footpath stays drawn, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .k-app *, .k-app *::before, .k-app *::after { animation: none !important; transition: none !important; }
  .m-walked { clip-path: none; }
  a.m-cover:hover { transform: none; }
}

/* round 1 fixes: the plan flag sits under the plan name; the poster key stays one row on phones */
.k-app .m-plan .p-flag { position: static; align-self: flex-start; order: 0; margin-top: -4px; }
.k-app .m-plan .m-plan-top, .k-app .m-plan h3 { order: -1; }
@media (max-width: 479px) { .m-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .m-key div { padding: 0 10px; } .m-key dt { font-size: 1.875rem; } }

/* round 1 review fixes */
.m-post, .m-card-q, .m-card-ps, .m-card-sig, .m-acct .k-account { overflow-wrap: anywhere; }
.m-acct .k-account { min-width: 0; }
.m-acct .k-account > p:first-child > * { min-width: 0; max-width: 100%; }
.k-app input::placeholder, .k-app textarea::placeholder { color: var(--k-muted); opacity: 1; }
.m-plan-act { display: flex; flex-direction: column; margin-top: auto; }
.m-plan-act[hidden] { display: none; }
.k-app .m-plan .k-btn:disabled, .k-app .m-plan .k-btn:disabled:hover { background: var(--m-white); color: var(--m-ink); box-shadow: inset 0 0 0 2px var(--m-ink); cursor: default; opacity: 1; }
.m-latest { max-width: none; padding-left: max(16px, calc((100vw - 1320px) / 2 + 24px)); padding-right: max(16px, calc((100vw - 1320px) / 2 + 24px)); background: var(--m-brown); color: var(--m-white); }
.m-latest .k-kicker, .m-latest .m-sec-head h2, .m-latest .m-sec-head p, .m-latest .m-route-help { color: var(--m-white); }
.m-open-sheet.m-field { background: var(--m-brown); color: var(--m-white); }
.m-open-sheet.m-field :is(h2, .m-open-k, .m-open-d, .m-chapters b, .m-chapters span) { color: var(--m-white); }
.m-open-sheet.m-field .m-chapters li { border-left-color: var(--m-orange); }
@media (min-width: 720px) { .m-cover-first .m-cover-win { position: relative; aspect-ratio: auto; height: auto; min-height: 360px; flex: 1 1 auto; } .m-cover-first .m-cover-win img { position: absolute; inset: 0; } }
@media (max-width: 719px) {
  .m-open-sheet .m-route { margin-left: -16px; margin-right: -16px; }
  .m-open-sheet .m-route-sheet { aspect-ratio: auto; height: 160px; border-width: 2px 0; }
  .m-head-plan, .m-head-plan > div, .m-head-plan .m-badge { width: 100%; }
}
.m-card[data-k-state="done"] .k-steps:not(.k-steps-v) li:first-child::before { border-top: 3px solid var(--m-red); }
.m-card[data-k-state="done"] .k-steps:not(.k-steps-v) li:nth-child(n+2)::before { border-top: 3px solid var(--m-brown); }
.m-card[data-k-state="done"] .k-steps li:first-child { color: var(--k-text); }
.m-idcover > * { position: relative; }
.m-idcover::before { content: ""; position: absolute; right: -24px; bottom: -24px; width: 76px; height: 76px; border-radius: 50%; box-shadow: 0 0 0 8px transparent, 0 0 0 9px var(--m-ink-a35), 0 0 0 17px transparent, 0 0 0 18px var(--m-ink-a35); pointer-events: none; }
.m-app .k-tabs a.k-tabs-brand { display: none; }
.m-latest .m-chapters span, .m-latest .m-chapters b { color: var(--m-white); }

/* round 2 review fixes */
.m-latest :focus-visible, .m-open-sheet.m-field :focus-visible { outline-color: var(--m-orange); }
.m-open-sheet.m-field .m-lock-note { color: var(--m-white); }
.k-app .m-cover-map { background: var(--m-green); color: var(--m-white); }
.k-app .m-cover-out { background: var(--m-red); color: var(--m-white); }
.k-app .m-cover-map .m-cover-top, .k-app .m-cover-out .m-cover-top { border-bottom-color: var(--m-white); }
.k-app .m-cover-map .m-cover-win, .k-app .m-cover-out .m-cover-win { border-color: var(--m-white); }
.m-keyline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; font: 700 .875rem/1.1 var(--m-display); text-transform: uppercase; letter-spacing: .06em; color: var(--k-muted); }
.m-keyline span { display: inline-flex; align-items: center; }
.m-sw { display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 6px; border: 2px solid var(--m-ink); }
.m-sw-walk { background: var(--m-orange); }
.m-sw-map { background: var(--m-green); }
.m-sw-out { background: var(--m-red); }
.m-h-short { display: none; }
.m-poster-win { z-index: 1; }
@media (min-width: 1024px) {
  .m-poster { overflow: visible; overflow-x: clip; }
  .m-poster-win { margin-right: min(0px, calc((100vw - 1320px) / -2)); margin-bottom: -144px; }
}
@media (max-width: 719px) {
  .m-poster-in { grid-template-areas: "top" "h1" "sub" "win" "foot"; }
  .m-poster-win { aspect-ratio: auto; height: 180px; }
  .m-more { display: none; }
  .m-keyline { font-size: .75rem; gap: 6px 14px; }
}
@media (max-width: 479px) {
  .k-app .k-pagehead h1 { font-size: 2.25rem; text-wrap: balance; }
  .m-h-long { display: none; }
  .m-h-short { display: inline; }
  .m-shelf-head a { white-space: nowrap; }
  .k-app .m-marks { gap: 10px; }
  .k-app .m-marks .k-stat { width: 76px; height: 76px; padding: 4px; }
  .k-app .m-marks .k-stat b { font-size: 1.5rem; }
  .k-app .m-marks .k-stat span { font-size: .6875rem; letter-spacing: .02em; }
}

/* round 3 fixes */
.k-foot a { min-height: 44px; }
.m-head .k-kicker { overflow-wrap: anywhere; max-width: 100%; }
.k-app [data-pl-status]:not(:empty) { flex-wrap: wrap; overflow-wrap: anywhere; }
.k-app [data-pl-status] a { white-space: normal; }
/* scrubber: pin, label and walked footpath agree (index 14:20 of 52:00 = 27.6%; Home 8:10 of 34:00 = 24%) */
.m-latest .m-thumb { left: calc(27.6% - 2px); }
.m-latest .m-where { left: calc(27.6% + 12px); }
.m-open-sheet .m-thumb { left: calc(24% - 2px); }
.m-open-sheet .m-where { left: calc(24% + 12px); }
@media (min-width: 1024px) {
  .m-poster-win { margin-right: 0; }
  .a-mailboard > aside.k-sticky, .m-side { position: sticky; top: 24px; align-self: start; }
  .m-card-demo { width: min(100%, 720px); justify-self: end; transform: rotate(-2deg); }
  .m-card-demo .m-stamp { background: var(--m-orange); }
}
@media (min-width: 720px) {
  .m-cover-first .m-cover-win { height: 360px; min-height: 0; flex: none; }
  .m-open > .m-cover .m-cover-win { flex: 1 1 auto; aspect-ratio: auto; min-height: 325px; }
  .m-open > .m-cover .m-cover-legend { display: block; }
}
.m-cover-legend { display: none; margin: 0; padding-top: 8px; border-top: 2px solid var(--m-ink); font: 700 .9375rem/1.2 var(--m-display); text-transform: uppercase; letter-spacing: .06em; }
/* mailbag: a read postcard that did not air is grey and dashed, with a tag */
.k-app .m-card[data-k-state="done"] .k-steps:not(.k-steps-v) li:nth-child(n+2)::before { border-top: 3px dashed var(--k-line-strong) !important; }
.k-app .m-card[data-k-state="done"] .m-postmark::after { content: "Not this time"; display: block; margin-top: 4px; font-size: .75rem; letter-spacing: .08em; }
.m-blank-to { display: grid; margin-top: 14px; font-style: italic; color: var(--k-muted); font-size: .9375rem; }
.m-blank-to span { padding: 6px 0 3px; border-bottom: 1px solid var(--k-line-strong); }
/* bonus on a 375 phone: one column, no eyebrow, meta on one line */
@media (max-width: 399px) {
  .m-grid { grid-template-columns: minmax(0, 1fr); }
  .m-grid .m-cover-top > span:first-child { display: none; }
  .m-grid .m-cover-meta { white-space: nowrap; }
}
/* account: the supporter's map cover (sheet S-0412), rows as 1px ink rules */
.m-idcover::before { content: none; }
.m-idcover-sheet { font: 700 .9375rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .08em; }
.m-idcover-map { display: block; width: 100%; aspect-ratio: 5 / 3; border: 3px solid var(--m-ink); background: var(--m-white); overflow: hidden; }
.m-idcover-map svg { display: block; width: 100%; height: 100%; }
.m-idcover-map .c { fill: none; stroke: var(--m-brown); stroke-width: 3; }
.m-idcover-map .p { fill: none; stroke: var(--m-red); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 16 11; }
.m-idcover-name { font: 800 4rem/.9 var(--m-display); }
.k-app .m-links > .k-row, .k-app .m-acct .k-row { border-left: 0; box-shadow: none; border-bottom: 1px solid var(--m-ink); }
@media (max-width: 479px) { .m-acct .k-account button { font-size: .8125rem; } }
/* plans: a signed-in Listener sees a bar the size of the other plans' buttons */
.k-app .m-plan .m-plan-in { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 48px; margin-top: 0; padding: 0 16px; border-radius: 3px; background: var(--m-white); color: var(--m-ink); box-shadow: inset 0 0 0 2px var(--m-ink), 0 3px 0 var(--m-black-a3); font: 700 1.125rem/1 var(--m-display); text-transform: uppercase; letter-spacing: .05em; }
.k-app .m-acct .k-account ul, .k-app .m-acct .k-account > form, .k-app .m-acct .k-account > p:first-child { box-shadow: none; border-left: 0; }

/* round 4 final: account rows (devices, membership) start where the Signed in as text starts */
.k-app .m-acct .k-account li { padding-left: 0; }
/* round 4 final: the B6 walk-along blurb fills the space under its title */
.m-cover-blurb { display: block; margin: 0; max-width: 40ch; font: 400 1.125rem/1.45 var(--m-serif); color: var(--m-ink); }
/* round 4 final: playable shelf footers stay on one line on a phone (locked cards keep their longer text) */
@media (max-width: 479px) { .m-cover-s:not(.m-locked) .m-cover-meta { font-size: .75rem; white-space: nowrap; } }