/* ============================================================================
   One More Mission - design system
   Palette is taken straight off the logo: the near-black ink of the wordmark,
   the warm khaki of "MISSION", and a forest green chosen to bridge the two.
   Flat, roomy, high-contrast. No gradients, no heavy rounding.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --ink:          #162328;  /* logo dark - headings, header, footer          */
  --ink-deep:     #0e181c;
  --ink-soft:     #29373c;
  --ink-70:       rgba(22, 35, 40, 0.70);
  --ink-45:       rgba(22, 35, 40, 0.45);
  --ink-12:       rgba(22, 35, 40, 0.12);
  --ink-06:       rgba(22, 35, 40, 0.06);

  --stone:        #766d58;  /* logo khaki - secondary text, rules            */
  --stone-mid:    #8f8570;
  --stone-light:  #b9ad94;
  --stone-pale:   #e6e1d6;
  --stone-wash:   #f1eee7;

  --green:        #2f6a47;  /* the action colour                             */
  --green-deep:   #25563a;
  --green-mid:    #3d7a55;
  --green-light:  #8fc7a5;
  --green-wash:   #edf3ef;
  --green-line:   #cadfd2;

  --paper:        #f7f6f2;
  --white:        #ffffff;

  --urgent:       #a8452b;
  --urgent-wash:  #fbeeea;
  --urgent-line:  #f0d3ca;
  --warn:         #8c5a1f;
  --warn-wash:    #fbf3e6;
  --warn-line:    #eddfc4;

  /* --- type ------------------------------------------------------------- */
  --font-display: "Oswald", "Haettenschweiler", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* --- rhythm ----------------------------------------------------------- */
  --gap-xs: 6px;
  --gap-sm: 12px;
  --gap:    20px;
  --gap-md: 32px;
  --gap-lg: 52px;
  --gap-xl: 84px;

  --radius:    4px;
  --radius-lg: 6px;
  --shell:     1180px;
  --shell-narrow: 760px;

  --line: 1px solid var(--stone-pale);
}

/* ============================================================ base reset */
*, *::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(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--green); }

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

hr { border: 0; border-top: var(--line); margin: var(--gap-md) 0; }

/* ============================================================= typography */
h1, h2, h3, h4, h5 {
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.12;
  margin: 0 0 var(--gap-sm);
  color: var(--ink);
  text-wrap: balance;
}

/* Oswald is condensed. It earns its keep at display sizes, where the tight
   letterforms read as deliberate; at anything near reading size it just makes
   the words harder to take in - and a good many of the people using this site
   are reading it with older eyes. So: display face above, body face below. */
h1, h2 { font-family: var(--font-display); }
h3, h4, h5 { font-family: var(--font-body); letter-spacing: -0.005em; line-height: 1.25; }

h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; }

p { margin: 0 0 var(--gap-sm); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 var(--gap-xs);
  display: block;
}
.eyebrow--light { color: var(--stone-light); }

.lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 62ch;
}

.muted     { color: var(--stone); }
.small     { font-size: 0.92rem; }
.tiny      { font-size: 0.82rem; }
.strong    { font-weight: 600; }
.nowrap    { white-space: nowrap; }
.center    { text-align: center; }
.mono      { font-family: var(--font-mono); letter-spacing: 0.04em; }
.serif-rule {
  border: 0; border-top: 2px solid var(--stone-light);
  width: 56px; margin: var(--gap-sm) 0;
}
.center .serif-rule { margin-left: auto; margin-right: auto; }

/* ================================================================ layout */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gap);
}
.shell--narrow { max-width: var(--shell-narrow); }

.section        { padding: var(--gap-xl) 0; }
.section--tight { padding: var(--gap-lg) 0; }
.section--ink   { background: var(--ink); color: var(--stone-pale); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }
.section--wash  { background: var(--white); border-block: var(--line); }
.section--green { background: var(--green-wash); border-block: 1px solid var(--green-line); }

.stack > * + * { margin-top: var(--gap); }
.stack-sm > * + * { margin-top: var(--gap-sm); }
.stack-lg > * + * { margin-top: var(--gap-md); }

.row {
  display: flex;
  gap: var(--gap-sm);
  align-items: center;
  flex-wrap: wrap;
}
.row--between { justify-content: space-between; }
.row--end     { justify-content: flex-end; }
.row--top     { align-items: flex-start; }
.spacer       { flex: 1 1 auto; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--gap-md);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.page-head {
  padding: var(--gap-lg) 0 var(--gap-md);
  border-bottom: var(--line);
  margin-bottom: var(--gap-md);
}
.page-head h1 { margin-bottom: var(--gap-xs); }

