/* ========================================================================== Muse Code Guide — Swiss editorial fact-sheet Near-black ground, vermillion annotation, Archivo headings over a serif body, monospace for every number. Data is set like a spec sheet, not like a widget. ========================================================================== */ @font-face { font-family: 'Archivo'; src: url('/fonts/archivo-var.woff2') format('woff2-variations'); font-weight: 400 900; font-display: swap; font-style: normal; } @font-face { font-family: 'Source Serif 4'; src: url('/fonts/sourceserif-var.woff2') format('woff2-variations'); font-weight: 400 700; font-display: swap; font-style: normal; } @font-face { font-family: 'Plex Mono'; src: url('/fonts/plexmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url('/fonts/plexmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } /* Theming --------------------------------------------------------------------------- Every token is declared once with light-dark(). Which half applies is decided entirely by the `color-scheme` property, so the theme switch only has to change `color-scheme` — no duplicated palette blocks to drift apart. `data-theme` is written to by a tiny blocking script in , so the stored choice is applied before first paint and there is no flash. The plain value on the line above each light-dark() is the fallback for engines without light-dark() support: they get the dark palette, which is the site's default look. */ :root { --display: 'Archivo', ui-sans-serif, system-ui, sans-serif; --body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: light dark; --ground: #0b0c0d; --ground: light-dark(#f8f8f6, #0b0c0d); --raise: #121416; --raise: light-dark(#ffffff, #121416); --raise-2: #17191c; --raise-2: light-dark(#f1f1ee, #17191c); --rule: #353a41; --rule: light-dark(#c9c5bb, #353a41); --rule-soft: #22262a; --rule-soft: light-dark(#e2dfd8, #22262a); --text: #e9e7e2; --text: light-dark(#14161a, #e9e7e2); --text-2: #9ba1a8; --text-2: light-dark(#4e545b, #9ba1a8); --text-3: #7c838a; --text-3: light-dark(#6b7178, #7c838a); --accent: #ef6240; --accent: light-dark(#b93a15, #ef6240); --signal: #e8b04b; --signal: light-dark(#8a5f0d, #e8b04b); --accent-ink: #ffffff; --measure: 68ch; --rail: 210px; } :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } /* Grain strength is NOT a light-dark() token. `light-dark()` only accepts colours; giving it numbers or keywords makes the consuming declaration invalid at computed-value time, so `opacity` silently falls back to 1 and the texture renders at full strength — which is exactly what happened here and quietly invalidated the measured contrast ratios. These two properties therefore get explicit per-theme rules. */ :root { --grain-opacity: 0.14; --grain-blend: soft-light; } @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { --grain-opacity: 0.05; --grain-blend: multiply; } } :root[data-theme='light'] { --grain-opacity: 0.05; --grain-blend: multiply; } :root[data-theme='dark'] { --grain-opacity: 0.14; --grain-blend: soft-light; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--body); font-size: 17.5px; line-height: 1.68; font-feature-settings: 'kern' 1, 'liga' 1; } /* Fine film of noise so the flat ground reads as paper rather than as a void. */ .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } body > *:not(.grain) { position: relative; z-index: 1; } a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; color: var(--accent); } .skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--accent); color: var(--accent-ink); padding: 12px 18px; font-family: var(--mono); font-size: 13px; text-decoration: none; } .skip:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wrap { width: min(1120px, calc(100% - 44px)); margin: 0 auto; } /* ----------------------------------------------------------------- masthead */ .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); } .nav { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; color: var(--text); text-decoration: none; white-space: nowrap; } .brand:hover { color: var(--text); } .brand-mark { width: 11px; height: 11px; flex: none; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); } .menu { display: flex; align-items: center; gap: 22px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; flex-wrap: wrap; } .menu a { color: var(--text-2); text-decoration: none; padding: 6px 0; position: relative; } .menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; } .menu a:hover { color: var(--text); } .menu a:hover::after, .menu a[aria-current='page']::after { transform: scaleX(1); } .menu a[aria-current='page'] { color: var(--text); } .nav-end { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* theme switch */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); background: transparent; border: 1px solid var(--rule); cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle .ico { display: none; flex: none; } .theme-toggle .theme-label { min-width: 46px; text-align: left; } /* Before the script runs, data-mode is absent — show the system icon so the control never renders empty. */ .theme-toggle:not([data-mode]) .ico-system, .theme-toggle[data-mode='system'] .ico-system, .theme-toggle[data-mode='light'] .ico-light, .theme-toggle[data-mode='dark'] .ico-dark { display: block; } .theme-toggle[data-mode='light'] .ico-light { color: var(--signal); } /* --------------------------------------------------------------- breadcrumb */ .breadcrumb { margin: 26px 0 0; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; } .breadcrumb li + li::before { content: '/'; margin-right: 10px; color: var(--rule); } .breadcrumb a { color: var(--text-3); text-decoration: none; } .breadcrumb a:hover { color: var(--accent); } /* --------------------------------------------------------------------- hero */ .hero { padding: 44px 0 52px; border-bottom: 2px solid var(--text); animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); } .kicker time { color: var(--text-3); } .kicker .dot { width: 4px; height: 4px; background: var(--rule); border-radius: 50%; } h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.35rem, 5.4vw, 4.1rem); line-height: 0.99; letter-spacing: -0.033em; margin: 0; max-width: 19ch; text-wrap: balance; } .lede { font-size: clamp(1.13rem, 1.9vw, 1.32rem); line-height: 1.55; color: var(--text-2); margin: 26px 0 0; max-width: 60ch; } /* spec sheet — the hero's data, set as a datasheet */ .specsheet { margin: 40px 0 0; border-top: 1px solid var(--rule); } .spec-row { display: grid; grid-template-columns: minmax(140px, 26%) 1fr; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); } .spec-row dt { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding-top: 3px; } .spec-row dd { margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ layout */ .layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 72px; align-items: start; padding-top: 8px; } .content { min-width: 0; counter-reset: sec; } .rail { position: sticky; top: 92px; padding-top: 54px; } .rail-title { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); } .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .toc li { counter-increment: toc; margin: 0 0 2px; } .toc a { display: block; padding: 6px 0 6px 26px; position: relative; font-family: var(--display); font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--text-2); text-decoration: none; } .toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); } .toc a:hover { color: var(--accent); } .toc a:hover::before { color: var(--accent); } /* ---------------------------------------------------------------- sections */ .section { padding: 54px 0 0; } .section-head { position: relative; margin: 0 0 26px; padding-top: 22px; border-top: 1px solid var(--rule); } .content > .section > .section-head::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); position: absolute; top: 20px; right: 0; font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.08em; } .section h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 1.95rem); line-height: 1.16; letter-spacing: -0.022em; margin: 0; max-width: 30ch; padding-right: 44px; text-wrap: balance; scroll-margin-top: 92px; } .section h3 { font-family: var(--display); font-weight: 650; font-size: 1.06rem; line-height: 1.32; letter-spacing: -0.01em; margin: 30px 0 8px; } .section-intro { color: var(--text-2); margin: 12px 0 0; max-width: var(--measure); font-size: 16.5px; } .section p { margin: 0 0 17px; max-width: var(--measure); } .section ul, .section ol { margin: 0 0 19px; padding-left: 20px; max-width: var(--measure); } .section li { margin: 0 0 9px; } .section li::marker { color: var(--accent); } /* Structural lists are layout, not prose: they run the full column width and must beat the reading-measure cap that `.section ul` sets for body copy. */ .section .linklist, .section .steps, .section .reflist, .section .quotes { max-width: none; padding-left: 0; } /* ------------------------------------------------------------------ tables */ /* Hairline rules, no outer box: the data is the object, not the container. */ .table-scroll { overflow-x: auto; margin: 0 0 22px; } table { border-collapse: collapse; width: 100%; font-size: 15px; } caption { text-align: left; padding: 0 0 12px; color: var(--text-3); font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; } thead th { font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); padding: 0 18px 10px 0; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--text); } tbody th, tbody td { padding: 12px 18px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-soft); font-variant-numeric: tabular-nums; } tbody th { font-family: var(--display); font-weight: 600; font-size: 14.5px; } tbody td { color: var(--text-2); } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } th:last-child, td:last-child { padding-right: 0; } .table-note { color: var(--text-3); font-size: 14.5px; margin: 14px 0 20px; max-width: var(--measure); } /* ------------------------------------------------------------------- cards */ .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 22px; background: var(--rule-soft); border-block: 1px solid var(--rule-soft); } .card { background: var(--ground); padding: 24px 26px 22px; position: relative; } .card-index { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--accent); display: block; margin-bottom: 12px; } .card h3 { margin: 0 0 10px; font-size: 1.02rem; } .card p { margin: 0 0 12px; color: var(--text-2); font-size: 16px; } .card p:last-child { margin-bottom: 0; } .card ul { margin-bottom: 0; } /* ------------------------------------------------------------------- steps */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 24px; max-width: none; } .steps > li { counter-increment: step; position: relative; padding: 22px 0 18px 74px; border-top: 1px solid var(--rule-soft); } .steps > li:first-child { border-top: 1px solid var(--rule); } .steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 20px; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px var(--accent); } .steps h3 { margin: 0 0 8px; font-size: 1.04rem; } .steps p { margin: 0 0 12px; } .steps > li > *:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ quotes */ .quotes { display: grid; gap: 0; margin: 0 0 24px; } .quote { margin: 0; padding: 24px 0 22px 26px; border-top: 1px solid var(--rule-soft); border-left: 2px solid var(--accent); } .quote:first-child { border-top: 1px solid var(--rule); } .quote blockquote { margin: 0; } .quote blockquote p { margin: 0 0 14px; font-size: 1.16rem; line-height: 1.5; color: var(--text); max-width: 52ch; } .quote blockquote p::before { content: '\\201C'; color: var(--accent); } .quote blockquote p::after { content: '\\201D'; color: var(--accent); } .quote figcaption { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); } .quote-author { color: var(--text-2); } .quote figcaption a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; } /* -------------------------------------------------------------- link lists */ .linklist { list-style: none; padding: 0; margin: 0 0 22px; max-width: none; border-top: 1px solid var(--rule); } .linklist li { padding: 0; border-bottom: 1px solid var(--rule-soft); margin: 0; } .linklist li > a { display: block; padding: 15px 32px 15px 0; position: relative; font-family: var(--display); font-weight: 600; font-size: 15.5px; text-decoration: none; color: var(--text); } .linklist li > a::after { content: '→'; position: absolute; right: 4px; top: 15px; color: var(--text-3); transition: transform 0.2s ease, color 0.2s ease; } .linklist li:hover > a { color: var(--accent); } .linklist li:hover > a::after { color: var(--accent); transform: translateX(4px); } .linklist li > span { display: block; color: var(--text-2); font-size: 15px; margin: -8px 0 15px; max-width: var(--measure); } /* --------------------------------------------------------------------- faq */ .faq .qa { border-top: 1px solid var(--rule-soft); padding: 22px 0 4px; } .faq .qa:first-of-type { border-top: 1px solid var(--rule); } .faq .qa h3 { margin: 0 0 10px; font-size: 1.08rem; max-width: 46ch; } .faq .qa p { color: var(--text-2); } /* -------------------------------------------------------- source reference */ .reflist { list-style: none; counter-reset: ref; padding: 0; margin: 0; border-top: 1px solid var(--rule); } .reflist li { counter-increment: ref; position: relative; padding: 14px 0 14px 42px; border-bottom: 1px solid var(--rule-soft); margin: 0; } .reflist li::before { content: '[' counter(ref) ']'; position: absolute; left: 0; top: 15px; font-family: var(--mono); font-size: 11.5px; color: var(--accent); } .reflist a { font-size: 15.5px; text-decoration: none; border-bottom: 1px solid var(--rule); } .reflist a:hover { border-color: var(--accent); } .ref-host { display: block; font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 4px; letter-spacing: 0.04em; } /* -------------------------------------------------------------------- code */ code { font-family: var(--mono); font-size: 0.86em; background: var(--raise-2); color: var(--text); padding: 2px 6px; border: 1px solid var(--rule-soft); } pre { background: var(--raise); border: 1px solid var(--rule); border-left: 2px solid var(--accent); padding: 16px 20px; overflow-x: auto; margin: 0 0 20px; } pre code { background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.6; } /* -------------------------------------------------------------- calculator */ .calc { padding-top: 40px; } .calc-panel { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 0; margin: 0 0 18px; border: 1px solid var(--rule); background: var(--raise); } .calc-inputs { padding: 24px 26px; border-right: 1px solid var(--rule); } .calc-field + .calc-field { margin-top: 18px; } .calc-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); margin-bottom: 7px; } .calc-field output { color: var(--accent); font-size: 11px; } .calc-inputs input[type='number'] { width: 100%; min-height: 44px; padding: 8px 12px; font-family: var(--mono); font-size: 15px; color: var(--text); background: var(--ground); border: 1px solid var(--rule); font-variant-numeric: tabular-nums; } .calc-inputs input[type='number']:focus { border-color: var(--accent); outline: none; } .calc-inputs input[type='range'] { width: 100%; min-height: 30px; accent-color: var(--accent); } .calc-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .calc-tier { padding: 24px 26px; } .calc-tier-alt { border-left: 1px solid var(--rule); } .calc-tier-name { margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); } .calc-big { margin: 0 0 18px; font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1; letter-spacing: -0.035em; color: var(--text); font-variant-numeric: tabular-nums; } .calc-tier-alt .calc-big { color: var(--accent); } .calc-big-label { margin: -12px 0 18px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); } .calc-sub { margin: 0; display: grid; gap: 7px; } .calc-sub > div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule-soft); padding-top: 7px; } .calc-sub dt { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); } .calc-sub dd { margin: 0; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ footer */ .site-footer { margin-top: 92px; border-top: 2px solid var(--text); background: var(--raise); padding: 46px 0 38px; } .footer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 26px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--rule); } .footer-brand { font-size: 19px; } .footer-tagline { margin: 0; color: var(--text-3); font-size: 15px; max-width: 46ch; } .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 32px 0 0; } .footer-cols h2 { font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin: 0 0 14px; } .footer-cols ul { list-style: none; margin: 0; padding: 0; } .footer-cols li { margin: 0 0 9px; } .footer-cols a { color: var(--text-2); text-decoration: none; font-size: 14.5px; font-family: var(--display); } .footer-cols a:hover { color: var(--accent); } .footer-disclaimer { margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); color: var(--text-2); font-size: 14.5px; max-width: 72ch; } .footer-legal { color: var(--text-3); font-size: 13px; margin: 8px 0 0; max-width: 72ch; } /* -------------------------------------------------------------- responsive */ @media (max-width: 1000px) { .layout { grid-template-columns: 1fr; gap: 0; } .rail { position: static; padding-top: 34px; order: -1; border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 8px; } .toc ol { columns: 2; column-gap: 30px; } .toc li { break-inside: avoid; } } @media (max-width: 720px) { body { font-size: 17px; } .wrap { width: calc(100% - 32px); } .grid { grid-template-columns: 1fr; } .calc-panel { grid-template-columns: 1fr; } .calc-inputs { border-right: 0; border-bottom: 1px solid var(--rule); } .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spec-row { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; } .toc ol { columns: 1; } h1 { max-width: none; } } @media (max-width: 460px) { /* The kicker wraps onto two lines here, which strands the separator dot at the end of the first line where it reads as a typo. */ .kicker .dot { display: none; } .footer-cols { grid-template-columns: 1fr; } .calc-readout { grid-template-columns: 1fr; } .calc-tier-alt { border-left: 0; border-top: 1px solid var(--rule); } .nav { padding: 12px 0; } .menu { width: 100%; gap: 8px 16px; } .steps > li { padding-left: 0; padding-top: 44px; } .steps > li::before { top: 18px; } } @media print { .site-header, .rail, .grain, .skip { display: none; } body { background: #fff; color: #000; font-size: 11pt; } .layout { grid-template-columns: 1fr; } }