, a light `.phead` -- renders white text on cream, which is invisible rather than merely ugly. A dark ground always announces itself with a class; a light one does not. So light is the default now and chalk is the opt-in, and the misplacement failure becomes dark-on-dark, which is still readable. */ .statbub{ background:var(--paper-2); border:2px solid var(--line-2); border-radius:var(--bubble); padding:26px 24px 24px; } .statbub .n{ display:block;font-size:clamp(42px,5.4vw,60px);line-height:1;font-weight:820; letter-spacing:-.04em;color:var(--t-orange-ink); } .statbub .t{display:block;margin-top:12px;font-size:16px;line-height:1.5;font-weight:640;color:var(--ink)} .statbub .src{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-mute);letter-spacing:.02em} /* On a ground that has declared itself dark, the same component flips to chalk. */ .sec-dark .statbub,.sec-teal .statbub,.sec-clay .statbub,.phead .statbub,.matchband .statbub{ background:rgba(255,255,255,.055);border-color:rgba(234,246,246,.24); } .sec-dark .statbub .n,.sec-teal .statbub .n,.sec-clay .statbub .n, .phead .statbub .n,.matchband .statbub .n{color:var(--sun)} .sec-dark .statbub .t,.sec-teal .statbub .t,.sec-clay .statbub .t, .phead .statbub .t,.matchband .statbub .t{color:#fff} .sec-dark .statbub .src,.sec-teal .statbub .src,.sec-clay .statbub .src, .phead .statbub .src,.matchband .statbub .src{color:var(--chalk-mute)} /* ---------- KEPT NOTES (testimonials, 2026-08-10) --------------------------- Kyle: "we need a lot of effort towards showing the care. put some effort into showing love in those areas, the emotion felt in those moments." The existing exemplar for these four quotes was a 2x2 grid of pastel rounded rectangles with a coloured border each. That is the container Kyle named as the failure state, four times, and a uniform equal grid is the structural default the taste ledger says always reads corporate (board-page entry, round 13). These are private moments -- a mentee's face lighting up, a student's dark days. The object that holds a private moment in the school-materials world is a NOTE, and the thing that shows care is that somebody KEPT it. So: different paper stock each, real fasteners, no two the same width or angle, and the student's line -- the hardest-won of the four -- gets the largest sheet and the red margin rule. Nothing here is a card grid. NARROW STACKED TYPE IS A REPEAT OFFENSE (round 13): every note is wide enough to give the quote long horizontal lines. Minimum measure is guarded below, not left to the grid. */ .keptnotes{background:var(--paper);position:relative;overflow:hidden;padding:84px 0 92px} .keptnotes::before{ /* the desk it all sits on, barely there */ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:url(img/textures/graph-paper.png) repeat;background-size:300px 300px;opacity:.055; } .keptnotes .wrap{position:relative;z-index:1} .kn-head{max-width:none} .kn-head h2{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.028em;font-weight:800; margin-top:12px;max-width:24ch} .kn-head p{margin-top:16px;font-size:17.5px;line-height:1.68;color:var(--ink-dim);max-width:60ch} /* Two columns, but the notes are NOT equal: each hugs its own content and its own angle. */ .kn-board{display:grid;grid-template-columns:1.08fr .92fr;gap:34px 42px; align-items:start;margin-top:52px} .note{position:relative;background:#fff;padding:34px 32px 28px; box-shadow:0 20px 42px -24px rgba(7,60,68,.5), 0 2px 0 rgba(7,60,68,.06)} .note q{quotes:none} .note .said{ display:block;position:relative;z-index:1;margin:0; font-size:18px;line-height:1.66;color:var(--ink);font-weight:480; } .note .sig{ display:block;margin-top:20px;padding-top:14px;font-size:14.5px;line-height:1.5; font-weight:640;color:var(--ink-dim);font-style:italic;letter-spacing:.005em; } .note .sig::before{ /* a ruled sign-off line, the way a note is signed */ content:"";display:block;width:74px;height:2px;margin-bottom:13px; background:rgba(7,60,68,.28); } /* The drawn quote mark sits BEHIND the words at low opacity, never through them. */ .note .qm{position:absolute;top:16px;left:22px;width:52px;height:42px;opacity:.2; pointer-events:none;z-index:0} .note .qm path{fill:none;stroke-width:5.5;stroke-linecap:round;stroke:var(--t-teal-ink)} /* --- 1. the student. The hardest-won line of the four, so it gets the biggest sheet, ruled stock and the red margin rule, and it leads the board. --- */ .note-student{ grid-row:span 2;transform:rotate(-.7deg);padding:40px 38px 34px 74px; border:1px solid var(--line-2);border-radius:3px; background-image: linear-gradient(to right, transparent 0 56px, rgba(217,72,43,.34) 56px 58px, transparent 58px), repeating-linear-gradient(to bottom, transparent 0 34px, #e6eff0 34px 35px); } .note-student .said{font-size:21px;line-height:34px;font-weight:520} /* The ruled sheet and the red margin rule already carry this one. A quote mark on top of it landed ON the words, which is the thing the mark is not allowed to do -- and restraint is the stated law, so the busiest note goes without. */ .note-student .qm{display:none} .note-student .qm path{stroke:var(--t-teal-ink)} .note-student::before{ /* paperclip: this one was kept on purpose */ content:"";position:absolute;top:-22px;left:132px;width:34px;height:80px; background:url(img/fasteners/paperclip-1.png) no-repeat center / contain; transform:rotate(4deg);z-index:2; } /* --- 2. a mentor, on a plain slip with washi tape --- */ .note-mentor-a{ transform:rotate(1.1deg);border:1px solid var(--line);border-radius:2px; background:#fffdf6; } .note-mentor-a::before{ content:"";position:absolute;top:-14px;left:50%;width:116px;height:29px;margin-left:-58px; background:url(img/fasteners/washi-sun.png) no-repeat center / contain; transform:rotate(-2.4deg); } .note-mentor-a .qm path{stroke:var(--sun-deep)} /* --- 3. the graduate, on kraft with an index tab --- */ .note-grad{ transform:rotate(-1.5deg);border:1px solid #d8cdb8;border-radius:2px; background:#fdf6e9; background-image:url(img/textures/kraft-fibre.png);background-size:260px 260px; background-blend-mode:multiply; } .note-grad::before{ content:"";position:absolute;top:-11px;right:34px;width:52px;height:34px; background:url(img/fasteners/index-tab-teal.png) no-repeat center / contain; } .note-grad .qm path{stroke:#5c7d1a} /* --- 4. a mentor, on a sticky --- */ .note-mentor-b{ transform:rotate(.8deg);background:#fff6bd;border-radius:2px;padding:30px 28px 26px; box-shadow:0 14px 30px -16px rgba(15,49,44,.5); } .note-mentor-b::before{ content:"";position:absolute;top:-12px;left:40px;width:98px;height:25px; background:url(img/fasteners/washi-teal.png) no-repeat center / contain; transform:rotate(1.8deg); } .note-mentor-b .qm path{stroke:var(--act-deep)} .kn-foot{margin-top:46px;font-size:15.5px;line-height:1.6;color:var(--ink-mute);max-width:64ch} @media(max-width:900px){ .keptnotes{padding:58px 0 64px} .kn-board{grid-template-columns:1fr;gap:30px;margin-top:38px} .note-student{grid-row:auto;padding:32px 26px 28px 56px; background-image: linear-gradient(to right, transparent 0 40px, rgba(217,72,43,.34) 40px 42px, transparent 42px), repeating-linear-gradient(to bottom, transparent 0 34px, #e6eff0 34px 35px)} .note-student .said{font-size:19px} .note-student .qm{left:50px} .note-student::before{left:auto;right:26px} .note{padding:30px 24px 26px} } /* ---------- THE STORY BAND (homepage, 2026-08-10) --------------------------- Amanda's team, after a conference on emotional storytelling: put success stories in front of the ask. They were right about the order and the site was worse than they knew -- across 14 pages there was not one person, name or quote, and her live Wix site has none either (checked /our-success and every blog post). The numbers were doing a job only a person can do. Every word in this band is already published by her: the May 2025 graduation release, verbatim. Nothing here is written by us and nothing is a stock sentiment. The student's own voice is still missing and only she can supply it -- when it arrives it replaces the pastor's line as the lead quote, which is why that quote sits in its own element rather than being welded into the layout. */ .storyband{background:var(--paper-sunk);position:relative;overflow:hidden;padding:78px 0 84px} .storyband .wrap{display:grid;grid-template-columns:minmax(300px,.85fr) 1fr;gap:56px;align-items:start} .story-photo{margin:0;transform:rotate(-1.4deg)} .story-photo img{width:100%;height:auto;display:block} .story-photo figcaption{ margin-top:14px;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-dim);font-weight:640;text-align:center; } .story-pull{ font-size:clamp(28px,3.5vw,42px);line-height:1.16;letter-spacing:-.028em;font-weight:780; color:var(--ink);margin:18px 0 0;text-wrap:balance; } .story-pull .u{position:relative;white-space:nowrap} .story-pull .u::after{ /* the ONE drawn mark in this band */ content:"";position:absolute;left:-2%;right:-2%;bottom:-.16em;height:.3em; background:url(img/marks/underline_orange.svg) no-repeat center / 100% 100%; } .story-attrib{margin-top:16px;font-size:15.5px;font-weight:600;color:var(--ink-dim)} .story-turn{ margin-top:32px;padding-left:24px;border-left:2px solid rgba(217,72,43,.42); font-size:17.5px;line-height:1.68;color:var(--ink-dim);max-width:58ch; } .story-turn b{color:var(--ink);font-weight:680} .story-figs{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:30px} .story-figs div{display:flex;flex-direction:column} .story-figs .n{font-size:clamp(30px,3vw,40px);line-height:1;font-weight:820; letter-spacing:-.035em;color:var(--t-orange-ink);font-variant-numeric:tabular-nums} .story-figs .l{margin-top:7px;font-size:14.5px;line-height:1.4;font-weight:600;color:var(--ink-dim)} .story-ed{ margin-top:34px;padding-top:22px;border-top:1px solid var(--line-2); font-size:16.5px;line-height:1.66;color:var(--ink-dim);max-width:60ch; } .story-ed .story-who{display:block;margin-top:12px;font-size:14.5px;font-weight:660;color:var(--ink)} .story-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px} @media(max-width:880px){ .storyband{padding:56px 0 60px} .storyband .wrap{grid-template-columns:1fr;gap:34px} .story-photo{max-width:420px;margin:0 auto} } /* ---------- THE TALLY SHEET (homepage numbers, 2026-08-10) ------------------ Replaces three `.statbub` cards. Kyle, on the bar for the whole lane: "other containers that look like a generic bubble container with no life besides the colour itself. That reads as a generic build." `.statbub` was authored for a DARK ground (white at 5.5% opacity, chalk border); on the homepage it sits on cream, so the light-section override flipped it to a white rounded rectangle with a hairline. Three of them, side by side, each a different height because one label runs to three lines and the others to one -- so the row also carried two boxes of dead space. ONE ruled sheet holding three rows fixes both at once: it is a real object from the school-materials world, and rows cannot go ragged the way a card row does. Restraint per the note below -- ruled stock, a red margin rule, one strip of washi, and exactly ONE drawn mark, spent on the number worth remarking on. */ .tally{ position:relative; background:#fff; border:1px solid var(--line-2); border-radius:3px; box-shadow:0 20px 44px -24px rgba(7,60,68,.42); transform:rotate(-.35deg); margin-top:38px; padding:16px 34px 12px 78px; background-image: linear-gradient(to right, transparent 0 62px, rgba(217,72,43,.34) 62px 64px, transparent 64px), repeating-linear-gradient(to bottom, transparent 0 33px, #e6eff0 33px 34px); } .tally::before{ /* washi strip, same fastener the news cards use */ content:""; position:absolute; top:-13px; left:64px; width:104px; height:27px; background:url(img/fasteners/washi-teal.png) no-repeat center / contain; transform:rotate(-2.2deg); } /* No row rule: the ruled lines ARE the separator. A border here put a second, shorter line system across the sheet, offset from the rules it sat between. */ .tally-row{ display:grid; grid-template-columns:300px 1fr; align-items:baseline; gap:8px 26px; padding:24px 0 20px; } .tally-row .n{ font-size:clamp(46px,6vw,74px); line-height:1; font-weight:820; letter-spacing:-.042em; color:var(--t-orange-ink); font-variant-numeric:tabular-nums; } .tally-row .t{font-size:17px; line-height:1.5; font-weight:600; color:var(--ink); max-width:46ch} /* THE one drawn mark on this object: the graduation rate is the remarkable claim. */ .tally-row.ringed .n{position:relative; display:inline-block} /* The ring must be sized to the TEXT, not to the cell. `.n` was display:block, so its box filled the 300px grid column while "100%" is only 204px wide -- the ring was drawn against the wrong rectangle and landed over the "00". Kyle: "its not circling the 100 its circling the 00." Shrink-wrap the box to its own glyphs first, then the inset is a real margin around real text. */ .tally-row.ringed .n{ /* justify-self, not display: `.n` is a GRID ITEM, and a grid item stretches to its column regardless of what display it is given. inline-block alone left the box at the full 300px column while the glyphs are 204px, which is what put the ring in the wrong place to begin with. */ display:inline-block; justify-self:start; position:relative; } .tally-row.ringed .n::after{ /* the WIDE variant: circle_orange.svg keeps its aspect ratio, so background-size 100% 100% still drew a circle -- it sat on the "00" and ignored the "1" and the "%". A pen circling a word draws an ellipse; this copy carries preserveAspectRatio="none" so it actually stretches to the number. */ content:""; position:absolute; inset:-19px -17px -15px -15px; pointer-events:none; background:url(img/marks/circle_orange_wide.svg) no-repeat center / 100% 100%; opacity:.8; } @media(max-width:720px){ .tally{padding:10px 22px 8px 54px; transform:rotate(-.25deg); background-image: linear-gradient(to right, transparent 0 40px, rgba(217,72,43,.34) 40px 42px, transparent 42px), repeating-linear-gradient(to bottom, transparent 0 33px, #e6eff0 33px 34px)} .tally::before{left:42px} .tally-row{grid-template-columns:1fr; gap:2px; padding:18px 0 16px} } /* ---------- THE EXEMPLAR PLACEMENTS (our-mission.html, 2026-08-08) ---------- RESTRAINT IS THE POINT. Four uses on a whole page, each earning its place: a torn edge where a hard line was, a chalk texture on the one dark band, tape on the one photo, and a drawn underline on the one heading that matters. The temptation with 42 new assets is to use 42 of them. That is confetti, and it would undo the reason the assets exist. */ /* 1. Chalk dust on the dark band. 7% - inside the 4-8% cap, and the cap is the whole reason the texture reads as atmosphere instead of noise. */ .sec-dark{ position:relative; isolation:isolate } .sec-dark::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url(img/textures/chalk-dust.png) repeat; background-size:340px 340px; opacity:.07; } /* 2. A drawn underline under one heading. Sits BELOW the baseline and never through the words - the rule Kyle set when he said don't block the lines. */ .h-mark{ position:relative; display:inline-block } .h-mark::after{ content:""; position:absolute; left:-1%; width:102%; bottom:-.26em; height:.16em; background-color: var(--sun); -webkit-mask:url(img/marks/underline_teal.svg) no-repeat center / 100% 100%; mask:url(img/marks/underline_teal.svg) no-repeat center / 100% 100%; } .sec:not(.sec-dark) .h-mark::after{ background-color: var(--t-orange) } /* 3. Washi tape on a photo. One piece, off-centre, slightly rotated - tape that is centred and straight reads as a graphic, not as tape. */ .taped{ position:relative } .taped::before{ content:""; position:absolute; z-index:2; top:-15px; left:16%; width:132px; height:42px; transform:rotate(-3.5deg); background:url(img/fasteners/washi-sun.png) no-repeat center / contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.16)); } @media(max-width:760px){ .taped::before{ width:96px; height:31px; top:-11px } } /* Sidebar numbers on the donate page (2026-08-08). Kyle: "the plaintext on the side of that page reads thin." It was thin because the three best numbers this organisation has - $20.3M, 2,151, 100% - were set as body copy inside bullets. Same fix as the Crisis section: the number leads at display size, the sentence explains underneath. */ .gs-nums{display:grid;gap:14px;margin-top:12px} .gs-n{display:grid;gap:2px;padding-left:13px;border-left:3px solid var(--t-teal)} .gs-n .v{font-size:27px;font-weight:820;letter-spacing:-.03em;line-height:1.05;color:var(--t-orange-ink)} .gs-n .k{font-size:14px;line-height:1.45;color:var(--ink-dim);font-weight:560} /* ---------- THE VISION BAND (2026-08-08) ---------- Kyle: "Thats their vision! Show it as such everywhere." A vision statement is the one sentence an organisation would put on a wall. It was formatted as a sub-heading with body text under it. Centred, large, and given room, with the ruled-paper texture behind it so it reads as something written down rather than a paragraph that happens to be last. */ .visionband{position:relative;isolation:isolate;text-align:center} .visionband::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:url(img/textures/ruled-paper-grain.png) repeat;background-size:300px 300px;opacity:.06; } .vision-lbl{color:var(--t-teal-ink);margin-bottom:20px} /* 2026-08-09, Kyle: "cramped to the middle and is more vertically oriented, with 1-3 words on a line and then stacked. i hate that so much ive told you that looks terrible before. It should be longer horiztonal lines." Second offense of the same law - the 19ch measure stacked the creed into a tower. Full measure, one size step down, two long lines instead of six short ones. */ .vision{ margin:0 auto;max-width:none;border:0;padding:0; font-size:clamp(27px,4.1vw,49px);line-height:1.18;letter-spacing:-.03em; font-weight:790;color:var(--ink);text-wrap:balance; } .vision-sub{margin:26px auto 0;max-width:none;font-size:19px;font-weight:680;color:var(--t-teal-ink)} /* =========================================================================== THE PLAN PAGE (plan.html, 2026-08-08). Kyle: "put together a roadmap, very easy to digest (same educational subtle design) just to make it a little fun." The design job here is ownership. A director with no time needs to know at a glance which rows are hers, so the who-badge is the loudest thing after the step number, and the two colours never swap meaning. =========================================================================== */ .keyrow{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:14.5px;color:var(--ink-dim)} .keytxt{margin-right:10px} .who{display:inline-block;border-radius:var(--pill);padding:6px 13px; font-size:12.5px;font-weight:760;letter-spacing:.01em;white-space:nowrap;border:2px solid} .who-you{background:var(--act-soft);color:var(--act-deep);border-color:var(--t-orange)} .who-us{background:var(--t-teal-soft);color:var(--t-teal-ink);border-color:var(--t-teal)} .steps{list-style:none;margin:0;padding:0;display:grid;gap:18px} .step{display:grid;grid-template-columns:66px 1fr;gap:20px;align-items:start; background:var(--paper-2);border:2px solid var(--line);border-radius:var(--bubble); padding:26px 28px 24px} /* The step number as a chalk circle - the single cheapest "school" signal on the page, and it doubles as the thing the eye uses to count progress. */ .step-n{width:56px;height:56px;border-radius:var(--pill);display:grid;place-items:center; background:var(--board);color:var(--sun);font-size:25px;font-weight:820; border:2px solid var(--t-teal)} .step-head{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:10px} .step-head h3{font-size:22px;font-weight:780;letter-spacing:-.022em;margin:0} .step-body > p{font-size:16px;line-height:1.62;color:var(--ink-dim);margin:0 0 12px;max-width:64ch} .tasklist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px} .tasklist li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.55; color:var(--ink);max-width:64ch} /* The drawn checkmark, masked so it takes the section's colour. Kyle praised the checkmark lists specifically, so this extends that pattern rather than replacing the solid chips that already work elsewhere. */ .tick-m{flex:none;width:19px;height:19px;margin-top:3px;background-color:var(--t-teal); -webkit-mask:url(img/marks/checkmark_teal.svg) no-repeat center / contain; mask:url(img/marks/checkmark_teal.svg) no-repeat center / contain} .gain{margin-top:15px;padding:13px 16px;border-radius:var(--bubble); background:var(--sun-soft);border:2px solid var(--sun); font-size:15px;line-height:1.55;color:var(--ink);max-width:64ch} @media(max-width:700px){ .step{grid-template-columns:1fr;gap:14px;padding:22px 20px} .step-n{width:46px;height:46px;font-size:21px} .step-head h3{font-size:19.5px} } /* =========================================================================== THE ONE INTAKE (join.html, 2026-08-08) Three doors into one form. The path picker is the whole design problem: it has to make the choice obvious without making the form feel like three forms. =========================================================================== */ .intake{max-width:760px} .pathpick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px} @media(max-width:720px){.pathpick{grid-template-columns:1fr}} .path{display:grid;gap:5px;text-align:left;cursor:pointer;font:inherit; background:var(--paper-2);border:2px solid var(--line);border-radius:var(--bubble); padding:18px 18px 16px;transition:border-color .2s var(--ease),background .2s var(--ease),transform .3s var(--spring)} .path:hover{transform:translateY(-2px);border-color:var(--line-2)} .path.is-on{border-color:var(--t-teal);background:var(--t-teal-soft)} .path-t{font-size:16.5px;font-weight:740;color:var(--ink)} .path-s{font-size:13.5px;line-height:1.45;color:var(--ink-mute)} /* Icons masked from the drawn set, so they take the state colour and stay on-hand. */ .path-ic{width:30px;height:30px;margin-bottom:4px;background-color:var(--t-teal-ink); -webkit-mask:url(img/icons/partnership.svg) no-repeat center / contain; mask:url(img/icons/partnership.svg) no-repeat center / contain} .path-ic-cap{-webkit-mask-image:url(img/icons/graduation-cap.svg);mask-image:url(img/icons/graduation-cap.svg)} .path-ic-env{-webkit-mask-image:url(img/icons/envelope.svg);mask-image:url(img/icons/envelope.svg)} .path.is-on .path-ic{background-color:var(--t-teal-ink)} .intake-note{margin-top:16px;padding:15px 17px;border-radius:var(--bubble); font-size:15px;line-height:1.6;border:2px solid} .intake-note.is-ok {background:var(--t-green-soft);border-color:var(--t-green);color:var(--ink)} .intake-note.is-warn{background:var(--sun-soft);border-color:var(--sun);color:var(--ink)} .intake-note.is-err {background:#fdecea;border-color:var(--pen-red);color:#5e1b10} /* ---------- READABLE MEASURE (2026-08-12) ---------- Kyle: "the font on that page and on some pages of the site is terribly hard to read plaintext. that hurts my eyes... poorly spaced as well." Measured before changing anything: the scholar application page ran at an AVERAGE of 117 characters per line and a maximum of 137, with 0 margin between paragraphs. news.html was 110. The hand-built pages were already 75-78, which is why only some pages hurt -- the ported pages inherited no measure at all. Typographic comfort is 45-75 characters; past ~90 the eye loses its place on the return sweep, which is felt as strain rather than seen as a defect. Capped at 68ch and given real paragraph rhythm. This is a floor for the whole site, so any future ported page arrives readable instead of needing this found again. */ .sec .wrap p, .sec .wrap li, .phead .lede, .mb-note, /* index: was running 158ch, the widest line on the site */ footer .legal{ max-width:68ch; } /* the footer sits OUTSIDE .sec, so it needed naming */ .sec .wrap p + p{ margin-top:1.05em; } .sec .wrap ul li + li, .sec .wrap ol li + li{ margin-top:.55em; } /* headings keep their own measure -- a display line wants to be longer */ .sec .wrap h1, .sec .wrap h2, .sec .wrap h3{ max-width:22ch; } .sec .wrap h2 + p, .sec .wrap h3 + p{ margin-top:.7em; } /* ---------- KEPT NOTES + TALLY: close the vertical gaps (2026-08-12) ---------- Kyle: "this whole area on the home page is poorly spaced. too much vertical room between these small containers-with just analytics." The section was spaced for the blocks it USED to hold. Three short quotes and three one-line statistics do not need gala-sized air between them -- the gap should be proportional to the size of the thing it separates, and here it was fixed while the contents shrank. Tightened, not cramped: the quotes keep their own breathing room inside each note. */ .keptnotes{ padding:60px 0 64px; } .keptnotes .kn-grid, .keptnotes .notes{ gap:22px; } .keptnotes .note{ margin-bottom:0; } .kn-foot{ margin-top:30px; } .tally{ margin-top:34px; } .tally-row{ padding:16px 0; } .tally-row .t{ margin-top:2px; } @media(max-width:720px){ .keptnotes{ padding:44px 0 48px; } .tally-row{ padding:13px 0; } } /* ---------- THE CORKBOARD — contact page (2026-08-12) ---------- Kyle: "on the contact page, instead of just 3 polaroids, try to make a fun corkboard style picture collage." Not the tidy justified row the other pages use. A board is deliberately irregular: photos at real angles, overlapping slightly, pinned rather than taped, sizes varying. It still never crops -- each photo keeps its own shape, sized by its aspect ratio like everywhere else. */ .corkboard{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px 14px; padding:38px 26px 42px; margin:0; background:#c9a06a; background-image: radial-gradient(rgba(120,80,40,.30) 1px, transparent 1.4px), radial-gradient(rgba(255,235,205,.24) 1px, transparent 1.4px), url(img/textures/kraft-fibre.png); background-size:9px 9px, 13px 13px, 300px 300px; background-blend-mode:normal,normal,multiply; border:1px solid #a67f4e; border-radius:4px; box-shadow:inset 0 0 44px rgba(90,58,24,.34), 0 20px 40px -26px rgba(15,49,44,.55); } .corkboard .pin{ margin:0; background:#fff; padding:9px 9px 26px; border:1px solid rgba(0,0,0,.10); position:relative; box-shadow:0 12px 22px -12px rgba(40,25,8,.65); flex:var(--ar,1.5) 0 auto; max-width:210px; transition:transform .4s var(--spring), box-shadow .3s var(--ease); } .corkboard .pin img{ display:block; width:100%; height:auto; } .corkboard .pin::after{ /* the pin head */ content:""; position:absolute; top:-7px; left:50%; width:14px; height:14px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 34% 32%, #ff8a5c 0 34%, #d1401a 60%, #96270d 100%); box-shadow:0 2px 4px rgba(0,0,0,.45); } .corkboard .pin:nth-child(3n+2)::after{ background:radial-gradient(circle at 34% 32%,#7fd4dd 0 34%,#0a99a3 60%,#06666e 100%); } .corkboard .pin:nth-child(3n+3)::after{ background:radial-gradient(circle at 34% 32%,#d3e88a 0 34%,#a4cf45 60%,#6b8f22 100%); } .corkboard .pin:nth-child(5n+1){ transform:rotate(-3.2deg); } .corkboard .pin:nth-child(5n+2){ transform:rotate(2.4deg) translateY(10px); } .corkboard .pin:nth-child(5n+3){ transform:rotate(-1.4deg) translateY(-8px); } .corkboard .pin:nth-child(5n+4){ transform:rotate(3.6deg); } .corkboard .pin:nth-child(5n+5){ transform:rotate(-2.2deg) translateY(6px); } .corkboard .pin:hover{ transform:rotate(0) scale(1.05); z-index:4; box-shadow:0 20px 34px -14px rgba(40,25,8,.7); } @media(prefers-reduced-motion:reduce){ .corkboard .pin:hover{ transform:none; } } @media(max-width:760px){ .corkboard{ padding:26px 14px 30px; gap:16px 10px; } .corkboard .pin{ max-width:44%; padding:7px 7px 20px; } } /* ---------- NEWS: a wider, width-filling section (2026-08-12) ---------- Kyle: "Lets give the news page a better, wider width filling section." The page inherited the site's standard --max measure, which is right for reading a long argument and wrong for a news index -- a list of stories wants to feel like a front page, not a column. The prose cap set earlier still holds INSIDE each story, so the wider frame does not undo the readability work. */ .newswide .wrap{ max-width:1360px; } .newswide .photowall{ padding-left:0; padding-right:0; } /* the story list itself: a wide two-up that keeps a readable measure per item */ .newsgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:34px 30px; margin-top:34px; align-items:start; } .newsgrid > *{ min-width:0; } .newsgrid p, .newsgrid li{ max-width:60ch; } @media(max-width:900px){ .newsgrid{ grid-template-columns:1fr; gap:26px; } } /* ================= PARTICIPATION SURFACES (2026-08-12) ================= Kyle: "place all of those into the website so that when we do finally have betterworld access its just a simple embed into an already crafted, and nurtured section... slickly slide these in there without removing the emotional pull. Make them easy to access, and more so geared towards participating with the kids and the other kind community members." THE RULE THESE ARE BUILT ON, and it is the session's founding instruction: sell the kids before you ask. None of these open with a price. Each opens with the room you are being invited into, and the transaction is the last line, not the first. Each maps to a REAL OBJECT from her world rather than a generic web widget: · an admission ticket with a tear-off stub (events / RSVP) · a bid sheet clipped to a clipboard (silent auction -- which is literally how a silent auction is run on the night) · a tear-off slip (the newsletter) ⛔ THE EMBED SLOT IS ABSENT UNTIL IT IS REAL. Every section renders complete without BetterWorld: no dead "Buy now", no greyed control, no fake form. The action falls back to a real working path (her inbox). When the account exists, drop the embed into .bw-slot and the fallback hides itself -- one element, no redesign. Absence must never look like presence; that is the donate.html fail-safe, and it is why nothing here can lie about being live. */ .participate{ position:relative; } .bw-slot:empty{ display:none; } .bw-slot:not(:empty) + .bw-fallback{ display:none; } .bw-slot{ margin-top:20px; } /* ---- the admission ticket ---- */ .ticket{ display:grid; grid-template-columns:1fr 250px; align-items:stretch; background:#fffdf6; border:1.5px solid var(--line-2); border-radius:4px; box-shadow:0 20px 38px -24px rgba(15,49,44,.5); overflow:hidden; margin-top:30px; } .ticket-body{ padding:34px 34px 32px; } .ticket-stub{ position:relative; padding:30px 26px; background:var(--paper-sunk); display:flex; flex-direction:column; justify-content:center; gap:14px; } /* the perforation the stub tears along */ .ticket-stub::before{ content:""; position:absolute; left:-1px; top:10px; bottom:10px; width:2px; background-image:radial-gradient(circle, var(--line-2) 1.4px, transparent 1.6px); background-size:2px 11px; } .ticket-eyebrow{ color:var(--t-teal-ink); } .ticket h3{ font-size:29px; font-weight:800; letter-spacing:-.028em; margin-top:10px; max-width:20ch; } .ticket-lede{ margin-top:12px; font-size:17px; line-height:1.62; color:var(--ink-dim); max-width:52ch; } .stub-row{ display:flex; flex-direction:column; gap:3px; } .stub-k{ font-size:10.5px; letter-spacing:.11em; color:var(--ink-mute); } .stub-v{ font-size:16.5px; font-weight:750; color:var(--ink); } @media(max-width:760px){ .ticket{ grid-template-columns:1fr; } .ticket-stub{ border-top:2px dashed var(--line-2); } .ticket-stub::before{ display:none; } .ticket-body{ padding:26px 22px 24px; } } /* ---- the silent-auction bid sheet ---- */ .bidsheet{ position:relative; background:#fff; border:1px solid var(--line-2); border-radius:10px; padding:44px 32px 32px; margin-top:34px; box-shadow:0 20px 38px -24px rgba(15,49,44,.5); background-image:repeating-linear-gradient(180deg,transparent 0 33px,#eaf1ee 33px 34px); } .bidsheet::before{ /* the clip */ content:""; position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:104px; height:28px; background:#cfd6d3; border:1px solid #b6bfbb; border-radius:5px; } .bidsheet::after{ content:""; position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:50px; height:22px; border:3px solid #b6bfbb; border-bottom:0; border-radius:10px 10px 0 0; } .bidsheet .redline{ position:absolute; left:26px; top:0; bottom:0; width:2px; background:#e8a9a2; } .bidsheet-in{ padding-left:26px; } .bid-rows{ list-style:none; margin:18px 0 0; padding:0; } .bid-rows li{ display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px dashed var(--line-2); font-size:16px; line-height:1.55; } .bid-rows li:last-child{ border-bottom:0; } .bid-n{ font-weight:820; color:var(--act-deep); font-variant-numeric:tabular-nums; } /* ---- the tear-off newsletter slip ---- */ .tearoff{ position:relative; background:#fffdf6; border:1px solid var(--line-2); border-radius:4px; padding:32px 30px 34px; margin-top:30px; box-shadow:0 16px 32px -22px rgba(15,49,44,.45); } .tearoff::before{ /* the cut line */ content:""; position:absolute; left:20px; right:20px; top:-1px; height:10px; background:url(img/dividers/perforated.svg) repeat-x center / auto 10px; opacity:.5; } .tearoff h3{ font-size:25px; font-weight:790; letter-spacing:-.024em; max-width:22ch; } .tearoff p{ margin-top:11px; font-size:16.5px; line-height:1.62; color:var(--ink-dim); max-width:56ch; } .tearoff .scissors{ position:absolute; right:22px; top:-9px; width:22px; height:22px; opacity:.55; background:url(img/dividers/cut-with-scissors.svg) no-repeat center / contain; } /* the honest fallback while there is no account wired */ .bw-fallback{ margin-top:22px; } .bw-note{ margin-top:14px; font-size:14px; line-height:1.6; color:var(--ink-mute); max-width:62ch; } /* ================= CONTAINER PASS, LAST FOUR BUBBLES (2026-08-15) ================= The measured ranking (iris_container_rank.py) had four generic bubbles left on the two public money pages: the give form, its two segmented trays and the other-amount field, and the match box. Kyle's bar: every container earns the hand-made vocabulary or it is a defect. Each of these maps to a real object from her world rather than a styled rectangle: · the give form -> a pledge sheet, taped up, ruled like the notepads · the seg trays -> penciled frames on the sheet · the match box -> the chalkboard. The $1 -> $2 equation IS the chalkboard motif sitewide (index match band); the live calculator now speaks in the same voice. */ .giveform{position:relative; background-image:repeating-linear-gradient(to bottom, transparent 0 35px, #edf3f2 35px 36px)} .giveform::before{content:""; position:absolute; z-index:2; top:-15px; left:50%; width:132px; height:42px; transform:translateX(-50%) rotate(-2.5deg); background:url(img/fasteners/washi-teal.png) no-repeat center / contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.16))} @media(max-width:760px){.giveform::before{width:96px;height:31px;top:-11px}} .seg{border:2px solid var(--line-2); background:var(--paper-sunk)} .amt-field{border-width:2px} /* the chalkboard calculator. Chalk on board, sun-yellow for the match line -- the same palette as the index match band, so the promise and the working arithmetic read as one object. */ .matchbox{border:none; background:var(--board); position:relative; isolation:isolate; overflow:hidden; box-shadow:inset 0 0 0 6px #052d33, inset 0 0 0 7px rgba(234,246,246,.28)} .matchbox::before{content:""; position:absolute; inset:0; z-index:-1; background:url(img/textures/chalk-dust.png) repeat; background-size:340px 340px; opacity:.08} .matchbox .mb-l{color:var(--chalk-dim)} .matchbox .mb-v{color:var(--chalk)} .mb-plus{border-top:1px dashed rgba(234,246,246,.35)} .mb-plus .mb-v{color:var(--sun)} .mb-total{border-top:1.5px solid rgba(234,246,246,.5); background:rgba(255,255,255,.07)} .mb-total .mb-l{color:var(--chalk)} .mb-year{color:var(--sun)} /* whole-program gifts are not matched: the board stays, the match line chalks out */ .matchbox.no-match{border:none; background:var(--board)} .matchbox.no-match .mb-plus{opacity:.45} .matchbox.no-match .mb-plus .mb-v{color:var(--chalk-mute); text-decoration:line-through} .matchbox.no-match .mb-total{border-top-color:rgba(234,246,246,.35)} .matchbox.no-match .mb-year{color:var(--chalk-mute)} /* Get Involved: the three door CTAs stop being pills. A teacher's underline swipe and a drawn arrow -- the whole card is the click target anyway. */ .threedoors .door .go{background:transparent; color:var(--act-deep); padding:0 0 12px; border-radius:0; font-size:17px; font-weight:760; background-image:url(img/marks/underline_orange.svg); background-repeat:no-repeat; background-position:left bottom; background-size:100% 9px} .threedoors .door .go::after{content:""; display:inline-block; width:26px; height:16px; margin-left:10px; vertical-align:-2px; background:url(img/marks/arrow_orange.svg) no-repeat center / contain; transition:margin-left .28s var(--spring)} .threedoors .door:hover .go::after{margin-left:16px} /* ===== DENSITY PASS, 2026-09-03. Kyle: "less of a vertical scroll mission... more info in less vertical room without crowding still." Measured first at 1366x800: the homepage was 12 screens, events and the scholar page 7-8, news 6, and the quotes board sat on nine pages at 1,270px each. Every rule below is an override of a rule above it; nothing above was edited, so the whole pass reverts by deleting this block. */ .sec{padding:56px 0} .sec-tight{padding:40px 0} .phead .wrap{padding-top:40px!important;padding-bottom:38px!important} .phead-grid{gap:40px} .phead-photo{aspect-ratio:16/10;max-height:300px} .sec-head{margin-bottom:26px} footer{padding:34px 0 28px} .fgrid{gap:28px} .legal{margin-top:22px;padding-top:14px;font-size:12px} /* the quotes board: four notes in one row instead of two rows */ .keptnotes{padding:44px 0 48px!important} .kn-head h2{font-size:clamp(24px,2.8vw,32px)} .kn-head p{margin-top:8px;font-size:15.5px} .kn-board{margin-top:26px;gap:18px 20px} .note{padding:26px 26px 22px} .note .said{font-size:15.5px;line-height:1.58} .kn-foot{margin-top:24px} /* photo bands: same justified row, shorter frames */ .photowall{gap:22px 18px;padding:8px 14px 4px;max-width:1180px;margin:0 auto} .photowall .pola{padding:8px 8px 22px} /* full-width figures pasted into articles and lists: capped, centred */ figure.polaroid[style*="max-width: 100%"]{max-width:560px!important;margin:18px auto} /* a run of photos inside a news post becomes a three-up gallery */ .postgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0} .postgallery figure.polaroid{max-width:none!important;margin:0!important;padding:8px 8px 20px} .postgallery figure.polaroid img{aspect-ratio:4/3;object-fit:cover} @media(max-width:760px){.postgallery{grid-template-columns:1fr 1fr}} /* the news index: cards, not a stack of full-width prints */ .newslist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:22px} .newscard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 14px 30px -20px rgba(15,49,44,.35);transition:transform .35s var(--spring)} .newscard:hover{transform:translateY(-3px)} .newscard figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)} .newscard figure img{width:100%;height:100%;object-fit:cover;display:block} .newscard .nc-body{padding:18px 20px 20px} .newscard h3{font-size:18px;line-height:1.3;font-weight:760;color:var(--ink);margin:0} .newscard .byline{margin-top:8px;font-size:13.5px;color:var(--ink-mute)} .newscard .teaser{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--ink-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .newscard .more{margin-top:12px;font-size:14.5px;font-weight:640;color:var(--t-teal-ink)} /* the events list: two columns of past sessions */ .evlist .note-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 44px} .evlist .note-list li{break-inside:avoid;padding:10px 0} .evlist .note-list li:first-child{grid-column:1 / -1} .evlist figure.polaroid{max-width:220px!important;margin:8px 0 6px!important;padding:6px 6px 16px} @media(max-width:760px){.evlist .note-list{grid-template-columns:1fr}} /* homepage bands */ .storyband{padding:56px 0 60px} .newsband{padding:52px 0 56px} .roles{margin-top:44px} .matchband{padding:52px 0} .roles{margin-top:30px} .hero-bleed{min-height:0} .statsvid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center} .statsvid .player{margin-top:0} .statsvid .tally{margin:0} @media(max-width:900px){.statsvid{grid-template-columns:1fr}} .marquee figure{width:clamp(150px,17vw,220px)} .newsband .newslist{margin-top:26px} .nextup{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:14px 18px} .nextup .mono{color:var(--act-deep)} .nextup b{color:var(--ink)} .nextup a.btn{margin-left:auto} @media(max-width:700px){.nextup a.btn{margin-left:0}} @media(min-width:1100px){.newsband .newslist{grid-template-columns:repeat(4,1fr)}} @media(min-width:700px) and (max-width:1099px){.newsband .newslist{grid-template-columns:1fr 1fr}} /* tetris, not a grid: the quotes pack into two columns by height */ .kn-board{display:block;columns:2;column-gap:28px;margin-top:26px} .kn-board .note{break-inside:avoid;display:inline-block;width:100%;margin:0 0 22px;box-sizing:border-box} @media(max-width:860px){.kn-board{columns:1}} /* numbers beside the video, both starting at the top, sized to match */ .statsvid{align-items:start;grid-template-columns:1fr 1fr} /* ⛔ 2026-09-21: the rule above re-declares grid-template-columns AFTER the @media(max-width:900px) collapse further up this file. Same specificity, later in the source, so it won. The homepage carried 134px of horizontal scroll on every phone — the video sat entirely off the right edge — and it would have taken the Ad Grant's mobile traffic straight into it. The collapse is restated here, below the override, rather than moving the override: it is additive and it cannot be undone by anything that comes after it in this file. If a third .statsvid rule is ever added below this, check this again. minmax(0,1fr), not 1fr: a 1fr track will not shrink below its content's minimum width, and .statsvid .tally-row below carries a fixed 190px column. With plain 1fr the track computed to 379px inside a 334px container and the video still ran 18px off the screen. */ @media(max-width:900px){.statsvid{grid-template-columns:minmax(0,1fr)}} .statsvid .tally{margin-top:14px} .statsvid .tally-row{padding:14px 0 12px;grid-template-columns:190px 1fr;gap:6px 18px} .statsvid .tally-row .n{font-size:clamp(38px,3.4vw,56px)} .statsvid .tally-row .t{font-size:15.5px} /* two halves, not a stack: a short list beside another short list */ .progsplit{display:grid;grid-template-columns:1.15fr .85fr;gap:36px 44px;align-items:start;margin-top:36px} .progsplit > div > .mono{margin-top:0!important} .progsplit .factrow{max-width:none!important} @media(max-width:900px){.progsplit{grid-template-columns:1fr}} /* the band is 48px tall and absolutely positioned; 60px of body padding left a 12px gap to the title */ .role-body{padding-top:86px} .newsband .wrap{max-width:1360px} .story-photos{display:grid;gap:0} /* ============================================================================ CONDENSE PASS — 2026-09-09, after Amanda's call that morning. Her brief, her words: "she goes to a website and gets lost in the cool stuff." Clear conversions first, and condense. Three surfaces get built here. 1. The EVENT ITEM (.ev-*). One repeatable block whose slots are exactly the fields on the staff submission form: kind, title, when, one paragraph, one link. A staff member fills a form; this is what comes out. Nobody making a submission chooses a layout, because there is only one. Two upcoming events share a row and pack from the top (Kyle's tetris law, 2026-09-03); a single one takes the full width rather than sitting in a narrow column beside a hole. 2. The PAST ARCHIVE (.ev-archive). Eighteen closed sessions used to occupy the page above the one thing a visitor could still act on. Collapsed, in two columns, they cost no height until someone opens them, and nothing of hers was deleted to get there. 3. The NEWS LIST at content width. The linter measured four cards across at 268px on news.html, which is four vertical reads. Two columns, per the same law: never narrow columns for density. ============================================================================ */ /* --- 1. the repeatable event block --- */ .ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:24px;align-items:start;margin-top:30px} .ev-item{background:#fff;border:1px solid var(--line-2);border-radius:10px; padding:22px 24px 20px;box-shadow:0 14px 30px -22px rgba(15,49,44,.35)} .ev-tag{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:640;color:var(--act-deep)} .ev-title{font-size:19px;line-height:1.32;font-weight:760;color:var(--ink);margin:8px 0 0} .ev-title a{color:inherit;text-decoration:none} .ev-title a:hover{text-decoration:underline} .ev-when{margin-top:8px;font-size:14.5px;color:var(--ink-dim)} .ev-desc{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--ink-dim);max-width:56ch} .ev-act{margin-top:18px} /* --- 2. the collapsed season archive --- */ .ev-archive{border-top:1px solid var(--line);border-bottom:1px solid var(--line); margin-top:8px;max-width:1040px} .ev-archive > summary{padding:20px 40px 20px 0;cursor:pointer;list-style:none;position:relative; font-size:16.5px;color:var(--ink-dim)} .ev-archive > summary b{color:var(--ink);font-weight:700} .ev-archive > summary::-webkit-details-marker{display:none} .ev-archive > summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:23px; font-weight:400;color:var(--act-deep);transition:transform .3s var(--spring)} .ev-archive[open] > summary::after{transform:rotate(45deg)} .ev-past{columns:2;column-gap:44px;padding:0 0 26px} .ev-past p{break-inside:avoid;margin:0 0 18px;font-size:14.5px;line-height:1.5;color:var(--ink-dim)} .ev-past b{color:var(--ink);font-weight:660} .ev-past .polaroid{max-width:210px;margin:0 0 10px} @media(max-width:820px){.ev-past{columns:1}} /* --- 3. news cards at content width: two, never four --- */ @media(min-width:900px){.newswide .newslist{grid-template-columns:1fr 1fr}} /* --- 4. the foldout: a summary on the page, her full detail one click away --- Amanda asked for pages to be condensed, and Kyle ruled that condensing means collapsing her words, never deleting them. This is the component that keeps that promise. Deliberately NOT .faq: that one is a stack of questions with a top border and dividers between siblings; this is a single expandable block sitting under a paragraph. Scoped by class so it never reaches .navdrop, which is also a

. */ .foldout{margin-top:26px;max-width:74ch;border:1px solid var(--line);border-radius:10px; background:var(--paper-2)} .foldout > summary{padding:16px 44px 16px 20px;cursor:pointer;list-style:none;position:relative; font-size:16px;color:var(--ink-dim)} .foldout > summary b{color:var(--ink);font-weight:700} .foldout > summary::-webkit-details-marker{display:none} .foldout > summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:23px; font-weight:400;color:var(--act-deep);transition:transform .3s var(--spring)} .foldout[open] > summary::after{transform:rotate(45deg)} .foldout[open] > summary{border-bottom:1px solid var(--line)} .foldout-body{padding:20px 20px 24px} .foldout-body p{font-size:16.5px;line-height:1.68;color:var(--ink-dim);max-width:64ch} .foldout-body p + p{margin-top:16px} /* --- 5. the season poster, paired with the next open event --- */ /* The poster stacks above its sentence rather than sitting beside it. Measured first: side by side inside a half-width cell the copy column came out 264px, which is the narrow read the whole pass exists to remove, and the poster stood 177px taller than the text next to it. A poster over a line of copy is not a vertical read -- two columns of prose would have been. */ .ev-season figure{max-width:250px;margin:0 0 20px} .ev-season p{font-size:16.5px;line-height:1.6;margin:0;max-width:46ch} /* --- 6. a card title is not a section headline --- site.css line ~1898 caps every h1/h2/h3 inside .sec .wrap at 22ch. That is right for a headline and wrong inside a grid cell: it made news card titles 275px wide in a 641px card, and event titles 290px wide in a 1064px one -- three narrow lines in a wide box, which is the vertical read Kyle's law forbids. Additive override, scoped to the two card titles, so the 22ch floor still holds everywhere else. */ .sec .wrap .newscard h3, .sec .wrap .ev-title{max-width:none} /* --- 7. news cards read across, not down --- At content width four cards across made each 268px, which is four vertical reads. Two columns fixes the read; turning the card on its side keeps the page from growing to pay for it -- the 16/9 image was 359px of the card's 643px height. */ @media(min-width:900px){ .newswide .newscard{flex-direction:row} .newswide .newscard figure{flex:0 0 232px;aspect-ratio:4/3} .newswide .newscard .nc-body{padding:20px 22px} } /* --- 8. the Get Involved doors --- These five rules lived in a