/* Gorrell Street Neighborhood Association. Palette is taken from the logo (olive ink, pale lime) plus the orange of the volunteers' shirts. */
@font-face{font-family:"Big Shoulders Display";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-style:normal;font-display:swap;src:url(/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/source-serif-4-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/source-serif-4-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/source-serif-4-latin-600-normal.woff2) format("woff2")}

:root{
  --ink:#26251a;        /* logo olive-black */
  --ink-soft:#4a4a36;   /* body secondary text, 8:1 on paper */
  --paper:#f6f7ea;
  --lime:#dfe3a3;       /* logo lettering */
  --lime-soft:#eceecb;
  --orange:#e8601c;     /* volunteer shirts; ink text on it is 5.6:1 */
  --orange-text:#a93d08;/* orange safe for text on paper, 6:1 */
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --gutter:16px;
  --max:1120px;
}
@media (min-width:720px){:root{--gutter:32px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.65;overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:var(--orange-text);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--orange);color:var(--ink);padding:.6rem 1rem;font-family:var(--display);font-weight:700;font-size:1.2rem;z-index:10;text-decoration:none}
.skip:focus{top:.5rem}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,8vw,5.5rem)}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
h3{font-size:clamp(1.5rem,3vw,2rem);font-weight:700}
h4{font-size:1.5rem;font-weight:700}
p{margin:0 0 1em;max-width:66ch}
ul{padding:0;margin:0}

