/* ============================================================ Creation Education Museum — Main stylesheet ============================================================ */ /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* ============================================================ THE LIGHT GROUND — sand texture, site-wide ============================================================ Every sand section on every page. The user's artwork: impressed dinosaur and human tracks, trilobites, an ammonite, a fern, scattered bone. THIS IS ONE BACKGROUND ON THE CANVAS, NOT ONE PER SECTION, and that is the whole design. The three photographic zones on this site (.leaf-zone, .road-zone, .fossil-zone) each need a wrapper element because `background-size: cover` crops a different region at a different scale on a 74px seam than on an 800px band, so the picture has to be owned once by a parent. None of that applies here: this is a REPEATING TILE AT A FIXED PIXEL SIZE, and a fixed-size tile on the canvas is continuous under everything by construction. So there are no wrappers, no per-page markup, and the ground runs unbroken through the seams. Do not "improve" this into zones; it would be more code and a worse result. The tile is on the ROOT rather than on body. Body's background would propagate to the canvas anyway, but positioned by rules that are easy to get wrong; declaring it here means the positioning area is plainly the root box, so the tile runs the full height of the document. Body is transparent so it cannot cover this. WHY A VEIL RATHER THAN opacity: opacity on the root would fade the content too. A --bg veil at alpha 0.90 laid OVER the tile composites to exactly 0.90 x --bg + 0.10 x tile, which is the same arithmetic as the tile at 0.10 opacity over --bg, and it leaves the text alone. --bg is still the background-COLOUR underneath, so a failed image request degrades to the flat sand this site had before. THE SETTINGS ARE THE USER'S, 2026-08-28: strength 0.10, tile 2200px. Measured at those settings over each element's own box at 1330px wide: body copy --text-muted 5.53:1 (6.29 on the flat ground) aims link --clay-deep 5.91:1 (6.22 flat) headings --ink 10.69:1 (12.05 flat) eyebrow --clay 3.67:1 (4.17 flat) Ground mean luminance 0.678 against the flat ground's 0.682, so the tone the user settled on after two rounds of darkening is untouched: the texture adds relief, not colour. Nothing on the site needed re-toning to sit on it. THE ONE COST IS THE EYEBROW, 4.17 -> 3.67. It was already under the 4.5 bar site-wide before this and is on the standing flagged list; the texture deepens that shortfall rather than creating a new one. THE TILE IS SEAMLESS IN BOTH AXES AND THAT TOOK WORK, so do not swap the source artwork in. `Sandbackground.jpg` at the project root (912x1177) already wraps horizontally: its wrap column differs from its neighbour by 18.4 dRGB against 16.7 for an ordinary interior pair, i.e. just the grain. Vertically it does NOT, 24.6 against 5.0 on a blurred comparison. The tone matches top to bottom so there is no visible band, but the impressions crossing the bottom edge do not continue at the top. sand-tile.jpg is a 912x976 cross-fade wrap of it: write out height H' = H - 201 and ramp row y + H' into row y for the first 201 rows, then re-encode at -q:v 3. Both dimensions are multiples of 16 so JPEG's block padding cannot reopen the seam. Verified at 5.7 against an interior 4.1. ============================================================ */ html { background-color: var(--bg); background-image: linear-gradient(var(--bg-veil), var(--bg-veil)), url("../assets/img/sand-tile.jpg"); background-repeat: no-repeat, repeat; background-position: 0 0, 50% 0; background-size: auto, 2200px auto; } /* The tile shrinks on a phone, and the reason is the opposite of the obvious one. 2200px is nearly six times a 375px viewport, so a phone would get a single near-blank patch of tile and the texture would disappear entirely. 600px keeps it perceptible at the same visual scale relative to the screen. This is also the only place the seamless tiling earns its keep: at 2200px almost nothing repeats on a desktop, but at 600px on a phone, where the same content stacks several thousand pixels tall, the tile wraps many times over. Breakpoint matches .aims, where the two columns collapse to one. */ @media (max-width: 759px) { html { background-size: auto, 600px auto; } } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; color: var(--text); /* Transparent, NOT --bg: the ground is on the root above. Painting --bg here would cover the texture on every page. */ background: transparent; -webkit-font-smoothing: antialiased; } img, picture, svg { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; } p { text-wrap: pretty; } /* --- Utilities --- */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; } .section { padding-block: var(--space-xl); } .skip-link { position: absolute; left: -9999px; background: var(--ink); color: var(--cream); padding: 0.75rem 1.25rem; z-index: 999; } .skip-link:focus { left: 1rem; top: 1rem; } :focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; } /* Available to screen readers, invisible on screen. Absolutely positioned so it stays out of flow — buttons derive their height from their width via aspect-ratio, and an in-flow label would widen them. */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Underline that is NOT a link. Sits clear of descenders and stays thin so it reads as emphasis rather than an unstyled anchor. */ .u-ul { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Caps applied by CSS rather than typed, so the word stays lowercase in the markup: screen readers spell out shouted words letter by letter, and copy pasted out of the page keeps its normal case. Caps need tracking to breathe. */ .u-caps { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .eyebrow { font-size: var(--step--1); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--clay); margin-bottom: var(--space-sm); } .eyebrow--invert { color: var(--sandstone); } .lead { font-size: var(--step-1); color: var(--text-muted); max-width: var(--measure); } /* --- Buttons --- */ /* Matches the CEM logo's oval: the same true-ellipse curve AND the same 2.368:1 proportion. Width comes from the label, height follows from the aspect ratio — so every button is the logo's shape at a different size. The taller ellipse means far less horizontal padding is needed to keep the label clear of the curving sides than a flat lens shape would. ONE BUTTON, EVERY GROUND. Settled 2026-08-28 at the user's instruction: "one uniform design for all of them, no matter where they are." There are no variants any more. `btn--primary`, `btn--ghost` and `btn--outline` are gone from the stylesheet AND from all 19 buttons in the markup, so a stray modifier now does nothing instead of quietly making a button vanish. WHY IT IS TWO TONES, AND WHY IT HAS TO BE. Buttons on this site sit on four grounds: the sand, the clay band, the leaf/moss band, and the hero. A single flat fill CANNOT serve all four, and this is arithmetic rather than taste. To clear 3:1 against the sand (luminance 0.682) a colour must sit at or below 0.194; to clear 3:1 against the clay band (0.068) it must sit at or above 0.304. There is no such colour. So the button carries a dark fill and a light ring, and whichever one the ground does not swallow does the work. Measured, best of fill/ring on each ground: sand, flat fill 4.17 ring 1.32 -> 4.17 sand, darkest pixel fill 3.56 ring 1.55 -> 3.56 clay band fill 1.49 ring 8.21 -> 8.21 leaf/moss band fill 1.35 ring 7.41 -> 7.41 hero / slate fill 2.49 ring 13.68 -> 13.68 Label on fill is 5.50:1 everywhere, because both travel with the button. The consequence to expect rather than treat as a bug: ON THE DARK BANDS THE FILL NEARLY MATCHES THE GROUND, so the button reads as a cream outline, which is what those buttons already looked like. On the sand the ring is the invisible half and it reads as a clay pill. Same design, different half doing the work. Rejected on the numbers, not by eye: clay with no ring at all (1.49, 1.35 and 2.49 on the three dark grounds, i.e. gone), and an ink fill (1.16 on the hero, and ink pills are not this palette's accent). THIS COSTS THE PRIMARY/SECONDARY DISTINCTION in the two places that had one, the homepage hero pair and the Creation Speaks pair. Flagged to the user. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; aspect-ratio: var(--oval-ratio); padding: 0 1.7rem; white-space: nowrap; font-weight: 600; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; background: var(--clay); color: var(--cream); border: 2px solid var(--cream); border-radius: var(--radius-oval); transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease); } /* Hover deepens the fill and keeps the ring, so it behaves the same way on every ground. The old ghost hover flooded the button with cream, which on the sand would now be a bright blob: nothing else on this site is near white, and that rule holds for a hover state too. */ .btn:hover { background: var(--clay-deep); transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* --- Link with rule underneath (reference-site style) --- */ .link-rule { display: inline-block; text-decoration: none; font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em; padding-bottom: 0.35rem; border-bottom: 1px solid currentColor; transition: opacity 200ms var(--ease); } .link-rule:hover { opacity: 0.62; } /* ============================================================ Parent-org bar + Header ============================================================ */ /* Height the fixed header occupies. Interior pages pad their page-head by this much so content doesn't slide underneath. Set to 0 on small screens, where the header is `sticky` and therefore already takes up flow space. */ :root { --header-h: 92px; } /* Every in-page anchor used to land with its target tucked under the fixed header — #visit, #nifty-fifty, #past, #signup and the rest, site-wide, since the header stopped taking flow space. `scroll-padding-top` on the scroll container fixes all of them at once, and unlike per-element `scroll-margin-top` it also governs scripted `scrollIntoView`, so the two can never disagree. Affects scrolling only, never layout. */ html { scroll-padding-top: calc(var(--header-h) + var(--space-sm)); } /* The header floats ON the hero image as a translucent stone-dark bar, with the logo centred and the menu split either side of it. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; /* Deliberately thin so the artwork reads through the bar. The blur was doing as much to obscure it as the tint was, so both came down hard. Legibility is carried by the label shadows instead of by the panel. */ /* Hand-written near-ink, so it does NOT follow the --ink token on its own. Re-toned with the ramp 2026-09-01; was rgba(25, 27, 29, ...). */ background: linear-gradient(to bottom, rgba(21, 28, 35, 0.52), rgba(21, 28, 35, 0.20)); backdrop-filter: blur(3px); transition: background 260ms var(--ease), backdrop-filter 260ms var(--ease); border-bottom: 1px solid rgba(250, 245, 234, 0.16); color: var(--cream); } /* Once the dark artwork has scrolled past, the bar has to carry itself: at 0.06 alpha the menu would be invisible over the light sand sections. */ .site-header.is-solid { /* Also hand-written; re-toned with the ramp. Was rgba(22, 24, 26, ...). */ background: linear-gradient(to bottom, rgba(17, 23, 29, 0.95), rgba(17, 23, 29, 0.88)); backdrop-filter: blur(10px); } .orgbar { border-bottom: 1px solid rgba(250, 245, 234, 0.10); color: var(--text-invert-muted); font-size: var(--step--1); } .orgbar__inner { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; padding-block: 0.4rem; } .orgbar a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--rule-invert); } .orgbar a:hover { border-color: var(--cream); } /* Three columns: menu | logo | menu */ .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-sm); padding-block: 0.35rem; } /* `display: contents` lets the two menu lists sit directly in the header grid on desktop, then become a single dropdown panel on mobile. */ .nav__panel { display: contents; } .nav-group { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.3rem; align-items: center; } /* All three must share row 1 — without an explicit row the logo auto-places onto a second row and the bar doubles in height. */ .nav-group--left { grid-column: 1; grid-row: 1; justify-content: flex-end; } .nav-group--right { grid-column: 3; grid-row: 1; justify-content: flex-start; } .site-header__logo { grid-column: 2; grid-row: 1; justify-self: center; } /* The logo is the identity — centred and given real presence */ .site-header__logo img { /* Sized so the bar stays under ~15% of the hero image height and never rides down over the top of the Ohio outline (which starts at ~20%). */ height: clamp(50px, 5.6vw, 80px); width: auto; filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.55)); transition: transform 300ms var(--ease); } .site-header__logo:hover img { transform: scale(1.04); } /* --- Map / directions button, upper-right corner of the bar -------------- Added 2026-09-07. This is the third answer to one reviewer note asking for the address more prominently: the footer address was promoted, a FIND US line was tried in the visit bar's Contact cell and REJECTED, and the user asked for the map icon here instead. ABSOLUTE, NOT A FOURTH GRID TRACK, and that is the whole design decision. `.site-header__inner` is `1fr auto 1fr` and the logo is dead-centre only because columns 1 and 3 are equal. A fourth `auto` track would drag the logo left by half this button's width — off the centre line it shares with the Ohio outline in the hero directly below it. Absolute takes the button out of flow and the logo does not move a pixel. Anchored on `.site-header__inner`, not `.site-header`, so `right: 0` lands on the wrap's content edge. The icon then sits in the same gutter every other element on the page respects instead of flush against the glass. In the markup it is a direct child of `.site-header__inner`, deliberately OUTSIDE `.nav__panel`: the panel collapses into the hamburger dropdown at 980px, so anything inside it would be hidden behind a tap on every phone — which is exactly where a directions link is most wanted. */ .site-header__inner { position: relative; } .mapbtn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); /* line-height: 0 stops the inline-image baseline gap from making the box taller than the picture and throwing the vertical centring off. */ display: block; line-height: 0; /* TAP TARGET. The picture is only 30x24 at the small end, which clears the 24px WCAG 2.5.8 floor but is a mean target for a thumb next to a 46px hamburger. The padding grows the hit area to ~46x40 without touching the artwork, and the matching negative offset puts the IMAGE's right edge back on the content edge — otherwise the padding would hold the icon 8px in from the corner the user asked for. */ padding: 8px; right: -8px; } .mapbtn img { /* Tops out below the logo's 80px so the identity stays the largest thing in the bar. THE vw TERM IS LOAD-BEARING, not decoration. Because this button is absolute it cannot push the nav, so nothing stops the two from colliding — and the space between "Believe" and the content edge is set by the nav's own fixed content width against a `1fr` track, so it closes as the viewport narrows: 162px at 1449, 47px at 1000, 41px at 985, which is the narrowest desktop there is (the hamburger takes over at 980). Measured with a flat 38px the gap was 3px at 985 and the icon sat on top of BELIEVE. At 3vw it is ~30px there for an 11px gap — wider than the nav's own 0.3rem inter-item gap — and grows back to the 46px cap by ~1530px. Re-measure this if the nav ever gains or loses an item. */ width: clamp(30px, 3vw, 46px); height: auto; display: block; /* The same shadow the logo carries. The bar is translucent over the hero's rock face and a flat cartoon with no shadow floats loose on it. */ filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.55)); transition: transform 300ms var(--ease); } .mapbtn:hover img, .mapbtn:focus-visible img { transform: scale(1.08); } .nav__item { position: relative; } .nav__link, .nav__trigger { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 2px solid transparent; cursor: pointer; text-decoration: none; font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream); /* Carries legibility now that the bar itself is nearly transparent: a tight dark halo plus a wider soft one, so labels hold against bright rock. */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 0, 0, 0.6); padding: 0.55rem 1.05rem; /* A hover highlight, not a button — at 50% these wide, short items would render as stretched lenses. A soft pill stays quiet behind the label. */ border-radius: 999px; transition: background 200ms var(--ease), color 200ms var(--ease); } .nav__link:hover, .nav__trigger:hover, .nav__item[data-open="true"] .nav__trigger { background: rgba(250, 245, 234, 0.18); color: #fff; } .nav__caret { width: 9px; height: 9px; transition: transform 220ms var(--ease); } .nav__item[data-open="true"] .nav__caret { transform: rotate(180deg); } /* Dropdown — mirrors the footer groupings exactly */ .nav__submenu { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 235px; list-style: none; padding: 0.55rem; margin: 0; background: var(--cream); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms; z-index: 120; } .nav__item[data-open="true"] .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); } /* On pointer devices, hovering or tabbing into a group opens it */ @media (min-width: 981px) { .nav__item:hover .nav__submenu, .nav__item:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__item:hover .nav__trigger, .nav__item:focus-within .nav__trigger { background: rgba(250, 245, 234, 0.18); color: #fff; } .nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); } } .nav__submenu a { display: block; text-decoration: none; padding: 0.6rem 0.95rem; font-size: var(--step--1); color: var(--ink); /* Rows, not buttons — an ellipse would read as a distortion here */ border-radius: 12px; transition: background 160ms var(--ease); } .nav__submenu a:hover { background: var(--sand); } /* Standard three-bar menu button. Circular rather than the wide oval the text version used: at 108px the toggle overflowed its grid column and nudged the centred logo off true. A circle is still the logo's shape, just with equal axes, and it comfortably clears a 44px tap target. */ .nav-toggle { display: none; position: relative; background: none; border: 2px solid var(--rule); width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer; /* Collapses the "Menu" label visually while leaving it in the accessibility tree as the button's name. */ font-size: 0; color: var(--cream); } /* Three bars drawn from one pseudo-element plus two box-shadows */ .nav-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: currentColor; transform: translate(-50%, -50%); box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } /* ============================================================ HERO — full-bleed, headline centered below the Ohio cutout ============================================================ */ /* The Ohio cutout occupies roughly 16%–83% of the source image's height and sits dead centre. Because the image is 16:9 — wider than most hero viewports — `object-fit: cover` crops horizontally, which leaves no vertical slack to push the map upward. Overlaying the headline anywhere in the lower half would therefore land it ON the map. So: give the image its own row at natural proportions, and give the headline a dedicated strata band beneath it, blended at the seam so the two read as one continuous rock face. */ .hero { position: relative; background: var(--slate-deep); display: grid; grid-template-rows: auto 1fr; overflow: hidden; isolation: isolate; } /* Because the sharp image is never cropped, wide screens leave bands at its sides. Rather than flat dead colour, fill them with a blurred, darkened copy of the same rock face — the hero reads as full-bleed stone while the Ohio outline stays whole and centred. */ .hero__backdrop { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); filter: blur(34px) saturate(0.75) brightness(0.42); } .hero__vignette { position: absolute; inset: 0; z-index: -1; /* Hand-written; re-toned with the ramp 2026-09-01. Was rgba(25,27,29,0.55). */ background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(21, 28, 35, 0.55) 100%); } /* The backdrop and vignette darken the hero's base below flat --slate-deep, so the seam that follows didn't match and showed as a lighter strip above the gold. This settles the last stretch to exactly --slate-deep. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1; /* The transparent stop carries --slate-deep's own value as rgba(...,0). The colour is invisible at zero alpha but a stale value there is still a trap the next person has to reason about, so it moved with the ramp too. Was rgba(35, 40, 44, 0). */ background: linear-gradient(to bottom, rgba(28, 39, 48, 0) 0%, var(--slate-deep) 92%); pointer-events: none; } /* The Ohio outline must never be clipped. The figure therefore holds the image at its exact native aspect ratio — no cropping in either axis. On wide screens the height is what's constrained, so the figure narrows and centres on the dark strata ground rather than slicing the map. */ .hero__figure { position: relative; aspect-ratio: 3200 / 1792; /* Full-bleed width at native proportions — the whole Ohio outline, with the header floating over the rock band above it. Capped on very wide monitors so the hero can't become absurdly tall. */ width: min(100%, 2000px); margin-inline: auto; overflow: hidden; z-index: 1; /* Lets the motto scale with the figure rather than the viewport */ container-type: inline-size; /* Rugged torn edge along the base, melting into the headline band */ -webkit-mask-image: var(--tear-bottom); mask-image: var(--tear-bottom); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .hero__img { width: 100%; height: 100%; object-fit: contain; /* belt and braces: never crop the outline */ object-position: 50% 50%; } /* Ohio's state motto, centred inside the Ohio cutout. Bounds measured off the source image by flood-filling the cutout region: it spans 33–66% horizontally and 16.5–82.1% vertically, with its area centroid at 48.5%, 48.8%. Positioned in percentages so it tracks the cutout as the figure scales, and sized in container units so the type scales with the figure rather than the viewport. (The Great Seal artwork is intentionally NOT used: ORC 5.10 restricts reproducing it. The motto alone does not.) */ .hero__motto { position: absolute; left: 49.5%; top: 49.3%; width: 30%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; } .hero__motto-text { font-family: var(--font-display); font-weight: 600; font-size: 4.2cqw; line-height: 1.06; letter-spacing: -0.01em; color: var(--cream); /* Carved-into-stone feel, and enough weight to stay legible over both the bright farmland above and the dark strata below. */ text-shadow: 0 2px 4px rgba(25, 27, 29, 0.92), 0 0 24px rgba(25, 27, 29, 0.70), 0 1px 0 rgba(250, 245, 234, 0.20); } .hero__motto-src { margin-top: 1.4cqw; font-family: var(--font-body); font-size: max(9px, 1.15cqw); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250, 245, 234, 0.82); text-shadow: 0 1px 7px rgba(25, 27, 29, 0.95); } @media (max-width: 700px) { /* Must stay inside the cutout, which is only ~35% of the figure width */ .hero__motto { width: 32%; } .hero__motto-text { font-size: 4.6cqw; } /* No room for the attribution line once the figure is ~210px tall */ .hero__motto-src { display: none; } } /* Melts the base of the photograph into the headline band. */ .hero__scrim { position: absolute; inset: 0; /* Hand-written; re-toned with the ramp 2026-09-01. Was rgba(25, 27, 29, ...). */ background: linear-gradient(to bottom, rgba(21, 28, 35, 0.30) 0%, rgba(21, 28, 35, 0.00) 22%, rgba(21, 28, 35, 0.00) 68%, rgba(21, 28, 35, 0.55) 88%, var(--slate-deep) 100%); } .hero__content { position: relative; text-align: center; color: var(--text-invert); padding-block: var(--space-sm) var(--space-md); align-self: center; } .hero__title { /* No two-line split of this phrase balances well — the options measured 131px and 152px apart, and the tighter one dangles "AND" at a line end. A single line is perfectly even, so the type is sized to hold one line and the headline is allowed to run wider than the page wrap to do it. Below ~520px it wraps, which is fine. */ font-size: clamp(2.2rem, 4vw, 3.6rem); /* Breaks out of the 1240px .wrap so the line has room to stay unbroken, while staying centred on the viewport. */ width: min(96vw, 1400px); max-width: none; margin-left: 50%; transform: translateX(-50%); color: var(--cream); text-shadow: 0 2px 30px rgba(25, 27, 29, 0.5); /* Uppercased in CSS, not in the markup, so the DOM keeps natural casing — some screen readers spell out all-caps text letter by letter. */ text-transform: uppercase; /* Caps need looser tracking than the -0.015em the h1 rule applies */ letter-spacing: 0.015em; line-height: 1.12; /* NB: no `margin-inline: auto` here — it would override the margin-left above and knock the headline off centre. */ } /* Must come AFTER .hero__title: same specificity, so source order decides. */ @media (max-width: 700px) { /* At the clamp floor the headline ran to four lines. Slightly smaller type lets it settle into three. */ .hero__title { font-size: 1.9rem; } } .hero__sub { margin-top: var(--space-sm); font-size: var(--step-1); color: var(--text-invert-muted); /* Wide enough for the longest sentence (863px) to hold a single line. At the old 56ch (759px) the first sentence spilled its last word onto line two, where the second sentence then began beside it. */ max-width: min(920px, 100%); margin-inline: auto; text-shadow: 0 1px 16px rgba(25, 27, 29, 0.6); } /* Each sentence is its own block, so two sentences can never share a line no matter how the text reflows. */ .hero__sub span { display: block; } .hero__actions { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; /* Without this, flex stretch equalises the buttons' heights and overrides the oval aspect ratio on whichever label is shorter. */ align-items: center; } .hero__meta { margin-top: var(--space-md); font-size: var(--step-0); color: rgba(250, 245, 234, 0.86); } .hero__meta a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--rule-invert); } .hero__meta a:hover { border-color: var(--cream); } /* ============================================================ Strata seam — swooping layered rock bands between sections. Real sedimentary boundaries undulate rather than running flat, so the curved layers are truer to the theme than straight bands. The frontmost layer takes the colour of whatever section follows, so the seam resolves into it instead of stopping at a hard edge. ============================================================ */ .wave { line-height: 0; background: var(--wave-from, var(--slate-deep)); position: relative; } /* Kills the hairline along the TOP of a seam. Different cause from the bottom one below, and it survives even though the seam block and the section above are the SAME colour. Their boxes share one fractional y (0.844 at 1440), so each paints its dark at partial coverage over the sand body background, and the two partial composites do not add back up to opaque: the boundary row lands near rgb(61,63,63) against a true rgb(35,40,44). Matching the colours was never going to be enough. This strip paints --wave-from across the join at full coverage. Only visible where the section above differs from the body background, but harmless where it does not. */ .wave::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--wave-from, var(--slate-deep)); pointer-events: none; } /* Exception: inside the leaf zone the ground above the lower seam is moss PLUS a photograph and a vignette, so a flat --moss-deep strip would read as a band across the picture. The zone shows through instead, same reasoning as `.leaf-zone .wave { background: transparent }`. */ .leaf-zone .wave--from-moss::before { content: none; } /* Kills the hairline that used to show along the BOTTOM of every seam. The seam's height is `clamp(44px, 5.5vw, 86px)`, which lands on a fraction (79.188px at 1440 wide), so the frontmost path's edge falls mid-device-pixel. That last row composites to roughly 77% --wave-to plus 23% of the colour ABOVE, reading as a thin line of the wrong colour against the section below. This strip paints --wave-to across the boundary at full coverage, overshooting 1px past the fractional edge so no blended row survives. It is invisible by definition: it is exactly the colour of the section it sits on. No layout shift, and where --wave-to is `transparent` (the leaf zone) it self-disables rather than punching a hole. */ .wave::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wave-to, var(--slate-deep)); pointer-events: none; } .wave svg { display: block; width: 100%; /* Tried and rejected: `round(..., 1px)` to force a whole-pixel seam. It makes the HEIGHT an integer but the seam's top and bottom still land on fractions (measured 0.234, 0.563, 0.656, 0.844 at 810px wide), because the fluid clamp() type above each seam contributes fractional block heights. Boundary positions cannot be made integral from here, so the edge strips below are the actual fix, not a workaround for this. */ height: clamp(44px, 5.5vw, 86px); } .wave .w1 { fill: var(--sandstone); } .wave .w2 { fill: var(--ochre); } .wave .w3 { fill: var(--clay); } .wave .w4 { fill: var(--wave-to, var(--slate-deep)); } /* --- The UPWARD strata, used by every `wave--to-light` seam --------------- Same four curves, same four bands, drawn the other way up so the region BELOW the last curve is left unpainted and the canvas sand texture runs through the seam. THE REASON THIS EXISTS IS A BUG THAT COST A ROUND, and it is worth stating plainly because the obvious fix is the wrong one. In the downward construction every path fills from its own curve to y=100, so each covers the one before it: `w4` is not merely "the colour of the section below", it is the LID over w3's clay. Setting `--wave-to: transparent` therefore does not reveal the ground, it reveals the CLAY, and the seam stops resolving into the section and ends on a hard brown edge. Caught by rendering both states and comparing, not by reading the CSS, which looks correct either way. Filling upward inverts the covering order and gives an identical picture with an open bottom. Paint order in the markup is u4, u3, u2, u1, deepest curve first, so each shallower band lands on top; every boundary is still an overlap, so no band can crack open along a fractional edge. NB u1 carries --wave-from, the colour ABOVE the seam, because in this construction the topmost band is the one the block background used to paint. That is also why `.wave--to-light` clears its background. THE SAME LATENT FAULT IS STILL IN `wave--to-photo` / `wave--to-leaf`, which the three photographic zones use. Those seams end in clay rather than resolving into their picture. Left alone deliberately: those bands were settled with the user over several rounds and are outside the sand ground this change is about. Fixing them is this same swap. */ .wave .u1 { fill: var(--wave-from, var(--slate-deep)); } .wave .u2 { fill: var(--sandstone); } .wave .u3 { fill: var(--ochre); } .wave .u4 { fill: var(--clay); } .wave--to-dark { --wave-to: var(--slate-deep); } /* THE TWO LIGHT-SIDE SEAMS ARE TRANSPARENT, so the canvas texture runs straight through them. They used to paint flat --bg, which was right when the ground was flat and would now leave a smooth patch across every seam where the impressions stop dead. `to-light`: the frontmost path goes transparent AND the block background with it, because the block background is --wave-from, i.e. the DARK colour above, and it would show through the hole the transparent path leaves. The dark above the first curve is supplied instead by a `w0` path in the markup, same `d` as w1 but closed to y=0 so it fills upward. Every `to-light` seam on the site carries one. This is the same construction as `wave--to-photo`, which the three photographic zones use, and the shared `.wave .w0` rule below serves both. `from-light`: only the block background has to go, because --wave-from is what paints it and the light ground is above. No w0: the canvas is already showing there. THE EDGE STRIPS ARE UNAFFECTED AND STILL NEEDED. `::after` self-disables where --wave-to is transparent, and there is nothing left for it to fix: the fractional-pixel hairline came from two BOXES each painting their own colour at partial coverage, and neither box paints now. `::before` still paints --wave-from on a `to-light` seam, where the section above is a real dark band and the join is real. Do not delete either. */ .wave--to-light { --wave-to: transparent; background: transparent; } .wave--to-ink { --wave-to: var(--ink); } .wave--to-moss { --wave-to: var(--moss-deep); } .wave--to-clay { --wave-to: var(--clay-deep); } .wave--from-dark { --wave-from: var(--slate-deep); } .wave--from-light { --wave-from: transparent; } .wave--from-moss { --wave-from: var(--moss-deep); } .wave--from-clay { --wave-from: var(--clay-deep); } /* NB: do NOT mirror the svg with scaleY(-1) to vary the curve. Each path fills from its own curve DOWN to the bottom edge, so mirroring also swaps which side every layer covers: --wave-from would end up at the bottom and --wave-to at the top, inverting the transition. Vary the seam by writing different path data, never by flipping. */ /* ============================================================ Visit bar — hours / admission / directions ============================================================ */ .visitbar { background: var(--slate-deep); color: var(--text-invert); } .visitbar__grid { display: grid; /* Explicit three, not auto-fit: auto-fit would drop to two columns at some widths and leave the third stranded alone on its own row. */ grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-invert); } .visitbar__cell { background: var(--slate-deep); padding: var(--space-md) 1.75rem var(--space-lg); text-align: center; } /* Centred heading whose rule matches the width of the text itself */ .visitbar__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--cream); width: fit-content; margin-inline: auto; margin-bottom: var(--space-md); padding-bottom: 0.55rem; border-bottom: 3px solid var(--sandstone); } /* Body copy in this band reads at --step-0, not --step--1. At the smaller step it measured the same 14.4px as the button labels but read much smaller, because the buttons are uppercase, semibold and full-strength cream while this is lowercase, regular weight and dimmed. */ .visitbar__lead { font-size: var(--step-0); color: rgba(250, 245, 234, 0.86); max-width: 34ch; margin-inline: auto; } .visitbar__note { font-size: var(--step-0); color: rgba(250, 245, 234, 0.74); margin-top: var(--space-sm); max-width: 36ch; margin-inline: auto; } .visitbar__sublabel { margin-top: var(--space-md); /* Eyebrow labels stay below body size on purpose: the caps, tracking and sandstone colour already give them plenty of presence. */ font-size: 0.95rem; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--sandstone); } .upcharge { color: var(--cream); } .price { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--cream); margin-bottom: var(--space-sm); } /* Lists read left-aligned but sit as a centred block in the column */ /* --- Contact cell --- */ .tel { display: inline-flex; align-items: baseline; justify-content: center; margin-top: var(--space-md); font-family: var(--font-display); line-height: 1; font-size: clamp(1.3rem, 1.0rem + 1.15vw, 1.8rem); color: var(--cream); text-decoration: none; transition: color 160ms var(--ease); } .tel:hover, .tel:focus-visible { color: var(--ochre); } /* Eight children, four columns: letters fill row one, digits row two. Columns are `auto`, not `1fr` — equal columns pad the narrow letters out to the width of the widest one, and DINO starts reading as D I N O. */ .tel__word { display: inline-grid; grid-template-columns: repeat(4, auto); justify-items: center; } .tel__word .d { font-family: var(--font-body); font-size: 0.42em; letter-spacing: 0; /* Sandstone, not ochre: ochre measures 4.0:1 on this ground, and at ~12px these are normal-size text needing 4.5:1. */ color: var(--sandstone); margin-top: 0.45em; } .mail { display: grid; place-items: center; width: 46px; height: 46px; margin: var(--space-md) auto 0; border: 1px solid var(--rule-invert); border-radius: var(--radius-oval); color: rgba(250, 245, 234, 0.86); transition: color 160ms var(--ease), border-color 160ms var(--ease); } .mail:hover, .mail:focus-visible { color: var(--cream); border-color: var(--cream); } /* The label already carries the section gap; without this the two stack their own top margins and the icon drifts away from the words it belongs to. */ .visitbar__sublabel + .mail { margin-top: var(--space-sm); } .mail svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* The icon shakes, not the ring — the ring staying put is what makes it read as a nudge rather than the whole button wobbling loose. The animation runs on this wrapper span, NOT on the . Applying it straight to the svg leaves computed animation-name set but registers no animation at all (getAnimations() stays empty and no transform renders), while an identical span in the same slot animates. Do not "simplify" this span away. */ .mail__icon { display: block; } @keyframes mail-shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 32% { transform: rotate(7deg); } 49% { transform: rotate(-5deg); } 66% { transform: rotate(3.5deg); } 83% { transform: rotate(-1.5deg); } } .mail:hover .mail__icon, .mail:focus-visible .mail__icon { animation: mail-shake 620ms var(--ease); } @media (prefers-reduced-motion: reduce) { .mail:hover .mail__icon, .mail:focus-visible .mail__icon { animation: none; } } /* 2026-09-07: a `.visitbar__addr` lived here for about ten minutes — FIND US plus the street address, between the mail icon and the note. The user did not like what it did to the Contact cell and reverted it. The address went into the header as `.mapbtn` instead. Do not re-add it here. */ /* --- Membership price --- */ .pricetag { display: flex; align-items: baseline; gap: 0.55rem; margin-top: var(--space-md); } .pricetag__amount { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1; color: var(--cream); } .pricetag__unit { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); /* Cream, not sandstone. Sandstone carries small caps fine on the ink visit bar (6.16:1) but collapses to 3.03:1 on this moss ground. Every other label in this band is cream for the same reason. */ color: rgba(250, 245, 234, 0.82); } .itemlist { list-style: none; padding: 0; margin: 0.75rem 0 0; display: inline-block; text-align: left; } .itemlist li { display: flex; align-items: baseline; gap: 0.65rem; font-size: var(--step-0); color: rgba(250, 245, 234, 0.88); padding-block: 0.32rem; } .itemlist li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--ochre); translate: 0 -1px; } /* Hours: fewer words than the other columns, so set them larger */ .hours-opt { display: block; } /* Kept as a guard, not as live behaviour. Nothing sets hidden any more (the seasonal switch came out of nav.js on 2026-09-02), but `display: block` above would beat the UA's own [hidden] rule if anything ever did. */ .hours-opt[hidden] { display: none; } /* Both seasons stack now, so the second one needs to be told it is a second one. Only the gap between them — no top margin on the first. */ .hours-opt + .hours-opt { margin-top: var(--space-sm); } .hours-tag { display: block; font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--sandstone); margin-bottom: 0.35rem; } .hours-days { display: block; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; color: var(--cream); } .hours-time { display: block; margin-top: 0.2rem; font-family: var(--font-display); font-size: var(--step-1); color: var(--text-invert-muted); } /* Placed after the rules above so source order lets them win */ @media (max-width: 900px) { /* Give the text back the room the padding was taking */ .visitbar__cell { padding-inline: 1rem; } .visitbar__title { font-size: var(--step-1); } .hours-days { font-size: var(--step-2); } .price { font-size: var(--step-3); } } @media (max-width: 620px) { .visitbar__grid { grid-template-columns: 1fr; } .visitbar__cell { padding-inline: 1.5rem; } } /* ============================================================ Intro ============================================================ */ .intro__grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; } @media (min-width: 900px) { .intro__grid { grid-template-columns: 1.1fr 1fr; align-items: start; } } .intro__title { font-size: var(--step-4); } /* The heading is already Fraunces 600, so weight alone barely reads as emphasis. Colour does the work; the weight bump supports it. is the right element here: strong importance, not stylistic bolding. */ .intro__title strong { color: var(--clay); font-weight: 700; /* Keep the phrase intact: split across a line break it stops reading as a single emphasised idea. Short enough that this can't cause overflow. */ white-space: nowrap; } .intro__body { display: grid; gap: var(--space-sm); color: var(--text-muted); font-size: var(--step-0); } /* --- The four purposes ------------------------------------------------- These sit BELOW the two-column grid rather than inside the body column because a reader skims this section: four distinct reasons run together as prose read as one long paragraph and none of them survives. No card, no panel and no border box. The hairline above and the display-face titles carry it, which keeps this out of the generic rounded-panel territory the site has rejected before. */ .aims { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--rule); display: grid; gap: var(--space-md) var(--space-lg); list-style: none; /* `* { margin: 0 }` clears the list's margin but not its padding. */ padding-left: 0; } @media (min-width: 760px) { .aims { grid-template-columns: repeat(2, 1fr); } } .aim h3 { font-size: var(--step-1); margin-bottom: 0.4rem; } .aim p { color: var(--text-muted); max-width: var(--measure); } /* Clay rather than the inherited muted body colour, so the one link in this block reads as a link without an underline fighting the paragraph. */ .aim a { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; } .intro__more { margin-top: var(--space-md); } /* ============================================================ Statement of Faith ============================================================ */ /* A document, so it is set as one: a single measured column rather than the site's usual multi-column sections. 700, arrived at from the widest thing in it. The articles give 2.8rem plus a gap to the hanging numeral, leaving their prose 639px, about 71 characters. An earlier 940 left it at 852, roughly 95 characters, half again a comfortable line. Re-derive this if the numeral column changes. */ .creed { max-width: 700px; display: grid; gap: var(--space-xl); } .creed__part { display: grid; } /* Each part is titled the way the visit bar titles its columns: a sandstone rule that stops at the width of the words rather than running the column. That is what replaced the (A) to (D) markers, and it does more work than they did, because it marks the start of a part instead of labelling it. */ .creed__head { font-size: var(--step-2); width: fit-content; max-width: 100%; padding-bottom: 0.55rem; margin-bottom: var(--space-md); border-bottom: 2px solid var(--sandstone); } /* The motto part only. Its block below already carries a sandstone rule top AND bottom, so the heading's own rule made three horizontal lines inside a few inches: short rule, gap, long rule, motto, long rule. The heading keeps its size and its place in the outline and gives up the rule, which is the one that was doing the least. */ .creed__head--plain { border-bottom: none; padding-bottom: 0; } /* The motto takes the scripture block's treatment: ruled top and bottom so it reads as another stratum, rather than the conventional left bar. It is the shortest line in the document and the one everything else serves, so it is also the largest. */ .creed__motto { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.22; color: var(--clay-deep); padding-block: var(--space-md); border-top: 2px solid var(--sandstone); border-bottom: 2px solid var(--sandstone); } .creed__intro { color: var(--text-muted); max-width: var(--measure); margin-bottom: var(--space-md); } /* The two priorities. Only two of them, and both are declarations rather than items in an inventory, so they are set a size up from body copy and at full ink. The square mark is the same device as the Nifty Fifty perks list, in clay rather than sandstone because this ground is sand. `role="list"` is in the markup: `list-style: none` strips list semantics in Safari, and these are genuinely a list in the source document. */ .creed__points { list-style: none; padding: 0; display: grid; gap: var(--space-md); } .creed__points li { display: flex; gap: 1rem; align-items: baseline; font-size: var(--step-1); line-height: 1.45; } .creed__points li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--clay); translate: 0 -3px; } /* The numbered articles. The numeral hangs in its own column in the display face, which is the whole formatting idea here: ten articles set as a default
    are a wall of grey, and the hanging numerals give the eye a rung to climb down. Hairlines between them do the rest. Counters rather than ::marker because ::marker gives no control over the gap between the number and the text, and this numeral is nearly twice body size. Both lists restart at 1, exactly as the source document does. */ .creed__articles { counter-reset: article; list-style: none; padding: 0; } .creed__articles li { counter-increment: article; display: grid; grid-template-columns: 2.8rem 1fr; column-gap: var(--space-sm); align-items: baseline; padding-block: var(--space-md); border-top: 1px solid var(--rule); color: var(--text-muted); } .creed__articles li:last-child { border-bottom: 1px solid var(--rule); } .creed__articles li::before { content: counter(article); font-family: var(--font-display); font-weight: 600; /* --step-1, NOT --step-2. At --step-2 the numeral was set at exactly the same size as the .creed__head above it, so an article's number carried as much weight as the title of the part containing it: a hierarchy inversion. One step down still reads as a marker against 18px body copy, in the display face and in clay, without competing with the heading. */ font-size: var(--step-1); line-height: 1.25; /* Tabular figures so the numerals form a straight edge down the margin. */ font-variant-numeric: tabular-nums; color: var(--clay); } /* ============================================================ Who We Are — two branches, one tree ============================================================ */ /* The opening statement is centred and narrow, against the site's usual left-aligned section head. This one block IS the page's thesis and it sits directly above a full-width photograph of a single tree, so a left-ragged column beside empty space would fight the symmetry underneath it. */ .tree-head { text-align: center; max-width: 780px; margin-inline: auto; } .tree-title { font-size: var(--step-4); } .tree-lede { margin-top: var(--space-md); font-size: var(--step-1); color: var(--text-muted); } .tree-figure { margin-top: var(--space-lg); } /* See the markup: a degree of rotation reads as a pinned snapshot at gallery size and as a mistake at 1240px. */ .tree-figure .frame { --tilt: 0deg; } /* `.frame img` sets `height: 100%`, which is meant for the fixed-ratio gallery cards. This photo sets its own ratio instead, so the height has to go back to auto. Same specificity, so this rule has to stay BELOW `.frame img`. The width/height attributes on the img are there for CLS; `height: auto` is also what stops those attributes overriding `aspect-ratio`. */ .tree-figure img { aspect-ratio: 1408 / 768; height: auto; } /* The building drawing. It opens `our-story.html`, above the founder's story, at the user's direction 2026-08-28. (It spent an hour on `who-we-are.html` before that; the class is named for the picture rather than the page so the next move costs nothing.) THE WHITE BACKGROUND IS REMOVED BY BLENDING, NOT BY A CUTOUT, and that was the user's call after cutting it out went wrong: keying the white left the gaps between the leaves full of white flecks, because every hole in the canopy had page showing through it. They supplied a fixed drawing on a clean white ground instead. `mix-blend-mode: multiply` is exactly right for that. White multiplied by any colour IS that colour, so the 39% of this image that is pure white becomes the sand ground precisely, with no edge and nothing to key. The drawing itself darkens by the ground, which warms the greens a shade and settles the whole thing into the strata palette rather than sitting on top of it. It also means the ground's own texture reads faintly through, so the picture belongs to the page instead of being pasted onto it. NB this depends on nothing above it creating a stacking context with `isolation: isolate`. The three photographic zones do exactly that, so if this drawing is ever moved inside one, the blend will stop at the zone and the white will come back. `height: auto` alongside the width/height attributes, for the fifth-ish time on this site: without it the attributes act as a presentational hint and the image squashes. */ /* No top margin: it is the first thing in its section, so the section's own padding already sets it off. The bottom margin is what separates it from the story that follows. */ .building-drawing { margin-bottom: var(--space-xl); } .building-drawing img { width: 100%; height: auto; mix-blend-mode: multiply; } /* The two branches. Divider on the rule rather than under either heading, so neither branch reads as the subordinate one: the whole point of the section is that they are peers. */ .branches { margin-top: var(--space-xl); display: grid; gap: var(--space-lg); } /* The gutter is built from PADDING on the two columns, not from column-gap, so the rule can sit at the exact midpoint while both columns keep the same text width. Doing it the other way (gap plus a negative margin to pull the border back into the gutter) centres the rule but widens column two's box, which cost column two 48px of measure: 572 against 524. Measure both columns after any change here, not just the rule's position. */ @media (min-width: 900px) { .branches { grid-template-columns: 1fr 1fr; column-gap: 0; } .branches .branch { padding-inline: calc(var(--space-xl) / 2); } .branches .branch:first-child { padding-left: 0; } .branches .branch:last-child { padding-right: 0; border-left: 1px solid var(--rule); } } /* Four rows for four children, with the paragraph row absorbing the slack, so the two links sit on the same baseline whichever paragraph is longer. Both columns must hold the same four children for this to hold. */ .branch { display: grid; grid-template-rows: auto auto 1fr auto; } .branch h3 { font-size: var(--step-2); } .branch p { margin-top: var(--space-sm); color: var(--text-muted); } .branch .link-rule { justify-self: start; margin-top: var(--space-md); } /* --- The museum branch's own band ----------------------------------- Three offerings across. `.band p` is (0,1,1) and would outrank a bare `.museum-list h3` colour, which is why the cream here is set explicitly: `.band h2` does not reach an h3. Same trap as the Creation on the Road talk title. */ .museum-list { display: grid; gap: var(--space-lg) var(--space-md); list-style: none; padding-left: 0; } /* 1040, not the 860 first tried: at 860 three columns leave each blurb 252px and at 920 they leave 267px, about 33 characters. 1040 is the width at which the columns reach 312px, which is in line with the homepage aims (328) and the exhibit cards (280 floor). Below it the items stack full width, where `.band p` caps them at --measure anyway. Same fault the partners page hit, less severely: three across too early eats the text, and the fix is the breakpoint, not the gap. */ @media (min-width: 1040px) { .museum-list { grid-template-columns: repeat(3, 1fr); } } .museum-list li { display: grid; grid-template-rows: auto 1fr auto; } .museum-list h3 { font-size: var(--step-1); color: var(--cream); } .museum-list .link-rule { justify-self: start; margin-top: var(--space-md); } .museum-note { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--rule-invert); } /* `.band p` caps every paragraph at --measure, which is right for a column of body copy and wrong for a single closing line that should run the width of the band. (0,1,1) beats a bare class, so this needs the extra qualifier. */ .band .museum-note { max-width: none; } /* ============================================================ Exhibit gallery ============================================================ */ /* ---- Rugged photo frame ------------------------------------------- A quarried, torn-edge mat around every photograph, tilted slightly like snapshots pinned to a board. Straightens on hover. --------- */ .frame { position: relative; padding: 12px; background: linear-gradient(148deg, var(--sand) 0%, var(--sandstone) 42%, var(--ochre) 100%); clip-path: var(--tear-all); filter: drop-shadow(0 10px 18px rgba(25, 27, 29, 0.22)); transform: rotate(var(--tilt, -1.1deg)); transition: transform 420ms var(--ease); } .frame::after { /* grain over the mat */ content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.30; mix-blend-mode: multiply; pointer-events: none; } .frame img { width: 100%; height: 100%; object-fit: cover; clip-path: var(--tear-all); transition: transform 700ms var(--ease); } .frame:hover { transform: rotate(0deg) scale(1.015); } .frame:hover img { transform: scale(1.04); } /* Alternate the tilt so a grid doesn't look mechanically repeated */ .gallery > *:nth-child(3n+1) .frame { --tilt: -1.4deg; } .gallery > *:nth-child(3n+2) .frame { --tilt: 0.9deg; } .gallery > *:nth-child(3n+3) .frame { --tilt: -0.5deg; } .gallery { display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Explicit columns for a FIVE-card gallery. The auto-fit track above fits four across at the 1240 wrap (4x280 + 3x32 = 1216), which strands the fifth card alone on a row of its own. Three across gives 3 + 2, which reads as a list that ran on rather than as one card left behind. Same reasoning as the visit bar's explicit three. */ @media (min-width: 700px) { .gallery--3up { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .gallery--3up { grid-template-columns: repeat(3, 1fr); } } .card { display: flex; flex-direction: column; } .card__media { aspect-ratio: 4 / 3; } .card__body { padding: 1.4rem 0.4rem 0; display: grid; gap: 0.5rem; } .card__kicker { font-size: var(--step--1); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--moss-deep); font-weight: 600; } .card__title { font-size: var(--step-1); } .card__text { font-size: var(--step--1); color: var(--text-muted); } .section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); } .section-head h2 { font-size: var(--step-3); } /* ============================================================ Interior page header ============================================================ */ .pagehead { background: var(--slate-deep); color: var(--cream); text-align: center; padding-top: calc(var(--header-h) + var(--space-lg)); padding-bottom: var(--space-lg); } .pagehead__title { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.1; color: var(--cream); text-transform: uppercase; letter-spacing: 0.015em; width: fit-content; margin-inline: auto; padding-bottom: 0.6rem; border-bottom: 3px solid var(--sandstone); } .pagehead__lede { margin-top: var(--space-md); font-size: var(--step-1); color: rgba(250, 245, 234, 0.86); max-width: 56ch; margin-inline: auto; /* Centred display copy, so a short ragged last line reads as a mistake rather than as texture. Added 2026-08-25, when the signup lede grew by one word and broke to "...throughout / the year." Applied to EVERY lede on purpose: one page balancing while its neighbours do not is worse than either state, the same argument that keeps .eyebrow's 4.17:1 consistent rather than fixed on one page. Costs nothing where a lede already fits on one line, and it composes with .lede-line below, which makes each forced sentence its own block and so balances each independently. */ text-wrap: balance; } /* Short display copy gives each sentence its own line. Opt-in per lede, since a one-sentence lede has nothing to split and long ones should just wrap. */ .pagehead__lede .lede-line { display: block; } /* --- A LONG lede, where the one-sentence-per-line device works AGAINST it --- `.lede-line` suits a short lede: two brief sentences, one per line, each balanced. `why-creation.html` has THREE sentences and 277 characters, which is nearly double the next longest lede on the site (volunteer, 164) and more than twice the typical 110. Measured there before this rule: the lede stood 225px tall against 75px on most pages and 112px on the tallest, and because `text-wrap: balance` runs on each sentence SEPARATELY, each one shrank to fit its own two lines — the text painted only 539px of its own 741px box, i.e. 46% of the 1181px wrap. That is the narrow band, and the max-width was never the cause. Above 900 the sentences run together as ordinary prose and balance as ONE block, so the lede fills the column it was given. Below 900 nothing changes: on a phone the band is narrow anyway and one sentence per line is right there, which is exactly how the user put it. The 64ch cap keeps the ruled stack nesting correctly — the title is fit-content and .pagehead__verse is 52ch, so the verse stays inside the lede's column as its comment requires. */ @media (min-width: 900px) { .pagehead__lede--flow { max-width: 64ch; } .pagehead__lede--flow .lede-line { display: inline; } } /* Current page marker in the dropdown menus */ .nav__submenu a[aria-current="page"] { background: var(--sand); color: var(--clay-deep); font-weight: 600; } /* ============================================================ Reviews ============================================================ */ /* Reviews and the intro share the page ground on purpose. Two near-identical sands meeting at a butt joint read as a stray line; one continuous ground removes the seam instead of decorating it. */ .stars { color: var(--ochre); letter-spacing: 0.12em; font-size: var(--step-0); } .reviews__grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .review { margin: 0; padding: 1.6rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); /* Softly rounded, echoing the logo's oval without imitating a button */ border-radius: 22px; box-shadow: var(--shadow-card); display: grid; gap: 0.85rem; align-content: start; } .review blockquote { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; color: var(--text); } .review figcaption { font-size: var(--step--1); color: var(--text-muted); } .review__src { display: block; margin-top: 0.15rem; font-size: 0.82em; opacity: 0.8; } /* ============================================================ Full-bleed colour bands (field trips / support) ============================================================ */ .band { color: var(--text-invert); position: relative; } .band--clay { background: var(--clay-deep); } .band--moss { background: var(--moss-deep); } .band__grid { display: grid; gap: var(--space-lg); align-items: center; } @media (min-width: 900px) { .band__grid { grid-template-columns: 1fr 1fr; } } .band h2 { font-size: var(--step-3); color: var(--cream); } .band p { color: var(--text-invert-muted); max-width: var(--measure); margin-top: var(--space-sm); } /* Two separate faults, both invisible until you measure. Barlow is loaded at 400/500/600 only, so the UA default `bold` asks for a 700 that does not exist and gets a synthesised one. And .band p is muted, so a bold run at the SAME colour reads as a rendering glitch rather than as emphasis — the point of here is the phrase people must not miss. Full cream fixes both the look and the contrast, 5.14:1 to 8.21:1 on clay. */ .band p strong { font-weight: 600; color: var(--cream); } .band__media .frame { --tilt: 1.2deg; } .band__media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; } /* --- Leaf zone --------------------------------------------------------- The photograph belongs to ONE element spanning the top seam, the band and the bottom seam. Painting it separately on each of the three cannot line up: `cover` on a 1330x74 seam crops a thin slice at one scale, `cover` on the ~700px band crops a different region at another, so the seams read as a break in the pattern no matter how the colours are matched. Everything inside is transparent and lets this show through. z-index -1 paints these above the zone's own moss but below every descendant; `isolation: isolate` keeps that negative index from escaping upward. No mix-blend-mode on purpose: blending already failed once on this site when a z-index elsewhere isolated the group. */ .leaf-zone { position: relative; isolation: isolate; background-color: var(--moss-deep); } .leaf-zone::before, .leaf-zone::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .leaf-zone::before { background-image: url("../assets/img/leaves-bg.jpg"); background-size: cover; background-position: center; /* 0.18, not 0.30. The brightest leaves are rgb(197,239,130); at 0.30 with a transparent vignette centre, body copy measured 2.67:1 against them. */ opacity: 0.18; } .leaf-zone::after { /* The centre is scrimmed too, not just the edges — a vignette that clears to nothing in the middle leaves the brightest leaves sitting under the text. 0.48 centre with the 0.18 photo puts the worst case over 4.5:1. */ background: radial-gradient(115% 85% at 50% 50%, rgba(40, 49, 26, 0.48) 30%, rgba(36, 45, 24, 0.70) 72%, rgba(26, 33, 17, 0.92) 100%); } /* The band's own moss would hide the zone, so it steps aside. */ .leaf-zone .band--moss { background-color: transparent; } /* Seams inside the zone paint only their coloured strata; the moss end of each transition becomes the zone showing through. Top seam: `--wave-to: transparent` clears the moss fill below the last curve, and a .w0 path supplies the dark colour ABOVE the first curve, which the block background used to provide. Paths fill downward, so covering the top of the seam needs its own path closing up to y=0 rather than a background. */ .leaf-zone .wave { background: transparent; } /* Both names do the same thing: clear the flat fill so a photographic zone shows through. --to-leaf is the original, kept because support.html uses it; --to-photo is the generic name any later zone should use. */ .wave--to-leaf, .wave--to-photo { --wave-to: transparent; } /* The mirror of the above for the seam at the BOTTOM of a photographic zone: the ground it comes FROM is a picture, so the hairline strip has no flat colour to paint and would band the photo with a stripe. Same exception as `.leaf-zone .wave--from-moss::before`, but expressed as a modifier so it travels with the seam instead of needing a zone-specific rule. */ .wave--from-photo::before { content: none; } .wave .w0 { fill: var(--wave-from, var(--slate-deep)); } /* --- Nifty Fifty band ------------------------------------------------- Two columns of near-equal height: all the words on the left, the coin/price/ button block on the right. The composition is capped well inside the 1240px wrap — at full width this content could not fill the band, and the leftover opened three separate holes. The photograph still runs edge to edge behind, so the narrower plate reads as deliberate rather than as content that ran out. Scoped to this band; .band__grid elsewhere is untouched. */ .nifty { max-width: 940px; margin-inline: auto; display: grid; gap: var(--space-xl); align-items: center; } .nifty__copy > :first-child { margin-top: 0; } /* .band p caps every paragraph at --measure and is (0,1,1). A bare .nifty__pitch is (0,1,0) and loses no matter where it sits in the file, so this has to be scoped to .band to out-specify it. */ .band .nifty__pitch { max-width: none; font-size: var(--step-1); line-height: 1.45; } .nifty .perks { margin-top: var(--space-lg); } /* Coin, price and button centred on each other as one column. */ .nifty__offer { display: grid; justify-items: center; gap: var(--space-md); width: 100%; max-width: 360px; margin-inline: auto; } .nifty__coin { width: 100%; aspect-ratio: 1; object-fit: contain; background: none; /* drop-shadow follows the PNG's alpha, so the shadow is cast by the coin's circle rather than by its bounding box. It reads as an object resting on the leaves instead of a cut-out floating over them. */ filter: drop-shadow(0 16px 26px rgba(16, 22, 10, 0.55)); } /* Cancel the standalone margin: the grid gap already spaces these. */ .nifty__offer .pricetag { margin-top: 0; } /* justify-items: center, not the default stretch — .btn derives its height from its width via aspect-ratio, and a stretched button flattens the oval. */ .nifty__cta { display: grid; justify-items: center; gap: 0.8rem; } /* Out-specifies .band p (0,1,1), which would otherwise cap the width and add a top margin on top of the grid gap. */ .nifty__cta .offer-note { margin: 0; max-width: 34ch; text-align: center; /* --step-0 at 500, not --step--1 at 400. This sits on the leaf photograph, and a busy ground breaks up letterforms in a way no contrast figure reports: the note measured a passing 4.77:1 against the composited moss and was still the hardest thing on the page to read. Same call the user made for the visit bar, and the same fix as the road zone. Alpha lifted from 0.72 as part of the same change; at 0.72 the size increase alone still left it looking like a disclaimer. */ font-size: var(--step-0); font-weight: 500; color: rgba(250, 245, 234, 0.9); /* The note now runs to two lines, and at 34ch the natural break stranded "of any size." on its own. `balance` evens the two lines instead. */ text-wrap: balance; } /* --- Closing thanks ---------------------------------------------------- A coda to the band, so it takes a rule rather than a box: horizontal bands are this site's boundary idiom (the seams, the page-head rule, the verse block), and a panel here would be the sort of generic card that has been rejected before. Centred, because it is addressed to the reader rather than being another column of information. */ .nifty-thanks { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--rule-invert); text-align: center; } /* Ties with `.band p` on specificity (both 0,1,1) and wins on source order only, because the Nifty block sits later in this file than the band rules. Do not move this above them. Cream at 0.9 rather than --text-invert-muted at 0.72, and 500 rather than 400, for the leaf photograph underneath: the same lift .offer-note needed, for the same reason. */ .nifty-thanks p { max-width: 66ch; margin-inline: auto; color: rgba(250, 245, 234, 0.9); font-weight: 500; } /* .band p already spaces these; its margin would stack on the padding above. */ .nifty-thanks p:first-child { margin-top: 0; } /* Two class selectors, NOT the bare `.nifty-thanks__sign`: on its own that is 0,1,0 and `.band p` at 0,1,1 would quietly win the colour, leaving the closing line dimmer than the paragraph it is meant to lift off. */ .nifty-thanks .nifty-thanks__sign { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.25; color: var(--cream); max-width: 24ch; text-wrap: balance; } /* Media queries go BELOW the rules they override — they add no specificity, so above them they would lose on source order and do nothing. */ @media (min-width: 900px) { /* 4rem, not the --space-xl/2xl used between sections: those are 6 and 9rem, and at this width a 144px channel reopened the hole in the middle. */ .nifty { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-lg); } } /* The coin is a round object on transparency, not a photograph, so it opts out of the 3:2 crop and cover fill the framed photos use. */ .nifty__coin img { width: 100%; aspect-ratio: 1; object-fit: contain; background: none; } .perks { list-style: none; padding: 0; margin-top: var(--space-md); display: grid; gap: 0.75rem; } /* Raised from --step--1, where they read as fine print. Held at --step-0 rather than --step-1 so the pitch above still leads: two body sizes in one column with neither subordinate flattens the hierarchy. */ .perks li { display: flex; gap: 0.85rem; align-items: baseline; color: var(--text-invert-muted); font-size: var(--step-0); } .perks li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--sandstone); translate: 0 -2px; } /* ============================================================ Exhibit index ============================================================ */ .gallery-head { margin-bottom: var(--space-md); } /* The one-off explainer above the activities gallery, and the closing note below it. Capped and centred rather than left at full wrap width: a lone paragraph stops at --measure regardless, so across 1240 it would leave the same empty right-hand third that .cs-intro and the Nifty Fifty band were capped to avoid. A size up from body copy because it is the rule the whole gallery is read against. */ /* Left, not centred: .gallery-head above it is left-aligned, and a centred paragraph under a left-aligned heading reads as a stray block rather than as that heading's introduction. Capped at 68ch so it stays a readable measure without needing to fill the 1240 wrap — the gallery beneath it is what uses the full width. */ .activities-lead { font-size: var(--step-1); max-width: 68ch; margin-bottom: var(--space-lg); } .activities-lead strong { font-weight: 600; } .index-head .activities-lead { margin-bottom: 0; } .index-head { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--rule); } .index-cta { margin-top: var(--space-lg); /* align-items matters: .btn takes its height from its width via aspect-ratio, and the default stretch would equalise it and flatten the oval. */ display: flex; justify-content: center; align-items: center; } .index-head__note { max-width: 56ch; margin-top: var(--space-sm); color: var(--text-muted); } .exhibit-index { counter-reset: exhibit; list-style: none; padding: 0; margin-top: var(--space-md); columns: 3; column-gap: var(--space-lg); } .exhibit-index li { /* Without this a title can be split across the column break. */ break-inside: avoid; display: flex; gap: 0.85rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); font-size: var(--step-0); line-height: 1.3; } .exhibit-index li::before { content: counter(exhibit, decimal-leading-zero); counter-increment: exhibit; flex: none; min-width: 2.2ch; /* Tabular figures so the numbers form a straight edge down each column. */ font-variant-numeric: tabular-nums; font-size: var(--step--1); font-weight: 600; color: var(--clay-deep); } /* The list lands on the museum's own closing line, so let it read as the conclusion rather than as a twenty-fifth topic. */ .exhibit-index__last { font-family: var(--font-display); font-weight: 600; } .exhibit-index__last::before { color: var(--clay); } /* Below the base rule, per the source-order rule. */ @media (max-width: 900px) { .exhibit-index { columns: 2; } } @media (max-width: 600px) { .exhibit-index { columns: 1; } } /* ============================================================ Programs ============================================================ */ .programs { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* The clay rule sits UNDER the heading, not above the card. Moved 2026-08-28 at the user's request on tours.html, and applied to the component rather than to that page, because visit.html's "Good to Know" cards reuse it and the rule landing on opposite sides of two identical grids would read as a bug. This also puts the cards in step with the rest of the site, where a heading underlined in sandstone or clay is the standing device: .pagehead__title, .visitbar__title, .creed h2. Those are `fit-content`; this one runs the full column, because the card IS the column and a short rule under a two-word heading would leave the grid looking ragged. */ .program { display: grid; gap: 0.7rem; align-content: start; } .program h3 { font-size: var(--step-1); padding-bottom: 0.6rem; border-bottom: 3px solid var(--clay); } .program p { font-size: var(--step--1); color: var(--text-muted); } /* --- The same cards on a CLAY band (index.html's four purposes) ------------- Added 2026-09-03. The component was written for the sand, and two of its own defaults are wrong on `--clay-deep`. BOTH OF THESE WIN ON SPECIFICITY, (0,2,1) against (0,1,1), NOT on source order — so this block can be moved without silently reverting, unlike the interaction block at the end of this file. 1. The heading rule is `--clay` on a `--clay-deep` ground, which is very nearly invisible. Sandstone is the site's own answer on this band: the same pairing as the address link on `.cs-event`. 2. `.program p` is `--text-muted`, a DARK muted, and it is declared LATER than `.band p`, so it would win at equal specificity and paint dark grey body copy on a dark brown band. This is the identical trap the audio tour hit with `.tour-item.is-playing`. Do not delete either rule as a duplicate. */ .band .program h3 { border-bottom-color: var(--sandstone); } .band .program p { color: var(--text-invert-muted); } /* THE FOUR PURPOSES ARE PROSE, NOT THE SHORT FACTUAL CARDS THIS COMPONENT WAS BUILT FOR. Inheriting `.program p`'s `--step--1` dropped them from 17.80px to 14.35px — a full step SMALLER than `.intro__body p` directly above, which they are a continuation of. The user caught it by eye: "the section just above this is larger and more readable". Restored at (0,2,1). `tours.html` and `visit.html` keep `--step--1`, which is right for what those cards hold: one or two sentences of fact each. */ .programs--four .program p { font-size: var(--step-0); } /* An inline link inherits the muted body colour on this band, which left it the SAME colour as the prose around it and carried by its underline alone. Full cream with a sandstone underline is the site's settled answer for a link on a dark band — copied from `.band .why-q__body a`, NOT invented here. Measured: 8.21:1 against 5.14:1 for the copy it sits in. */ .band .program p a { color: var(--cream); text-decoration-color: var(--sandstone); } /* `.intro__more` is a

    , and `.band p` therefore catches it TWICE over — the trap here is that `.band p` at (0,1,1) beats a single class at (0,1,0), so it wins on specificity, not source order, and it sets more than colour: 1. COLOUR. It painted the section's own onward link MUTED while the link inside a card beside it was full cream — the hierarchy upside down, the section closer reading as the quieter of the two. 2. MARGIN. `.band p { margin-top: var(--space-sm) }` silently halved `.intro__more`'s intended 2rem gap to 1rem, so the link hugged the grid. Both restated at (0,2,0). Index-only class, so this reaches nothing else. */ .band .intro__more { margin-top: var(--space-md); } .band .intro__more .link-rule { color: var(--cream); } /* FOUR items, not six. `auto-fit` would drop all four onto one row on a wide screen, and these paragraphs run three to four times longer than the tours ones, so the columns would be narrow and very tall. Two keeps the measure the `.aims` grid this replaced already had. */ @media (min-width: 760px) { .programs--four { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Creation Speaks ============================================================ */ /* The series has its own roundel mark, so the intro is built around that rather than around a stock photograph. It is a real CEM asset, and a circle sits naturally beside the logo-derived oval of the buttons. */ /* `start`, not `center`: the copy column is long enough that a vertically centred mark would float on its own with dead space above and below it. Top-aligned, it sits against the eyebrow and heading. */ .cs-intro { display: grid; gap: var(--space-lg); align-items: start; } @media (min-width: 900px) { .cs-intro { grid-template-columns: minmax(200px, 290px) 1fr; } } /* Capped well inside the 1240px wrap and centred, the same fix the Nifty Fifty band needed: the paragraphs stop at --measure regardless, so at full width the column simply left a 320px hole down the right. 290 mark + 64 gap + the ~560px measure is about 914, so 940 holds it with a little slack. */ .cs-intro { max-width: 940px; } .cs-mark { width: min(100%, 290px); aspect-ratio: 1; /* Required, and it is not redundant. An carrying width/height attributes for CLS turns `height` into a presentational hint, and a concrete height beats `aspect-ratio` on a box that already has a width. Without this reset the Creation on the Road mark rendered 290 wide by its full 519 attribute height: squashed to 56% of its true width. */ height: auto; justify-self: center; filter: drop-shadow(0 10px 24px rgba(25, 27, 29, 0.22)); } .cs-intro__body { display: grid; gap: var(--space-sm); } /* Both qualifiers matter, and each was learned the hard way here. `:not(.eyebrow)` because `.cs-intro__body p` outranks `.eyebrow`, so without it the eyebrow silently greys out while the identical eyebrow further down the page stays clay. `>` because this rule would otherwise reach INTO the verse blockquote and mute it too, again outranking `.cs-verse p` on specificity. Scope block-level `p` rules to direct children. */ .cs-intro__body > p:not(.eyebrow) { color: var(--text-muted); max-width: var(--measure); } /* --- Scripture block --------------------------------------------------- Ruled top and bottom rather than given the usual left bar: horizontal bands are this site's idiom (the seams, the page-head rule, the year markers), so the verse reads as another stratum. */ .cs-verse { margin-block: var(--space-xs); padding-block: var(--space-sm); border-top: 2px solid var(--sandstone); border-bottom: 2px solid var(--sandstone); max-width: var(--measure); } /* SCRIPTURE TAKES ITS OWN FACE, --font-scripture, and is the ONLY thing on the site that does. See the token for the audit that produced it. Line-height is looser than the Fraunces setting it replaces: Garamond's small x-height and long extenders want more room, and 1.32 crowded the ascenders. */ .cs-verse p { font-family: var(--font-scripture); font-size: calc(var(--step-1) * var(--scripture-scale)); line-height: 1.42; color: var(--text); /* 500 EVERYWHERE, not 400-on-sand / 500-on-dark. Changed 2026-09-01 at the user's instruction: "I like the weight of the ones in clay, so apply that same weight to the ones on sand." The old split existed to make the two grounds look the SAME weight, on the reasoning that light-on-dark eats Garamond's hairlines. They compared the two directly on why-creation.html and preferred the heavier one on both, so the compensation is now moot: the face is simply set at 500. `.band .cs-verse p` and `.pagehead__verse p` still declare 500 of their own. That is now redundant for weight and is LEFT ALONE, because both rules exist to carry the dark-ground COLOUR and deleting the weight from them would only make the two look different again if this line is ever reverted. */ font-weight: 500; } .cs-verse cite { display: block; margin-top: 0.7rem; font-family: var(--font-body); /* cite defaults to italic, and the loaded Fraunces has no italic axis. Even in Barlow the reference is set upright to match the footer verse. */ font-style: normal; font-size: var(--step--1); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; /* --clay-deep (5.9:1), not --sandstone. Sandstone carries the footer verse because that sits on ink; on this sand ground it all but disappears. */ color: var(--clay-deep); } /* Scripture in a page head. Lives HERE, not up with the other .pagehead rules, because `.pagehead__verse p` and `.cs-verse p` have identical specificity (one class, one type) and source order is what decides — declared earlier it would silently lose to the block above and render in sand colours on ink. Only the tone and alignment change: the top-and-bottom sandstone rules are the site's scripture idiom and already read on this ground, the page-head title being underlined in the same colour. The palette is the footer verse's, which is the established dark-ground treatment; --text and --clay-deep both disappear against --slate-deep. */ .pagehead__verse { margin-top: var(--space-md); margin-inline: auto; /* Narrower than --measure so the ruled edges stay inside the lede's column and the band reads as one centred stack rather than three widths. */ max-width: 52ch; text-align: center; } /* --- A LONG page-head verse, 2026-08-31 ------------------------------------- The user, on why-creation.html: the verse "looks like it could be spread out more since the text above it is, and that would help make sure no one word is just hanging there by itself." ONLY TWO PAGES ON THE SITE CARRY A PAGE-HEAD VERSE: this one (Revelation 4:11, 145 characters) and who-we-are (Hebrews 1:10, 118). At the shared 52ch the long one broke 472 / 511 / 487 / 148 — a fourth line holding just "were created." Swept 52 to 70ch: 58 and 60 both settle it into THREE nearly equal lines, 521 / 579 / 524, and everything past 62 strands a short tail again. 60ch rather than 58 because the widest line paints 579, which is 4px inside a 58ch box and 24px inside a 60ch one; identical output, and the slack survives a font-metric shift. IT IS A MODIFIER, NOT A CHANGE TO THE RULE ABOVE, and the reason is measured: who-we-are's shorter verse reads 501 / 503 / 330 at 52ch and 544 / 543 / 247 at 60ch, so widening it globally would make the other page's rag WORSE. No media query: below 900 the container is narrower than either cap, so the max-width is not the binding constraint and nothing changes on a phone. Still nests inside the lede, which is 844px here under `.pagehead__lede--flow`. */ .pagehead__verse--wide { max-width: 60ch; } /* Weight 500, the dark-ground scripture rule. See .site-footer__verse p. */ .pagehead__verse p { color: var(--text-invert-muted); font-weight: 500; } .pagehead__verse cite { color: var(--sandstone); } .cs-intro__body h2 { font-size: var(--step-3); } /* --- Next talk band --------------------------------------------------- With nothing on the calendar, the honest notice on its own would be a dead end. Two columns instead, so the band still does work: collect the people who want telling, and the churches who would host. The rule sits on the divider rather than under either heading, so neither half reads as subordinate to the other. */ .cs-next { display: grid; gap: var(--space-lg); } @media (min-width: 900px) { .cs-next { grid-template-columns: 1fr 1fr; } .cs-next__aside { padding-left: var(--space-lg); border-left: 1px solid var(--rule-invert); } } /* `justify-items: start`, not the default stretch: a stretched grid item would equalise the button's height and flatten the oval it takes from the logo. The `1fr` row is the paragraph, so it absorbs the slack in whichever column is shorter and both buttons land on the same baseline. Both columns hold the same four children (eyebrow, heading, copy, button), which is what makes one shared row template possible. No `align-content` needed: the 1fr row leaves no free space for it to distribute. */ .cs-next__col { display: grid; gap: var(--space-sm); justify-items: start; grid-template-rows: auto auto 1fr auto; } /* Both columns are peers, so both headings are h2 and both take the same size. --step-2, not the --step-3 the rest of the page's section headings use: these are two headings sitting side by side inside one band, and the clay ground is already carrying the emphasis. NB this ties with `.band h2` on specificity (both 0,1,1) and only wins on source order, because the Creation Speaks block sits later in this file. Do not move it above the band rules. */ .cs-next h2 { font-size: var(--step-2); } /* The grid gap already spaces these; .band p would add a second margin. */ .band .cs-next p { margin-top: 0; } /* The two buttons are a matched pair, so they are sized off the longer label rather than each off its own. `min-width`, not `width`: height derives from the aspect ratio, so this is also how a button gets a floor, and a label longer than 13rem still grows instead of spilling out of the oval. */ .cs-next .btn { margin-top: var(--space-xs); min-width: 13rem; } /* --- A booked evening ------------------------------------------------- Written into the band by js/next-talk-render.js when data/next-talk.js holds a talk whose date has not passed. Absent the rest of the time, which is most of the time, so nothing here has any effect on the empty band. The pair below it keeps its place and is DEMOTED rather than removed: somebody who cannot make this evening still wants the mailing list, and a church reading about one talk is exactly who might host the next. They are separated by a hairline, the same stratum device as the seams and the year markers, rather than by a box or a shaded panel. Nothing here is a new shape. The poster takes the site's torn frame, the speaker takes the archive's ringed roundel, the facts are hairline rows like the exhibit index, and the buttons are the one button. */ /* CONTAINER QUERIES, NOT MEDIA QUERIES, AND THE REASON IS THE EDITOR. The card is previewed inside a column on event-editor.html, and a viewport query fires on the window rather than on that column, so the preview would show a two-up layout squeezed into 620px: a picture of something no visitor will ever see. Asking the card how wide IT is answers correctly in both places, and on the live page it lands on exactly the same breakpoints. Where container queries are unsupported neither rule matches and the card stacks in one column, which is the mobile layout and is perfectly usable. */ [data-next-talk] { container-type: inline-size; } .cs-event { display: grid; gap: var(--space-lg); align-items: start; } @container (min-width: 900px) { /* Only when there is a poster. Without one the details would be stranded in a 55% column with a hole beside them, the same fault `.cs-intro` and the Nifty Fifty band were capped to avoid. */ .cs-event--poster { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } } /* A flyer is a document, not a snapshot pinned to a board: at this size the gallery's tilt reads as a mistake. Same call as the tree figure. */ .cs-event__poster .frame { --tilt: 0deg; } /* REQUIRED, NOT REDUNDANT, and it must stay BELOW `.frame img` (same specificity, later wins). That rule sets `height: 100%` for the gallery's fixed-ratio cards; a poster comes in whatever proportion it was drawn. */ .cs-event__poster img { height: auto; } .cs-event__body { display: grid; gap: var(--space-sm); justify-items: start; } /* The eyebrow's own bottom margin would stack on the grid gap. */ .cs-event__body .eyebrow { margin-bottom: 0; } /* Left at `.band h2`'s --step-3, one step ABOVE the pair below, which sits at --step-2. The booked evening is the reason the band exists while it is there; the two standing offers are not its peers for those few weeks. */ .cs-event__title { max-width: 20ch; } .cs-event__who { display: flex; align-items: center; gap: 0.9rem; } /* The archive's portrait treatment at a larger size: the speaker is the headline act here rather than one row in a list. `object-fit: cover` because a newly supplied headshot may be any shape, while the eleven in the archive arrive already cut as circles. */ .cs-event__face { flex: none; width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--sandstone); background: var(--surface); object-fit: cover; box-shadow: 0 2px 8px rgba(25, 27, 29, 0.22); } .cs-event__speaker { font-family: var(--font-display); font-size: var(--step-1); color: var(--cream); } /* Out-specifies `.band p` (0,1,1), which would otherwise cap the width and add a margin above a line that belongs tight under the name. */ .band .cs-event__role { font-size: var(--step--1); margin-top: 0.1rem; } .cs-event__facts { width: 100%; max-width: 36rem; } .cs-event__fact { display: grid; gap: 0.15rem; padding: 0.7rem 0; border-top: 1px solid var(--rule-invert); } .cs-event__fact:last-child { border-bottom: 1px solid var(--rule-invert); } @container (min-width: 620px) { /* Below this the label column would leave a full street address about 200px wide, which wraps to four lines. */ .cs-event__fact { grid-template-columns: 8rem 1fr; gap: 0.5rem var(--space-sm); } } /* MUTED CREAM, NOT SANDSTONE, AND IT IS MEASURED. Sandstone on the clay band is 3.68:1, which is fine for the band's eyebrow (a label the eye skips) and is the site's known eyebrow shortfall, but these four labels are the ones a visitor is actually reading to find out when and where. Muted cream is 5.16:1 and still reads as a label rather than as copy, because the caps, the tracking and the weight are doing that work, not the colour. */ .cs-event__fact dt { font-size: var(--step--1); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-invert-muted); } .cs-event__fact dd { margin: 0; color: var(--cream); } .cs-event__fact time { font-variant-numeric: tabular-nums; } .cs-event__venue, .cs-event__city, .cs-event__addr { display: block; } .cs-event__city { color: var(--text-invert-muted); } /* Cream text at 8.22:1 with a SANDSTONE RULE under it. The colour that would normally mark this as a link cannot carry the text here, so it carries the underline instead, where 3.68:1 clears the 3:1 bar a non-text mark has to meet. The hover brings the rule up to cream, so the state change is a real one and never costs contrast. */ .cs-event__addr { margin-top: 0.35rem; font-size: var(--step--1); color: var(--cream); text-decoration: underline; text-decoration-color: var(--sandstone); text-underline-offset: 3px; transition: text-decoration-color 180ms var(--ease); } .cs-event__addr:hover, .cs-event__addr:focus-visible { text-decoration-color: var(--cream); } /* Buttons take their height from their width via aspect-ratio, so the default stretch would flatten the oval. Same note as .index-cta. */ .cs-event__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); } .cs-event__actions .btn { min-width: 13rem; } /* Two evenings booked at once. A line each, deliberately not a second card: the band is called Next Talk, and two cards would leave a visitor working out which one is next. */ .cs-event-more { margin-top: var(--space-lg); } .cs-event-more .eyebrow { margin-bottom: var(--space-xs); } .cs-event-more__list { list-style: none; padding: 0; } .cs-event-more__list li { display: grid; gap: 0.1rem; padding: 0.7rem 0; border-top: 1px solid var(--rule-invert); } @container (min-width: 760px) { .cs-event-more__list li { grid-template-columns: 16rem minmax(0, 1fr); gap: 0.1rem var(--space-md); } .cs-event-more__who { grid-column: 2; } } /* Muted cream for the same measured reason as the fact labels above: a date is read, and sandstone on this band is 3.68:1. */ .cs-event-more__date { font-variant-numeric: tabular-nums; color: var(--text-invert-muted); } .cs-event-more__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--cream); line-height: 1.2; } .cs-event-more__who { font-size: var(--step--1); color: var(--text-invert-muted); } /* The class is set by the script, so this only ever applies with a card above the pair. */ .has-next-talk .cs-next { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--rule-invert); } /* --- Past talks ------------------------------------------------------- Reads down like a column of rock: newest year at the top, older beneath, each year marked off by its own rule. Rows reuse the hairline and tabular figures already established by the exhibit index rather than introducing another card shape. */ /* .gallery-head leaves its h2 at the browser default, which lands BELOW the step-2 year markers inside the list and inverts the hierarchy. Scoped here rather than fixed on .gallery-head, which would also move the exhibits page. Ladder is now section 42.6px > year 32px > talk title 24px. */ .talks-head h2 { font-size: var(--step-3); } .talks { margin-top: var(--space-md); } .talks__year { font-family: var(--font-display); font-size: var(--step-2); font-variant-numeric: tabular-nums; width: fit-content; padding-bottom: 0.35rem; border-bottom: 3px solid var(--sandstone); margin-top: var(--space-lg); } .talks__year:first-child { margin-top: 0; } .talks__list { list-style: none; padding: 0; margin-top: var(--space-sm); } .talk { display: grid; gap: 0.4rem var(--space-md); padding: 1rem 0; border-bottom: 1px solid var(--rule); /* `center`, not `baseline`: the row now carries a 64px portrait, which has no useful baseline and would drag the text columns down against it. */ align-items: center; } @media (min-width: 760px) { /* Every column here MUST be an `fr`. Each .talk is its own separate grid, and grid tracks do not align between sibling grids, so any content-sized track (`auto`, `max-content`) resolves per row against that row's own name. Both were tried: the date column's left edge then wandered over a 49px spread. `fr` is purely proportional, so independent rows still land on the same boundaries. The fractions are sized to the widest content each column has to hold at the 1240px wrap: title 498px PLUS ~22px for the play glyph on talks that have a recording, portrait plus name 257px, venue 358px. This split gives them 527 / 263 / 386, so nothing wraps and the middle column no longer sits on ~130px of empty space. Re-measure these if a longer title or a longer venue is ever added. */ .talk { grid-template-columns: minmax(0, 1.50fr) minmax(0, 0.75fr) minmax(0, 1.10fr); } } .talk__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.15; } /* A parenthetical under a title, for the occasion a talk marked. Set in the body face so it reads as a note on the title rather than part of it. --clay-deep (5.9:1), not --clay (4.17:1), because this is small text. */ .talk__sub { display: block; margin-top: 0.28rem; font-family: var(--font-body); font-weight: 500; font-size: var(--step--1); letter-spacing: 0.03em; color: var(--clay-deep); } /* A talk with a recording makes its own title the link. That gives the five watchable evenings the weight they deserve on a page with nothing currently booked, and it needs no extra column. The play mark is the only signal at rest, so the list still reads as one clean column of titles. */ .talk__play { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: color 180ms var(--ease), border-color 180ms var(--ease); } .talk__play:hover, .talk__play:focus-visible { color: var(--clay-deep); border-bottom-color: var(--sandstone); } /* svg is display:block globally, so this has to be put back inline. A literal   sits before it in the markup so the glyph can never wrap onto a line of its own, orphaned from the title it belongs to. */ .talk__playicon { display: inline-block; vertical-align: -0.1em; width: 0.92em; height: 0.92em; color: var(--clay); transition: color 180ms var(--ease); } .talk__play:hover .talk__playicon, .talk__play:focus-visible .talk__playicon { color: var(--clay-deep); } /* --- The audio talk --------------------------------------------------- One talk in the archive was recorded as audio, not video, so it must not borrow the play triangle: at a glance that promises something to watch. It carries a waveform in the same 9.2r circle instead, which keeps the family resemblance while reading as sound, and the row states "Audio only" in words as well, because an icon alone is not a claim anyone can rely on.

    so it works with JavaScript off. */ /* The waveform reads as three bars rather than a solid wedge, so it needs a touch more room than the triangle to stay legible at this size. */ .talk__playicon--audio { width: 1.02em; height: 1.02em; } .talk__fmt { display: block; margin-top: 0.28rem; font-family: var(--font-body); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; /* --clay-deep at 5.9:1. --clay fails the normal-text bar at this size. */ color: var(--clay-deep); } /* --- The player dialog ------------------------------------------------ The native