/* ========================================================================== Baarool Palette derived from the subject: a beacon on a hill, at night, in the Irish Sea. Deep water-ink ground, limestone paper, one fire. ========================================================================== */ :root { /* ---- ground ------------------------------------------------------- */ --ink: #1E2318; /* field olive-black — dominant dark ground */ --ink-2: #2C3324; /* one step up: hairlines and dividers on ink */ --ink-3: #3A422F; /* rare: a third step, for layered dark panels */ --paper: #E8E4D6; /* bone — dominant light ground */ --paper-2: #F2EFE5; /* card fill on paper */ /* ---- type --------------------------------------------------------- */ --slate: #565948; /* muted type on paper (AA on paper and ground) */ --slate-2: #969780; /* muted type on ink */ /* ---- signal ------------------------------------------------------- */ /* The accent means ONE thing: signal. Never decoration, never a mood. Two values exist because the same yellow cannot serve both grounds: bright yellow on bone scores 1.2:1 and disappears — as type AND as a filled shape. So the accent follows the GROUND, not the role. --signal the accent for the current ground (use this everywhere) --signal-on the text colour that sits on top of --signal */ --signal-bright: #D9C22B; /* dark grounds only */ --signal-deep: #6B5F08; /* light grounds */ --signal: var(--signal-deep); --signal-on: var(--paper); /* ---- measure ------------------------------------------------------ */ --measure: 34rem; --gutter: clamp(1.25rem, 5vw, 4rem); --rule: 1px solid color-mix(in srgb, var(--slate) 30%, transparent); --rule-dark: 1px solid var(--ground-rule); /* ---- type faces ---------------------------------------------------- */ /* Display is Instrument Serif on the web. In PowerPoint and anywhere the webfont cannot load, the substitute is Century Schoolbook — same transitional-serif weight, and it ships with Office. */ --display: "Instrument Serif", "Century Schoolbook", Georgia, serif; --body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---- tone ------------------------------------------------------------ The alternate ground — masthead, footer, statement bands. Three settings, matching the deck generator. Set on . light a deeper tint of the paper; the page reads as one material soft mid olive; weight without heaviness deep full-bleed near-black; highest contrast, heaviest "light" is canonical. Large flat dark areas compress badly on video calls and print as a slab, and the identity does not depend on them. ---------------------------------------------------------------------- */ :root, [data-tone="light"] { --ground: #D8D3C0; --ground-tx: var(--ink); --ground-muted: var(--slate); --ground-rule: color-mix(in srgb, var(--ink) 16%, transparent); --ground-accent: var(--signal); --ground-invert-bg: var(--ink); --ground-invert-tx: var(--paper); } [data-tone="soft"] { --ground: #3B4433; --ground-tx: var(--paper); --ground-muted: var(--slate-2); --ground-rule: color-mix(in srgb, var(--paper) 18%, transparent); --ground-accent: var(--signal); --ground-invert-bg: var(--paper); --ground-invert-tx: var(--ink); } [data-tone="deep"] { --ground: var(--ink); --ground-tx: var(--paper); --ground-muted: var(--slate-2); --ground-rule: color-mix(in srgb, var(--paper) 18%, transparent); --ground-accent: var(--signal); --ground-invert-bg: var(--paper); --ground-invert-tx: var(--ink); } /* --- reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.65; font-weight: 350; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; } a:hover { text-decoration-color: var(--signal); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } .skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; z-index: 100; } .skip:focus { left: 1rem; top: 1rem; } /* --- type ------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: -0.012em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 1.7rem + 4.2vw, 5.4rem); } h2 { font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3rem); } h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); } p { margin: 0 0 1.15em; } .eyebrow { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); margin: 0 0 1.5rem; } .lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 40rem; } .fine { font-family: var(--mono); font-size: 0.75rem; line-height: 1.6; color: var(--slate); letter-spacing: 0.01em; } /* --- layout ----------------------------------------------------------- */ .wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: var(--gutter); } .band { padding-block: clamp(3.5rem, 8vw, 7rem); } .band + .band { border-top: var(--rule); } .band--ink { background: var(--ground); color: var(--ground-tx); border-top: 0; } .band--ink h1, .band--ink h2, .band--ink h3 { color: var(--ground-tx); } .band--ink .eyebrow { color: var(--ground-accent); } .band--ink .lede { color: color-mix(in srgb, var(--ground-tx) 82%, transparent); } .band--ink .fine { color: var(--ground-muted); } .cols { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr; } @media (min-width: 48rem) { .cols--3 { grid-template-columns: repeat(3, 1fr); } .cols--sidebar { grid-template-columns: 15rem 1fr; } } /* --- masthead --------------------------------------------------------- */ .masthead { background: var(--ground); color: var(--ground-tx); border-bottom: var(--rule-dark); } .masthead__inner { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: 1.1rem; } .wordmark { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } /* The mark. Inherits its ground: hill takes the band's type colour, the beacon is always --signal. Never recoloured for decoration. */ .mark { width: 1.6rem; height: 1.6rem; flex: none; overflow: visible; } .mark__hill { fill: var(--ink); } .mark__far { fill: var(--slate); } .mark__beacon { fill: var(--signal); } .masthead .mark__hill, .footer .mark__hill, .band--ink .mark__hill { fill: var(--ground-tx); } .masthead .mark__far, .footer .mark__far, .band--ink .mark__far { fill: color-mix(in srgb, var(--ground-tx) 55%, var(--ground)); } .nav { display: flex; gap: clamp(1rem, 2.5vw, 2rem); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; } .nav a { text-decoration: none; color: color-mix(in srgb, var(--ground-tx) 68%, transparent); } .nav a:hover, .nav a[aria-current="page"] { color: var(--ground-tx); } .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--signal); } /* --- hero ------------------------------------------------------------- */ .hero { padding-block: clamp(4rem, 10vw, 8.5rem) clamp(3rem, 7vw, 5rem); } .hero__question { font-family: var(--display); font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 2rem; max-width: 22ch; text-wrap: balance; } .hero__question em { font-style: italic; color: var(--signal); } /* --- signature: the decision window ----------------------------------- The decision is a period, not an instant. It is open for a while and then it shuts. An input lands inside and feeds into it; an output lands after and its path stops at the closed edge. Built in HTML rather than SVG so the labels keep real font sizes at every width — an SVG scaled to a phone renders 12px type at about 5px. ---------------------------------------------------------------------- */ .axis-fig { margin: 0; } .axis { --open-from: 16%; --open-to: 62%; --input-at: 31%; --stop-at: 66%; --output-at: 85%; --baseline: 6.4rem; position: relative; margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; height: 10rem; } .axis__window { position: absolute; left: var(--open-from); right: calc(100% - var(--open-to)); top: 2.4rem; bottom: calc(100% - var(--baseline)); background: color-mix(in srgb, var(--ground-tx) 13%, transparent); } .axis__window span { position: absolute; top: -1.4rem; left: 0; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ground-muted); white-space: nowrap; } .axis__shut { position: absolute; left: var(--open-to); top: 1.9rem; height: calc(var(--baseline) - 1.2rem); width: 2px; background: var(--ground-tx); } .axis__shut span { position: absolute; top: -1.9rem; left: 0.55rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ground-tx); white-space: nowrap; } .axis__line { position: absolute; left: 0; right: 0; top: var(--baseline); height: 1px; background: color-mix(in srgb, var(--ground-tx) 38%, transparent); } .axis__time { position: absolute; right: 0; top: calc(var(--baseline) + 0.5rem); font-size: 0.8125rem; font-style: italic; color: var(--ground-muted); } /* --- the two marks --- */ .axis__mark { position: absolute; top: var(--baseline); translate: -50% -50%; width: 0.75rem; height: 0.75rem; border-radius: 50%; } .axis__mark b { position: absolute; left: 50%; top: 1.15rem; translate: -50% 0; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; } .axis__mark i { position: absolute; left: 50%; top: 2.5rem; translate: -50% 0; font-size: 0.8125rem; white-space: nowrap; color: var(--ground-muted); } /* input: inside the window, feeding upward into it */ .axis__mark--input { left: var(--input-at); background: var(--signal); animation: axis-pulse 3.6s ease-in-out infinite; } .axis__mark--input b { color: var(--signal); } .axis__mark--input::before { content: ""; position: absolute; left: 50%; bottom: 0.7rem; translate: -50% 0; width: 2px; height: 2.6rem; background: var(--signal); } .axis__mark--input::after { content: ""; position: absolute; left: 50%; bottom: 3.2rem; translate: -50% 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--signal); } /* output: after the shut edge, its path stopping dead */ .axis__mark--output { left: var(--output-at); border: 1px solid color-mix(in srgb, var(--ground-tx) 42%, transparent); animation: axis-arrive 2.2s cubic-bezier(.2,.7,.2,1) .4s both; } .axis__mark--output b { color: color-mix(in srgb, var(--ground-tx) 55%, transparent); } .axis__mark--output i { color: color-mix(in srgb, var(--ground-tx) 48%, transparent); } .axis__trail { position: absolute; top: var(--baseline); left: var(--stop-at); width: calc(var(--output-at) - var(--stop-at)); height: 1px; background: repeating-linear-gradient(to right, color-mix(in srgb, var(--ground-tx) 42%, transparent) 0 5px, transparent 5px 10px); } .axis__stop { position: absolute; top: calc(var(--baseline) - 0.55rem); left: var(--stop-at); width: 2px; height: 1.1rem; background: color-mix(in srgb, var(--ground-tx) 42%, transparent); } @keyframes axis-arrive { from { left: 105%; opacity: 0; } to { left: var(--output-at); opacity: 1; } } @keyframes axis-pulse { 0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 20%, transparent); } 50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--signal) 5%, transparent); } } /* Narrow: drop the gloss lines, tighten the geometry, keep the labels. */ @media (max-width: 40rem) { .axis { --open-from: 6%; --open-to: 58%; --input-at: 26%; --stop-at: 63%; --output-at: 86%; --baseline: 5.6rem; height: 8.6rem; } .axis__mark i, .axis__time { display: none; } } .axis__caption { margin-top: clamp(1.75rem, 4vw, 2.5rem); max-width: 46rem; } /* --- reading ---------------------------------------------------------- */ .prose { max-width: var(--measure); } .prose h2 { margin-top: 2.2em; } .prose h3 { margin-top: 1.8em; } .prose blockquote { margin: 2rem 0; padding-left: 1.5rem; border-left: 2px solid var(--signal); font-family: var(--display); font-size: 1.35rem; line-height: 1.35; } .prose blockquote p:last-child { margin-bottom: 0; } .prose em { font-style: italic; } /* --- definition blocks ------------------------------------------------ */ .defs { display: grid; gap: 2rem; } @media (min-width: 48rem) { .defs { grid-template-columns: repeat(2, 1fr); gap: 3rem; } } .def { border-top: 2px solid var(--ink); padding-top: 1rem; } .def__term { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.75rem; } .def--input { border-top-color: var(--signal); } .def--input .def__term { color: var(--signal); } .def p { margin-bottom: 0; } /* --- index panel ------------------------------------------------------ */ .reading { display: grid; gap: 2rem; align-items: end; } @media (min-width: 48rem) { .reading { grid-template-columns: auto 1fr; gap: 3.5rem; } } .reading__figure { font-family: var(--mono); font-size: clamp(3rem, 2rem + 5vw, 6rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.03em; color: var(--signal); } .reading__pending { font-family: var(--mono); font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); font-weight: 400; letter-spacing: 0.02em; color: var(--slate-2); } /* --- lists ------------------------------------------------------------ */ .entries { list-style: none; margin: 0; padding: 0; } .entries li { border-top: var(--rule); } .entries li:last-child { border-bottom: var(--rule); } .entry { display: block; text-decoration: none; padding-block: 1.6rem; transition: background-color 160ms ease, padding-inline 160ms ease; } .entry:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); padding-inline: 0.75rem; } .entry__date { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 0.5rem; } .entry__title { font-family: var(--display); font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem); line-height: 1.15; margin: 0 0 0.4rem; } .entry__standfirst { color: var(--slate); max-width: 46rem; margin: 0; font-size: 0.9375rem; } /* --- call to action --------------------------------------------------- */ .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .btn { display: inline-block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.85rem 1.4rem; border: 1px solid currentColor; transition: background-color 160ms ease, color 160ms ease; } .btn--primary { background: var(--signal); border-color: var(--signal); color: var(--signal-on); } .btn--primary:hover { background: transparent; color: var(--signal); border-color: var(--signal); } .band--ink .btn:not(.btn--primary):hover { background: var(--ground-invert-bg); color: var(--ground-invert-tx); } .btn:not(.btn--primary):hover { background: var(--ink); color: var(--paper); } /* --- footer ----------------------------------------------------------- */ .footer { background: var(--ground); color: var(--ground-muted); padding-block: 3.5rem 2.5rem; } .footer a { color: color-mix(in srgb, var(--ground-tx) 85%, transparent); } .footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } } .footer h4 { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ground-tx); margin: 0 0 0.9rem; font-weight: 500; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: 0.45rem; } .footer__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: var(--rule-dark); } /* A dark ground — and only a dark ground — takes the bright accent. */ [data-tone="soft"] .band--ink, [data-tone="soft"] .masthead, [data-tone="soft"] .footer, [data-tone="deep"] .band--ink, [data-tone="deep"] .masthead, [data-tone="deep"] .footer { --signal: var(--signal-bright); --signal-on: var(--ink); }