for an when the real thing exists; the card metrics already fit. */ .slots{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px);margin-top:clamp(22px,2.6vw,32px); } @media (max-width:860px){.slots{grid-template-columns:1fr;max-width:560px}} /* Dashed frame AND a faint fill. Dashes alone on a dark slab are four grey lines around nothing, which is the definition of flat; the fill gives the slot a body so the grid still has three objects in it, just unfinished ones. */ .slot{ display:flex;flex-direction:column; padding:clamp(20px,2.2vw,26px); border:1px dashed color-mix(in srgb,var(--sand) 26%,transparent); background:color-mix(in srgb,var(--ox-2) 42%,transparent); } .slot h3{font-size:clamp(16.5px,1.5vw,19px);line-height:1.25;margin-bottom:.5em} .slot p{margin:0;flex:1;font-size:14.5px;line-height:1.55;color:var(--sand-2)} .slot .label{display:block;margin-bottom:12px} /* ---- PAGE HERO ----------------------------------------------------------- Header for /content ONLY now. /work and /courses used to share it and have moved to .photo-hero, the shared cream photographic hero in system.css, with every other top-of-page band on the site. /resources moved there too. /content did not, and the reason is the paragraph below: this is the one page whose hero is deliberately not a picture. Do not "finish the job" by converting it without asking — the channel-art header is recent and it is the way it is on purpose. Contour ground rather than a photograph. On /content the thumbnails underneath are already three competing pictures, so a fourth image up here was one more thing to look at before the videos; the topo gives the band depth without asking for any attention. Contrast is a property of the ground instead of a property of the crop, so the copy can sit anywhere in the band and there is no scrim to tune. The bottom edge dissolves into --brown, which is the ground of the video strip directly below (.sec.slab), so the header and the videos read as one block instead of a panel with a list parked under it. */ .page-hero{ position:relative;isolation:isolate;overflow:hidden; /* The radial is off-centre and warm so the band is lit from the top left and reads as a surface. Flat --ox-deep alone reads as a gap in the page. */ background: radial-gradient(86% 120% at 14% 0%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 64%), linear-gradient(148deg,var(--ox-2),var(--ox-deep)); padding:clamp(64px,8vw,118px) 0 clamp(78px,8vw,128px); } .page-hero::before{ content:"";position:absolute;z-index:-2;inset:0;pointer-events:none; /* Bled past the edges so the cover scale never lands a contour line exactly on the seam, where it would read as a border rather than terrain. The strokes in the file are already --sand, so no filter is needed here — unlike .cta, which inverts them to sit on the one light band. */ inset:-14% -10%; background:url(/assets/topo.svg) center/cover no-repeat; opacity:.28; } .page-hero::after{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none; /* Measured in px from the bottom, not percent — a percentage fade climbs into the headline as the section grows on a narrow viewport. */ background:linear-gradient(to top, var(--brown) 0px, color-mix(in srgb,var(--brown) 55%,transparent) 56px, transparent 128px); } .page-hero>.wrap{position:relative;z-index:1} .page-hero h1{max-width:16ch;margin:0} .page-hero p{ margin:18px 0 0;max-width:46ch; font-size:clamp(15.5px,1.5vw,17px);line-height:1.6;color:var(--sand-2); } .page-hero .btn{margin-top:clamp(24px,2.8vw,34px)} /* The strip owns the seam: the fade above lands on its ground, so a normal section gap here would reopen the join the dissolve exists to close. */ .vid-sec{padding-top:clamp(10px,1.4vw,18px)} /* ---- VIDEOS -------------------------------------------------------------- One row of thumbnails, nothing around them. No panel, no card fill, no border on the group — the stills are already three bright rectangles on a dark slab, and a frame around a picture that is doing its own work just adds a line to look at. The only chrome is the play disc and the runtime. LONG-FORM ONLY. Shorts are deliberately not listed here: they are 9:16, so they cannot share this row without being pillarboxed into stamps, and a second row for them turns a simple strip into a layout. They are one click away on the channel. FACADE, NOT AN IFRAME. A YouTube embed is roughly a megabyte of script and a set of third-party cookies, per video, on page load — for something most visitors never press. What ships is a local still and a play button; the iframe is built by /js/video.js on the first click. With no JS the same element is a plain link to the video on YouTube, which is the correct fallback: worst case the visitor watches it, just not here. Thumbnails are stored in /images/video/ rather than hotlinked from i.ytimg.com, so the page makes zero requests to Google before a click. They do NOT auto-update — re-pull the still when a video's thumbnail changes. */ .vid-row{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px);margin-top:clamp(22px,2.6vw,32px); } /* Two-up is skipped on purpose. These are 16:9, so a two-column row makes each still huge and the strip stops reading as a list of videos. */ @media (max-width:760px){.vid-row{grid-template-columns:1fr;max-width:460px}} /* ---- VIDEO FACADE ------------------------------------------------------- .vid-thumb / .vid-play / .vid-len and the .vid hover states moved to /css/system.css on 2026-10-09, so the homepage VSL could use them without loading this whole sheet. Nothing about them changed in the move beyond some em-dashes in the comments. Edit them there, never copy them back. .vid-row above stays here: it is the 3-up grid for this page, not part of the card. /js/video.js is what upgrades any .vid-thumb[data-yt] to a real player, and it is unchanged. */ /* ---- CHANNEL ROW --------------------------------------------------------- One framed row for the channel itself, above the videos, so the page opens with somewhere to actually go. */ .channel{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:18px clamp(20px,3vw,44px); margin-top:clamp(22px,2.6vw,32px);padding:clamp(20px,2.4vw,30px); border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); background: radial-gradient(130% 120% at 0% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 62%), var(--ox-2); } .channel h3{margin-bottom:.4em;font-size:clamp(19px,1.9vw,23px)} .channel p{margin:0;max-width:52ch;font-size:15px;line-height:1.58;color:var(--sand-2)} .channel .btn{flex:0 0 auto} /* ---- FOOT NOTE ----------------------------------------------------------- One plain sentence under a panel, for the things that aren't built. Said outright beats a shelf you can click that goes nowhere. */ .panel-note{margin-top:clamp(22px,2.6vw,32px);max-width:62ch;font-style:italic;color:var(--sand-2)} /* ---- HOW THIS LIBRARY WORKS ---------------------------------------------- Two columns of plain prose. No cards, no icons. */ /* No background: the tab section above is the --brown slab now, so this sits back on the page ground. Two brown bands in a row would undo the whole point of giving the library its own field. */ .stance-g{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,48px);margin-top:clamp(26px,3vw,38px)} @media (min-width:760px){.stance-g{grid-template-columns:1fr 1fr}} .stance h3{font-size:clamp(18px,1.8vw,21px)} .stance p{max-width:52ch}