/* ========================================================================== Barefoot Conservation — inner-page styles Tokens live in tokens.css and are imported here (CLAUDE.md rule 16). Component grammar is ported from Ayo Divers and restyled; class names are deliberately unchanged so the templates transfer. ========================================================================== */ @import url("/tokens.css"); /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } /* Strip list markers everywhere, then put them back only inside prose, where a list is content rather than layout. The old `ul[class], ol[class]` form missed any list whose class sits on a wrapper instead of the list itself — the breadcrumb and the in-page nav were both rendering decimal markers over their own text. */ ul, ol { list-style: none; } .prose ul, .prose ol, .prose--wide ul, .prose--wide ol, .doc-section ul, .doc-section ol, .legal-body ul, .legal-body ol { list-style: revert; padding-left: 1.2em; } img, picture, video, svg { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------- Page shell ---------- */ /* THE TYPE IS ALREADY AYO'S, AND THAT IS WORTH WRITING DOWN so nobody goes looking for a difference that is not there. Both projects load ONE font link, and the two are byte-identical: Fraunces (ital + the 9..144 opsz axis, weights 400/500/600/700/900), Hanken Grotesque (300–800) and DM Mono (400/500). The family variables, the `.display` and `.lead` clamps and the italic-`em` treatment all match line for line as well. The one real difference in the base setup was `text-rendering`, which Ayo sets and this did not. Where the two DID diverge is per-component weight — Ayo runs its numbers and card titles at 800/900 where this ran 700/800, which is what reads as "a different font" without being one. Those are matched at the component, not here. */ body.page { font-family: var(--font-body); font-size: 1rem; line-height: 1.62; font-weight: 400; background: var(--shell); color: var(--deep-900); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* Skip link — first focusable thing on every page */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ochre); color: var(--on-ochre); padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700; } .skip-link:focus { left: 0; } :focus-visible { outline: 2.5px solid var(--seagrass-deep); outline-offset: 2px; border-radius: 3px; } .section--deep :focus-visible, /* Ayo's global `:focus-visible` is `--turq`. Applied in the header and the drawer, which is where its turquoise now lives; the FOOTER keeps `--seagrass-bright`, because it is on every page in Barefoot's own colours and a lone turquoise ring down there would be the only one on the site. */ .site-header :focus-visible, .mobile-menu :focus-visible { outline-color: #18e0c6; } /* The footer is Ayo's colours now, so its focus ring goes with them — the reason it was left on `--seagrass-bright` when the header changed (that it was the last Barefoot-coloured chrome) no longer holds. */ .site-footer :focus-visible { outline-color: #18e0c6; } /* ---------- Texture layers ---------- */ /* .grain — reused verbatim from Ayo (plan/03 §3). */ .grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .42; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* .paper — Barefoot only. Coarser noise, multiplied. This is what makes the light surfaces read as paper rather than as white. FIXED, like .grain (plan/03 §3 says both are). It does not need scoping to the light sections: multiply against --deep-900 (#061512) shifts each channel by under two units at .16 opacity, i.e. nothing, so one layer self-selects — texture on paper, invisible on deep. This matters for more than tidiness: the previous version put a blended layer inside every light section, and mix-blend-mode on a scrolling container forces a repaint of that container on every frame. Fixed + pointer-events:none keeps it on its own compositor layer instead. */ .paper { position: fixed; inset: 0; z-index: 69; pointer-events: none; opacity: .16; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.62'/%3E%3C/svg%3E"); background-size: 220px 220px; } /* ---------- Surfaces ---------- */ .section { position: relative; padding-block: clamp(72px, 10vw, 132px); } .section > .shell { position: relative; z-index: 1; } .section--deep { background: var(--deep-900); color: var(--shell); } .section--paper { background: radial-gradient(900px 520px at 88% 0%, rgba(55, 181, 140, .09), transparent 62%), var(--shell); color: var(--deep-900); } .section--sand { background: var(--shell-3); color: var(--deep-900); } /* Referenced by the homepage's #expeditions and #proof since Phase 6 but never actually defined, so both sections computed to background rgba(0,0,0,0) and only LOOKED cream because body.page is. A transparent section shows whatever is behind it — which is how the homepage map ended up behind the Expeditions heading. Declared explicitly: a section named for a surface must paint it. */ .section--shell { background: var(--shell); color: var(--deep-900); } .section--tight { padding-block: clamp(48px, 6vw, 76px); } /* WHEN TWO SECTIONS PAINT THE SAME SURFACE, DRAW THE BOUNDARY — plan/15 §C1. Measured on 9 pages: all eight `/science/` (outcomes → other programmes) and `/expedition` (deposit → before you apply). Two sections of identical colour read as one long section, and the second one's heading looks like a sub-heading of the first rather than a new part of the page. Why a general rule and not a surface change on those two templates: `section--paper section--tight` is the site's established "where next" rail — `/about`, `/science`, `/expedition` and every science programme page end that way — so the convention is right and only its NEIGHBOUR varies. Reassigning surfaces page by page is exactly how these collisions keep appearing: making the rail sand would have fixed those two and created a fresh collision on `/science`, whose preceding section is already sand. This rule cannot do that. It is self-maintaining — a new page, or a section reordered in a template, gets its boundary automatically. The spacing was never the problem: there is already 120–200px between them. What was missing is a visual event saying "new section", which is what a hairline is for. Full-bleed rather than inset to the shell, because it divides sections and not content — same call as `.cta-band`'s top rule. `--line-*` and not `--edge-*`: decorative divider, not an interactive boundary (rule 25). The dark pairing needs the light token — the same on-light/on-dark split this file gets wrong every time it is forgotten. */ .section--paper + .section--paper, .section--shell + .section--shell, .section--sand + .section--sand { border-top: 1px solid var(--line-ink); } .section--deep + .section--deep { border-top: 1px solid var(--line-light); } /* A HERO IS NOT A CONTENT SECTION, so it never draws that boundary against whatever follows it. The rule above exists so two adjacent sections of the same surface do not read as one long section — but a hero already reads as the top of the page, and the section beneath it already reads as the first real one, so the line says nothing and looks like an underline on the hero. Why this never came up before 13 Aug 2026: `.page-hero` carries `section--deep`, and on every other page a hero is followed by a LIGHT section, so the pair never matched. The homepage's science section is dark and, once the twelve-week timeline moved to /expedition, it sat directly under the hero — the rule then drew a line across the top of it that was not there when the timeline occupied that space, which is a visible change to a section the owner asked to leave alone. Verified by sweeping all 23 content routes: `.page-hero + .section--deep` matches on `/` and on nothing else, so this line changes exactly one boundary. */ .page-hero + .section--deep { border-top: 0; } /* ---------- Typography ---------- */ .display-xl, .display, h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; } .display-xl { font-size: clamp(2.6rem, 7.2vw, 6.2rem); font-weight: 900; letter-spacing: -.025em; line-height: .96; } .display { font-size: clamp(2rem, 4.6vw, 4rem); font-weight: 900; letter-spacing: -.018em; line-height: 1.02; } .display em, .display-xl em { font-style: italic; font-weight: 500; } h3, .h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.16; } h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.32rem); line-height: 1.6; color: var(--txt-ink); max-width: 62ch; } .section--deep .lead { color: var(--txt-light); } .prose { max-width: 68ch; } .prose p + p { margin-top: 1.1em; } .prose p { color: var(--txt-ink); } .section--deep .prose p { color: var(--txt-light); } .prose a { text-decoration: underline; text-underline-offset: .18em; color: var(--seagrass-deep); } .section--deep .prose a { color: var(--seagrass); } /* .eyebrow — the rule colour is set EXPLICITLY per surface. If it inherits currentColor it turns green on paper (plan/03 §2). */ .eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .22em; font-size: .74rem; font-weight: 500; color: var(--seagrass-deep); display: flex; flex-wrap: wrap; align-items: center; gap: .6em; max-width: 100%; margin-bottom: 1.1rem; } /* Ayo draws the rule in `currentColor` at .6, so it follows the eyebrow's own colour rather than being a fixed sand line that has to be kept in step with it — which is exactly how the on-dark override below came to exist. */ .eyebrow::before { content: ""; width: 26px; height: 1px; flex: none; background: currentColor; opacity: .6; } /* Ayo's `--turq-bright` on dark: measured 14.00:1 against `--deep-900` where `--seagrass` gave 7.25. Brighter AND clearer. */ .section--deep .eyebrow { color: #67f5e2; } /* `.eyebrow--light` carried NO colour of its own — it only looked right where it happened to sit inside a .section--deep, and the ancestor rule above did the work. On the homepage hero (over the map) and on .cta-full it therefore painted --seagrass-deep, the ON-LIGHT variant, at 2.67:1. A modifier named "--light" has to be self-sufficient: it is used precisely where the surface is dark but the container is not .section--deep. */ /* Ayo's `--turq-bright` on dark. Measured 14.00:1 against `--deep-900` where `--seagrass` gave 7.25 — this one is brighter AND clearer. */ .eyebrow--light { color: #67f5e2; } /* Every number, price, measurement, week and coordinate. Never Hanken. (CLAUDE.md rule 17.) */ .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* THE MEASURE CAP IS NOT DECORATION. Uncapped, `.note` ran to 147 characters a line on 20 of the 26 public routes, in the SMALLEST type on the site. Longest line at the smallest size is the exact inversion of what type wants, and it survived four build phases because it is invisible at 375px, where every column is ~40ch whatever the CSS says. 60ch, and the unit matters: `ch` is the width of "0", so for a MONOSPACED face it is exactly one character — 60ch here really is 60 characters. That is not true of the proportional caps elsewhere in this file (`.prose` 68ch measures ~76 real characters, because Hanken's lowercase is narrower than its "0"). So do not read 60 against 68 as "tighter than prose": mono runs wider per character, and 60 mono characters is the optical equivalent. `.footer__reg` already sets 60ch on mono — same reasoning, same number. */ .note { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; line-height: 1.5; color: var(--txt-ink-dim); max-width: 60ch; /* Capping the measure creates a second-order problem: a sentence just over 60 characters now wraps, and the leftover can be a single word on its own line. The homepage's one note did exactly that ("…the expeditions / page.") — and that page is signed off, so its only visible change should not be an orphan. `pretty` rebalances the last lines. Progressive enhancement: a browser that does not know it ignores the declaration and gets the plain wrap, which is what shipped before this cap existed. */ text-wrap: pretty; } /* Ink-coloured helpers must fail safe on EVERY dark surface, not just .section--deep. `.site-footer` and `.cta-full` paint --deep-900 without carrying that class, so a `.note` inside the footer rendered --txt-ink-dim (near-black) on --deep-900: measured contrast 1.00, i.e. invisible, on every page of the site. Same failure mode the Phase 3 notes record for .btn--quiet / .btn--ink — dark surfaces are declared in more than one place, so anything specified for light surfaces needs the whole list. Keep these three selectors together; adding a dark container means adding it here too. */ .section--deep .note, .site-footer .note, .cta-full .note { color: var(--txt-light-dim); } .rule--dashed { border: 0; border-top: 1.5px dashed var(--sand); margin-block: var(--s-6); } .section--deep .rule--dashed { border-top-color: var(--deep-600); } /* ---------- Icons & sketches ---------- */ .icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.16em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon--lg { width: 1.6em; height: 1.6em; } .sketch { width: 100%; height: auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--deep-700); } .section--deep .sketch { color: var(--sand); } /* Draw-on: --len is set from getTotalLength() by site.js */ .sketch--draw path, .sketch--draw circle, .sketch--draw line, .sketch--draw polyline { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.5s var(--ease); } .in-view .sketch--draw path, .in-view .sketch--draw circle, .in-view .sketch--draw line, .in-view .sketch--draw polyline { stroke-dashoffset: 0; } /* ---------- Buttons ---------- */ .btn { --btn-pad: .95em 1.5em; display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-weight: 700; font-size: .96rem; letter-spacing: .01em; line-height: 1.2; padding: var(--btn-pad); /* Every variant carries the same border box: the bordered variants (ghost, glass, quiet) were 3px taller than the filled ones (ochre, ink), so a side-by-side pair of buttons was visibly asymmetric. */ border: 1.5px solid transparent; border-radius: 999px; min-height: 44px; /* WCAG 2.5.5 target size */ transition: transform var(--t-micro) var(--ease), background var(--t-micro), box-shadow var(--t-micro), color var(--t-micro), border-color var(--t-micro); white-space: nowrap; will-change: transform; text-align: center; } .btn .icon { transition: transform var(--t-micro); } .btn:hover .icon { transform: translateX(3px); } /* Still 44px: .btn--sm is smaller in type and horizontal padding, but the header CTAs use it and a target floor is a floor (CLAUDE.md rule 21). */ .btn--sm { --btn-pad: .66em 1.05em; font-size: .85rem; min-height: 44px; } .btn--lg { --btn-pad: 1.08em 1.9em; font-size: 1.02rem; } .btn--block { display: flex; width: 100%; } /* AYO'S `.btn--coral`, value for value — the owners asked for Apply, Book now and every button of that kind to match theirs. Renamed from `.btn--ochre` rather than left lying about its own colour; the 28 usages in views were renamed with it. The `--ochre` TOKEN is untouched because fifteen things that are not buttons still use it. */ .btn--coral { background: var(--coral); color: var(--on-coral); } .btn--coral:hover { background: var(--coral-bright); transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(255, 90, 56, .7); } .btn--ghost { border: 1.5px solid var(--edge-light); color: var(--shell); } /* `--coral-bright`, not `--hover-lume`, and it is the one hover on the site that needs the brighter step. This button lives in the HEADER, whose bar is translucent — composited over a pure-white pixel it lightens to rgb(38,55,61), where --coral is 4.08:1 and fails AA for a label. --coral-bright measures 5.05 there and 7.62 on the drawer's dark gradient, so one value serves both places the button appears. It is also the step the nav's current-page marker already uses, so the header runs the same two-step orange Ayo's runs in green. */ .btn--ghost:hover { border-color: var(--coral-bright); color: var(--coral-bright); transform: translateY(-2px); } .btn--glass { background: rgba(244, 237, 225, .10); color: var(--shell); border: 1.5px solid var(--edge-light); backdrop-filter: blur(8px); } .btn--glass:hover { background: rgba(244, 237, 225, .18); transform: translateY(-2px); } .btn--ink { background: var(--deep-900); color: var(--shell); } .btn--ink:hover { background: var(--deep-700); transform: translateY(-2px); box-shadow: var(--shadow-soft); } .btn--quiet { border: 1.5px solid var(--edge-ink); color: var(--deep-900); } .btn--quiet:hover { border-color: var(--hover-ink); color: var(--hover-ink); transform: translateY(-2px); } /* .btn--quiet and .btn--ink are specified for LIGHT surfaces (plan/03 §4). A card dropped into a --deep section would otherwise paint --deep-900 text on --deep-800 and vanish. Fail safe instead of failing silently. */ .section--deep .btn--quiet { border-color: var(--edge-light); color: var(--shell); } .section--deep .btn--quiet:hover { border-color: var(--hover-lume); color: var(--hover-lume); } .section--deep .btn--ink { background: var(--shell); color: var(--deep-900); } .section--deep .btn--ink:hover { background: var(--shell-2); } .btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; } /* Tactile feedback: hover lifts, press settles back down and compresses very slightly. Without this the buttons lift on hover and then do nothing on the actual click, which reads as unresponsive on touch where there is no hover at all. Transform-only, so it composites. */ .btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; } .acc__btn:active, .m-acc__btn:active, .nav__burger:active, .mobile-menu__close:active, .footer__social a:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { .btn:active, .acc__btn:active, .m-acc__btn:active, .nav__burger:active, .mobile-menu__close:active, .footer__social a:active { transform: none; } } /* ---------- .stat — the evidence tile ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-6); } .stat { border-top: 1px solid var(--line-ink); padding-top: 18px; } .section--deep .stat { border-top-color: var(--line-light); } .stat__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; /* plan/03 §2 specifies clamp(2.2rem, 4vw, 3.4rem). Lowered after running the real values: "15,000 m²" is nine mono characters and overflowed a quarter of a 1240px shell at 3.4rem, wrapping the unit onto its own line. */ font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--seagrass-deep); display: block; } .section--deep .stat__num { color: var(--seagrass); } .stat__label { font-weight: 500; font-size: .92rem; margin-top: .5em; color: var(--deep-900); } .section--deep .stat__label { color: var(--txt-light); } .stat__sub { font-size: .82rem; color: var(--txt-ink-dim); margin-top: .25em; } .section--deep .stat__sub { color: var(--txt-light-dim); } /* ---------- .prog — the programme card on a dark photo section ---------- MOVED HERE from styles.css (14 Aug 2026), unchanged, because the science programme pages' "Other programmes" section now uses it and they do not load styles.css. The homepage's science section is the other user. `.prog__s` WAS `--txt-light-dim` AND THAT FAILED AA (fixed 15 Aug 2026, at the owner's instruction; the finding had been sitting in plan/16 §11). The summary sits straight on the scrimmed photograph with no card background under it, and `reef-sunrays` genuinely reaches PURE WHITE in the sunbeams — measured off the file, not assumed. At the scrim's .75 middle stop that put the old .54 alpha at **3.37:1** against the 4.5 body text needs. IT IS `--txt-light` AND NOT A BESPOKE ALPHA, because that is the token every other body copy on a `section-bg` scrim already uses and is already verified at 5.03:1 there (15 Aug). One vocabulary, one solved value. THE HOVER STATE IS WHAT RULES OUT THE OBVIOUS SMALLER BUMP. The whole card is a link and lightens by `rgba(244,237,225,.04)` on hover, which raises the background under the text. plan/16 §11 recommended .70 on the strength of a 4.51:1 at-rest figure — measured hovered, .70 is **4.17:1 and still fails**. `--txt-light` measures 5.00 at rest and **4.59 hovered**, so it passes in both states. Any future change here must be measured in the hover state too. */ .prog-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--s-7); } .prog { display: block; padding: var(--s-5); border: 1px solid var(--line-light); border-radius: var(--r); text-decoration: none; transition: border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease); } .prog:hover { border-color: var(--edge-light); background: rgba(244, 237, 225, .04); } .prog .sketch { width: 62px; height: auto; color: var(--seagrass); margin-bottom: var(--s-3); } .prog__t { font-size: 1rem; font-weight: 600; color: var(--shell); } .prog__s { margin-top: var(--s-2); font-size: .875rem; line-height: 1.5; color: var(--txt-light); } /* ---------- .mslide — a card grid that becomes a slider on a phone ---------- MOVED HERE from styles.css (14 Aug 2026), unchanged, because /science's "Eight programmes" now uses it and that page does not load styles.css. This is the second block to make that trip today; `.prog` above is the first, and the reason is identical. The old note claimed it had to live in styles.css because that sheet is linked later — belt and braces, not a requirement: `.mslide > .prog-grid` is TWO classes against `.prog-grid`'s one and wins on specificity from anywhere. The owner's brief (14 Aug 2026): "instead of making all the 8 programmes below each other we need a sliding section with the arrows both side and slidable too, same as the village pictures", and the same for the four expedition lengths. A MEDIA QUERY OVER THE EXISTING GRID, NOT A SECOND SET OF MARKUP. The grid turns into the village's scroll-snap track below 700px and is an ordinary grid above it, so there is exactly one copy of each card in the document, the reading order never changes, and a phone with no JavaScript still gets a swipeable list rather than a broken one. main.js adds the arrows and the dots on top and removes them again above the breakpoint. 700px IS THE VILLAGE SLIDESHOW'S OWN BREAKPOINT, which is the reason to reuse it rather than pick a third number: below it every one of these grids is a single column anyway, so the slider replaces a stack and never a row. THE EIGHT PROGRAMME PAGES' OWN "Other programmes" GRID IS STILL UNWRAPPED and so still a plain stack on a phone — it has no `.mslide`, which is what these selectors require. That is the existing decision, not an oversight. */ .mslide { position: relative; } @media (max-width: 700px) { .mslide > .prog-grid, .mslide > .band-grid { display: flex; /* `grid-template-columns` is inert under display:flex, but leaving the declaration live means a future auto-fit edit reads as if it applies here. It does not. */ grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; /* Room for a card's focus ring, which the overflow would otherwise clip — the same 3px the village track uses. */ padding: 3px; } .mslide > .prog-grid::-webkit-scrollbar, .mslide > .band-grid::-webkit-scrollbar { display: none; } /* One card per screen, snapping centre — the village's own slide sizing. */ .mslide > .prog-grid > *, .mslide > .band-grid > * { flex: 0 0 100%; scroll-snap-align: center; } } @media (prefers-reduced-motion: reduce) { .mslide > .prog-grid, .mslide > .band-grid { scroll-behavior: auto; } } /* ---------- .card--field — the field-notebook card ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; } /* Science hub: 8 cards → 4 / 2 / 1 (plan/03 §8) */ .card-grid--science { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .card-grid--science { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .card-grid--science { grid-template-columns: 1fr; } } .card--field { position: relative; background: var(--shell-2); border: 1px solid var(--line-ink); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding: var(--s-6) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); transition: transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease); } .card--field:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card--field__index { position: absolute; top: 14px; left: 20px; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; /* was --sand: a decorative token on the card's light --shell-2, i.e. the same invisible-index bug as .support-option__index. The hover state below already reached for --seagrass-deep, which is the on-light accent. */ color: var(--txt-ink-dim); transition: color var(--t-micro); } .card--field:hover .card--field__index { color: var(--hover-ink); } .section--deep .card--field__index { color: var(--txt-light-dim); } .section--deep .card--field:hover .card--field__index { color: var(--hover-lume); } .card--field h3, .card--field .h3 { margin-top: var(--s-4); } /* .h3: heading-order fix, 16 Aug */ .card--field p { color: var(--txt-ink); font-size: .95rem; } .card--field__foot { margin-top: auto; padding-top: var(--s-3); } .card--field a.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); } /* THE INSIDES OF CARDS IN A ROW HAVE TO LINE UP, AND THEY DID NOT. Each card stacked its own contents independently, so a title that wrapped to two lines pushed that card's summary down while its neighbours' stayed put. Measured at 1440: on /science the summaries were out by **23px in the first row of four and 71px in the second** ("Crown-of-Thorns Starfish" wraps to four lines in a 261px card against "Marine Debris" on one); on /science/reports the Download buttons were out by **35px**, because two of the three reports carry an extra "Also in Bahasa Indonesia" line inside a bottom-aligned foot and the third does not. Same mechanism as the paired form rows: the row owns the tracks and each card borrows them, so a long title reserves the same height in every card beside it. `span 5` covers the deepest card in the family (sketch, heading, summary, foot — plus one spare); a card with fewer children simply leaves the last track empty at zero height, which is why one number works for every grid. `row-gap` is restated because a subgrid inherits its parent's gutters, and the 28px BETWEEN cards is far too much between a heading and its summary. Guarded twice: single-column layouts have nothing to align, and without `subgrid` every grid keeps exactly the flex stacking it had before. */ @supports (grid-template-rows: subgrid) { @media (min-width: 721px) { .card-grid > .card--field { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: var(--s-3); } /* `margin-top: auto` bottom-aligned the foot when the card was a flex column, and it has to go now that the row owns the tracks: it pushed a short foot to the BOTTOM of a track sized by a taller one, which is precisely the 35px that kept the three Download buttons out of line on /science/reports. The track already holds the foot at a shared height. */ .card-grid > .card--field > .card--field__foot { margin-top: 0; } } } .section--deep .card--field { background: var(--deep-800); border-color: var(--deep-600); } .section--deep .card--field p { color: var(--txt-light); } .section--deep .card--field:hover .card--field__index { color: var(--hover-lume); } /* ---------- Photo card: a photograph behind the words ---------------------- Owner, 15 Aug 2026, first for the blog — "put some pictures on the card as background. Put the Read button on the same bottom area in all of them" — then for the liveaboard itineraries. NAMED `card--photo`, NOT `card--blog`, BECAUSE IT HAS TWO USERS. It was `card--blog` for a few hours; the second ask arrived and the choice was one implementation or a second copy of it, which is rule 16 one level up. EVERY PICTURE IS ONE THE SUBJECT CAN HONESTLY CLAIM (rule 22). The blog cards carry each post's own cover from the old site; the itinerary cards carry a dive site that route actually visits. THIS CARD OPTS OUT OF THE SUBGRID ALIGNMENT ABOVE, and that is the whole answer to "the same bottom area". Subgrid lines up children TRACK BY TRACK, which needs every card to have the same children — and these do not: the Misool report has no excerpt, so its foot fell into the excerpt's track and its Read button sat a line higher than the other eight. A flex column with `margin-top: auto` on the foot pins the button to the bottom of the CARD instead, and the grid already stretches every card in a row to one height, so all nine land on one line however much text is above them. Three classes, to beat the two-class subgrid rule inside its @supports. */ .card--photo { overflow: hidden; /* 30rem leaves a 180–200px band of clear photograph above the copy at every width — measured, not guessed: the copy block settles at 246–320px depending on how the title and excerpt wrap, so a shorter card showed as little as 20% picture and the pictures were the point of the ask. */ min-height: 30rem; border-color: var(--deep-600); /* The floor under the scrim, so a photograph that fails to load — or one with a bright corner — still has something solid behind the text. */ background: var(--deep-900); } /* THE COPY IS BOTTOM-ANCHORED, and that is what lets the photograph show. An even wash dark enough for text everywhere leaves only ~25% of the picture visible — which defeats the point of putting one there. Anchoring the words to the foot puts them in the bottom band where the scrim is strong, and leaves the top of the card nearly clear. */ .card-grid > .card--field.card--photo { display: flex; flex-direction: column; justify-content: flex-end; grid-row: auto; row-gap: 0; padding: 0; } /* WITHOUT THIS, `hidden` DOES NOTHING AND THE FILTER FILTERS NOTHING. The UA sheet's `[hidden] { display: none }` loses to any author `display` rule, and the one directly above is three classes deep. The card kept its `display: flex` and stayed on screen however the attribute was toggled — which is exactly what the owner saw. Third recording of this trap in the project: booking.css:225 says the same thing about `.btn`, and apply.css and booking.css both carry their own `[hidden]` rules for the same reason. ANY NEW `display` ON A TOGGLEABLE ELEMENT NEEDS ITS OWN `[hidden]` PARTNER. */ .card-grid > .card--field.card--photo[hidden] { display: none; } /* THE READ BUTTON ON ONE LINE ACROSS THE ROW, which is the owner's second ask. The grid stretches every card in a row to one height, the body is pushed to the bottom by its own `margin-top: auto`, and the foot is the body's last child — so all three feet land together however much text is above them. `margin-top: auto` INSIDE the body would fight that by stretching one card's body taller than its neighbours', so the foot just sits in the flow. */ .card-grid > .card--field.card--photo .card--field__foot { margin-top: 0; padding-top: 0; } .card--photo__bg { position: absolute; inset: 0; z-index: 0; } .card--photo__bg img, .card--photo__bg picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* THE SCRIM HUGS THE COPY, WHICH IS THE WHOLE TRICK. A card-wide gradient has to guess where the text begins, and it guesses wrong: measured across five widths, the category label lands anywhere from 22% to 34% down the card depending on how the title wraps, and a bottom-weighted wash is still nearly clear up there — the label came out at 1.01:1. Sizing the scrim to the copy block instead makes the alpha under every line a CONSTANT, so contrast stops depending on layout at all, and the photograph above the words keeps its own light. Solved against a PURE WHITE pixel, not against these nine photographs, so a picture the owners swap in later cannot break the text. */ .card--photo__body { position: relative; z-index: 2; margin-top: auto; padding: var(--s-6) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); background: color-mix(in srgb, var(--deep-900) 88%, transparent); } /* A soft lead-in above the block so the wash does not start on a hard line. Purely cosmetic — no text ever sits in it, which is why it can be gentle. */ .card--photo__body::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 4.5rem; background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--deep-900) 88%, transparent) 100%); } /* The photograph sits under everything. */ .card--photo > .card--photo__bg { z-index: 0; } /* --seagrass-bright, NOT --seagrass, and the reason is rule 18 one step further on. --seagrass is "on dark only", meaning on --deep-900 at full strength, where it measures 7.25:1. Here it sits on a TRANSLUCENT wash over an unknown photograph, and against a pure white pixel it measures 3.15:1 — a fail on 4.5. --seagrass-bright is the palette's existing on-dark emphasis step and clears it. Same two-token construction as --coral/--coral-bright in the header, for the same reason: one value cannot serve both a solid surface and a translucent one. */ .card--photo .card--field__cat { color: var(--seagrass-bright); } .card--photo h3, .card--photo .h3 { color: var(--txt-light); margin-top: var(--s-3); } .card--photo p { color: var(--txt-light); } .card--photo .btn--quiet { color: var(--txt-light); border-color: var(--edge-light); } .card--photo:hover .btn--quiet { color: var(--hover-lume); border-color: var(--hover-lume); } /* A post with no cover keeps the same shape and just shows the deep surface — no empty frame, no shorter card breaking the row. */ .card--photo--none { background: var(--deep-800); } /* The photograph lifts very slightly with the card. Purely decorative, so it goes when the reader has asked for less movement. */ @media (prefers-reduced-motion: no-preference) { .card--photo__bg img { transition: transform 1.2s var(--ease); } .card--photo:hover .card--photo__bg img { transform: scale(1.04); } } /* The live count under the chips, and the all-filtered-out message. `.empty` happens to set no `display` today, so `hidden` works on it — but this element is toggled by the same code that the card's missing `[hidden]` rule caught out, and a `display` added to `.empty` later would break it in exactly the same silent way. Stated, not left to luck. */ .filter-count { margin-top: var(--s-4); } .empty--filter { margin-top: var(--s-5); } .empty--filter[hidden] { display: none; } /* ---------- Tables ---------- */ .table-wrap { margin-block: var(--s-5); } .table--data { font-size: .95rem; } .table--data thead th { font-family: var(--font-mono); text-transform: uppercase; font-size: .72rem; letter-spacing: .16em; font-weight: 500; text-align: left; color: var(--txt-ink-dim); padding: 10px 14px; border-bottom: 1.5px solid var(--edge-ink); } .table--data td { padding: 14px; border-bottom: 1px solid var(--line-ink); vertical-align: top; } .table--data tbody tr:nth-child(odd) { background: var(--shell-3); } .table--data .is-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* A TWO-COLUMN TABLE MUST NOT SPAN THE WHOLE SHELL. `table { width: 100% }` in the reset is right for a dense table and wrong for a sparse one: the equipment rental list is a label and a price, so at 1440 "Buoyancy Control Device (BCD)" sat 1,100px from its own "£20" and the eye had to cross the page to pair them. Six rows of that, held together only by the zebra stripe. Capped at a width where the row reads in one fixation. Matched by shape rather than by a modifier class — `th:nth-child(2)` that is also `:last-child` is a header row with exactly two cells — so the rule is self-maintaining and cannot be forgotten on a future two-column table. It matches exactly one table on the site today (equipment rental); the 3-, 4-, 5- and 8-column tables are dense and keep the full width. 640 against a measured 520 wrap point for the longest item, so a longer item name from the CMS has room before it breaks. Inert below 720px, where the table is already stacked into definition rows. */ .table--data:has(thead th:nth-child(2):last-child) { max-width: 640px; } .section--deep .table--data thead th { color: var(--txt-light-dim); border-bottom-color: var(--edge-light); } .section--deep .table--data td { border-bottom-color: var(--line-light); } .section--deep .table--data tbody tr:nth-child(odd) { background: var(--deep-800); } /* A link in a data cell has to LOOK like a link. The "Itinerary" links on /liveaboard/schedules carry `.note`, which is deliberately quiet grey mono for captions, so the only thing marking fifteen of them as tappable was that they happened to be anchors. Site convention for a link in running text is --seagrass-deep + underline (`.prose a`), so they get that. Not scoped to mobile — it was just as invisible on desktop; the mobile half of the fix is the 44px target in the stacked block below. */ .table--data td a { color: var(--seagrass-deep); text-decoration: underline; text-underline-offset: .16em; } .section--deep .table--data td a { color: var(--seagrass); } /* Stack into definition rows on small screens. A price table must NEVER horizontal-scroll on a phone (plan/03 §4, §9). */ @media (max-width: 720px) { .table--data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .table--data tr { display: block; border: 1px solid var(--line-ink); border-radius: var(--r-sm); padding: var(--s-3); margin-bottom: var(--s-3); background: var(--shell-2); } .table--data tbody tr:nth-child(odd) { background: var(--shell-2); } .table--data td { display: flex; gap: var(--s-4); justify-content: space-between; align-items: baseline; border: 0; padding: 6px 0; text-align: left; } /* A link inside a stacked cell is the smallest target on the site: the "Itinerary" links on /liveaboard/schedules measured 71×19px, below even WCAG 2.2's 24px minimum, and there are fifteen of them. The cell is a flex row, so stretching the link to 44px costs nothing horizontally and the text stays optically on the same baseline as its label. */ .table--data td a { display: inline-flex; align-items: center; min-height: 44px; } .table--data td:has(a) { align-items: center; } .table--data td::before { content: attr(data-label); font-family: var(--font-mono); text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; color: var(--txt-ink-dim); flex: none; } .table--data .is-num { text-align: right; } .section--deep .table--data tr, .section--deep .table--data tbody tr:nth-child(odd) { background: var(--deep-800); border-color: var(--deep-600); } } /* ---------- Forms ---------- */ /* `--s-4` between fields rather than `--s-5`. The gap between one field and the next is the other half of "the forms are too large": on a 30-field form the spacing costs more height than the controls do. The label-to-control gap stays at 6px — tightening that pair is what makes a label look detached from the box it names. */ .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } /* Ayo Raja Ampat Divers' `.field > label`, value for value: mono, .7rem, .12em, uppercase, weight 500. The owners chose it after seeing the two form vocabularies side by side. `:not(.field--check)` IS LOAD-BEARING. A checkbox row carries `.field` too, and its label is a full sentence — a consent line, a rental item, a radio choice. Setting those in uppercase mono at 11px would be unreadable, and the existing `.field--check label { font-weight: 400 }` only wins on WEIGHT (equal specificity, later in the file), so the face and the transform would still have landed on them. */ .field:not(.field--check) > label { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-ink); } /* An on-light token needs all three dark surfaces, every time — the failure this file records for `.note`, `.btn--quiet`, `.eyebrow--light` and `.todo`. The label had no colour of its own before, so it inherited and this is the first time it can be wrong. */ .section--deep .field:not(.field--check) > label, .cta-full .field:not(.field--check) > label, .site-footer .field:not(.field--check) > label { color: var(--txt-light); } /* Ayo's hint: the BODY face at .8rem, not mono. `text-transform`/`letter-spacing` are reset explicitly because the label above them is now uppercase and tracked. THE COLOUR IS DELIBERATELY NOT AYO'S: they set `--txt-ink` at `opacity: .72`, which composites to 3.81:1 on this cream and fails AA for text this size. `--txt-ink-dim` measures 7.15:1 and is what a hint is read at here. The 60ch cap stays (hints ran to 111ch on /apply). Note it is no longer 60 literal characters — `ch` is the advance of "0", so in the proportional face 60ch renders about 67 characters. Still inside the measure, and narrower than prose at 68ch. */ .field .hint { font-family: var(--font-body); font-size: .8rem; color: var(--txt-ink-dim); text-transform: none; letter-spacing: 0; max-width: 60ch; } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field input[type="number"], .field input[type="password"], .field select, .field textarea { background: var(--shell-2); border: 1.5px solid var(--edge-ink); border-radius: var(--r-sm); /* 10px, not the 14px this shipped with. The owners' note was that the forms are too large, and a 52px control is what a long form is mostly made of — the booking form alone stacks 30 of them. This lands them at 46px, which still clears rule 21's 44px floor with room, so it is a size change and never a target-size regression. Do not take the padding below 10px: at 8px the box measures 42px and fails. THE FONT SIZE IS NOT PART OF THIS. 16px is the iOS zoom floor, not a taste decision — anything smaller makes Safari zoom the page on focus. */ padding: 10px 14px; font-size: 16px; width: 100%; /* DECLARED, NOT ARITHMETIC. At this padding a