/* Daily Bread House - shared stylesheet */
:root{
  --night:#0E0B0A; --night-2:#171210; --night-3:#231b17;
  --paper:#F7F4EE; --paper-2:#FFFFFF;
  --ink:#191310; --ink-soft:#5C5148;
  --amber:#F2A81D; --violet:#6B4E9E; --flame:#E4572E; --leaf:#2E8B57;
  --on-dark:#F6F1EA; --on-dark-soft:#BCB0A5;
  --bg:var(--paper); --surface:var(--paper-2); --fg:var(--ink); --fg-soft:var(--ink-soft);
  --line:#E2DACE;
  --display:"Archivo","Segoe UI",system-ui,sans-serif;
  --body:"Public Sans","Segoe UI",system-ui,sans-serif;
  --wrap:1200px; --r:4px;
  --rainbow:linear-gradient(90deg,var(--flame),var(--amber),var(--leaf),#2B7FBF,var(--violet),var(--flame));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0E0B0A;--surface:#171210;--fg:#F6F1EA;--fg-soft:#B7ABA0;--line:#2C231D;}
}
:root[data-theme="dark"]{--bg:#0E0B0A;--surface:#171210;--fg:#F6F1EA;--fg-soft:#B7ABA0;--line:#2C231D;}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17.5px/1.62 var(--body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;font-variant-ligatures:none;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;margin:0 0 .45em}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:1.28rem;letter-spacing:-.02em;line-height:1.16}
p{margin:0 0 1.05em;max-width:66ch}
.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 2.6rem,760px);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--amber);color:#161009;padding:.7rem 1.1rem;font-weight:700}
.eyebrow{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;margin:0 0 1.1rem;color:var(--flame)}
.lede{font-size:clamp(1.08rem,1.9vw,1.3rem);line-height:1.55}
.rule{height:5px;border:0;margin:0;background:var(--rainbow);background-size:220% 100%;animation:slide 22s linear infinite}
@keyframes slide{to{background-position:220% 0}}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.7rem;font-family:var(--body);font-weight:700;
  font-size:.98rem;text-decoration:none;border:2px solid transparent;border-radius:2px;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-amber{background:var(--amber);color:#171009;border-color:var(--amber)}
.btn-amber:hover{background:#ffbc3c;border-color:#ffbc3c}
/* Outline button. Defaults to INK so it is legible on the paper sections,
   and switches to the light treatment only inside a dark context.
   It used to be light-on-anything, which made "Follow on Instagram" on the
   donate page invisible: white text on a cream background. A button that
   renders but cannot be seen is worse than one that is missing, because
   nothing looks broken. */
.btn-outline{color:var(--fg);border-color:var(--fg-soft)}
.btn-outline:hover{border-color:var(--flame);color:var(--flame)}
.sec-dark .btn-outline,.phero .btn-outline,.vband .btn-outline,.apply .btn-outline,.vhero .btn-outline,.hero .btn-outline{color:var(--on-dark);border-color:rgba(246,241,234,.45)}
.sec-dark .btn-outline:hover,.phero .btn-outline:hover,.vband .btn-outline:hover,.apply .btn-outline:hover,.vhero .btn-outline:hover,.hero .btn-outline:hover{border-color:var(--amber);color:var(--amber)}
.btn-ink{color:var(--fg);border-color:var(--fg)}
.btn-ink:hover{background:var(--fg);color:var(--bg)}
.btn-night{background:var(--night);color:var(--on-dark);border-color:var(--night)}
.btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

/* header */
.site-head{position:absolute;inset:0 0 auto;z-index:30}
.site-head.solid{position:static;background:var(--night)}
.head-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.35rem 0}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--on-dark);
  font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.02em}
.ring{width:34px;height:34px;flex:none;object-fit:contain}
.ring i{width:13px;height:13px;border-radius:50%;background:var(--night);display:block}
.site-nav{display:flex;gap:1.9rem}
.site-nav a{color:rgba(246,241,234,.82);text-decoration:none;font-size:.93rem;font-weight:500;padding-bottom:3px;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--amber)}


/* sections */
.sec{padding:clamp(4rem,9vw,7rem) 0}
.sec-dark{background:var(--night);color:var(--on-dark)}
.sec-dark .eyebrow{color:var(--amber)}
.sec-dark p{color:var(--on-dark-soft)}
.sec-paper{background:var(--surface);border-block:1px solid var(--line)}
.head-2{max-width:20ch}

/* footer */
.site-foot{background:var(--night);color:var(--on-dark-soft);padding:4rem 0 2.4rem;font-size:.94rem}
.foot-grid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.site-foot h4{font-family:var(--body);color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;margin:0 0 .9rem}
.site-foot a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid rgba(246,241,234,.24)}
.site-foot a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.foot-fine{border-top:1px solid #2a211b;margin-top:3rem;padding-top:1.5rem;font-size:.83rem;color:#8b7f74}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .head-bar{flex-direction:column;align-items:flex-start;gap:.6rem;padding:1rem 0 .85rem}
  .site-nav{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:0 1.4rem;width:100%;justify-content:start}
  .site-nav a{margin-left:0;font-size:.92rem;min-height:44px;display:inline-flex;align-items:center;padding-bottom:0}
  /* On phones the header sits above the hero rather than over it: a two row
     nav on top of a photo is busy, and it collides on short viewports. */
  .site-head{position:static;background:var(--night)}
  .brand{min-height:44px}
  .site-foot a{display:inline-flex;align-items:center;min-height:44px}
  .foot-fine a{min-height:44px}
  .fact a{display:inline-flex;align-items:center;min-height:44px}
  .checks label{min-height:44px}
  .consent label{min-height:44px;align-items:center}
  .btn{padding:.95rem 1.5rem;min-height:48px}
  .hero-inner{padding-top:2.5rem!important}
  p{max-width:100%}
}
@media (max-width:520px){
  .site-nav{gap:0 1rem}
  .site-nav a{font-size:.88rem}
  .cta-row .btn,.hero-cta .btn{flex:1 1 100%;justify-content:center}
}