:root{
  --linen: #F9F2EC;
  --linen-deep: #F1E7DA;
  --board: #EFE2D0;
  --card: #FFFCF7;
  --ink: #112B3A;
  --ink-soft: #4C6270;
  --berry: #B0435E;
  --berry-deep: #8E3049;
  --gold: #D9932E;
  --gold-deep: #B87820;
  --shadow: rgba(17,43,58,0.18);
  --serif: 'Lora', Georgia, serif;
  --sans: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
  --hand: 'Caveat', cursive;
  --wrap: 1180px;
}
*{ box-sizing:border-box; }
body{
  margin:0; background: var(--linen); color: var(--ink);
  font-family: var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width: var(--wrap); margin:0 auto; padding:0 32px; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family: var(--serif); margin:0; }

/* subtle linen texture via layered radial noise */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(rgba(46,38,32,0.035) 1px, transparent 1px);
  background-size: 3px 3px; opacity:0.5;
}

/* ---------- stitched divider, the signature motif ---------- */
.stitch{ position:relative; height:14px; margin: 0; }
.stitch::before, .stitch::after{
  content:''; position:absolute; left:0; right:0; height:0;
  border-top: 3px dashed var(--berry); opacity:0.85;
}
.stitch::before{ top:3px; }
.stitch::after{ top:9px; border-top-color: var(--gold); opacity:0.85; }

/* ---------- Header ---------- */
header{ background: var(--card); position:relative; z-index:10; }
.header-row{
  display:flex; align-items:center; justify-content:space-between; padding:20px 0;
  flex-wrap:wrap; gap:16px;
}
.wordmark{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.wordmark svg{ width:38px; height:38px; }
.wordmark span{ font-family: var(--serif); font-weight:700; font-size:1.25rem; color:var(--ink); }
nav.primary{ display:flex; gap:28px; flex-wrap:wrap; }
nav.primary a{ text-decoration:none; font-weight:600; font-size:0.95rem; color:var(--ink-soft); }
nav.primary a:hover{ color: var(--berry-deep); }
.header-side{ display:flex; align-items:center; gap:18px; }
.tel{ font-size:0.85rem; color: var(--ink-soft); }
.btn{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-family: var(--sans); font-weight:700; font-size:0.92rem;
  padding:11px 24px; border-radius:999px; border:2px solid var(--ink);
}
.btn-solid{ background: var(--berry); border-color: var(--berry-deep); color: var(--card); }
.btn-solid:hover{ background: var(--berry-deep); }
.btn-line{ background:transparent; border-color: var(--ink); color:var(--ink); }
.btn-line:hover{ background: var(--ink); color: var(--card); }
.btn-donate{
  background: var(--gold); border-color: var(--gold-deep); color: var(--ink);
  box-shadow: 3px 3px 0 var(--gold-deep);
}
.btn-donate:hover{ transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--gold-deep); }

