/* ============================================================
   Carisma Church — app / member area design system
   Self-contained (own tokens). Matches the white marketing site:
   white · warm ink · terracotta accent · Montserrat (the logo's face).
   ============================================================ */
:root {
  --white:   #fbfaf8;
  --paper:   #ffffff;
  --panel:   #f6f3ee;
  --ink:     #201d18;
  /* These four are set to clear WCAG 1.4.3 AA (4.5:1) on all three surfaces the
     site uses: white, the near-white page, and the warm panel. The previous
     values sat just under it, so the main call to action on every page
     ("Plan your first visit") read at 3.77:1 and every accent line at 3.84:1.
     Measured, not eyeballed: darkening the terracotta by about 12 per cent
     carries the whole palette over the line and keeps the colour recognisably
     the same. Do not lighten any of them back without re-measuring. */
  --muted:   #6f675c;
  --faint:   #776e63;
  --caramel: #a8512d;
  --caramel-d:#8f4222;
  --green:   #46603f;
  --line:    rgba(32,29,24,0.12);
  --line-2:  rgba(32,29,24,0.07);
  --ok:      #4b7d54;
  --warn:    #c78a2e;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --r:       14px;

  /* ---- Display type -------------------------------------------------------
     The headings are set in the logo's own face, Montserrat ExtraBold, so the
     page reads as coming from the same place as the mark. Everything routes
     through these three tokens: to go back to the editorial serif, set
     --font-display to "Fraunces", --display-weight to 300 and
     --display-tracking to -0.02em, and re-add Fraunces to the font link. */
  --font-display:      "Montserrat", system-ui, sans-serif;
  --display-weight:    800;
  --display-tracking:  -0.028em;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: "Montserrat", system-ui, sans-serif; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); margin: 0; }
.serif { font-family: var(--font-display); }   /* name kept for markup compatibility; it is the display face, not a serif */
.mono { font-family: ui-monospace, Menlo, monospace; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.2em; border-radius: 100px;
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; border: 1px solid transparent;
  transition: transform .3s var(--ease), background .25s, box-shadow .3s; }
.btn--primary { background: var(--caramel); color: #fff7ec; box-shadow: 0 10px 22px -14px rgba(150,66,40,.55); }
.btn--primary:hover { background: var(--caramel-d); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: rgba(32,29,24,.04); }
.btn--sm { padding: .5em .9em; font-size: .82rem; }
.btn--block { width: 100%; justify-content: center; }
/* A disabled button that looks live is a trap: on the giving screen "Issue all"
   is disabled until the charity's CRA details are filled in, and without this it
   looked exactly like a button that would issue receipts. Placed after the hover
   rules so it wins on equal specificity. */
.btn:disabled, .btn[disabled], .btn:disabled:hover, .btn[disabled]:hover {
  opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- Badges / chips ---- */
.badge { display: inline-flex; align-items: center; gap: .4em; padding: .25em .7em; border-radius: 100px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--line); color: var(--muted); background: var(--paper); }
.badge--accent { color: var(--caramel); border-color: rgba(168,81,45,.35); background: rgba(168,81,45,.06); }
.badge--green  { color: var(--green);  border-color: rgba(70,96,63,.3);  background: rgba(70,96,63,.06); }
.badge--muted  { color: var(--muted); }
.badge--dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }
.eyebrow { font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color: var(--faint); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column;
  gap: .3rem; padding: 1.3rem 1rem; background: var(--paper); border-right: 1px solid var(--line); }
.sidebar__brand { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem 1rem; }
.sidebar__brand svg { width: 30px; height: 26px; color: var(--ink); }
.sidebar__brand b { font-family: var(--font-display); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; }
.sidebar__group { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
  padding: 1rem .8rem .4rem; }
.navitem { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 10px;
  color: var(--muted); font-size: .92rem; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.navitem svg, .navitem .ic { width: 18px; height: 18px; flex: 0 0 18px; opacity: .8; }
.navitem:hover { background: var(--panel); color: var(--ink); }
.navitem.is-active { background: rgba(168,81,45,.09); color: var(--caramel); }
.navitem .tag { margin-left: auto; font-size: .66rem; color: var(--faint); }
.sidebar__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.userchip { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: 10px; }
.userchip:hover { background: var(--panel); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--caramel); color:#fff7ec;
  display: grid; place-items: center; font-weight: 600; font-size: .85rem; flex: 0 0 34px; font-family: var(--font-display); }
.userchip small { display: block; color: var(--faint); font-size: .72rem; }
.whoami { padding: .1rem .55rem .35rem; color: var(--faint); font-size: .7rem; line-height: 1.5; word-break: break-word; }
.whoami b { color: var(--muted); font-weight: 600; }
.whoami a { color: var(--caramel); text-decoration: none; border-bottom: 1px solid transparent; }
.whoami a:hover { border-bottom-color: currentColor; }

/* main */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem;
  padding: 1rem clamp(1.2rem, 3vw, 2.4rem); background: rgba(251,250,248,.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); }
.topbar h1 { font-size: 1.35rem; }
.topbar .sub { color: var(--muted); font-size: .85rem; }
.topbar__spacer { margin-left: auto; }
.hamburger { display: none; }
.content { padding: clamp(1.2rem, 3vw, 2.4rem); max-width: 1200px; width: 100%; }
.section { display: none; }
.section.is-active { display: block; animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform:none; } }

