/* ==========================================================================
   Gnosall St Lawrence PSFA
   Palette carried over from the printed newsletter: school-jumper maroon,
   dusky rose, teal and mustard, on blush paper. The arch — shelter, roofline,
   the years a child passes through — is the one structural idea, used for the
   logo, the hero, and every section marker.
   ========================================================================== */

:root {
  --maroon: #6b1e33;
  --maroon-deep: #4c1424;
  --rose: #c98490;
  --rose-soft: #ecc9ce;
  --rose-wash: #f7e7e7;
  --teal: #2e6f73;
  --teal-deep: #204d50;
  --teal-wash: #e2eeed;
  --mustard: #d9a227;
  --mustard-soft: #f4e2b4;
  --mustard-wash: #fbf2dd;

  --paper: #fbf6f5;
  --paper-2: #f4e9e7;
  --card: #ffffff;
  --ink: #2a1f22;
  --ink-soft: #6b5c60;
  --line: #e6d5d2;

  --focus: var(--teal);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Karla", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 68rem;
  --wrap-narrow: 44rem;
  --radius: 14px;
  --radius-sm: 9px;

  --shadow: 0 1px 2px rgba(76, 20, 36, .06), 0 8px 24px -12px rgba(76, 20, 36, .22);
  --shadow-lg: 0 2px 4px rgba(76, 20, 36, .07), 0 22px 48px -20px rgba(76, 20, 36, .3);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--maroon);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 6vw, 3.6rem); line-height: 1.03; letter-spacing: -.025em; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.0625rem; font-family: var(--body); font-weight: 700; letter-spacing: 0; }

p, ul, ol { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: .4em; }
li::marker { color: var(--rose); }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--maroon); }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--maroon); color: #fff; padding: .8rem 1.2rem; z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the arch mark ---------- */

.mark { display: block; flex: none; }
/* On the maroon header and footer the mark's own maroon baseline disappears,
   which leaves the arches floating. Swap it for something that reads. */
