/* Section draw C, picked 9/24 (Carter): community header plane, Where we've shown up, the land band as the
   boundary into What we put in writing, and the About drawings. Square corners throughout. Motion runs once on
   scroll-in (sections-c.js adds .sc-js and .in); without JS or with reduced motion everything shows at rest. */

/* shared: drawn lines */
.sc-how .d,.sc-head .d{stroke-dasharray:1;stroke-dashoffset:0}
html.sc-js [data-sc]:not(.in) .d{stroke-dashoffset:1}
html.sc-js [data-sc] .d{transition:stroke-dashoffset 1.1s cubic-bezier(.3,.6,.2,1)}

/* community header: planes only, one parcel lifts (C-O2) */
.sc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.sc-head.page-head{padding-bottom:clamp(40px,5vw,72px)}
.sc-plane{margin:0}
.sc-plane .gplane{display:block;width:100%;height:auto;overflow:visible}
.sc-head .lft{transform:translateY(-16px)}
html.sc-js .sc-head.in .lft{transition:transform 1s cubic-bezier(.2,.8,.2,1) .35s}
html.sc-js .sc-head:not(.in) .lft{transform:none}

/* Where we've shown up (C-O3): markers neutral at rest, blue and lifted on hover/focus */
.sc-shown{padding-top:0}
.sc-shown-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,80px);align-items:start}
.sc-shown-grid .t-lead{margin-top:20px;max-width:44ch}
.sc-meets li{display:grid;grid-template-columns:68px minmax(0,1fr);gap:18px;align-items:start;padding:26px 0;border-top:1px solid var(--stone)}
.sc-meets li:last-child{border-bottom:1px solid var(--stone)}
.sc-meets .co{display:block;font:500 13px/1.4 var(--label);letter-spacing:.08em;color:var(--muted)}
.sc-meets h3{margin-top:6px;font:600 22px/1.2 var(--disp);letter-spacing:-.01em}
.sc-meets p{margin-top:4px;color:var(--ink-soft)}
.sc-meets .more{margin-top:14px}
.sc-log{margin-top:12px;display:grid;gap:8px}
.sc-next .mkr .mk,.sc-next .mkr .tw{stroke:var(--electric);stroke-dasharray:4 4;fill:transparent}
.sc-next .co{color:var(--electric)}
.sc-next p{margin-top:6px;max-width:48ch}
.sc-meets li.sc-next:hover .mk,.sc-meets li.sc-next.lit .mk{fill:transparent;transform:none}
.sc-log li{display:grid!important;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:0!important;border:0!important;align-items:baseline}
.sc-log .d{font:500 13px/1.5 var(--label);letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-log .w{color:var(--ink-soft)}
.sc-log .w b{font-weight:500;color:var(--ink)}
@media (max-width:560px){.sc-log .w b,.sc-log .v{display:block}.sc-log .sep{display:none}}
.sc-meets .mkr{display:block;width:68px;height:auto;overflow:visible;margin-top:2px}
.sc-meets .mk{transition:fill .2s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.sc-meets li:hover .mk,.sc-meets li:focus-within .mk,.sc-meets li.lit .mk{fill:var(--electric);transform:translateY(-6px)}

/* the land band is the boundary between What we heard (sand) and What we put in writing (C-O4) */
#questions{padding-bottom:clamp(40px,5vw,72px)}
.sc-band{line-height:0}
.sc-bband{display:block;width:100%;height:clamp(52px,4.4vw,70px)}
.sc-bband .pl{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.sc-bband .pl .top{transition:fill .2s ease}
@media (hover:hover){.sc-bband .pl:hover{transform:translateY(-4px)}.sc-bband .pl:hover .top{fill:var(--electric)}}
#documents{padding-top:clamp(56px,6vw,96px)}

/* What we heard: the first six show; the rest open with one button (all answers stay in the page for search and no-JS) */
html.sc-js .answers.sc-collapsed .answer:nth-child(n+7){display:none}
html.sc-js .answers.sc-collapsed .answer:nth-child(6){border-bottom:1px solid var(--stone)}
.sc-more{margin-top:28px;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:500 16px/1 var(--text);cursor:pointer;transition:background .2s,color .2s}
.sc-more:hover{background:var(--ink);color:#fff}
.sc-more::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.sc-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}

/* About · How we work: the same site at three stages (C-O5), no boxes */
.sc-pfig{margin:0 0 22px}
.sc-pfig .pdraw{display:block;width:100%;height:auto;overflow:visible}
html.sc-js .sc-how:not(.in) .pdraw .plan,html.sc-js .sc-how:not(.in) .pdraw .tr{opacity:0}
html.sc-js .sc-how .pdraw .plan{transition:opacity .7s ease calc(.9s + var(--i)*.45s)}
html.sc-js .sc-how .pdraw .tr{transition:opacity .4s ease calc(1s + var(--i)*.45s + var(--k,0)*25ms)}
html.sc-js .sc-how .sc-pc .d{transition-delay:calc(var(--i)*.45s)}
.sc-how .pdraw .k2{transform-box:fill-box;transform-origin:50% 100%}
html.sc-js .sc-how:not(.in) .pdraw .k2{transform:scaleY(.02);opacity:0}
html.sc-js .sc-how .pdraw .k2{transition:transform .8s cubic-bezier(.2,.8,.2,1) 1.4s,opacity .2s ease 1.4s}

@media (max-width:860px){
  .sc-grid,.sc-shown-grid{grid-template-columns:minmax(0,1fr)}
  .sc-how .principles{gap:48px}
}
@media (prefers-reduced-motion:reduce){
  .sc-meets li:hover .mk,.sc-meets li:focus-within .mk,.sc-meets li.lit .mk,.sc-bband .pl:hover{transform:none}
  [data-sc] *{transition:none!important}
}