/* ---- Cards / panels / grids ---- */
.grid { display: grid; gap: 1.2rem; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 1.4rem; box-shadow: 0 20px 45px -34px rgba(60,45,25,.35); }
.card--pad-lg { padding: 1.8rem; }
.card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.card .muted, .muted { color: var(--muted); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.stat { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; }
.stat + .muted { margin-top: .3rem; font-size: .85rem; }
.hr { height: 1px; background: var(--line-2); margin: 1.2rem 0; border: 0; }

/* ---- Lists (events / items) ---- */
.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line-2); }
.row:last-child { border-bottom: 0; }
.row__date { flex: 0 0 56px; text-align: center; }
.row__date b { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; display: block; }
.row__date span { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.row__body { min-width: 0; flex: 1; }
.row__body b { font-weight: 600; }
.row__body p { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; }
.row__meta { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Calendar ---- */
.cal { }
.cal__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cal__head h2 { font-size: 1.5rem; }
.cal__nav { display: flex; gap: .4rem; margin-left: auto; }
.iconbtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; display: grid; place-items: center; color: var(--ink); font-size: 1rem; }
.iconbtn:hover { background: var(--panel); }
/* minmax(0,1fr) is essential — plain 1fr lets long event titles blow out the
   column widths and push Fri/Sat off the grid */
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.cal__dow { background: var(--panel); text-align: center; padding: .6rem 0; font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cal__cell { background: var(--paper); min-height: 118px; padding: .6rem .55rem; display: flex; flex-direction: column; gap: .3rem; }
.cal__cell.is-out { background: var(--white); }
.cal__cell .num { font-size: .82rem; color: var(--muted); font-weight: 600; }
.cal__cell.is-today .num { color: #fff7ec; background: var(--caramel); width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; }
/* allow two lines instead of harsh truncation — reads far better in narrow day cells */
.pill-event { font-size: .75rem; line-height: 1.25; padding: .25rem .45rem; border-radius: 6px; background: rgba(168,81,45,.1);
  color: var(--caramel-d); font-weight: 600; cursor: pointer; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal__cell.editable { cursor: pointer; }
.cal__cell.editable:hover { background: var(--panel); }
.cal__cell .addhint { opacity: 0; font-size: 1rem; color: var(--faint); align-self: flex-start; margin-top: auto; transition: opacity .2s; }
.cal__cell.editable:hover .addhint { opacity: .6; }

/* ---- Event editor modal ---- */
.modal { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 1.5rem;
  background: rgba(32,29,24,.42); overflow: auto; }
.modal__card { background: var(--paper); border-radius: 16px; width: 100%; max-width: 540px; padding: 1.8rem;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); max-height: 92vh; overflow: auto; }
.modal__card h2 { font-size: 1.5rem; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.swatches { display: flex; gap: .5rem; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; border: 2px solid transparent;
  transition: transform .15s; }
.swatch:hover { transform: scale(1.08); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.weekdays { display: flex; gap: .4rem; flex-wrap: wrap; }
.wd { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; font: inherit; font-weight: 600; font-size: .8rem; color: var(--muted); }
.wd.is-active { background: var(--caramel); color: #fff7ec; border-color: var(--caramel); }
.modal__foot { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.modal__foot .spacer { margin-left: auto; }
.btn--danger { background: transparent; color: #b3402e; border: 1px solid rgba(179,64,46,.3); }
.btn--danger:hover { background: rgba(179,64,46,.07); }
@media (max-width: 520px) { .form-2 { grid-template-columns: 1fr; } }

/* ---- My Profile ---- */
.profile { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }
.photo-up { text-align: center; }
.photo-up__img { width: 180px; height: 180px; border-radius: 22px; margin: 0 auto .9rem; background: var(--panel);
  display: grid; place-items: center; color: var(--faint); font-size: 2rem; overflow: hidden; border: 1px solid var(--line); }
.photo-up__img img { width: 100%; height: 100%; object-fit: cover; }
.chip-toggle { border: 1px solid var(--line); border-radius: 100px; padding: .45em 1em; font-size: .85rem; cursor: pointer;
  background: var(--paper); -webkit-user-select: none; user-select: none; transition: background .2s, border-color .2s; }
.chip-toggle.is-on { background: rgba(168,81,45,.1); border-color: rgba(168,81,45,.4); color: var(--caramel-d); font-weight: 600; }
.banner { background: rgba(168,81,45,.08); border: 1px solid rgba(168,81,45,.25); border-radius: 12px;
  padding: .9rem 1.2rem; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.banner p { margin: 0; color: var(--muted); font-size: .88rem; } .banner .spacer { margin-left: auto; }
@media (max-width: 680px) { .profile { grid-template-columns: 1fr; } }

/* ---- Messages / board ---- */
.compose { display: flex; gap: .8rem; margin-bottom: 1.4rem; align-items: flex-start; }
.compose textarea { flex: 1; min-height: 46px; }
.board { display: flex; flex-direction: column; gap: 1rem; }
.post { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); padding: 1.2rem 1.3rem;
  box-shadow: 0 16px 40px -34px rgba(60,45,25,.3); }
.post.unread { border-left: 3px solid var(--caramel); }
.post__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.post__head b { font-weight: 600; } .post__head .t { margin-left: auto; color: var(--faint); font-size: .78rem; }
.post__body { color: #3a352d; }
.replies { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: .8rem; }
.reply { display: flex; gap: .6rem; }
.reply .avatar { width: 28px; height: 28px; font-size: .7rem; flex: 0 0 28px; }
.reply__b b { font-size: .85rem; } .reply__b .t { color: var(--faint); font-size: .72rem; margin-left: .4rem; }
.reply__b p { margin: .15rem 0 0; font-size: .9rem; color: #3a352d; }
.reply-row { display: flex; gap: .5rem; margin-top: .8rem; }
.reply-row input { flex: 1; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--paper); }

/* ---- Notification bell + dropdown ---- */
.bell { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); cursor: pointer; display: grid; place-items: center; font-size: 1.05rem; }
.bell:hover { background: var(--panel); }
.badge-count { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--caramel);
  color: #fff7ec; font-size: .66rem; font-weight: 700; display: grid; place-items: center; }
.bell .badge-count { position: absolute; top: -5px; right: -5px; }
.navitem .badge-count { margin-left: auto; }
.notif { position: fixed; top: 62px; right: clamp(1rem,3vw,2.4rem); width: min(340px, 92vw); background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.35); z-index: 120; overflow: hidden; }
.notif__head { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-2); font-weight: 600; }
.notif__item { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line-2); font-size: .88rem; cursor: pointer; }
.notif__item:hover { background: var(--panel); } .notif__item:last-child { border-bottom: 0; }
.notif__item .t { color: var(--faint); font-size: .72rem; }
.notif__empty { padding: 1.6rem 1.1rem; text-align: center; color: var(--muted); font-size: .88rem; }

/* ---- Groups & Teams ---- */
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 1rem; }
.group-card { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); padding: 1.2rem 1.3rem;
  cursor: pointer; transition: transform .3s var(--ease), border-color .3s; box-shadow: 0 16px 40px -34px rgba(60,45,25,.3); }
.group-card:hover { transform: translateY(-3px); border-color: var(--line); }
.group-card__t { display: flex; align-items: center; gap: .55rem; }
.group-card__dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 12px; }
.group-card h4 { font-size: 1.05rem; }
.group-card p { font-size: .84rem; margin: .55rem 0 .7rem; }
.group-card .meta { font-size: .78rem; color: var(--faint); }
.member-line { display: flex; align-items: center; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--line-2); }
.member-line:last-child { border-bottom: 0; }
.member-line .who b { font-weight: 600; } .member-line .who span { color: var(--muted); font-size: .82rem; display: block; }
.member-line .rm { margin-left: auto; color: var(--muted); cursor: pointer; font-size: .8rem; background: none; border: 0; font-family: inherit; }
.member-line .rm:hover { color: #b3402e; }
.note-card { border: 1px solid var(--line); border-left: 3px solid var(--caramel); background: var(--panel);
  border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: .7rem; }
.note-card p { margin: 0; color: #3a352d; font-size: .92rem; } .note-card .by { color: var(--faint); font-size: .75rem; margin-top: .4rem; }

/* channel tabs (Messages) */
.channels { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.channel { border: 1px solid var(--line); background: var(--paper); border-radius: 100px; padding: .45em 1em; font-size: .85rem;
  font-weight: 600; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: .45rem; }
.channel .d { width: 9px; height: 9px; border-radius: 3px; }
.channel.is-active { background: var(--ink); color: #fff7ec; border-color: var(--ink); }
.chan-note { background: rgba(168,81,45,.06); border: 1px solid rgba(168,81,45,.2); border-radius: 12px; padding: .9rem 1.1rem;
  margin-bottom: 1.2rem; font-size: .9rem; } .chan-note b { color: var(--caramel-d); }

/* ---- Table (rota / members) ---- */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  font-weight: 600; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.table td { padding: .8rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:hover td { background: var(--panel); }

/* ---- Media ---- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.3rem; }
.media-card { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 20px 45px -34px rgba(60,45,25,.35); transition: transform .4s var(--ease), box-shadow .4s; cursor: pointer; }
.media-card:hover { transform: translateY(-4px); box-shadow: 0 28px 55px -34px rgba(60,45,25,.42); }
.media-card__thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, #efe7dc, #e5d8c6); position: relative;
  display: grid; place-items: center; }
.media-card__thumb .play { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.9);
  display: grid; place-items: center; color: var(--caramel); font-size: 1.1rem; box-shadow: 0 6px 20px -6px rgba(0,0,0,.3); }
.media-card__thumb.audio { background: linear-gradient(135deg, #e8ddcf, #d9c3ab); }
.media-card__b { padding: 1rem 1.1rem 1.2rem; }
.media-card__b h4 { font-size: 1.02rem; margin-bottom: .25rem; }
.media-card__b .muted { font-size: .82rem; }

/* ---- Knowledge base ---- */
.kb { display: grid; grid-template-columns: 240px 1fr; gap: 1.6rem; }
.kb__nav { display: flex; flex-direction: column; gap: .2rem; }
.kb__nav button { text-align: left; background: none; border: 0; font: inherit; color: var(--muted);
  padding: .6rem .8rem; border-radius: 10px; cursor: pointer; font-weight: 500; }
.kb__nav button:hover { background: var(--panel); color: var(--ink); }
.kb__nav button.is-active { background: rgba(168,81,45,.09); color: var(--caramel); }
.kb__article h2 { font-size: 1.8rem; margin-bottom: .5rem; }
.kb__article h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.kb__article p, .kb__article li { color: #3a352d; }
.kb__article ol, .kb__article ul { padding-left: 1.2rem; }
.kb__article li { margin: .4rem 0; }
.callout { border: 1px solid var(--line); border-left: 3px solid var(--caramel); background: var(--panel);
  padding: 1rem 1.2rem; border-radius: 10px; margin: 1.2rem 0; }
.callout.warn { border-left-color: var(--warn); }

/* ---- Forms ---- */
.field { display: block; margin-bottom: 1rem; }
.field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; }
.field input, .field select, .field textarea { width: 100%; padding: .7rem .9rem; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; background: var(--paper); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--caramel); outline-offset: 1px; border-color: transparent; }
.seg { display: inline-flex; background: var(--panel); border-radius: 100px; padding: 3px; }
.seg button { border: 0; background: none; font: inherit; font-weight: 600; font-size: .84rem; color: var(--muted);
  padding: .45em 1em; border-radius: 100px; cursor: pointer; }
.seg button.is-active { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px -4px rgba(0,0,0,.2); }

/* ---- Empty / locked ---- */
.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.locked { display: grid; place-items: center; gap: .8rem; padding: 4rem 1rem; text-align: center; color: var(--muted); }

/* ---- Role preview bar (DEMO ONLY) ---- */
.preview { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem .5rem 1rem; border-radius: 100px;
  background: var(--ink); color: #f4ede0; box-shadow: 0 16px 40px -12px rgba(0,0,0,.4); font-size: .82rem; }
.preview b { color: #fff; }
.preview select { background: #2c2822; color: #fff; border: 1px solid #48413a; border-radius: 100px;
  padding: .35em .8em; font: inherit; font-weight: 600; cursor: pointer; }
.preview .x { color: #b3a99b; font-size: .72rem; }

/* ============================================================
   Public site header (calendar.html / media.html / login.html)
   ============================================================ */
.site-nav { display: flex; align-items: center; gap: 2rem; padding: 1.1rem clamp(1.5rem,6vw,7rem);
  border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 30; background: rgba(251,250,248,.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-nav__brand { display: flex; align-items: center; gap: .6rem; position: relative; z-index: 50; }
.site-nav__brand svg { width: 34px; height: 30px; color: var(--ink); }
/* The wordmark is the logo's: geometric, bold, upper case, tightly tracked.
   The brand lockup is set tighter than the running headings. */
/* The wordmark, exactly as the church's logo sets it: CARISMA in Montserrat
   ExtraBold, CHURCH in Regular with wider tracking. Kept as real text rather
   than an image so it stays crisp at any size and can be read by anything. */
.site-nav__brand b { font-family: "Montserrat"; font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; }
.site-nav__brand b span { font-weight: 400; letter-spacing: .045em; margin-left: .18em; }
.site-nav__links { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1.2rem 1.5rem; font-size: .92rem; color: var(--muted); align-items: center; }
.site-nav__links a:hover { color: var(--ink); }
.site-nav__links a.is-active { color: var(--ink); font-weight: 600; }
.page-head { padding: clamp(2.5rem,7vw,5rem) clamp(1.5rem,6vw,7rem) 1rem; }
.page-head .eyebrow { color: var(--caramel); }
.page-head h1 { font-size: clamp(1.85rem,4.3vw,3rem); font-weight: var(--display-weight); margin-top: .6rem; line-height: 1.08; }
.page-head p { color: var(--muted); max-width: 52ch; margin-top: .8rem; }
.page-wrap { padding: 1.5rem clamp(1.5rem,6vw,7rem) 5rem; max-width: 1240px; }
/* wide variant for the calendar — the month grid needs the extra room */
.page-wrap--wide { max-width: 1560px; padding-left: clamp(1.5rem,4vw,4rem); padding-right: clamp(1.5rem,4vw,4rem); }
.page-head--wide { padding-left: clamp(1.5rem,4vw,4rem); padding-right: clamp(1.5rem,4vw,4rem); }
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin: 2rem 0 .6rem; }
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 1.6rem 0 .4rem; }
.prose p, .prose li { color: #3a352d; margin: .5rem 0; } .prose ul { padding-left: 1.2rem; }
.prose a { color: var(--caramel); }

/* responsive two-column layouts for public pages (collapse on mobile) */
.contact-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr); gap: 2.5rem; align-items: start; }
.cal-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: clamp(1.5rem,3vw,3rem); align-items: start; }
/* slim feature band — capped height so it frames the page instead of dominating it */
.cal-banner { border-radius: 18px; overflow: hidden; margin-bottom: 2.2rem; box-shadow: 0 26px 55px -32px rgba(60,45,25,.4); }
.cal-banner img { width: 100%; height: clamp(200px, 26vw, 380px); object-fit: cover; object-position: center 32%; display: block; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
/* calendar drops its sidebar earlier — below ~1040px the month grid gets too
   cramped sharing the row (day cells were squeezing to 64px at 900px) */
@media (max-width: 1040px) { .cal-layout { grid-template-columns: 1fr; } }

/* ---- Carisma Cast ---- */
.cast-h { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; display: flex; align-items: center; gap: .7rem; margin: 0; }
.cast-h span { font-family: "Montserrat"; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--caramel); background: rgba(168,81,45,.1); border: 1px solid rgba(168,81,45,.28); padding: .28em .7em; border-radius: 100px; }
.cast-sub { margin: .45rem 0 1rem; font-size: .9rem; }
.cast-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.6rem 0 1.1rem; }
.cast-link { font-size: .88rem; color: var(--caramel); font-weight: 600; display: inline-block; padding-block: .3rem; }
.cast-link:hover { text-decoration: underline; }
.cast-embed { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 55px -32px rgba(60,45,25,.45); background: var(--panel); }
.cast-embed iframe { display: block; width: 100%; border: 0; }
/* Spotify + YouTube side by side */
.cast-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.4rem,2.6vw,2.4rem); align-items: start; }
.cast-sub-h { font-family: "Montserrat"; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 .7rem; }
.cast-embed--video { aspect-ratio: 16/9; }
.cast-embed--video iframe { width: 100%; height: 100%; }
@media (max-width: 860px) { .cast-grid { grid-template-columns: 1fr; } }

/* featured newest message */
.cast-feature { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: clamp(1.4rem,2.6vw,2.4rem); align-items: center; }
.cast-feature__player { aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 30px 65px -30px rgba(60,45,25,.5); }
.cast-feature__player iframe { width: 100%; height: 100%; border: 0; display: block; }
.cast-feature__meta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem,1.8vw,1.55rem);
  line-height: 1.15; margin: .5rem 0 .4rem; letter-spacing: -0.01em; }
.cast-feature__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
@media (max-width: 860px) { .cast-feature { grid-template-columns: 1fr; } }

/* compact auto-fitting video grid — more per row as the screen grows */
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1.15rem; }
.vid-card { cursor: pointer; border: 0; padding: 0; background: none; text-align: left; font: inherit;
  display: flex; flex-direction: column; gap: .55rem; }
