/* ===========================================================================
   davincible house style, v1
   https://davincible.xyz/house/v1/house.css

   The look of davincible.xyz for pages published under /p/: the Tape ground,
   1px keylines, mono caps labels, zero radius, Archivo wide for display, and
   one orange that means "look here" or "press this".

   Two themes. Dark (the site) is the default. <html data-theme="paper"> is
   white, for long reading and printing, and matches the PDF visitor report.
   Print always uses paper. A theme can also be set on any element, which is
   how the showcase shows both on one page.

   Every class starts with dv-. No JavaScript is needed for anything here.

   Versioning. This file is served immutable for a year. It never changes
   once shipped: a fix or a new component goes into /house/v2/, and pages
   already published keep the version they were written against.
   Components and examples: templates/house/showcase in the davincible repo.
   =========================================================================== */

/* ------------------------------------------------------------------ fonts
   The site's own subset faces. Archivo is cut to 650-800 weight and 112-125%
   width, so display text stays inside that range. The fallback faces are
   Arial and Menlo resized to the real faces' average width and line metrics,
   so the page barely moves when the fonts arrive. */

@font-face{font-family:'Archivo';src:url('/fonts/Archivo-Variable.woff2') format('woff2');font-weight:650 800;font-stretch:112% 125%;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/fonts/InterTight-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/fonts/InterTight-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/fonts/InterTight-SemiBold.woff2') format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:'Archivo fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Arial');font-weight:650 800;size-adjust:116%;ascent-override:75.7%;descent-override:18.1%;line-gap-override:0%}
@font-face{font-family:'Inter Tight fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:95.2%;ascent-override:101.8%;descent-override:25.3%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono fallback';src:local('Menlo'),local('Consolas'),local('Liberation Mono'),local('Courier New');size-adjust:99.7%;ascent-override:102.3%;descent-override:30.1%;line-gap-override:0%}

/* ------------------------------------------------------------------ tokens */

:root,[data-theme='dark']{
  --dv-bg:#0a0a0b;          /* the ground */
  --dv-panel:#141518;       /* one step up, used sparingly */
  --dv-ink:#f4f2ed;         /* text */
  --dv-muted:#8b8c92;       /* secondary text, 5.9:1 */
  --dv-faint:#808289;       /* tertiary text, 5.1:1 */
  --dv-line:#26282e;        /* hairlines */
  --dv-line-strong:#6b6f7a; /* control borders and baselines, 3.9:1 */
  --dv-signal:#ff4d00;      /* the one orange: fills, rules, bars */
  --dv-signal-text:#ff4d00; /* orange as text, 6:1 */
  --dv-signal-ink:#0a0a0b;  /* text on orange */
  --dv-mint:#b9ecd0;        /* the pixel-art wall, behind images */
  --dv-live:#00d26a;        /* a status that is running */
  --dv-series-2:#6b6f7a;    /* second and third chart series */
  --dv-series-3:#b3b5bb;
  color-scheme:dark;
}
[data-theme='paper']{
  --dv-bg:#ffffff;
  --dv-panel:#f4f4f2;
  --dv-ink:#0a0a0b;
  --dv-muted:#55575d;
  --dv-faint:#6b6d74;
  --dv-line:#dedfe2;
  --dv-line-strong:#8a8d96;
  --dv-signal:#ff4d00;
  --dv-signal-text:#c93b00;
  --dv-signal-ink:#0a0a0b;
  --dv-mint:#b9ecd0;
  --dv-live:#00783c;
  --dv-series-2:#8a8d96;
  --dv-series-3:#c6c8cd;
  color-scheme:light;
}
:root{
  --dv-display:'Archivo','Archivo fallback','Helvetica Neue',Arial,sans-serif;
  --dv-text:'Inter Tight','Inter Tight fallback','Helvetica Neue',Arial,sans-serif;
  --dv-mono:'JetBrains Mono','JetBrains Mono fallback',ui-monospace,Menlo,monospace;
  /* spacing: 4 8 12 16 24 32 48 64 96 128 */
  --dv-s1:4px;--dv-s2:8px;--dv-s3:12px;--dv-s4:16px;--dv-s5:24px;--dv-s6:32px;--dv-s7:48px;--dv-s8:64px;--dv-s9:96px;--dv-s10:128px;
  --dv-gutter:48px;
  --dv-width:1104px;
  --dv-measure:68ch;
  --dv-ease:cubic-bezier(.16,.84,.16,1);
}
@media (max-width:640px){:root{--dv-gutter:20px}}

/* ------------------------------------------------------------------ base */

[data-theme]{background:var(--dv-bg);color:var(--dv-ink)}
html{background:var(--dv-bg);color:var(--dv-ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--dv-line-strong) var(--dv-bg);scrollbar-width:thin}
body{margin:0;background:var(--dv-bg);color:var(--dv-ink);font-family:var(--dv-text);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word}
*,*::before,*::after{box-sizing:border-box}
:where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,pre,table){margin:0}
:where(img,svg,video){max-width:100%;height:auto}
:where(a){color:inherit}
:where(b,strong){font-weight:600}
[hidden]{display:none!important}
::selection{background:var(--dv-signal);color:var(--dv-signal-ink)}
:focus-visible{outline:2px solid var(--dv-signal);outline-offset:2px}