.site-header .mark__ground,
.admin-header .mark__ground { fill: #f0dcdf; }
.site-footer .mark__ground { fill: #c98490; }
.mark--eyebrow { width: 20px; height: 12px; color: inherit; margin-top: .32em; }
.mark--brand { width: 39px; height: 39px; }
.mark--footer { width: 40px; height: 40px; margin-bottom: .7rem; }

.eyebrow {
  /* flex-start keeps the arch on the first line when the label wraps; the
     margin below re-centres it against that line. */
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--teal-deep);
  margin: 0 0 1rem;
}

/* ---------- header ---------- */

.site-header { background: var(--maroon); color: #fff; --focus: var(--mustard); }

.site-header__inner {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end;
  gap: clamp(.6rem, 1.4vw, 1.2rem);
  min-height: 72px; padding-block: .7rem;
}

.brand {
  display: flex; align-items: center; gap: .65rem; text-decoration: none;
  color: #fff; margin-right: auto;
  flex: none;           /* never shrink to make room for the nav */
  white-space: nowrap;  /* "St Lawrence" must never break across two lines */
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
/* PSFA is what the site is actually for, so it is the one that carries the
   weight. The village and the school name sit above it as quiet context, and
   the whole block stays about as wide as "St Lawrence" so the header still
   fits a phone. */
.brand__place {
  font-size: .58rem; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: var(--rose-soft); margin-bottom: .22rem;
}
.brand__name {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--rose-soft); margin-bottom: .18rem;
}
.brand__sub {
  font-family: var(--display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: .04em; color: #fff;
}
.brand:hover { color: #fff; }
.brand:hover .brand__place, .brand:hover .brand__name { color: var(--mustard-soft); }

.site-nav { display: flex; gap: clamp(.5rem, 1vw, .85rem); }
.site-nav--wide { flex-wrap: nowrap; }
.site-nav a {
  color: #f6e6e8; text-decoration: none; white-space: nowrap;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #fff; border-bottom-color: var(--rose); }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--mustard); }

.site-header__actions { display: flex; align-items: center; gap: .6rem; }

.basket-pill {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  background: rgba(255, 255, 255, .13); color: #fff; text-decoration: none;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .48rem .7rem; border-radius: 999px;
}
.basket-pill__icon { width: 15px; height: 15px; flex: none; }
/* The word costs ~79px of a header that has none to spare; the aria-label on
   the link says "Reserving N items" for anyone who cannot see the icon. */
.basket-pill__label { display: none; }
.basket-pill__count {
  background: var(--mustard); color: var(--maroon-deep);
  border-radius: 999px; padding: 0 .42rem; min-width: 1.35em; text-align: center;
}
.basket-pill:hover { background: rgba(255, 255, 255, .22); color: #fff; }


/* mobile menu, built on <details> so it works without JavaScript */
.nav-toggle { display: none; position: relative; }
.nav-toggle > summary {
  list-style: none; cursor: pointer;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; padding: .55rem .85rem;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary { display: flex; align-items: center; gap: .45rem; }
.nav-toggle__icon { display: none; width: 16px; height: 12px; fill: currentColor; }
.nav-toggle[open] > summary { background: rgba(255, 255, 255, .14); }
.site-nav--drawer {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 40;
  flex-direction: column; gap: 0; min-width: 14rem;
  background: var(--maroon-deep); border-radius: var(--radius); padding: .5rem;
  box-shadow: var(--shadow-lg);
}
.site-nav--drawer a { padding: .7rem .8rem; border-bottom: 0; border-radius: var(--radius-sm); }
.site-nav--drawer a:hover, .site-nav--drawer a[aria-current="page"] {
  background: rgba(255, 255, 255, .1); border-bottom: 0;
}

/* The full nav, a basket pill and Donate need roughly 1120px together. Below
   that, fall back to the drawer rather than let the header wrap. */
@media (max-width: 72rem) {
  .site-nav--wide { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--body); font-size: .9rem; font-weight: 700;
  letter-spacing: .02em; text-decoration: none; text-align: center;
  padding: .78rem 1.35rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .12s ease, background-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn__ext { font-size: .85em; opacity: .75; }

.btn--primary { background: var(--maroon); color: #fff; }
.btn--primary:hover { background: var(--maroon-deep); color: #fff; }

.btn--secondary { background: transparent; color: var(--maroon); border-color: var(--rose); }
.btn--secondary:hover { background: var(--rose-wash); color: var(--maroon); border-color: var(--maroon); }

.btn--donate { background: var(--mustard); color: var(--maroon-deep); }
.btn--donate:hover { background: var(--mustard-soft); color: var(--maroon-deep); }

.btn--teal { background: var(--teal); color: #fff; }
.btn--teal:hover { background: var(--teal-deep); color: #fff; }

.btn--ghost { background: transparent; color: var(--teal-deep); border-color: var(--line); padding: .55rem 1rem; font-size: .82rem; }
.btn--ghost:hover { background: var(--teal-wash); color: var(--teal-deep); }

.btn--small { padding: .5rem 1rem; font-size: .8rem; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- the hero arch ---------- */
/* Nested padding builds the coloured bands, so they stay concentric at every
   width without any fixed sizes. */

.hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }

.arch {
  --band: clamp(7px, 1.4vw, 15px);
  --curve: clamp(80px, 19vw, 200px);
  max-width: 50rem; margin-inline: auto;
  padding: var(--band) var(--band) 0; background: var(--rose);
  border-radius: 50% 50% 0 0 / var(--curve) var(--curve) 0 0;
}
.arch__2 {
  padding: var(--band) var(--band) 0; background: var(--teal);
  border-radius: 50% 50% 0 0 / calc(var(--curve) - var(--band)) calc(var(--curve) - var(--band)) 0 0;
}
.arch__3 {
  padding: var(--band) var(--band) 0; background: var(--mustard);
  border-radius: 50% 50% 0 0 / calc(var(--curve) - var(--band) * 2) calc(var(--curve) - var(--band) * 2) 0 0;
}
.arch__core {
  background: var(--card);
  border-radius: 50% 50% 0 0 / calc(var(--curve) - var(--band) * 3) calc(var(--curve) - var(--band) * 3) 0 0;
  padding: calc(var(--curve) * .66 + .5rem) clamp(1.25rem, 5vw, 3.25rem) clamp(2.25rem, 5vw, 3.25rem);
  text-align: center;
}
/* The archway stands on a line of ground, like the mark it comes from. */
.hero__ground {
  max-width: 50rem; margin: 0 auto;
  height: clamp(8px, 1.5vw, 14px); background: var(--maroon);
  border-radius: 0 0 6px 6px;
}

.hero .eyebrow { justify-content: center; }
.hero h1 { margin-bottom: .45em; }
.hero .lede { max-width: 34rem; margin-inline: auto; }
.hero .btn-row { justify-content: center; margin-top: 1.75rem; }

.lede { font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.6; color: var(--ink); }
.lede p:last-child { margin-bottom: 0; }

/* ---------- generic sections ---------- */

.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section > .wrap > :last-child { margin-bottom: 0; }

.band { background: var(--paper-2); }
.band--teal { background: var(--teal); color: #eaf4f3; --focus: var(--mustard); }
.band--teal h2, .band--teal h3 { color: #fff; }
/* Buttons carry their own colours — excluding them here stops the band's link
   colour landing mustard-on-mustard. */
.band--teal a:not(.btn) { color: var(--mustard-soft); }
.band--teal .eyebrow { color: var(--mustard-soft); }
.band--teal p, .band--teal li, .band--teal .lede, .band--teal .field__help { color: #eaf4f3; }
.band--teal .prose ul li::before { background: var(--mustard-soft); }
.band--rose { background: var(--rose-wash); }
.band--mustard { background: var(--mustard-wash); }

.page-head { padding: clamp(2.25rem, 5vw, 3.75rem) 0 clamp(1.25rem, 3vw, 2rem); }
.page-head .lede { margin-top: .85rem; }

.prose > :last-child { margin-bottom: 0; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 7px; background: var(--rose);
  border-radius: 6px 6px 0 0;
}

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-title h2 { margin-bottom: .6rem; }

/* ---------- cards ---------- */

.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 2.4vw, 1.75rem); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-soft); }
.card__more { margin-top: auto; padding-top: .9rem; font-weight: 700; font-size: .85rem; }

/* The arch reappears as a card top-edge, tinted by position. */
.card--arch { position: relative; padding-top: calc(clamp(1.25rem, 2.4vw, 1.75rem) + .5rem); overflow: hidden; }
.card--arch::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--rose);
}
.card--arch:nth-child(3n+2)::before { background: var(--teal); }
.card--arch:nth-child(3n+3)::before { background: var(--mustard); }

/* ---------- home ---------- */

.shelter { max-width: 42rem; }

.facebook-strip { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 44rem) { .facebook-strip { grid-template-columns: 1fr auto; } }

/* ---------- donate ---------- */

.donate-block {
  background: var(--card); border: 2px solid var(--mustard); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow);
}
.donate-block > :last-child { margin-bottom: 0; }
.donate-pending {
  background: var(--mustard-wash); border-radius: var(--radius-sm);
  padding: 1rem 1.15rem; margin-bottom: 0;
}

/* ---------- events ---------- */

.event-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.event {
  display: grid; gap: .35rem 1.5rem; background: var(--card);
  border: 1px solid var(--line); border-left: 5px solid var(--rose);
  border-radius: var(--radius); padding: 1.15rem clamp(1.1rem, 2.5vw, 1.6rem);
}
/* A stack on a phone. From 40rem the date moves into its own column, and
   from 48rem there is room for a third one holding "Add to my calendar". */
@media (min-width: 40rem) { .event { grid-template-columns: 9.5rem 1fr; } }
@media (min-width: 48rem) { .event { grid-template-columns: 9.5rem 1fr auto; } }
.event:nth-child(3n+2) { border-left-color: var(--teal); }
.event:nth-child(3n+3) { border-left-color: var(--mustard); }
.event__when {
  font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal-deep); padding-top: .2rem;
}
.event__when span { display: block; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }
.event__body > :last-child { margin-bottom: 0; }
.event__body h3 { margin-bottom: .25rem; }
.event__meta { font-size: .88rem; color: var(--ink-soft); margin-bottom: .4rem; }
/* On a phone this is the last thing in the card and spans the full width, so
   it is an easy thumb target. On a middling screen it tucks under the details
   rather than dropping into the narrow date column. On a wide one it sits out
   to the right, level with the event title. */
.event__action { align-self: start; padding-top: .9rem; }
.event__action .btn { width: 100%; }
@media (min-width: 40rem) {
  .event__action { grid-column: 2; }
  .event__action .btn { width: auto; }
}
@media (min-width: 48rem) {
  .event__action { grid-column: 3; padding-top: .1rem; }
  .event__action .btn { white-space: nowrap; }
}

/* ---------- what we fund ---------- */

.fund-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 1.75rem;
}
.fund-total__figure { font-family: var(--display); font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 700; color: var(--maroon); line-height: 1; }
.fund-total__label { font-size: .95rem; color: var(--ink-soft); }

.fund-columns { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) { .fund-columns { grid-template-columns: 1.4fr 1fr; align-items: start; } }

.fund-group { margin-bottom: 1.75rem; }
.fund-group:last-child { margin-bottom: 0; }
.fund-group h3 {
  font-family: var(--body); font-size: .78rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--teal-deep);
  padding-bottom: .5rem; border-bottom: 2px solid var(--rose-soft); margin-bottom: .9rem;
}
.fund-list { list-style: none; padding: 0; margin: 0; }
.fund-list li { display: flex; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.fund-list li:last-child { border-bottom: 0; }
.fund-list li::before {
  content: ""; flex: none; width: 14px; height: 8px; margin-top: .5em;
  background: var(--mustard); border-radius: 7px 7px 0 0;
}
.fund-list strong { display: block; }
.fund-list span { color: var(--ink-soft); font-size: .92rem; }

.source-list { list-style: none; padding: 0; margin: 0; }
.source-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.source-list li:last-child { border-bottom: 0; }
.source-list b { font-variant-numeric: tabular-nums; color: var(--maroon); font-weight: 700; }
.source-list em { display: block; font-style: normal; font-size: .85rem; color: var(--ink-soft); }

.year-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }

/* ---------- uniform shop ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end; margin-bottom: 1.75rem; }
.filter-group { display: flex; flex-direction: column; gap: .45rem; }
.filter-group__label { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-block; text-decoration: none; font-size: .82rem; font-weight: 600;
  padding: .42rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.chip:hover { border-color: var(--rose); color: var(--maroon); }
.chip[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: #fff; }

.stock-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

.stock-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.stock-card__photo { aspect-ratio: 4 / 5; background: var(--paper-2); position: relative; }
.stock-card__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Without a photo the 4:5 frame is a lot of empty space, so shrink it. */
.stock-card__photo--empty { aspect-ratio: 5 / 2; }
.stock-card__placeholder {
  display: grid; place-items: center; align-content: center; gap: .5rem; height: 100%;
}
.stock-card__placeholder .mark { width: 34px; height: 34px; opacity: .45; }
.stock-card__placeholder span {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); opacity: .75;
}

/* The size, set like the label sewn into a jumper collar. */
.stock-card__size {
  background: var(--maroon); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  padding: .45rem .95rem;
}
.stock-card__body { padding: .95rem 1.05rem 1.15rem; display: flex; flex-direction: column; flex: 1; gap: .3rem; }
.stock-card__name { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--maroon); margin: 0; }
.stock-card__price { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.stock-card__price b { color: var(--ink); font-weight: 700; }
.stock-card__stock {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 600; color: var(--teal-deep); margin: .15rem 0 .75rem;
}
.stock-card__stock::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--teal); }
.stock-card__stock--low { color: #8a5a12; }
.stock-card__stock--low::before { background: var(--mustard); }
.stock-card__stock--none { color: var(--ink-soft); }
.stock-card__stock--none::before { background: var(--line); }
.stock-card__notes { font-size: .86rem; color: var(--ink-soft); margin: 0 0 .75rem; }
.stock-card form { margin-top: auto; display: flex; gap: .5rem; align-items: center; }
.stock-card select { flex: none; width: 4.2rem; padding: .5rem; }

/* The card someone has just added from. The page reloads and lands on this
   card via its anchor, so the confirmation belongs here rather than in a strip
   at the top the eye has already scrolled past. */
.stock-card--added { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-wash), var(--shadow); }
.stock-card__added {
  display: flex; align-items: center; gap: .4rem;
  font-size: .84rem; font-weight: 700; color: var(--teal-deep);
  background: var(--teal-wash); border-radius: var(--radius-sm);
  padding: .4rem .6rem; margin: 0 0 .75rem;
}
.stock-card__added::before { content: "¹3"; font-size: .95rem; }


/* ---------- the basket bar on the uniform rail ---------- */

/* Pinned so that the way out of browsing follows you down a long grid. */
.basket-bar {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  background: var(--maroon-deep); color: #fff;
  box-shadow: 0 -6px 24px -10px rgba(76, 20, 36, .55);
  padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom));
}
.basket-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.basket-bar__count { margin: 0; font-size: .95rem; line-height: 1.35; }
.basket-bar__count b { font-weight: 700; }
.basket-bar__note { display: block; font-size: .8rem; opacity: .78; }
.basket-bar .btn { flex: none; }
/* Clear the fixed bar so it never covers the last of the footer. */
body.has-basket-bar { padding-bottom: 5.5rem; }

@media (max-width: 30rem) {
  .basket-bar__inner { gap: .7rem; }
  .basket-bar__count { font-size: .85rem; }
  .basket-bar__note { display: none; }
}

.basket-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.basket-table th {
  text-align: left; font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); padding: 0 .75rem .6rem 0;
  border-bottom: 2px solid var(--rose-soft);
}
.basket-table td { padding: .85rem .75rem .85rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.basket-table tfoot td { border-bottom: 0; font-weight: 700; padding-top: 1rem; }
.basket-table .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }

.reserve-layout { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 52rem) { .reserve-layout { grid-template-columns: 1.25fr .75fr; } }

.summary-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem; box-shadow: var(--shadow); }
.summary-box h2 { font-size: 1.15rem; }
.summary-box > :last-child { margin-bottom: 0; }

.ref-badge {
  display: inline-block; font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  background: var(--mustard-wash); border: 2px dashed var(--mustard);
  padding: .5rem 1.1rem; border-radius: var(--radius-sm); color: var(--maroon);
  letter-spacing: .04em;
}

/* ---------- committee, support, documents ---------- */

.people { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.people li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1.1rem; }
.people b { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--maroon); }
.people span { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); }
.people em { display: block; font-style: normal; font-size: .88rem; color: var(--ink-soft); margin-top: .25rem; }

.support-list { display: grid; gap: 1.25rem; }
.support-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.85rem); box-shadow: var(--shadow);
  display: grid; gap: .5rem 1.5rem;
}
@media (min-width: 44rem) { .support-item { grid-template-columns: 1fr auto; align-items: center; } }
.support-item > div > :last-child { margin-bottom: 0; }
.support-item h3 { margin-bottom: .3rem; }
.support-item__raised {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  background: var(--teal-wash); color: var(--teal-deep);
  padding: .25rem .7rem; border-radius: 999px; margin-bottom: .5rem;
}

