/* ========================================================================= tokens.css - one source of truth for both modes. Direction: PINACOTECA. Light is authored on bare :root. Dark redefines ONLY what changes. Never define a colour for the first time inside a media query. Every text/surface pair below carries its computed contrast ratio. Do not introduce a pair that is not listed here. ========================================================================= */ /* ---- DISPLAY FACE: Newsreader, opsz pinned at 40, wght 400-700 ---------- Built from google/fonts ofl/newsreader (OFL 1.1, no Reserved Font Name): python -m fontTools.varLib.instancer "Newsreader[opsz,wght].ttf" \ "opsz=40" "wght=400:700" -o nr.ttf python -m fontTools.subset nr.ttf --output-file=fonts/newsreader-display.woff2 \ --flavor=woff2 --layout-features="kern,liga,clig,calt,tnum,onum" --unicodes="" 451,664 B TTF -> 49,324 B WOFF2. Licence: fonts/newsreader-OFL.txt. opsz is instanced away, so font-optical-sizing is a no-op and is not set. Both woff2 URLs sit inside GEN:ASSETS and scripts-dev/generate.mjs stamps them with their own hash. They MUST stay byte-identical to the preload in index.html: a preload for ?v=abc and a src for the bare path are two requests, and the 49 KB face arrives twice. */ /* GEN:ASSETS:START */ @font-face { font-family: "Newsreader Display"; src: url("/fonts/newsreader-display.woff2?v=a6bca906") format("woff2-variations"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+01FA-01FF, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-matched fallback. Numbers recomputed by A1-ASSETS from the bytes that actually ship (avg lowercase advance 0.48392 em vs Times New Roman 0.45940 em -> 105.4%); the ascent/descent overrides are the raw hhea percentages divided through by that size-adjust, so the first baseline does not move on swap. */ @font-face { font-family: "Newsreader Fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Tinos"), local("Nimbus Roman"); size-adjust: 105.4%; ascent-override: 69.8%; descent-override: 25.2%; line-gap-override: 0%; } /* ---- TEXT FACE: Instrument Sans, wdth pinned at 100, wght 400-650 ------- google/fonts ofl/instrumentsans, OFL 1.1, no Reserved Font Name. 194,336 B TTF -> 30,712 B WOFF2. Licence: fonts/instrument-sans-OFL.txt. Real tabular figures, which is what lets the page delete the mono role. */ @font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2?v=522e2faa") format("woff2-variations"); font-weight: 400 650; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+01FA-01FF, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); size-adjust: 107.2%; ascent-override: 90.5%; descent-override: 23.3%; line-gap-override: 0%; } /* GEN:ASSETS:END */ :root { color-scheme: light dark; /* Grain is a real 180x180 noise PNG, not SVG turbulence: DESIGN.md section 6 in the WMinus repo says so in Maj's own Do/Don't table, and this is his site too. */ /* ===================================================================== LIGHT: the same wall in daylight. Authored on bare :root. ===================================================================== */ --ground: #e8e7e2; /* page */ --band-cv: #dcdad2; /* one step in */ --band-deep: #d7d4cb; /* contact, the darkest light surface */ --raised: #efeee9; /* the chooser panel, the ONE raised surface */ --wash-a: #d3d5d2; /* cool slate, top left */ --wash-b: #e3d8c4; /* warm ochre, right, behind the portrait */ --wash-c: #cfd6ce; /* deep viridian, bottom */ --ink-strong: #14140f; /* 14.92:1 on ground AAA */ --ink: #2b2a27; /* 11.59:1 on ground AAA */ --ink-quiet: #5d5a54; /* 5.55:1 on ground, 4.64:1 on band-deep AA */ --ink-faint: #615d57; /* 5.28:1 on ground AA (banned on bands) */ --accent: #8a4a17; /* 5.52 ground / 4.88 band-cv / 4.61 band-deep */ --rule: #cfccc4; /* decorative hairline, never carries meaning */ --rule-strong: #b8b4ab; /* structural separator, non-text */ --border-ctrl: #7a766f; /* 3.65 ground / 3.23 band-cv / 3.05 band-deep */ --focus: #8a4a17; /* 5.52:1, well over the 3:1 floor */ --btn-solid-bg: #14140f; --btn-solid-fg: #e8e7e2; /* 14.92:1 AAA */ --btn-accent-bg: #8a4a17; --btn-accent-fg: #ffffff; /* 6.83:1 AA */ --scrim: rgb(8 9 11 / 0.74); --grain-opacity: 0.025; --grain: url("/Images/noise.png"); /* ---- PIGMENT: the washes in onepager.css (d). Alpha-only masks, so the colour lives here. In daylight they multiply into the paper. Opacities are the AA limit (4.55:1) for --ink-quiet and --accent at the densest point of each mask (peak alpha 0.749 warm, 0.725 cool) laid over the DARKEST point the fixed ground layer can put under it (#dbdcd8 light, #241e19 dark), not over the flat ground. Tints are the most visible ones inside the palette's own hues (ochre h64-72, slate h250-265, viridian h166-178, chroma capped) at that limit. Confirmed per text box, per scroll tile, at 360 / 390 / 768 / 1024 / 1280 / 1440 / 1920 / 2560. -- */ --pig-blend: multiply; --pig-warm: #ffe7cb; --pig-warm-a: 0.66; --pig-cool: #d9eafc; --pig-cool-a: 0.61; --pig-deep: #d3f8ee; --pig-deep-a: 0.90; /* ---- THE BRUSH: one tapered 240x12 stroke with dry bristle gaps, in two cuts and a vertical. Masks take their colour from --stroke; link underlines are background images, so their colour is baked in and the theme switches which copy is used. -------------------------------------- */ --stroke: color-mix(in oklab, var(--ink-quiet) 58%, transparent); --brush-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M1 7.1C22 5.2 58 4.4 104 4.9S190 3.6 239 5.8c.9.5.6 1.6-.4 1.8-40 2.2-86 1.9-132 2.4S30 10.8 3.2 9.7C.4 9.4-.3 7.5 1 7.1ZM30 7.3c30-.9 64-1.1 96-.9l-.1.5c-32 0-66 .3-95.8 1ZM120 5.9c34-.5 70-.9 104-.3l-.2.5c-34-.3-70 .1-103.7.3ZM60 8.9c40-.8 80-.9 120-1.1v.4c-40 .4-80 .5-120 1.1Z'/%3E%3C/svg%3E"); --brush-h2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M2 6.2C40 4.1 84 5.3 128 4.6S206 5.9 238 4.9c1.4 0 1.6 2.4.2 2.7-30 3.1-74 1.9-116 3S38 9.9 2.6 8.8C.8 8.7.5 6.4 2 6.2ZM18 7.6c40-1 90-.7 130-1.2l.1.4c-40 .6-90 .4-130 1.3ZM150 5.4c30-.2 56-.6 80-.2v.4c-24-.2-50 .2-80 .3Z'/%3E%3C/svg%3E"); --brush-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 240' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' transform='matrix(0 1 -1 0 12 0)' d='M1 7.1C22 5.2 58 4.4 104 4.9S190 3.6 239 5.8c.9.5.6 1.6-.4 1.8-40 2.2-86 1.9-132 2.4S30 10.8 3.2 9.7C.4 9.4-.3 7.5 1 7.1ZM30 7.3c30-.9 64-1.1 96-.9l-.1.5c-32 0-66 .3-95.8 1ZM120 5.9c34-.5 70-.9 104-.3l-.2.5c-34-.3-70 .1-103.7.3ZM60 8.9c40-.8 80-.9 120-1.1v.4c-40 .4-80 .5-120 1.1Z'/%3E%3C/svg%3E"); --brush-u-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='%238a4a17' d='M1 7.1C22 5.2 58 4.4 104 4.9S190 3.6 239 5.8c.9.5.6 1.6-.4 1.8-40 2.2-86 1.9-132 2.4S30 10.8 3.2 9.7C.4 9.4-.3 7.5 1 7.1ZM30 7.3c30-.9 64-1.1 96-.9l-.1.5c-32 0-66 .3-95.8 1ZM120 5.9c34-.5 70-.9 104-.3l-.2.5c-34-.3-70 .1-103.7.3ZM60 8.9c40-.8 80-.9 120-1.1v.4c-40 .4-80 .5-120 1.1Z'/%3E%3C/svg%3E"); --brush-u2-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='%238a4a17' d='M2 6.2C40 4.1 84 5.3 128 4.6S206 5.9 238 4.9c1.4 0 1.6 2.4.2 2.7-30 3.1-74 1.9-116 3S38 9.9 2.6 8.8C.8 8.7.5 6.4 2 6.2ZM18 7.6c40-1 90-.7 130-1.2l.1.4c-40 .6-90 .4-130 1.3ZM150 5.4c30-.2 56-.6 80-.2v.4c-24-.2-50 .2-80 .3Z'/%3E%3C/svg%3E"); --brush-u-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='%23e3a468' d='M1 7.1C22 5.2 58 4.4 104 4.9S190 3.6 239 5.8c.9.5.6 1.6-.4 1.8-40 2.2-86 1.9-132 2.4S30 10.8 3.2 9.7C.4 9.4-.3 7.5 1 7.1ZM30 7.3c30-.9 64-1.1 96-.9l-.1.5c-32 0-66 .3-95.8 1ZM120 5.9c34-.5 70-.9 104-.3l-.2.5c-34-.3-70 .1-103.7.3ZM60 8.9c40-.8 80-.9 120-1.1v.4c-40 .4-80 .5-120 1.1Z'/%3E%3C/svg%3E"); --brush-u2-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='%23e3a468' d='M2 6.2C40 4.1 84 5.3 128 4.6S206 5.9 238 4.9c1.4 0 1.6 2.4.2 2.7-30 3.1-74 1.9-116 3S38 9.9 2.6 8.8C.8 8.7.5 6.4 2 6.2ZM18 7.6c40-1 90-.7 130-1.2l.1.4c-40 .6-90 .4-130 1.3ZM150 5.4c30-.2 56-.6 80-.2v.4c-24-.2-50 .2-80 .3Z'/%3E%3C/svg%3E"); --brush-u: var(--brush-u-light); --brush-u2: var(--brush-u2-light); /* ---- TYPE FAMILIES. There is no monospace role on this page. --------- */ --font-display: "Newsreader Display", "Newsreader Fallback", Georgia, "Times New Roman", serif; --font-text: "Instrument Sans", "Instrument Fallback", system-ui, -apple-system, sans-serif; /* ---- TYPE SCALE (fluid 360px -> 1440px, locked above) ---------------- */ --t--2: 0.75rem; /* 12 */ --t--1: clamp(0.8125rem, 0.7917rem + 0.093vw, 0.875rem); /* 13 -> 14 */ --t-0: clamp(1rem, 0.9792rem + 0.093vw, 1.0625rem); /* 16 -> 17 */ --t-1: clamp(1.125rem, 1.0833rem + 0.185vw, 1.25rem); /* 18 -> 20 */ --t-2: clamp(1.3125rem, 1.25rem + 0.278vw, 1.5rem); /* 21 -> 24 */ --t-3: clamp(1.625rem, 1.4167rem + 0.926vw, 2.25rem); /* 26 -> 36 */ --t-4: clamp(2rem, 1.5833rem + 1.852vw, 3.25rem); /* 32 -> 52 */ --t-5: clamp(2.75rem, 1.6667rem + 4.815vw, 6rem); /* 44 -> 96 */ /* ---- TYPE MECHANICS. Tracking is size-specific by definition. -------- */ --lh-display: 1.00; --lh-tight: 1.12; --lh-snug: 1.24; --lh-body: 1.62; --lh-meta: 1.46; --tr-5: -0.030em; --tr-4: -0.024em; --tr-3: -0.018em; --tr-2: -0.012em; --tr-1: -0.006em; --tr-0: 0em; --tr--1: 0.004em; --tr--2: 0.014em; --wt-regular: 400; --wt-medium: 500; --wt-semi: 600; --measure: 66ch; /* body prose */ --measure-lead: 42ch; /* display-set lead paragraphs */ /* ---- SPACING (4px base) --------------------------------------------- */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-s: 0.75rem; --space-m: 1rem; --space-l: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; --section-y: clamp(4rem, 2.5rem + 6.7vw, 8rem); /* ---- RADII. 2px on controls, 4px on the chooser, 0 everywhere else. -- */ --radius-xs: 2px; --radius-s: 4px; --radius-pill: 999px; /* ---- MOTION ---------------------------------------------------------- */ --d-press: 120ms; /* :active feedback */ --d-hover: 160ms; /* colour, underline thickness */ --d-ui: 200ms; /* small state changes */ --d-exit: 180ms; /* chooser out. Exit is always faster than in. */ --d-enter: 260ms; /* chooser in */ --d-paint: 900ms; /* the one first-load paint (explanatory tier) */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* Capillary spread, y = (1 - e^-2.6t)/(1 - e^-2.6), sampled at 10 points. A cubic-bezier cannot express this shape; that is the only reason linear() is here. Used for pigment only, never on a control. */ --ease-wash: linear(0, 0.2473 10%, 0.438 20%, 0.585 30%, 0.6984 40%, 0.7858 50%, 0.8532 60%, 0.9052 70%, 0.9453 80%, 0.9762 90%, 1); /* ---- LAYOUT ---------------------------------------------------------- */ --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem); --wrap-max: 82rem; /* 1312px */ --header-h: 3.25rem; /* 52px */ } /* ---- DARK: the hero, because the photograph is. System preference. ------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #101216; --band-cv: #171a1f; --band-deep: #0b0d10; --raised: #171a1f; --wash-a: #1d2330; --wash-b: #3a2a1c; --wash-c: #12211d; --ink-strong: #f4f1ea; /* 16.62:1 on ground AAA */ --ink: #dad6ce; /* 12.94 ground / 13.43 band-deep AAA */ --ink-quiet: #9b968c; /* 6.37 ground / 6.61 band-deep AAA */ --ink-faint: #8a857b; /* 5.11 ground / 4.75 band-cv / 5.30 deep */ --accent: #e3a468; /* 8.73 ground / 9.06 band-deep AAA */ --rule: #262a30; --rule-strong: #353a42; --border-ctrl: #6f6a62; /* 3.49 ground / 3.25 band-cv / 3.63 deep */ --focus: #e3a468; /* 8.73:1 */ --btn-solid-bg: #f4f1ea; --btn-solid-fg: #101216; /* 16.62:1 AAA */ --btn-accent-bg: #e3a468; --btn-accent-fg: #101216; /* 8.73:1 AAA */ --grain-opacity: 0.035; /* noise reads ~40% stronger on a dark ground */ --pig-blend: normal; --pig-warm: #5e3c20; --pig-warm-a: 0.47; --pig-cool: #243149; --pig-cool-a: 0.69; --pig-deep: #18302a; --pig-deep-a: 0.85; --brush-u: var(--brush-u-dark); --brush-u2: var(--brush-u2-dark); } } /* ---- DARK: an explicit user choice wins in both directions -------------- */ :root[data-theme="dark"] { --ground: #101216; --band-cv: #171a1f; --band-deep: #0b0d10; --raised: #171a1f; --wash-a: #1d2330; --wash-b: #3a2a1c; --wash-c: #12211d; --ink-strong: #f4f1ea; --ink: #dad6ce; --ink-quiet: #9b968c; --ink-faint: #8a857b; --accent: #e3a468; --rule: #262a30; --rule-strong: #353a42; --border-ctrl: #6f6a62; --focus: #e3a468; --btn-solid-bg: #f4f1ea; --btn-solid-fg: #101216; --btn-accent-bg: #e3a468; --btn-accent-fg: #101216; --grain-opacity: 0.035; --pig-blend: normal; --pig-warm: #5e3c20; --pig-warm-a: 0.47; --pig-cool: #243149; --pig-cool-a: 0.69; --pig-deep: #18302a; --pig-deep-a: 0.85; --brush-u: var(--brush-u-dark); --brush-u2: var(--brush-u2-dark); } /* ========================================================================= THE GRID. Twelve columns. Headings and dates live in the margin; body text never does. This is the structural fix for round 1's "every section opens with h2 + hairline". ========================================================================= */ .wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } .wrap--flow { display: block; } /* header and footer are flex rows */ .marg { grid-column: 1 / 3; } /* marginalia: headings, years */ .content { grid-column: 3 / 11; } /* prose */ .hang { grid-column: 11 / -1; } /* facts, the portrait */ /* Below 1440 the hanging column widens and the prose column gives way for it. The two must never share a column line: explicitly-placed grid items are allowed to overlap, and a portrait printed over a paragraph is exactly the kind of bug that only shows up at one width. */ @media (max-width: 1439px) { .content { grid-column: 3 / 9; } .hang { grid-column: 9 / -1; } } @media (max-width: 1023px) { .wrap { grid-template-columns: repeat(6, minmax(0, 1fr)); } .marg, .content, .hang { grid-column: 1 / -1; } } @media (max-width: 639px) { .wrap { grid-template-columns: minmax(0, 1fr); } .wrap > * { grid-column: 1 / -1; } } /* ========================================================================= PAPER. Round 3 moves the daylight palette from grey plaster to warm ivory, the ground Anthropic's own pages are set on, and gives the interactive wallpaper (scripts/wallpaper.js) its three colours. The ink, accent and control tokens are unchanged: they were computed against a DARKER light ground, so every pair in this file only gains contrast here. Defined last on purpose. Same specificity as the block above, later wins. ========================================================================= */ :root { --ground: #faf9f5; /* ivory paper */ --band-cv: #f3f0e8; /* one step in: the free-stuff shelf */ --band-deep: #ece8dd; /* contact, the darkest light surface */ --raised: #ffffff; /* the chooser panel */ --wash-a: #eef0ea; /* the static gradient under the canvas */ --wash-b: #f7e6d4; --wash-c: #eae7dc; --rule: #e6e1d4; --rule-strong: #d5cfbe; --grain-opacity: 0.02; /* The wallpaper reads these three and the alpha straight out of the cascade, so a theme change is a stylesheet edit and never a second palette hidden inside JavaScript. Six hex digits, no other syntax. */ --paper-wash-a: #faf9f5; --paper-wash-b: #efe6d6; --paper-wash-c: #d97757; /* clay, the one warm accent in the wash */ --wash-alpha: 0.52; /* ---- A DIFFERENT PAINTING ON EVERY PAGE -------------------------------- scripts/wallpaper.js reads these three pigments straight off :root, so a page changes the painting behind it by redefining them and nothing else. Six sets, one per page, so a reader knows where they are by the colour under the type before they read a word of it. */ /* Contribution grid. Five steps from empty to busiest, ending on the accent already used for links, so the grid is not a sixth colour. */ --heat-0: #e7e3d7; --heat-1: #f0cdb2; --heat-2: #dfa377; --heat-3: #c2763f; --heat-4: #8a4a17; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper-wash-a: #101216; --paper-wash-b: #2a2018; --paper-wash-c: #e3a468; --wash-alpha: 0.40; --heat-0: #1e222a; --heat-1: #4a3524; --heat-2: #7a5330; --heat-3: #b07440; --heat-4: #e3a468; } } :root[data-theme="dark"] { --paper-wash-a: #101216; --paper-wash-b: #2a2018; --paper-wash-c: #e3a468; --wash-alpha: 0.40; --heat-0: #1e222a; --heat-1: #4a3524; --heat-2: #7a5330; --heat-3: #b07440; --heat-4: #e3a468; } /* ---- Per-page pigments -------------------------------------------------- Light first, then the same six for dark. data-page is stamped on by the generator, so this costs nothing at runtime and works before paint. */ :root[data-page="free"] { --paper-wash-b: #d8e0ea; --paper-wash-c: #006edc; } :root[data-page="work"] { --paper-wash-b: #d9e4f4; --paper-wash-c: #1d5fc4; } :root[data-page="contributions"] { --paper-wash-b: #e8dcb8; --paper-wash-c: #d8513c; } :root[data-page="about"] { --paper-wash-b: #eee2f5; --paper-wash-c: #9b42d0; } :root[data-page="faq"] { --paper-wash-b: #dfe3f4; --paper-wash-c: #7c9bff; } :root[data-page="contact"] { --paper-wash-b: #d5efe3; --paper-wash-c: #3ee9a4; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-page="free"] { --paper-wash-b: #17222e; --paper-wash-c: #2f7fd6; } :root:not([data-theme="light"])[data-page="work"] { --paper-wash-b: #131f33; --paper-wash-c: #3583e9; } :root:not([data-theme="light"])[data-page="contributions"] { --paper-wash-b: #2a2318; --paper-wash-c: #d8513c; } :root:not([data-theme="light"])[data-page="about"] { --paper-wash-b: #241a2c; --paper-wash-c: #9b42d0; } :root:not([data-theme="light"])[data-page="faq"] { --paper-wash-b: #171b2c; --paper-wash-c: #7c9bff; } :root:not([data-theme="light"])[data-page="contact"] { --paper-wash-b: #10201a; --paper-wash-c: #3ee9a4; } } :root[data-theme="dark"][data-page="free"] { --paper-wash-b: #17222e; --paper-wash-c: #2f7fd6; } :root[data-theme="dark"][data-page="work"] { --paper-wash-b: #131f33; --paper-wash-c: #3583e9; } :root[data-theme="dark"][data-page="contributions"] { --paper-wash-b: #2a2318; --paper-wash-c: #d8513c; } :root[data-theme="dark"][data-page="about"] { --paper-wash-b: #241a2c; --paper-wash-c: #9b42d0; } :root[data-theme="dark"][data-page="faq"] { --paper-wash-b: #171b2c; --paper-wash-c: #7c9bff; } :root[data-theme="dark"][data-page="contact"] { --paper-wash-b: #10201a; --paper-wash-c: #3ee9a4; }