/* =================================================================== STILLS — the whole site, one stylesheet =================================================================== FOUR COLOURS, AND THEY ARE GIVEN. There is no fifth, and mixing one is how this stops looking like itself. --bg #0D0D0D the ground. --white #D9D9D9 type on the ground, and the menu's own ground. --black #1E1E1E type on the white, and any raised surface. --orange #EB5E28 used about twice per screen. never as a fill behind body copy, never as a heading colour. Everything else in :root is one of those four at an alpha, which is why there are no other hex literals below this block. If you are about to write one, you want an alpha of an existing token instead. TWO FACES. Young Serif display only — the hero, page titles, section heads, the two buttons, the word "menu". Lowercase where it can be. Weight 300. Heming everything else — body, metadata, the menu index, forms, the footer. 300–700. THE HOMEPAGE DOES NOT SCROLL AND THE OTHER PAGES DO. That split is deliberate and it is the one structural rule here: body.home height:100svh, overflow:hidden. One composition. body normal document flow. Long pages are allowed. So `.home` owns `.stage` (a two-column grid that fills the viewport exactly once) and everything else owns `.sheet` (a scrolling column). The bar and the menu are identical on both. GLYPH WARNING (see fonts.css): the codepoints for middot, copyright, section, ellipsis, bullet, degree and one-half render as BLANK SPACE in Heming and the browser will not fall back. Never type them. Every separator here is a drawn box, a rule, or an em dash. CAREFUL WITH BARE `span` RULES. kern.js wraps every capital D in the document in at DOMContentLoaded. A rule like `.foo span{display:block}` lands on one and splits the word it is inside. Use a child combinator or a class. =================================================================== */ :root{ --bg:#0D0D0D; --white:#D9D9D9; --black:#1E1E1E; --orange:#EB5E28; /* The white, stepped down. EVERY STEP IS SET BY A MEASURED CONTRAST RATIO, not by eye — these are the numbers against #0D0D0D: --white-70 7.1:1 body copy --white-52 5.4:1 labels and small caps (was .52 = 4.3, under AA) --white-38 4.7:1 fine print (was .38 = 2.9) The names are kept so nothing has to be renamed; the alphas moved. If you lighten the ground, re-run these before trusting them. */ --white-70:rgba(217,217,217,.70); --white-52:rgba(217,217,217,.60); --white-38:rgba(217,217,217,.55); --rule:rgba(217,217,217,.15); --rule-soft:rgba(217,217,217,.08); /* The menu turns the palette over: white as ground, black as type. */ /* And the same on the sheet, against #D9D9D9: --black-64 5.5:1 body copy (was .64 = 4.4, under the 4.5 AA floor — this is the one that mattered, it is every paragraph on every reading page) --black-40 4.9:1 labels and fine print (was .40 = 2.3) The two dim steps end up close to the body value, and that is the point: 11px small caps have to clear 4.5:1 like anything else, so the hierarchy is carried by size, case and tracking rather than by fading the text until it stops being readable. */ --black-64:rgba(30,30,30,.72); --black-40:rgba(30,30,30,.68); --black-rule:rgba(30,30,30,.16); /* SAFE AREAS. Every page is laid out edge to edge under viewport-fit=cover, so on a notched iPhone the bar sits beneath the status bar and the fine print beneath the home indicator unless these are added. env() is 0 everywhere else, so it costs nothing. */ --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); --pad:clamp(22px,6.6vw,118px); --edge:clamp(12px,2.2vw,38px); /* The reading column. Title and body share its left edge, which is what stops a centred column under a left-bleeding masthead reading as an accident. */ --measure:680px; --round:clamp(14px,1.6vw,26px); --bar:clamp(64px,7.2vw,104px); /* One curve, everywhere. Long tail, no overshoot — this site never bounces, it settles. */ --ease:cubic-bezier(.16,.84,.28,1); --ease-panel:cubic-bezier(.62,.02,.16,1); } *{box-sizing:border-box} /* iOS paints a translucent blue box over anything tappable. On a page this dark it reads as a rendering fault rather than as feedback. */ a,button,summary,label,input,select,textarea{-webkit-tap-highlight-color:transparent} /* SMOOTH SCROLL, AND THE PADDING THAT MAKES IT LAND RIGHT. `.bar` is fixed to the top, so a jump to #main or to any in-page anchor would otherwise put the first line of the target underneath it. scroll-padding reserves the bar's own height plus the notch inset, so the thing you asked to see arrives below the furniture rather than behind it. Turned off again under prefers-reduced-motion at the foot of this file: an animated scroll is motion, and that setting is the reader saying no to motion. */ html{ background:var(--bg);-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + var(--safe-t) + 12px); } body{ margin:0;background:var(--bg);color:var(--white); font-family:var(--heming);font-weight:400;font-size:16px; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } /* The homepage, and only the homepage. */ body.home{height:100svh;overflow:hidden} a{color:inherit;text-decoration:none} img,video{display:block;max-width:100%} button,input,textarea,select{font:inherit;color:inherit} h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote,fieldset{margin:0;padding:0} ul,ol{list-style:none} ::selection{background:var(--orange);color:var(--white)} .skip{position:fixed;z-index:200;left:20px;top:-80px;background:var(--white);color:var(--black);padding:15px 22px;font-size:13px} .skip:focus{top:20px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{ outline:2px solid var(--orange);outline-offset:5px;border-radius:1px; } /* =================================================================== THE BAR — wordmark centred, one control at the right. Identical on every page. Fixed, and it never grows a background: on the scrolling pages the type simply passes behind it, which is the intent. =================================================================== */ .bar{ position:fixed;z-index:70;top:0;left:0;right:0; height:calc(var(--bar) + var(--safe-t));padding-top:var(--safe-t); display:flex;align-items:center;justify-content:center; padding-left:calc(var(--pad) + var(--safe-l)); padding-right:calc(var(--pad) + var(--safe-r)); pointer-events:none; } .bar>*{pointer-events:auto} /* The wordmark is a greeting, not a permanent fixture. stills.js adds `gone` once the page has moved; the trigger stays, because it is the only route to the rest of the site. */ .mark{transition:opacity .4s var(--ease)} .bar.gone .mark{opacity:0;pointer-events:none} .mark{position:relative;width:clamp(84px,6.6vw,116px);line-height:0} .mark img{width:100%;height:auto} /* Two wordmarks, one shown at a time. Swapping `src` in script flashes the old bitmap while the new one decodes; both being in the document means the change is a repaint, not a fetch. */ .mark .m-dark{position:absolute;inset:0;opacity:0;transition:opacity .3s ease} /* THE WORDMARK IS 21 PIXELS TALL and it is the only way home from every page on the site. As a thumb target that is a quarter of what it needs to be, and on a phone the two links in the bar are the whole of the navigation. The hit area is grown with a pseudo-element rather than with padding, because `.m-dark` is positioned `inset:0` against this box — padding would stretch the black cut to the padded height while the white one kept its own, and the two wordmarks would no longer sit on top of each other. This adds 44px of reachable height, centred, and changes no layout at all. It inherits `pointer-events:none` from `.bar.gone .mark`, so once the mark has faded on scroll the invisible target goes with it rather than leaving a dead spot at the top of the page. */ .mark:after{ content:"";position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:44px; } .bar.on-light .m-dark{opacity:1} .bar.on-light .m-light{opacity:0} .mark .m-light{transition:opacity .3s ease} .bar.on-light .burger{color:var(--black)} .burger{ position:absolute;right:var(--pad);top:50%;translate:0 -50%; width:38px;height:38px;display:grid;align-content:center;gap:7px; border:0;background:none;padding:0;cursor:pointer;color:var(--white); transition:color .3s ease; } .burger>i{display:block;height:2px;background:currentColor} /* =================================================================== THE MENU — six items, right-aligned, on paper. It opens WITHOUT JAVASCRIPT. The trigger is an and `:target` opens the panel; stills.js then upgrades it to a button so the URL does not collect a hash. Do not turn the trigger into a plain