/* syrumbri.com shared styles. Keep this path stable: /assets/site.css */
:root{
  --sky:#EAF0F3; --paper:#FFFFFF; --ink:#18262E; --muted:#56656D;
  --bluestem:#2C5A86; --sunflower:#F2B705; --line:#C9D5DB; --error:#B3261E;
  --display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure:66ch;
}
@media (prefers-color-scheme: dark){
  :root{--sky:#111C22; --paper:#18252D; --ink:#E6EDF0; --muted:#9AAAB2; --bluestem:#7FB0DE; --line:#2C3D46; --error:#FF8A80}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:1.0625rem/1.6 var(--body)}
img{max-width:100%;height:auto}
a{color:var(--bluestem);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sunflower);outline-offset:3px;border-radius:2px}
.wrap{width:min(100% - 2.5rem, 64rem);margin-inline:auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem 1rem;z-index:10}

.site-header{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between}
.brand{font:700 1.35rem/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem;flex-wrap:wrap}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:700}
.site-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--sunflower)}

h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.25rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700}
p,li{max-width:var(--measure)}
.lede{font-size:1.25rem;color:var(--muted)}

main section{padding:3.5rem 0;border-top:1px solid var(--line)}
main section:first-child{border-top:0}
.page-head{padding:3.5rem 0 1rem}

/* Home hero: full-width photo with the headline over it. Swap /assets/hero/prairie.jpg to change the photo. */
.hero{position:relative;padding:0;margin-top:1.5rem;min-height:min(34rem,80vh);display:flex;align-items:flex-end;overflow:hidden;border-radius:6px}
.hero-img{position:absolute;inset:0;background:linear-gradient(rgba(10,20,26,0),rgba(10,20,26,.55)),url(/assets/hero/prairie.jpg) center 12%/cover no-repeat,#5b6b3a}
.hero-copy{position:relative;padding:3rem clamp(1.25rem,4vw,2.5rem) 2.5rem;color:#fff;width:100%}
.hero h1{font-size:clamp(2.8rem,9vw,6rem);line-height:1;letter-spacing:-.035em;max-width:none;margin-bottom:.35em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero .shout{display:inline-block;background:var(--sunflower);color:#18262E;padding:0 .12em .08em;text-shadow:none;transform:rotate(-1.5deg)}
@media (prefers-reduced-motion: no-preference){
  .hero .shout{animation:shout .6s cubic-bezier(.2,1.4,.4,1) .35s both}
  @keyframes shout{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:rotate(-1.5deg);opacity:1}}
}
.hero .lede{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero .btn{background:var(--sunflower);color:#18262E}
.photo-credit{position:absolute;right:.75rem;bottom:.6rem;margin:0;max-width:none;font-size:.75rem;color:#fff;opacity:.8;text-shadow:0 1px 3px rgba(0,0,0,.6)}

.listing{list-style:none;padding:0;margin:1.5rem 0 0}
.listing li{max-width:none;padding:1.1rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(8rem,14rem) 1fr;gap:.25rem 1.5rem}
.listing li:last-child{border-bottom:1px solid var(--line)}
.listing .kind{color:var(--muted);font-weight:700}
.listing h3{margin:0 0 .2rem}
.listing p{margin:0}
@media (max-width:40rem){.listing li{grid-template-columns:1fr}}
.empty{background:var(--paper);border-left:4px solid var(--sunflower);padding:1rem 1.25rem;margin-top:1.5rem;max-width:var(--measure)}
.empty p{margin:0}

.signup{background:var(--paper);padding:2rem;border-radius:6px;max-width:34rem;position:relative}
.signup label{display:block;font-weight:700;margin:0 0 .3rem}
.signup input[type=text],.signup input[type=email]{width:100%;font:inherit;padding:.7rem .8rem;border:2px solid var(--line);border-radius:4px;background:var(--sky);color:var(--ink);margin-bottom:1rem}
.signup input:focus{border-color:var(--bluestem);outline:none}
.signup .hp{position:absolute;left:-5000px}
.btn{font:700 1.05rem var(--body);background:var(--bluestem);color:var(--paper);border:0;border-radius:4px;padding:.8rem 1.4rem;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.6;cursor:wait}
.fine{font-size:.9rem;color:var(--muted);margin:.9rem 0 0}
.form-status{margin:1rem 0 0;font-weight:700;min-height:1.6em}
.form-status[data-state="error"]{color:var(--error)}

.site-footer{padding:2.5rem 0 3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.site-footer p{margin:.25rem 0}