/* Header */
.site-head{background:var(--ink);color:var(--lime)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1.5rem;padding-block:.75rem}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--lime);text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;letter-spacing:.01em}
.brand img{width:48px;height:48px}
.brand:hover{color:#fff}
.nav{display:flex;flex-wrap:wrap;list-style:none;gap:0 1.25rem}
.nav a{display:block;padding:.55rem 0;color:var(--lime);text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.3rem;border-bottom:3px solid transparent}
.nav a:hover{color:#fff;border-bottom-color:var(--lime)}
.nav a[aria-current=page]{color:#fff;border-bottom-color:var(--orange)}
@media (max-width:540px){.brand{font-size:1.1rem}.nav{gap:0 1rem;width:100%}.nav a{font-size:1.2rem}}

/* Buttons and links */
.btn{display:inline-block;background:var(--orange);color:var(--ink);padding:.7rem 1.4rem;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.1;text-decoration:none;border:3px solid var(--ink);border-radius:2px}
.btn:hover{background:var(--ink);color:var(--lime)}
.on-dark .btn{border-color:var(--lime)}
.on-dark .btn:hover{background:var(--lime);color:var(--ink)}
.more{font-family:var(--display);font-weight:700;font-size:1.3rem}

/* Home hero */
.hero{background:var(--ink);color:var(--lime);display:grid}
.hero-text{padding:2.5rem var(--gutter) 2.25rem;max-width:calc(var(--max) / 2 + var(--gutter));margin-left:auto;width:100%}
.hero h1{color:var(--lime);margin-bottom:.35em}
.hero .tagline{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);color:#fff;margin-bottom:1.5rem;line-height:1.1}
.hero-photo{min-height:260px}
.hero-photo img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:560px}
  .hero-text{display:flex;flex-direction:column;justify-content:center;padding-block:3rem}
}

/* Page heads */
.pagehead{position:relative;background:var(--ink);color:var(--lime);overflow:hidden}
.pagehead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.pagehead .wrap{position:relative;padding-block:3.25rem 3rem}
.pagehead h1{color:var(--lime);margin:0 0 .3em}
.pagehead p{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.8rem);color:#fff;line-height:1.15;margin:0;max-width:30ch}

/* Sections */
.section{padding-block:3rem}
.section.tint{background:var(--lime-soft)}
.section.dark{background:var(--ink);color:#f1f2dc}
.section.dark h2,.section.dark h3{color:var(--lime)}
.section.dark a{color:var(--lime)}
.section.orange{background:var(--orange);color:var(--ink)}
.split{display:grid;gap:1.75rem 3rem;align-items:start}
@media (min-width:860px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split.wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.split.center{align-items:center}}
figure{margin:0}
figure img{width:100%}
figcaption{font-size:.95rem;color:var(--ink-soft);margin-top:.5rem}
.photo img{aspect-ratio:3/2;object-fit:cover}
.photo.tall img{aspect-ratio:4/5;object-fit:cover}

/* Three beliefs: ruled columns, not cards */
.trio{display:grid;gap:0;margin-top:1rem}
.trio>div{padding:1.5rem 0;border-top:3px solid var(--ink)}
.trio h3{margin-bottom:.35em}
@media (min-width:800px){.trio{grid-template-columns:repeat(3,1fr);column-gap:2.5rem}.trio>div{padding-top:1.25rem}}

/* Street signs (About) */
.streets{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:1.25rem 0 0}
.streets li{background:var(--ink);color:var(--lime);border:3px solid var(--lime);outline:3px solid var(--ink);outline-offset:0;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;padding:.5rem .9rem;border-radius:3px;margin:3px}

/* About text rows */
.row{display:grid;gap:.25rem 3rem;padding-block:1.75rem;border-top:3px solid var(--ink)}
.row h2{font-size:clamp(1.8rem,3.6vw,2.5rem)}
@media (min-width:860px){.row{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.team{display:grid;gap:2rem 1.5rem;margin-top:1.5rem}
@media (min-width:640px){.team{grid-template-columns:repeat(3,1fr)}}
.team img{aspect-ratio:4/5;object-fit:cover;object-position:center 18%;margin-bottom:.75rem;border-bottom:6px solid var(--orange)}
.team h3{margin:0}
.team p{margin:0 0 .4rem;font-style:italic}
.team .links{list-style:none;display:flex;gap:1rem;font-size:1rem}

/* Events */
.event{padding-block:2.5rem;border-top:3px solid var(--ink)}
.event:first-of-type{border-top:0}

/* Projects: address plates */
.house{padding-block:1.75rem;border-top:3px solid var(--ink)}
.plate{display:inline-flex;align-items:baseline;gap:.6rem;margin:0 0 1rem;background:var(--lime);color:var(--ink);border:4px solid var(--ink);border-radius:6px;padding:.3rem 1rem .4rem;box-shadow:inset 0 0 0 3px var(--lime),inset 0 0 0 5px var(--ink)}
.plate .num{font-size:clamp(2.4rem,7vw,3.8rem);line-height:.95;font-weight:800}
.plate .st{font-size:clamp(1.4rem,3.5vw,2rem);font-weight:700}
.gallery{display:grid;gap:.75rem}
@media (min-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery.three{grid-template-columns:repeat(3,1fr)}}
.gallery img{aspect-ratio:3/2;object-fit:cover;background:var(--lime-soft)}

/* Contact */
.people{display:grid;gap:2rem 3rem;margin-top:1.5rem}
@media (min-width:700px){.people{grid-template-columns:1fr 1fr}}
.person{border-top:3px solid var(--ink);padding-top:1rem}
.person h3,.person h4{margin-bottom:.3em}
.person ul{list-style:none}
.person li{margin:.1rem 0}
.person a{font-weight:600}
.section.dark .person{border-color:var(--lime)}

/* Blog */
.meta{color:var(--ink-soft);font-size:1rem}
.comment{border-top:3px solid var(--ink);padding-top:1rem;margin-top:1rem}

/* Footer */
.site-foot{background:var(--ink);color:#e4e6c4;padding-block:2.25rem;font-size:1rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;justify-content:space-between;align-items:center}
.site-foot a{color:var(--lime)}
.site-foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.site-foot p{margin:0}
.notfound{padding-block:5rem;text-align:left}
.btn.ink{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.btn.ink:hover{background:var(--lime);color:var(--ink)}
.section.dark .meta{color:var(--lime)}
.banner img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 35%}
@media (min-width:860px){.banner img{aspect-ratio:21/8}}
.banner{margin-bottom:1rem}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem)}
@media (min-width:900px){.hero h1{font-size:clamp(3rem,5vw,4.6rem)}}