/* ================================================================ header */
.masthead {
  background: var(--ink);
  color: var(--stone-pale);
  border-bottom: 3px solid var(--green);
  position: sticky;
  top: 0;
  z-index: 60;
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 82px;
  padding-block: 10px;
  /* The header carries far more across it than a column of prose should be
     wide, so it gets its own rail rather than being squeezed into --shell. */
  max-width: 1460px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.brand img { height: 54px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
.brand__tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-light);
  white-space: nowrap;
}
/* Signed in, the header carries eight items. The tagline is the first thing
   to go - it is decoration, the links are the job. */
@media (max-width: 1500px) {
  .brand__tag { display: none; }
  .brand__name { font-size: 1.24rem; }
}

.mainnav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.mainnav a {
  color: var(--stone-pale);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  padding: 9px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.mainnav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.mainnav a.is-active {
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--green-light);
}
.mainnav .badge { margin-left: 6px; }
.mainnav__cta { margin-left: 8px; }

/* the signed-in cluster reads as one unit, set off from the site links */
.mainnav__account {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.mainnav__me { display: flex; align-items: center; gap: 8px; padding: 5px 8px; }
.mainnav__me .avatar { background: var(--green); }
.mainnav__signout {
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--stone-light);
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.mainnav__signout:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }

/* Below this the site links no longer fit on one line for a signed-in admin,
   so collapse to the Menu button rather than wrapping into the brand. */
@media (max-width: 1340px) {
  .mainnav__myname { display: none; }
}

.navtoggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--white);
  border-radius: var(--radius);
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  margin-left: auto;
}

@media (max-width: 1200px) {
  .navtoggle { display: block; }
  .mainnav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-bottom: var(--gap-sm);
    margin-left: 0;
  }
  .mainnav.is-open { display: flex; }
  .mainnav a { padding: 13px; font-size: 1.02rem; }
  .mainnav__myname { display: inline; }
  .mainnav__account {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 6px 0 0;
    padding: 6px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .mainnav__signout { text-align: left; padding: 13px; font-size: 1.02rem; }
  .mainnav__cta { margin: 6px 0 0; }
  .masthead__inner { flex-wrap: wrap; min-height: 0; }
  .brand img { height: 46px; }
}

/* ================================================================ footer */
.footer {
  background: var(--ink-deep);
  color: var(--stone-light);
  padding: var(--gap-lg) 0 var(--gap-md);
  margin-top: var(--gap-xl);
  border-top: 3px solid var(--green);
}
.footer a { color: var(--stone-pale); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer h4 {
  color: var(--white);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--gap-sm);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--gap-md);
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 8px; }
.footer__mark { height: 110px; width: auto; margin-bottom: var(--gap-sm); }
.footer__bar {
  margin-top: var(--gap-md);
  padding-top: var(--gap-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--stone);
}
.footer__verse {
  font-size: 1rem;
  color: var(--stone-light);
  font-style: italic;
}

/* =============================================================== buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  line-height: 1.2;
}
.btn:focus-visible { outline-offset: 3px; }

.btn--primary { background: var(--green); border-color: var(--green); color: var(--white); }
.btn--primary:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }

.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--white); }

.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }

.btn--onink { background: transparent; border-color: var(--stone-light); color: var(--white); }
.btn--onink:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

.btn--ghost {
  background: transparent; border-color: var(--stone-pale);
  color: var(--ink); text-transform: none; letter-spacing: 0.01em;
  font-family: var(--font-body); font-weight: 500;
}
.btn--ghost:hover { border-color: var(--stone); background: var(--white); }

.btn--danger { background: var(--urgent); border-color: var(--urgent); color: var(--white); }
.btn--danger:hover { background: #8d3823; border-color: #8d3823; color: var(--white); }

.btn--sm { padding: 9px 16px; font-size: 0.85rem; }
.btn--lg { padding: 18px 36px; font-size: 1.12rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; }

.btn-row { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }

.linkbtn {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--green-deep);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linkbtn:hover { color: var(--green); }
.linkbtn--danger { color: var(--urgent); }

/* ================================================================= cards */
.card {
  background: var(--white);
  border: var(--line);
  border-radius: var(--radius);
  padding: var(--gap-md);
}
.card--flush { padding: 0; overflow: hidden; }
.card--pad   { padding: var(--gap); }
.card--rail  { border-left: 4px solid var(--green); }
.card--rail-urgent { border-left: 4px solid var(--urgent); }
.card--rail-wait   { border-left: 4px solid var(--warn); }
.card--muted { background: var(--stone-wash); border-color: var(--stone-pale); }
.card--ink   { background: var(--ink); color: var(--stone-pale); border-color: var(--ink); }
.card--ink h2, .card--ink h3, .card--ink h4 { color: var(--white); }