.dv-shell{width:min(100% - 2 * var(--dv-gutter),var(--dv-width));margin-inline:auto}
.dv-main{padding-bottom:var(--dv-s9)}
.dv-skip{position:absolute;left:var(--dv-gutter);top:-100px;z-index:10;padding:10px 14px;background:var(--dv-signal);color:var(--dv-signal-ink);font:500 12px/1 var(--dv-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.dv-skip:focus{top:12px}

/* Small type roles, usable on any element. */
.dv-mono{font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-muted)}
.dv-muted{color:var(--dv-muted)}
.dv-signal{color:var(--dv-signal-text)}
.dv-num{font-variant-numeric:tabular-nums}
.dv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ masthead and wordmark
   The mark is the site's: the word cut through the middle, the lower half
   pushed right, an orange rule in the cut under the V. Metrics are Archivo's. */

.dv-mast{min-height:88px;display:flex;align-items:center;gap:var(--dv-s5)}
.dv-mast__meta{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--dv-s2) var(--dv-s5);text-align:right}
.dv-mast__meta a{text-decoration:none;transition:color .15s}
.dv-mast__meta a:hover{color:var(--dv-ink)}

.dv-mark{--asc:.88em;--desc:.21em;--cap:.687em;--kerf-h:.075em;--shift:.055em;
  --baseline:calc((1em - var(--asc) - var(--desc)) / 2 + var(--desc));
  --cut-y:calc(1em - var(--baseline) - var(--cap) / 2);
  display:inline-flex;align-items:baseline;padding-right:var(--shift);color:var(--dv-ink);text-decoration:none;
  font-family:var(--dv-display);font-weight:750;font-stretch:112%;font-size:17px;letter-spacing:.02em;line-height:1;white-space:nowrap}
.dv-mark__cut{position:relative;display:inline-block}
.dv-mark__sizer{visibility:hidden}
.dv-mark__top,.dv-mark__bottom{position:absolute;left:0;top:0}
.dv-mark__top{clip-path:inset(0 -10% calc(100% - var(--cut-y)) -10%)}
.dv-mark__bottom{clip-path:inset(var(--cut-y) -10% -10% -10%);transform:translateX(var(--shift));transition:transform 320ms var(--dv-ease)}
/* The rule hangs off the hidden sizer's V, so it sits under that letter whatever the face does. */
.dv-mark__v{position:relative}
.dv-mark__v::after{content:'';visibility:visible;position:absolute;left:0;width:calc(100% - .02em);top:calc(var(--asc) - var(--cap) / 2 - var(--kerf-h) / 2);height:var(--kerf-h);background:var(--dv-signal);transition:opacity 320ms var(--dv-ease)}
.dv-mark__cut::after{content:'';position:absolute;left:0;right:0;top:calc(var(--cut-y) - var(--kerf-h) / 2);height:var(--kerf-h);background:var(--dv-signal);transform:scaleX(0);transform-origin:25% 50%;transition:transform 320ms var(--dv-ease)}
a.dv-mark:hover .dv-mark__bottom{transform:translateX(.16em)}
a.dv-mark:hover .dv-mark__cut::after{transform:scaleX(1)}
a.dv-mark:focus-visible{outline-offset:6px}
.dv-mark--large{font-size:clamp(32px,5vw,56px)}

/* ------------------------------------------------------------------ page head */

