/* --------------------------------------------------------------------------- Signal articles. Loaded only by the generated article pages, through the set's head_extra in data/articles.json, rather than from careers.html where the rest of the chrome comes from. Putting it there would make all 103 pages fetch a stylesheet five of them use. The prefix is `art-`. `c-art` in engine.css is the full-width illustration and belongs to the `c-` family, so there is no collision; `art-` itself was free across every stylesheet when this was added. Grep before adding to it: two stylesheets that both load can collide silently, which is how the tool directory's logo ended up at 24px. --------------------------------------------------------------------------- */ /* ---------- byline ---------- */ .art-by{font-size:var(--t-fine);color:var(--ink-muted);margin:0 0 clamp(28px,4vw,40px); padding-bottom:18px;border-bottom:1px solid var(--hairline)} .art-by a{color:var(--ink-copy);text-underline-offset:3px} .art-sep{margin:0 .5em;color:var(--hairline-strong)} .art-upd{margin-left:.5em} /* ---------- body rhythm ---------- The generated body is a flat list of blocks, so spacing is set here rather than by a wrapper per section. h2 gets a larger top margin than its bottom so a heading binds to the text under it rather than floating between two. */ /* site.css sets .g-body h2 to Plus Jakarta at 19px. That is the right treatment for a tool page, where the two h2s are fixed labels on a reference card. An article's section headings are what the page SAYS, which CLAUDE.md puts in Playfair, so the article body carries its own class and overrides only for itself. h3 stays sans: a smaller Playfair directly under a Playfair h2 stops reading as a level down. */ .art-body .wrap-narrow > h2{font-family:var(--font-display);font-weight:600; font-size:var(--d-md);line-height:1.12;letter-spacing:-.015em;color:var(--ink); margin:clamp(44px,5vw,64px) 0 14px;scroll-margin-top:110px;text-wrap:balance} .art-body .wrap-narrow > h3{font-family:var(--font-sans);font-size:var(--t-xl);font-weight:700; color:var(--ink);margin:clamp(28px,3vw,36px) 0 10px;scroll-margin-top:110px} /* ---------- tables ---------- role="region" + tabindex="0" in the markup makes an overflowing table reachable by keyboard, which a bare overflow:auto is not. The scrollbar only appears when the table is actually wider than the column, so on desktop it is invisible. */ /* The right-edge shadow appears only while there is more table to scroll to, and goes when you reach the end. background-attachment does the work: the two cover gradients scroll WITH the content (local) so they slide away from the edge, while the two shadows stay pinned to the frame (scroll) and are revealed underneath. No JavaScript and no resize listener, and nothing is shown on a table that fits. */ .art-table{overflow-x:auto;margin:22px 0 26px;border:1px solid var(--hairline); border-radius:var(--r-md);background:var(--surface-raised); background-image: linear-gradient(to right,var(--surface-raised) 40%,rgba(255,255,255,0)), linear-gradient(to left,var(--surface-raised) 40%,rgba(255,255,255,0)), linear-gradient(to right,rgba(23,23,23,.13),rgba(23,23,23,0)), linear-gradient(to left,rgba(23,23,23,.13),rgba(23,23,23,0)); background-position:left center,right center,left center,right center; background-repeat:no-repeat; background-size:44px 100%,44px 100%,16px 100%,16px 100%; background-attachment:local,local,scroll,scroll} .art-table:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .art-table table{border-collapse:collapse;width:100%;min-width:30rem;font-size:var(--t-sm)} .art-table th,.art-table td{text-align:left;padding:12px 16px;vertical-align:top; border-bottom:1px solid var(--hairline)} .art-table thead th{font-family:var(--font-sans);font-size:var(--t-fine);font-weight:700; letter-spacing:.01em;color:var(--ink);background:var(--surface-sunken); border-bottom:1px solid var(--hairline-strong);white-space:nowrap} .art-table tbody tr:last-child td{border-bottom:0} .art-table td:first-child{color:var(--ink);font-weight:600} .art-table td{color:var(--ink-copy);line-height:1.6} .art-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} /* ---------- sources and notes ---------- */ .art-src{font-size:var(--t-fine);color:var(--ink-muted);line-height:1.65; border-left:2px solid var(--hairline-strong);padding-left:16px;margin:0 0 20px} /* ---------- numbered steps ---------- */ .art-steps{counter-reset:s;list-style:none;margin:20px 0 22px;padding:0; display:grid;gap:11px;max-width:64ch} .art-steps li{counter-increment:s;position:relative;padding-left:40px; font-size:var(--t-body);line-height:1.65;color:var(--ink-copy)} .art-steps li::before{content:counter(s);position:absolute;left:0;top:-1px; width:26px;height:26px;border-radius:50%;background:var(--surface-sand); color:var(--brand-ink);font-family:var(--font-sans);font-size:var(--t-meta); font-weight:700;display:grid;place-items:center} /* ---------- calculator ---------- Ungated and client-side only: nothing it computes leaves the page. The default values are the worked example in the section above, which is what keeps the figures honest with JavaScript off: the numbers on screen are already correct and simply stop responding. */ .art-calc{margin:24px 0 28px;padding:clamp(20px,3vw,28px);background:var(--surface-raised); border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-card)} .art-calc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px clamp(16px,3vw,28px)} .art-calc-field{margin:0;display:flex;flex-direction:column;gap:6px} .art-calc-field label{font-family:var(--font-sans);font-size:var(--t-fine);font-weight:700; color:var(--ink)} .art-calc-hint{font-size:var(--t-meta);color:var(--ink-muted);line-height:1.45; margin-top:-2px} .art-calc-in{display:flex;align-items:center;gap:0;border:1px solid var(--hairline-strong); border-radius:var(--r-sm);background:var(--surface-page);overflow:hidden;margin-top:auto} .art-calc-in:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,102,2,.14)} .art-calc-unit{padding:0 0 0 12px;color:var(--ink-muted);font-size:var(--t-sm)} .art-calc-in input{flex:1;min-width:0;border:0;background:transparent;padding:10px 12px; font:inherit;font-size:var(--t-sm);color:var(--ink);font-variant-numeric:tabular-nums} .art-calc-in input:focus{outline:none} .art-calc-out{margin-top:clamp(20px,3vw,26px);padding-top:20px; border-top:1px solid var(--hairline)} .art-calc-out dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px clamp(16px,3vw,28px)} .art-calc-out dl > div{display:flex;flex-direction:column;gap:3px} .art-calc-out dt{font-family:var(--font-sans);font-size:var(--t-meta);font-weight:700; text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted)} .art-calc-out dd{margin:0;font-family:var(--font-display);font-size:var(--d-sm); line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums} /* the one output that can read as a sentence rather than a figure */ .art-calc-out dd.is-text{font-family:var(--font-sans);font-size:var(--t-sm); font-weight:600;line-height:1.4;color:var(--ink-copy);align-self:center} .art-calc-note{font-size:var(--t-fine);color:var(--ink-muted);line-height:1.6; margin:22px 0 0;padding-top:18px;border-top:1px solid var(--hairline);max-width:62ch} /* ---------- keep reading ---------- Last thing on the page, under the article's own CTA. CLAUDE.md gives the orange button first claim on attention, so this is deliberately quiet: a small caps label, the headlines in the body serif, hairlines instead of cards. A reader who is not going to book a call is choosing a next question, and that choice should be available without competing with the one offer on the page. Built as a