/* Daily Bread House - inner page layout */
.phero{position:relative;overflow:hidden;background:var(--night);color:var(--on-dark)}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.phero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,11,10,.88) 0%,rgba(14,11,10,.55) 50%,rgba(14,11,10,.95) 100%),
             linear-gradient(90deg,rgba(14,11,10,.82) 0%,rgba(14,11,10,.2) 72%)}
.phero .wrap{position:relative;z-index:2;padding-block:clamp(4rem,10vw,7rem)}
.phero h1{color:#fff;max-width:14ch}
.phero h1 em{font-style:normal;color:var(--amber)}
.phero .lede{max-width:48ch;color:rgba(246,241,234,.92)}

.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:2.8rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;position:relative;overflow:hidden;
  transition:transform .3s ease,border-color .3s ease}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--bar,var(--amber))}
.card:nth-child(2){--bar:var(--leaf)} .card:nth-child(3){--bar:var(--violet)} .card:nth-child(4){--bar:var(--flame)}
.card:hover{transform:translateY(-5px);border-color:var(--fg-soft)}
.card h3{margin-bottom:.45rem}
.card p{font-size:.97rem;color:var(--fg-soft);margin:0 0 .8rem}
.card .more{font-weight:700;text-decoration:none;color:var(--flame);border-bottom:2px solid transparent}
.card .more:hover{border-bottom-color:var(--flame)}

/* Figures. Used on the-need.html, where every number is sourced and dated.
   The number leads, the sentence explains it, the attribution keeps it
   honest. All three belong together: a big figure with no source on a
   charity page is just decoration, and a reader who checks will find it. */
.stats{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));margin-top:2.6rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.6rem;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--bar,var(--amber))}
.stat:nth-child(2){--bar:var(--leaf)} .stat:nth-child(3){--bar:var(--violet)} .stat:nth-child(4){--bar:var(--flame)}
.stat b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.1rem,5vw,2.9rem);color:var(--fg)}
.stat span{display:block;margin-top:.65rem;font-size:.97rem;color:var(--fg-soft)}
.stat cite{display:block;margin-top:.9rem;font-style:normal;font-size:.8rem;letter-spacing:.02em;color:var(--fg-soft);opacity:.8}
.sec-dark .stat{background:rgba(246,241,234,.055);border-color:rgba(246,241,234,.16)}
.sec-dark .stat b{color:#fff}
.sec-dark .stat span{color:rgba(246,241,234,.86)}
.sec-dark .stat cite{color:rgba(246,241,234,.62)}

/* Source list. Deliberately plain and complete. */
.srcs{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.1rem}
.srcs li{padding-left:1.1rem;border-left:3px solid var(--line);font-size:.93rem;color:var(--fg-soft);line-height:1.5}
.srcs a{color:var(--fg);font-weight:700}

.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.02fr .98fr}.split.flip .split-media{order:-1}}
.split-media img{width:100%;border-radius:var(--r)}
.frame{position:relative}
.frame::before{content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:60%;
  background:var(--rainbow);background-size:200% 100%;z-index:-1;border-radius:var(--r)}

.pull{font-family:var(--display);font-weight:700;font-size:1.24rem;line-height:1.32;letter-spacing:-.02em;
  border-left:4px solid var(--amber);padding-left:1.3rem;margin:1.9rem 0 0}
.note{border-left:4px solid var(--violet);padding:.2rem 0 .2rem 1.3rem;color:var(--fg-soft);max-width:60ch}

/* fact strip */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin-top:2.6rem}
.fact{background:var(--surface);padding:1.5rem}
.fact dt{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--flame);margin:0 0 .5rem}
.fact dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.06rem;line-height:1.28;letter-spacing:-.02em}
.fact dd small{display:block;font-family:var(--body);font-weight:400;font-size:.86rem;color:var(--fg-soft);letter-spacing:0;margin-top:.35rem}

/* bank details block */
.bank{background:var(--night);color:var(--on-dark);border-radius:var(--r);padding:clamp(1.6rem,4vw,2.4rem);max-width:520px;margin-top:2rem}
.bank dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.4rem;margin:0}
.bank dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--amber);align-self:center}
.bank dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* prose for legal pages */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:2.6rem}
.prose h3{margin-top:1.8rem;font-size:1.1rem}
.prose ul{padding-left:1.2rem;color:var(--fg-soft)}
.prose li{margin-bottom:.5rem}
.prose p{color:var(--fg-soft)}
.prose a{color:var(--flame);font-weight:600}
.updated{font-size:.88rem;color:var(--fg-soft);border-top:1px solid var(--line);padding-top:1rem;margin-top:3rem}

/* ---------- volunteer form ---------- */
.vform{margin-top:2.4rem;max-width:760px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fgrid2{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.field{margin:0 0 1.1rem}
.field label,.fset legend,.consent label{display:block;font-family:var(--body);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--on-dark);margin:0 0 .5rem}
.field label span,.consent label span{color:var(--amber);letter-spacing:.1em}
.field input,.field textarea{width:100%;font:400 1rem/1.5 var(--body);color:var(--on-dark);
  background:rgba(255,255,255,.05);border:1px solid #3a2f27;border-radius:3px;padding:.85rem 1rem}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7d7167}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--amber);background:rgba(255,255,255,.08)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.fset{border:0;padding:0;margin:0 0 1.5rem}
.checks{display:flex;flex-wrap:wrap;gap:.7rem}
.checks label{display:inline-flex;align-items:center;gap:.55rem;margin:0;text-transform:none;letter-spacing:0;
  font-weight:500;font-size:.97rem;color:var(--on-dark-soft);background:rgba(255,255,255,.05);
  border:1px solid #3a2f27;border-radius:999px;padding:.55rem 1rem;cursor:pointer}
.checks label:hover{border-color:var(--amber);color:var(--on-dark)}
.checks input{accent-color:var(--amber);width:16px;height:16px}
.consent{margin:1.6rem 0 0}
.consent label{display:flex;gap:.7rem;align-items:flex-start;text-transform:none;letter-spacing:0;
  font-weight:400;font-size:.95rem;color:var(--on-dark-soft);line-height:1.5}
.consent input{accent-color:var(--amber);width:17px;height:17px;margin-top:.15rem;flex:none}
.vform button{border:0;font-family:var(--body)}