.card__head {
  padding: var(--gap) var(--gap-md);
  border-bottom: var(--line);
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}
.card__head h2, .card__head h3 { margin: 0; }
.card__body { padding: var(--gap-md); }
.card__foot {
  padding: var(--gap) var(--gap-md);
  border-top: var(--line);
  background: var(--stone-wash);
}

/* ---- mission card ---- */
.mission {
  background: var(--white);
  border: var(--line);
  border-radius: var(--radius);
  border-left: 4px solid var(--stone-light);
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  height: 100%;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.mission:hover { box-shadow: 0 2px 0 var(--ink-06); border-left-color: var(--green); }
.mission--urgent  { border-left-color: var(--urgent); }
.mission--claimed { border-left-color: var(--green); }
.mission--done    { border-left-color: var(--stone); background: var(--stone-wash); }
.mission__title {
  font-family: var(--font-body);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.005em;
  margin: 0;
}
.mission__title a { color: var(--ink); text-decoration: none; }
.mission__title a:hover { color: var(--green-deep); text-decoration: underline; }
.mission__meta {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--stone);
  align-items: center;
}
.mission__meta > * { display: inline-flex; align-items: center; gap: 5px; }
.mission__body { color: var(--ink-70); flex: 1 1 auto; }
.mission__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding-top: var(--gap-sm);
  border-top: var(--line);
  flex-wrap: wrap;
}

/* ================================================================= pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill--open  { background: var(--green-wash);  color: var(--green-deep); border-color: var(--green-line); }
.pill--claim { background: var(--ink);         color: var(--white);      border-color: var(--ink); }
.pill--done  { background: var(--stone-wash);  color: var(--stone);      border-color: var(--stone-pale); }
.pill--wait  { background: var(--warn-wash);   color: var(--warn);       border-color: var(--warn-line); }
.pill--stop  { background: var(--urgent-wash); color: var(--urgent);     border-color: var(--urgent-line); }
.pill--hot   { background: var(--urgent);      color: var(--white);      border-color: var(--urgent); }
.pill--warm  { background: var(--warn-wash);   color: var(--warn);       border-color: var(--warn-line); }
.pill--calm  { background: var(--stone-wash);  color: var(--stone);      border-color: var(--stone-pale); }
.pill--ghost { background: transparent;        color: var(--stone);      border-color: var(--stone-pale); }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--urgent);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0;
}
.badge--green { background: var(--green); }
.badge--quiet { background: var(--stone); }

/* ================================================================= forms */
.field { margin-bottom: var(--gap); }
.field:last-child { margin-bottom: 0; }

.field > label,
.field__label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--ink);
}
.field__hint {
  display: block;
  font-size: 0.9rem;
  color: var(--stone);
  margin-bottom: 8px;
  line-height: 1.5;
}
.field__error {
  display: block;
  font-size: 0.9rem;
  color: var(--urgent);
  margin-top: 6px;
  font-weight: 500;
}
.req { color: var(--urgent); font-weight: 700; }
.optional { color: var(--stone); font-weight: 400; font-size: 0.9rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], input[type="url"],
select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--stone-light);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
textarea { min-height: 140px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23766d58' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 106, 71, 0.16);
}
input::placeholder, textarea::placeholder { color: var(--stone-mid); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--urgent);
  box-shadow: 0 0 0 3px rgba(168, 69, 43, 0.12);
}
input[type="file"] {
  width: 100%;
  font-size: 0.95rem;
  padding: 11px;
  border: 1px dashed var(--stone-light);
  border-radius: var(--radius);
  background: var(--stone-wash);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
}
.field-grid .field { margin-bottom: 0; }

/* ---- checkbox / radio ---- */
.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--stone-pale);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.check:hover { border-color: var(--stone-light); }
.check input { margin: 3px 0 0; width: 19px; height: 19px; accent-color: var(--green); flex: 0 0 auto; }
.check:has(input:checked) { border-color: var(--green); background: var(--green-wash); }
.check__text { flex: 1; }
.check__text strong { display: block; font-weight: 600; }
.check__text span { display: block; font-size: 0.9rem; color: var(--stone); line-height: 1.45; }

.choice-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.choice-grid .check { margin-bottom: 0; height: 100%; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--gap); }
legend {
  padding: 0;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 8px;
}

.form-section {
  padding-bottom: var(--gap-md);
  margin-bottom: var(--gap-md);
  border-bottom: var(--line);
}
.form-section:last-of-type { border-bottom: 0; margin-bottom: var(--gap); padding-bottom: 0; }
.form-section__title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.form-section__note { color: var(--stone); font-size: 0.95rem; margin-bottom: var(--gap); }

.step-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  margin-right: 10px;
  flex: 0 0 auto;
}

