/* Mosaic Accelerator – Fall 2026
   Responsive build of the design canvas. Desktop artboard 1440, mobile 390;
   everything between them reflows. */

/* ---------- the typefaces, self-hosted ----------
   Atkinson Hyperlegible (400, 700) and Poppins (600), served from this origin
   instead of fonts.gstatic.com. Both are SIL Open Font License 1.1, which
   permits this; see assets/fonts/OFL.txt.

   TWO REASONS, and the second is the bigger one.

   1. Layout shift. A web font arriving after first paint reflows the text, and
      on a long page that moves an anchor you have already jumped to - arriving
      cold at /privacy/#analytics-and-cookies used to land past the heading.
      Same-origin plus a preload means the font is usually there before first
      paint, so nothing swaps and nothing moves.

   2. Privacy. Google Fonts meant Google received the IP address of everyone who
      loaded any page. /privacy/ had to disclose it as "the one third party that
      sees you without you doing anything". There is now no third party at all,
      and that paragraph is gone. DO NOT put a font CDN back.

   The unicode-ranges are Google's own, copied verbatim, so the browser fetches
   exactly the subsets it did before. Poppins Devanagari is deliberately absent -
   there is no Devanagari on this site. Characters outside these ranges fall back
   to a system face exactly as they did before, which is what happens to the
   Greek theta in the land acknowledgement. */
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/atkinson-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/atkinson-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/atkinson-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/atkinson-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --ink:#1C1A17; --paper:#FDFCF9; --stone:#F3F1EC; --line:#E7E3DB; --muted:#6B675F;
  --royal:#0030F0; --ocean:#0070C0; --sky:#00B0F0; --green:#00B050; --lime:#92D050;
  --violet:#7030A0; --magenta:#FF40FF; --red:#FF0000; --gold:#FFC000; --orange:#FF9900;
  --pad: clamp(20px, 5vw, 96px);
  --seam: clamp(48px, 6vw, 84px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* in-page anchors glide rather than jump, so a reader keeps their bearings.
   Anyone who has asked their system for less motion still gets the jump. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Atkinson Hyperlegible',Verdana,sans-serif; font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--royal);text-decoration:none}
a:hover{color:var(--violet);text-decoration:underline}
h1,h2,h3,.face{font-family:'Poppins',system-ui,sans-serif;font-weight:600;margin:0;letter-spacing:-.022em;line-height:1.08}
h1{font-size:clamp(2rem,5.2vw,3.2rem);line-height:1.05}
h2{font-size:clamp(1.55rem,3.6vw,2.35rem)}
h3{font-size:clamp(1.05rem,1.6vw,1.5rem);line-height:1.24}
p{margin:0 0 1em}
.eyebrow{font-family:'Poppins',sans-serif;font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block}
.num{font-variant-numeric:tabular-nums}
.quote{font-style:italic}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout ---------- */
.sec{padding:clamp(28px,4vw,52px) var(--pad) clamp(44px,6vw,78px);background:var(--paper)}
/* .sec paints paper rather than letting the body show through. Looks identical,
   but a seam's 1px overlap can only be covered by a section that actually has a
   background – a transparent one left a hairline at the seam's bottom edge.
   An inline background on the section still wins, which is the normal case. */
.wrap{max-width:1234px;margin:0 auto}
.stack>*+*{margin-top:clamp(14px,2vw,22px)}

/* Angled seams – the hand-laid transition between colour blocks.
   1px overlap top and bottom so sub-pixel rounding cannot show a hairline.

   THE SEAM'S OWN BACKGROUND MUST BE SET INLINE to the colour of the section
   ABOVE it; the inner <i> carries the section BELOW. Omit it and the seam
   falls through to the body paper, painting a cream wedge between two
   coloured sections. Direction alternates r, l, r, l down every page.

       <div class="seam r" style="background:ABOVE"><i style="background:BELOW"></i></div>

   Never fix a visible hairline by pushing the clip-path past 100% – that
   paints over the following section. The negative margin already handles it.

   DO NOT add position:relative here. It was here until September 7, 2026 and
   it put the seam in the positioned-paint phase, so the seam painted ON TOP of
   the section below it. That inverted the 1px overlap: instead of the section
   covering the seam's last row, the seam covered the section's first row – and
   that row is where the clipped <i> antialiases away, showing the seam's own
   background as a full-width hairline in the colour of the section ABOVE.
   Worst on the violet seams, where purple sat over the near-black footer.

   DO NOT add overflow:hidden either. It was here until the same day, and with
   the negative margin it gave Chrome a clip rect on a fractional device pixel,
   which painted a blended row just OUTSIDE the box – a full-width tint of the
   section below, sitting above the seam. It was redundant anyway: <i> is
   height:100% and its clip-path keeps it inside its own box, so a seam has
   nothing to overflow. Confirmed September 7, 2026 at dpr 1, 1.5, 1.75, 2,
   2.5 and 3 by _source/seamprobe.mjs. */
.seam{height:var(--seam);margin:-1px 0;background:var(--paper)}
.seam>i{display:block;height:100%;}
.seam.r>i{clip-path:polygon(0 100%,100% 0,100% 100%)}
.seam.l>i{clip-path:polygon(0 100%,0 0,100% 100%)}

/* ---------- ribbon + nav ---------- */
.ribbon{display:flex;height:10px}
.ribbon span{flex:1}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--pad);background:#fff;flex-wrap:wrap}
.nav .brand{display:flex;align-items:center;gap:11px}
.nav .brand img{height:38px;width:auto}
.nav .brand b{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink)}
.navlinks{display:flex;align-items:center;gap:clamp(12px,1.6vw,25px);font-size:.93rem;flex-wrap:wrap}
/* No hiding of nav links on small screens: .navlinks wraps to a second line
   instead. Removed September 7, 2026 - the links vanishing below 760px meant a
   phone could not reach any page but this one. */

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--royal);color:#fff;padding:15px 26px;text-align:center;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;
  border-radius:34px 34px 34px 6px;border:1.5px solid var(--royal);cursor:pointer}
