/* Pledge (Page Lemon app template): Brookside Orchard Trust, a community orchard charity on Brook Lane.
   Art direction 2026-10-26 (docs/templates/app-art-direction-2026-10-23.md §4, track D): an apple crate label.
   Apple Red field, Leaf, Sky, Cider Cream, Crate Wood slats and ink; Alfa Slab One for crate-label lettering, Lato for text.
   The giving level is a four-colour crate-end label pasted on timber slats; the tree row (one apple per tree the gift keeps
   in care, £14 a tree a year) grows in; work days are almanac pages under a sky band. Dark: the orchard at night.
   kit.css (never edited here) gives behaviour, layout and accessibility; every colour, font, radius and surface is set here. */
:root {
  --p-red: #B50E2A;
  --p-red-deep: #8E0A20;
  --p-leaf: #2F6620;
  --p-leaf-deep: #234D18;
  --p-sky: #CFE7F2;
  --p-cream: #FFF6E0;
  --p-paper: #FFFCF3;
  --p-wood: #B07A47;
  --p-wood-hi: #C38C57;
  --p-wood-dark: #7A4E2A;
  --p-ink: #2A1E14;
  --p-muted: #6B5444;
  --p-display: "Alfa Slab One", Rockwell, "Roboto Slab", Georgia, serif;
  --p-text: Lato, "Helvetica Neue", Arial, sans-serif;
  /* surfaces that change with the scheme */
  --p-page: var(--p-cream);
  --p-surface: var(--p-paper);
  --p-band: var(--p-sky);
  --p-band-ink: var(--p-ink);
  --p-band-kick: var(--p-leaf);
  --p-txt: var(--p-ink);
  --p-sub: var(--p-muted);
  --p-accent: var(--p-red);
  --p-green: var(--p-leaf);
  --p-rule: rgba(42, 30, 20, .16);
  --p-rule-strong: rgba(42, 30, 20, .4);
  --p-slat-a: var(--p-wood);
  --p-slat-b: var(--p-wood-hi);
  --p-slat-gap: var(--p-wood-dark);
  --p-label-paper: var(--p-cream);
  --p-almanac: var(--p-paper);
  --p-shadow: 0 2px 0 rgba(42, 30, 20, .18);
  --p-lift: 0 14px 30px -12px rgba(42, 30, 20, .45);
  --p-tab-ink: #E6F0DA; --p-booked-bg: #E3F0D8; --p-footer-link: #FFD3D9;

  --k-brand: var(--p-red);
  --k-brand-ink: var(--p-cream);
  --k-brand-soft: rgba(181, 14, 42, .1);
  --k-hero: var(--p-leaf);
  --k-hero-ink: var(--p-cream);
  --k-gold: var(--p-red);
  --k-bg: var(--p-page);
  --k-surface: var(--p-surface);
  --k-surface-2: #F4E9CC;
  --k-line: var(--p-rule);
  --k-line-strong: var(--p-rule-strong);
  --k-text: var(--p-ink);
  --k-muted: var(--p-muted);
  --k-faint: var(--p-muted);
  --k-ok: var(--p-leaf);
  --k-ok-soft: rgba(47, 102, 32, .12);
  --k-warn: #8A4A0C;
  --k-warn-soft: rgba(176, 122, 71, .2);
  --k-danger: var(--p-red);
  --k-info: var(--p-red);
  --k-info-soft: rgba(181, 14, 42, .1);
  --k-font: var(--p-text);
  --k-font-display: var(--p-display);
  --k-r-s: 3px; --k-r-m: 4px; --k-r-l: 6px; --k-r-xl: 8px; --k-r-pill: 4px;
  --k-shadow-1: 0 0 0 1.5px var(--p-rule);
  --k-shadow-2: 0 0 0 1.5px var(--p-rule), 0 10px 24px -14px rgba(42, 30, 20, .4);
  --k-shadow-3: 0 18px 44px rgba(42, 30, 20, .3);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --p-page: #142112;
    --p-surface: #1C2E19;
    --p-band: #16263A;
    --p-band-ink: #F3E9CF;
    --p-band-kick: #9FCB7E;
    --p-txt: #F3E9CF;
    --p-sub: #B9C9A8;
    --p-accent: #FF6B78;
    --p-green: #9FCB7E;
    --p-rule: rgba(243, 233, 207, .14);
    --p-rule-strong: rgba(243, 233, 207, .34);
    --p-slat-a: #5E3B1F;
    --p-slat-b: #6E4A2B;
    --p-slat-gap: #2B1A0D;
    --p-label-paper: #F7EBCB;
    --p-almanac: #1C2E19;
    --p-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    --p-lift: 0 18px 36px -14px rgba(0, 0, 0, .7);
    --p-tab-ink: #CFE0C0; --p-booked-bg: #1F3A1A;
    --k-brand: var(--p-red);
    --k-brand-ink: var(--p-cream);
    --k-brand-soft: rgba(255, 107, 120, .14);
    --k-hero: #24391F;
    --k-hero-ink: #F3E9CF;
    --k-gold: var(--p-red);
    --k-bg: var(--p-page);
    --k-surface: var(--p-surface);
    --k-surface-2: #24391F;
    --k-line: var(--p-rule);
    --k-line-strong: var(--p-rule-strong);
    --k-text: #F3E9CF;
    --k-muted: #B9C9A8;
    --k-faint: #B9C9A8;
    --k-ok: #9FCB7E;
    --k-ok-soft: rgba(159, 203, 126, .14);
    --k-warn: #E9B77E;
    --k-warn-soft: rgba(233, 183, 126, .14);
    --k-danger: #FF6B78;
    --k-info: #FF6B78;
    --k-info-soft: rgba(255, 107, 120, .14);
    --k-shadow-1: 0 0 0 1.5px var(--p-rule);
    --k-shadow-2: 0 0 0 1.5px var(--p-rule), 0 12px 28px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
body.k-app { font-family: var(--p-text); font-size: 1rem; line-height: 1.55; background: var(--p-page); color: var(--p-txt); }
.k-app :focus-visible { outline: 3px solid var(--p-accent); outline-offset: 2px; border-radius: 3px; }
.k-app ::selection { background: var(--p-red); color: var(--p-cream); }
.k-app :is(h1, h2, h3) { font-family: var(--p-display); font-weight: 400; letter-spacing: .005em; color: inherit; }
.k-app a { color: var(--p-accent); }
.k-app .k-muted, .k-app .k-help { color: var(--p-sub); }
.k-app .k-help a { color: var(--p-accent); }
.p-h3 { font-family: var(--p-display); font-size: 1.25rem; line-height: 1.15; }
.p-k { font: 900 .75rem/1.3 var(--p-text); text-transform: uppercase; letter-spacing: .14em; color: var(--p-green); }

/* Buttons: printed tags with an ink edge */
.k-app .k-btn { border-radius: 4px; font: 900 .875rem/1.1 var(--p-text); text-transform: uppercase; letter-spacing: .07em; background: var(--p-red); color: var(--p-cream); box-shadow: 0 3px 0 var(--p-ink); transition: transform .12s ease, box-shadow .12s ease, background .12s; }
.k-app .k-btn:hover { filter: none; background: var(--p-red-deep); }
.k-app .k-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--p-ink); }
.k-app .k-btn-2 { background: var(--p-leaf); color: var(--p-cream); }
.k-app .k-btn-2:hover { background: var(--p-leaf-deep); }
.k-app .k-btn-line { background: transparent; color: var(--p-txt); box-shadow: inset 0 0 0 2px currentColor; }
.k-app .k-btn-line:hover { background: rgba(42, 30, 20, .06); }
.k-app .k-btn-line:active { box-shadow: inset 0 0 0 2px currentColor; }
.k-app .k-btn-lg { min-height: 56px; font-size: .9375rem; }
@media (prefers-color-scheme: dark) {
  .k-app .k-btn { box-shadow: 0 3px 0 #000; }
  .k-app .k-btn-2 { background: #3D7D2A; }
  .k-app .k-btn-line { box-shadow: inset 0 0 0 2px var(--p-cream); }
  .k-app .k-btn-line:hover { background: rgba(243, 233, 207, .08); }
}

/* ---------- shell: a leaf-green bar ---------- */
.p-app .k-top { background: var(--p-leaf); color: var(--p-cream); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.k-app .k-brand { font: 400 1.0625rem/1.05 var(--p-display); letter-spacing: .01em; color: var(--p-cream); text-decoration: none; }
.k-app .k-brand img { border-radius: 6px; box-shadow: none; }
.k-app .k-brand span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.k-app .k-top-end { flex-shrink: 0; }
.k-app .k-top a.k-signin { border-radius: 4px; background: var(--p-cream); color: var(--p-red); font: 900 .8125rem/1 var(--p-text); text-transform: uppercase; letter-spacing: .07em; }
.k-app .k-avatar { background: var(--p-cream); color: var(--p-red); font-family: var(--p-text); font-weight: 900; }
.p-app .k-tabs { background: var(--p-leaf-deep); border-top: 3px solid var(--p-red); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.p-app .k-tabs a { color: var(--p-tab-ink); font: 700 .6875rem/1.1 var(--p-text); text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; min-height: 52px; }
.p-app .k-tabs a[aria-current="page"] { color: var(--p-red); background: var(--p-cream); }
@media (prefers-color-scheme: dark) {
  .p-app .k-top { background: #1B3315; }
  .p-app .k-tabs { background: #0F1A0D; }
  .p-app .k-tabs a { color: var(--p-tab-ink); }
}
@media (min-width: 1024px) {
  .p-app[data-k-nav="top"] .k-top { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .p-app[data-k-nav="top"] .k-top .k-brand { font-size: 1.375rem; }
  .p-app[data-k-nav="top"] .k-tabs { background: var(--p-leaf); border-top: 0; border-bottom: 4px solid var(--p-red); gap: 6px; padding-top: 0; padding-bottom: 0; }
  .p-app[data-k-nav="top"] .k-tabs a { min-height: 50px; padding: 0 22px; color: var(--p-tab-ink); font-size: .8125rem; letter-spacing: .1em; border-radius: 6px 6px 0 0; }
  .p-app[data-k-nav="top"] .k-tabs a:hover { color: #fff; background: rgba(255, 246, 224, .08); }
  .p-app[data-k-nav="top"] .k-tabs a[aria-current="page"] { color: var(--p-red); background: var(--p-cream); box-shadow: none; }
  .p-app[data-k-nav="top"] .k-main { padding-top: 0; overflow-x: clip; }
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) {
  .p-app[data-k-nav="top"] .k-tabs { background: #1B3315; }
  .p-app[data-k-nav="top"] .k-tabs a[aria-current="page"] { background: var(--p-page); color: var(--p-accent); }
}
.k-app .k-foot { border-top: 2px solid var(--p-rule); color: var(--p-sub); }
.k-app .k-foot a { color: var(--p-sub); }
.k-app .k-back { color: var(--p-accent); font-weight: 700; }

/* ---------- the sky band (top of every member page) ---------- */
.p-sky { --p-gut: 16px; position: relative; margin: 0 calc(-1 * var(--p-gut)) 0; padding: 26px var(--p-gut) 58px; background: var(--p-band); color: var(--p-band-ink); }
.p-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; background: var(--p-page); -webkit-mask: url("art/hills.svg") left bottom / 600px 40px repeat-x; mask: url("art/hills.svg") left bottom / 600px 40px repeat-x; }
.p-sky::before { content: ""; position: absolute; right: max(var(--p-gut), 6%); top: 18px; display: none; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle closest-side, var(--p-cream) 0 60%, transparent 61%), repeating-conic-gradient(from 0deg, var(--p-cream) 0 8deg, transparent 8deg 22.5deg); }
.p-sky > * { position: relative; z-index: 1; }
.p-sky .k-kicker, .p-sky .p-k { color: var(--p-band-kick); font: 900 .75rem/1.3 var(--p-text); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 8px; padding-right: 84px; }
.p-sky h1 { font: 400 clamp(2.5rem, 9vw, 4.6rem)/.98 var(--p-display); letter-spacing: 0; max-width: 16ch; text-wrap: balance; }
.p-sky .p-sky-sub { margin-top: 12px; max-width: 56ch; font-size: 1.0625rem; color: var(--p-band-ink); }
.p-sky .k-btn-row { margin-top: 18px; }
.p-sky .k-btn-line { color: var(--p-band-ink); }
.p-sky-tall { padding-bottom: 150px; }
.p-over { position: relative; z-index: 2; margin-top: -118px; }
@media (prefers-color-scheme: dark) {
  .p-sky { background-color: var(--p-band); background-image: radial-gradient(circle, rgba(243, 233, 207, .9) 0 1.2px, transparent 1.6px), radial-gradient(circle, rgba(243, 233, 207, .6) 0 1px, transparent 1.4px); background-size: 97px 61px, 53px 43px; background-position: 11px 7px, 31px 23px; }
  .p-sky::before { background: #F3E9CF; box-shadow: inset -14px -6px 0 0 #D8CBA6, 0 0 0 10px rgba(243, 233, 207, .08); }
}
@media (min-width: 1024px) {
  .p-sky { --p-gut: max(40px, calc((100vw - 1320px) / 2 + 40px)); padding-top: 40px; padding-bottom: 74px; }
  .p-sky::before { display: block; width: 140px; height: 140px; top: 24px; }
  .p-sky-tall { padding-bottom: 170px; }
  .p-over { margin-top: -132px; }
}

/* ---------- the crate end: timber slats, nail heads ---------- */
.p-crate { position: relative; padding: 26px 18px 18px; border-radius: 4px; background-color: var(--p-slat-a);
  background-image:
    radial-gradient(circle at 14px 14px, var(--p-slat-gap) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) 14px, var(--p-slat-gap) 0 3px, transparent 3.5px),
    repeating-linear-gradient(180deg, transparent 0 58px, var(--p-slat-gap) 58px 62px),
    repeating-linear-gradient(180deg, var(--p-slat-a) 0 30px, var(--p-slat-b) 30px 31px, var(--p-slat-a) 31px 62px),
    repeating-linear-gradient(90deg, rgba(42, 30, 20, .06) 0 2px, transparent 2px 23px, rgba(255, 255, 255, .05) 23px 24px, transparent 24px 61px);
  box-shadow: inset 0 0 0 3px var(--p-slat-gap), var(--p-lift); }
.p-crate::before, .p-crate::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--p-slat-gap); opacity: .55; }
.p-crate::before { top: 0; border-radius: 4px 4px 0 0; }
.p-crate::after { bottom: 0; border-radius: 0 0 4px 4px; }

/* the label */
.p-label { container-type: inline-size; position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 10px 10px 0; background: var(--p-label-paper); color: var(--p-ink); border: 9px solid var(--p-red); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--p-ink), 0 0 0 2px var(--p-ink), 0 10px 0 -2px rgba(42, 30, 20, .35); transform: rotate(-.6deg); }
.p-arch { display: block; width: 100%; height: auto; margin: -2px 0 -10px; overflow: visible; }
.p-arch text { font-family: var(--p-display); font-size: 33px; text-transform: uppercase; fill: var(--p-red); }
.p-label-art { display: block; width: 100%; height: auto; }
.p-label-band { margin: 0 -10px; padding: 12px 14px 14px; background: var(--p-red); color: var(--p-cream); text-align: center; border-top: 2px solid var(--p-ink); }
.p-label-lv { font: 400 clamp(1.6rem, 16cqi, 4.6rem)/.9 var(--p-display); text-transform: uppercase; letter-spacing: .02em; text-shadow: 3px 3px 0 var(--p-ink); }
.p-label-amt { margin-top: 6px; font: 900 .875rem/1.2 var(--p-text); text-transform: uppercase; letter-spacing: .2em; }
.p-label-sm .p-label-lv { font-size: clamp(1.6rem, 16cqi, 3.4rem); }


/* the tree row: one apple per tree the gift keeps in care */
.p-tally { position: relative; z-index: 1; margin: 18px auto 0; max-width: 620px; }
.p-apples { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.p-apples li { width: 34px; height: 38px; background: url("art/apple.svg") center / contain no-repeat; transform-origin: 50% 90%; animation: p-grow .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.p-apples-empty li { background-image: url("art/apple-empty.svg"); animation: none; }
.p-apples li:nth-child(1) { animation-delay: .25s; } .p-apples li:nth-child(2) { animation-delay: .34s; } .p-apples li:nth-child(3) { animation-delay: .43s; }
.p-apples li:nth-child(4) { animation-delay: .52s; } .p-apples li:nth-child(5) { animation-delay: .61s; } .p-apples li:nth-child(6) { animation-delay: .7s; }
.p-apples li:nth-child(7) { animation-delay: .79s; } .p-apples li:nth-child(8) { animation-delay: .88s; } .p-apples li:nth-child(9) { animation-delay: .97s; }
.p-apples li:nth-child(10) { animation-delay: 1.06s; } .p-apples li:nth-child(11) { animation-delay: 1.15s; } .p-apples li:nth-child(12) { animation-delay: 1.24s; }
.p-apples li:nth-child(13) { animation-delay: 1.33s; } .p-apples li:nth-child(14) { animation-delay: 1.42s; } .p-apples li:nth-child(15) { animation-delay: 1.51s; }
.p-apples li:nth-child(16) { animation-delay: 1.6s; } .p-apples li:nth-child(17) { animation-delay: 1.69s; } .p-apples li:nth-child(18) { animation-delay: 1.78s; }
.p-apples li:nth-child(19) { animation-delay: 1.87s; } .p-apples li:nth-child(20) { animation-delay: 1.96s; } .p-apples li:nth-child(21) { animation-delay: 2.05s; }
@keyframes p-grow { from { transform: scale(0) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.p-plate { display: block; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 8px 16px; border-radius: 3px; background: var(--p-label-paper); color: var(--p-ink); box-shadow: 0 0 0 2px var(--p-ink); text-align: center; font-size: .9375rem; line-height: 1.35; }
.p-plate b { font: 400 1.25rem/1 var(--p-display); color: var(--p-red); }

/* ---------- almanac pages ---------- */
.p-alm { position: relative; display: flex; flex-direction: column; background: var(--p-almanac); color: var(--p-txt); border-radius: 4px; box-shadow: 0 0 0 2px var(--p-ink), 6px 6px 0 0 var(--p-rule-strong); overflow: hidden; text-decoration: none; }
.p-alm-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 4px 14px; padding: 18px 18px 14px; background: var(--p-sky); color: var(--p-ink); border-bottom: 2px solid var(--p-ink); }
.p-alm-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--p-red) 0 10px, transparent 10px 18px); }
.p-alm-head::after { content: ""; position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--p-cream); box-shadow: 0 0 0 2px var(--p-ink); }
.p-alm-day { grid-row: 1; font: 400 4.25rem/.82 var(--p-display); color: var(--p-red); }
.p-alm-wd { align-self: end; font: 900 .75rem/1.2 var(--p-text); text-transform: uppercase; letter-spacing: .16em; padding-right: 40px; }
.p-alm-mon { grid-column: 1 / -1; grid-row: auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; font: 400 clamp(1.05rem, 4.6vw, 1.5rem)/1 var(--p-display); }
.p-alm-body { display: grid; gap: 0; padding: 16px 18px 18px; flex: 1;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--p-rule) 27px 28px); background-position: 0 16px; }
.p-alm-body > * { margin: 0; }
.p-alm-body > * + * { margin-top: 28px; }
.p-alm-body h3 { font: 400 1.5rem/28px var(--p-display); }
.p-alm-body p { color: var(--p-sub); line-height: 28px; }
.p-alm-art { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--p-ink); background: var(--p-sky); }
.p-alm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.p-alm .k-badge-state { font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem; }
@media (prefers-color-scheme: dark) {
  .p-alm { box-shadow: 0 0 0 2px #0B1409, 6px 6px 0 0 rgba(0, 0, 0, .45); }
  .p-alm-head { background-color: #16263A; color: #F3E9CF; border-bottom-color: #0B1409; background-image: radial-gradient(circle, rgba(243, 233, 207, .8) 0 1px, transparent 1.4px); background-size: 41px 29px; }
  .p-alm-head::after { background: #F3E9CF; box-shadow: inset -9px -3px 0 0 #CDBF98; }
  .p-alm-day { color: #FF6B78; }
  .p-alm-art { border-bottom-color: #0B1409; }
}
.p-go { display: inline-flex; align-items: center; gap: 4px; font: 900 .8125rem/1.2 var(--p-text); text-transform: uppercase; letter-spacing: .08em; color: var(--p-accent); }
.p-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--p-accent); }

/* Status chips: printed stamps, shape plus label */
.k-app .k-badge { border-radius: 3px; font-weight: 900; letter-spacing: .04em; }
.k-app [data-k-state="ok"] .k-badge-state { background: var(--p-leaf); color: var(--p-cream); }
.k-app [data-k-state="new"] .k-badge-state { background: transparent; color: var(--p-accent); box-shadow: inset 0 0 0 2px currentColor; }
.k-app [data-k-state="active"] .k-badge-state { background: var(--k-warn-soft); color: var(--k-warn); }
.k-app [data-k-state="done"] .k-badge-state { background: var(--k-surface-2); color: var(--p-sub); }
.k-app [data-k-state="off"] .k-badge-state { background: transparent; color: var(--p-sub); text-decoration: line-through; box-shadow: inset 0 0 0 1.5px var(--p-rule-strong); }
@media (prefers-color-scheme: dark) { .k-app [data-k-state="ok"] .k-badge-state { background: #3D7D2A; color: var(--p-cream); } }
.p-badge-leaf { background: var(--p-leaf); color: var(--p-cream); }
.p-badge-req { background: transparent; color: var(--p-accent); box-shadow: inset 0 0 0 2px currentColor; }

/* Replies from the team: a pencilled note */
.p-reply-wrap { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.p-reply-wrap:has(.p-reply:empty) { display: none; }
.p-reply-wrap .k-avatar { width: 28px; height: 28px; background: var(--p-red); }
.p-reply { padding: 10px 14px; border-radius: 3px; background: linear-gradient(rgba(47, 102, 32, .1), rgba(47, 102, 32, .1)), var(--p-almanac); box-shadow: inset 3px 0 0 var(--p-leaf); color: var(--p-txt); font-size: .9375rem; }
.p-reply:empty, .p-msg:empty, .p-note:empty { display: none; }
@media (prefers-color-scheme: dark) { .p-reply { background: linear-gradient(rgba(159, 203, 126, .12), rgba(159, 203, 126, .12)), var(--p-almanac); box-shadow: inset 3px 0 0 #9FCB7E; } }
.p-msg { font-size: .9375rem; white-space: pre-line; }
.p-note { font-style: italic; color: var(--p-sub); }
.p-note::before { content: "Your note: "; font-style: normal; font-weight: 700; }

/* Cards on the page: paper with an ink rule */
.p-card { background: var(--p-surface); border-radius: 4px; box-shadow: 0 0 0 2px var(--p-rule); padding: 20px; }
.p-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.p-card-head h2 { font: 400 1.5rem/1.1 var(--p-display); }
.p-card-head a { display: inline-flex; align-items: center; min-height: 44px; font: 900 .75rem/1 var(--p-text); text-transform: uppercase; letter-spacing: .1em; color: var(--p-accent); text-decoration: none; }
.p-card-flush { padding: 0; overflow: hidden; }
.p-card-flush .p-card-head { padding: 16px 20px 0; }
.p-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.p-rules li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.p-rules .k-i { color: var(--p-green); margin-top: 1px; }
.p-rules li > span { min-width: 0; overflow-wrap: anywhere; }
.p-sec-h { font: 400 clamp(1.6rem, 5vw, 2.25rem)/1.05 var(--p-display); margin-bottom: 14px; }

/* Empty states: an empty crate */
.k-app .k-empty { padding: 28px 18px; }
.k-app .k-empty .k-empty-art { width: 84px; height: 64px; border-radius: 3px; background: url("art/apple-empty.svg") 50% 8px / 30px no-repeat, linear-gradient(180deg, transparent 0 30px, var(--p-wood) 30px 46px, var(--p-wood-dark) 46px 48px, var(--p-wood) 48px 64px); box-shadow: 0 0 0 2px var(--p-ink); color: transparent; }
.k-app .k-empty .k-empty-art .k-i { display: none; }
.k-app .k-empty h3 { font: 400 1.375rem/1.15 var(--p-display); }

/* Forms, sheets, tables */
.k-app .k-sheet { border-radius: 4px; box-shadow: 0 0 0 2px var(--p-ink), 6px 6px 0 0 var(--p-rule-strong); background: var(--p-surface); }
.k-app .k-sheet h2 { font: 400 1.75rem/1.05 var(--p-display); }
.k-app .k-field > label, .k-app .k-label { font: 900 .75rem/1.3 var(--p-text); text-transform: uppercase; letter-spacing: .1em; color: var(--p-sub); }
.k-app :is(input[type="text"], input[type="email"], input[type="number"], input[type="date"], select, textarea) { border-radius: 3px; border: 2px solid var(--p-rule-strong); background-color: var(--p-page); color: var(--p-txt); font-family: var(--p-text); font-size: 1rem; }
.k-app :is(input, select, textarea):focus { border-color: var(--p-accent); box-shadow: 0 0 0 4px var(--k-brand-soft); }
.k-app input::placeholder, .k-app textarea::placeholder { color: var(--p-sub); opacity: 1; }
.k-app .k-table { border-radius: 0; box-shadow: none; background: transparent; }
.k-app .k-thead { color: var(--p-sub); font: 900 .6875rem/1 var(--p-text); text-transform: uppercase; letter-spacing: .12em; border-bottom: 2px solid var(--p-ink); }
.k-app .k-tr + .k-tr { border-top: 1px dashed var(--p-rule-strong); }
.k-app .k-td-main { font-weight: 700; }
.k-app .k-td-main small { display: block; font-weight: 400; color: var(--p-sub); }
.k-app .k-toast, .k-app [data-pl-status] { border-radius: 4px; }
.k-app .k-list { border-radius: 4px; }
.k-app .k-row-title, .k-app .k-row-sub { display: block; white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.k-app .k-tile { border-radius: 4px; background: rgba(181, 14, 42, .1); color: var(--p-accent); }
.k-app .k-tile-dark { background: var(--p-leaf); color: var(--p-cream); }
.k-app .k-tile-gold { background: rgba(176, 122, 71, .22); color: var(--p-wood-dark); }
@media (prefers-color-scheme: dark) { .k-app .k-tile { background: rgba(255, 107, 120, .14); } .k-app .k-tile-gold { background: rgba(176, 122, 71, .25); color: #E9B77E; } }

/* ---------- Home ---------- */
.p-home { align-items: stretch; }
.p-crate-cell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.p-crate-cell .p-crate { padding: 34px 22px 26px; }
.p-crate-links { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; }
.p-next h2, .p-punch h2, .p-appeal h2 { font: 400 1.5rem/1.1 var(--p-display); }
.p-next { display: grid; gap: 12px; align-content: start; }
.p-next > .p-card-head { margin-bottom: 0; }
.p-cancel { font-size: .875rem; }

/* Work days: a stamp strip, apples stamped on the crate */
.p-punch { padding: 22px; border-radius: 4px; background: var(--p-leaf); color: var(--p-cream); box-shadow: 0 0 0 2px var(--p-ink), 6px 6px 0 0 var(--p-rule-strong); }
.p-punch .p-card-head a { color: var(--p-cream); }
.p-punch-n { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.p-punch-n b { font: 400 4rem/.9 var(--p-display); }
.p-punch-n span { font-weight: 700; }
.p-punch-note { margin-top: 10px; font-size: .9375rem; }
.k-app .p-stamps { gap: 6px; margin-top: 14px; }
.k-app .p-stamps li { border: 2px dashed rgba(255, 246, 224, .5); border-radius: 50%; }
.k-app .p-stamps li.on { background: url("art/apple.svg") center 40% / 72% no-repeat, var(--p-cream); box-shadow: 0 0 0 2px var(--p-ink); }
.k-app .p-stamps li.on::before { display: none; }
.k-app .p-stamps li.k-free { border: 2px solid var(--p-cream); background: var(--p-red); box-shadow: 0 0 0 2px var(--p-ink); }
.k-app .p-stamps li.k-free::before { content: attr(data-k-label); color: var(--p-cream); font: 400 .875rem/1 var(--p-display); }
.p-punch .k-scan [data-pl-scan-show], .p-punch .k-scan-quiet[data-pl-sign-in="scan"] [data-pl-scan-show] { background: var(--p-cream); color: var(--p-red); box-shadow: 0 3px 0 var(--p-ink); border-radius: 4px; font: 900 .9375rem/1 var(--p-text); text-transform: uppercase; letter-spacing: .07em; }
@media (prefers-color-scheme: dark) { .p-punch { background: #24391F; box-shadow: 0 0 0 2px #0B1409, 6px 6px 0 0 rgba(0, 0, 0, .45); } }

/* The appeal: 140 trees, a tally of small trees */
.p-appeal-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.p-appeal-top h2 small { display: block; margin-top: 4px; font: 400 .9375rem/1.3 var(--p-text); color: var(--p-sub); }
.p-trees { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); max-width: 720px; gap: 4px; margin: 16px 0 10px; padding: 0; list-style: none; }
.p-trees li { aspect-ratio: 1; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: inset 0 0 0 1.5px var(--p-rule-strong); }
.p-trees li.on { background: var(--p-leaf); box-shadow: none; }
@media (prefers-color-scheme: dark) { .p-trees li.on { background: #9FCB7E; } }
.p-plan-legend, .p-plan-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: .875rem; color: var(--p-sub); }
.p-plan-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; background: var(--p-green); }
.p-plan-legend i.off { background: none; box-shadow: inset 0 0 0 1.5px var(--p-rule-strong); }
.p-plan-foot b { color: var(--p-txt); }
.p-badge { padding: 4px 10px; border-radius: 3px; background: var(--p-leaf); color: var(--p-cream); font: 900 .6875rem/1.2 var(--p-text); text-transform: uppercase; letter-spacing: .1em; }

/* The letter from the director */
.k-app .p-letter, .k-app a.p-alm, .k-app a.p-entry { color: var(--p-txt); }
.p-letter { display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: 4px; background: var(--p-surface); color: var(--p-txt); text-decoration: none; box-shadow: 0 0 0 2px var(--p-rule); border-top: 8px solid var(--p-red); }
.p-letter:hover { box-shadow: 0 0 0 2px var(--p-accent); }
.p-letter-text { font: italic 400 1.125rem/1.55 var(--p-text); }
.p-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 900 .75rem/1.3 var(--p-text); text-transform: uppercase; letter-spacing: .12em; color: var(--p-green); }
.p-sign { display: flex; align-items: center; gap: 12px; font-size: .9375rem; }
.p-sign b { display: block; }
.p-sign .k-avatar { background: var(--p-leaf); color: var(--p-cream); }
.p-item { display: grid; gap: 10px; }
.p-item-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.p-item-main { min-width: 0; }
.p-item-main h3 { font: 400 1.25rem/1.15 var(--p-display); }
.p-item-main p { color: var(--p-sub); font-size: .875rem; }

@media (min-width: 1024px) {
  .p-home .p-crate-cell { grid-column: span 7; }
  .p-home .p-next { grid-column: span 5; }
}

/* ---------- Volunteer ---------- */
.p-sessions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin: 0 -4px; }
.p-sessions > * { scroll-snap-align: start; }
.p-session.p-booked .p-alm-head { background-color: var(--p-booked-bg); }
@media (prefers-color-scheme: dark) { .p-session.p-booked .p-alm-head { background-color: var(--p-booked-bg); } }
.p-swipe { margin: -6px 0 8px; }
@media (min-width: 760px) { .p-sessions { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .p-swipe { display: none; } }
@media (min-width: 1024px) { .p-sessions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-session:hover { box-shadow: 0 0 0 2px var(--p-accent), 6px 6px 0 0 var(--p-rule-strong); }
.p-job-out { font: 400 1.25rem/1.2 var(--p-display); }
.p-slips { display: grid; gap: 16px; }
.p-past { margin-top: 20px; }
.p-pad { padding: 16px 20px; }

/* ---------- Giving: three crate labels ---------- */
.p-levels { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .p-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-level { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 14px; }
.p-level .p-crate { padding: 26px 12px 16px; }
.p-level .p-label { transform: none; }
.p-level .p-apples li { width: 22px; height: 25px; }
.p-level .p-apples { min-height: 54px; align-content: center; }
.p-level-body { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.p-level-body > p { font-size: .9375rem; }
.p-level-body .k-btn, .p-level-body > div:last-child { margin-top: auto; }
.p-level-body .k-btn { width: 100%; justify-content: center; }
.p-yours { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 6px 12px; border-radius: 3px; background: var(--p-leaf); color: var(--p-cream); font: 900 .75rem/1.2 var(--p-text); text-transform: uppercase; letter-spacing: .1em; }
.p-change { font-size: .875rem; color: var(--p-sub); }
.p-friend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 22px; padding: 18px 20px; border-radius: 4px; border: 2px dashed var(--p-rule-strong); }
.p-friend h3 { font: 400 1.5rem/1.1 var(--p-display); }
.p-friend p { color: var(--p-sub); max-width: 60ch; }
.p-stack { display: grid; gap: 12px; align-content: start; }

/* ---------- Updates and the update: almanac entries ---------- */
.p-posts { display: grid; gap: 22px; }
.p-entry { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--p-almanac); border-radius: 4px; box-shadow: 0 0 0 2px var(--p-ink), 6px 6px 0 0 var(--p-rule-strong); overflow: hidden; color: var(--p-txt); text-decoration: none; }
.p-entry-side { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 2px 12px; padding: 14px 18px; background: var(--p-sky); color: var(--p-ink); border-bottom: 2px solid var(--p-ink); }
.p-entry-side b { grid-row: span 2; font: 400 2.75rem/1 var(--p-display); color: var(--p-red); }
.p-entry-side span { font: 900 .75rem/1.2 var(--p-text); text-transform: uppercase; letter-spacing: .14em; }
.p-entry-side em { font: 400 1.125rem/1.1 var(--p-display); font-style: normal; }
.p-entry-body { display: grid; gap: 10px; align-content: start; padding: 18px; }
.p-entry-body h2, .p-entry-body h3 { font: 400 1.5rem/1.12 var(--p-display); }
.p-entry-lead .p-entry-body h2 { font-size: clamp(1.75rem, 5vw, 2.6rem); }
.p-entry img { display: block; width: 100%; height: auto; }
.p-figs { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.p-figs span { font-size: .875rem; color: var(--p-sub); }
.p-figs b { display: block; font: 400 1.6rem/1 var(--p-display); color: var(--p-accent); }
@media (prefers-color-scheme: dark) {
  .p-entry { box-shadow: 0 0 0 2px #0B1409, 6px 6px 0 0 rgba(0, 0, 0, .45); }
  .p-entry-side { background: #16263A; color: #F3E9CF; border-bottom-color: #0B1409; }
  .p-entry-side b { color: #FF6B78; }
}
@media (min-width: 760px) {
  .p-entry { grid-template-columns: 170px minmax(0, 1fr); }
  .p-entry-side { grid-template-columns: 1fr; align-content: start; border-bottom: 0; border-right: 2px solid var(--p-ink); }
  .p-entry-side b { grid-row: auto; font-size: 3.25rem; }
  .p-entry-lead { grid-template-columns: 170px minmax(0, 1.1fr) minmax(0, 1fr); }
  .p-entry:not(.p-entry-lead) { grid-template-rows: auto 1fr; }
  .p-entry:not(.p-entry-lead) .p-entry-side { align-self: start; }
  .p-entry:not(.p-entry-lead) .p-entry-body { grid-column: 2; grid-row: 1 / span 2; }
  .p-entry:not(.p-entry-lead) img { grid-column: 1; grid-row: 2; align-self: stretch; height: 100%; object-fit: cover; border-right: 2px solid var(--p-ink); border-top: 2px solid var(--p-ink); }
  .p-entry-lead img { height: 100%; object-fit: cover; border-left: 2px solid var(--p-ink); }
}
@media (min-width: 1024px) { .p-posts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.p-earlier { font: 400 1.75rem/1.1 var(--p-display); margin-top: 8px; }
.p-article { display: grid; gap: 16px; padding: 0 0 24px; background: var(--p-almanac); border-radius: 4px; box-shadow: 0 0 0 2px var(--p-ink), 6px 6px 0 0 var(--p-rule-strong); overflow: hidden; }
.p-article > :not(.p-entry-side):not(img) { margin-left: 22px; margin-right: 22px; }
.p-article img { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--p-ink); }
.p-article h1 { font: 400 clamp(2rem, 6vw, 3.25rem)/1.02 var(--p-display); }
.p-article h2 { font: 400 1.5rem/1.15 var(--p-display); margin-top: 8px; }
.p-article ul { padding-left: 1.2em; display: grid; gap: 8px; }
.p-article p { max-width: 66ch; }
.p-article .k-list { background: transparent; box-shadow: none; }
.p-article .k-row { border-bottom: 1px dashed var(--p-rule-strong); }
@media (prefers-color-scheme: dark) { .p-article { box-shadow: 0 0 0 2px #0B1409, 6px 6px 0 0 rgba(0, 0, 0, .45); } }
.k-app .k-bar { height: 14px; border-radius: 2px; background: var(--k-surface-2); box-shadow: inset 0 0 0 2px var(--p-ink); overflow: hidden; }
.k-app .k-bar > i { background: repeating-linear-gradient(90deg, var(--p-red) 0 12px, var(--p-red-deep) 12px 14px); }

/* ---------- Card: the volunteer card as a small crate label ---------- */
.p-vcard { display: grid; gap: 0; }
.p-vcard .p-label { max-width: none; transform: none; padding-bottom: 18px; }
.p-vcard .p-label-band { margin-bottom: 14px; }
.p-vcard .p-punch-n { justify-content: center; color: var(--p-ink); }
.p-vcard .p-punch-n b { color: var(--p-red); }
.p-vcard .p-stamps li:not(.on):not(.k-free) { border-color: var(--p-wood); }
.p-vcard .p-stamps li.on { box-shadow: 0 0 0 2px var(--p-ink); }
.p-vcard .p-punch-note { text-align: center; color: var(--p-ink); }
.p-vcard .k-scan [data-pl-scan-show] { background: var(--p-red); color: var(--p-cream); box-shadow: 0 3px 0 var(--p-ink); border-radius: 4px; font: 900 .9375rem/1 var(--p-text); text-transform: uppercase; letter-spacing: .07em; }
.p-vcard .k-scan [data-pl-scan-demo] { border-radius: 4px; color: var(--p-ink); }
.p-vcard .k-scan [data-pl-scan-code]:not([hidden]) { border-radius: 4px; box-shadow: 0 0 0 2px var(--p-ink); }
.p-vcard .k-scan [data-pl-scan-status], .p-vcard .k-scan { color: var(--p-ink); }
.p-vcard-body { padding: 0 8px; }
.p-vcard .p-arch { margin-bottom: 6px; }
@media (max-width: 600px) { .k-app .p-stamps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- Account ---------- */
.p-member { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.p-member .p-label { max-width: none; transform: none; padding-bottom: 0; }
.p-member-name { font: 400 clamp(2rem, 8vw, 2.75rem)/1 var(--p-display); text-align: center; color: var(--p-ink); padding: 4px 0 10px; overflow-wrap: anywhere; }
.k-app .k-account > p:first-child, .k-app .k-account ul, .k-app .k-account form:last-of-type:has(input[type="checkbox"]), .k-app .k-account > form:not(:has(input:not([type="hidden"]), select, textarea)) > button { border-radius: 4px; box-shadow: 0 0 0 2px var(--p-rule); background: var(--p-surface); }
.k-app .k-account h3 { margin-top: 24px; font: 900 .75rem/1.3 var(--p-text); text-transform: uppercase; letter-spacing: .12em; color: var(--p-sub); }
.k-app .k-account button { border-radius: 4px; font-family: var(--p-text); font-weight: 700; }
.p-contact-tip { margin-top: 14px; font-size: .875rem; color: var(--p-sub); }
.p-member-links { background: var(--p-surface); box-shadow: 0 0 0 2px var(--p-rule); }
@media (min-width: 1024px) {
  .p-acct { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: start; }
  .p-acct > .p-member { grid-column: 1; grid-row: 1; }
  .p-acct > .p-acct-side { grid-column: 2; grid-row: 1; }
  .p-acct-side { display: grid; gap: 14px; align-content: start; }
  .p-acct .p-acct-side > * { grid-column: 1 / -1; }
}

/* ---------- Signed out: the welcome as a crate end ---------- */
.k-app .k-welcome { gap: 22px; padding-top: 6px; }
.k-app .k-welcome-art { aspect-ratio: auto; border-radius: 4px; overflow: visible; box-shadow: none; background: none; }
.k-app .k-welcome-art::after { display: none; }
.k-app .k-welcome-art img { height: auto; object-fit: contain; }
.k-app .k-welcome-art .p-crate { padding: 30px 18px 22px; }
.k-app .k-welcome h1 { font: 400 clamp(2.3rem, 9vw, 4.2rem)/.98 var(--p-display); letter-spacing: 0; color: var(--p-txt); }
.k-app .k-welcome .k-kicker { color: var(--p-green); font: 900 .75rem/1.3 var(--p-text); text-transform: uppercase; letter-spacing: .14em; }
.k-app .k-welcome .k-lead { color: var(--p-sub); }
.k-app .k-perks li { font-weight: 700; }
@media (min-width: 1024px) {
  .k-app .k-welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding-top: 40px; }
}

/* ---------- reduced motion: nothing grows, the kit's own motion stops too ---------- */
@media (prefers-reduced-motion: reduce) {
  .k-app *, .k-app *::before, .k-app *::after { animation: none !important; transition: none !important; }
  .p-apples li { opacity: 1; transform: none; }
}

/* =====================================================================
   Public page and privacy notice: an apple-red poster
   ===================================================================== */
body.k-app.p-pub { display: block; }
.p-pub { --p-wrap: 1240px; --p-pad: max(16px, calc((100vw - var(--p-wrap)) / 2)); }
.p-pub .k-top { position: static; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px 22px; padding: 14px var(--p-pad); background: var(--p-red); color: var(--p-cream); border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.p-pub .k-top .k-brand { display: flex; min-width: 0; flex: 1 1 auto; font-size: 1.125rem; }
/* The name wraps between words, never inside one ("Brooksid / e" at 375). */
.p-pub .k-top .k-brand span { overflow-wrap: break-word; }
@media (max-width: 419px) { .p-pub .k-top { gap: 10px 12px; } .p-pub .k-top .k-brand { font-size: 1rem; } .p-pub .k-top .k-btn { padding: 0 12px; } }
@media (max-width: 359px) { .p-pub .k-top { gap: 8px; } .p-pub .k-top .k-brand { gap: 8px; font-size: .875rem; } .p-pub .k-top .k-btn { padding: 0 9px; letter-spacing: .04em; } }
.p-nav { display: none; gap: 4px 22px; }
.p-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--p-cream); font: 900 .8125rem/1 var(--p-text); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.p-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.p-pub .k-top-end { margin-left: auto; display: flex; gap: 8px; }
.p-pub .k-top .k-btn { min-height: 36px; }
.p-pub .k-top .k-btn-line { color: var(--p-cream); }
.p-pub .k-top .p-give { background: var(--p-cream); color: var(--p-red); }
@media (min-width: 900px) { .p-nav { display: flex; } .p-pub .k-top { flex-wrap: wrap; } }
.p-main { display: block; }
.p-wrap { width: 100%; max-width: var(--p-wrap); margin: 0 auto; padding: 0 16px; }

/* the poster */
.p-poster { position: relative; background: var(--p-red); color: var(--p-cream); padding: 28px 0 0; overflow: hidden;
  background-image: repeating-conic-gradient(from 0deg at 78% 105%, rgba(255, 246, 224, .07) 0 4deg, transparent 4deg 12deg); }
.p-poster-grid { display: grid; gap: 28px; }
.p-poster .p-k { color: var(--p-cream); }
.p-poster h1 { margin-top: 12px; font: 400 clamp(3rem, 15vw, 8.5rem)/.9 var(--p-display); letter-spacing: -.005em; text-shadow: 5px 5px 0 var(--p-ink); text-wrap: balance; }
.p-poster h1 span { display: block; color: var(--p-sky); }
.p-poster-lead { margin-top: 18px; max-width: 46ch; font-size: 1.125rem; line-height: 1.5; }
.p-poster .k-btn-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.p-poster .k-btn { background: var(--p-cream); color: var(--p-red); }
.p-poster .k-btn:hover { background: #fff; }
.p-poster .k-btn-line { background: transparent; color: var(--p-cream); }
.p-poster .k-btn-line:hover { background: rgba(255, 246, 224, .1); }
.p-poster-help { margin-top: 12px; font-size: .9375rem; opacity: .95; }
.p-poster-crate { position: relative; padding-bottom: 48px; }
.p-poster-crate .p-crate { padding: 36px 20px 26px; border-radius: 6px 6px 0 0; }
.p-poster-crate .p-label { max-width: 480px; }
.p-poster-crate .p-plate { font-size: 1rem; }
@media (min-width: 1024px) {
  .p-poster { padding-top: 56px; }
  .p-poster-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: end; gap: 48px; }
  .p-poster-text { padding-bottom: 64px; }
  .p-poster h1 { font-size: min(9.4vw, 8.4rem); }
  .p-poster-crate .p-crate { padding: 44px 34px 34px; }
}
@media (prefers-color-scheme: dark) {
  .p-poster { background-color: #7E1424; }
  .p-pub .k-top { background: #7E1424; }
}

/* sections */
.p-sec { padding: 56px 0; }
.p-sec-cream { background: var(--p-page); }
.p-sec-leaf { background: var(--p-leaf); color: var(--p-cream); }
.p-sec-sky { position: relative; background: var(--p-band); color: var(--p-band-ink); padding-top: 64px; }
.p-sec-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; background: var(--p-page); -webkit-mask: url("art/hills.svg") left bottom / 600px 40px repeat-x; mask: url("art/hills.svg") left bottom / 600px 40px repeat-x; }
@media (prefers-color-scheme: dark) {
  .p-sec-leaf { background: #1B3315; }
  .p-sec-sky { background-image: radial-gradient(circle, rgba(243, 233, 207, .9) 0 1.2px, transparent 1.6px); background-size: 97px 61px; }
}
.p-eyebrow { font: 900 .75rem/1.3 var(--p-text); text-transform: uppercase; letter-spacing: .16em; color: var(--p-green); }
.p-sec-leaf .p-eyebrow { color: var(--p-sky); }
.p-sec-sky .p-eyebrow { color: var(--p-band-kick); }
.p-h2 { margin-top: 8px; font: 400 clamp(2.2rem, 7vw, 4.25rem)/.98 var(--p-display); max-width: 18ch; text-wrap: balance; }
.p-intro { margin-top: 14px; max-width: 58ch; font-size: 1.0625rem; color: var(--p-sub); }
.p-sec-leaf .p-intro, .p-sec-sky .p-intro { color: inherit; }

/* the app at real size: phone screens */
.p-screens { display: grid; gap: 28px; margin-top: 32px; justify-items: center; }
@media (min-width: 1024px) { .p-screens { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.p-phone { width: 100%; max-width: 340px; margin: 0 auto; border-radius: 28px; padding: 10px; background: var(--p-ink); box-shadow: var(--p-lift); }
.p-phone-in { border-radius: 20px; overflow: hidden; background: var(--p-page); color: var(--p-txt); }
.p-phone-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--p-leaf); color: var(--p-cream); font: 400 .9375rem/1 var(--p-display); }
.p-phone-bar img { border-radius: 4px; }
.p-phone-sky { position: relative; padding: 14px 14px 30px; background: var(--p-band); color: var(--p-band-ink); }
.p-phone-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; background: var(--p-page); -webkit-mask: url("art/hills.svg") left bottom / 300px 22px repeat-x; mask: url("art/hills.svg") left bottom / 300px 22px repeat-x; }
.p-phone-sky b { display: block; font: 400 1.5rem/1 var(--p-display); }
.p-phone-sky span { font: 900 .625rem/1.3 var(--p-text); text-transform: uppercase; letter-spacing: .14em; color: var(--p-band-kick); }
.p-phone-body { display: grid; gap: 12px; padding: 12px 14px 18px; }
.p-phone-body .p-crate { padding: 22px 12px 14px; }
.p-phone-body .p-label { border-width: 7px; }
.p-phone-body .p-label-lv { font-size: 2.4rem; }
.p-phone-body .p-apples { gap: 4px; }
.p-phone-body .p-apples li { width: 22px; height: 25px; }
.p-phone-body .p-alm-day { font-size: 3.25rem; }
.p-phone-body .p-alm-body h3 { font-size: 1.25rem; }
.p-phone-cap { margin-top: 12px; text-align: center; font-weight: 700; max-width: 34ch; margin-left: auto; margin-right: auto; }
.p-phone-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 4px; background: var(--p-red); color: var(--p-cream); box-shadow: 0 3px 0 var(--p-ink); font: 900 .8125rem/1 var(--p-text); text-transform: uppercase; letter-spacing: .07em; }
.p-phone-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.p-phone-stamps li { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--p-wood); }
.p-phone-stamps li.on { border: 0; background: url("art/apple.svg") center 40% / 70% no-repeat, var(--p-cream); box-shadow: 0 0 0 2px var(--p-ink); }
.p-phone-stamps li.free { border: 0; background: var(--p-red); box-shadow: 0 0 0 2px var(--p-ink); display: grid; place-items: center; color: var(--p-cream); font: 400 .875rem/1 var(--p-display); }

/* numbers band */
.p-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
@media (min-width: 900px) { .p-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-proof > div { min-width: 0; border-top: 3px solid var(--p-cream); padding-top: 12px; }
.p-proof b { display: block; white-space: normal; overflow-wrap: anywhere; font: 400 clamp(1.9rem, 4.6vw, 3.75rem)/.95 var(--p-display); }
.p-proof span { display: block; margin-top: 6px; font-weight: 700; }

/* public levels */
.p-pub .p-levels { margin-top: 32px; }
.p-pub-friend { margin-top: 24px; }

/* almanac year on the public page */
.p-year { display: grid; gap: 22px; margin-top: 32px; }
@media (min-width: 760px) { .p-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .p-year { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-year .p-alm-day { font-size: 2.6rem; }
.p-sat { display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 1024px) { .p-sat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px; } }
.p-sat .p-rules .k-i { color: var(--p-green); }

/* one-off gift and money */
.p-give-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .p-give-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; } }
.p-oneoff { padding: 24px; border-radius: 4px; background: var(--p-surface); box-shadow: 0 0 0 2px var(--p-ink), 6px 6px 0 0 var(--p-rule-strong); display: grid; gap: 14px; }
.p-oneoff h2 { font: 400 clamp(1.75rem, 5vw, 2.5rem)/1.02 var(--p-display); }
.p-pay-form { display: grid; gap: 10px; }
.p-pay-form label { font: 900 .75rem/1.3 var(--p-text); text-transform: uppercase; letter-spacing: .1em; color: var(--p-sub); }
.p-pay-form button { min-height: 52px; border: 0; border-radius: 4px; background: var(--p-red); color: var(--p-cream); box-shadow: 0 3px 0 var(--p-ink); font: 900 .9375rem/1 var(--p-text); text-transform: uppercase; letter-spacing: .07em; cursor: pointer; }
.p-money { display: grid; gap: 0; margin-top: 18px; }
.p-money-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px dashed var(--p-rule-strong); }
.p-money-row b { min-width: 0; overflow-wrap: anywhere; text-align: right; font: 400 1.5rem/1 var(--p-display); color: var(--p-accent); }
.p-money-row small { grid-column: 1 / -1; display: block; height: 10px; border-radius: 2px; background: var(--k-surface-2); box-shadow: inset 0 0 0 1.5px var(--p-rule-strong); overflow: hidden; }
.p-money-row small i { display: block; height: 100%; background: var(--p-leaf); }
@media (prefers-color-scheme: dark) { .p-money-row small i { background: #9FCB7E; } }
.p-w26 { width: 26%; } .p-w24 { width: 24%; } .p-w18 { width: 18%; } .p-w15 { width: 15%; } .p-w10 { width: 10%; } .p-w7 { width: 7%; }
.p-money-sub { font-size: .875rem; color: var(--p-sub); }

/* sign-in band */
.p-signin { background: var(--p-leaf); color: var(--p-cream); padding: 48px 0; }
.p-signin .p-wrap { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .p-signin .p-wrap { grid-template-columns: minmax(0, 1fr) auto; } }
.p-signin h2 { font: 400 clamp(2rem, 6vw, 3.5rem)/1 var(--p-display); }
.p-signin p { margin-top: 8px; max-width: 52ch; }
.p-signin .k-btn { background: var(--p-cream); color: var(--p-red); }
.p-signin .k-btn:hover { background: var(--p-red-deep); color: var(--p-cream); }
@media (prefers-color-scheme: dark) { .p-signin { background: #1B3315; } }

/* footer */
.p-pub-foot { display: grid; gap: 24px; padding: 40px var(--p-pad) 48px; background: var(--p-ink); color: #EFE3C8; }
@media (min-width: 900px) { .p-pub-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-pub-foot h2 { font: 400 1.25rem/1.1 var(--p-display); color: var(--p-cream); margin-bottom: 8px; }
.p-pub-foot a { color: var(--p-footer-link); }
.p-pub-foot p { font-size: .9375rem; }
@media (prefers-color-scheme: dark) { .p-pub-foot { background: #0B1409; } }

/* privacy */
.p-prose { max-width: 760px; margin: 0 auto; padding: 40px 16px 64px; }
.p-prose h1 { font: 400 clamp(2.4rem, 8vw, 4rem)/1 var(--p-display); margin-bottom: 18px; }
.p-prose h2 { font: 400 1.5rem/1.15 var(--p-display); margin: 28px 0 8px; }
.p-prose p, .p-prose li { margin-top: 8px; max-width: 68ch; }
.p-prose ul { padding-left: 1.2em; }
.p-prose .blank { padding: 0 4px; border-radius: 2px; background: rgba(181, 14, 42, .14); color: var(--p-txt); font-weight: 700; }
.p-tip { padding: 12px 16px; border-radius: 4px; background: var(--p-sky); color: var(--p-ink); box-shadow: inset 4px 0 0 var(--p-leaf); }
@media (prefers-color-scheme: dark) { .p-prose .blank { background: rgba(255, 107, 120, .2); } .p-tip { background: #16263A; color: #F3E9CF; } }

/* small helpers */
.p-center { text-align: center; }
.p-gap { margin-top: 16px; }
.p-gap-s { margin-top: 8px; }
.p-two { display: grid; gap: 20px; }
@media (min-width: 760px) { .p-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-two .p-card { display: flex; flex-direction: column; }
.p-two .p-card .k-btn { margin-top: auto; }
.p-two .p-card p { margin-bottom: 16px; }
.p-crate-cell .p-two { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.p-pays { margin-top: 8px; font: 400 1.375rem/1.3 var(--p-display); max-width: 34ch; }
.p-money-pc { display: block; font-size: .8125rem; color: var(--p-sub); }
.p-levels-sec { margin-top: 24px; }

/* round 3 fixes */
.p-screens > figure { width: 100%; }
.k-app #book > .k-help { margin-bottom: 16px; }
.p-app .p-level .p-label { max-width: 300px; }
.k-app .p-table-stamps { --k-cols: 126px minmax(0, 1fr) 56px; }
@media (prefers-color-scheme: dark) { .p-sky, .p-alm-head, .p-sec-sky { background-image: none; } }

/* ---------- round 4 fixes ---------- */
/* failed member-form status: the kit's error line sits on the green hero band, so it takes the band's light ink */
.k-app [data-pl-status][data-state="error"]:not(:empty)::after { color: var(--k-hero-ink); }
/* long member-entered strings wrap inside their cards at 320-375px */
.p-reply, .p-msg { min-width: 0; overflow-wrap: anywhere; }
/* home: the next Saturday stays on the same row as its link; the heading wraps, the link does not */
.p-next > .p-card-head { flex-wrap: nowrap; align-items: baseline; }
.p-next > .p-card-head h2 { min-width: 0; }
.p-next > .p-card-head a { flex-shrink: 0; white-space: nowrap; }
.p-next-stamp { font-size: .9375rem; color: inherit; }
/* the card page: the two wallet passes side by side, slimmer */
.k-app .p-vcard [data-pl-wallet] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-app .p-vcard [data-pl-wallet] button { min-height: 40px; }
/* small phones: ten apples fit one row */
@media (max-width: 480px) { .p-tally .p-apples li, .p-phone-body .p-apples li { width: 22px; height: 25px; } }
/* giving: Friend is a plain crate-end strip at full row width */
#level-friend { border: 10px solid var(--p-wood); border-radius: 4px; background: var(--p-label-paper); color: var(--p-ink); box-shadow: inset 0 0 0 2px var(--p-ink), 0 0 0 2px var(--p-ink); padding: 18px 22px; }
#level-friend h3 { font: 400 1.75rem/1 var(--p-display); text-transform: uppercase; color: var(--p-red); }
#level-friend p { color: var(--p-ink); }