/* ================================================================ tables */
/* position:relative matters: an absolutely-positioned descendant (a
   .visually-hidden screen-reader label, say) is NOT clipped by overflow
   unless its container is a containing block, and one escaping the scroller
   drags the whole document wider on a phone. */
.table-wrap {
  position: relative;
  overflow-x: auto;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
  min-width: 640px;
}
table.data th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 13px 16px;
  border-bottom: 2px solid var(--stone-pale);
  background: var(--stone-wash);
  white-space: nowrap;
}
table.data td { padding: 15px 16px; border-bottom: var(--line); vertical-align: top; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--paper); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .cell-title { font-weight: 600; }
table.data .cell-title a { color: var(--ink); text-decoration: none; }
table.data .cell-title a:hover { color: var(--green-deep); text-decoration: underline; }

/* ================================================================= stats */
.stat {
  background: var(--white);
  border: var(--line);
  border-radius: var(--radius);
  padding: var(--gap);
  text-align: left;
}
.stat--ink { background: var(--ink); border-color: var(--ink-soft); }
.stat__num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat--ink .stat__num { color: var(--white); }
.stat__num--green { color: var(--green); }
.stat__label {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 500;
}
.stat--ink .stat__label { color: var(--stone-light); }
.stat a { text-decoration: none; }

.statlink { display: block; text-decoration: none; }
.statlink:hover .stat { border-color: var(--green); }

/* ============================================================== timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--stone-pale);
}
.timeline li { position: relative; padding: 0 0 var(--gap) 32px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--stone-light);
}
.timeline li.is-green::before { border-color: var(--green); }
.timeline li.is-ink::before   { border-color: var(--ink); background: var(--ink); }
.timeline li.is-stop::before  { border-color: var(--urgent); }
.timeline__when {
  font-size: 0.82rem;
  color: var(--stone);
  letter-spacing: 0.02em;
}
.timeline__body { margin-top: 2px; }
.timeline__who { font-weight: 600; }

/* ================================================================ alerts */
.flashes { margin: var(--gap) 0 0; }
.alert {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 15px 18px;
  border: 1px solid var(--stone-pale);
  border-left: 4px solid var(--stone);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: var(--gap-sm);
  line-height: 1.55;
}
.alert--success { border-left-color: var(--green);  background: var(--green-wash);  border-color: var(--green-line); }
.alert--error   { border-left-color: var(--urgent); background: var(--urgent-wash); border-color: var(--urgent-line); }
.alert--warning { border-left-color: var(--warn);   background: var(--warn-wash);   border-color: var(--warn-line); }
.alert--info    { border-left-color: var(--ink);    background: var(--white); }
.alert__icon { flex: 0 0 auto; margin-top: 2px; }
.alert strong { display: block; }

.notice {
  background: var(--warn-wash);
  border-block: 1px solid var(--warn-line);
  color: var(--warn);
  padding: 11px 0;
  font-size: 0.95rem;
  text-align: center;
}

/* ============================================================ empty state */
.empty {
  text-align: center;
  padding: var(--gap-xl) var(--gap);
  border: 1px dashed var(--stone-light);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--stone);
}
.empty img { width: 96px; margin: 0 auto var(--gap); opacity: 0.35; }
.empty h3 { color: var(--ink); }
.empty p { max-width: 46ch; margin-inline: auto; }

/* =============================================================== filters */
.filterbar {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  align-items: flex-end;
  padding: var(--gap);
  background: var(--white);
  border: var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--gap-md);
}
.filterbar .field { margin-bottom: 0; min-width: 170px; flex: 1 1 170px; }
.filterbar .field > label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); font-family: var(--font-display); font-weight: 500; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--stone-pale);
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
}
.chip:hover { border-color: var(--stone); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip__count { color: var(--stone); font-size: 0.85rem; }
.chip.is-active .chip__count { color: var(--stone-light); }

/* =============================================================== details */
.detail-list { margin: 0; }
.detail-list div {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--gap-sm);
  padding: 12px 0;
  border-bottom: var(--line);
}
.detail-list div:last-child { border-bottom: 0; }
.detail-list dt {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  font-family: var(--font-display);
  font-weight: 500;
  padding-top: 3px;
}
.detail-list dd { margin: 0; }
@media (max-width: 560px) {
  .detail-list div { grid-template-columns: 1fr; gap: 2px; }
}

.private-box {
  background: var(--stone-wash);
  border: 1px dashed var(--stone-light);
  border-radius: var(--radius);
  padding: var(--gap);
}
.private-box .eyebrow { color: var(--stone); }