.doc-group { margin-bottom: 2.25rem; }
.doc-group:last-child { margin-bottom: 0; }
.doc-group > h2 {
  font-family: var(--body); font-size: .78rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--teal-deep);
  padding-bottom: .5rem; border-bottom: 2px solid var(--rose-soft); margin-bottom: 1rem;
}
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-list li { border-bottom: 1px solid var(--line); }
.doc-list li:last-child { border-bottom: 0; }
.doc-list a {
  display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; padding: .95rem 0; text-decoration: none; color: var(--ink);
}
.doc-list a:hover { color: var(--maroon); }
.doc-list a:hover .doc-list__title { text-decoration: underline; }
.doc-list__title { font-weight: 700; color: var(--maroon); }
.doc-list__desc { display: block; font-weight: 400; color: var(--ink-soft); font-size: .9rem; }
.doc-list__meta { font-size: .8rem; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

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

.form-grid { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 36rem) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 44rem) { .form-row--3 { grid-template-columns: repeat(3, 1fr); } }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label, .field__label { font-weight: 700; font-size: .92rem; color: var(--maroon); }
.field__help { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.field__req { color: var(--rose); font-weight: 400; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="date"], input[type="search"],
input[type="file"], select, textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: .7rem .85rem; width: 100%;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
input:hover, select:hover, textarea:hover { border-color: var(--rose); }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 3px solid var(--teal-wash); outline-offset: 0; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--maroon) 50%), linear-gradient(135deg, var(--maroon) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }

.checkbox { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.checkbox input { width: auto; margin-top: .28rem; }

.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; }

/* honeypot */
.trap { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.notice { border-radius: var(--radius-sm); padding: .9rem 1.15rem; margin-bottom: 1.25rem; border-left: 4px solid; }
.notice > :last-child { margin-bottom: 0; }
.notice--info { background: var(--teal-wash); border-color: var(--teal); }
.notice--success { background: var(--teal-wash); border-color: var(--teal); }
.notice--warn { background: var(--mustard-wash); border-color: var(--mustard); }
.notice--error { background: var(--rose-wash); border-color: var(--maroon); }
.notice ul { margin: .5rem 0 0; }

/* ==========================================================================
   Admin dashboard — plainer on purpose. Committee members should feel like
   they are filling in a form, not operating a website.
   ========================================================================== */

.admin { background: var(--paper-2); }

.admin-header { background: var(--maroon-deep); color: #fff; --focus: var(--mustard); }
.admin-header__inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; min-height: 60px; padding-block: .7rem; }
.admin-header__title { display: flex; align-items: center; gap: .6rem; margin-right: auto; color: #fff; text-decoration: none; font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.admin-header__title .mark { width: 26px; height: 26px; }
.admin-header a { color: #f3e2e5; }
.admin-header__links { display: flex; gap: 1rem; align-items: center; font-size: .85rem; }

.admin-nav { background: var(--maroon); }
.admin-nav__inner { display: flex; flex-wrap: wrap; gap: .15rem; padding-block: 0; }
.admin-nav a {
  color: #f3dde1; text-decoration: none; font-size: .82rem; font-weight: 600;
  padding: .8rem .9rem; border-bottom: 3px solid transparent;
}
.admin-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.admin-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--mustard); }

.admin main { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.admin h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
.admin h2 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

.admin-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.admin-panel > :last-child { margin-bottom: 0; }
.admin-panel > h2:first-child { margin-top: 0; }

.admin-intro { color: var(--ink-soft); max-width: 44rem; }

.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); margin-bottom: 2rem; }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem 1.25rem; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow); border-top: 4px solid var(--rose);
}
.tile:nth-child(4n+2) { border-top-color: var(--teal); }
.tile:nth-child(4n+3) { border-top-color: var(--mustard); }
.tile:nth-child(4n+4) { border-top-color: var(--maroon); }
.tile:hover { box-shadow: var(--shadow-lg); color: var(--ink); }
.tile b { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--maroon); margin-bottom: .2rem; }
.tile span { font-size: .88rem; color: var(--ink-soft); }
.tile em { display: block; font-style: normal; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); margin-top: .5rem; }