/* ---------- Hero: pinned note + corkboard collage ---------- */
.hero{ padding: 64px 0 40px; position:relative; z-index:1; }
.hero-note{
  max-width: 620px; margin: 0 auto 56px; text-align:center;
}
.eyebrow{
  font-family: var(--sans); font-weight:700; font-size:0.78rem; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--berry-deep); margin-bottom:16px;
}
h1.headline{
  font-size: clamp(2.3rem, 4.2vw, 3.4rem); font-weight:700; line-height:1.15;
  margin-bottom:20px; color:var(--ink);
}
h1.headline em{ font-style:italic; color: var(--berry-deep); }
.hero p.lede{ font-size:1.12rem; color: var(--ink-soft); margin-bottom:28px; }
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.corkboard{
  background: var(--board);
  border-radius: 10px;
  padding: 56px 40px 64px;
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(46,38,32,0.08);
}
.seal{
  position:absolute; top:-34px; right:28px; width:92px; height:92px;
  transform: rotate(8deg); filter: drop-shadow(0 8px 14px var(--shadow));
  background: var(--card); border-radius:50%; padding:8px;
}
.polaroids{ display:flex; justify-content:center; gap:34px; flex-wrap:wrap; }
.polaroid{
  background: var(--card); padding: 14px 14px 22px; width:210px;
  box-shadow: 0 10px 22px var(--shadow); position:relative;
}
.polaroid:nth-child(1){ transform: rotate(-4deg); }
.polaroid:nth-child(2){ transform: rotate(2deg); }
.polaroid:nth-child(3){ transform: rotate(-2deg); }
.polaroid:nth-child(4){ transform: rotate(3.5deg); }
.polaroid:hover{ transform: rotate(0deg) scale(1.04); transition: transform .25s ease; z-index:5; }
.polaroid .tape{
  position:absolute; top:-14px; left:50%; transform: translateX(-50%) rotate(-3deg);
  width:64px; height:26px; background: rgba(184,134,46,0.55); border:1px solid rgba(184,134,46,0.3);
}
.polaroid .shot{
  aspect-ratio: 1/1; background: linear-gradient(135deg, var(--gold) 0%, #C79A57 40%, var(--berry) 100%);
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.polaroid .shot span{
  font-family: var(--sans); font-size:0.68rem; color: rgba(255,255,255,0.92); text-align:center; line-height:1.4;
}
.polaroid .cap{
  font-family: var(--hand); font-size:1.15rem; text-align:center; margin-top:12px; color: var(--ink);
}

/* ---------- Our Story ---------- */
section{ padding: 76px 0; position:relative; z-index:1; }
.eyebrow-label{
  font-weight:700; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--gold-deep); margin-bottom:14px;
}
h2.section-title{ font-size: clamp(1.8rem,2.8vw,2.4rem); font-weight:700; margin-bottom:8px; }

.story-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.story-copy p{ margin:0 0 18px; }
.story-copy p.lead-para{ font-size:1.12rem; }

.pinned-note{
  background: #FFF9E4; padding: 30px 28px 34px; box-shadow: 0 12px 26px var(--shadow);
  transform: rotate(-1.5deg); position:relative; margin: 30px 0;
}
.pinned-note::before{
  content:''; position:absolute; top:-12px; left:24px; width:52px; height:22px;
  background: rgba(168,67,90,0.5); border:1px solid rgba(168,67,90,0.3); transform: rotate(-4deg);
}
.pinned-note p{
  font-family: var(--hand); font-size:1.6rem; line-height:1.35; color: var(--ink); margin:0 0 10px;
}
.pinned-note .who{ font-family: var(--sans); font-weight:700; font-size:0.85rem; color: var(--ink-soft); }

.story-figure{
  background: var(--card); padding:16px; box-shadow: 0 14px 30px var(--shadow); transform: rotate(2deg);
}
.story-figure .shot{
  aspect-ratio: 4/5; background: linear-gradient(160deg, var(--berry) 0%, #935A72 50%, var(--gold) 100%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.story-figure .shot span{ font-family: var(--sans); font-size:0.75rem; color: rgba(255,255,255,0.92); text-align:center; }

/* ---------- Mission Vision Values: fabric patches ---------- */
.patches{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; margin-top:44px; }
.patch{
  background: var(--card); padding: 30px 26px; border: 3px dashed var(--gold);
  position:relative;
}
.patch:nth-child(2){ border-color: var(--berry); transform: rotate(-1deg); }
.patch:nth-child(3){ transform: rotate(1deg); }
.patch .tab{
  position:absolute; top:-13px; left:26px; font-family: var(--sans); font-weight:700;
  font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--card);
  background: var(--berry-deep); padding: 4px 12px;
}
.patch:nth-child(2) .tab{ background: var(--gold-deep); }
.patch h3{ font-size:1.2rem; font-weight:700; margin: 14px 0 12px; }
.patch p{ color: var(--ink-soft); font-size:0.96rem; margin:0; }

/* ---------- What we do ---------- */
.wwd-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.wwd-figure{
  background: var(--card); padding:16px; box-shadow: 0 14px 30px var(--shadow); transform: rotate(-2deg);
}
.wwd-figure .shot{
  aspect-ratio: 16/12; background: linear-gradient(150deg, var(--gold) 0%, #C79A57 45%, var(--berry) 100%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.wwd-figure .shot span{ font-family: var(--sans); font-size:0.78rem; color: rgba(255,255,255,0.92); text-align:center; }

/* ---------- Noticeboard: how we show up ---------- */
.noticeboard{ background: var(--linen-deep); }
.notice-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; margin-top:44px; }
.notice-card{
  background: var(--card); padding: 26px 22px; box-shadow: 0 8px 18px var(--shadow);
  border-top: 5px solid var(--berry);
}
.notice-card:nth-child(2){ border-top-color: var(--gold); }
.notice-card:nth-child(3){ border-top-color: var(--ink); }
.notice-card:nth-child(4){ border-top-color: var(--berry-deep); }
.notice-card .tag{
  font-family: var(--hand); font-size:1.35rem; color: var(--berry-deep); margin-bottom:8px; display:block;
}
.notice-card h4{ font-size:1.08rem; font-weight:700; margin-bottom:10px; }
.notice-card p{ font-size:0.92rem; color: var(--ink-soft); margin:0; }

/* ---------- CTA ---------- */
.cta-wrap{ display:flex; justify-content:center; }
.cta-card{
  background: var(--card); padding: 48px 56px; text-align:center; max-width:640px;
  box-shadow: 0 16px 34px var(--shadow); position:relative;
}
.cta-card::before{
  content:''; position:absolute; top:-14px; left:50%; transform: translateX(-50%) rotate(2deg);
  width:70px; height:26px; background: rgba(168,67,90,0.5); border:1px solid rgba(168,67,90,0.3);
}
.cta-card h2{ font-size:1.6rem; font-weight:700; margin-bottom:22px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
footer{ background: var(--ink); color: var(--linen); position:relative; z-index:1; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:56px; padding: 64px 0 40px;
}
footer h4{
  font-family:var(--sans); font-weight:700; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  color: rgba(239,230,211,0.55); margin-bottom:18px;
}
footer .wordmark span{ color: var(--linen); }
footer p{ color: rgba(239,230,211,0.72); font-size:0.95rem; }
footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin-bottom:12px; }
footer a{ text-decoration:none; color: rgba(239,230,211,0.8); font-size:0.95rem; }
footer a:hover{ color: var(--gold); }
.footer-base{
  display:flex; justify-content:space-between; padding: 22px 0; font-size:0.85rem;
  color: rgba(239,230,211,0.45); border-top: 1px solid rgba(239,230,211,0.14);
}
.footer-base a{ color: rgba(239,230,211,0.55); margin-left:22px; }

@media (max-width: 900px){
  nav.primary, .tel{ display:none; }
  .story-grid, .wwd-grid{ grid-template-columns:1fr; gap:36px; }
  .story-figure, .wwd-figure{ order:-1; }
  .patches{ grid-template-columns:1fr; }
  .notice-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-base{ flex-direction:column; gap:10px; text-align:center; }
  .footer-base a{ margin:0 10px; }
  .polaroids{ gap:20px; }
  .polaroid{ width:150px; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }
:focus-visible{ outline:2px solid var(--berry-deep); outline-offset:3px; }