.vid-card__thumb { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--panel);
  box-shadow: 0 16px 34px -24px rgba(60,45,25,.5); }
.vid-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease); }
.vid-card:hover .vid-card__thumb img, .vid-card:focus-visible .vid-card__thumb img { transform: scale(1.06); }
.vid-card__play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .3s;
  background: linear-gradient(to top, rgba(20,14,8,.5), rgba(20,14,8,.12)); }
.vid-card:hover .vid-card__play, .vid-card:focus-visible .vid-card__play { opacity: 1; }
.vid-card__play span { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.94);
  color: var(--caramel); display: grid; place-items: center; font-size: .95rem; padding-left: 3px; }
.vid-card h3 { font-family: "Montserrat"; font-size: .88rem; font-weight: 600; line-height: 1.35; margin: 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vid-card time { font-size: .76rem; color: var(--faint); }

/* lightbox */
.vid-modal { position: fixed; inset: 0; z-index: 500; background: rgba(18,13,8,.86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: clamp(1rem,4vw,3rem); }
.vid-modal[hidden] { display: none; }
/* The hidden attribute must beat .btn's inline-flex and .authbar's flex, or the
   admin-only Add event button and an empty sign-in bar show to every visitor,
   which is exactly what happened on 2026-09-16. */
[hidden] { display: none !important; }
.vid-modal__inner { width: min(1100px, 100%); }
.vid-modal__frame { aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
.vid-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid-modal__title { color: #f4ede0; font-family: var(--font-display); font-weight: 700; font-size: .98rem; margin: 1rem 0 0; text-align: center; }
.vid-modal__close { position: absolute; top: clamp(.8rem,2vw,1.6rem); right: clamp(.8rem,2vw,1.6rem);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244,237,224,.3); background: rgba(0,0,0,.35);
  color: #f4ede0; font-size: 1.05rem; cursor: pointer; }
.vid-modal__close:hover { background: rgba(0,0,0,.6); }

/* definition list used on the contact page */
.visit__info { display: grid; gap: 1.1rem; margin: 0; }
.visit__info dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.visit__info dd { margin: 0; }
.visit__info a { display: inline-block; padding-block: .3rem; }
.visit__info a:hover { color: var(--caramel); }

/* shared footer for public sub-pages */
.site-foot { border-top: 1px solid var(--line-2); padding: clamp(2.5rem,6vw,4rem) clamp(1.5rem,6vw,7rem) 2rem; margin-top: 2rem; }
.site-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem 2.5rem; }
.site-foot__brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; } .site-foot__brand svg { width: 32px; height: 28px; color: var(--ink); } .site-foot__brand b { font-family: "Montserrat"; font-size: .92rem; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; }
.site-foot__brand b span { font-weight: 400; letter-spacing: .045em; margin-left: .18em; }
.site-foot__brand-col p { margin: 0; font-size: .88rem; line-height: 1.6; }
/* Links get a real tap area. At .92rem with no padding these boxes were about
   19px tall, under the 24px minimum, which is a fiddly target on a phone. */
.site-foot__col { display: flex; flex-direction: column; gap: .05rem; }
.site-foot__col h4 { font-family: "Montserrat"; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: .3rem; }
.site-foot__h { font-family: "Montserrat"; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: .3rem; }   /* was an <h4>; a footer column label is not a section of the page */
.site-foot__col a { color: var(--muted); font-size: .92rem; transition: color .2s; padding-block: .5rem; } .site-foot__col a:hover { color: var(--caramel); }
.site-foot__base { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-2); font-size: .8rem; color: var(--faint); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }
/* On the admin screens "Privacy" and "Sign out" are the whole footer, and at
   15px tall they were under the 24px tap minimum on a phone (2026-09-23). */
.site-foot__base a { display: inline-block; padding-block: .45rem; }
@media (max-width: 640px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } .site-foot__brand-col { grid-column: 1 / -1; } }
@media (max-width: 400px) { .site-foot__grid { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 100; transform: translateX(-100%);
    transition: transform .35s var(--ease); box-shadow: 0 0 60px -10px rgba(0,0,0,.3); }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open::after { content:""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 90; }
  .hamburger { display: grid; place-items: center; width: 40px; height: 40px; border:1px solid var(--line);
    border-radius: 10px; background: var(--paper); cursor: pointer; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .kb { grid-template-columns: 1fr; }
  /* Phones can't fit the event pills, so each day shows a coloured dot per
     event and the "Coming up" list below carries the detail. Tapping the day
     opens that day's events. */
  .cal__cell { min-height: 62px; padding: .4rem .3rem; align-items: center; cursor: pointer; }
  .cal__cell .pill-event, .cal__cell .cal__more, .cal__cell .addhint { display: none; }
  .cal__cell .cal__dots { display: flex; }
  .cal__dow .dow-long { display: none; }
  .cal__dow .dow-short { display: inline; }
}
/* hamburger toggle — hidden on desktop, shown on phones */
.site-nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 60; }
.site-nav__toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .3s; }
.site-nav.open .site-nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.site-nav.open .site-nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Phones: keep the header a slim single bar (it was 254px / 30% of the screen
   when the links wrapped). Links move into a full-screen overlay. */