.dv-intro{padding-block:var(--dv-s9) 72px}
.dv-kicker{font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-muted);margin-bottom:var(--dv-s5)}
.dv-kicker b{font-weight:500;color:var(--dv-signal-text)}
.dv-title{font-family:var(--dv-display);font-weight:750;font-stretch:112%;font-size:clamp(48px,7.4vw,104px);letter-spacing:-.03em;line-height:1;text-wrap:balance}
/* A sentence rather than a word: the site's article heading. */
.dv-title--sentence{font-weight:800;font-stretch:125%;font-size:clamp(32px,4.6vw,60px);letter-spacing:-.025em;line-height:1.02;max-width:20ch}
.dv-lead{margin-top:22px;font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--dv-muted);max-width:46ch}
.dv-lead strong,.dv-lead b{color:var(--dv-ink);font-weight:600}
.dv-meta{margin-top:var(--dv-s6);display:flex;flex-wrap:wrap;gap:var(--dv-s2) 0}
.dv-meta>*{font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-muted);padding-right:var(--dv-s4);margin-right:var(--dv-s4);border-right:1px solid var(--dv-line)}
.dv-meta>*:last-child{border-right:0;margin-right:0;padding-right:0}
.dv-meta b{font-weight:500;color:var(--dv-ink)}
@media (max-width:640px){.dv-meta{flex-direction:column;gap:6px}.dv-meta>*{border-right:0;margin-right:0;padding-right:0}.dv-mast{min-height:64px;gap:var(--dv-s3)}.dv-mark{font-size:14px}.dv-intro{padding-block:var(--dv-s7) var(--dv-s6)}}

/* ------------------------------------------------------------------ numbered sections */

.dv-sec{padding-top:80px}
.dv-sec__head{display:grid;grid-template-columns:64px minmax(0,1fr);border-top:1px solid var(--dv-line);padding-top:20px;margin-bottom:var(--dv-s6)}
.dv-sec__n{grid-row:1;padding-top:9px;font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--dv-signal-text)}
.dv-sec__head h2,.dv-sec__title{grid-column:2;font-family:var(--dv-display);font-weight:700;font-stretch:112%;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.dv-sec__head p{grid-column:2;margin-top:10px;color:var(--dv-muted);font-size:16.5px;line-height:1.5;max-width:66ch}
.dv-sec__body>*+*{margin-top:var(--dv-s6)}
.dv-sub{margin:var(--dv-s7) 0 var(--dv-s4)}
.dv-sub:first-child{margin-top:0}
h3.dv-sub,h4.dv-sub{font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-ink)}
@media (max-width:640px){.dv-sec{padding-top:64px}.dv-sec__head{grid-template-columns:1fr;margin-bottom:var(--dv-s5)}.dv-sec__n{padding:0 0 var(--dv-s2)}.dv-sec__head h2,.dv-sec__title,.dv-sec__head p{grid-column:1}.dv-sec__head p{font-size:15.5px}}

/* ------------------------------------------------------------------ prose */

.dv-prose{max-width:var(--dv-measure);font-size:18px;line-height:1.6}
.dv-prose>*+*{margin-top:18px}
.dv-prose h2{margin-top:var(--dv-s7);font-family:var(--dv-display);font-weight:700;font-stretch:112%;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.02em;line-height:1.15}
.dv-prose h3{margin-top:var(--dv-s6);font-weight:600;font-size:20px;line-height:1.3}
.dv-prose h4{margin-top:var(--dv-s6);font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.dv-prose h2+*,.dv-prose h3+*,.dv-prose h4+*{margin-top:10px}
.dv-prose>:first-child{margin-top:0}
.dv-prose a,a.dv-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--dv-line-strong);text-underline-offset:.22em;transition:text-decoration-color .15s,color .15s}
.dv-prose a:hover,a.dv-link:hover{text-decoration-color:var(--dv-signal)}
.dv-prose ul,.dv-prose ol{padding-left:1.3em}
.dv-prose li+li{margin-top:6px}
.dv-prose li::marker{color:var(--dv-faint)}
.dv-prose ol>li::marker{font-family:var(--dv-mono);font-size:.8em}
.dv-prose blockquote{padding-left:18px;border-left:2px solid var(--dv-line-strong);color:var(--dv-muted)}
.dv-prose hr{border:0;border-top:1px solid var(--dv-line);margin-block:var(--dv-s7)}
.dv-prose code,.dv-code-inline{font-family:var(--dv-mono);font-variant-ligatures:none;font-size:.84em;padding:1px 5px;background:var(--dv-panel);border:1px solid var(--dv-line)}
.dv-prose small{font-size:14px;color:var(--dv-muted)}
@media (max-width:640px){.dv-prose{font-size:17px}}

/* A quote pulled out of the text, set large. */
.dv-pull{margin-block:var(--dv-s7);padding-block:var(--dv-s5);border-block:1px solid var(--dv-line);max-width:var(--dv-measure)}
.dv-pull p{font-family:var(--dv-display);font-weight:700;font-stretch:112%;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.02em;line-height:1.15;color:var(--dv-ink)}
.dv-pull p::before{content:'';display:block;width:32px;height:3px;margin-bottom:var(--dv-s4);background:var(--dv-signal)}
.dv-pull footer{margin-top:var(--dv-s4);font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-muted)}

/* ------------------------------------------------------------------ stat cards */

.dv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--dv-line);border:1px solid var(--dv-line)}
.dv-stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dv-stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dv-stat{background:var(--dv-bg);padding:20px 24px 22px;display:flex;flex-direction:column;min-width:0}
.dv-stat__label{font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-muted)}
.dv-stat__value{margin:18px 0 12px;font-family:var(--dv-display);font-weight:750;font-stretch:112%;font-size:clamp(40px,5vw,68px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.dv-stats--4 .dv-stat__value{font-size:clamp(34px,3.8vw,52px)}
.dv-stat__note{font-size:14px;line-height:1.45;color:var(--dv-muted)}
.dv-stat__note+.dv-stat__note{margin-top:6px;font-size:13px;color:var(--dv-faint)}
.dv-stat__note b{font-family:var(--dv-mono);font-size:12.5px;font-weight:500;color:var(--dv-ink)}
@media (max-width:1000px){.dv-stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .dv-stats,.dv-stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-stats--2{grid-template-columns:1fr 1fr}
  .dv-stats>.dv-stat:last-child:nth-child(odd){grid-column:1/-1}
  .dv-stat{padding:16px 14px 18px}
  .dv-stat__value,.dv-stats--4 .dv-stat__value{font-size:36px;margin:12px 0 10px}
  .dv-stat__note{font-size:13px}
}

/* ------------------------------------------------------------------ key-value rows */

.dv-kv{border-top:1px solid var(--dv-line);container-type:inline-size}
.dv-kv>div{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--dv-line);align-items:baseline}
.dv-kv dt{font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-muted)}
.dv-kv dd{margin:0;font-size:16px}
.dv-kv dd small{display:block;margin-top:2px;font-size:14px;color:var(--dv-muted)}
/* Stacked when the list itself is narrow, wherever it sits: a phone, a side column, a printed page. */
@container (max-width:520px){.dv-kv>div{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ tables
   Wrap the table in .dv-table: it scrolls sideways on a phone, not the page. */

.dv-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dv-table:focus-visible{outline-offset:4px}
.dv-table table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.4}
.dv-table caption{caption-side:top;text-align:left;padding-bottom:var(--dv-s3);font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-ink)}
.dv-table th{padding:0 16px 10px 0;border-bottom:1px solid var(--dv-line-strong);font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dv-muted);text-align:left;vertical-align:bottom;white-space:nowrap}
.dv-table td{padding:12px 16px 12px 0;border-bottom:1px solid var(--dv-line);vertical-align:baseline}
.dv-table th:last-child,.dv-table td:last-child{padding-right:0}
.dv-table tbody th{font-family:var(--dv-text);font-size:15.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--dv-ink);border-bottom-color:var(--dv-line);padding-block:12px;vertical-align:baseline;white-space:normal}
.dv-table td small,.dv-table th small{display:block;font-family:var(--dv-text);letter-spacing:0;text-transform:none;font-weight:400;margin-top:2px;font-size:13px;color:var(--dv-muted)}
.dv-table .dv-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dv-table td.dv-num{font-family:var(--dv-display);font-weight:650;font-stretch:112%;font-size:16px}
.dv-table tfoot td,.dv-table tfoot th{border-bottom:0;border-top:1px solid var(--dv-line-strong);font-weight:600}
@media (max-width:640px){.dv-table table{font-size:14.5px;min-width:520px}}

/* ------------------------------------------------------------------ callout */

.dv-callout{padding:20px 24px 22px;border:1px solid var(--dv-line-strong);max-width:var(--dv-measure)}
.dv-callout__label{margin-bottom:8px;font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-ink)}
.dv-callout p+p{margin-top:10px}
.dv-callout>:not(.dv-callout__label){font-size:17px;line-height:1.5}
/* The orange tile: the one thing the reader has to act on. Use it once per page at most. */
.dv-callout--signal{background:var(--dv-signal);border-color:var(--dv-signal);color:var(--dv-signal-ink)}
.dv-callout--signal .dv-callout__label{color:var(--dv-signal-ink);opacity:.8}
.dv-callout--signal a{color:inherit}
@media (max-width:640px){.dv-callout{padding:16px 16px 18px}}

/* ------------------------------------------------------------------ figure */

.dv-figure img,.dv-figure video{display:block;width:100%;height:auto;border:1px solid var(--dv-line-strong)}
.dv-figure--art img{background:var(--dv-mint);image-rendering:pixelated;border:0}
.dv-figure figcaption{margin-top:var(--dv-s2);font-size:14px;line-height:1.45;color:var(--dv-muted);max-width:var(--dv-measure)}
.dv-figure figcaption b{font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-ink);margin-right:.6em}

/* ------------------------------------------------------------------ charts
   Three kinds, all drawn in the theme's colours so they print on paper.
   Bars and columns are HTML: labels stay readable at phone width. Each row
   carries its share of the largest value as --v, from 0 to 1. */

.dv-bars{list-style:none;padding:0;margin:0}
.dv-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding-top:12px}
.dv-bars li::after{content:'';grid-column:1/-1;height:3px;margin-top:9px;background:linear-gradient(90deg,var(--dv-signal) calc(var(--v,0) * 100%),var(--dv-line) calc(var(--v,0) * 100%))}
.dv-bars__label{min-width:0;font-size:15.5px;line-height:1.35}
.dv-bars__label small{display:block;margin-top:2px;font-size:13px;color:var(--dv-muted)}
.dv-bars__value{text-align:right;font-size:13px;color:var(--dv-muted);white-space:nowrap}
.dv-bars__value b{font-family:var(--dv-display);font-weight:700;font-stretch:112%;font-size:17px;color:var(--dv-ink);font-variant-numeric:tabular-nums;margin-right:.4em}
.dv-bars li.is-muted::after{background:linear-gradient(90deg,var(--dv-series-2) calc(var(--v,0) * 100%),var(--dv-line) calc(var(--v,0) * 100%))}

.dv-cols{list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;height:220px}
.dv-cols li{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;min-width:0}
.dv-cols b{font-family:var(--dv-display);font-weight:700;font-stretch:112%;font-size:15px;text-align:center;font-variant-numeric:tabular-nums}
.dv-cols__bar{display:flex;align-items:flex-end;border-bottom:1px solid var(--dv-line-strong)}
.dv-cols__bar::before{content:'';display:block;width:100%;height:calc(var(--v,0) * 100%);min-height:2px;background:var(--dv-signal)}
.dv-cols li.is-muted .dv-cols__bar::before{background:var(--dv-series-2)}
.dv-cols small{font-family:var(--dv-mono);font-size:11px;letter-spacing:.04em;text-align:center;color:var(--dv-muted);line-height:1.3}
@media (max-width:640px){.dv-cols{gap:5px;height:180px}.dv-cols b{font-size:13px}.dv-cols small{font-size:10px;letter-spacing:0}}

/* Anything else is inline SVG with these classes. Keep text out of a scaling
   viewBox: put labels in HTML around it, or give the SVG a fixed height. */
.dv-svg{display:block;width:100%;height:auto;overflow:visible}
.dv-svg .dv-svg__bar{fill:var(--dv-signal)}
.dv-svg .dv-svg__bar--2{fill:var(--dv-series-2)}
.dv-svg .dv-svg__bar--3{fill:var(--dv-series-3)}
.dv-svg .dv-svg__line{fill:none;stroke:var(--dv-signal);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.dv-svg .dv-svg__line--2{fill:none;stroke:var(--dv-series-2);stroke-width:2;vector-effect:non-scaling-stroke}
.dv-svg .dv-svg__area{fill:var(--dv-signal);opacity:.1}
.dv-svg .dv-svg__base{stroke:var(--dv-line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.dv-svg .dv-svg__grid{stroke:var(--dv-line);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.dv-svg .dv-svg__dot{fill:var(--dv-signal)}
.dv-svg text,.dv-svg .dv-svg__label{font-family:var(--dv-mono);font-size:11px;fill:var(--dv-muted)}
.dv-legend{list-style:none;padding:0;margin:var(--dv-s3) 0 0;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:14px;color:var(--dv-muted)}
.dv-legend li{display:inline-flex;align-items:center;gap:8px}
.dv-legend li::before{content:'';width:10px;height:10px;background:var(--dv-signal)}
.dv-legend li.is-2::before{background:var(--dv-series-2)}
.dv-legend li.is-3::before{background:var(--dv-series-3)}
.dv-chart figcaption{margin-top:var(--dv-s3);font-size:14px;color:var(--dv-muted)}

/* ------------------------------------------------------------------ timeline rows, as on /projects */

.dv-timeline{list-style:none;padding:0;margin:0;border-top:1px solid var(--dv-line);display:grid;grid-template-columns:minmax(56px,max-content) minmax(0,1fr) auto;column-gap:24px}
.dv-timeline li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--dv-line);align-items:baseline}
.dv-timeline__when{font-family:var(--dv-mono);font-size:12px;color:var(--dv-muted);font-variant-numeric:tabular-nums}
.dv-timeline__what b{font-weight:500}
.dv-timeline__what span{display:block;margin-top:2px;font-size:15.5px;color:var(--dv-muted)}
.dv-timeline__status{font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dv-muted);white-space:nowrap}
.dv-timeline__status.is-live{color:var(--dv-live)}
.dv-timeline__status.is-next{color:var(--dv-signal-text)}
@media (max-width:560px){.dv-timeline{grid-template-columns:minmax(0,1fr)}.dv-timeline li{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px}.dv-timeline__what{grid-column:1/-1;grid-row:2}}

/* ------------------------------------------------------------------ tags and chips */

.dv-tag{display:inline-block;font-style:normal;font-family:var(--dv-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;padding:3px 6px 2px;border:1px solid var(--dv-line-strong);color:var(--dv-muted);vertical-align:.15em;white-space:nowrap}
.dv-tag--signal{border-color:var(--dv-signal);color:var(--dv-signal-text)}
.dv-tag--live{border-color:var(--dv-live);color:var(--dv-live)}
.dv-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.dv-chip{display:inline-flex;align-items:baseline;gap:7px;padding:8px 12px;border:1px solid var(--dv-line);color:var(--dv-muted);font-size:14px;line-height:1.3;text-decoration:none}
.dv-chip b{font-family:var(--dv-display);font-weight:750;font-stretch:112%;font-size:16px;letter-spacing:-.02em;color:var(--dv-ink)}
a.dv-chip{transition:border-color .15s,color .15s}
a.dv-chip:hover{border-color:var(--dv-line-strong);color:var(--dv-ink)}
.dv-chip.is-on{border-color:var(--dv-signal);color:var(--dv-ink)}
.dv-chip.is-on b{color:var(--dv-signal-text)}

/* ------------------------------------------------------------------ buttons */

.dv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--dv-s3) var(--dv-s4)}
.dv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 18px;font-family:var(--dv-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1;text-decoration:none;color:var(--dv-ink);background:transparent;border:1px solid var(--dv-line-strong);border-radius:0;cursor:pointer;white-space:nowrap;transition:border-color .15s,background-color .15s,color .15s}
.dv-btn:hover{border-color:var(--dv-ink)}
.dv-btn--go{background:var(--dv-signal);border-color:var(--dv-signal);color:var(--dv-signal-ink)}
.dv-btn--go:hover{background:var(--dv-ink);border-color:var(--dv-ink);color:var(--dv-bg)}
.dv-btn:disabled,.dv-btn[aria-disabled='true']{opacity:.5;cursor:default;pointer-events:none}
.dv-btn__arrow{font-family:var(--dv-text);letter-spacing:0;transition:transform .15s}
.dv-btn:hover .dv-btn__arrow{transform:translateX(3px)}
@media (max-width:420px){.dv-actions .dv-btn{flex:1 1 auto}}

/* ------------------------------------------------------------------ code */

.dv-code{position:relative;font-family:var(--dv-mono);font-size:14px;line-height:1.55;padding:16px 18px;border:1px solid var(--dv-line);background:var(--dv-panel);overflow-x:auto;tab-size:2;color:var(--dv-ink);font-variant-ligatures:none}
.dv-code code{font:inherit;background:none;border:0;padding:0}
.dv-code[data-label]::before{content:attr(data-label);display:block;margin:-4px 0 12px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-muted)}
.dv-code .c{color:var(--dv-faint)}
.dv-code .k{color:var(--dv-signal-text)}
@media (max-width:640px){.dv-code{font-size:13px;padding:14px}}

/* ------------------------------------------------------------------ sources and footnotes */

.dv-ref{font-family:var(--dv-mono);font-size:.68em;font-weight:500;vertical-align:super;line-height:0;margin-left:1px;color:var(--dv-signal-text);text-decoration:none;padding:0 2px}
.dv-ref:hover{text-decoration:underline}
.dv-sources{list-style:none;padding:0;margin:0;counter-reset:dv-src;border-top:1px solid var(--dv-line);max-width:88ch}
.dv-sources li{counter-increment:dv-src;display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 8px;padding:12px 0;border-bottom:1px solid var(--dv-line);font-size:14.5px;line-height:1.5;color:var(--dv-muted)}
.dv-sources li::before{content:counter(dv-src,decimal-leading-zero);font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--dv-signal-text);padding-top:3px}
.dv-sources li:target{background:var(--dv-panel)}
.dv-sources b{color:var(--dv-ink);font-weight:500}
.dv-sources a{color:var(--dv-ink);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--dv-line-strong);text-underline-offset:.22em;overflow-wrap:anywhere}
.dv-sources a:hover{text-decoration-color:var(--dv-signal)}