/* ================================================================== hero */
.hero {
  /* The ink colour is the real background; the photograph is a texture on top
     of it, so the hero still looks right if the image never loads. */
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(22, 35, 40, 0.60), rgba(22, 35, 40, 0.82)),
    url("../img/photos/hero-ridges.jpg");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  color: var(--stone-pale);
  padding: var(--gap-xl) 0;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--green);
}
@media (max-width: 700px) {
  .hero {
    background-image:
      linear-gradient(rgba(22, 35, 40, 0.64), rgba(22, 35, 40, 0.86)),
      url("../img/photos/hero-ridges-sm.jpg");
  }
}
.hero::after {
  /* a last touch of green in the valley floor */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(47, 106, 71, 0.20), transparent);
  pointer-events: none;
}

/* ---------------------------------------------------------- photo bands */
/* A full-bleed photograph used as the ground for a section of type. The
   overlay is not optional - it is what keeps the text readable. */
.section--photo {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(22, 35, 40, 0.66), rgba(22, 35, 40, 0.86)),
    url("../img/photos/band-road.jpg");
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  color: var(--stone-pale);
  border-block: 3px solid var(--green);
}
.section--photo h1, .section--photo h2, .section--photo h3 { color: var(--white); }
@media (max-width: 700px) {
  .section--photo {
    background-image:
      linear-gradient(rgba(22, 35, 40, 0.70), rgba(22, 35, 40, 0.88)),
      url("../img/photos/band-road-sm.jpg");
  }
}

/* A plain photograph in the flow of a page, no type over it. */
.photo {
  /* <figure> carries a 40px side margin by default, which would inset the
     picture from the column of text it belongs to. */
  margin-inline: 0;
  border: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--stone-wash);
}
.photo img { width: 100%; display: block; }
.photo figcaption {
  padding: 10px var(--gap);
  font-size: 0.85rem;
  color: var(--stone);
  border-top: var(--line);
  background: var(--white);
}
.photo--wide { margin-block: var(--gap-md); }
.hero__inner { position: relative; z-index: 1; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--gap-lg);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--gap-md); }
  .hero__art { order: -1; max-width: 300px; margin-inline: auto; }
}
.hero h1 { color: var(--white); margin-bottom: var(--gap-sm); }
.hero .lede { color: var(--stone-pale); font-size: 1.28rem; }
.hero__art img { width: 100%; max-width: 380px; margin-inline: auto; }
.hero__cta { margin-top: var(--gap-md); }
.hero__foot {
  margin-top: var(--gap-md);
  padding-top: var(--gap);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  gap: var(--gap-md);
  flex-wrap: wrap;
}
.hero__foot .stat__num { color: var(--white); font-size: 2rem; }
.hero__foot .stat__label { color: var(--stone-light); }

/* ================================================================= steps */
.steps { counter-reset: step; display: grid; gap: var(--gap-md); }
.step { display: flex; gap: var(--gap); align-items: flex-start; }
.step__num {
  counter-increment: step;
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 2px solid var(--green);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--green);
}
.step__num::before { content: counter(step); }
.section--ink .step__num { border-color: var(--green-light); color: var(--green-light); }
.step h3 { margin-bottom: 4px; }

/* ============================================================ categories */
.cat-tile {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: var(--gap);
  background: var(--white);
  border: var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  height: 100%;
}
.cat-tile:hover { border-color: var(--green); color: var(--ink); }
.cat-tile__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--green-wash);
  border-radius: var(--radius);
  color: var(--green-deep);
}
.cat-tile strong { display: block; font-size: 1.08rem; font-weight: 600; }
.cat-tile span { display: block; font-size: 0.9rem; color: var(--stone); line-height: 1.45; }

/* ================================================================= admin */
.admin-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--gap-md); align-items: start; }
@media (max-width: 940px) { .admin-shell { grid-template-columns: 1fr; } }

.sidenav {
  background: var(--white);
  border: var(--line);
  border-radius: var(--radius);
  padding: 8px;
  position: sticky;
  top: 100px;
}
@media (max-width: 940px) { .sidenav { position: static; } }  /* the wrapping rules live further down */
.sidenav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 500;
  white-space: nowrap;
}
.sidenav a:hover { background: var(--stone-wash); }
.sidenav a.is-active { background: var(--ink); color: var(--white); }
.sidenav a.is-active .badge { background: var(--white); color: var(--ink); }
.sidenav__group {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
  padding: var(--gap-sm) 14px 5px;
}

.review-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-sm);
}

/* =============================================================== utility */
.hidden      { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--white);
  padding: 12px 20px;
  z-index: 200;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-sm { margin-top: var(--gap-sm); }
.mt    { margin-top: var(--gap); }
.mt-md { margin-top: var(--gap-md); }
.mt-lg { margin-top: var(--gap-lg); }