@media (max-width: 860px) {
  /* backdrop-filter must be OFF here: it makes .site-nav the containing block
     for position:fixed children, which sized the menu overlay to the 71px bar
     instead of the viewport. Solid background gives the same look. */
  .site-nav { padding-top: .85rem; padding-bottom: .85rem;
    /* FULLY opaque, which is what the line above always meant by "solid". At .97
       the header was 3% see-through with no blur behind it, so text scrolling
       under it ghosted faintly through the bar and read as a smudge on a phone
       (seen in a screenshot 2026-09-24). Desktop keeps the blur, where the same
       translucency reads as frosted glass on purpose. */
    -webkit-backdrop-filter: none; backdrop-filter: none; background: #fbfaf8; }
  .site-nav__toggle { display: flex; }
  .site-nav__links {
    /* nowrap is essential: column + the inherited wrap made the links spill
       into extra columns off-screen (247px of horizontal scroll) */
    position: fixed; inset: 0; margin: 0; flex-direction: column; flex-wrap: nowrap;
    justify-content: center; align-items: center; overflow-y: auto;
    gap: 1.6rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink);
    background: rgba(251,250,248,.98); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s; z-index: 40;
  }
  .site-nav.open .site-nav__links { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav__links .btn { font-family: "Montserrat"; margin-top: .4rem; }
  /* full-height banner on phones so the graphic's text isn't cropped away */
  .cal-banner img { height: auto; }
}
@media (max-width: 560px) {
  .site-nav__links { font-size: 1.35rem; gap: 1.35rem; }
  .row { flex-wrap: wrap; }
  .row__meta { margin-left: 72px; justify-content: flex-start; }
}
:focus-visible { outline: 2px solid var(--caramel); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   SHARED CALENDAR + MEMBERS AREA  (2026-09 rebuild)
   The calendar is public and server-backed; the members area is
   three tabs instead of the old twelve-section portal.
   ============================================================ */

/* ---- rows are buttons now (whole row is the hit target) ---- */
.row { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
  border-bottom: 1px solid var(--line-2); cursor: pointer; }
.list .row:last-child { border-bottom: 0; }
.list .row:hover { background: var(--panel); }
.row__sub { display: block; margin-top: .15rem; color: var(--muted); font-size: .85rem; }
.row__body b { display: block; }
/* In the narrow "Coming up" sidebar the category badges were squeezing the
   title into four ragged lines. Give the text a floor and let the badges drop
   to their own line instead of stealing width from it. */
.row { flex-wrap: wrap; row-gap: .4rem; }
.row__body { flex: 1 1 150px; min-width: 150px; }
.card .row__meta { margin-left: auto; }

/* ---- the always-true weekly schedule band ---- */
.sched { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2.2rem); margin-bottom: 1.8rem; }
.sched__main { flex: 1 1 320px; min-width: 0; }
.sched__main h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: .3rem 0 .5rem; }
.sched__main p { margin: 0 0 .4rem; color: var(--muted); font-size: .94rem; max-width: 56ch; }
.sched__addr a { color: var(--caramel); font-weight: 600; }
.sched__addr a:hover { text-decoration: underline; }

