so it never touches .stills, whose own opacity is driven by the hover state. */ .timeline.is-armed .yr > p { opacity: 0; transform: translateY(14px); } .timeline.is-ready .yr > .yr__no, .timeline.is-ready .yr > .yr__year { opacity: 1; transform: none; transition: opacity 620ms ease, transform 620ms cubic-bezier(.22,.9,.24,1); } .timeline.is-ready .yr > .yr__sub, .timeline.is-ready .yr > .yr__enter { transform: none; } .timeline.is-ready .yr:nth-child(1) > p { transition-delay: 0ms; } .timeline.is-ready .yr:nth-child(2) > p { transition-delay: 70ms; } .timeline.is-ready .yr:nth-child(3) > p { transition-delay: 140ms; } .timeline.is-ready .yr:nth-child(4) > p { transition-delay: 210ms; } .timeline.is-ready .yr:nth-child(5) > p { transition-delay: 280ms; } .timeline.is-ready .yr:nth-child(6) > p { transition-delay: 350ms; } .timeline.is-ready .yr:nth-child(7) > p { transition-delay: 420ms; } .timeline.is-ready .yr:nth-child(8) > p { transition-delay: 490ms; } .timeline.is-ready .yr:nth-child(9) > p { transition-delay: 560ms; } .timeline.is-ready .yr:nth-child(10) > p { transition-delay: 630ms; } /* the plates, stacked above the rule until the year is pointed at */ .stills { position: absolute; left: 0; bottom: calc(100% + 1.5rem); width: clamp(9rem, 13vw, 12.5rem); } .stills img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--bone); box-shadow: 0 1px 0 rgba(38,37,31,.06); opacity: 0; transform: translateY(26px) rotate(0deg); transition: opacity 480ms ease, transform 620ms cubic-bezier(.22,.9,.24,1); } .yr.is-open .stills img { opacity: 1; } .yr.is-open .stills img:nth-child(1) { transform: translate(0, 0) rotate(-2.4deg); transition-delay: 0ms; } .yr.is-open .stills img:nth-child(2) { transform: translate(5.5rem, -2.25rem) rotate(2.1deg); transition-delay: 90ms; } .timeline__hint { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); } @media (max-width: 56rem) { .timeline { padding-top: clamp(11rem, 26vh, 15rem); } .yr { width: 14rem; } .stills { width: 7.5rem; } } /* ============================================================ 12. AN ERA PAGE The plate, at web scale. Set in that era's own typeface, because the decade's voice is part of what is being shown. ============================================================ */ .era-title { margin: 0; font-family: var(--era-display), var(--serif); font-weight: 400; /* exception: the decade's own face at its own plate size, one per page */ font-size: clamp(2.5rem, 7vw, var(--era-size, 5.5rem)); line-height: 1; letter-spacing: var(--era-track, 0); } .era-sub { margin: 0.625rem 0 0; font-family: var(--serif); font-style: italic; font-size: var(--t-d3); color: var(--stone-ink); } .era-body { font-family: var(--era-body), var(--sans); } /* the record line under a plate */ .record { border-top: 1px solid var(--rule); padding-top: 0.875rem; } .record__line { margin: 0.625rem 0 0; font-family: var(--era-display), var(--serif); font-size: var(--t-d3); line-height: 1.35; max-width: 34ch; } .record__meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); } /* the lettered and numbered callouts, as they read on plate B */ .callout { list-style: none; margin: 0.875rem 0 0; padding: 0; } .callout li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.875rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .callout .k { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.06em; color: var(--camel-ink); } .callout .v { font-family: var(--era-body), var(--sans); font-size: var(--t-meta); color: var(--set); } /* the six statements the room was making */ .statements { display: grid; gap: 0; border-top: 1px solid var(--rule); } @media (min-width: 46rem) { .statements { grid-template-columns: repeat(3, 1fr); } } .statements > div { padding: 1.125rem 1.25rem 1.125rem 0; border-bottom: 1px solid var(--rule); } @media (min-width: 46rem) { .statements > div { border-right: 1px solid var(--rule); } .statements > div:nth-child(3n) { border-right: 0; } .statements > div:not(:nth-child(3n+1)) { padding-left: 1.25rem; } } .statements .l { margin: 0; font-size: var(--t-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--camel-ink); } .statements .v { margin: 0.5rem 0 0; font-family: var(--era-display), var(--serif); font-size: var(--t-d3); line-height: 1.4; } .plate-fig { margin: 0; } .plate-fig img { width: 100%; height: auto; border: 1px solid var(--rule); background: var(--bone); } .plate-fig figcaption { margin-top: 0.5rem; font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-ink); } /* previous and next decade */ .eranav { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--char); } .eranav a { padding: 1.5rem 0; } .eranav a:last-child { text-align: right; padding-left: 1.5rem; } .eranav .t { margin: 0.5rem 0 0; font-family: var(--serif); font-size: var(--t-d3); } .eranav a:hover .t { color: var(--camel-ink); } /* ============================================================ 13. COLUMNS Long form runs across the whole page in newspaper columns rather than sitting in one narrow strip with half the sheet empty. The column count is set by measure, not by number, so it lands on four on a wide screen and one on a phone without any breakpoints. ============================================================ */ .cols { /* A column always starts on a new paragraph, never mid-sentence. That is what break-inside does. The count is passed in per block as --cols and capped by column-width, so a three paragraph section makes three columns rather than four with one left empty, and a phone makes one. */ column-count: var(--cols, 3); column-width: 15rem; column-gap: clamp(1.25rem, 2.4vw, 2.25rem); column-rule: 1px solid var(--rule); font-family: var(--era-body, var(--serif)); font-size: var(--t-read); line-height: 1.6; color: var(--char); } .cols p { margin: 0 0 1.0625rem; break-inside: avoid; -webkit-column-break-inside: avoid; } .cols p:last-child { margin-bottom: 0; } .strip .cols { color: var(--on-navy); column-rule-color: var(--rule-navy); } /* the serif reading variant, for pages with no era face of their own */ .cols--serif { font-family: var(--serif); } /* ============================================================ 14. THE TIMELINE SCROLLBAR Always visible. Without it there is no way to know the century runs to the right, and a hidden native bar tells you nothing. Draggable, clickable, and it doubles as a progress read. ============================================================ */ .tlbar { position: relative; height: 3px; margin-top: 1.5rem; background: var(--rule); cursor: pointer; touch-action: none; } .tlbar__thumb { position: absolute; left: 0; top: -1px; height: 5px; background: var(--camel); min-width: 2.5rem; transition: background 150ms ease; } .tlbar:hover .tlbar__thumb, .tlbar.is-dragging .tlbar__thumb { background: var(--char); } .tlbar__ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.625rem; } /* ============================================================ 15. THE ROSE A four point navigation star, tall on the vertical axis, standing in the middle of the principles band with its north and south points breaking out through the top and bottom edges into the sections either side. The four principles sit close in around the waist. The layering is the whole trick. A section background paints early and a section's plain text paints just after it, and there is no z-index that lands between the two. So every section's content is lifted into a positioned layer at z-index 1. The star used to sit at 0, above every background it crossed and below every word. On desktop it now sits at 3, above both, so the rules in the section below stop striping across it. See the note on the star itself. Because the points cross both grounds, the star is drawn in gold on both halves rather than bone. Bone would be invisible the moment a point left the navy. ============================================================ */ main > section > * { position: relative; z-index: 1; } .rose-band { position: relative; min-height: clamp(30rem, 68vh, 46rem); display: grid; align-content: center; } /* Equal arms. All four points leave the band: north and south through the top and bottom edges, east and west out past the text columns to the page edges. Sized by width so the horizontal reach is the fixed thing; the vertical bleed follows from it. An earlier version elongated the vertical axis so the horizontal points would not collide with the copy. That was solving a problem that does not exist here, because the star is already beneath every word on the page, and it produced a dagger rather than a compass. */ .rose__star { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(104vw, 88rem); height: auto; transform: translate(-50%, -50%); pointer-events: none; } /* The star is opaque, and these are the two colours it is opaque IN. It used to be gold at 60% with a 50% hairline, which on the navy band composited to exactly these values. That worked while the star was a window: over navy it looked like this, and nowhere else mattered. It stops working the moment the star is meant to be an object sitting on top of the page, because a translucent point lets the column rules and the paper show straight through it and the whole illusion of height goes. So the composite is baked: #806f58 is var(--gold) at 0.6 over var(--navy), and #6e6254 is the same gold at 0.5. On the band nothing changes by a single pixel, which is the point. Everywhere else the point now carries the middle's colour instead of thinning out against whatever is behind it. Neither --gold nor --navy is remapped for night, so both hold in both themes. */ .rose-band { --rose-face: #806f58; --rose-edge: #6e6254; } .rose__solid { fill: var(--rose-face); fill-opacity: 1; } .rose__hair { fill: none; stroke: var(--rose-edge); stroke-width: 2; stroke-opacity: 1; } /* ------------------------------------------------------------ THE STAR AS AN OBJECT, not a window Four of the eight triangles were unfilled, which is what gives a compass rose its two-tone face. Unfilled means they show whatever is behind them, so inside the band they read as navy and the instant a point crossed onto the paper the same triangle turned bone. The star looked cut off at the band edge because it was: it was never carrying its own colour. Filling them with navy makes the whole silhouette opaque, so the star keeps its blue-and-gold face the entire way through, over the paper as well as over the band. Inside the band nothing changes at all, because navy on navy is what was already showing. Once it is opaque it can be lifted over the rules that used to stripe across it: the caption hairline and the column dividers in the four refusals below. Those are borders on elements the layering rule holds at z-index 1, so there is no way to hide them other than to put the star above. That does mean the star is now above every word as well, which is only safe because its points fall in the gutters. Checked at 1280, 1440 and 1920: it crosses no text at any of them. Desktop only. Below 62rem the star is not a bleed at all, it is a small static mark sitting on navy, where a navy fill would be invisible and a drop shadow would be a smudge. ------------------------------------------------------------ */ @media (min-width: 62.0625rem) { .rose__hair { fill: var(--navy); fill-opacity: 1; } .rose__star { z-index: 3; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45)) drop-shadow(0 34px 64px rgba(0, 0, 0, 0.30)); } } .rose { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); } .rose__q { align-content: start; } .rose__q h3 { max-width: 17ch; } .rose__q .set { max-width: 30ch; } @media (max-width: 62rem) { /* On one column there is no middle for a compass to sit in the middle of. Blown up to 150vw behind the stack it stopped being a mark and became a dark smear with the copy sitting on its arms. So below the two-column breakpoint it stops being a background and becomes what it is: a mark, small, centred, at the head of the four points it belongs to. */ .rose-band { display: block; } .rose__star { position: static; transform: none; display: block; width: clamp(4.5rem, 20vw, 7rem); margin: 0 auto clamp(2.25rem, 8vw, 3.25rem); opacity: 1; } /* and the four become a register: a numeral, a rule, and the point. Capped and centred, because one column across a tablet runs the measure out to about ninety characters, which is half again what anyone reads comfortably. On a phone the cap is wider than the screen and does nothing. */ .rose { gap: 0; max-width: 38rem; margin-inline: auto; } .rose__q { padding-block: clamp(1.5rem, 5vw, 2rem); } .rose__q + .rose__q { border-top: 1px solid rgba(244, 239, 230, 0.16); } .rose__q:first-child { padding-top: 0; } .rose__q:last-child { padding-bottom: 0; } .rose__q h3, .rose__q .set { max-width: none; } } @media (min-width: 62rem) { .rose { grid-template-columns: 1fr 1fr; /* equal tracks so the row boundary lands exactly on the rose's centre. Without this the taller quadrant sets row one's height, the boundary drifts off centre, and the horizontal arms cut through copy. */ grid-template-rows: 1fr 1fr; column-gap: clamp(5.5rem, 10vw, 9.5rem); row-gap: clamp(4.5rem, 9vw, 8rem); } .rose__q--nw { grid-area: 1 / 1; } .rose__q--ne { grid-area: 1 / 2; } .rose__q--sw { grid-area: 2 / 1; } .rose__q--se { grid-area: 2 / 2; } /* Both sides have to hug the star equally. The columns are equal, but the copy inside them is left aligned, so without this the left blocks sit against the far edge of their column while the right blocks sit against the gap: one side a quarter of the page from the centre, the other touching it. The block is pushed to the column's inner edge; the text inside it stays left aligned, because that is about reading, not composition. */ .rose__q--nw, .rose__q--sw { justify-self: end; } .rose__q--ne, .rose__q--se { justify-self: start; } .rose__q { max-width: 30ch; } /* Pushing the block to the inner edge was only half of it. Inside the block the type stayed left aligned, so the left pair met the star with a ragged edge while the right pair met it with a flush one, and the two sides read as different distances from the centre even though the boxes were symmetrical. The left pair now sets to the right, and every child with a max-width is pushed to the block's right edge, or an h3 capped at 17ch would align to 17ch from the wrong side. */ .rose__q--nw, .rose__q--sw { text-align: right; } .rose__q--nw > *, .rose__q--sw > * { margin-left: auto; } /* The headings run two lines or three depending on the principle, so the paragraph under a two line heading started a line above the paragraph next to it and the four blocks read as unaligned. Reserving three lines of heading puts every paragraph on the same line. Subgrid would express this better, but it needs each quadrant to span several parent tracks, and the rose's two rows have to stay equal or the boundary drifts off the star's centre and the horizontal arms cut through the copy. bin/check.py enforces that. Three lines it is: if a principle ever needs four, this number moves with it. */ .rose__q h3 { min-height: 3.75em; } /* 3 x the 1.25 line-height */ } /* ============================================================ 16. THE DRAWER Phone navigation. Five items do not fit across a 393px screen, so below tablet the nav row is replaced by a burger and the menu slides in from the left. Sized for an iPhone 14 Pro, 393 x 852. Every target in here clears 44px, which the desktop nav does not and cannot without wrecking the masthead. ============================================================ */ /* The drawer used to live entirely inside the phone breakpoint, because the burger was the only thing that could open it. The floating menu opens it at every width now, so the panel itself is unconditional and only the burger stays phone-only. Closed state is the `hidden` attribute, which a class selector would otherwise beat, hence the explicit [hidden] rule. */ .burger { display: none; } .drawer[hidden], .scrim[hidden] { display: none; } @media (max-width: 52rem) { .dochead__nav { display: none; } .burger { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3rem; padding: 0.5rem 0; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--rule); /* the burger IS the navigation on a phone, so it matches what the nav row became on a desktop rather than staying at the old caption size */ color: var(--nav-ink); cursor: pointer; font-family: var(--sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; } .burger__bars { display: grid; gap: 4px; width: 1.125rem; } .burger__word { line-height: 1; } .burger__bars i { display: block; height: 1px; background: var(--nav-ink); transition: transform 260ms ease, opacity 200ms ease; } .burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); } .burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } } .scrim { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(18, 22, 28, 0.5); opacity: 0; transition: opacity 320ms ease; } .scrim.is-open { opacity: 1; } /* left to right, and it holds its own scroll if the list ever grows */ .drawer { display: flex; flex-direction: column; position: fixed; z-index: 95; top: 0; bottom: 0; left: 0; width: min(20rem, 86vw); padding: max(1.25rem, env(safe-area-inset-top)) 1.5rem max(1.5rem, env(safe-area-inset-bottom)); background: var(--navy); color: var(--on-navy); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform 380ms cubic-bezier(.22, .9, .24, 1); } .drawer.is-open { transform: none; } .drawer:focus { outline: none; } .drawer__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-navy); } .drawer__top .micro { color: var(--on-navy); white-space: nowrap; } .drawer__top .micro b { color: var(--gold); font-weight: 500; } .drawer__close { min-height: 2.75rem; padding: 0 0.25rem; background: none; border: 0; color: var(--gold); font-family: var(--sans); font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; } .drawer__list { list-style: none; margin: 0; padding: 0; } .drawer__list a { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; align-items: baseline; min-height: 3.5rem; padding: 1rem 0; border-bottom: 1px solid var(--rule-navy); } .drawer__n { font-family: var(--mono); font-size: var(--t-label); color: var(--gold); } .drawer__t { font-family: var(--serif); font-size: var(--t-d3); line-height: 1.2; } .drawer__list a[aria-current="page"] .drawer__t { color: var(--gold); } .drawer__guide { display: block; margin-top: auto; padding-top: 1.5rem; } .drawer__guide .micro { color: rgba(237, 231, 218, 0.66); } .drawer__guide-t { margin: 0.5rem 0 0.375rem; font-family: var(--serif); font-size: var(--t-d3); color: var(--on-navy); } /* the sequence runs off transitions, so honour the setting properly */ @media (prefers-reduced-motion: reduce) { .drawer, .scrim, .burger__bars i, .fl { transition: none; } } /* the page must not scroll behind an open drawer */ body.is-locked { overflow: hidden; } /* ============================================================ 17. PHONE LEGIBILITY A phone gets read outdoors, one-handed, at whatever brightness the screen happens to be on. The mid tones that hold up on a monitor go milky in daylight, so the secondary text darkens below tablet. Tokens only. Nothing here changes a rule, so the composition is identical and only the ink gets heavier. ============================================================ */ @media (max-width: 52rem) { :root { --set: #33312b; /* was #4a473f. 11.4:1 on bone, up from 8.0 */ --stone-ink: #4f4b45; /* was #6f6a5f. 7.6:1, up from 4.7 */ --camel-ink: #5f4829; /* was #7f6339. 7.5:1, up from 4.9 */ --stone-lift: #b3ada0; /* secondary on navy, lifted for the same reason */ } /* Poppins at 300 is thin on a phone. One step up costs nothing and it is the single biggest readability gain outdoors. */ body { font-weight: 400; } .set, .ruled p, .disclosure, .reg--wide .reg__m { font-weight: 400; } } /* ============================================================ 18. THE ROOM PAGES Twelve pages, one per room, carrying a chapter of the guide in full. The whole point is that a man searching "what to wear to a funeral" lands on something he can read, rather than on a download. The download itself sits at the top right and the bottom right, so it is in reach whether he has decided in ten seconds or read the lot. ============================================================ */ /* the header: title left, download right, and they stack on a phone */ .rm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem clamp(1.5rem, 4vw, 3rem); } .rm-h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); } .rm-dl { margin: 0; flex-shrink: 0; } .rm-what { font-size: var(--t-d3); font-family: var(--serif); color: var(--set); } .rm-top .kick a { color: inherit; border-bottom: 1px solid var(--rule-2); } .rm-top .kick a:hover { color: var(--camel-ink); } /* the plates. Navy sheets on bone paper, so they carry their own edge. */ .rm-plate { margin: 0; } .rm-plate + .rm-plate { margin-top: var(--colgap); } @media (min-width: 56rem) { .rm-plate + .rm-plate { margin-top: 0; } } .rm-plate img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-2); background: var(--navy); } .rm-plate figcaption { margin-top: 0.625rem; color: var(--stone-ink); } /* the chapter itself */ .rm-body { max-width: 46rem; } .rm-sec { padding-block: clamp(1.5rem, 3.5vw, 2.25rem); } .rm-sec + .rm-sec { border-top: 1px solid var(--rule); } .rm-sec__h { margin: 0 0 0.75rem; } .rm-sec__b { font-family: var(--serif); font-size: var(--t-read); line-height: 1.62; color: var(--char); } .rm-sec__b > * { margin: 0; } .rm-sec__b > * + * { margin-top: 1rem; } .rm-lede { font-size: var(--t-d3); line-height: 1.35; } .rm-q { margin: 1.25rem 0 0; padding-left: 1.125rem; border-left: 2px solid var(--camel); font-style: italic; color: var(--set); } /* How to act is a list of pairs, so it is set as one */ .rm-acts { display: grid; gap: 1.125rem; } /* a label and its instruction are one thing. Do not let a print or a column split them apart. */ .rm-act { break-inside: avoid; margin: 0; } /* Set the way the guide sets it: the label opens the sentence, inline, in the same serif, italic. The copy is written to continue out of it, so "Listen for the question behind the question" is one sentence and the lowercase word after the label is correct. It used to be sans, uppercase, on its own line. That turned every one of these into a heading followed by a paragraph that appeared to start in lowercase, which reads as a typo. It was also the only place on a room page where a label above a paragraph did not capitalise what followed. */ .rm-act__k { font-style: italic; color: var(--char); } /* previous and next, because twelve rooms should feel like one thing */ .rm-near { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); } @media (min-width: 42rem) { .rm-near { grid-template-columns: 1fr 1fr; } } .rm-near__a { display: grid; gap: 0.35rem; padding: 1.25rem 0.25rem; background: var(--bone); text-decoration: none; color: inherit; transition: background 0.2s ease; } .rm-near__a:hover { background: var(--bone-2); } .rm-near__a--n { text-align: left; } @media (min-width: 42rem) { .rm-near__a--n { text-align: right; padding-inline: 0.25rem; } } .rm-near__t { font-family: var(--serif); font-size: var(--t-d3); } /* ============================================================ 19. NIGHT PAPER Dark mode is not a grey theme. The ground is the charcoal ink deepened, so it reads as the same paper at night, and the navy strips do not move at all. A navy plate on navy paper has nothing to sit against, and the twenty-four plates are the one asset here nothing else has. It is nothing but a token flip. That is deliberate: it is what lets the same values serve the system setting and the reader's own choice without a single rule being written twice. Sections 1 through 18 never learn that dark mode exists. Three ways in, in order of authority: data-theme="dark" the reader chose night data-theme="light" the reader chose day, and it beats the system the system setting when the reader has expressed no preference ============================================================ */ :root { /* the night values, written once */ --dk-bone: #14130e; /* the char hue deepened, not a neutral grey */ --dk-bone-2: #1a1913; --dk-rule: #34322a; --dk-rule-2: #47443a; --dk-char: #efe9dd; /* what was the ground is now the ink */ --dk-set: #cdc7b8; --dk-stone: #a09a8c; --dk-stone-ink: #a8a294; /* camel is a dark brown and disappears on dark paper. Gold, already the accent on every navy ground, takes over. */ --dk-camel: #c9a268; /* The same 0.955 veil that makes the mark a whisper on bone lets it shout here, because a bone mark against near black is a far bigger jump than a charcoal mark against bone. */ --dk-wm-paper: rgba(20, 19, 14, 0.975); --dk-wm-paper-2: rgba(26, 25, 19, 0.972); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bone: var(--dk-bone); --bone-2: var(--dk-bone-2); --rule: var(--dk-rule); --rule-2: var(--dk-rule-2); --char: var(--dk-char); --set: var(--dk-set); --stone: var(--dk-stone); --stone-ink: var(--dk-stone-ink); --camel: var(--dk-camel); --camel-ink: var(--dk-camel); --on-navy: var(--dk-char); --nav-ink: var(--dk-char); --wm-mark: url("/assets/wm-light.png"); --wm-paper: var(--dk-wm-paper); --wm-paper-2: var(--dk-wm-paper-2); } } :root[data-theme="dark"] { --bone: var(--dk-bone); --bone-2: var(--dk-bone-2); --rule: var(--dk-rule); --rule-2: var(--dk-rule-2); --char: var(--dk-char); --set: var(--dk-set); --stone: var(--dk-stone); --stone-ink: var(--dk-stone-ink); --camel: var(--dk-camel); --camel-ink: var(--dk-camel); --on-navy: var(--dk-char); --nav-ink: var(--dk-char); --wm-mark: url("/assets/wm-light.png"); --wm-paper: var(--dk-wm-paper); --wm-paper-2: var(--dk-wm-paper-2); } /* ============================================================ 20. THE TOGGLE Day and night, in the register's own voice: a small mark and a word. The word says what the button will DO, not what is currently on, because a control labelled with its own state is the oldest confusion in interface design. It appears twice, in the nav row and in the phone drawer, because the nav row is not on screen below tablet. Both are driven by the same handler. ============================================================ */ .tog { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0 clamp(0.875rem, 2.4vw, 2.25rem); padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid transparent; font-family: var(--sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--nav-ink); cursor: pointer; } .tog:hover { border-bottom-color: var(--camel); } /* half filled, which is the universal mark for contrast and is drawn rather than borrowed from an emoji font that renders differently everywhere */ .tog__m { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); } [data-theme="dark"] .tog__m { transform: rotate(180deg); } /* the word swaps between Day and Night, so it is held to the width of the longer one and the row does not jump when it changes */ .tog__w { min-width: 3.4em; text-align: left; } /* Also unconditional now. Once the drawer is reachable from mid-page at any width, the header toggle has scrolled away, and the drawer is the only place left to change day or night. */ .drawer__tog { display: block; padding: 0.875rem 0 0; } .drawer__tog .tog { margin: 0; color: var(--on-navy); } .drawer__tog .tog:hover { border-bottom-color: var(--gold); } /* every decade, on every decade page */ .decades { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.875rem; } .decades a { font-family: var(--sans); font-size: var(--t-meta); font-weight: 400; letter-spacing: 0.06em; color: var(--stone-ink); padding-bottom: 2px; border-bottom: 1px solid transparent; } .decades a:hover { color: var(--char); border-bottom-color: var(--camel); } .decades a[aria-current="page"] { color: var(--char); border-bottom-color: var(--camel); } /* ============================================================ 21. CONSENT Clarity records sessions, so it does not start until the reader says yes. The notice sits at the foot of the page rather than across the middle of it: this site does not put anything between a man and what he came to read, and a modal that blocks the page would be the first thing to contradict the argument the page is making. Allow and No thanks are the same size, the same weight and one tab apart. A decline that is harder to reach than an accept is not a choice. ============================================================ */ .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482000; /* under the door, which lifts before this matters */ background: var(--bone-2); border-top: 1px solid var(--rule-2); padding: clamp(0.875rem, 2vw, 1.25rem) var(--pad); } .consent[hidden] { display: none; } .consent__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.875rem clamp(1.5rem, 4vw, 3rem); max-width: 72rem; margin-inline: auto; } .consent__t { margin: 0; max-width: 60ch; font-family: var(--sans); font-weight: 300; font-size: var(--t-meta); line-height: 1.55; color: var(--set); } .consent__acts { display: flex; gap: 0.75rem; margin: 0; flex-shrink: 0; } .consent__b { font-family: var(--sans); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.6875rem 1.25rem; cursor: pointer; background: none; color: var(--char); border: 1px solid var(--rule-2); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .consent__b:hover { border-color: var(--camel); color: var(--camel-ink); } .consent__b--yes { background: var(--char); border-color: var(--char); color: var(--bone); } .consent__b--yes:hover { background: var(--camel); border-color: var(--camel); color: var(--bone); } .docfoot__base a { border-bottom: 1px solid var(--rule-2); } .docfoot__base a:hover { color: var(--camel-ink); } /* cache key d88ce34b was poisoned at the edge during a deploy race. See bin/verify_live.py */ /* ============================================================ 22. THE FLOATING MENU The header is sticky in intent but not in fact: body { overflow-x: hidden } further up makes the body a scroll container and silently kills position sticky. Rather than unpick that, the navigation comes back on its own terms. Once the masthead is well off screen a navy pill rises out of the bottom margin, and pressing it widens the pill until the whole nav row is sitting inside it. Bottom centre, not top centre. Top centre is exactly where the text column is, and anything parked there cuts a hole through the middle of a sentence. The bottom margin is empty by construction and it is where a thumb already is on a phone. The width is animated, which is normally a bad idea, but it is one element with nothing beneath it in flow, and width is the whole effect: the row has to look like it came out of the pill rather than appearing over it. overflow: hidden is what makes that read, by clipping the row until there is room for it. ============================================================ */ .fl { position: fixed; left: 50%; bottom: 1.75rem; z-index: 80; /* set from the trigger's real width on load, so the collapsed pill is exactly as wide as its contents in whatever font actually rendered */ width: var(--fl-shut, 7rem); display: flex; align-items: center; background: var(--navy); color: var(--on-navy); border-radius: 999px; overflow: hidden; box-shadow: 0 6px 24px rgba(19, 35, 63, 0.28); opacity: 0; visibility: hidden; transform: translate(-50%, 2rem); transition: width 420ms cubic-bezier(.22, .9, .24, 1), transform 380ms cubic-bezier(.22, .9, .24, 1), opacity 300ms ease, visibility 380ms; } .fl.is-in { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .fl.is-open { width: min(78rem, calc(100vw - 2 * var(--pad))); } /* the trigger keeps its own width so the mark never shifts as the pill grows */ .fl__t { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 1.25rem 0.5625rem 0.875rem; background: none; border: 0; color: inherit; cursor: pointer; font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .fl__m { display: block; width: 1.75rem; height: auto; opacity: 0.95; } .fl__w { min-width: 3.2em; text-align: left; } .fl__t:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; } /* The row. visibility, not display, so it is out of the tab order and off the accessibility tree while it is shut without collapsing the layout the width animation is measured against. It fades in only once the pill has opened far enough to hold it, and leaves immediately on the way back. */ .fl__nav { display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; gap: clamp(0.875rem, 2.4vw, 2.25rem); padding-right: 1.5rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 180ms; } .fl.is-open .fl__nav { opacity: 1; visibility: visible; transition: opacity 240ms ease 180ms, visibility 240ms 180ms; } .fl__grp { display: flex; align-items: center; gap: clamp(0.875rem, 2vw, 2rem); } /* the nav row's own type, on navy instead of on paper */ .fl__nav a { font-size: 0.8125rem; letter-spacing: 0.13em; font-weight: 500; text-transform: uppercase; color: var(--on-navy); padding-bottom: 2px; border-bottom: 1px solid transparent; } .fl__nav a:hover, .fl__nav a[aria-current="page"] { border-bottom-color: var(--gold); } .fl__nav a[aria-current="page"] { color: var(--gold); } .fl__nav .tog { margin: 0; color: var(--on-navy); } .fl__nav .tog:hover { border-bottom-color: var(--gold); } /* At full size the row wants about 1130px, so on anything short of a large desktop it was being clipped by the pill's own overflow: hidden and the Night toggle simply fell off the end. It tightens instead of falling back, because falling back to the drawer on a 1200px laptop is not a desktop experience. Measured, not guessed: bin/check.py asserts it fits. */ @media (max-width: 82rem) { .fl__nav { gap: 1rem; padding-right: 1.125rem; } .fl__grp { gap: 1rem; } .fl__nav a { font-size: 0.75rem; letter-spacing: 0.09em; } } /* Below this even the tight row does not fit, so the pill goes back to being a button that opens the phone drawer. The JS reads the same breakpoint. This was 62rem until the Instagram link joined the row. The row got about 70px wider and stopped fitting on the narrowest desktops, so the fallback moved up rather than letting it clip. Measured, not guessed: bin/check.py has no eye for this, so brand/../fit probe does. */ @media (max-width: 69rem) { .fl.is-open { width: var(--fl-shut, 7rem); } .fl__nav { display: none; } } @media (max-width: 52rem) { .fl { bottom: max(1.25rem, env(safe-area-inset-bottom)); } } /* an open drawer means the pill has done its job */ body.is-locked .fl { opacity: 0; visibility: hidden; } /* On night paper the navy pill sits on near black and loses its edge, and a drop shadow does nothing on a dark ground. The gold hairline gives it a boundary instead. This is the one place dark mode needs more than the token flip, because the pill is the only navy element that floats over the paper rather than being a strip anchored to it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fl { border: 1px solid rgba(201, 162, 104, 0.42); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] .fl { border: 1px solid rgba(201, 162, 104, 0.42); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); } /* ------------------------------------------------------------ THE PRINCIPLES CAPTION "Four principles" is in the source copy and was the one band on this page with no label on it, which left the four points reading as decoration rather than as a numbered set. The words only. It started as the same ruled caption pair the section below uses, and the rule was too much: it drew a second horizontal across a band that already has the star's east and west points running through it. It cannot simply sit in the band's flow. The band centres its content on itself and the star is centred on the band, so anything added above the list pushes the list down and the row boundary stops landing on the star's waist, which is the alignment the whole composition hangs off. Pinned to the top instead, so the centring is untouched. Only above the two-column breakpoint. Below it the star is a small static mark at the head of the stack and the caption belongs in the flow, where it reads as the heading for the list that follows. ------------------------------------------------------------ */ .rose-band__cap { display: block; margin: 0 0 clamp(1.5rem, 5vw, 2rem); } /* Not gold. Every .micro on a navy strip goes gold by default, which put the label in the accent colour and made it read as a third voice next to the numerals. It takes the same value as the principle copy underneath it, so the label and the words it labels are the same ink. Kept in step with `.strip .set` above; if that value moves, this moves with it. .strip .micro is specificity 0,2,0, so this has to match it and sit later in the file, which it does. */ .strip .rose-band__cap { color: rgba(237, 231, 218, 0.74); } @media (min-width: 62.0625rem) { /* Getting this to line up with the caption in the section below it takes two corrections, both from the same cause: an absolutely positioned box is laid out against its ancestor's PADDING box, and this strip is a full-bleed band whose padding box is two page margins wider than an ordinary section's content box. So left:0 sat a whole --pad too far left, and .inset's percentage margin, resolved against that wider base, then added another 2*--pad/12 on top. The offset is written out here against the correct width instead, and .inset's margin is cancelled. Doubled selector because .inset.inset is specificity 0,2,0 and a single class cannot undo it. */ .rose-band__cap.rose-band__cap { position: absolute; left: calc(var(--pad) + (100% - 2 * var(--pad) - 11 * var(--colgap)) / 12 + var(--colgap)); right: calc(var(--pad) + (100% - 2 * var(--pad) - 11 * var(--colgap)) / 12 + var(--colgap)); top: clamp(1.75rem, 4vw, 3.25rem); margin-inline: 0; margin-bottom: 0; } } /* In the floating row the toggle is the mark alone. The word is dropped, not hidden from everyone: nav.js already keeps an aria-label on the button that says what pressing it will do, so a screen reader still gets "switch to night" while the row gets its space back. The mark grows a little to stay a real target once the word is gone. The drawn button is 30px, which clears the 24px pointer guideline, but this row shows from 1105px up and a large tablet in landscape is both that wide and a touch screen. So the hit area is pushed out to 44px with a pseudo element instead of padding, which would have made the pill taller. The gap to the Instagram link beside it is 14px at its tightest, so a 7px reach each side cannot steal its clicks. */ .fl__nav .tog__w { display: none; } .fl__nav .tog { gap: 0; padding: 0.5rem; margin-left: 0; border-bottom: 0; border-radius: 50%; } .fl__nav .tog__m { width: 0.875rem; height: 0.875rem; } .fl__nav .tog { position: relative; } .fl__nav .tog::after { content: ""; position: absolute; inset: -7px; } .fl__nav .tog:hover { background: rgba(237, 231, 218, 0.12); } .fl__nav .tog:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } /* A section caption that is also the section's heading. Promoting these from
to