/* Cagora page styles.
   Mirrors the Care Share Do page system: same wrap width, band rhythm,
   type scale, pill and card shapes. Palette shifted from purpose green
   to agora indigo and amber. */

:root{
  /* neutrals, shared with the network */
  --ink:#1b2430; --ink-2:#3b4654; --ink-3:#66717f;
  --paper:#f6f3ec; --card:#ffffff; --line:#e3ded3;
  /* Cagora accents */
  --deep:#151a2c; --deep-2:#1d2440; --on-deep:#eef0f8; --on-deep-2:#a8b0cc;
  --agora:#4e52b8; --agora-deep:#2b2f6b; --agora-soft:#e9eaf8;
  --amber:#e0a02a; --amber-bright:#ffd166; --amber-soft:#fdf0d2;
  --terracotta:#c9622f; --sage:#5cb85c;
  /* the three faces of the agora */
  --learn:#4e52b8; --meet:#c9622f; --trade:#1d7a50;
  --learn-soft:#e9eaf8; --meet-soft:#fbe8df; --trade-soft:#e1f2ea;
  /* The 'you are here' tile on the shared network grid. Each site in the
     network sets these three to its own accent, so the highlight always
     looks native. Cagora uses amber against the indigo tiles. */
  --here-bg:#fdf0d2; --here-line:#ffd166; --here-ink:#8a6200;
  --spectrum:linear-gradient(90deg,#E01B18 0%,#F4551E 7%,#F58220 13%,#F2A81E 19%,#A8AF2B 25%,#5CB85C 38%,#0F7A63 66%,#14453A 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--agora)}
a:hover{color:var(--agora-deep)}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3,.brand{font-family:'Bricolage Grotesque',Figtree,sans-serif}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(32px,5vw,46px);font-weight:800}
h2{font-size:clamp(28px,4vw,42px);font-weight:800}
h3{font-size:clamp(20px,2.4vw,24px);font-weight:700}
p{margin:0 0 16px}
:focus-visible{outline:3px solid var(--agora);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* bands */
.band{padding:84px 0}
.band.alt{background:var(--card)}
.band.deep{background:var(--deep-2);color:var(--on-deep)}
.band.deep h2,.band.deep h3{color:#fff}
.band.deep .kicker{color:var(--amber-bright)}
.band.tight{padding:56px 0}
.kicker{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.lede{font-size:clamp(19px,2.2vw,22px);line-height:1.5;color:var(--ink-2);max-width:60ch;margin-top:18px}
.prose{max-width:62ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:17px;padding:12px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.primary{background:var(--amber-bright);color:#2a2208;box-shadow:0 2px 10px rgba(27,36,48,.14)}
.btn.primary:hover{background:#ffdd8e;color:#2a2208}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink-3)}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn.on-deep{background:var(--amber-bright);color:#2a2208}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.cta-note{font-size:15px;color:var(--ink-3)}

/* hero */
.hero{padding:72px 0 64px}
.hero .prehead{font-size:17px;color:var(--ink-3);margin-bottom:14px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}

/* pills and chips */
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none}
.pill:hover{border-color:var(--agora);color:var(--agora-deep)}
.pill .dot{width:9px;height:9px;border-radius:50%;background:var(--agora);flex:none}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15.5px;color:var(--ink-2)}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--trade-soft);border:1px solid var(--trade);flex:none}

/* grids and cards */
.grid{display:grid;gap:22px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2);margin-bottom:0}
.card .lead{font-weight:600;color:var(--ink);margin-bottom:10px}
.card .more{display:inline-block;margin-top:14px;font-weight:600;font-size:15.5px}
.card.learn{border-top:4px solid var(--learn)}
.card.meet{border-top:4px solid var(--meet)}
.card.trade{border-top:4px solid var(--trade)}
.card.soft{background:var(--paper)}

/* numbered steps */
.steps{counter-reset:step;list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.steps li{counter-increment:step;display:flex;gap:16px;align-items:flex-start}
.steps li::before{content:counter(step);flex:none;width:34px;height:34px;border-radius:50%;background:var(--agora-soft);color:var(--agora-deep);font-weight:800;display:grid;place-items:center;font-size:16px}
.steps b{display:block}
.steps span{color:var(--ink-2)}

/* definition rows, used by privacy and FAQ-style blocks */
.rows{display:grid;gap:14px;margin-top:26px}
.row-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.row-item b{display:block;margin-bottom:4px}
.row-item span{color:var(--ink-2)}

details.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:700;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--ink-3);font-weight:700}
details.faq[open] summary::after{content:"\2212"}
details.faq p{margin:12px 0 0;color:var(--ink-2)}

/* placeholder marker, for pages still to be built */
.placeholder{background:var(--amber-soft);border:1px dashed var(--amber);border-radius:14px;padding:18px 20px;font-size:15.5px;color:#5b4410}
.placeholder b{font-weight:700}

/* final call to action */
.closer{background:var(--deep);color:var(--on-deep);padding:84px 0;text-align:center}
.closer h2{color:#fff;max-width:20ch;margin:0 auto}
.closer p{color:var(--on-deep-2);max-width:56ch;margin:18px auto 0}
.closer .cta-row{justify-content:center}

/* hero ripple. Mirrors the Care Share Do hero device: a 360 square holding
   three expanding rings, the mark in the middle, and interest pills
   scattered around it. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) 360px;gap:48px;align-items:center}
.ripple{position:relative;width:min(360px,100%);aspect-ratio:1;justify-self:center}
.ripple .rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ripple .ring{transform-origin:100px 100px;opacity:0;animation:cg-ripple 5.4s cubic-bezier(.3,.6,.4,1) infinite}
.ripple .r2{animation-delay:1.8s}
.ripple .r3{animation-delay:3.6s}
@keyframes cg-ripple{
  0%{transform:scale(.16);opacity:0}
  14%{opacity:.85}
  100%{transform:scale(1.04);opacity:0}
}
.ripple-mark{position:absolute;top:50%;left:50%;width:84px;height:84px;transform:translate(-50%,-50%)}
.pill.float{position:absolute;background:var(--card);box-shadow:0 4px 14px rgba(27,36,48,.12);font-size:14px;padding:7px 14px;white-space:nowrap}
.pill.float.p1{top:5%;left:1%}
.pill.float.p2{top:25%;left:54%}
.pill.float.p3{top:61%;left:0}
.pill.float.p4{top:83%;left:46%}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .ripple{order:2}
}
@media (prefers-reduced-motion:reduce){
  .ripple .ring{animation:none;opacity:.4}
  .ripple .r1{transform:scale(.5)}
  .ripple .r2{transform:scale(.76)}
  .ripple .r3{transform:scale(1)}
}

/* ============================================================
   About / network page. Shared across the network: the pillar
   tiles, Our Common Grounds, the founders, and the contact block
   lifted from the Climateers contact page.
   ============================================================ */

.pillargrid{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.pillargrid li{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--agora);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pillargrid .nm{font-family:'Bricolage Grotesque',Figtree,sans-serif;font-weight:800;font-size:20px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.pillargrid .nm:hover{color:var(--agora-deep)}
.pillargrid p{color:var(--ink-2);margin:0;flex:1;font-size:15.5px}
.pillargrid .dom{font-size:14.5px;font-weight:600;color:var(--agora);text-decoration:none;word-break:break-word}
.pillargrid .dom:hover{color:var(--agora-deep);text-decoration:underline}
.pillargrid li.here{border-top-color:var(--here-line);background:var(--here-bg);box-shadow:inset 0 0 0 1px var(--here-line)}
.pillargrid li.here .nm::after{content:"you are here";display:block;font-family:Figtree,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--here-ink);margin-top:4px}
.pillarmore{margin:24px 0 0;color:var(--ink-2)}

.founders{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.founders li{display:block;min-width:0}
.founders .mug{width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--agora-soft);display:block;margin-bottom:12px}
.founders h3{margin-bottom:6px}
.founders p{color:var(--ink-2);font-size:15.5px;margin-bottom:6px}
.founders a{font-size:14.5px;font-weight:600}

.cform{display:grid;gap:15px;max-width:560px;margin-top:26px}
.cform label{display:grid;gap:6px;font-weight:600;font-size:15.5px}
.cform label span{font-weight:400;font-size:14.5px;color:var(--ink-3)}
.cform input[type=text],.cform input[type=email],.cform textarea{font:400 16px/1.5 Figtree,system-ui,sans-serif;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;max-width:100%}
.cform input:focus,.cform textarea:focus{border-color:var(--agora);outline:none;box-shadow:0 0 0 3px var(--agora-soft)}
.cform textarea{resize:vertical}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.source{font-size:14.5px;color:var(--ink-3);margin:0}

.topics{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.topics li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--agora);border-radius:12px;padding:16px 18px;min-width:0}
.topics b{display:block;margin-bottom:3px}
.topics span{color:var(--ink-2);font-size:15.5px}

.mvw{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:24px}
.mvw h3{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.mvw p{color:var(--ink-2);margin:0}

/* ============================================================
   Taxonomy pages: the interests browse, the place ladder, and
   the two breadcrumbs. Generated by tools/make-taxonomy.py from
   the registers in data/.
   ============================================================ */

.band.tx{padding:0;border-top:1px solid var(--line)}
.band.tx .wrap{padding-top:0;padding-bottom:0}
.hero.tight{padding:48px 0 34px}
.muted{color:var(--ink-3)}

/* accordions */
.acc{border:0}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;
  flex-wrap:wrap;padding:22px 0;position:relative}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"";width:9px;height:9px;margin-left:auto;flex:none;
  border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);
  transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.acc[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.acc>summary:hover h2,.acc>summary:hover h3,.acc>summary:hover h4{color:var(--agora-deep)}
.acc>summary h2{font-size:clamp(22px,2.6vw,27px)}
.acc>summary h3{font-size:19px;font-weight:700}
.acc>summary h4{font-size:16.5px;font-weight:700}
.sc{font-size:14px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.also{font-size:13px;color:var(--ink-3);font-style:italic}
.unit{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:14px 0 8px}
.acc-body{padding:0 0 22px}
.acc.sub,.acc.sub2{border-top:1px solid var(--line);margin-left:2px}
.acc.sub>summary{padding:15px 0}
.acc.sub2>summary{padding:12px 0}
.acc.sub .acc-body{padding-left:14px;border-left:2px solid var(--agora-soft)}
.acc.sub2 .acc-body{padding-left:14px;border-left:2px solid var(--line)}

/* pills in the browse */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.pill.sm{font-size:14px;padding:5px 12px}
.pill.out{background:transparent;border-style:dashed;border-color:var(--amber-line,var(--amber));
  color:var(--ink-2);gap:6px}
.pill.out:hover{border-color:var(--amber);color:var(--ink)}
.pill .to{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--amber);white-space:nowrap}
.keynote{font-size:15px;color:var(--ink-2);margin-top:18px;display:flex;flex-wrap:wrap;
  gap:6px;align-items:center;line-height:2}

/* place status pills, same three states as Care Share Do */
.lp{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;
  font-size:14px;font-weight:600;text-decoration:none;border:1px solid transparent}
.lp::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.lp.is-open{background:var(--trade-soft);color:var(--trade);border-color:var(--trade)}
.lp.is-open::before{background:var(--trade)}
.lp.is-live{background:var(--card);color:var(--ink-2);border-color:var(--line-2,var(--line))}
.lp.is-live::before{background:var(--amber)}
.lp.is-closed{background:transparent;color:var(--ink-3);border-color:var(--line);border-style:dashed}
.lp.is-closed::before{background:var(--line-2,#cfc8b8)}
.lp.big{font-size:17px;font-weight:700;padding:8px 16px}
.lcountry{padding:4px 0 10px}

/* the two breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:14.5px;
  color:var(--ink-2);margin-bottom:10px;line-height:1.9}
.crumb-tag{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;margin-right:3px}
.crumbs.interest .crumb-tag{background:var(--agora-soft);color:var(--agora-deep)}
.crumbs.place .crumb-tag{background:var(--trade-soft);color:var(--trade)}
.crumbs .sep{color:var(--line-2,#cfc8b8)}
.crumbs a{text-decoration:none;font-weight:500}
.crumbs a:hover{text-decoration:underline}
.crumbs b{font-weight:700;color:var(--ink)}
/* a navword is a way of browsing, not an address, so it is never a link */
.crumbs .nw{color:var(--ink-3);border-bottom:1px dotted var(--line-2,#cfc8b8);cursor:help}
/* A level that shelves here but keeps its page on another property. Dashed rather than
   dotted, so it reads as "goes somewhere" next to the dotted "goes nowhere". */
.crumbs a.out{border-bottom:1px dashed var(--line-2,#cfc8b8)}
.crumbs a.out .to{font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin-left:4px}
.crumbs.place{margin-bottom:20px}

@media (max-width:560px){
  .crumbs{font-size:13.5px;gap:5px}
  .acc>summary{padding:17px 0}
}
.pills.selfjoin{align-items:center;padding:2px 0 10px}
.selfnote{font-size:13px;color:var(--ink-3);font-style:italic}
.pill.borrowed{border-style:dotted;background:var(--surface,var(--card));color:var(--ink-2);gap:6px}
.pill.borrowed .to{color:var(--ink-3)}
.pill.borrowed:hover{border-color:var(--agora);color:var(--ink)}
.sc.borrowed-n{color:var(--ink-3);font-weight:500;font-style:italic}