.table-scroll { overflow-x: auto; margin-inline: calc(clamp(1.25rem, 3vw, 2rem) * -1); padding-inline: clamp(1.25rem, 3vw, 2rem); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 34rem; }
.table th {
  text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 0 .8rem .6rem 0; border-bottom: 2px solid var(--rose-soft); white-space: nowrap;
}
.table td { padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { white-space: nowrap; text-align: right; }
.table img { width: 44px; height: 55px; object-fit: cover; border-radius: 4px; }

.badge {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: .22rem .6rem; border-radius: 999px;
}
.badge--new { background: var(--mustard-wash); color: #85601a; }
.badge--ready { background: var(--teal-wash); color: var(--teal-deep); }
.badge--collected { background: #e6efe6; color: #35603a; }
.badge--cancelled { background: var(--paper-2); color: var(--ink-soft); }
.badge--draft { background: var(--rose-wash); color: var(--maroon); }

.inline-form { display: inline; }

.admin-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }

.settings-group { margin-bottom: 2rem; }
.settings-group:last-of-type { margin-bottom: 1rem; }
.settings-group > h2 { margin-bottom: .3rem; }
.settings-group__blurb { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1.25rem; }

.sticky-save {
  position: sticky; bottom: 0; background: var(--card);
  border-top: 1px solid var(--line); padding: 1rem 0; margin-top: 1rem;
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
}

.login-shell { display: grid; place-items: center; min-height: 78vh; padding: 2rem 1rem; }
.login-card { width: 100%; max-width: 24rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-lg); }
.login-card .mark { width: 44px; height: 44px; margin-bottom: 1rem; }

.photo-preview { display: flex; gap: 1rem; align-items: flex-start; }
.photo-preview img { width: 92px; height: 115px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* Site photos: each preview is drawn at the shape its slot crops it to, so the
   dashboard shows what the page will show rather than the whole photograph. */
.slot-preview {
  display: block; width: 100%; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper-2);
}
.slot-preview--empty { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.slot-preview--empty .mark { width: 30px; height: 30px; opacity: .4; }

.empty-state { text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1rem; color: var(--ink-soft); }
.empty-state .mark { width: 52px; height: 52px; margin: 0 auto 1rem; opacity: .5; }

/* ---------- footer ---------- */

.site-footer { background: var(--maroon-deep); color: #e8d6d9; --focus: var(--mustard); margin-top: clamp(3rem, 7vw, 5rem); }
.site-footer__inner { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 46rem) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 64rem) { .site-footer__inner { grid-template-columns: 1.5fr 1fr 1.1fr 1fr; } }

.site-footer h2 {
  font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--rose); margin-bottom: .9rem;
}
.site-footer a { color: #f5e7e9; text-decoration: none; }
.site-footer a:hover { color: var(--mustard-soft); text-decoration: underline; }
.site-footer__name { font-family: var(--display); font-size: 1.25rem; color: #fff; margin-bottom: .5rem; }
.site-footer__note { font-size: .92rem; color: #d9c3c7; }
.site-footer__note p { margin-bottom: .5rem; }
.site-footer__charity { font-size: .85rem; color: var(--rose); margin: 0; }
.site-footer__nav, .site-footer__contact, .site-footer__school { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.site-footer__nav a, .site-footer__contact a { font-size: .92rem; }
.site-footer__address, .site-footer__trust { font-size: .85rem; color: #c9b1b6; margin: .25rem 0 0; }
.site-footer__school img { background: #fff; border-radius: var(--radius-sm); padding: .5rem; width: 92px; height: auto; }
.site-footer__base {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-block: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: .82rem; color: #bfa5aa;
}
.site-footer__base p { margin: 0; }

/* ---------- print ---------- */

@media print {
  .site-header, .site-footer, .admin-nav, .btn, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  .arch, .arch__2, .arch__3 { padding: 0; background: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- photographs ---------- */

picture { display: block; }

.photo-band { position: relative; }
.photo-band picture img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: var(--radius);
}
@media (max-width: 40rem) { .photo-band picture img { aspect-ratio: 4 / 3; } }
.photo-band figcaption {
  font-size: .85rem; color: var(--ink-soft); margin-top: .7rem; text-align: center;
}
.photo-band figure { margin: 0; }

/* A photo framed by the arch — the mark doing real work. */
.photo-arch {
  --band: clamp(6px, 1.1vw, 12px);
  --curve: clamp(60px, 14vw, 130px);
  padding: var(--band); background: var(--rose);
  border-radius: 50% 50% 0 0 / var(--curve) var(--curve) 0 0;
}
.photo-arch__2 {
  padding: var(--band); background: var(--teal);
  border-radius: 50% 50% 0 0 / calc(var(--curve) - var(--band)) calc(var(--curve) - var(--band)) 0 0;
}
.photo-arch__3 {
  padding: var(--band); background: var(--mustard);
  border-radius: 50% 50% 0 0 / calc(var(--curve) - var(--band) * 2) calc(var(--curve) - var(--band) * 2) 0 0;
}
.photo-arch picture, .photo-arch img {
  display: block; width: 100%;
  border-radius: 50% 50% 0 0 / calc(var(--curve) - var(--band) * 3) calc(var(--curve) - var(--band) * 3) 0 0;
}
.photo-arch img { aspect-ratio: 4 / 3; object-fit: cover; }

.media { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 48rem) {
  .media { grid-template-columns: 1fr 1fr; }
  .media--flip .media__text { order: 2; }
}
.media__text > :last-child { margin-bottom: 0; }
.media picture img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.media--portrait picture img { aspect-ratio: 3 / 4; object-fit: cover; }
.media--landscape picture img { aspect-ratio: 4 / 3; object-fit: cover; }

.photo-strip { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.photo-strip figure { margin: 0; }
.photo-strip img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
.photo-strip figcaption { font-size: .82rem; color: var(--ink-soft); margin-top: .5rem; }
.band--teal .photo-strip figcaption { color: #cfe2e0; }

/* ---------- narrow phones ---------- */
/* The header is the widest fixed row on the site: brand, menu and Donate must
   all fit at 320px or the whole document overflows sideways. */
@media (max-width: 30rem) {
  .site-header__inner { gap: .5rem; min-height: 62px; }
  .mark--brand { width: 31px; height: 31px; }
  .brand { gap: .5rem; }
  .brand__place { font-size: .5rem; letter-spacing: .22em; margin-bottom: .18rem; }
  .brand__name { font-size: .68rem; letter-spacing: .03em; margin-bottom: .14rem; }
  .brand__sub { font-size: 1.3rem; }
  .nav-toggle > summary { padding: .48rem .62rem; font-size: .66rem; letter-spacing: .08em; }
  .nav-toggle__text { display: none; }
  .nav-toggle__icon { display: block; }
  .btn--donate { padding: .55rem .85rem; font-size: .8rem; }
  .basket-pill { padding: .42rem .6rem; }
}


/* Flex and grid children default to min-width:auto, which lets long words and
   wide children push a row past the viewport. */
.site-header__inner > *, .site-footer__inner > *, .media > *, .shelter > * { min-width: 0; }
.cards, .stock-grid, .photo-strip, .tiles { min-width: 0; }
h1, h2, h3, p, li, td, th, .lede { overflow-wrap: break-word; }

/* ---------- donation form ---------- */

.donate-form {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2.25rem); box-shadow: var(--shadow);
}

.amount-set { border: 0; padding: 0; margin: 0 0 1.5rem; }
.amount-set legend {
  padding: 0; margin-bottom: .85rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}

.amount-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }

.amount {
  font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 600;
  color: var(--maroon); background: var(--card);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem .5rem; cursor: pointer; text-align: center;
  transition: border-color .14s ease, background-color .14s ease, transform .1s ease;
}
.amount:hover { border-color: var(--rose); background: var(--rose-wash); }
.amount:active { transform: translateY(1px); }
.amount.is-selected {
  background: var(--maroon); border-color: var(--maroon); color: #fff;
}

/* £ sits inside the field so the number lines up with the presets above. */
.amount-input { position: relative; }
.amount-input__symbol {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  color: var(--ink-soft); pointer-events: none;
}
.amount-input input { padding-left: 2.1rem; font-size: 1.15rem; font-weight: 600; }

#donate-error { margin-bottom: 1.25rem; }

/* ---------- uniform fulfilment portal ---------- */
/* The screen a volunteer works from while making up bags, so the tick targets
   are deliberately large and the state of a bag readable at arm's length. */

.badge--picked  { background: var(--teal-wash); color: var(--teal-deep); }
.badge--paid    { background: #e6efe6; color: #35603a; }
.badge--unpaid  { background: var(--rose-wash); color: var(--maroon); }
.badge--failed  { background: #f8ddd8; color: #8d3018; }

.res-list { display: grid; gap: 1.25rem; }

.res-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem; scroll-margin-top: 5rem;
}
/* Anything sitting past the stale threshold is holding stock nobody else can
   reserve, so it is meant to catch the eye. */
.res-card--stale { border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose), var(--shadow); }

.res-card__head { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: flex-start; }
.res-card__ref { font-family: var(--display); font-weight: 700; letter-spacing: .06em; color: var(--maroon); margin: 0; }
.res-card__name { font-size: 1.2rem; margin: .1rem 0 0; }
.res-card__child { color: var(--ink-soft); font-size: .9rem; margin: .15rem 0 0; }
.res-card__badges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; }
.res-card__age { font-size: .8rem; color: var(--ink-soft); width: 100%; text-align: right; }
.res-card__age--stale { color: #b3271c; font-weight: 700; }

.res-card__contact { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .88rem; color: var(--ink-soft); margin-top: .5rem; }
.res-card__notes { background: var(--paper); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .9rem; margin: .75rem 0 0; }
.res-card__progress { margin-top: .9rem; font-size: .9rem; color: var(--ink-soft); }

.pick-list { list-style: none; margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--line); }

.pick-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem .8rem; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.pick-row--done .pick-row__what strong { color: var(--ink-soft); text-decoration: line-through; }
.pick-row__what { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pick-row__note { font-size: .82rem; color: var(--teal-deep); font-style: italic; }
.pick-row__qty { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick-row__more { grid-column: 1 / -1; }
.pick-row__more summary { cursor: pointer; font-size: .82rem; color: var(--ink-soft); }
.pick-row__form { display: grid; gap: .6rem; padding: .8rem 0 .3rem; max-width: 30rem; }
.pick-row__form .field { margin: 0; }

/* Big enough to hit accurately while standing over a box of jumpers, and a
   square rather than a circle so an empty one still reads as a checkbox.
   Sized on every axis -- a button with no text in it will otherwise collapse
   to a line wherever a parent tries to size it by its content. */
.tick {
  flex: none; box-sizing: border-box; padding: 0; margin: 0;
  width: 2.25rem; height: 2.25rem;
  min-width: 2.25rem; min-height: 2.25rem;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--rose); border-radius: 7px;
  background: var(--card); cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--teal-deep);
  display: inline-grid; place-items: center;
}
.tick:hover { border-color: var(--teal); background: var(--teal-wash); }
.tick--on { background: var(--teal-wash); border-color: var(--teal); }
.pick-row__tick { display: flex; margin: 0; }

.checkline { display: flex; gap: .5rem; align-items: center; font-size: .9rem; }
.checkline input { width: auto; }

.res-card__money {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: flex-end;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line);
}
.res-card__money strong { display: block; font-size: 1.15rem; }
.pay-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pay-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pay-form select { width: auto; }
.pay-done { text-align: right; }
.pay-done .field__help { margin: 0 0 .3rem; }
.amount-input--small { width: 7rem; }
.amount-input--small input { font-size: 1rem; padding-left: 1.7rem; }
.amount-input--small .amount-input__symbol { font-size: .95rem; }

.res-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* The reserve/pay pair on the public basket, so neither reads as the fallback. */
.form-actions--pay { flex-wrap: wrap; gap: .6rem; }

@media (max-width: 40rem) {
  .res-card__badges { justify-content: flex-start; }
  .res-card__age { text-align: left; }
  .pay-done { text-align: left; }
}

/* ---------- reservations: the list, and the panel it opens ---------- */

.res-table td { vertical-align: middle; }
.res-row__link { font-weight: 700; font-family: var(--display); letter-spacing: .04em; }
.res-row--stale td { background: var(--rose-wash); }
.res-row__age--stale { color: #b3271c; font-weight: 700; }

.res-dialog {
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg);
  overflow: auto;
}
.res-dialog::backdrop { background: rgba(42, 31, 34, .55); }
.res-dialog__close { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
/* Inside a dialog the card is the whole panel, so it drops its own frame. */
.res-dialog .res-card { border: 0; box-shadow: none; padding: 0; background: transparent; }

.admin-back { margin-bottom: 1rem; font-size: .9rem; }

/* A line nobody ticked on a bag that has already been picked: the family is not
   getting it, so it should not look the same as one that is simply still to do. */
.pick-row--notsupplied { opacity: .75; }
.pick-row--notsupplied .pick-row__what strong { text-decoration: line-through; color: var(--ink-soft); }
.pick-row--unavailable .pick-row__what strong { text-decoration: line-through; }
.res-card__left { color: #b3271c; font-weight: 700; }

/* ---------- photo gallery ---------- */

.album-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.album-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.album-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: inherit; }
.album-card__photo { aspect-ratio: 4 / 3; background: var(--paper-2); }
.album-card__photo picture, .album-card__photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.album-card__placeholder { display: grid; place-items: center; height: 100%; opacity: .35; }
.album-card__body { padding: 1rem 1.15rem 1.25rem; }
.album-card__title { font-size: 1.15rem; margin: 0; }
.album-card__meta { font-size: .88rem; color: var(--ink-soft); margin: .3rem 0 0; }

/* The album itself. Thumbnails are cropped to a common shape: left at their own
   proportions, a short photo sitting in a tall grid row showed a band of bare
   card beneath it. The crop is only ever a thumbnail -- clicking one opens the
   whole photo, uncropped, in the lightbox. */
.shot-grid {
  display: grid; gap: 1rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.shot { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.shot__link { display: block; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.shot__link picture { display: block; width: 100%; height: 100%; }
.shot__link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.shot__link:hover img, .shot__link:focus-visible img { transform: scale(1.04); }
.shot figcaption { padding: .6rem .8rem; font-size: .86rem; color: var(--ink-soft); }

/* The lightbox.
   There is no JavaScript anywhere on this site (script-src 'none'), so the
   enlarged view is driven by :target -- each photo is an anchor, the arrows
   link to the photo either side, and close links back to the thumbnail. The
   arrows wrap around, so neither one is ever a dead end. */
.lightbox { display: none; }
.lightbox:target {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 200;
  padding: clamp(.5rem, 3vw, 2rem);
}
.lightbox__scrim { position: absolute; inset: 0; background: rgba(30, 8, 14, .9); }
.lightbox__figure { position: relative; z-index: 1; margin: 0; max-width: min(60rem, 92vw); }
.lightbox__figure picture { display: block; }
.lightbox__figure img {
  display: block; width: auto; height: auto; margin: 0 auto;
  max-width: 100%; max-height: 78vh;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.lightbox__caption {
  display: flex; flex-wrap: wrap; gap: .25rem .75rem;
  justify-content: center; align-items: baseline;
  margin-top: .8rem; color: #f4e9e7; font-size: .9rem; text-align: center;
}
.lightbox__count { color: #c4a9ad; font-variant-numeric: tabular-nums; }

.lightbox__nav, .lightbox__close {
  position: absolute; z-index: 2; display: grid; place-items: center;
  color: #fff; text-decoration: none; line-height: 1;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%; --focus: var(--mustard);
}
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2.1rem; padding-bottom: .22rem; }
.lightbox__nav--prev { left: clamp(.4rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(.4rem, 2vw, 2rem); }
.lightbox__close { top: clamp(.4rem, 2vw, 1.5rem); right: clamp(.4rem, 2vw, 1.5rem); width: 2.6rem; height: 2.6rem; font-size: 1.7rem; padding-bottom: .18rem; }

@media (max-width: 30rem) {
  .lightbox__figure img { max-height: 68vh; }
  .lightbox__nav { width: 2.6rem; height: 2.6rem; font-size: 1.8rem; }
}

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

.gphoto-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.gphoto {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem; background: var(--card);
  display: flex; flex-direction: column; gap: .5rem;
}
.gphoto--cover { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.gphoto__img { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); border-radius: 6px; overflow: hidden; }
.gphoto__img picture, .gphoto__img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gphoto__flag {
  position: absolute; left: .4rem; top: .4rem;
  background: var(--teal); color: #fff; font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .18rem .45rem; border-radius: 999px;
}
.gphoto__form { display: flex; flex-wrap: wrap; gap: .4rem; }
.gphoto__form input[type="text"] { flex: 1 1 100%; font-size: .9rem; padding: .45rem .6rem; }
.gphoto__sort { width: 4.5rem; font-size: .9rem; padding: .45rem .5rem; }
.gphoto__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }