/* LIGHT IS THE DEFAULT (Ben, 2026-09-08). One automatic theme, light, and it is what a first-time visitor sees whatever their OS is set to. Dark is opt-in: the header toggle puts data-theme="dark" on and remembers it in localStorage, and the pre-paint script in head() re-applies it before the first frame so a reload never flashes the wrong theme. There is deliberately NO prefers-color-scheme rule and no "auto" choice in the UI — putting one back would silently override the default. So: the LIGHT block is first, the [data-theme="dark"] block below it is DARK; tell them apart by color-scheme:light vs dark, not by position. The two blocks must declare the SAME token names (values differ) or a switched theme falls back to a light value on a dark plane. --muted is WCAG AA constrained in BOTH themes: it carries .crumb/.hero-asof/ .tile-note/.hist-tick and friends at 10.5px-13px, so it needs 4.5:1 against both that theme's surfaces. Light: #73726d = 4.57:1 on --plane, 4.70:1 on --surface-1 (the old #898781 was 3.41:1 / 3.50:1, a straight AA failure). Dark keeps #898781: 5.41:1 on its --plane, 4.85:1 on its --surface-1. scripts/check-contrast.mjs measures both themes now, not just light. */ :root{ color-scheme:light; --plane:#f9f9f7; --surface-1:#fcfcfb; --ink:#0b0b0b; --ink-2:#52514e; --muted:#73726d; --grid:#e1e0d9; --border:rgba(11,11,11,.10); --up:#006300; --down:#b23a3a; --series-1:#2a78d6; --series-2:#1baf7a; --series-3:#eda100; --series-4:#008300; --series-5:#4a3aa7; --spark-1:#86b6ef; --spark-2:#1baf7a; --spark-3:#eda100; --spark-4:#008300; --spark-5:#9085e9; } :root[data-theme="dark"]{ color-scheme:dark; --plane:#0d0d0d; --surface-1:#1a1a19; --ink:#fff; --ink-2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --border:rgba(255,255,255,.10); --up:#0ca30c; --down:#e66767; --series-1:#3987e5; --series-2:#199e70; --series-3:#c98500; --series-4:#008300; --series-5:#9085e9; --spark-1:#3987e5; --spark-2:#199e70; --spark-3:#c98500; --spark-4:#008300; --spark-5:#9085e9; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--plane);color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5} a{color:inherit} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* CloudDots endorsement, with the house dots inline beside it (added 2026-07-31, Ben: the site carried no endorsement at all). The dots sit WITH the words they mean, not over the product wordmark: the motif is identical on every CloudDots product. The endorsement is its own element so deleting it is a pure deletion, per the portfolio's sellability invariant. */ .cd-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:2px} .cd-identity{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ink-2)} .cd-identity a{color:inherit;text-decoration:none;border-bottom:1px solid transparent} .cd-identity a:hover{border-bottom-color:currentColor} .cd-dots{display:inline-flex;align-items:center;gap:4px} .cd-dot{display:block;width:4px;height:4px;border-radius:50%;background:#3286fa} .site-head{display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--border); position:sticky;top:0;background:color-mix(in srgb,var(--plane) 88%,transparent); backdrop-filter:blur(8px);z-index:5;flex-wrap:wrap} .brand{font-weight:650;text-decoration:none;letter-spacing:-.01em} .site-head nav{display:flex;gap:1.1rem;align-items:center;font-size:.92rem} .site-head nav a{color:var(--ink-2);text-decoration:none} .site-head nav a:hover{color:var(--ink)} /* light/dark toggle. Quiet by design: it reads as one more nav item, in the nav's own type and --ink-2 ink, with a hairline ring so it is obviously pressable. Both themes get the same treatment because every value in it is a token. No emoji, no icon font — a one-word label ("Dark" / "Light") says what the next click does, and the aria-label spells it out. */ .theme-toggle{font:inherit;color:var(--ink-2);background:transparent; border:1px solid var(--border);border-radius:999px;padding:.18rem .62rem; line-height:1.5;cursor:pointer} .theme-toggle:hover{color:var(--ink);border-color:var(--ink-2)} .theme-toggle:focus-visible{outline:2px solid var(--series-1);outline-offset:2px} .page{max-width:960px;margin:0 auto;padding:1.5rem 1.25rem 2rem} .crumb{font-size:.85rem;color:var(--muted);margin:.25rem 0 1rem} .crumb a{color:var(--ink-2);text-decoration:none} .hero{padding:1rem 0 1.5rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem} .hero h1{font-size:clamp(1.8rem,4.5vw,2.7rem);margin:.4rem 0 .2rem;letter-spacing:-.02em;line-height:1.05} .hero-q{color:var(--ink-2);font-size:1.05rem;margin:.2rem 0} .hero-head{font-weight:600;font-size:1.05rem;margin:.5rem 0 0} .hero-asof{color:var(--muted);font-weight:400;font-size:.9rem} .hero-home h1{font-size:clamp(2rem,5vw,3.1rem)} .hero-lede{color:var(--ink-2);font-size:1.08rem;max-width:60ch} .pill{display:inline-block;font-size:.72rem;text-transform:uppercase; letter-spacing:.04em;font-weight:600;padding:.15rem .5rem;border-radius:999px; border:1px solid var(--border);color:var(--ink-2)} .pill-rare{background:color-mix(in srgb,var(--series-5) 14%,transparent)} .pill-metabolic{background:color-mix(in srgb,var(--series-3) 16%,transparent)} .pill-oncology{background:color-mix(in srgb,var(--series-1) 13%,transparent)} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.9rem} .tile{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem} .tile-pending{opacity:.72} .tile-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.55rem} .dot{width:9px;height:9px;border-radius:50%;flex:none} .dot-1{background:var(--series-1)}.dot-2{background:var(--series-2)} .dot-3{background:var(--series-3)}.dot-4{background:var(--series-4)}.dot-5{background:var(--series-5)} .tile-label{font-weight:600;font-size:.95rem} .tile-sub{font-size:.75rem;color:var(--muted);margin-left:auto} .tile-row{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem} .tile-value{font-size:1.9rem;font-weight:650;letter-spacing:-.02em;line-height:1} .tile-unit{display:block;font-size:.72rem;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:.2rem} /* The sparkline carries a fixed width="132" and sits in a nowrap flex row (.tile-row / .card-row) whose track can be as narrow as 215px (.tiles) or 240px (.grid), i.e. ~181px / ~206px of content box. flex:none made it un-shrinkable, so any row that ran over spilled the graph past the card's right edge instead of fitting it. It now shrinks (min-width:0 clears the automatic minimum size of a replaced element); preserveAspectRatio="none" keeps the plot filling whatever width it gets. Fixed cap, never wider than 132. */ .spark{display:block;flex:0 1 auto;min-width:0;max-width:132px;overflow:visible} .tile-delta{margin-top:.5rem;font-size:.92rem;font-weight:600} /* SUPPRESSED PERCENTAGE (SUPPRESS_MIN_MONTHS / MIN_MOVER). Occupies the same slot as .tile-delta and is deliberately quieter than it: the replacement is a ranking, not a movement, and must not read as a headline number. Ink tokens only, so both themes stay AA (scripts/check-contrast.mjs). */ .tile-nopct{margin-top:.5rem;font-size:.92rem;font-weight:600;color:var(--ink-2)} .tile-pctl{font-weight:700} .tile-pctl-note{color:var(--muted);font-weight:400;font-size:.8rem;margin-left:.35rem} .delta-up{color:var(--up)} .delta-down{color:var(--down)} .delta-flat{color:var(--muted)} .delta-base{color:var(--muted);font-weight:400;font-size:.8rem} .tile-share{font-size:.78rem;color:var(--ink-2);margin-top:.15rem} .tile-note{font-size:.75rem;color:var(--muted);margin-top:.45rem;line-height:1.35} .tile-lowvol{margin-left:.45rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.03em; color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:.02rem .38rem; vertical-align:.08em;font-weight:600} /* provisional-settling disclosure chip (publications backfill window) */ .settling-chip{display:inline-block;margin-left:.45rem;font-size:.64rem;text-transform:uppercase; letter-spacing:.03em;color:var(--series-3);border:1px solid var(--series-3);border-radius:999px; padding:.02rem .4rem;vertical-align:.09em;font-weight:700;white-space:nowrap;cursor:help} .settling-chip-sep{padding:0 .12em;opacity:.7} .settling-note{font-size:.72rem;color:var(--ink-2);margin-top:.4rem;line-height:1.35; border-left:2px solid var(--series-3);padding-left:.5rem} .tile-link{display:inline-block;margin-top:.55rem;font-size:.8rem;font-weight:600; color:var(--series-1);text-decoration:none} .tile-link:hover{text-decoration:underline} .spark-hit{cursor:crosshair} /* per-chart download control (PNG / SVG / CSV / JSON) */ .dl{position:relative;display:inline-block;margin-top:.55rem} .dl-sum{display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;list-style:none; font-size:.78rem;font-weight:600;color:var(--series-1);user-select:none} .dl-sum::-webkit-details-marker{display:none} .dl-sum:hover{text-decoration:underline} .dl-menu{position:absolute;z-index:6;left:0;top:calc(100% + .35rem);min-width:200px; background:var(--surface-1);border:1px solid var(--border);border-radius:10px; padding:.35rem;box-shadow:0 6px 22px rgba(0,0,0,.14)} .hist .dl{margin-top:0;margin-left:auto} .hist-head .dl-menu,.dl-menu.dl-right{left:auto;right:0} .dl-opt{display:block;width:100%;text-align:left;background:transparent;border:0; border-radius:7px;padding:.4rem .55rem;font-size:.83rem;color:var(--ink);cursor:pointer; font-family:inherit} .dl-opt:hover{background:var(--plane)} .dl-note{margin:.35rem .1rem 0;padding-top:.35rem;border-top:1px solid var(--border); font-size:.68rem;color:var(--muted);line-height:1.35;max-width:210px} /* long-run history chart (since-2000 where the depth exists) */ /* interpretation / percentile layer (B4) */ .interp{background:var(--surface-1);border:1px solid var(--border);border-radius:14px; padding:1.2rem 1.3rem;margin:1.6rem 0} .interp-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem} .interp-head h2{font-size:1.15rem;letter-spacing:-.01em;margin:0} .interp-sub{font-size:.82rem;color:var(--muted)} .interp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.85rem} .icard{background:var(--plane);border:1px solid var(--border);border-radius:11px;padding:.8rem .85rem} .icard-h{display:flex;align-items:center;gap:.4rem} .icard-l{font-weight:650;font-size:.93rem} .icard-prov{margin-left:auto;font-size:.6rem;text-transform:uppercase;letter-spacing:.03em; font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:999px; padding:.02rem .38rem;white-space:nowrap} .icard-pctl{font-size:1.7rem;font-weight:750;letter-spacing:-.02em;line-height:1.05; margin:.5rem 0 .05rem;font-variant-numeric:tabular-nums} .icard-ord{font-size:.72rem;font-weight:600;color:var(--muted);margin-left:.3rem;letter-spacing:0} .icard-band{font-size:.82rem;font-weight:600;margin-bottom:.5rem} .iband-peak{color:var(--up)}.iband-high{color:var(--up)} .iband-mid{color:var(--ink-2)} .iband-low{color:var(--down)}.iband-trough{color:var(--down)} .igauge{position:relative;height:6px;border-radius:999px;background:var(--grid); overflow:hidden;margin:.15rem 0 .5rem} .igauge-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;opacity:.55} .igauge-peak,.igauge-high{background:var(--up)} .igauge-mid{background:var(--series-1)} .igauge-low,.igauge-trough{background:var(--down)} .igauge-mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink); transform:translateX(-1px)} .icard-detail{font-size:.73rem;color:var(--muted);line-height:1.35;font-variant-numeric:tabular-nums} .interp-note{font-size:.76rem;color:var(--muted);line-height:1.45;margin:.95rem 0 0;max-width:80ch} .interp-note strong{color:var(--ink-2);font-weight:600} .interp-note em{font-style:normal;font-weight:700;color:var(--ink-2)} .hist{background:var(--surface-1);border:1px solid var(--border);border-radius:14px; padding:1.2rem 1.3rem;margin:1.6rem 0} .hist-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem} .hist-head h2{font-size:1.15rem;letter-spacing:-.01em;margin:0} .hist-sub{font-size:.82rem;color:var(--muted)} .hist-panels{display:flex;flex-direction:column;gap:.35rem} .hist-row{display:grid;grid-template-columns:168px 1fr;align-items:center;gap:.6rem} .hist-meta{display:flex;align-items:center;gap:.34rem;flex-wrap:wrap;font-size:.78rem;min-width:0} .hist-name{font-weight:600} .hist-span{color:var(--muted);font-size:.7rem;font-variant-numeric:tabular-nums} .hist-peak{color:var(--muted);font-size:.7rem;font-variant-numeric:tabular-nums;margin-left:auto} .hist-pending{font-size:.62rem;text-transform:uppercase;letter-spacing:.03em;font-weight:700; color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:.02rem .38rem;white-space:nowrap} .hist-plot{display:block;width:100%;height:44px;background:var(--plane); border:1px solid var(--border);border-radius:7px} .hist-grid{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke} .hist-axis-row{margin-top:.15rem} .hist-axis{display:block;width:100%;height:15px;overflow:visible} .hist-tick{fill:var(--muted);font-size:9px;font-family:system-ui,sans-serif; font-variant-numeric:tabular-nums} .hist-note{font-size:.76rem;color:var(--muted);line-height:1.45;margin:.95rem 0 0;max-width:78ch} .hist-note strong{color:var(--ink-2);font-weight:600} @media (max-width:560px){.hist-row{grid-template-columns:1fr;gap:.15rem} .hist-peak{margin-left:.4rem}.hist-axis-row .hist-meta{display:none}} /* drill-down: who's driving it */ .drill{background:var(--surface-1);border:1px solid var(--border);border-radius:14px; padding:1.2rem 1.3rem;margin:1.6rem 0} .drill-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem} .drill-head h2{font-size:1.15rem;letter-spacing:-.01em;margin:0} .drill-sub{font-size:.82rem;color:var(--muted)} .drill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.85rem} .dcard{background:var(--plane);border:1px solid var(--border);border-radius:11px;padding:.8rem .85rem} .dcard-h{display:flex;align-items:center;gap:.4rem} .dcard-l{font-weight:650;font-size:.93rem} .dcard-sub{font-size:.69rem;color:var(--muted);margin:.18rem 0 .55rem} .dcard-stat{font-size:.76rem;color:var(--ink-2);margin-bottom:.55rem;line-height:1.3} .dcard-stat b{font-size:1.05rem;color:var(--ink);font-weight:700} .spon-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem} .spon{position:relative;display:flex;align-items:center;gap:.5rem;padding:.36rem .5rem; border-radius:8px;overflow:hidden;isolation:isolate} .spon-bar{position:absolute;inset:0 auto 0 0;z-index:-1;border-radius:8px; background:color-mix(in srgb,var(--series-2) 16%,transparent)} .spon-bar-1{background:color-mix(in srgb,var(--series-1) 16%,transparent)} .spon-bar-2{background:color-mix(in srgb,var(--series-2) 16%,transparent)} .spon-bar-3{background:color-mix(in srgb,var(--series-3) 18%,transparent)} .spon-bar-4{background:color-mix(in srgb,var(--series-4) 16%,transparent)} .spon-bar-5{background:color-mix(in srgb,var(--series-5) 16%,transparent)} .spon-name{flex:1;min-width:0} .spon-nm{display:block;font-size:.83rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spon-sub{display:block;font-size:.66rem;color:var(--muted);font-weight:400; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spon-n{font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)} .rt-det{margin-top:1.2rem;border-top:1px solid var(--border);padding-top:.8rem} .rt-det summary{cursor:pointer;font-weight:600;font-size:.85rem;color:var(--series-1)} .rt-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.3rem;margin-top:.9rem} .rt-group h4{display:flex;align-items:center;gap:.4rem} .rt-plain{font-size:.9rem;font-weight:600} .cls{font-size:.64rem;text-transform:uppercase;letter-spacing:.03em;font-weight:700; padding:.06rem .4rem;border-radius:999px;border:1px solid var(--border);color:var(--muted);white-space:nowrap} .cls-industry{color:#fff;background:var(--series-2);border-color:var(--series-2)} .rt-h{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted); font-weight:600;margin:1.1rem 0 .5rem} .rt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem} .rt a{font-size:.92rem;font-weight:600;color:var(--series-1);text-decoration:none;line-height:1.3} .rt a:hover{text-decoration:underline} .rt-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.25rem} .rt-tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;font-weight:600;color:var(--ink-2); background:var(--plane);border:1px solid var(--border);border-radius:999px;padding:.05rem .4rem} .rt-spon{font-size:.8rem;color:var(--muted)} .drill-foot{font-size:.72rem;color:var(--muted);margin:.9rem 0 0} .hero-foundation{font-size:.85rem;color:var(--muted);margin:.5rem 0 0} .hero-foundation a{color:var(--ink-2);text-decoration:none} .hero-foundation a:hover{color:var(--ink)} .cta{background:var(--surface-1);border:1px solid var(--border);border-radius:14px; padding:1.4rem 1.4rem;margin:1.8rem 0} .cta h2{margin:.1rem 0 .3rem;font-size:1.35rem;letter-spacing:-.01em} .cta p{color:var(--ink-2);margin:.2rem 0 .9rem;max-width:56ch} .cta-form{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem} .cta-form input{flex:1 1 240px;padding:.65rem .8rem;border:1px solid var(--border); border-radius:9px;background:var(--plane);color:var(--ink);font-size:1rem} .btn{display:inline-block;padding:.65rem 1.1rem;border-radius:9px;font-weight:600; text-decoration:none;cursor:pointer;border:1px solid transparent;font-size:.98rem} .btn-ghost{background:transparent;border-color:var(--border);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink-2)} .method{margin:1.8rem 0} .method h2{font-size:1.3rem;letter-spacing:-.01em;margin:.2rem 0 .3rem} .method-lead{color:var(--ink-2);max-width:60ch;margin:.2rem 0 .9rem} .method-table{width:100%;border-collapse:collapse;font-size:.9rem; border:1px solid var(--border);border-radius:10px;overflow:hidden} .method-table th,.method-table td{text-align:left;padding:.55rem .7rem; border-bottom:1px solid var(--border);vertical-align:top} .method-table th{width:34%;color:var(--ink-2);font-weight:600;background:var(--surface-1)} .method-table td{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:.82rem;color:var(--ink)} .method-table tr:last-child th,.method-table tr:last-child td{border-bottom:none} .method-notes{margin-top:.7rem;font-size:.88rem;color:var(--ink-2)} .method-notes summary{cursor:pointer;color:var(--series-1);font-weight:600} .cat-h{font-size:1.1rem;color:var(--ink);margin:1.6rem 0 .7rem;font-weight:700;letter-spacing:-.01em} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem} .card{display:flex;flex-direction:column;gap:.35rem;background:var(--surface-1); border:1px solid var(--border);border-radius:12px;padding:1rem;text-decoration:none; transition:border-color .15s,transform .15s} .card:hover{border-color:var(--ink-2);transform:translateY(-2px)} .card-name{font-size:1.15rem;font-weight:650;letter-spacing:-.01em} .card-row{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem} .card-delta{font-size:1.25rem;font-weight:650} .card-delta-l{display:block;font-size:.72rem;color:var(--muted);font-weight:400} /* settling chip on its own line: it is white-space:nowrap, so sharing the sparkline's nowrap row overflowed the card (see .spark above). */ .card-chip{display:block;line-height:1.25;margin-top:.1rem} .card-chip .settling-chip{margin-left:0} .card-sigs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem} .sig{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:600; padding:.1rem .4rem;border-radius:999px;border:1px solid var(--border);color:var(--ink-2)} .sig .dot{width:6px;height:6px} .sig-up{color:var(--up)} .sig-down{color:var(--down)} .sig-flat{color:var(--muted)} .sig-low{opacity:.55} .movers{margin:1.6rem 0 .5rem} .movers h2{font-size:1.1rem;letter-spacing:-.01em;margin:.2rem 0 .7rem} .movers-sub{font-size:.8rem;font-weight:400;color:var(--muted)} .mover-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;counter-reset:mv} .mover-list a{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;text-decoration:none; background:var(--surface-1);border:1px solid var(--border);border-radius:10px;transition:border-color .15s} .mover-list a:hover{border-color:var(--ink-2)} .mv-rank{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted);min-width:1.2em} .mv-name{font-weight:600;flex:1} .mv-delta{font-weight:700;font-variant-numeric:tabular-nums} .how{margin:2rem 0 1rem} .how h2{font-size:1.3rem;letter-spacing:-.01em} .how p{color:var(--ink-2);max-width:64ch} .updated{font-size:.8rem;color:var(--muted);margin-top:1.5rem} .site-foot{max-width:960px;margin:1rem auto 0;padding:1.4rem 1.25rem 2.5rem; border-top:1px solid var(--border);color:var(--ink-2)} .attrib{list-style:none;padding:0;margin:0 0 .8rem;display:flex;flex-direction:column;gap:.3rem;font-size:.85rem} .foot-meta{font-size:.8rem;color:var(--muted);max-width:70ch} @media (max-width:560px){.tile-value{font-size:1.6rem}.site-head nav{gap:.75rem}}