.ref-code {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  background: var(--stone-wash);
  border: 1px solid var(--stone-pale);
  border-radius: var(--radius);
  padding: 3px 9px;
  white-space: nowrap;
}
.ref-code--lg { font-size: 1.7rem; padding: 10px 20px; display: inline-block; }

.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  flex: 0 0 auto;
  letter-spacing: 0.03em;
}
.avatar--green { background: var(--green); }
.avatar--sm { width: 32px; height: 32px; font-size: 0.8rem; }

.photo-frame {
  border: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--stone-wash);
}
.photo-frame img { width: 100%; }

/* ================================================================= print */
@media print {
  .masthead, .footer, .btn, .navtoggle, .flashes, .sidenav, .filterbar { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .card, .mission { border: 1px solid #999; break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}

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

/* ================================================================== shop */
.shop-grid {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: border-color 0.14s ease;
}
.product:hover { border-color: var(--green); }
.product__shot {
  display: block;
  background: var(--paper);
  border-bottom: var(--line);
  aspect-ratio: 1 / 1;
}
.product__shot img { width: 100%; height: 100%; object-fit: cover; }
.product__body { padding: var(--gap); display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.product__name {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}
.product__name a { color: var(--ink); text-decoration: none; }
.product__name a:hover { color: var(--green-deep); text-decoration: underline; }
.product__tagline { color: var(--stone); font-size: 0.95rem; flex: 1 1 auto; }
.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding-top: var(--gap-sm);
  border-top: var(--line);
  flex-wrap: wrap;
}
.product__price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

/* --- colour swatches --------------------------------------------------- */
.swatches { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--ink-12);
  box-shadow: inset 0 0 0 2px var(--white);
  display: inline-block;
  flex: 0 0 auto;
}
.swatch--lg { width: 34px; height: 34px; }

/* the colour picker on the product page */
.colour-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.colour-pick input { position: absolute; opacity: 0; pointer-events: none; }
.colour-pick label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 9px;
  border: 1px solid var(--stone-pale);
  border-radius: 22px;
  cursor: pointer;
  background: var(--white);
  font-size: 0.95rem;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.colour-pick label:hover { border-color: var(--stone); }
.colour-pick input:checked + label {
  border-color: var(--green);
  background: var(--green-wash);
  font-weight: 600;
}
.colour-pick input:focus-visible + label { outline: 3px solid var(--green); outline-offset: 2px; }

/* the size picker */
.size-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.size-pick input { position: absolute; opacity: 0; pointer-events: none; }
.size-pick label {
  min-width: 58px;
  text-align: center;
  padding: 11px 12px;
  border: 1px solid var(--stone-pale);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--white);
  font-weight: 500;
  transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}
.size-pick label:hover { border-color: var(--stone); }
.size-pick input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
  font-weight: 600;
}
.size-pick input:focus-visible + label { outline: 3px solid var(--green); outline-offset: 2px; }

/* --- product page ------------------------------------------------------ */
.product-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: start;
}
@media (max-width: 860px) { .product-view { grid-template-columns: 1fr; gap: var(--gap-md); } }
.product-view__shot {
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 100px;
}
@media (max-width: 860px) { .product-view__shot { position: static; } }
.product-view__price {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}

/* --- the "where the money goes" strip ---------------------------------- */
.gives {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.give {
  padding: var(--gap);
  background: var(--white);
  border: var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
}
.give strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--green-deep);
  line-height: 1;
  margin-bottom: 6px;
}

/* --- podcast card ------------------------------------------------------ */
.podcast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--gap-md);
  align-items: center;
  padding: var(--gap-md);
  background: var(--ink);
  color: var(--stone-pale);
  border-radius: var(--radius);
  border-left: 4px solid var(--green-light);
}
@media (max-width: 760px) {
  .podcast { grid-template-columns: 1fr; gap: var(--gap); text-align: left; }
}
.podcast h3 { color: var(--white); margin-bottom: 4px; }
/* The show's own badge, not our mark - no border or tint over it. */
.podcast__mark {
  width: 112px; height: 112px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.podcast__mark img { width: 100%; height: 100%; object-fit: contain; }
.podcast__mark svg { width: 34px; height: 34px; color: var(--green-light); }
@media (max-width: 760px) {
  .podcast__mark { width: 88px; height: 88px; }
}
.podcast a { color: var(--white); }

/* --- order summary ----------------------------------------------------- */
.order-line {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap-sm) 0;
  border-bottom: var(--line);
}
.order-line:last-child { border-bottom: 0; }
.order-line__shot {
  width: 68px; height: 68px;
  border-radius: var(--radius);
  border: var(--line);
  background: var(--paper);
  object-fit: cover;
  flex: 0 0 auto;
}
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap);
  padding-top: var(--gap-sm);
  margin-top: var(--gap-sm);
  border-top: 2px solid var(--stone-pale);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