/* ------------------------------------------------------------------ contact strip
   The site's phone tile: the orange block with the two handles. */

.dv-contact{margin-top:var(--dv-s9);padding:22px 24px 26px;background:var(--dv-signal);color:var(--dv-signal-ink);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 32px}
.dv-contact__label{grid-column:1/-1;font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.dv-contact__line{font-size:clamp(17px,1.6vw,20px);line-height:1.4;max-width:48ch}
.dv-contact__keys{display:flex;flex-wrap:wrap;gap:6px 28px}
.dv-key{display:inline-flex;align-items:baseline;gap:10px;min-height:24px;padding-top:5px;font-family:var(--dv-mono);font-size:13px;font-weight:500;color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.dv-key span{font-size:11px;letter-spacing:.1em;opacity:.8}
.dv-key:hover{border-bottom-color:currentColor}
.dv-contact :focus-visible{outline-color:var(--dv-signal-ink)}
@media (max-width:640px){.dv-contact{grid-template-columns:1fr;padding:20px 20px 24px;margin-top:var(--dv-s8)}.dv-contact__keys{gap:10px 24px}}

/* ------------------------------------------------------------------ layout helpers */

.dv-grid{display:grid;align-items:start;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dv-s6) var(--dv-s7)}
.dv-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dv-grid--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:900px){.dv-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dv-grid,.dv-grid--3,.dv-grid--split{grid-template-columns:minmax(0,1fr)}}
.dv-rule{border:0;border-top:1px solid var(--dv-line);margin:0}
/* Vertical rhythm between blocks that are not numbered sections, and a shorter head for one-screen pages. */
.dv-gap{margin-top:var(--dv-s7)}
.dv-intro--compact{padding-block:var(--dv-s8) var(--dv-s7)}
.dv-contact.dv-gap{margin-top:var(--dv-s7)}
@media (max-width:640px){.dv-intro--compact{padding-block:var(--dv-s6) var(--dv-s5)}.dv-gap,.dv-contact.dv-gap{margin-top:var(--dv-s6)}}

/* ------------------------------------------------------------------ pitch: full-screen slides
   <main class="dv-deck"> holding <section class="dv-slide">. Each slide fills
   the window and the page snaps from one to the next; printed, each slide is
   one 16:9 page. */

html:has(.dv-deck){scroll-snap-type:y mandatory}
@media (max-width:900px),(max-height:560px){html:has(.dv-deck){scroll-snap-type:y proximity}}
html:has(.dv-deck) dv-signature{scroll-snap-align:end}
.dv-slide{position:relative;min-height:100vh;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;padding:28px var(--dv-gutter) 40px;border-bottom:1px solid var(--dv-line)}
.dv-slide__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--dv-s4);min-height:32px}
.dv-slide__n{font-family:var(--dv-mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--dv-muted);font-variant-numeric:tabular-nums}
.dv-slide__n b{font-weight:500;color:var(--dv-signal-text)}
.dv-slide__body{flex:1;display:flex;flex-direction:column;justify-content:center;width:min(100%,1180px);margin-inline:auto;padding-block:var(--dv-s7)}
.dv-slide__title{font-family:var(--dv-display);font-weight:750;font-stretch:112%;font-size:clamp(36px,5.6vw,84px);letter-spacing:-.03em;line-height:1.02;max-width:18ch;text-wrap:balance}
.dv-slide__title--cover{font-size:clamp(48px,9vw,136px);max-width:none}
.dv-slide__text{margin-top:var(--dv-s5);font-size:clamp(18px,1.8vw,26px);line-height:1.4;color:var(--dv-muted);max-width:40ch}
.dv-slide__text strong{color:var(--dv-ink)}
.dv-slide__body>.dv-stats,.dv-slide__body>.dv-grid,.dv-slide__body>.dv-bars,.dv-slide__body>.dv-timeline,.dv-slide__body>.dv-actions,.dv-slide__body>.dv-callout{margin-top:var(--dv-s7)}
.dv-slide--signal{background:var(--dv-signal);color:var(--dv-signal-ink);border-bottom-color:var(--dv-signal)}
.dv-slide--signal .dv-mono,.dv-slide--signal .dv-slide__n,.dv-slide--signal .dv-slide__n b,.dv-slide--signal .dv-slide__text,.dv-slide--signal .dv-kicker{color:var(--dv-signal-ink)}
.dv-slide--signal .dv-mark,.dv-slide--signal .dv-slide__title{color:var(--dv-signal-ink)}
.dv-slide--signal .dv-mark__v::after,.dv-slide--signal .dv-mark__cut::after{background:var(--dv-signal-ink)}
.dv-slide--signal .dv-btn{border-color:var(--dv-signal-ink);color:var(--dv-signal-ink)}
.dv-slide--signal .dv-btn--go{background:var(--dv-signal-ink);color:var(--dv-signal)}
.dv-slide--signal .dv-btn--go:hover{background:transparent;color:var(--dv-signal-ink)}
.dv-slide--signal :focus-visible{outline-color:var(--dv-signal-ink)}
@media (max-width:640px){.dv-slide{padding:18px var(--dv-gutter) 28px}.dv-slide__body{padding-block:var(--dv-s6)}}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------------------------ print
   Always paper, whatever the page's theme: the same values as [data-theme='paper'],
   repeated here because a media query cannot point at a selector. Documents
   print on A4; a deck prints one slide per 16:9 page. */

