:root{
  --wine:#970c3e; --wine-deep:#7e1739; --ink:#20201d; --cream:#f8f5ed; --paper:#fffdf8;
  --line:#e4dccd; --muted:#5f5b53; --soft:#efe8da; --wine-tint:#f6e7ea;
  --serif:"Fraunces",Georgia,serif; --sans:"Figtree",Arial,sans-serif;
  --gutter:16px; --max:1120px; --r:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.55 var(--sans);overflow-x:hidden}
/* paper grain: the hand-made layer, kept very faint */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.06;font-variation-settings:"opsz" 144}
a{color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #c08a2d;outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.kicker{font:700 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--wine)}
.example{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--wine-deep);border:1.5px dashed currentColor;border-radius:4px;padding:4px 6px 3px;transform:rotate(-2deg);white-space:nowrap}
.confirmed{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:var(--ink);border-radius:4px;padding:5px 7px 4px;white-space:nowrap}
.quiet{font-size:14px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;border:1.5px solid var(--wine);background:var(--wine);color:#fff;font-weight:600;font-size:16px;text-decoration:none}
.btn:hover{background:var(--wine-deep);border-color:var(--wine-deep)}
.btn.ghost{background:transparent;color:var(--wine)}
.btn.ghost:hover{background:var(--wine-tint)}
.btn.light{background:var(--cream);border-color:var(--cream);color:var(--wine-deep)}
.btn.light:hover{background:#fff}
.btn.line-light{background:transparent;border-color:#f8f5ed99;color:var(--cream)}
.arrow{transition:transform .2s}.btn:hover .arrow{transform:translateX(3px)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:#f8f5edf2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand img{width:42px;height:42px}
.brand span{font:600 19px/1 var(--serif);color:var(--wine-deep);letter-spacing:-.01em}
.navlinks{display:none}
.navlinks a{text-decoration:none;font-size:15px;font-weight:500;padding:8px 2px}
.navlinks a:hover{color:var(--wine)}
.menu-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;font-weight:600;font-size:15px}
.menu-btn i{position:relative;display:block;width:16px;height:2px;background:currentColor}
.menu-btn i:before,.menu-btn i:after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.menu-btn i:before{top:-5px}.menu-btn i:after{top:5px}
.menu-btn[aria-expanded=true] i{background:transparent}
.menu-btn[aria-expanded=true] i:before{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded=true] i:after{transform:translateY(-5px) rotate(-45deg)}
.top .join-top{display:none}
.sheet{position:fixed;inset:64px 0 auto 0;background:var(--cream);border-bottom:1px solid var(--line);padding:8px var(--gutter) 20px;z-index:19;box-shadow:0 20px 40px #20201d1f}
.sheet[hidden]{display:none}
.sheet a{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid var(--line);text-decoration:none;font:600 21px/1.2 var(--serif)}
.sheet a span{font:400 14px var(--sans);color:var(--muted)}
.sheet .btn{width:100%;margin-top:16px}
.sheet a.btn{justify-content:center;border-bottom:1.5px solid var(--wine);padding:0 22px;font:600 16px/1 var(--sans);color:#fff}

/* ---------- hero ---------- */
.hero{padding:28px 0 8px}
.hero-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
.hero-grid>*,.dir-grid>*,.giving-grid>*,.join-grid>*,.cal-split>*{min-width:0}
.hero h1{font-size:clamp(40px,10.6vw,68px);margin:12px 0 16px;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--wine);font-weight:600}
.hero .lede{font-size:18px;color:#3b3934;max-width:34em}
.finder{margin-top:22px}
.search{display:flex;align-items:center;gap:10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:0 8px 0 18px;min-height:58px;box-shadow:0 2px 0 var(--ink)}
.search svg{flex:none}
.search input{flex:1;min-width:0;border:0;background:transparent;font-size:17px;height:54px;outline:0}
.search input::placeholder{color:#8a857b}
.search button{flex:none;height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--wine);color:#fff;font-weight:600;font-size:15px}
.chips{display:flex;gap:8px;overflow-x:auto;margin:14px calc(var(--gutter) * -1) 0;padding:2px var(--gutter) 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-size:15px;font-weight:500}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.hero-art{position:relative;margin:4px 0 0}
.arch{border-radius:999px 999px var(--r) var(--r);overflow:hidden;aspect-ratio:6/5;background:var(--soft);border:1.5px solid var(--ink)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:72% 60%}
.stamp{position:absolute;left:-6px;bottom:-14px;width:112px;height:112px;border-radius:50%;background:var(--cream);padding:8px;transform:rotate(-9deg);box-shadow:0 6px 18px #20201d22}
.stamp img{width:100%;height:100%}
.caption{margin-top:24px;font-size:13px;color:var(--muted);text-align:right}

/* ---------- dates ---------- */
.dates{padding:36px 0 8px}
.dates-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.dates-head h2{font-size:26px}
.tickets{display:grid;gap:12px}
.ticket{display:grid;grid-template-columns:76px 1fr;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden}
.ticket .day{background:var(--wine);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 4px;border-right:1.5px dashed #f8f5ed88;text-align:center}
.ticket .day small{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ticket .day b{font:600 36px/1 var(--serif);margin:4px 0 2px}
.ticket .what{padding:14px 16px}
.ticket h3{font-size:21px;margin:8px 0 4px}
.ticket p{font-size:15px;color:var(--muted)}

/* ---------- section scaffolding ---------- */
section.block{padding:64px 0}
.head{max-width:40em;margin-bottom:26px}
.head h2{font-size:clamp(32px,8vw,42px);margin:10px 0 12px}
.head p{color:#3b3934}

/* ---------- directory ---------- */
.results-meta{scroll-margin-top:80px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 14px;font-size:14px;color:var(--muted)}
.cards{display:grid;gap:14px}
.card{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);padding:14px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--ink)}
.card .pic{position:relative;width:96px;height:96px;border-radius:10px;background:var(--cream);display:grid;place-items:center;padding:8px 8px 14px}
.card .pic .example{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%) rotate(-3deg);background:var(--paper);font-size:9.5px;padding:3px 5px 2px}
.card .pic img{max-height:100%;width:auto;object-fit:contain}
.card .row{display:flex;justify-content:space-between;align-items:start;gap:8px}
.card h3{font-size:22px}
.card .type{font-size:13px;font-weight:600;color:var(--wine);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.card .desc{font-size:15px;color:#3b3934;margin-top:6px}
.card .gives{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:14.5px;background:var(--wine-tint);border-radius:10px;padding:10px 12px;color:#4a2030}
.card .gives b{color:var(--wine-deep)}
.card .acts{grid-column:1/-1;display:flex;gap:8px}
.card .acts>*{flex:1;display:inline-flex;align-items:center;justify-content:center;min-width:0;height:44px;padding:0 10px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.card .acts>*:first-child{background:var(--ink);color:var(--cream)}
.empty{padding:28px 18px;border:1.5px dashed var(--line);border-radius:var(--r);text-align:center;color:var(--muted);background:var(--paper)}
.dir-note{margin-top:16px}

/* ---------- giving ---------- */
.giving{background:var(--wine-deep);color:var(--cream);overflow:hidden}
.giving .kicker{color:#f3c9d4}
.giving .head p{color:#f3e6e9}
.giving-grid{display:grid;gap:30px}
.porch{border-radius:var(--r);background:var(--cream);padding:18px;max-width:420px;transform:rotate(-1.5deg);box-shadow:0 18px 40px #0000003a}
.porch img{width:100%}
.ledger{list-style:none;margin:0;padding:0;border-top:1.5px solid #f8f5ed55}
.ledger li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:1.5px solid #f8f5ed55}
.ledger img{width:64px;height:64px;object-fit:contain;filter:brightness(0) invert(.96) sepia(.15)}
.ledger strong{display:block;font:600 22px/1.15 var(--serif)}
.ledger span{font-size:15.5px;color:#f3e6e9}

/* ---------- for neighbors ---------- */
.doors{display:grid;gap:14px}
.door{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);padding:22px 20px 22px;display:flex;flex-direction:column}
.door .art{height:150px;display:flex;align-items:flex-end;margin-bottom:16px}
.door .art img{max-height:150px;width:auto}
.door h3{font-size:26px;margin:8px 0 10px}
.door p{color:#3b3934;font-size:16px;margin-bottom:20px}
.door .btn{margin-top:auto;align-self:flex-start}
.door.feature{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.door.feature .kicker{color:#f3c9d4}
.door.feature p{color:#e9e4d8}
.door.feature .art img{filter:brightness(0) invert(.96) sepia(.15)}

/* ---------- calendar ---------- */
.cal{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.cal li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.cal .d{font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--wine);text-align:center}
.cal .d b{display:block;font:600 34px/1 var(--serif);letter-spacing:0;color:var(--ink);margin-top:4px}
.cal h3{font-size:21px;margin-bottom:4px}
.cal p{font-size:15px;color:var(--muted)}
.cal .tags{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.cal .tag{font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--soft);color:#4b463d}
.cal li.sample h3{color:#4b463d}
.cal-split{display:grid;gap:28px}
.cal-art img{width:min(260px,70%);margin:0 auto}

/* ---------- stories ---------- */
.stories{display:grid;gap:14px}
.story{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid}
.story .art{background:var(--soft);display:grid;place-items:center;padding:22px;height:190px}
.story .art img{max-height:146px;width:auto}
.story .txt{padding:18px 20px 22px}
.story h3{font-size:25px;margin:10px 0 8px}
.story p{font-size:15.5px;color:#3b3934}
.story button{margin-top:12px;border:0;background:none;padding:6px 0;color:var(--wine);font-weight:700;font-size:15px}

/* ---------- join ---------- */
.join{background:var(--paper);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.join-grid{display:grid;gap:20px;align-items:center}
.join .seal-big{width:132px;margin:0;transform:rotate(-6deg)}
.join ul{list-style:none;padding:0;margin:0 0 26px}
.join li{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.join li b{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--wine)}
.join .acts{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#d9d3c5;padding:44px 0 calc(44px + env(safe-area-inset-bottom))}
footer .wrap{display:grid;gap:18px}
footer .f-brand{display:flex;align-items:center;gap:14px}
footer .f-brand img{width:64px;height:64px}
footer .f-brand strong{display:block;font:600 22px/1.1 var(--serif);color:var(--cream)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer nav a{text-decoration:none;font-size:15px}
footer .fine{font-size:13px;color:#a9a294;border-top:1px solid #ffffff22;padding-top:16px}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:#20201d8c;display:flex;align-items:flex-end;justify-content:center}
.overlay[hidden]{display:none}
.modal{position:relative;width:100%;max-width:540px;max-height:92vh;overflow:auto;background:var(--cream);border-radius:20px 20px 0 0;padding:26px var(--gutter) calc(26px + env(safe-area-inset-bottom))}
.modal .close{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:28px;line-height:1}
.modal h2{font-size:28px;margin:8px 48px 12px 0}
.modal p{color:#3b3934;margin:10px 0}
.modal .m-art{height:120px;margin-bottom:6px}
.modal .m-art img{height:100%;width:auto}
.modal #mf label{display:block;margin-top:14px;font-size:15px;font-weight:600}
.modal #mf input,.modal #mf textarea,.modal #mf select{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-size:16px;font-weight:400}
.modal > div > .btn,.modal #mf .btn{width:100%;margin-top:18px}
.modal .preview-note{font-size:13.5px;color:var(--muted);margin-top:4px}


/* ---------- tablet and up ---------- */
@media (min-width:700px){
  :root{--gutter:32px}
  .cards{grid-template-columns:1fr 1fr}
  .doors{grid-template-columns:1fr 1fr}
  .doors .door.feature{grid-column:1/-1;display:grid;grid-template-columns:1.618fr 1fr;gap:24px;align-items:center}
  .doors .door.feature .art{order:2;height:auto;justify-content:center;margin:0}
  .doors .door.feature .art img{max-height:220px}
  .stories{grid-template-columns:1fr 1fr}
  .tickets{grid-template-columns:1fr 1fr}
  .modal{border-radius:20px;margin:auto;padding:30px}
  .overlay{align-items:center;padding:24px}
}
/* ---------- desktop: golden split 61.8 / 38.2 ---------- */
@media (min-width:1000px){
  body{font-size:17px}
  .navlinks{display:flex;gap:24px;margin-right:18px}
  .menu-btn{display:none}
  .top .join-top{display:inline-flex;min-height:42px;padding:0 18px;font-size:15px}
  .hero{padding:56px 0 24px}
  .hero-grid{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:56px;align-items:center}
  .hero-art{margin:0}
  .chips{flex-wrap:wrap;overflow:visible;margin:14px 0 0;padding:0}
  .arch{aspect-ratio:4/5}
  .stamp{width:136px;height:136px;left:-48px;bottom:12%}
  section.block{padding:96px 0}
  .head h2{font-size:42px}
  .dir-grid{display:grid;grid-template-columns:1fr 1.618fr;gap:56px;align-items:start}
  .dir-grid .head{position:sticky;top:96px}
  .cards{grid-template-columns:1fr 1fr}
  .giving-grid{grid-template-columns:1fr 1.618fr;gap:64px;align-items:center}
  .porch{max-width:none}
  .doors{grid-template-columns:1.618fr 1fr 1fr}
  .doors .door.feature{grid-column:auto;display:flex}
  .doors .door.feature .art{order:0;height:150px;justify-content:flex-start;margin-bottom:16px}
  .doors .door.feature .art img{max-height:150px}
  .cal-split{grid-template-columns:1.618fr 1fr;gap:64px;align-items:center}
  .cal-art img{width:100%;max-width:360px}
  .join-grid{grid-template-columns:1fr 1.618fr;gap:64px}
  .join .seal-big{width:300px}
  footer .wrap{grid-template-columns:1.618fr 1fr;align-items:end}
  footer .fine{grid-column:1/-1}
}

/* territories */
.terr-wrap{margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.terr-wrap summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:15.5px;color:var(--wine);list-style-position:inside}
.terr-wrap .territories{margin:0 0 14px}
.territories{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.territories button{width:100%;text-align:left;background:transparent;border:0;border-left:3px solid var(--line);padding:6px 0 6px 12px;display:block}
.territories button[aria-pressed=true]{border-color:var(--wine)}
.territories b{display:block;font:600 18px/1.2 var(--serif)}
.territories span{font-size:14px;color:var(--muted);line-height:1.4;display:block}
/* the loop */
.loop{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:0;counter-reset:x}
.loop li{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:16px 0;border-top:1.5px solid var(--ink)}
.loop li b{width:44px;height:44px;border-radius:50%;background:var(--wine);color:var(--cream);display:grid;place-items:center;font:600 21px/1 var(--serif)}
.loop li:last-child b{background:var(--ink)}
.loop h3{font-size:22px;margin:2px 0 4px}
.loop p{font-size:15.5px;color:#3b3934}
/* seasons */
.seasons-sec{background:var(--soft)}
.seasons{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.seasons li{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);padding:18px 18px 20px}
.seasons .when{font:700 12.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--wine)}
.seasons h3{font-size:23px;margin:8px 0 6px}
.seasons p{font-size:15.5px;color:#3b3934;margin-bottom:12px}
.plan{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#4b463d;background:var(--soft);border-radius:4px;padding:5px 7px 4px}
.seasons li.launch{background:var(--wine-deep);border-color:var(--wine-deep);color:var(--cream);padding-right:130px;min-height:170px}
.seasons li.launch .when{color:#f3c9d4}
.seasons li.launch p{color:#f3e6e9}
.seasons li.launch .confirmed{background:var(--cream);color:var(--wine-deep)}
.seasons li.launch img{position:absolute;right:12px;bottom:14px;width:112px;filter:brightness(0) invert(.96) sepia(.15)}
.door.feature{background:#2f4f3c;border-color:#2f4f3c}
@media (min-width:700px){
  .seasons{grid-template-columns:1fr 1fr}
  .seasons li.launch{grid-column:1/-1;padding-right:220px}
  .seasons li.launch img{width:170px}
  .loop{grid-template-columns:1fr 1fr;column-gap:32px}
}
@media (min-width:1000px){
  .seasons{grid-template-columns:repeat(5,1fr)}
  .seasons li.launch{grid-column:1/-1;padding:28px 300px 28px 32px;min-height:0}
  .seasons li.launch h3{font-size:32px}
  .seasons li.launch img{width:180px;right:44px;bottom:50%;transform:translateY(50%)}
  .loop{grid-template-columns:repeat(3,1fr)}
}

/* ======================================================================
   MOTION
   Everything below is gated on html.motion, which a one-line script in
   the head adds only when the visitor has NOT asked for reduced motion.
   With motion off (or JavaScript off) every element sits in its final,
   readable place. Only opacity, transform and clip-path move, so nothing
   shifts the layout.
   ====================================================================== */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-ink:cubic-bezier(.65,0,.35,1);--ease-press:cubic-bezier(.3,1.45,.5,1)}

/* micro-interactions: press and lift */
.motion .btn{transition:background-color .2s,border-color .2s,color .2s,transform .16s var(--ease-out)}
.motion .btn:active{transform:scale(.97)}
.motion .chip{transition:background-color .2s,border-color .2s,color .2s,transform .14s var(--ease-out)}
.motion .chip:hover{border-color:var(--ink)}
.motion .chip:active{transform:scale(.95)}
.motion .search{transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}
.motion .search:focus-within{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
.motion .search button{transition:transform .14s var(--ease-out),background-color .2s}
.motion .search button:hover{background:var(--wine-deep)}
.motion .search button:active{transform:scale(.95)}
.motion .card,.motion .door,.motion .story,.motion .ticket{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s}
@media (hover:hover){
  .motion .card:hover,.motion .story:hover{transform:translateY(-3px);box-shadow:0 4px 0 var(--ink);border-color:var(--ink)}
  .motion .door:hover,.motion .ticket:hover{transform:translateY(-3px);box-shadow:0 4px 0 var(--ink)}
  .motion .door.feature:hover{box-shadow:0 4px 0 #1d3226}
  .motion .card:hover .pic img,.motion .story:hover .art img{transform:rotate(-3deg) scale(1.04)}
}
.motion .card .pic img,.motion .story .art img{transition:transform .35s var(--ease-press)}
.motion .card .acts>*{transition:background-color .2s,color .2s,transform .14s var(--ease-out)}
.motion .card .acts>*:active{transform:scale(.96)}
.motion .menu-btn{transition:transform .14s var(--ease-out)}
.motion .menu-btn:active{transform:scale(.95)}
.motion .menu-btn i,.motion .menu-btn i:before,.motion .menu-btn i:after{transition:transform .25s var(--ease-out),background-color .15s}
.motion .territories button{transition:border-color .2s,padding-left .2s var(--ease-out)}

/* hero: the words rise in order, the arch is unveiled, the seal is pressed */
@keyframes mil-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mil-unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mil-settle{from{transform:scale(1.1)}to{transform:none}}
@keyframes mil-stamp{0%{opacity:0;transform:rotate(-16deg) scale(1.45)}55%{opacity:1;transform:rotate(-8deg) scale(.94)}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
.motion .rise{animation:mil-rise .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
.motion .hero .arch{animation:mil-unveil 1.05s var(--ease-ink) .2s both}
.motion .hero .arch img{animation:mil-settle 1.6s var(--ease-out) .2s both}
.motion .hero .stamp{animation:mil-stamp .75s var(--ease-press) .95s both}

/* sections: gentle rise as they scroll in, in a short stagger */
.motion .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--d,0) * 80ms)}
.motion .reveal.in{opacity:1;transform:none}

/* the linocut prints ink in: a wipe left to right, like a roller passing over the block */
.motion .ink{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-ink);transition-delay:calc(var(--d,0) * 80ms + 150ms)}
.motion .in .ink,.motion .ink.in{clip-path:inset(0 0 0 0)}

/* the porch print settles onto the page */
.motion .porch.reveal{transform:rotate(-5deg) translateY(24px)}
.motion .porch.reveal.in{transform:rotate(-1.5deg)}

/* the loop: each number is pressed in after its row arrives */
.motion .loop li b{transform:scale(.3);opacity:0;transition:transform .5s var(--ease-press),opacity .3s;transition-delay:calc(var(--d,0) * 80ms + 250ms)}
.motion .loop li.in b{transform:none;opacity:1}

/* the big seal is stamped like the one in the hero */
.motion .seal-big.reveal{opacity:0;transform:rotate(-16deg) scale(1.4);transition:opacity .35s,transform .7s var(--ease-press)}
.motion .seal-big.reveal.in{opacity:1;transform:rotate(-6deg)}

/* phone menu: the sheet drops in and its links follow */
.motion .sheet{transition:opacity .22s ease,transform .3s var(--ease-out)}
.motion .sheet:not(.open){opacity:0;transform:translateY(-10px)}
.motion .sheet a,.motion .sheet .btn{transition:opacity .3s ease,transform .35s var(--ease-out)}
.motion .sheet:not(.open) a,.motion .sheet:not(.open) .btn{opacity:0;transform:translateY(-8px)}
.motion .sheet.open a,.motion .sheet.open .btn{transition-delay:calc(var(--i,0) * 35ms + 40ms)}
.scrim{position:fixed;inset:64px 0 0 0;z-index:18;background:#20201d40}
.scrim[hidden]{display:none}
.motion .scrim{transition:opacity .25s}
.motion .scrim:not(.open){opacity:0}

/* modal: rises from the bottom on a phone, fades up on a desktop */
@keyframes mil-sheet-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes mil-fade{from{opacity:0}to{opacity:1}}
.motion .overlay:not([hidden]){animation:mil-fade .2s ease both}
.motion .overlay:not([hidden]) .modal{animation:mil-sheet-up .35s var(--ease-out) both}

/* moving between the two pages: a soft cross-fade where the browser supports it */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.brand img{view-transition-name:mil-seal}

/* ======================================================================
   JOIN PAGE
   ====================================================================== */
.j-hero{padding:28px 0 12px}
.j-hero-grid{display:grid;column-gap:16px;row-gap:22px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'text text' 'acts seal';align-items:center}
.j-text{grid-area:text}.j-hero .acts{grid-area:acts}.j-seal{grid-area:seal}
.j-hero h1{font-size:clamp(40px,10.6vw,66px);margin:12px 0 16px}
.j-hero h1 em{font-style:italic;color:var(--wine)}
.j-hero .lede{font-size:18px;color:#3b3934;max-width:34em}
.j-hero .acts{display:flex;flex-wrap:wrap;gap:10px;align-self:center}
.j-seal{width:108px;transform:rotate(-6deg);justify-self:end}
.motion .j-seal{animation:mil-stamp-j .75s var(--ease-press) .55s both}
@keyframes mil-stamp-j{0%{opacity:0;transform:rotate(-14deg) scale(1.45)}55%{opacity:1;transform:rotate(-5deg) scale(.94)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}

.deal{display:grid;gap:14px}
.deal-col{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);padding:22px 20px}
.deal-col h2{font-size:28px;margin:8px 0 14px}
.deal-col ul{list-style:none;margin:0;padding:0}
.deal-col li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:16px;color:#3b3934}
.deal-col li svg{margin-top:3px}
.deal-col.give{background:var(--wine-deep);border-color:var(--wine-deep);color:var(--cream)}
.deal-col.give .kicker{color:#f3c9d4}
.deal-col.give .big{font:600 clamp(26px,6.6vw,32px)/1.12 var(--serif);margin:8px 0 12px;letter-spacing:-.01em}
.deal-col.give p{color:#f3e6e9;font-size:16px}
.deal-col.give .quote{margin:18px 0 0;padding:14px 0 0;border-top:1.5px solid #f8f5ed55;font:italic 600 21px/1.3 var(--serif);color:var(--cream)}
.deal-col.give .quote small{display:block;margin-top:6px;font:500 13px/1.3 var(--sans);font-style:normal;color:#f3c9d4;letter-spacing:.02em}
.deal-col.give .art{display:flex;gap:12px;margin-top:18px}
.deal-col.give .art img{height:54px;width:auto;filter:brightness(0) invert(.96) sepia(.15)}

.steps{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.steps li b{width:44px;height:44px;border-radius:50%;background:var(--wine);color:var(--cream);display:grid;place-items:center;font:600 21px/1 var(--serif)}
.steps li:last-child b{background:var(--ink)}
.steps h3{font-size:21px;margin:2px 0 4px}
.steps p{font-size:15.5px;color:#3b3934}
.motion .steps li b{transform:scale(.3);opacity:0;transition:transform .5s var(--ease-press),opacity .3s;transition-delay:calc(var(--d,0) * 80ms + 250ms)}
.motion .steps li.in b{transform:none;opacity:1}

.apply-sec{background:var(--soft)}
.apply-grid{display:grid;gap:28px}
.apply-grid>*{min-width:0}
.apply-card{scroll-margin-top:84px;background:var(--paper);border:1.5px solid var(--ink);border-radius:18px;padding:22px var(--gutter) 26px;box-shadow:0 4px 0 var(--ink);margin:0 calc(var(--gutter) * -1 + 6px)}
.apply-card h2{font-size:30px;margin:6px 0 6px}
.apply-card .intro{color:#3b3934;font-size:15.5px;margin-bottom:6px}
.req-note{font-size:14px;color:var(--muted)}
.req-note b,.req{color:var(--wine);font-weight:700}
fieldset{border:0;border-top:1.5px solid var(--line);margin:30px 0 0;padding:20px 0 0;min-width:0}
legend{float:left;width:100%;padding:0;font:700 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--wine);margin:0 0 2px}
legend+*{clear:both}
.field{margin-top:18px}
.field>label,.field .lab{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.field .opt{font-weight:500;color:var(--muted);font-size:14px}
.help{display:block;font-size:14.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.ctl{display:block;width:100%;margin-top:8px;min-height:52px;padding:12px 14px;border:1.5px solid #cfc6b5;border-radius:12px;background:#fff;font-size:17px;font-weight:400;line-height:1.4;-webkit-appearance:none;appearance:none}
textarea.ctl{resize:vertical;min-height:120px}
select.ctl{padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2320201d' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.ctl::placeholder{color:#9a948a}
.ctl:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px #c08a2d55}
.motion .ctl{transition:border-color .2s,box-shadow .2s}
.ctl[aria-invalid=true]{border-color:#b3261e;background:#fffafa}
.prefix{position:relative;display:block}
.prefix>span{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:17px;color:var(--muted);pointer-events:none;margin-top:4px}
.prefix .ctl{padding-left:34px}
.count{display:block;text-align:right;font-size:13.5px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.count.near{color:var(--wine-deep);font-weight:600}
.count.over{color:#b3261e;font-weight:700}
.err{display:flex;gap:7px;align-items:flex-start;font-size:15px;font-weight:600;color:#b3261e;margin-top:8px}
.err[hidden]{display:none}
.err:before{content:"!";flex:none;width:19px;height:19px;border-radius:50%;background:#b3261e;color:#fff;font:700 13px/19px var(--sans);text-align:center;margin-top:1px}
.motion .err:not([hidden]){animation:mil-rise .3s var(--ease-out) both}
.check{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;margin-top:26px;padding:16px;border:1.5px solid var(--line);border-radius:12px;background:var(--cream);cursor:pointer;font-size:16px;line-height:1.45}
.check input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--wine);cursor:pointer}
.check.bad{border-color:#b3261e}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-alert{margin-top:22px;padding:14px 16px;border-radius:12px;background:#fdecea;border:1.5px solid #b3261e;color:#7a1712;font-size:15.5px;font-weight:600}
.form-alert[hidden]{display:none}
.submit{width:100%;margin-top:18px;min-height:56px;font-size:17px}
.submit[disabled]{opacity:.75;cursor:progress}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid #ffffff55;border-top-color:#fff}
.motion .spin{animation:mil-spin .8s linear infinite}
@keyframes mil-spin{to{transform:rotate(360deg)}}
.after-note{font-size:14px;color:var(--muted);margin-top:12px;text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.thanks{text-align:left}
.thanks img{width:120px;transform:rotate(-6deg);margin:4px 0 12px}
.motion .thanks img{animation:mil-stamp-j .75s var(--ease-press) .1s both}
.thanks h2{font-size:34px;margin:4px 0 12px}
.thanks h2:focus{outline:0}
.thanks p{color:#3b3934;margin-top:10px}
.thanks ol{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.thanks li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;display:grid;grid-template-columns:30px 1fr;gap:8px}
.thanks li b{font:600 20px/1.2 var(--serif);color:var(--wine)}
.thanks .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.motion .thanks>*{animation:mil-rise .6s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms + 200ms)}

@media (min-width:700px){
  .deal{grid-template-columns:1fr 1fr}
  .apply-card{padding:34px 36px 36px;margin:0}
  .j-seal{width:170px}
}
@media (min-width:1000px){
  .j-hero{padding:64px 0 28px}
  .j-hero-grid{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);grid-template-areas:'text seal' 'acts seal';column-gap:56px;row-gap:26px}
  .j-text{align-self:end}.j-hero .acts{align-self:start}
  .j-seal{width:300px;justify-self:center}
  .deal{grid-template-columns:1.618fr 1fr;gap:18px}
  .deal-col{padding:30px 30px 32px}
  .apply-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:64px;align-items:start}
  .apply-grid .aside{position:sticky;top:96px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ======================================================================
   LIVE DIRECTORY, PROFILES, THE NEIGHBOR GUIDE
   ====================================================================== */
/* a member's mark: their initials set like a maker's stamp, double ring, wine ink */
.mono{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:2px solid var(--wine);color:var(--wine);background:var(--paper);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4.5px var(--wine);font:italic 600 24px/1 var(--serif);letter-spacing:-.02em;transform:rotate(-6deg);flex:none}
.mono.big{width:84px;height:84px;font-size:36px}
.card .pic .mono{margin:0 auto}
.card .acts .arrow{margin-left:6px}
.loading{border-style:solid}
.motion .loading{animation:mil-breathe 1.6s ease-in-out infinite}
@keyframes mil-breathe{50%{opacity:.55}}

/* the featured member: same paper, more room, an ink edge */
.card.featured{grid-column:1/-1;display:block;border:1.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);padding:20px 18px}
.card.featured .f-top{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.feat-tag{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cream);background:var(--ink);border-radius:4px;padding:5px 7px 4px;margin-bottom:6px}
.card.featured h3{font-size:30px}
.card.featured .f-head{font:italic 600 20px/1.25 var(--serif);color:var(--wine-deep);margin:4px 0 8px}
.card.featured .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.f-offers{list-style:none;margin:14px 0 14px;padding:0;border-top:1px solid var(--line)}
.f-offers li{padding:9px 0 9px 18px;border-bottom:1px solid var(--line);font-weight:600;font-size:15.5px;position:relative}
.f-offers li:before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--wine)}
.card.featured .acts{margin-top:14px;flex-wrap:wrap}
.card.featured .acts>*:first-child{flex:1 1 100%}
@media (min-width:700px){.card.featured .acts>*:first-child{flex:1.618 1 0}}

.examples{margin-top:34px;padding-top:22px;border-top:1.5px dashed var(--line)}
.ex-head{font-size:24px;margin-bottom:6px}
.examples .quiet{margin-bottom:14px}
.guide-nudge{margin-top:22px;padding:18px;border:1.5px dashed var(--line);border-radius:var(--r);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.guide-nudge p{font-size:15.5px;color:#3b3934;flex:1 1 260px}
.empty .btn{margin-top:14px}

/* the guide's door in the hero */
.guide-cta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border:1.5px dashed #cfc6b5;border-radius:var(--r);background:#fffdf8b3}
.guide-cta p{flex:1 1 220px;font-size:15.5px;color:#3b3934;line-height:1.4}
.guide-cta p b{color:var(--ink)}
.guide-cta .btn{min-height:46px;font-size:15px}

/* profile dialog */
.modal.profile{max-width:640px}
.pf-top{display:flex;gap:16px;align-items:center;margin:4px 48px 10px 0}
.pf h2{margin:6px 0 4px;font-size:32px}
.pf-head{font:italic 600 19px/1.3 var(--serif);color:var(--wine-deep)}
.modal .pf-who{margin:14px 0 4px;font-size:15px;color:var(--muted)}
.modal .pf-who b{color:var(--ink)}
.modal .pf-desc{font-size:16.5px}
.pf-h{font:700 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--wine);margin:22px 0 4px}
.pf-offers{list-style:none;margin:0;padding:0}
.pf-offers li{padding:12px 0;border-bottom:1px solid var(--line)}
.pf-offers b{display:block;font:600 18px/1.25 var(--serif)}
.pf-offers span{display:block;font-size:15px;color:#3b3934;margin-top:3px}
.pf-gives{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--wine-tint);color:#4a2030}
.modal .pf-gives p:last-child{margin:4px 0 0;color:#4a2030;font-size:16px}
.pf-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.modal .pf-links .btn{width:auto;margin:0;min-height:46px;font-size:15px;padding:0 18px}

/* the guide panel: a bottom sheet on a phone, a side panel on a desktop */
.guide-scrim{position:fixed;inset:0;z-index:44;background:#20201d59}
.guide{position:fixed;left:0;right:0;bottom:0;z-index:45;height:min(88vh,760px);display:flex;flex-direction:column;background:var(--cream);border-top:1.5px solid var(--ink);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px #20201d33}
.g-head{display:flex;align-items:flex-start;gap:12px;padding:16px var(--gutter) 10px;border-bottom:1px solid var(--line)}
.g-head>div{flex:1;min-width:0}
.g-head h2{font-size:23px;margin-top:6px;line-height:1.15}
.g-head h2:focus{outline:0}
.g-close{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:28px;line-height:1;margin:-6px -8px 0 0}
.g-close:hover{background:var(--soft)}
.g-log{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px var(--gutter) 10px;display:flex;flex-direction:column;gap:12px}
.g-intro p{color:#3b3934;font-size:16px}
.g-starters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.g-starters .chip{height:auto;min-height:44px;padding:8px 14px;text-align:left;line-height:1.25;flex:0 1 auto}
.g-msg{max-width:100%;font-size:16px;line-height:1.5}
.g-msg p+p,.g-msg p+ul,.g-msg ul+p{margin-top:8px}
.g-msg ul{margin:6px 0 0;padding-left:20px}
.g-msg.user{align-self:flex-end;max-width:86%;background:var(--ink);color:var(--cream);padding:10px 14px;border-radius:16px 16px 4px 16px;white-space:pre-wrap;overflow-wrap:anywhere}
.g-msg.bot{align-self:stretch;color:var(--ink)}
.g-who{font:700 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--wine);margin-bottom:4px}
.g-msg.err{background:#fdecea;border:1.5px solid #b3261e;color:#7a1712;border-radius:12px;padding:10px 14px;font-weight:600;font-size:15px}
.g-think{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px}
.dots{display:inline-flex;gap:5px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--wine);opacity:.35}
.motion .dots i{animation:mil-dot 1.2s ease-in-out infinite}
.motion .dots i:nth-child(2){animation-delay:.15s}.motion .dots i:nth-child(3){animation-delay:.3s}
@keyframes mil-dot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.g-sugs{display:grid;gap:10px;margin-top:12px}
.g-sug{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start;background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;padding:12px}
.g-sug .mono{width:48px;height:48px;font-size:18px;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--wine)}
.g-sug h4{margin:2px 0 2px;font:600 19px/1.2 var(--serif)}
.g-sug h4 a{text-decoration:none}
.g-sug h4 a:hover{color:var(--wine);text-decoration:underline}
.g-sug-head{font-size:14px;color:var(--wine-deep);font-weight:600}
.g-why{font-size:15px;color:#3b3934;margin-top:4px}
.g-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.g-links a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:999px;border:1.5px solid var(--ink);font-size:14px;font-weight:600;text-decoration:none;background:transparent}
.g-links a:first-child{background:var(--ink);color:var(--cream)}
.g-form{display:flex;align-items:flex-end;gap:8px;padding:10px var(--gutter) 6px;border-top:1px solid var(--line);background:var(--cream)}
.g-form textarea{flex:1;min-width:0;min-height:50px;max-height:140px;resize:none;padding:13px 16px;border:1.5px solid var(--ink);border-radius:24px;background:#fff;font-size:16px;line-height:1.4}
.g-form textarea:focus{outline:0;box-shadow:0 0 0 3px #c08a2d55}
.g-send{flex:none;width:50px;height:50px;border-radius:50%;border:0;background:var(--wine);color:#fff;display:grid;place-items:center}
.g-send:hover{background:var(--wine-deep)}
.g-send[disabled]{opacity:.5;cursor:progress}
.g-fine{font-size:12.5px;line-height:1.4;color:var(--muted);padding:0 var(--gutter) calc(10px + env(safe-area-inset-bottom))}
.motion .guide{transition:transform .38s var(--ease-out)}
.motion .guide:not(.open){transform:translateY(100%)}
.motion .guide-scrim{transition:opacity .3s}
.motion .guide-scrim:not(.open){opacity:0}
.motion .g-send{transition:transform .14s var(--ease-out),background-color .2s}
.motion .g-send:active{transform:scale(.92)}
@media (min-width:1000px){
  .guide{left:auto;top:0;width:460px;height:auto;border-top:0;border-left:1.5px solid var(--ink);border-radius:0;box-shadow:-12px 0 40px #20201d33}
  .g-head{padding-top:24px}
  .motion .guide:not(.open){transform:translateX(100%)}
  .guide-cta{margin-top:18px}
}
.cards:empty+.examples{margin-top:0;border-top:0;padding-top:0}
.modal h2:focus{outline:0}

/* ======================================================================
   THE FRIENDLY NEIGHBOR'S BUBBLE, MEMBER LOGOS AND PEOPLE
   ====================================================================== */
.fn-dock{position:fixed;z-index:47;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom) + var(--lift,0px));display:flex;align-items:flex-end;gap:10px;pointer-events:none}
.fn-dock>*{pointer-events:auto}
.fn-launch{flex:none;width:60px;height:60px;border-radius:50%;border:0;background:var(--wine);color:#fff;display:grid;place-items:center;box-shadow:0 3px 0 var(--ink),0 10px 24px #20201d40}
.fn-launch:hover{background:var(--wine-deep)}
.fn-dock.tucked{opacity:0;visibility:hidden}
.fn-dock.tucked>*{pointer-events:none}
.fn-teaser{display:flex;align-items:center;max-width:min(270px,calc(100vw - 112px));background:var(--paper);border:1.5px solid var(--ink);border-radius:16px 16px 4px 16px;box-shadow:0 3px 0 var(--ink);margin-bottom:10px}
.fn-teaser-open{border:0;background:none;text-align:left;padding:12px 2px 12px 14px;font:600 15px/1.35 var(--sans);color:var(--ink)}
.fn-teaser-x{flex:none;width:44px;height:44px;border:0;background:none;color:var(--muted);display:grid;place-items:center;border-radius:50%}
.fn-teaser-x:hover{color:var(--ink)}
.fn-teaser-x svg{width:16px;height:16px}
@keyframes mil-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.motion .fn-launch{animation:mil-pop .45s var(--ease-press) .4s both;transition:background-color .2s,transform .14s var(--ease-out)}
.motion .fn-launch:active{transform:scale(.93)}
.motion .fn-dock{transition:opacity .2s,visibility 0s,bottom .3s var(--ease-out),right .3s var(--ease-out)}
.motion .fn-dock.tucked{transition:opacity .2s,visibility 0s .2s,bottom .3s var(--ease-out)}
.motion .fn-teaser{transform-origin:bottom right;transition:opacity .25s,transform .35s var(--ease-press)}
.motion .fn-teaser:not(.show){opacity:0;transform:translateY(8px) scale(.94)}
.fn-dock.open .fn-launch{background:var(--ink);box-shadow:0 10px 24px #20201d40}
@media (min-width:1000px){
  .fn-dock{right:28px;bottom:28px}
  .fn-dock.open{right:488px}
}

/* member marks and logos: the member's own file, unchanged, on a plain light ground */
.mono.has-mark{transform:none;border:1.5px solid var(--line);box-shadow:none;background:#fff;border-radius:14px;padding:6px}
.mono.has-mark img{width:100%;height:100%;object-fit:contain}
.mono.big.has-mark{padding:8px}
.pf-logo{flex:none;display:grid;place-items:center;width:96px;height:124px;padding:12px;background:#fff;border:1.5px solid var(--line);border-radius:14px}
.pf-logo img{max-width:100%;max-height:100%;object-fit:contain}
@media (min-width:700px){.pf-logo{width:116px;height:150px;padding:14px}}

/* the people behind a member */
.f-people{display:flex;align-items:center;gap:10px;margin:2px 0 10px;font-size:14px;font-weight:600;color:var(--muted)}
.f-ph{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:2px solid var(--paper);box-shadow:0 0 0 1.5px var(--ink);flex:none}
.f-ph+.f-ph{margin-left:-14px}
.f-ph+span{margin-left:2px}
.ph-none{display:grid;place-items:center;background:var(--soft);font:600 16px var(--serif);color:var(--wine)}
.pf-people{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px}
.pf-people li{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start}
.pp-photo{width:88px;height:110px;border-radius:12px;object-fit:cover;object-position:50% 30%;background:var(--soft)}
.pf-people b{display:block;font:600 19px/1.2 var(--serif)}
.pp-role{display:block;font:700 11.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--wine);margin-top:4px}
.pp-focus{display:block;font-size:15px;color:#3b3934;margin-top:6px;line-height:1.45}
.pp-mail{display:inline-flex;align-items:center;min-height:40px;margin-top:4px;font-weight:600;font-size:15px;color:var(--wine)}
@media (min-width:700px){
  .pf-people{grid-template-columns:1fr 1fr}
  .pf-people li{grid-template-columns:1fr;gap:10px}
  .pp-photo{width:100%;height:auto;aspect-ratio:4/5;max-height:300px}
}
@media (max-width:999px){.fn-dock.open{opacity:0;visibility:hidden}.fn-dock.open>*{pointer-events:none}}
.mono.has-mark{display:block;overflow:hidden}
.mono.has-mark img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.card.featured .acts>*{flex:1 1 auto}
.card.featured .acts>*:first-child{flex:1 1 100%}
@media (min-width:700px){.card.featured .acts>*:first-child{flex:1.618 1 0}}

/* recruiting banner: the first thing on the home page */
.recruit{padding:12px 0 0}
.recruit-in{display:grid;grid-template-columns:44px 1fr;gap:6px 12px;align-items:center;background:var(--wine-deep);color:var(--cream);border-radius:var(--r);padding:12px 14px;box-shadow:0 3px 0 var(--ink)}
.recruit-seal{width:44px;height:44px;transform:rotate(-8deg)}
.recruit-in p{font-size:15px;line-height:1.35;color:#f3e6e9}
.recruit-in p b{display:block;font:600 18px/1.2 var(--serif);color:var(--cream);letter-spacing:-.005em}
.recruit-in .btn{grid-column:1/-1;min-height:46px;font-size:15.5px;margin-top:4px}
.r-long{display:none}
@media (min-width:700px){
  .recruit{padding-top:18px}
  .recruit-in{grid-template-columns:56px 1fr auto;padding:14px 16px 14px 18px;gap:18px}
  .recruit-seal{width:56px;height:56px}
  .recruit-in p{font-size:16.5px}
  .recruit-in p b{display:inline;font-size:21px}
  .recruit-in .btn{grid-column:auto;margin:0;padding:0 24px}
  .r-long{display:inline}.r-short{display:none}
}
.f-ph{width:42px;height:42px;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line)}
@media (min-width:700px){.pp-photo{height:260px;aspect-ratio:auto;max-height:none}}
.pf-people li{align-content:start}

/* ======================================================================
   THE VILLAGE: an illustrated guide map with readable pins
   ====================================================================== */
.viewbar{display:flex;justify-content:flex-start;margin:0 0 12px}
.viewtoggle{display:inline-flex;padding:4px;gap:4px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper)}
.viewtoggle button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;font-weight:600;font-size:15px;color:var(--ink)}
.viewtoggle button[aria-pressed=true]{background:var(--ink);color:var(--cream)}
.motion .viewtoggle button{transition:background-color .2s,color .2s}
.is-village #cards,.is-village #examples,.is-village .guide-nudge,.is-village .terr-wrap,.is-village .dir-note{display:none}
.is-village .dir-grid{display:block}
.is-village .dir-grid .head{position:static;max-width:44em;margin-bottom:18px}
.v-fail{margin:0 0 12px;padding:10px 14px;border:1.5px dashed var(--line);border-radius:12px}
.village{margin-top:4px}
.v-note{margin-top:12px}
.v-openfull{display:none;width:100%;margin-top:12px}
.v-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:15px}

.vmap{position:relative;height:min(78vh,780px);min-height:460px;border:1.5px solid var(--ink);border-radius:18px;overflow:hidden;background:#efe6d3;box-shadow:0 4px 0 var(--ink);display:flex;flex-direction:column}
.vm-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;outline:0}
.vm-stage:focus-visible{box-shadow:inset 0 0 0 3px #c08a2d}
.is-grabbing .vm-stage{cursor:grabbing}
.vm-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.vm-svg{display:block;width:1600px;height:1000px}
.vm-pins{position:absolute;inset:0;pointer-events:none}
.vm-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--cream);font-size:14px;font-weight:600;opacity:0;pointer-events:none;white-space:nowrap}
.show-hint .vm-hint{opacity:1}
.motion .vm-hint{transition:opacity .25s}

/* pins: always the same size, whatever the zoom */
.pin{position:absolute;left:0;top:0;pointer-events:auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;max-width:230px;padding:4px 13px 4px 4px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:600 14px/1.15 var(--sans);text-align:left;box-shadow:0 3px 0 var(--ink);cursor:pointer;white-space:nowrap}
.pin:after{content:"";position:absolute;left:var(--tail,50%);bottom:-8px;width:12px;height:12px;background:var(--paper);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateX(-50%) rotate(45deg);box-shadow:3px 3px 0 -1px var(--ink)}
.pin-name{overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.pin-ic{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c,#3a3832);color:#fff}
.pin-ic.has-mark{background:#fff;border:1.5px solid var(--line);overflow:hidden}
.pin-ic.has-mark img{width:80%;height:80%;object-fit:contain}
.pin-ic.is-empty{background:#fffdf8;color:var(--wine);border:1.5px dashed var(--wine)}
.pin-ic.is-land{background:var(--ink);color:var(--cream)}
.pin.is-featured{font-size:15.5px;padding-right:16px;box-shadow:0 4px 0 var(--wine);border-color:var(--wine)}
.pin.is-featured .pin-ic{width:40px;height:40px}
.pin.is-empty{background:#fffdf8;color:var(--wine-deep);border-style:dashed;border-color:var(--wine);box-shadow:none}
.pin.is-empty:after{background:#fffdf8;border-color:var(--wine);box-shadow:none}
.pin.is-landmark{background:var(--ink);color:var(--cream);box-shadow:0 3px 0 #00000040}
.pin.is-landmark:after{background:var(--ink)}
.pin.is-dot{padding:4px;gap:0}
.pin.is-dot .pin-name{display:none}
.pin.is-dim{opacity:.38;filter:saturate(.3)}
.pin.is-active{outline:3px solid #c08a2d;outline-offset:2px;z-index:20!important}
.pin:hover{background:#fff}
.motion .pin{transition:opacity .2s,filter .2s,background-color .15s}

/* the top bar: territory chips and the tools */
.vm-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px;pointer-events:none}
.vm-top>*{pointer-events:auto}
.vm-chips{display:flex;gap:6px;flex-wrap:wrap;max-width:62%}
.vm-chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:600;font-size:14px;color:var(--ink)}
.vm-chip .dot{width:11px;height:11px;border-radius:50%;border:1px solid #20201d55}
.vm-chip[aria-pressed=true]{background:var(--ink);color:var(--cream)}
.vm-tools{display:flex;gap:6px;align-items:center}
.vm-tool{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);font:600 22px/1 var(--sans);display:grid;place-items:center;box-shadow:0 2px 0 var(--ink)}
.vm-tool:hover{background:#fff}
.vm-full{min-height:44px;font-size:15px;padding:0 18px}

/* the highlight card: a side card on desktop, a bottom sheet on a phone */
.vm-card{position:absolute;right:14px;top:68px;width:340px;max-height:calc(100% - 160px);overflow:auto;padding:18px 18px 16px;border:1.5px solid var(--ink);border-radius:16px;background:var(--cream);box-shadow:0 4px 0 var(--ink),0 18px 40px #20201d33;z-index:30}
.motion .vm-card:not([hidden]){animation:mil-rise .3s var(--ease-out) both}
.vc-x{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;border-radius:50%;background:none;font-size:26px;line-height:1}
.vc-x:hover{background:var(--soft)}
.vc-top{display:flex;align-items:center;gap:12px;margin-right:36px}
.vc-top .pin-ic{width:52px;height:52px}
.vc-top .pin-ic svg{width:22px;height:22px}
.vc-top h3{font-size:23px;margin-top:3px}
.vc-t{display:inline-flex;vertical-align:-2px}
.vc-head{margin-top:12px;font:italic 600 17px/1.35 var(--serif);color:var(--wine-deep)}
.vc-gives{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--wine-tint);color:#4a2030;font-size:15px}
.vc-gives b{color:var(--wine-deep)}
.vc-acts{display:flex;gap:8px;margin-top:14px}
.vc-acts .btn{flex:1;min-height:46px;font-size:15px;padding:0 14px}

/* the strip of every business */
.vm-strip{position:relative;z-index:25;flex:none;display:flex;gap:8px;overflow-x:auto;padding:10px 12px;border-top:1.5px solid var(--ink);background:var(--paper);scrollbar-width:thin}
.vs-item{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:4px 14px 4px 5px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:14.5px;color:var(--ink)}
.vs-item .pin-ic{width:36px;height:36px}
.vs-item.is-active{border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.vs-item.is-dim{opacity:.4}
.vs-item.is-empty{border-style:dashed;border-color:var(--wine);color:var(--wine-deep)}

/* full screen: the map becomes the whole window */
html.vm-locked,html.vm-locked body{overflow:hidden}
.vmap.is-full{position:fixed;inset:0;z-index:46;height:auto;min-height:0;border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#efe6d3}
.vmap.is-full .vm-full{background:var(--ink);border-color:var(--ink)}

@media (max-width:699px){
  .vmap{height:330px;min-height:0}
  .vmap:not(.is-full) .vm-top,.vmap:not(.is-full) .vm-strip{display:none}
  .vmap:not(.is-full) .vm-stage{cursor:pointer;touch-action:auto}
  .v-openfull{display:flex}
  .vm-top{flex-direction:column-reverse;align-items:stretch;padding:10px}
  .vm-chips{max-width:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -10px;padding:2px 10px 4px}
  .vm-chips::-webkit-scrollbar{display:none}
  .vm-chip{flex:none}
  .vm-tools{justify-content:flex-end}
  .vm-card{left:0;right:0;top:auto;bottom:0;width:auto;max-height:62%;border-radius:20px 20px 0 0;border-bottom:0;padding:20px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px #20201d33}
  .has-card .vm-strip{visibility:hidden}
}
.pin{max-width:270px}
.vm-stage{z-index:0}
.vm-top{z-index:26}

/* ======================================================================
   WARMER: faces, roots, good things, seasons, help
   ====================================================================== */
.mono.has-photo{transform:none;padding:0;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--wine),0 4px 10px #20201d22;overflow:hidden;background:var(--soft)}
.mono.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pin-ic.has-photo{overflow:hidden;background:var(--soft);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--ink)}
.pin-ic.has-photo img{width:100%;height:100%;object-fit:cover}
.since{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;font-weight:600;color:#4b463d}
.since:before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11l8-7 8 7v9h-5v-6H9v6H4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11l8-7 8 7v9h-5v-6H9v6H4z'/%3E%3C/svg%3E") center/contain no-repeat;color:var(--wine)}
.g-hello{font-family:var(--serif);font-size:18px;color:var(--wine-deep);display:block;margin-bottom:4px}
.photo-pick{display:flex;align-items:center;gap:16px;margin-top:10px}
.photo-prev{flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;border:1.5px dashed #b9ad98;background:var(--cream);color:#8a7f6c;overflow:hidden}
.photo-prev.has{border:2px solid #fff;box-shadow:0 0 0 1.5px var(--wine),0 4px 12px #20201d22}
.photo-prev img{width:100%;height:100%;object-fit:cover}
.photo-acts{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.photo-btn{min-height:48px;cursor:pointer}
#f-photo:focus-visible+.photo-remove,.photo-pick:focus-within .photo-btn{outline:3px solid #c08a2d;outline-offset:3px}
.photo-remove{border:0;background:none;padding:8px 0;min-height:40px;color:var(--wine);font-weight:600;font-size:15px;text-decoration:underline}
.ctl.yr{max-width:160px}
.motion .photo-prev.has img{animation:mil-pop .4s var(--ease-press) both}
.delight{position:fixed;z-index:80;pointer-events:none;width:18px;height:18px}

/* good things happening */
.good{padding:40px 0 8px}
.good-head{display:grid;gap:16px;align-items:end;margin-bottom:18px}
.good-head h2{font-size:clamp(30px,7.6vw,40px);margin:8px 0 10px}
.good-sub{color:#3b3934;max-width:38em}
.good-head .btn{justify-self:start;min-height:52px;font-size:16px}
.good-wall{display:grid;gap:12px}
.gt{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:16px 18px 16px;box-shadow:0 2px 0 #20201d14}
.gt-thx{background:#fffaf0;border-color:#ecd9b4}
.gt-kind{background:var(--wine-tint);border-color:#ecc7d1}
.gt-wel{background:#f1f5e8;border-color:#d3dfbb}
.gt-k{display:flex;align-items:center;gap:8px;font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--wine-deep)}
.gt-wel .gt-k{color:#3f6a4b}
.gt-thx .gt-k{color:#8a5a12}
.gt-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid currentColor}
.gt-d{margin-left:auto;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--muted);font-size:13.5px}
.gt-text{margin-top:10px;font:600 19px/1.4 var(--serif);color:var(--ink)}
.gt-thx .gt-text{font-style:italic}
.gt-from{margin-top:10px;font-size:15px;color:#3b3934;font-weight:600}
.gt-biz{color:var(--wine);font-weight:700}
.good-empty{padding:22px 20px;border:1.5px dashed #d9cdb5;border-radius:16px;background:var(--paper)}
.good-empty .ge-big{font:600 22px/1.25 var(--serif);margin-bottom:6px}
.thanks-panel{margin-bottom:18px}
.thanks-form{background:var(--paper);border:1.5px solid var(--ink);border-radius:18px;padding:20px var(--gutter) 22px;box-shadow:0 4px 0 var(--ink)}
.thanks-form h3{font-size:24px;margin-bottom:4px}
.tf-grid{display:grid;gap:0 20px}
.tf-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tf-acts .submit{width:auto;flex:1 1 220px;margin:0}
.tf-acts .ghost{flex:0 1 auto}
.motion .thanks-panel:not([hidden]){animation:mil-rise .35s var(--ease-out) both}
@media (min-width:700px){
  .good-wall{grid-template-columns:repeat(2,1fr)}
  .tf-grid{grid-template-columns:1fr 1fr}
  .tf-grid .field:nth-child(2){grid-column:1/-1}
  .thanks-form{padding:28px 30px}
}
@media (min-width:1000px){
  .good{padding:64px 0 16px}
  .good-head{grid-template-columns:1.618fr 1fr}
  .good-head .btn{justify-self:end}
  .good-wall{grid-template-columns:repeat(3,1fr)}
}

/* help forms, done states */
.private{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#f1f5e8;border:1.5px solid #d3dfbb;color:#2f4f3c;font-size:15px;font-weight:600;margin:6px 0 4px}
.private svg{flex:none;margin-top:1px}
.help-form .submit{margin-top:18px}
.modal.helpm{max-width:600px}
.modal.helpm .help-form .btn{width:100%}
.help-done{text-align:left;padding:8px 0}
.help-done img{width:96px;transform:rotate(-6deg);margin-bottom:10px}
.help-done h3{font-size:28px;margin-bottom:8px}
.help-done h3:focus{outline:0}
.help-done p{color:#3b3934;margin-top:6px}
.thanks-done{background:var(--paper);border:1.5px solid var(--ink);border-radius:18px;padding:24px;box-shadow:0 4px 0 var(--ink)}
.thanks-done .btn{margin-top:14px}

/* the season: a small chip in the hero and a few drifting touches */
.season-chip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 0;padding:8px 14px 8px 10px;border-radius:999px;background:#fff6e8;border:1.5px solid #ecd9b4;color:#6e4a12;font-size:15px;font-weight:600}
.season-chip[hidden]{display:none!important}
.season-chip a{color:var(--wine-deep);font-weight:700;text-decoration:none;border-left:1.5px solid #ecd9b4;padding-left:10px}
.season-chip a:hover{text-decoration:underline}
.season-chip .si{width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--si) center/contain no-repeat;mask:var(--si) center/contain no-repeat}
:root{--si:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E")}
[data-season=autumn]{--si:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2 5 4-2-1 5 4 1-4 3 2 3-5-1v6h-2v-6l-5 1 2-3-4-3 4-1-1-5 4 2z'/%3E%3C/svg%3E")}
[data-season=spring]{--si:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6' r='4'/%3E%3Ccircle cx='6' cy='11' r='4'/%3E%3Ccircle cx='18' cy='11' r='4'/%3E%3Ccircle cx='8' cy='17' r='4'/%3E%3Ccircle cx='16' cy='17' r='4'/%3E%3C/svg%3E")}
[data-season=holidays]{--si:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L12 16.6 6.6 19.6l1.2-6.1L3.3 9.3l6.1-.7z'/%3E%3C/svg%3E")}
.hero{position:relative}
[data-season=autumn] .hero{background:radial-gradient(60% 70% at 85% 30%,#f8e3c4aa,transparent 70%)}
[data-season=holidays] .hero{background:radial-gradient(60% 70% at 85% 30%,#f6dfe2aa,transparent 70%)}
[data-season=spring] .hero{background:radial-gradient(60% 70% at 85% 30%,#eef3df,transparent 70%)}
[data-season=summer] .hero,[data-season=school] .hero{background:radial-gradient(60% 70% at 85% 30%,#fbefc9aa,transparent 70%)}
.fx{position:absolute;inset:-10px -10px 0;pointer-events:none;z-index:2;display:none}
[data-season=autumn] .fx,[data-season=spring] .fx,[data-season=holidays] .fx{display:block}
.fx i{position:absolute;width:16px;height:16px;opacity:.85}
.fx i:nth-child(1){left:6%;top:8%;--r:-20deg}
.fx i:nth-child(2){left:84%;top:4%;width:12px;height:12px;--r:30deg}
.fx i:nth-child(3){left:92%;top:46%;--r:60deg}
.fx i:nth-child(4){left:2%;top:58%;width:12px;height:12px;--r:-50deg}
[data-season=autumn] .fx i{background:#c4862f;border-radius:0 80% 0 80%;transform:rotate(var(--r))}
[data-season=autumn] .fx i:nth-child(even){background:#970c3e}
[data-season=spring] .fx i{background:#f2c9d4;border-radius:60% 0 60% 0;transform:rotate(var(--r))}
[data-season=holidays] .fx i{width:9px;height:9px;border-radius:50%;background:#f3d9a0;box-shadow:0 0 10px 3px #f3d9a0aa}
@keyframes mil-drift{0%,100%{transform:translate(0,0) rotate(var(--r))}50%{transform:translate(6px,10px) rotate(calc(var(--r) + 25deg))}}
@keyframes mil-twinkle{0%,100%{opacity:.4}50%{opacity:1}}
.motion [data-season=autumn] .fx i,.motion[data-season=autumn] .fx i,.motion[data-season=spring] .fx i{animation:mil-drift 7s ease-in-out infinite}
.motion[data-season=autumn] .fx i:nth-child(2),.motion[data-season=spring] .fx i:nth-child(2){animation-duration:9s;animation-delay:-3s}
.motion[data-season=autumn] .fx i:nth-child(3),.motion[data-season=spring] .fx i:nth-child(3){animation-duration:8s;animation-delay:-5s}
.motion[data-season=holidays] .fx i{animation:mil-twinkle 2.6s ease-in-out infinite}

/* easier for every neighbor: larger small print and tap targets */
.quiet{font-size:15px}
.card .acts>*{height:48px;font-size:16px}
.chip{height:44px;font-size:15.5px}
.navlinks a{font-size:16px}
@media (min-width:1000px){body{font-size:18px}}
.nn-hero .j-seal{width:120px;transform:rotate(-4deg)}
@media (min-width:1000px){.nn-hero .j-seal{width:340px}}
.settle{display:grid;gap:14px}
.settle-card{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.settle-card img{height:84px;width:auto;align-self:flex-start}
.settle-card h3{font-size:25px}
.settle-card p{color:#3b3934}
.settle-card .btn{margin-top:auto;align-self:flex-start}
.settle-card .season-chip{align-self:flex-start;font-size:14px}
.kit-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.kit-list li{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.kit-list img{width:56px;height:56px;object-fit:contain}
.nn-more{margin-top:16px}
.nn-more a{color:var(--wine);font-weight:700}
@media (min-width:700px){.settle{grid-template-columns:repeat(3,1fr)}}
@media (max-width:699px){
  .nn-hero{position:relative}
  .nn-hero .j-hero-grid{grid-template-columns:1fr;grid-template-areas:'text' 'acts'}
  .nn-hero .acts{flex-direction:column;align-items:stretch}
  .nn-hero .acts .btn{width:100%}
  .nn-hero .j-seal{position:absolute;right:12px;top:10px;width:78px}
}

/* Keep a member's own paragraph breaks on their profile. */
.pf-desc{white-space:pre-line}