/* ------------------------------------------------------- the admin rail */
/* Admin pages carry a sidebar plus a queue. Squeezing that into the reading
   shell is what forced every table to scroll sideways. */
.shell--wide { max-width: 1460px; }

/* ----------------------------------------------------------- work queue */
/* A queue of things waiting on a decision. Deliberately NOT a table: eight
   columns never fit beside the sidebar, and the title - the thing you
   actually read - was being crushed to one word per line. */
.queue {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.queue__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap);
  align-items: center;
  padding: var(--gap) var(--gap-md);
  border-bottom: var(--line);
  border-left: 4px solid transparent;
}
.queue__item:last-child { border-bottom: 0; }
.queue__item:hover { background: var(--paper); }
.queue__item--urgent { border-left-color: var(--urgent); }
.queue__item--soon   { border-left-color: var(--warn); }
.queue__item--open   { border-left-color: var(--green); }
.queue__item--done   { border-left-color: var(--stone-light); }

.queue__main { min-width: 0; }
.queue__pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
.queue__title {
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.005em;
  margin: 0 0 5px;
}
.queue__title a { color: var(--ink); text-decoration: none; }
.queue__title a:hover { color: var(--green-deep); text-decoration: underline; }
.queue__meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  font-size: 0.9rem;
  color: var(--stone);
}
.queue__meta .mono { font-size: 0.82rem; }
.queue__sep { color: var(--stone-light); }
.queue__flag {
  margin: 7px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--warn);
}
.queue__action { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }

@media (max-width: 700px) {
  .queue__item { grid-template-columns: 1fr; padding: var(--gap); }
  .queue__action { width: 100%; }
  .queue__action .btn { flex: 1 1 auto; }
}

/* ============================================== mobile: containment fixes */
/* A grid or flex child defaults to min-width:auto, so it refuses to shrink
   below its contents. That is what let a wide table drag the whole admin
   column - and the sidebar with it - past the edge of a phone screen, even
   though .table-wrap already had overflow-x:auto. Without this, the scroll
   container simply never gets the chance to do its job. */
.admin-shell > *,
.split > *,
.product-view > *,
.hero__grid > *,
.queue__item > * { min-width: 0; }

/* On a phone the sidebar wraps into rows rather than scrolling sideways.
   A scroll strip hides half the sections behind a gesture nobody discovers,
   and it cannot overflow the page if it is allowed to wrap. */
@media (max-width: 940px) {
  .sidenav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    max-width: 100%;
    padding: var(--gap-sm);
  }
  .sidenav a { flex: 0 1 auto; padding: 10px 14px; }
  .sidenav__group {
    flex: 1 0 100%;
    padding: 4px 2px 0;
    margin: 0;
  }
  .sidenav__group:first-child { padding-top: 0; }
}

/* Footer links sat 18px tall - too small to hit with a thumb. */
@media (max-width: 760px) {
  .footer__list li { margin-bottom: 2px; }
  .footer__list li a {
    display: inline-block;
    padding: 9px 0;
    min-height: 36px;
  }
  .footer__bar { gap: var(--gap-sm); line-height: 2; }
  .footer__bar a { display: inline-block; padding: 6px 0; }
}

/* ============================================================== partners */
/* A slow marquee of the churches standing with the project. The list is
   duplicated in the markup and the track slides exactly half its width, so
   the loop is seamless. With reduced-motion on it simply sits still and
   wraps - the names are the point, not the movement. */
.partners { align-self: center; }
.partners__window { overflow: hidden; position: relative; padding-block: var(--gap-sm); }
.partners__window::before,
.partners__window::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 44px;
  z-index: 1;
  pointer-events: none;
}
.partners__window::before { left: 0;  background: linear-gradient(to right, var(--white), transparent); }
.partners__window::after  { right: 0; background: linear-gradient(to left,  var(--white), transparent); }

.partners__track {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  padding-left: 44px;   /* clear of the fade, so item one is never half-hidden */
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: partner-scroll 32s linear infinite;
}
.partners__window:hover .partners__track,
.partners__window:focus-within .partners__track { animation-play-state: paused; }

.partner { flex: 0 0 auto; display: grid; place-items: center; min-width: 170px; }
.partner img {
  max-height: 96px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  /* Shown in their own colours. Desaturating somebody else's mark until you
     hover it is a habit worth breaking here - it makes a live partner look
     dormant, and it flattens the one logo whose green is the whole identity. */
}
.partner__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  white-space: nowrap;
}

/* The track holds the partner list repeated N times and slides by exactly one
   list-width, so the join is invisible. --partner-shift is set per repetition
   count: 2 reps -> 50%, 4 reps -> 25%. */
@keyframes partner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--partner-shift, -50%)); }
}
@media (prefers-reduced-motion: reduce) {
  .partners__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    gap: var(--gap-md);
    justify-content: center;
  }
  .partners__window::before, .partners__window::after { display: none; }
}

/* =============================================================== reviews */
.reviews__window { overflow: hidden; position: relative; }
.reviews__track {
  display: flex;
  gap: var(--gap);
  padding-left: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: review-scroll 46s linear infinite;
}
.reviews__window:hover .reviews__track,
.reviews__window:focus-within .reviews__track { animation-play-state: paused; }

.review {
  flex: 0 0 auto;
  width: min(420px, 82vw);
  background: var(--white);
  border: var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: var(--gap);
}
.review__body {
  margin: 0 0 var(--gap-sm);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  quotes: "\201C" "\201D";
}
.review__body::before { content: open-quote; color: var(--stone-light); }
.review__body::after  { content: close-quote; color: var(--stone-light); }
.review__by { font-size: 0.88rem; color: var(--stone); }

@keyframes review-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }
  .review { width: min(420px, 100%); }
}

/* --- a single review sitting under a finished mission ------------------ */
.review--inline {
  width: auto;
  margin-top: var(--gap-sm);
  background: var(--green-wash);
  border-color: var(--green-line);
}

/* ================================================= serve / get help doors */
.closing {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-md);
  flex-wrap: wrap;
  padding-top: var(--gap-md);
  border-top: var(--line);
}
.closing__doors { display: flex; gap: var(--gap); flex-wrap: wrap; }

.door { min-width: 190px; }
.door > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 0;
  list-style: none;
}
.door > summary::-webkit-details-marker { display: none; }
.door > summary::after {
  content: " +";
  color: var(--stone);
  font-weight: 400;
}
.door[open] > summary::after { content: " \2212"; }
.door__list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--gap-sm);
  border-top: var(--line);
}
.door__list li { margin: 0; }
.door__list a {
  display: block;
  padding: 9px 0;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--green-deep);
}
.door__list a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- founder */
.founder {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin: 0;
  text-align: left;
}
.founder img,
.founder__initials {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
}
.founder figcaption { display: flex; flex-direction: column; line-height: 1.35; }
.founder__role {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.founder strong { font-size: 1.05rem; }
.founder__title { font-size: 0.9rem; color: var(--stone); }

@media (max-width: 700px) {
  .closing { flex-direction: column; align-items: flex-start; }
}

/* ----------------------------------------------- scripture, and mirrored */
.scripture {
  background: var(--ink);
  color: var(--stone-pale);
  border-radius: var(--radius);
  padding: var(--gap-md);
}
.scripture .eyebrow { color: var(--stone-light); }
.scripture__verse {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}
.scripture hr { border: 0; border-top: 2px solid var(--green-light); width: 56px; margin: var(--gap-sm) 0; }

/* The mirrored one: same box, opposite colours and the body face instead of
   the display face, so the two read as a pair rather than a repeat. */
.scripture--mirror {
  background: var(--stone-wash);
  color: var(--ink);
  border: 1px solid var(--stone-pale);
}
.scripture--mirror .eyebrow { color: var(--stone); }
.scripture--mirror .scripture__verse {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
}
.scripture--mirror hr { border-top-color: var(--green); }

/* the line under the mark in the footer */
.footer__parent {
  margin: 0 0 2px;
  font-size: 0.95rem;
  color: var(--stone-pale);
}
.footer__parent strong { color: var(--white); font-weight: 600; }

/* ============================================================= checklist */
/* A list where each item is a promise or a requirement, so the marker is a
   tick rather than a bullet. */
.checklist { list-style: none; margin: 0 0 var(--gap-sm); padding: 0; }
.checklist li {
  position: relative;
  padding: 0 0 var(--gap-sm) 30px;
  line-height: 1.6;
}
.checklist li:last-child { padding-bottom: 0; }
.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 700;
}
.checklist--tight li { padding-bottom: 8px; padding-left: 26px; }
.private-box .checklist li::before { color: var(--stone); }

/* the inline decide form on the reviews queue */
.review-decide { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.review-decide__note {
  font-size: 0.9rem;
  padding: 9px 11px;
  border: 1px solid var(--stone-pale);
  border-radius: var(--radius);
}
@media (max-width: 700px) { .review-decide { min-width: 0; width: 100%; } }

/* Too few to loop: sit still, wrap, and centre. */
.reviews__track--still {
  animation: none;
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
}

/* Too few partners to loop convincingly: sit still, spread out, no fades. */
.partners__track--still {
  animation: none;
  width: auto;
  padding-left: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-lg);
}
.partners__window:has(.partners__track--still)::before,
.partners__window:has(.partners__track--still)::after { display: none; }