@page{size:A4;margin:16mm 16mm 18mm}
@page dv-slide{size:338.67mm 190.5mm;margin:0}
@media print{
  :root,[data-theme]{
    --dv-bg:#ffffff;--dv-panel:#f4f4f2;--dv-ink:#0a0a0b;--dv-muted:#55575d;--dv-faint:#6b6d74;--dv-line:#dedfe2;--dv-line-strong:#8a8d96;
    --dv-signal:#ff4d00;--dv-signal-text:#c93b00;--dv-signal-ink:#0a0a0b;--dv-live:#00783c;--dv-series-2:#8a8d96;--dv-series-3:#c6c8cd;
    --dv-gutter:0px;color-scheme:light}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff}
  body{font-size:10.5pt;line-height:1.45}
  .dv-shell{width:auto;margin-inline:0}
  .dv-main{padding-bottom:0}
  .dv-skip,.dv-noprint{display:none!important}
  .dv-mast{min-height:0;padding-bottom:5mm;border-bottom:.6pt solid var(--dv-ink)}
  .dv-intro{padding-block:12mm 8mm}
  .dv-title{font-size:48pt}
  .dv-title--sentence{font-size:28pt}
  .dv-lead{font-size:13pt}
  .dv-sec{padding-top:8mm}
  .dv-sec__head{border-top-color:var(--dv-ink);break-after:avoid;break-inside:avoid;margin-bottom:5mm}
  .dv-sec__head h2{font-size:19pt}
  .dv-sec__head p{font-size:9.5pt}
  .dv-prose{font-size:10.5pt;max-width:none}
  .dv-prose p,.dv-prose li{orphans:3;widows:3}
  .dv-prose h2,.dv-prose h3,.dv-sub{break-after:avoid}
  .dv-stat__value{font-size:28pt}
  .dv-stats,.dv-stat,.dv-callout,.dv-figure,.dv-chart,.dv-pull,.dv-kv>div,.dv-table tr,.dv-bars li,.dv-cols,.dv-timeline li,.dv-sources li,.dv-contact,.dv-code{break-inside:avoid}
  .dv-table{overflow:visible}
  .dv-table table{min-width:0;font-size:9.5pt}
  .dv-contact{margin-top:10mm}
  .dv-btn{min-height:0;padding:2.5mm 4mm}
  a[href^='http']:not(.dv-btn):not(.dv-key):not(.dv-mark)::after{content:none}

  html:has(.dv-deck){scroll-snap-type:none}
  /* A change of named page forces a page break, so everything in a deck prints as a slide page: the
     signature the site appends after the last slide then fits inside that slide's bottom margin. */
  html:has(.dv-deck) body{page:dv-slide}
  .dv-slide{page:dv-slide;width:338.67mm;height:190.5mm;min-height:0;padding:10mm 16mm 26mm;border:0;break-after:page;overflow:hidden}
  .dv-slide:last-child{break-after:auto;margin-bottom:-24mm}
  .dv-slide__body{padding-block:6mm}
  .dv-slide__title{font-size:44pt}
  .dv-slide__title--cover{font-size:72pt}
  .dv-slide__text{font-size:15pt}
  /* Print media queries measure the default A4 page, not the slide, so slide grids are restated here. */
  .dv-slide .dv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-slide .dv-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dv-slide .dv-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dv-slide .dv-stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-slide .dv-stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}