/* ---- sign-in strip ---- */
.authbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  border: 1px solid var(--line-2); border-radius: 100px; padding: .55rem .7rem .55rem 1.2rem;
  margin-bottom: 1.6rem; font-size: .88rem; color: var(--muted); background: var(--paper); }
.authbar .spacer { margin-left: auto; }
.authbar b { color: var(--ink); }
.who { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.who__av { width: 30px; height: 30px; border-radius: 50%; background: var(--caramel); color: #fff7ec;
  display: grid; place-items: center; font-size: .72rem; font-weight: 600; flex: none; }

/* ---- calendar head ---- */
.cal__month { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem; }
.cal__nav { display: flex; align-items: center; gap: .5rem; }
/* Explanatory lines cap their measure. Running the full width of the calendar
   page these reached 171 characters per line on a laptop, against the 80 that
   WCAG 1.4.8 allows and the 60 to 75 that actually reads comfortably. */
.cal__hint { font-size: .85rem; margin: -.4rem 0 1rem; max-width: 68ch; }
.cal__legend { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.cal__more { font-size: .7rem; }
.cal__dots { display: none; gap: 3px; margin-top: auto; }
.cal__dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.cal__dow .dow-short { display: none; }
.cal-state { padding: 3.5rem 1rem; text-align: center; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper);
  display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.cal-state--bad { color: #8d3427; }
.card--visit { margin-top: 1.2rem; text-align: center; display: grid; gap: .6rem; }
.card--visit p { margin: 0 0 .4rem; }

/* ---- modals ---- */
.modal__title { font-size: 1.5rem; }
.modal__sub { margin: .2rem 0 1rem; }
.modal__desc { margin: 0 0 1rem; color: var(--muted); white-space: pre-wrap; }
.modal__tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.modal__card--form .field { margin-bottom: 1rem; }
.hint { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; }
.callout--soft { background: rgba(168,81,45,.07); border: 1px solid rgba(168,81,45,.22);
  border-radius: 10px; padding: .75rem 1rem; font-size: .85rem; color: var(--muted); margin: .4rem 0 0; }

/* ---- members area ---- */
.member-area { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: 3rem; }
.member-hd { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.8rem; }
.member-hd h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.member-hd p { margin: .2rem 0 0; font-size: .88rem; }
.member-hd__av { width: 56px; height: 56px; border-radius: 50%; background: var(--caramel); color: #fff7ec;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.2rem; flex: none; }

/* Only one of these is ever shown: the admin screen, or the "nothing here" note
   for someone signed in who does not look after the calendar. */
.pane { display: none; }
.pane.is-active { display: block; }
.pane__note { font-size: .84rem; margin: 1rem .2rem 0; max-width: 68ch; }
/* Same cap for the explanatory paragraphs inside the admin cards, which ran to
   138 characters per line on a wide screen. */
.member-area .card > p.muted { max-width: 68ch; }


/* ---- directory ---- */
.dir-row { display: flex; align-items: center; gap: .9rem; padding: .95rem 0;
  border-bottom: 1px solid var(--line-2); }
.dir-row:last-child { border-bottom: 0; }
.dir-row__av { width: 40px; height: 40px; border-radius: 50%; background: var(--panel); color: var(--muted);
  display: grid; place-items: center; font-size: .82rem; font-weight: 600; flex: none; }
.dir-row__body { min-width: 0; flex: 1; }
.dir-row__body b { display: block; font-weight: 600; }
.dir-row__contact { display: block; margin-top: .2rem; font-size: .84rem; }
.dir-row__contact a { color: var(--caramel); }
.dir-row__contact a:hover { text-decoration: underline; }
.dir-row__admin { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  justify-content: flex-end; }

@media (max-width: 620px) {
  .member-hd__av { width: 46px; height: 46px; font-size: 1rem; }
  /* Once this stacks, `flex: 1 1 320px` on the text block starts applying 320px to
     its HEIGHT rather than its width, which opened about 100px of dead space above
     the button. Let it size to its content instead. */
  .sched { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .sched__main { flex: none; }
  .sched .btn { width: 100%; justify-content: center; }
  .authbar { border-radius: 14px; padding: .9rem 1rem; }
  .authbar .spacer { display: none; }
  .cal__head { justify-content: space-between; }
  .dir-row__admin { margin-left: 0; width: 100%; justify-content: flex-start; padding-left: 52px; }
  .dir-row { flex-wrap: wrap; }
  .form-2 { grid-template-columns: 1fr; }
  .modal { padding: 0; align-items: flex-end; }
  .modal__card { max-width: none; border-radius: 18px 18px 0 0; max-height: 94vh; padding: 1.4rem 1.2rem 1.6rem; }
  .modal__foot { flex-wrap: wrap; }
  .modal__foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* Signing in is for the two or three people who look after the calendar, so the
   way in is a quiet footer link rather than a button in the main navigation. */
.staff-link, .visit__legal a#staffAuth { opacity: .75; }
.staff-link:hover, .visit__legal a#staffAuth:hover { opacity: 1; color: var(--caramel); }

/* ============================================================
   CONTENT PAGES  (generated by scripts/build-pages.mjs)
   ============================================================ */
/* ONE rule owns the reading column. The page head and the prose share it, so the
   h1 and the first paragraph start on exactly the same pixel. Previously they
   were sized separately and sat 86px apart, which is the single most visible
   layout fault a page can have. */
.prose-page, .page-head--prose {
  max-width: 78ch; margin-inline: auto;
  /* The 1.5rem floor matches --pad on the homepage and .page-wrap on the
     hand-written pages. It used to be 1.25rem, so a phone visitor moving from
     /visit to /contact saw the text jump 4px sideways (2026-09-24). The 2.5rem
     ceiling stays lower than theirs on purpose: this is a centred reading
     column, so its side space comes from margin-inline rather than padding. */
  padding-left: clamp(1.5rem, 5vw, 2.5rem); padding-right: clamp(1.5rem, 5vw, 2.5rem);
}
.prose-page { padding-bottom: 4rem; }
/* ExtraBold reads as a heading at a smaller size than a light serif did, but not
   this much smaller: at the phone end this had fallen to 1.18x the body size,
   and under about 1.25x a heading stops separating sections at a glance. */
.prose-page h2 { text-wrap: balance; font-size: clamp(1.42rem, 2.1vw, 1.6rem); margin: 2.8rem 0 .75rem; scroll-margin-top: 90px; line-height: 1.2; }
.prose-page p { margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.7; }
.prose-page a:not(.btn):not(.rel-card) { color: var(--caramel-d); text-decoration: underline; text-underline-offset: 2px; }
.prose-page a:not(.btn):not(.rel-card):hover { color: var(--caramel); }
/* Buttons keep their own colours; the rule above must never repaint their labels. */
.prose-page .btn--primary { color: #fff7ec; }
.prose-page .btn--ghost { color: var(--ink); }

/* The answer-first block: the 40-80 word direct answer, set apart so a reader
   gets it before any narrative and an answer engine can lift it cleanly. */
.answer { border-left: 3px solid var(--caramel); background: var(--panel);
  border-radius: 0 14px 14px 0; padding: 1.2rem 1.4rem; margin: 0 0 2rem; }
.answer p { margin: 0; font-size: 1.08rem; line-height: 1.65; }

.tick { margin: 0 0 1.2rem; padding-left: 1.1rem; }
.tick li { margin-bottom: .45rem; line-height: 1.6; }

/* Real tables, because assistants lift from them readily. On a phone each row
   becomes a labelled card WITHOUT the element ceasing to be a table. */
.table-wrap { overflow-x: auto; margin: 0 0 1.6rem; }
.t { width: 100%; border-collapse: collapse; font-size: .96rem; }
.t caption { text-align: left; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding-bottom: .7rem; }
.t th, .t td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.t thead th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--panel); }
/* No fixed width: let the browser size the first column to its content instead
   of handing it a third of the table and starving the cells that carry meaning. */
.t tbody th { font-weight: 600; padding-right: 1.4rem; }
.t tbody tr:last-child th, .t tbody tr:last-child td { border-bottom: 0; }
/* Links inside a cell are a target on their own, not running prose, so the
   inline-link exemption does not apply: give them a real tap height. */
.t a { display: inline-block; padding-block: .3rem; }

.blk-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.2rem 0 0; }
.blk-cta .btn { text-decoration: none; }

.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.rel-card { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper);
  text-decoration: none !important; transition: border-color .2s, transform .25s var(--ease); }
.rel-card:hover { border-color: rgba(168,81,45,.45); transform: translateY(-2px); }
.rel-card b { font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: -0.005em; color: var(--ink); }
.rel-card span { font-size: .88rem; color: var(--muted); line-height: 1.5; }

.blk-contact { margin-top: 2.6rem; padding: 1.4rem 1.5rem; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line-2); }
.blk-contact h2 { margin-top: 0; font-size: 1.25rem; }
.blk-contact p { margin: 0; }

@media (max-width: 620px) {
  /* Stack each row into a labelled card. data-label is written by the generator. */
  .t, .t thead, .t tbody, .t tr, .t th, .t td { display: block; }
  /* The caption must be told to be a block too. Left as display:table-caption
     inside a table whose parts are all blocks, it collapsed into an 8-character
     vertical strip down the left of the page. */
  .t caption { display: block; width: 100%; }
  .t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .t tbody tr { border: 1px solid var(--line-2); border-radius: 12px; margin-bottom: .8rem;
    padding: .3rem .2rem; background: var(--paper); }
  .t tbody th, .t tbody td { width: auto; border-bottom: 0; padding: .5rem .9rem; }
  .t tbody td::before { content: attr(data-label); display: block; font-size: .72rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: .15rem; }
  .t tbody th { font-size: 1.02rem; padding-bottom: .1rem; }
  .prose-page { max-width: none; }
}

/* Let the browser even out heading line breaks rather than filling the first
   line and leaving one word stranded on the second. Silently ignored where
   unsupported, so there is no fallback to write. */
.page-head h1, .page-head--prose h1, .prose-page h2, .prose-page h3 { text-wrap: balance; }

/* Three related cards were resolving to two columns because 3 x 230px plus the
   gaps just missed the column width, leaving a hole on the last row. */
.rel-grid { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

/* A time or a short label should not wrap mid-value. */
.t td[data-label="Time"], .t th[data-label="Time"], .t tbody th:first-child { text-wrap: nowrap; }
@media (max-width: 620px) { .t tbody th:first-child { text-wrap: wrap; } }

.site-foot__paoc { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: .9rem; }

.sched__pre { margin: .35rem 0 .6rem; color: var(--ink); font-size: .98rem; }
.sched__pre strong { font-family: "Montserrat"; font-weight: 700; letter-spacing: .02em; }

/* A table cell that is nothing but one short link ("Em português", "Youth at
   Carisma") should not wrap word by word when a neighbouring prose column hogs
   the width. Phones stack the table so this applies only where columns exist. */
@media (min-width: 621px) { .t td:last-child > a:only-child { white-space: nowrap; } }

/* Three columns of prose in a 700px measure squeezes every one of them to a word
   per line, which is unreadable and looks broken. A three-column table therefore
   stacks into labelled cards at tablet width, not just on a phone. The generator
   adds .t--wide wherever a table has three or more columns. */
@media (max-width: 860px) {
  .t--wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .t--wide, .t--wide tbody, .t--wide tr, .t--wide th, .t--wide td { display: block; width: auto; }
  /* The caption needs telling too. Left as display:table-caption inside a table
     that is now display:block it shrinks to its narrowest word and sets one word
     per line, which is what the three-column tables did at 768px. */
  .t--wide caption { display: block; width: 100%; }
  .t--wide tr { border: 1px solid var(--line-2); border-radius: 12px; padding: .9rem 1rem; margin-bottom: .8rem; }
  .t--wide th, .t--wide td { border: 0; padding: .25rem 0; }
  .t--wide tbody th:first-child { font-size: 1.02rem; margin-bottom: .2rem; text-wrap: wrap; }
  .t--wide tbody td::before { content: attr(data-label); display: block; font-size: .72rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .t--wide td:last-child > a:only-child { white-space: normal; }
}

/* Form status line. Colour alone is never the signal: the message says what
   happened, aria-live announces it, and aria-invalid marks the field itself. */
.form-error { color: #a8402a; font-weight: 600; }
.form-success { color: #3f6b43; font-weight: 600; }
[aria-invalid="true"] { border-color: #a8402a; }

/* ---- Ministry cards ------------------------------------------------------
   One box per gathering. auto-fit with a minmax floor so the grid reflows
   without a media query, and minmax(0,...) so a long name cannot widen a track. */
/* 210px, not 248px: with three ministries the old floor allowed only two
   columns in this measure, so the third card sat alone against an empty cell
   (2026-09-24). At 210px all three share one row on a tablet and a laptop, and
   a phone still stacks them because min() caps the floor at the full width. */
.mcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1rem; margin: 1.4rem 0 2rem; }
.mcard { background: var(--paper); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 1.25rem 1.3rem 1.35rem; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.mcard:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -30px rgba(60,45,25,.4); }
.mcard__name { font-size: 1.08rem; margin: 0 0 .7rem; }
.mcard__facts { margin: 0 0 .8rem; display: grid; gap: .45rem; }
.mcard__facts > div { display: grid; grid-template-columns: 3.1rem 1fr; gap: .6rem; align-items: baseline; }
.mcard__facts dt { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.mcard__facts dd { margin: 0; font-size: .9rem; color: var(--ink); }
.mcard__text { font-size: .94rem; line-height: 1.6; color: var(--muted); margin: 0 0 1rem; flex: 1; }
.mcard__link { font-size: .88rem; font-weight: 600; color: var(--caramel-d);
  text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; padding-block: .25rem; }
.mcard__link:hover { color: var(--caramel); }

/* ---- Location map --------------------------------------------------------- */
.map-embed { margin: 1.4rem 0 1rem; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-2); background: #eee7dd; aspect-ratio: 16 / 9; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.6rem; }
@media (max-width: 620px) { .map-embed { aspect-ratio: 4 / 3; } }

/* ---- Calendar change requests -------------------------------------------- */
/* Honeypot. Off-screen rather than display:none, because some bots skip inputs
   that are not rendered at all, and a real person never reaches it: it is out of
   the tab order and hidden from assistive tech by aria-hidden on its wrapper. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.req { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  padding: .95rem 0; border-bottom: 1px solid var(--line-2); }
.req:last-child { border-bottom: 0; }
.req--done { opacity: .55; }
.req__main { flex: 1 1 260px; min-width: 0; }
.req__head { margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .98rem; }
.req__what { margin: .1rem 0 .35rem; font-size: .9rem; color: var(--muted); }
.req__by { margin: 0; font-size: .8rem; }
.req__acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.req__recent { margin: 1.2rem 0 .2rem; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); }

/* ============================================================
   EVENT EDITOR, SCOPE QUESTION, LEADERS' HUB  (2026-09-23)
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pressed-state groups use aria-pressed so a screen reader hears which colour
   and which visibility are chosen, not just a sighted user. */
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px -4px rgba(0,0,0,.2); }
.fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.fieldset legend { font-size: .8rem; font-weight: 600; margin-bottom: .4rem; padding: 0; }

/* Date, start, end on one line on a wide screen; the date gets its own line on a
   phone so the two times still sit side by side. */
.form-when { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); gap: .8rem; }
.form-when .field { margin-bottom: .6rem; }
@media (max-width: 620px) {
  .form-when { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .form-when > .field:first-child { grid-column: 1 / -1; }
}
.timechips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; font-size: .8rem; }
.chip { border: 1px solid var(--line); background: var(--paper); border-radius: 100px; padding: .35em .85em;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink); cursor: pointer; min-height: 32px; }
.chip:hover { background: var(--panel); }

/* Colour is a labelled choice, not a row of unnamed dots: the name is what the
   public legend will say, so the person picking it should see the same word. */
.cchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: .45rem; }
.cchip { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; min-height: 40px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.cchip i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: none; }
.cchip:hover { background: var(--panel); }
.cchip[aria-pressed="true"] { border-color: var(--c); background: var(--t); box-shadow: inset 0 0 0 1px var(--c); }

.ed__note { margin: 0 0 1rem; }
.ed__err { margin: .2rem 0 0; font-size: .88rem; }
.ed__err:empty { display: none; }

/* A hidden (staff only) event is marked by its outline rather than by fading
   it, because fading the text would drop it under the 4.5:1 floor. */
.pill-event.is-hidden { outline: 1.5px dashed currentColor; outline-offset: -1.5px; }
.cal__dots i.is-hidden { box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px currentColor; opacity: .55; }
.cal__legend-hidden { border-style: dashed; }
.cal__cell[role="button"]:focus-visible { outline: 2px solid var(--caramel); outline-offset: -2px; border-radius: 0; }
.cal__cell[role="button"] { -webkit-tap-highlight-color: rgba(168,81,45,.12); }   /* the site's own tint, not the browser's blue */

/* The "which dates?" question sits on top of the editor, in its own layer. */
.modal--ask { z-index: 330; }
.modal__card--ask { max-width: 470px; }
.ask__body { margin: .5rem 0 0; }
.choices { display: grid; gap: .5rem; margin-top: 1.1rem; }
.choice { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; background: var(--paper); }
.choice input { margin: .2rem 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--caramel); }
.choice b { display: block; font-weight: 600; font-size: .95rem; }
.choice small { display: block; color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.choice:has(input:checked) { border-color: rgba(168,81,45,.55); background: rgba(168,81,45,.05); }
.btn--danger-solid { background: #a8402a; color: #fff; }        /* 6.1:1 */
.btn--danger-solid:hover { background: #8f3422; }

/* Card headings on the admin screen are h2 (the page's h1 is "Church admin"),
   sized like the h3 they replaced so the outline is right and nothing moves. */
.card__title { font-size: 1.15rem; margin: 0 0 .3rem; }
.card__head .card__title { margin: 0; }

/* ---- the admin screen's window onto the hub ---- */
.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.4rem; }
.admin-cards .card { display: flex; flex-direction: column; margin: 0; }
.admin-cards .card > .btn { align-self: flex-start; margin-top: auto; }
.hub-peek { margin: 0 0 1.2rem; }
.hub-peek__label { margin: 0 0 .3rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.hub-peek__text { margin: 0; white-space: pre-wrap; color: var(--ink); font-size: .94rem; line-height: 1.55; }

/* ---- leaders' hub ---- */
.hub { max-width: 820px; margin-inline: auto; padding-top: clamp(1.5rem, 4vw, 3rem); }
.hub__head { margin-bottom: 1.6rem; }
.hub__head h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: .4rem 0 .5rem; }
.hub__head p { margin: 0; max-width: 58ch; }
.hub__head .eyebrow { color: var(--caramel); }
.hub__section-h { font-size: .72rem; font-family: "Montserrat"; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 .7rem; }
.hub__pinned { margin-bottom: 1.6rem; }
.hub__pinned .hmsg { border: 1px solid rgba(168,81,45,.3); border-left: 3px solid var(--caramel);
  background: rgba(168,81,45,.05); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: .7rem; }
.hub__compose { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 1rem 1.1rem; box-shadow: 0 20px 45px -34px rgba(60,45,25,.35); margin-bottom: 2rem; }
.hub__compose textarea { width: 100%; min-height: 3.2rem; max-height: 22rem; resize: vertical; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: 10px; font: inherit; line-height: 1.5; background: var(--paper); color: var(--ink); }
.hub__compose textarea:focus { outline: 2px solid var(--caramel); outline-offset: 1px; border-color: transparent; }
.hub__compose-row { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; margin-top: .7rem; }
.hub__pin { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; cursor: pointer; min-height: 32px; }
.hub__pin input { width: 18px; height: 18px; accent-color: var(--caramel); margin: 0; }
.hub__kbd { font-size: .78rem; margin-left: auto; }
.hub__compose .form-error { margin: .6rem 0 0; font-size: .88rem; }
.hub__compose .form-error:empty { display: none; }
.hday { font-family: "Montserrat"; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 1.6rem 0 .4rem; display: flex; align-items: center; gap: .8rem; }
.hday::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.hmsg { display: flex; gap: .85rem; padding: .85rem 0; }
.hub__feed .hmsg + .hmsg { border-top: 1px solid var(--line-2); }
.hmsg--new { box-shadow: inset 3px 0 0 var(--caramel); padding-left: .9rem; }
.hmsg__av { width: 38px; height: 38px; border-radius: 50%; background: var(--panel); color: var(--muted); flex: none;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.hmsg--mine .hmsg__av { background: var(--caramel); color: #fff7ec; }
.hub__pinned .hmsg__av { background: var(--paper); }
.hub__pinned .hmsg--mine .hmsg__av { background: var(--caramel); }
.hmsg__body { min-width: 0; flex: 1; }
.hmsg__meta { margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-size: .88rem; }
.hmsg__meta b { font-weight: 700; }
.hmsg__meta time { color: var(--muted); font-size: .8rem; }   /* --faint measured 4.49:1 on the pinned tint */
.hmsg__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; color: #2c2822; }
.hmsg__text a { color: var(--caramel-d); text-decoration: underline; text-underline-offset: 2px; }
.hmsg__acts { display: flex; gap: .3rem 1rem; flex-wrap: wrap; margin-top: .3rem; }
.linkbtn { background: none; border: 0; padding: .35rem 0; min-height: 28px; font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--muted); cursor: pointer; }
.linkbtn:hover { color: var(--ink); text-decoration: underline; }
.linkbtn--danger:hover { color: #a8402a; }
@media (max-width: 620px) {
  .hub__kbd { display: none; }
  .hub__compose-row .btn { margin-left: auto; }
}

/* ---- leaders' hub: signed out, and older messages (2026-09-24) ---- */
.hub__signedout { position: sticky; top: 0; z-index: 80; display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem .8rem; padding: .8rem 1.1rem; background: #8d3427; color: #fff; font-size: .92rem; line-height: 1.45; }
.hub__signedout a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.hub__signedout .btn { margin-left: auto; color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.hub__older { text-align: center; margin: 1.4rem 0 0; }

/* ---- a person's page: portrait beside the answer, photos in the body --------
   Added 2026-09-25 for /pastor. The portrait sits beside the answer-first block
   rather than above it, so the first screen is a face AND the answer. On a phone
   it stacks, portrait first, at a size that does not push the answer off screen. */
.lead-portrait { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.6rem;
  align-items: center; margin: 0 0 2rem; }
.lead-portrait .answer { margin: 0; }
.lead-portrait__img { margin: 0; }
.lead-portrait__img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 20px; box-shadow: 0 22px 44px -28px rgba(60,45,25,.55); }
@media (max-width: 620px) {
  .lead-portrait { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .lead-portrait__img { width: min(62%, 220px); }
}

.fig { margin: 2.2rem auto; }
.fig img { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--panel);
  box-shadow: 0 26px 55px -32px rgba(60,45,25,.5); }
.fig--wide { max-width: 640px; }
.fig figcaption { margin-top: .7rem; font-size: .88rem; color: var(--muted); text-align: center; }

/* ---- "Our leadership" on the About page (2026-09-26) ------------------------
   Staff who opted in and were approved. Round photos read as people rather than
   as thumbnails; a person without a photo gets their initials on the brand
   colour, so a half-filled list never looks broken. */
.team { margin: 2.4rem 0 0; }
.team[hidden] { display: none !important; }
.team__intro { color: var(--muted); max-width: 60ch; }
.team__grid { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1.6rem 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.team__card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.team__photo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: .7rem;
  background: var(--panel); box-shadow: 0 18px 36px -24px rgba(60,45,25,.55); }
.team__photo--initials { display: grid; place-items: center; background: var(--caramel); color: #fff7ec;
  font-weight: 800; font-size: 2.2rem; letter-spacing: .02em; }
.team__name { font-size: 1.02rem; line-height: 1.3; }
.team__title { font-size: .86rem; color: var(--caramel-d); font-weight: 600; }
.team__bio { font-size: .88rem; color: var(--muted); margin: .45rem 0 0; max-width: 30ch; line-height: 1.5; }
@media (max-width: 480px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .8rem; }
  .team__photo { width: 104px; height: 104px; }
  .team__photo--initials { font-size: 1.8rem; }
  .team__bio { font-size: .84rem; }
}

/* ---- My profile (2026-09-26) ---- */
.profile { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: start; }
.profile__photo { display: grid; justify-items: center; gap: .7rem; text-align: center; }
.profile__img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; background: var(--panel); display: grid;
  place-items: center; font-size: 3rem; font-weight: 800; color: #fff7ec; overflow: hidden; }
.profile__img--initials { background: var(--caramel); }
.profile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile__photo-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.profile__check { display: flex; gap: .7rem; align-items: flex-start; margin: .4rem 0 1.1rem; font-size: .95rem; line-height: 1.45; }
.profile__check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--caramel); flex: none; }
.profile__status { padding: .8rem 1rem; border-radius: 10px; background: var(--panel); font-size: .92rem; line-height: 1.5; margin: 0 0 1.2rem; }
.profile__status--live { background: rgba(75,125,84,.12); }
.profile__count { font-size: .78rem; color: var(--muted); text-align: right; margin-top: .25rem; }
.profile__danger { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .9rem; }
@media (max-width: 700px) {
  .profile { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}

/* ---- leadership list on the admin screen ---- */
.lead-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center;
  padding: .9rem 0; border-top: 1px solid var(--line-2); }
.lead-row:first-child { border-top: 0; }
.lead-row__av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--caramel); color: #fff7ec;
  display: grid; place-items: center; font-weight: 800; }
.lead-row__who b { display: block; }
.lead-row__who .row__sub { font-size: .85rem; }
.lead-row__side { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.lead-edit { grid-column: 1 / -1; background: var(--panel); border-radius: 12px; padding: 1.1rem 1.1rem .9rem; margin-top: .4rem; }
.lead-edit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.5rem; gap: 0 .8rem; }
.lead-edit__photo { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.lead-edit .field { margin-bottom: .8rem; }
@media (max-width: 560px) {
  .lead-row { grid-template-columns: 44px minmax(0, 1fr); }
  .lead-row__av { width: 44px; height: 44px; }
  .lead-row__side { grid-column: 2; justify-content: flex-start; }
  .lead-edit__grid { grid-template-columns: minmax(0, 1fr); }
  .lead-edit__grid .field--order { width: 6rem; }
}

/* ---- the church's own sign-in pages (2026-09-26) ----
   One narrow card, big touch targets, the message in plain words right above the
   button. This congregation's leaders skew older and sign in on phones. */
.auth-page { display: grid; place-items: start center; min-height: 60vh; padding-top: clamp(1.5rem, 6vh, 4rem); }
.auth-card { width: min(100%, 26rem); }
.auth-title { font-size: clamp(1.5rem, 4vw, 1.9rem); margin: 0 0 .5rem; }
.auth-lead { margin: 0 0 1.4rem; font-size: .96rem; line-height: 1.55; }
.auth-card .field input { font-size: 1.05rem; padding: .8rem .95rem; }
.pw { position: relative; }
.pw input { padding-right: 4.6rem !important; }
.pw__show { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent;
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--caramel-d); padding: .55rem .7rem; min-height: 44px; cursor: pointer; border-radius: 8px; }
.pw__show:focus-visible { outline: 2px solid var(--caramel); }
.auth-msg { color: #8d3427; font-size: .92rem; font-weight: 600; min-height: 1.3em; margin: .2rem 0 .8rem; }
.auth-msg:empty { min-height: 0; margin: 0; }
.auth-foot { text-align: center; margin: 1.1rem 0 0; }
.auth-link { border: 0; background: none; font: inherit; color: var(--caramel-d); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; padding: .6rem .4rem; min-height: 44px; }
.auth-card .btn--block { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }

/* ---- adding a person (owners) ---- */
.add-person { background: var(--panel); border-radius: 12px; padding: 1rem 1.1rem .9rem; margin: 0 0 1rem; }
.add-person__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr); gap: 0 .8rem; }
.add-person .field { margin-bottom: .7rem; }
@media (max-width: 760px) { .add-person__grid { grid-template-columns: minmax(0, 1fr); } }