/* MultiMichel — homepage styles. All visual values come from tokens.css. */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;background:var(--rail)} /* The ground is white. The paper canvas is an inner column inset by --rail-width on both sides, so white shows down each edge for the full height of the page. The contrast break is deliberate. */ body{ background:var(--paper); border-left:var(--rail-width) solid var(--rail); border-right:var(--rail-width) solid var(--rail); color:var(--slate);font-family:var(--font-grotesk);font-variation-settings:normal;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased; /* Declared ONCE, here, because font-variation-settings inherits: it reaches every serif surface on every page without a per-component repeat, and the faces that have no such axes (Agrandir, Hanken Grotesk) ignore it. The EDITORIAL recipe is the default — most of the serif on this site is row titles — and the two display surfaces override it. See tokens.css for the three recipes and why opsz is pinned per role rather than left on `auto`. */ /* No axes here. is set in Hanken, so declaring Fraunces axes on it only pushed them onto every element on the page through inheritance — which is what made Agrandir report "WONK 0" in devtools. Each serif rule now carries its own recipe instead. */ font-variation-settings:normal; } /* height:auto is not optional once images carry intrinsic width/height attributes: without it the HTML height attribute dictates layout height and a 2000×1333 photo renders 1333px tall. With it, the attributes do only the job they are there for — reserving the right box so nothing shifts on load — while CSS keeps control of the rendered size. */ img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} /* Emphasis inside running copy. --weight-emphasis, not a bare 700: see tokens.css for why Hanken needs more than 700 to match what Founders Bold did against its regular. Headings and labels set their own weight and are deliberately not routed through this. */ b,strong{font-weight:var(--weight-emphasis)} /* Left-biased canvas: anchored to the page edge, not centered with auto margins. Inside the paper column, text is inset a further 16px so it lands at --content-start (72 rail + 16 = 88). The orange blocks pull back that 16px to sit flush on the rail/paper seam and break the text alignment on purpose. */ .wrap,header.site{max-width:var(--canvas-reference);padding-left:var(--content-inset);padding-right:var(--content-inset)} /* Skip link — first focusable element on every page. Off-screen until focused, then lands on the marker rail like everything else. */ .skiplink{ position:absolute;left:-9999px;top:0;z-index:100; font-family:var(--font-label);font-variation-settings:normal;font-weight:900;font-size:var(--type-label-size); letter-spacing:var(--type-label-tracking);text-transform:uppercase; background:var(--slate);color:var(--paper);padding:var(--space-16); } .skiplink:focus{left:0} /* Kept in the document for structure and search, taken out of the picture. Not display:none — that would remove it from the accessibility tree too. */ .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } /* ---------- masthead & nav ---------- The brand square is a real