.btn:hover{background:#0026c4;border-color:#0026c4;color:#fff;text-decoration:none}
.btn.ghost{background:transparent;color:var(--royal)}
.btn.ghost:hover{background:rgba(0,48,240,.06);color:var(--royal)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* A pay button with no Stripe link behind it yet. It must not look clickable:
   muted, not focusable (no href), and inert to the pointer. */
.btn[aria-disabled="true"],.btn.ghost[aria-disabled="true"]{
  background:var(--stone);border-color:var(--line);color:var(--muted);
  cursor:not-allowed;pointer-events:none}

/* ---------- cards & grids ---------- */
.card{background:#fff;border:1px solid var(--line);padding:clamp(20px,2.4vw,30px)}
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1080px){ .g6{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){ .g3{grid-template-columns:1fr} }
@media (max-width:620px){ .g6,.g4,.g2{grid-template-columns:repeat(2,1fr)} }
@media (max-width:430px){ .g6,.g4,.g2{grid-template-columns:1fr} }

/* .brwide – a line break that only applies on wide screens, for a headline
   whose break point cannot be reached with max-width alone. On the Apply page
   the second line is wider than the first, so any container that fits line two
   also pulls the next word up onto line one. Keep the space before the <br> so
   the sentence still reads correctly when the break is off. */
.brwide{display:none}
@media (min-width:1040px){ .brwide{display:inline} }
/* .brxl – the same idea, but only on the widest screens. Costs' comparison
   heading sits in a column, and the line it wants to keep whole needs 661px.
   The column only reaches that at about 1329px, so the break is held back to
   1340: fire it any earlier and it makes three lines where there were two.
   Measured, not guessed - 1300 was tried and was wrong. */
.brxl{display:none}
@media (min-width:1340px){ .brxl{display:inline} }
/* .brsm – the lowest of the three. For a heading whose type is fluid, so the
   line it has to hold shrinks with the viewport and the break stays clean a
   long way down. Below this the text wraps on its own. */
.brsm{display:none}
@media (min-width:620px){ .brsm{display:inline} }

/* .kv – a label/value row, as in "Where the money actually goes". Below 520px
   the value drops under the label instead of both halves wrapping mid-phrase.
   The mobile artboard solved the same problem by shortening every string,
   which one responsive page cannot do. */
.kv{display:flex;justify-content:space-between;gap:14px;padding:11px 0}
.kv+.kv{border-top:1px solid var(--line)}
@media (max-width:520px){ .kv{display:block} .kv strong{display:block;margin-top:3px} }

/* .split – two columns that become one early, for a column of prose beside a
   panel. .g2 holds two columns down to 430px, which is right for a pair of
   short blocks and wrong for this. */
.split{grid-template-columns:1fr 1fr}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
/* .splitw – the same, with the left column given more room, for a heading that
   needs it. Do not do this with an inline grid-template-columns: an inline
   style beats the media query below and the layout then never collapses. */
.splitw{grid-template-columns:1.35fr 1fr}
@media (max-width:900px){ .splitw{grid-template-columns:1fr} }

/* .deco – the loose floating squares in a hero. Absolutely positioned by the
   page; they go away on small screens, where the artboards drop them too. */
.deco{position:absolute;display:block}
@media (max-width:900px){ .deco{display:none} }

/* Home's hero: text beside the photo collage, stacking early because the
   collage needs real width to read as a collage. */
.herogrid{grid-template-columns:1.08fr 1fr}
@media (max-width:980px){ .herogrid{grid-template-columns:1fr} }

/* .stagger - the three Village cards step down the page at desktop and sit
   level once they stack, where an offset would just look like a mistake. */
@media (min-width:861px){ .stagger{margin-top:var(--mt,0)} }

/* The ancestral chart is wide and thin; below the split it can scroll rather
   than crush its twelve rows. */
.ancwrap{overflow-x:auto}
.anc span{animation:riseIn .55s ease backwards}
@keyframes riseIn{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .anc span{animation:none} }

/* .cardlink - a whole card that is a link. */
.cardlink{transition:border-color .15s ease,transform .15s ease}
.cardlink:hover{border-color:var(--royal);transform:translateY(-2px);text-decoration:none}
@media (prefers-reduced-motion:reduce){ .cardlink{transition:none} .cardlink:hover{transform:none} }

/* .statgrid - the Impact numbers. Three across only while the cards are wide
   enough for a one-line caption; two across through the middle band, where .g3
   would still be showing three cramped columns. */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
@media (max-width:1150px){ .statgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .statgrid{grid-template-columns:1fr} }

/* .wallgrid - the alumnae milestone wall. Four across, then three, two, one.
   The cards are slightly rotated, so the gap has to carry the tilt. */
.wallgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 18px}
@media (max-width:1080px){ .wallgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .wallgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .wallgrid{grid-template-columns:1fr} }

/* .villagefilter - search and category above the Village grid. */
.villagefilter{display:grid;grid-template-columns:1.4fr 1fr auto;gap:12px;margin-bottom:26px;align-items:center}
@media (max-width:760px){ .villagefilter{grid-template-columns:1fr} }
.villagefilter .fld{font-size:.95rem;padding:11px 16px}
/* a person hidden by the filter, rather than removed - the grid keeps its shape */
[data-village][hidden]{display:none!important}

/* .villagegrid - the forty-one Village portraits. Five across on a wide screen,
   down to two on a phone: below that the faces are too small to be faces. */
.villagegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 20px}
@media (max-width:1080px){ .villagegrid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:860px){ .villagegrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .villagegrid{grid-template-columns:repeat(2,1fr)} }

/* asymmetric corners, cycled so no two neighbours match */
.r1{border-radius:8px 8px 8px 40px} .r2{border-radius:40px 8px 8px 8px}
.r3{border-radius:8px 40px 8px 8px} .r4{border-radius:8px 8px 40px 8px}
.tilt1{transform:rotate(-.6deg)} .tilt2{transform:rotate(.5deg)}
.tilt3{transform:rotate(-.4deg)} .tilt4{transform:rotate(.7deg)}
@media (max-width:620px){ .tilt1,.tilt2,.tilt3,.tilt4{transform:none} }

.bar{height:9px;width:30px;display:block;margin-bottom:12px}

/* ---------- key dates ---------- */
.dates{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:1000px){ .dates{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .dates{grid-template-columns:repeat(2,1fr)} }
.date{background:var(--paper);padding:18px}
.date .k{font-size:.78rem;color:var(--muted)}
.date .v{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.15rem}

/* ---------- fit check ---------- */
.q{background:#fff;color:var(--ink);padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,30px)}
.q h3{font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.3}
.qhead{display:flex;align-items:baseline;gap:13px;margin-bottom:14px}
.qhead i{width:15px;height:15px;flex:none;transform:rotate(-9deg);display:block}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{cursor:pointer;font-size:.95rem;padding:11px 19px;border-radius:22px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font-family:'Atkinson Hyperlegible',Verdana,sans-serif;line-height:1.3;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.opt:hover{border-color:var(--royal)}
.opt[aria-pressed="true"]{background:var(--royal);border-color:var(--royal);color:#fff}
.result{background:#fff;color:var(--ink);padding:clamp(22px,2.6vw,32px);position:sticky;top:20px}
@media (max-width:900px){ .result{position:static} }
.fitgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,2.4vw,34px);align-items:start}
@media (max-width:900px){ .fitgrid{grid-template-columns:1fr} }
.tiles{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.tiles i{width:30px;height:30px;display:block}

/* ---------- forms ---------- */
.q2{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:1.02rem;margin-bottom:5px}
.hint{display:block;font-size:.87rem;color:var(--muted);margin-bottom:11px}
.fld{width:100%;font:inherit;font-size:1rem;padding:13px 16px;background:#fff;
  border:1.5px solid var(--line);border-radius:30px;color:var(--ink)}
textarea.fld{border-radius:20px;resize:vertical;line-height:1.55;min-height:120px}
.fld:focus{outline:none;border-color:var(--royal)}
.fld::placeholder{color:#9A958C}
.pillset{display:flex;flex-wrap:wrap;gap:9px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border:1.5px solid var(--line);
  background:#fff;border-radius:26px;font-size:.95rem;cursor:pointer}
.pill:hover{border-color:var(--royal)}
.pill input{accent-color:var(--royal);margin:0}
.pill:has(input:checked){background:var(--royal);border-color:var(--royal);color:#fff}
fieldset{border:0;padding:0;margin:0 0 26px}
.formstep{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.formstep i{width:13px;height:13px;display:block;transform:rotate(-9deg);flex:none}
.formstep .n{font-family:'Poppins',sans-serif;font-weight:600;font-size:.78rem;color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:clamp(36px,5vw,64px) var(--pad) 26px}
.foot a{color:#E7E3DB}
.foot a:hover{color:#fff}
/* logo | program | co-op | about | newsletter. The second column used to be
   labelled "The co-op" while carrying About, Impact and AI our way, which are
   about the organisation, not the co-op. Splitting them also gives /ai-our-way
   a route in: it is not in the nav, so the footer is its only one.
   Widths verified at 1440: no link wraps. The gap resolves to 40px there. */
.footgrid{display:grid;grid-template-columns:1.15fr .95fr .78fr .85fr 1.35fr;gap:clamp(20px,2.8vw,40px)}
/* Five columns need about 1150px. Below that the .78fr co-op column is too
   narrow and "Founding Members" wraps, so drop to the two-column layout there
   rather than at 900 as before. */
@media (max-width:1150px){ .footgrid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footgrid{grid-template-columns:1fr} }
.land{border-top:1px solid #3A3733;margin-top:34px;padding-top:22px;font-size:.82rem;line-height:1.6;color:#C9C4BC}

/* ---------- application form layout ---------- */
.formgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(24px,3.4vw,56px);align-items:start}
@media (max-width:1000px){ .formgrid{grid-template-columns:1fr} }
.formgrid aside{position:sticky;top:18px}
@media (max-width:1000px){ .formgrid aside{position:static} }
@media (max-width:620px){ .grid.g3{grid-template-columns:1fr !important} }
fieldset .stack>*+*{margin-top:clamp(16px,2vw,22px)}

.doors{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.door{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);
  padding:17px 20px;border-radius:8px 30px 8px 8px;cursor:pointer}
.door:hover{border-color:var(--royal)}
.door input{accent-color:var(--royal);margin:4px 0 0;flex:none}
.door:has(input:checked){border-color:var(--royal);box-shadow:inset 0 0 0 1px var(--royal)}
.doorbar{width:11px;height:38px;flex:none;transform:rotate(-5deg);display:block;margin-top:2px}
.doortxt{display:block}
.doorsub{display:block;font-size:.92rem;color:var(--muted);margin-top:2px}
.pill:has(input:checked) span{color:#fff}
.door input:focus-visible,.pill input:focus-visible{outline:2px solid var(--royal);outline-offset:3px}

/* ---------- legal documents ----------
   /privacy/, /terms/, /refunds/ and /accessibility/. These are documents, not
   marketing pages: one measure of about 70 characters, generous leading, and
   no tilts or decoration. Built by _source/build_legal.py from the markdown in
   _source/legal/ - the words are edited there, never here and never in the
   HTML. */
.legal{max-width:41em;font-size:clamp(1rem,1.05vw,1.06rem);line-height:1.72}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:8px}
.legal h2{font-size:clamp(1.28rem,2vw,1.62rem);margin:clamp(38px,4.4vw,58px) 0 14px;
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.legal h1+p{color:var(--muted);font-size:.92rem}
.legal p{margin:0 0 1.05em}
.legal ul{margin:0 0 1.05em;padding-left:1.15em}
.legal li{margin-bottom:.5em}
.legal a{color:var(--royal);text-underline-offset:3px}
.legal strong{font-weight:600}
.scrollx{overflow-x:auto;margin:0 0 1.4em}
.legaltable{border-collapse:collapse;width:100%;min-width:430px;font-size:.96rem}
.legaltable th,.legaltable td{text-align:left;padding:11px 16px 11px 0;border-bottom:1px solid var(--line)}
.legaltable th{font-family:'Poppins',system-ui,sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.legaltable td:first-child{font-weight:500}

/* ---------- ecosystem cards, Home ----------
   Per-card corner and tilt come from the artboard and are set inline. The tilt
   is dropped on narrow screens, as everywhere else on the site. */
.pcard{display:block;text-decoration:none}
@media (max-width:620px){ .pcard{transform:none !important} }
.legallede{font-size:1.12rem;line-height:1.6;color:var(--ink);max-width:38em}
/* The document body starts a fresh section, so its first heading needs neither
   the rule above it nor the space that separates one section from the next. */
.legal>*:first-child{margin-top:0;padding-top:0;border-top:0}

/* The document and a sticky list of its sections. The measure stays about 70
   characters; the list fills the space that would otherwise sit empty beside
   it at desktop widths, and drops below the document on narrow screens.
   The inner max-width is applied left-aligned rather than by narrowing .wrap,
   so the text still starts on the same line as the nav and the footer. */
.legalgrid{display:grid;grid-template-columns:minmax(0,1fr) 250px;
  gap:clamp(26px,3.4vw,54px);align-items:start;max-width:1010px}
.legalnav{position:sticky;top:20px}
/* A panel, so the list reads as its own thing rather than as stray text beside
   the document. Stone on the paper section, with the page's own accent on the
   bar and on whichever section you are hovering. --accent is set inline per
   page by build_legal.py: sky for privacy, violet for terms, green for
   refunds, orange for accessibility. */
.legalnavbox{background:var(--stone);border:1px solid var(--line);
  padding:20px 22px;border-radius:8px 8px 8px 34px}
.legalnavbar{display:block;width:34px;height:9px;background:var(--accent,var(--royal));
  transform:rotate(-4deg);margin-bottom:13px}
.legalnav ul{list-style:none;margin:11px 0 0;padding:0;
  border-left:2px solid var(--line)}
.legalnav li{margin:0}
.legalnav a{display:block;padding:7px 0 7px 14px;margin-left:-2px;
  border-left:2px solid transparent;font-size:.92rem;line-height:1.35;
  color:var(--muted);text-decoration:none}
.legalnav a:hover{color:var(--ink);border-left-color:var(--accent,var(--royal))}
@media (max-width:960px){
  /* minmax(0,1fr), not 1fr: a plain 1fr takes its minimum from the content, so
     the refund table's min-width pushed the whole page 60px wide at 390. */
  .legalgrid{grid-template-columns:minmax(0,1fr)}
  .legalnav{position:static;order:-1;margin-bottom:8px}
}

/* "You are here" in the nav. Every artboard that carries a nav inks the current
   page's link and underlines it in orange; the built site never did until
   September 8, 2026. head(here='/village/') is what sets it. */
.navlinks a.here{color:var(--ink);border-bottom:2.5px solid var(--orange);padding-bottom:2px}

/* A select showing its prompt should look like a field showing a placeholder,
   not like one holding an answer. This matches .fld::placeholder above, and it
   only fires while the selected option is the disabled prompt - so a real
   first choice, like "Every kind of help" on the Village filter, stays ink. */
select.fld:has(option:disabled:checked){color:#9A958C}

/* ---------- Find Your Program, the four-question finder ----------
   Options are buttons, not radios: the answer changes the page immediately
   rather than waiting for a submit, and there is nothing to submit. */
.finderopts{display:flex;flex-wrap:wrap;gap:8px}
.finderopt{font:inherit;font-size:.93rem;line-height:1.25;text-align:left;cursor:pointer;
  padding:10px 15px;border-radius:24px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink)}
.finderopt:hover{border-color:var(--royal)}
.finderopt.on{background:var(--royal);border-color:var(--royal);color:#fff}
.finderopt:focus-visible{outline:2px solid var(--royal);outline-offset:3px}

/* ---------- the mobile header ----------
   The pages are long: Home is 17.6 phone screens, the Village 16. Before this,
   the nav was 218px of a 844px viewport - 26% of the first screen - and once
   you scrolled past it there was no way back to it short of scrolling to the
   top of seventeen screens.

   Below 760px the bar becomes sticky and compact: the kaleido mark and the
   name, the Apply button, and a disclosure holding the six links.

   IT USES NO JAVASCRIPT, deliberately. /accessibility/ promises "every page
   works without JavaScript except the application form", so the menu is a
   native <details>: keyboard-operable and announced as expanded/collapsed for
   free. The same page also promises "nothing that moves on its own", which is
   why the bar is plainly sticky rather than hiding on scroll down. Do not
   "improve" either of those with script.

   The desktop nav is untouched. */
.menu{display:none}
.applyshort{display:none}
/* "Start your application" (September 13, 2026) is three characters longer than the
   label it replaced. Up to 1159px it pushed the nav onto an extra row - 190px at
   780px, 142px instead of 84px at 1120-1140px - so the short label covers 760-1159px
   too. Measured against the old header at every width from 760px to 1300px: none
   is taller than it was. The full label shows only where it fits beside the nav. */
@media (min-width:760px) and (max-width:1159px){.applylong{display:none}.applyshort{display:inline}}
.menu > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;width:44px;height:44px;margin:0;border-radius:8px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::marker{content:''}
.menu > summary:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
.menu[open] > summary{border-color:var(--royal);color:var(--royal)}

@media (max-width:760px){
  .nav{position:sticky;top:0;z-index:60;background:#fff;flex-wrap:nowrap;gap:10px;
    padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .navlinks{display:none}          /* the desktop row */
  .menu{display:block}
  .nav .brand{min-width:0}
  .nav .brand img{height:30px}
  .nav .brand b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav .navapply{padding:10px 15px;font-size:.8rem;white-space:nowrap}
  /* "Apply for Fall 2026" and the full wordmark cannot both fit on a 390px
     bar - the name truncated to "Mosaic Ac...". The button says "Apply" here
     instead. It still goes to /apply/, and in a bar headed by the Mosaic name
     it is not ambiguous. The full label is back from 761px up. */
  .applylong{display:none}
  .applyshort{display:inline}
  .nav .brand b{font-size:.94rem;white-space:nowrap;overflow:visible;text-overflow:clip}

  /* The panel overlays rather than pushing the page down, so opening the menu
     never moves the content underneath it. .nav is sticky, which is a
     positioned element, so this resolves against the bar. */
  /* Scoped to [open] on purpose. Setting display on .menupanel unconditionally
     overrides the browser's own hiding of closed <details> content: the panel
     kept rendering while shut, 518px tall and squeezed into the 44px summary
     column, with its six links still in the tab order. Let the UA hide it. */
  .menu[open] .menupanel{position:absolute;left:0;right:0;top:100%;display:flex;
    flex-direction:column;background:#fff;border-bottom:1px solid var(--line);
    padding:4px var(--pad) 14px;box-shadow:0 14px 28px rgba(28,26,23,.12)}
  .menupanel a{padding:13px 0;border-top:1px solid var(--line);font-size:1rem}
  .menupanel a.here{color:var(--ink);font-family:'Poppins',sans-serif;font-weight:600}

  /* Without this every in-page anchor lands underneath the sticky bar. There
     are 30+ of them: 20 links to /co-op/#founding-members alone, plus #become,
     #gift, #fit, #join, #newsletter and every heading in the four legal pages'
     "On this page" lists. */
  [id]{scroll-margin-top:74px}
}