body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.jl-pad { padding: var(--space-5); }
.jl-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.jl-stack { display: grid; gap: var(--space-3); }
.jl-icon { display: block; flex: none; }
:where(.jl-btn, .jl-switch, .jl-seg-b, .jl-chapter, .jl-copy, .jl-acc-q, .jl-mini, .jl-tm-node):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Button */
.jl-btn { font: 600 16px/1.2 var(--font-sans); display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 20px; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color 150ms ease-out; }
.jl-btn-primary { background: var(--cta); color: var(--on-cta); }
.jl-btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-input); }
.jl-btn-ghost { background: transparent; color: var(--ink); padding-left: 6px; padding-right: 6px; text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .2em; }
.jl-btn:disabled { opacity: .45; cursor: not-allowed; }
.jl-btn-chip { display: grid; place-items: center; width: 26px; height: 26px; margin: -6px -12px -6px 2px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--on-cta) 16%, transparent); transition: translate 250ms cubic-bezier(.2, 0, 0, 1); }
.jl-btn-ic { display: grid; place-items: center; }
@media (hover: hover) {
  .jl-btn-primary:not(:disabled):hover { background: var(--cta-hover); }
  .jl-btn-primary:not(:disabled):hover .jl-btn-chip { translate: 2px 0; }
  .jl-btn-secondary:not(:disabled):hover { background: var(--surface-sunk); }
}

/* Lockup */
.jl-lockup { display: inline-flex; align-items: center; gap: calc(var(--jl-mark) * .35); color: var(--ink); }
.jl-mark { width: var(--jl-mark); height: auto; display: block; }
.jl-on-dark { display: none; }
[data-theme="dark"] .jl-on-light { display: none; }
[data-theme="dark"] .jl-on-dark { display: block; }
.jl-wordmark { font: 600 calc(var(--jl-mark) * .7)/1 var(--font-serif); letter-spacing: -0.01em; }

/* ThemeSwitch */
.jl-switch { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1 var(--font-sans); color: var(--ink); border-radius: var(--radius-pill); }
.jl-switch-track { position: relative; width: 48px; height: 28px; border-radius: var(--radius-pill); background: var(--surface-sunk); border: 1px solid var(--line-input); display: flex; align-items: center; padding: 0 3px; box-sizing: border-box; }
.jl-switch[data-on="true"] .jl-switch-track { justify-content: flex-end; }
.jl-switch-knob { width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.jl-switch-ic { display: grid; place-items: center; grid-area: 1 / 1; }
.jl-switch-l { min-width: 3ch; }

/* SegmentedControl */
.jl-seg { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-sunk); border: 1px solid var(--line); }
.jl-seg-b { all: unset; cursor: pointer; position: relative; padding: 8px 16px; font: 500 14px/1 var(--font-sans); border-radius: var(--radius-pill); color: var(--ink-muted); }
.jl-seg-b[aria-checked="true"] { color: var(--ink); }
.jl-seg-pill { position: absolute; inset: 0; background: var(--surface); border-radius: var(--radius-pill); box-shadow: 0 1px 2px rgba(3, 5, 16, .08), 0 0 0 1px var(--line); }
.jl-seg-t { position: relative; }

/* ChapterNav */
.jl-chapters { display: flex; flex-direction: column; gap: 6px; }
.jl-chapter { all: unset; cursor: pointer; position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--ink-muted); font: 500 15px/1.2 var(--font-sans); white-space: nowrap; }
.jl-chapter[aria-current="page"] { color: var(--ink); font-weight: 600; }
.jl-chapter-bg { position: absolute; inset: 0; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.jl-chapter i { position: relative; width: 10px; height: 28px; border-radius: var(--radius-pill); flex: none; }
.jl-chapter span { position: relative; }
@media (max-width: 979px) { .jl-chapters { flex-direction: row; overflow-x: auto; } }

/* Step */
.jl-step { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.jl-step-n { font: 600 40px/1 var(--font-serif); font-variant-numeric: lining-nums tabular-nums; }
.jl-step-t { display: block; font: 600 16px/1.4 var(--font-sans); margin-bottom: 2px; }
.jl-step-d { color: var(--ink-muted); }

/* MarginNote and AtAGlance */
.jl-note { border-left: 2px solid; padding-left: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.jl-note b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.jl-note p { margin: 0; }
.jl-glance { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); display: grid; gap: 10px; font-size: 14px; }
.jl-glance-h { font: 600 13px/1.4 var(--font-sans); color: var(--ink-muted); }
.jl-glance dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.jl-glance dt { color: var(--ink-muted); }
.jl-glance dd { margin: 0; font-weight: 600; }

/* CodeBlock */
.jl-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--code-bg); color: var(--on-code); border-radius: var(--radius-md); padding: 10px 10px 10px 16px; }
.jl-code code { font: 400 14px/1.6 var(--font-mono); overflow-x: auto; }
.jl-copy { all: unset; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--on-code); background: rgba(249, 250, 253, .08); flex: none; }
.jl-copy:focus-visible { outline-color: #f9fafd; }
.jl-copy-ic { display: grid; place-items: center; grid-area: 1 / 1; }

/* Accordion */
.jl-acc-i { border-bottom: 1px solid var(--line); }
.jl-acc-q { all: unset; cursor: pointer; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 14px 0; font: 500 16px/1.4 var(--font-sans); }
.jl-acc-c { display: grid; color: var(--ink-muted); }
.jl-acc-a { overflow: hidden; }
.jl-acc-a p { margin: 0 0 16px; color: var(--ink-muted); }

/* ReorderList */
.jl-ro { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jl-ro-i { display: grid; grid-template-columns: 8px 1fr auto; gap: 14px; align-items: center; padding: 12px 12px 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); position: relative; font-weight: 500; }
.jl-ro-bar { width: 8px; height: 24px; border-radius: var(--radius-pill); }
.jl-ro-g { cursor: grab; color: var(--ink-muted); display: grid; place-items: center; padding: 4px; touch-action: none; }

/* StoryFigure and ScrollStory */
.jl-field { position: relative; width: 300px; height: 285px; }
.jl-dot { position: absolute; top: 0; left: 0; display: block; width: 12px; height: 12px; }
.jl-field-masked { -webkit-mask: var(--jl-mask) center / 100% 100% no-repeat; mask: var(--jl-mask) center / 100% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) { .jl-field-masked { animation: jl-mask-in 900ms cubic-bezier(.2, 0, 0, 1) 450ms both; } }
@keyframes jl-mask-in { from { -webkit-mask-size: 190% 190%; mask-size: 190% 190%; } to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } }
.jl-story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.jl-story-fig { position: sticky; top: 96px; display: grid; justify-items: center; gap: 20px; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.jl-story-dots { display: flex; gap: 8px; }
.jl-story-dots span { width: 28px; height: 4px; border-radius: var(--radius-pill); background: var(--line); position: relative; overflow: hidden; }
.jl-story-dots i { position: absolute; inset: 0; background: var(--ink); border-radius: var(--radius-pill); }
.jl-sstep { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; max-width: 44ch; }
.jl-sstep-n { font: 500 16px/1 var(--font-serif); font-variant-numeric: lining-nums tabular-nums; color: var(--ink-muted); margin-bottom: 10px; }
.jl-sstep h4 { font: 500 32px/1.1 var(--font-serif); letter-spacing: -0.015em; margin: 0 0 10px; }
.jl-sstep p { font: 400 18px/1.6 var(--font-serif); margin: 0; color: var(--ink-muted); }
@media (max-width: 900px) { .jl-story { grid-template-columns: 1fr; gap: 0; } .jl-story-fig { top: 72px; z-index: 2; padding: var(--space-4); } .jl-field { transform: scale(.62); margin: -54px -57px; } .jl-sstep { min-height: 70vh; } }

/* TopicMap */
.jl-tmap { display: block; }
.jl-tm-edge { stroke: var(--ink-muted); stroke-width: 1.5; }
.jl-tm-node { cursor: pointer; outline: none; }
.jl-tm-node rect { fill: var(--surface); stroke: var(--line-input); stroke-width: 1.5; }
.jl-tm-node text { fill: var(--ink); font: 600 14px var(--font-sans); }
.jl-tm-node.is-focus rect { fill: var(--ink); stroke: var(--ink); }
.jl-tm-node.is-focus text { fill: var(--bg); }
.jl-tm-node:focus-visible rect { stroke: var(--focus-ring); stroke-width: 3; }

/* BarChart */
.jl-chart { margin: 0; display: grid; gap: var(--space-4); }
.jl-chart-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.jl-mini { font: 500 13px/1 var(--font-sans); color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 12px; cursor: pointer; }
.jl-bars { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }
.jl-brow { display: grid; grid-template-columns: 88px 1fr 56px; gap: 12px; align-items: center; height: 40px; }
.jl-bar-n { font-size: 15px; }
.jl-bar-track { height: 28px; position: relative; }
.jl-bar-fill { position: absolute; inset: 0; display: block; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.jl-bar-v { font: 600 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; }
.jl-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; background: var(--surface); border-radius: var(--radius-md); }
.jl-table th, .jl-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.jl-table th { font: 600 13px/1.4 var(--font-sans); color: var(--ink-muted); }
.jl-table td:last-child, .jl-table th:last-child { text-align: right; }
/* jonuland.com shared styles: fonts, tokens, header, footer and page patterns. */
@font-face{font-family:"Literata";src:url("/fonts/Literata-Variable.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("/fonts/Literata-Variable-Italic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url("/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

body{margin:0}

/* Tokens. data-theme="auto" follows the device; "light" and "dark" are the reader's choice. */
.jl-root{--font-serif:"Literata",Georgia,serif;--font-sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--radius-xs:6px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;--bg:#f9fafd;--surface:#ffffff;--surface-sunk:#f1f2f7;--line:#e4e6ec;--line-strong:#d1d4dd;--line-input:#818695;--ink:#030510;--ink-muted:#636878;--cta:#030510;--on-cta:#f9fafd;--cta-hover:#313542;--focus-ring:#030510;--code-bg:#030510;--on-code:#f1f2f7;--chapter-1:#111d5e;--chapter-2:#b21f66;--chapter-3:#f25757;--chapter-4:#ffbd69;--chapter-1-text:#111d5e;--chapter-2-text:#b21f66;--chapter-3-text:#d2373d;--chapter-4-text:#9f6600;--success-text:#3d8033;--shadow-card:0 1px 2px rgba(17,29,94,.05),0 6px 16px rgba(17,29,94,.05);--ease-out:cubic-bezier(.2,0,0,1);--photo-blend:multiply;--photo-filter:none;--img-outline:oklch(0 0 0 / .1)}
.jl-root[data-theme="dark"]{--bg:#030510;--surface:#171a25;--surface-sunk:rgba(249,250,253,.06);--line:rgba(249,250,253,.10);--line-strong:rgba(249,250,253,.20);--line-input:rgba(249,250,253,.40);--ink:#f9fafd;--ink-muted:#a6aab8;--cta:#f9fafd;--on-cta:#030510;--cta-hover:#e4e6ec;--focus-ring:#f9fafd;--code-bg:#000308;--on-code:#e4e6ec;--chapter-1:#86a5d9;--chapter-1-text:#86a5d9;--chapter-2-text:#e5739f;--chapter-3-text:#f25757;--chapter-4-text:#ffbd69;--success-text:#9ee493;--shadow-card:inset 0 1px 0 rgba(249,250,253,.05);--photo-blend:normal;--photo-filter:brightness(.86) contrast(1.04);--img-outline:oklch(1 0 0 / .1)}
@media (prefers-color-scheme:dark){
.jl-root[data-theme="auto"]{--bg:#030510;--surface:#171a25;--surface-sunk:rgba(249,250,253,.06);--line:rgba(249,250,253,.10);--line-strong:rgba(249,250,253,.20);--line-input:rgba(249,250,253,.40);--ink:#f9fafd;--ink-muted:#a6aab8;--cta:#f9fafd;--on-cta:#030510;--cta-hover:#e4e6ec;--focus-ring:#f9fafd;--code-bg:#000308;--on-code:#e4e6ec;--chapter-1:#86a5d9;--chapter-1-text:#86a5d9;--chapter-2-text:#e5739f;--chapter-3-text:#f25757;--chapter-4-text:#ffbd69;--success-text:#9ee493;--shadow-card:inset 0 1px 0 rgba(249,250,253,.05);--photo-blend:normal;--photo-filter:brightness(.86) contrast(1.04);--img-outline:oklch(1 0 0 / .1)}
}
.jl-root{background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.theme-swap,.theme-swap *{transition:none !important}
.jl-root main{flex-grow:1}
/* Text links only. Buttons keep the design system's own colors. */
.jl-root a:not(.jl-btn){color:var(--ink);text-decoration-thickness:from-font;text-underline-offset:.2em}
@media (hover:hover){.jl-root a:not(.jl-btn):hover{color:var(--ink);text-decoration-thickness:2px}}
.jl-root .jl-btn{text-decoration:none;-webkit-tap-highlight-color:transparent}
.jl-root .jl-btn-primary,.jl-root .jl-btn-primary:hover{color:var(--on-cta)}
.jl-root .jl-btn-secondary,.jl-root .jl-btn-secondary:hover{color:var(--ink)}
.jl-root :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.jl-root h1,.jl-root h2,.jl-root h3,.jl-root h4{text-wrap:balance}
.jl-root p{text-wrap:pretty}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px);box-sizing:border-box;width:100%}
.skip{position:absolute;left:16px;top:-64px;z-index:30;padding:8px 14px;background:var(--cta);color:var(--on-cta) !important;border-radius:var(--radius-pill);font:600 14px/1.4 var(--font-sans);text-decoration:none}
.skip:focus{top:12px}
.sr-only,.jl-root .jl-switch-l{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Press: 0.96 over 150ms, never when disabled (motion.md "press"). */
@media (prefers-reduced-motion:no-preference){
.jl-btn,.chip,.cv-stop,.hdr-menu,.cn-chip span{transition-property:background-color,color,border-color,scale;transition-duration:150ms;transition-timing-function:ease-out}
.jl-btn:not(:disabled):active,.chip:active,.cv-stop:active,.hdr-menu:active,.cn-chip:active span{scale:.96}
}

/* Type helpers */
.t-display{margin:0;font:500 clamp(34px,2.6vw + 22px,52px)/1.1 var(--font-serif);letter-spacing:-0.02em}
.t-h1{margin:0;font:500 clamp(34px,1.8vw + 26px,48px)/1.08 var(--font-serif);letter-spacing:-0.02em}
.t-h2{margin:0;font:500 clamp(26px,1vw + 22px,32px)/1.15 var(--font-serif);letter-spacing:-0.015em}
.t-h3{margin:0;font:500 24px/1.25 var(--font-serif);letter-spacing:-0.01em}
.t-lede{margin:0;font:400 clamp(18px,.4vw + 16px,20px)/1.6 var(--font-serif);color:var(--ink-muted)}
.t-long{margin:0;font:400 18px/1.7 var(--font-serif)}
.t-muted{color:var(--ink-muted)}
.t-cap{font:400 13px/1.5 var(--font-sans);color:var(--ink-muted)}
.t-label{font:600 14px/1.4 var(--font-sans)}
.kicker{display:flex;align-items:center;gap:10px;font:600 14px/1.4 var(--font-sans)}
.kicker::before{content:"";width:24px;height:3px;border-radius:var(--radius-pill);background:var(--k,var(--ink))}
.link-arrow{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 15px/1.4 var(--font-sans)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.placeholder{display:grid;place-items:center;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--radius-md);color:var(--ink-muted);font:500 13px/1.4 var(--font-sans);background:var(--surface-sunk)}
.stripe{display:flex;width:144px;height:6px;border-radius:var(--radius-pill);overflow:hidden}
.stripe span{flex-grow:1}

/* Header */
.hdr{border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:20}
.hdr-bar{min-height:72px;display:flex;align-items:center;gap:24px}
.hdr-home{display:inline-flex;text-decoration:none !important;border-radius:var(--radius-md)}
.hdr-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.hdr-link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--radius-pill);font:500 14px/1.4 var(--font-sans);color:var(--ink-muted) !important;text-decoration:none !important;white-space:nowrap;transition:background-color 150ms ease-out,color 150ms ease-out}
@media (hover:hover){.hdr-link:hover{background:var(--surface-sunk);color:var(--ink) !important}}
.hdr-link[aria-current="page"]{color:var(--ink) !important;font-weight:600;text-decoration:underline !important;text-decoration-thickness:2px !important;text-underline-offset:.5em}
.hdr-cta{margin-left:8px;padding:10px 18px !important;font-size:14px !important}
.hdr-cta[aria-current="page"]{background:var(--surface-sunk)}
.hdr-menu{display:none;align-items:center;min-height:44px;padding:0 18px;margin-left:auto;border-radius:var(--radius-pill);border:1.5px solid var(--line-input);background:transparent;color:var(--ink);font:600 14px/1 var(--font-sans);cursor:pointer}
@media (hover:hover){.hdr-menu:hover{background:var(--surface-sunk)}}
.hdr-panel{display:none}
@media (max-width:899px){
.hdr-bar{min-height:64px;gap:12px}
.hdr-nav{display:none}
.hdr-menu{display:inline-flex}
.hdr-panel{display:block;border-top:1px solid var(--line);padding-block:8px 20px}
.hdr-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hdr-panel a:not(.jl-btn){display:flex;align-items:center;min-height:48px;font:500 17px/1.4 var(--font-sans);text-decoration:none;border-bottom:1px solid var(--line)}
.hdr-panel a[aria-current="page"]:not(.jl-btn){font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em}
.hdr-panel .jl-btn{margin-top:16px;justify-content:center;width:100%;box-sizing:border-box}
}

/* Footer */
.ftr{border-top:1px solid var(--line);margin-top:auto}
.ftr-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:40px 24px}
.ftr-nav{display:flex;flex-wrap:wrap;gap:0 24px}
.ftr-nav a{display:inline-flex;align-items:center;min-height:44px;font:500 14px/1.4 var(--font-sans);text-decoration:none !important}
@media (hover:hover){.ftr-nav a:hover{text-decoration:underline !important}}
.ftr-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:16px 32px;border-top:1px solid var(--line)}
.ftr-legal p{margin:0;font:400 13px/1.5 var(--font-sans);color:var(--ink-muted)}

/* Home */
/* Hero portrait: light mode multiplies the white-backed photo into the page;
   dark mode swaps in a cutout, because multiply on a dark page would darken the whole photo. */
.home-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 32px;align-items:center;padding-top:24px;margin-bottom:72px;border-bottom:1px solid var(--line)}
.home-hero .portrait-stage{margin-bottom:-1px}
.home-hero-copy{display:flex;flex-direction:column;gap:20px;padding-block:48px}
.portrait{margin:0;align-self:end}
.portrait-stage{position:relative;width:100%;max-width:700px;margin-inline:auto}
/* One photo, one blend. Multiply drops the photo's white background into whatever sits behind it.
   Light: that's the page. Dark: a flat light panel with clean edges,
   so the face keeps its true tones. */
.portrait-stage .p-photo{display:block;width:100%;height:auto;aspect-ratio:1100/1430;mix-blend-mode:multiply;filter:contrast(1.05)}
.jl-root[data-theme="dark"] .portrait-stage{background:#f1f2f7;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
@media (prefers-color-scheme:dark){.jl-root[data-theme="auto"] .portrait-stage{background:#f1f2f7;border-radius:var(--radius-lg) var(--radius-lg) 0 0}}
.squiggles{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sq-g{transform-box:view-box;transform-origin:550px 410px}
.sq{fill:none;stroke-width:8;stroke-linecap:round}
/* motion.dev animates the entrance (see Main). .js-motion is set only when Motion loaded and
   reduced motion is off, so the start state is hidden from the first paint, never stuck hidden. */
.portrait-stage.js-motion .p-photo,.portrait-stage.js-motion .sq-wrap{opacity:0}
.sq-wrap{position:absolute;inset:0;pointer-events:none}
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);overflow:hidden}
.feat-art{min-height:340px;background:var(--surface-sunk);display:grid;place-items:center;padding:40px}
.feat-body{padding:48px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.post-title a{text-decoration:none !important}
@media (hover:hover){.post-title a:hover{text-decoration:underline !important;text-decoration-thickness:from-font !important}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{cursor:pointer}
.row{display:grid;grid-template-columns:140px minmax(0,1fr) 150px;gap:8px 32px;padding-block:28px;border-top:1px solid var(--line)}
.bar{width:4px;height:14px;border-radius:var(--radius-pill);flex:none}

/* Post */
.post-grid{display:grid;grid-template-columns:150px minmax(0,1fr) 220px;grid-template-areas:"toc main side";gap:32px 48px;align-items:start}
.toc{grid-area:toc;position:sticky;top:24px}
.toc-a{text-decoration:none !important}
@media (hover:hover){.toc-a:hover{text-decoration:underline !important}}
.post-main{grid-area:main;min-width:0}
.side{grid-area:side;position:sticky;top:24px;display:flex;flex-direction:column;gap:32px}
.prose{max-width:68ch}
.prose p{margin:0 0 24px;font:400 18px/1.7 var(--font-serif)}
.prose h2{margin:48px 0 16px;font:500 clamp(26px,1vw + 22px,32px)/1.15 var(--font-serif);letter-spacing:-0.015em;scroll-margin-top:24px}
.prose code{font:400 .86em/1 var(--font-mono);background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--radius-xs);padding:.12em .36em}
.note-inline{display:none}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pager a{display:flex;flex-direction:column;gap:6px;padding:24px;text-decoration:none !important;transition:border-color 150ms ease-out}
@media (hover:hover){.pager a:hover{border-color:var(--line-input)}}

/* About */
.about-hero{padding-block:80px 64px;display:flex;flex-direction:column;gap:24px;max-width:860px}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:96px}
.about-card{padding:40px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.about-card .band{position:absolute;inset:0 0 auto 0;height:6px}

/* CV */
.cv-hero{padding-block:72px 40px;display:flex;flex-direction:column;gap:16px;max-width:760px}
.cv-map{padding:24px;display:flex;flex-direction:column;gap:20px}
.cv-plate{position:relative;width:100%;aspect-ratio:960/560}
.cv-dots{position:absolute;inset:0;background:var(--line-strong);-webkit-mask:url("/images/us-dot-map.svg") center/100% 100% no-repeat;mask:url("/images/us-dot-map.svg") center/100% 100% no-repeat}
.cv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cv-route{fill:none;stroke:var(--chapter-2);stroke-width:3;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){.cv-route{transition:stroke-dashoffset 1100ms var(--ease-out)}}
.cv-ghost{fill:none;stroke:var(--line-input);stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round;opacity:.7}
.cv-pin{fill:var(--bg);stroke:var(--ink-muted);stroke-width:2;transition:fill 250ms ease-out,stroke 250ms ease-out}
.cv-pin.is-seen{fill:var(--ink);stroke:var(--ink)}
.cv-halo{fill:none;stroke:var(--chapter-2);stroke-width:2.5;opacity:0;transition:opacity 250ms ease-out}
.cv-halo.is-on{opacity:1}
.cv-tag{position:absolute;transform:translate(-50%,calc(-100% - 16px));padding:5px 10px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);font:600 13px/1 var(--font-sans);color:var(--ink);white-space:nowrap;pointer-events:none;transition:color 250ms ease-out}
.cv-tag.is-dim{color:var(--ink-muted);font-weight:500}
.cv-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.cv-stops{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.cv-stop{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:500 14px/1 var(--font-sans);cursor:pointer}
@media (hover:hover){.cv-stop:hover{background:var(--surface-sunk)}}
.cv-stop[aria-current="step"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.cv-stop .n{font:600 13px/1 var(--font-serif);font-variant-numeric:lining-nums tabular-nums;opacity:.7}
.cv-play{display:flex;gap:8px;align-items:center}
.cv-panel{padding-block:56px 24px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px 56px;align-items:start}
.cv-where{position:sticky;top:24px;display:flex;flex-direction:column;gap:8px}
.cv-where .num{font:600 40px/1 var(--font-serif);font-variant-numeric:lining-nums tabular-nums;color:var(--chapter-2-text)}
.cv-jobs{list-style:none;margin:0;padding:0 0 0 28px;display:flex;flex-direction:column;gap:20px;position:relative}
.cv-jobs::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--line)}
.cv-job{position:relative}
.cv-job::before{content:"";position:absolute;left:-28px;top:28px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--chapter-2);box-sizing:border-box}
.cv-card{padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.cv-head{display:flex;align-items:center;gap:16px}
.cv-logo{width:52px;height:52px;flex:none;border-radius:var(--radius-md);font:600 15px/1 var(--font-serif)}
.cv-note{margin:0;font:400 17px/1.7 var(--font-serif);max-width:66ch}
.logo-cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:36px 56px;list-style:none;margin:0 auto;padding:8px 0;max-width:1080px}
.logo-cloud li{display:flex;align-items:center;height:48px}
.logo-cloud img{display:block;height:var(--h,30px);width:auto;max-width:200px;object-fit:contain}

/* Recipes */
.rec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.rec-card{display:flex;flex-direction:column;overflow:hidden;text-decoration:none !important;height:100%;transition:border-color 150ms ease-out}
@media (hover:hover){a.rec-card:hover{border-color:var(--line-input)}}
.rec-band{height:140px;display:flex;align-items:flex-end;padding:20px 28px;box-sizing:border-box;font:600 44px/1 var(--font-serif);letter-spacing:.02em}
.rec-body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:8px;flex-grow:1}

/* Guac */
.guac-hero{padding-block:56px 40px;display:flex;flex-direction:column;gap:16px;border-bottom:1px solid var(--line)}
.guac-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;padding-block:48px}
.guac-tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.guac-tips li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;font:400 18px/1.65 var(--font-serif)}
.guac-tips .n{font:600 22px/1.3 var(--font-serif);font-variant-numeric:lining-nums tabular-nums;color:var(--chapter-3-text)}
.ingredients{padding:28px;position:sticky;top:24px}
.ingredients dl{margin:0;display:flex;flex-direction:column}
.ingredients dl div{padding-block:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.ingredients dt{font:600 16px/1.4 var(--font-sans)}
.ingredients dd{margin:0;color:var(--ink-muted)}
.verdict{padding-block:64px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.addons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.addons .card{padding:24px;display:flex;flex-direction:column;gap:12px}
.addons ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:16px}
.uses{border-top:1px solid var(--line);padding-block:64px 96px;display:flex;flex-direction:column;gap:24px}
.uses dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.uses dl div{border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.uses dt{font:500 24px/1.25 var(--font-serif)}
.uses dd{margin:0;font:400 17px/1.65 var(--font-serif);color:var(--ink-muted)}

/* Products */
.prod{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:start;padding-block:64px;border-top:1px solid var(--line)}
.prod-shot{aspect-ratio:16/10;width:100%}
.prod-copy{display:flex;flex-direction:column;gap:20px}
.feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feat-list li{padding-block:12px;border-top:1px solid var(--line);font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tags li{padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);font:500 14px/1.2 var(--font-sans)}

/* Connect */
.cn-grid{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start;padding-block:88px 96px}
.cn-field{box-sizing:border-box;width:100%;font:400 15px/1.5 var(--font-sans);color:var(--ink);background:var(--surface);border:1px solid var(--line-input);border-radius:var(--radius-md);padding:12px 14px;min-height:48px}
.cn-field::placeholder{color:var(--ink-muted)}
.cn-chip{position:relative;display:inline-flex;cursor:pointer}
.cn-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cn-chip span{display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;padding:10px 18px;border-radius:var(--radius-pill);border:1px solid var(--line-input);font:500 14px/1.4 var(--font-sans);color:var(--ink)}
@media (hover:hover){.cn-chip:hover span{background:var(--surface-sunk)}}
.cn-chip input:checked + span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cn-chip input:focus-visible + span{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Narrow screens */
@media (max-width:979px){
.post-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main"}
.toc,.side{display:none}
.note-inline{display:block}
.cv-panel{grid-template-columns:minmax(0,1fr);padding-top:40px}
.cv-where{position:static}
.logo-cloud{gap:28px 36px}
.logo-cloud img{height:calc(var(--h,30px) * .8)}
}
@media (max-width:860px){
.home-hero{grid-template-columns:minmax(0,1fr);gap:0;padding-top:8px}
.home-hero-copy{padding-block:32px 32px}
.portrait{margin-inline:calc(-1 * clamp(16px,4vw,32px))}
.portrait-stage{max-width:none;border-radius:0 !important}
.feat{grid-template-columns:minmax(0,1fr)}
.feat-art{min-height:180px}
.feat-body{padding:24px}
.row{grid-template-columns:minmax(0,1fr);padding-block:20px}
.row-topic{order:-1}
.chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding-inline:clamp(16px,4vw,32px);scrollbar-width:none}
.chips .chip{flex:none}
.about-hero{padding-block:48px 40px}
.about-grid{grid-template-columns:minmax(0,1fr)}
.about-card{padding:28px 24px}
.cv-hero{padding-block:48px 32px}
.cv-map{padding:12px}
.cv-tag:not(.is-on){display:none}
.cv-controls{flex-direction:column;align-items:stretch}
.cv-play > *{flex:1 1 auto}
.cv-play .jl-btn{width:100%;justify-content:center}
.cv-jobs{padding-left:20px}
.cv-job::before{left:-20px}
.cv-jobs::before{left:3px}
.cv-card{padding:20px}
.rec-grid{grid-template-columns:minmax(0,1fr)}
.guac-top,.verdict{grid-template-columns:minmax(0,1fr);gap:32px}
.ingredients{position:static;order:-1}
.uses dl{grid-template-columns:minmax(0,1fr);gap:24px}
.prod{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:48px}
.cn-grid{padding-block:48px 64px;gap:40px}
}
@media (max-width:640px){
.pager{grid-template-columns:minmax(0,1fr)}
.addons{grid-template-columns:minmax(0,1fr)}
.cn-card{padding:24px !important}
}

/* Logos: each mark ships a light and a dark file; the theme picks one. */
.lg-sw .on-dark{display:none}
.jl-root[data-theme="dark"] .lg-sw .on-light{display:none}
.jl-root[data-theme="dark"] .lg-sw .on-dark{display:block}
@media (prefers-color-scheme:dark){
.jl-root[data-theme="auto"] .lg-sw .on-light{display:none}
.jl-root[data-theme="auto"] .lg-sw .on-dark{display:block}
}
.lg-mono-dark{filter:brightness(0) invert(1)}
.cv-logo-img{display:grid;place-items:center;overflow:hidden}
.cv-logo-img img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-md)}
.about-logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;list-style:none;margin:8px 0 8px;padding:20px 0 0;border-top:1px solid var(--line)}
.about-logos li{display:flex;align-items:center;height:32px}
.about-logos img{display:block;max-height:28px;max-width:140px;width:auto;height:auto}
.prod-title{display:flex;align-items:center;gap:14px}
.prod-title img{width:44px;height:44px;border-radius:10px;display:block;flex:none}

/* CV timeline: periods of time, not places */
.cv-time{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0;flex:1 1 560px;position:relative}
.cv-time::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--line-strong)}
.cv-period{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;width:100%;min-height:44px;padding:30px 8px 6px 0;position:relative;color:var(--ink-muted)}
.cv-period::before{content:"";position:absolute;left:0;top:16px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line-input);box-sizing:border-box;transition:background-color 200ms ease-out,border-color 200ms ease-out}
.cv-period .yr{font:600 17px/1.2 var(--font-serif);font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.cv-period .pl{font:500 13px/1.4 var(--font-sans)}
.cv-period[aria-current="step"]::before{background:var(--chapter-2);border-color:var(--chapter-2)}
.cv-period[aria-current="step"] .yr{color:var(--chapter-2-text)}
.cv-period:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:6px}
@media (hover:hover){.cv-period:hover .yr{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:.2em}}
.cv-years{margin:0;font:600 clamp(36px,3vw + 16px,52px)/1 var(--font-serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-0.02em;color:var(--chapter-2-text)}
@media (max-width:860px){
.cv-time{display:flex;overflow-x:auto;gap:0;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.cv-time li{flex:0 0 132px}
}

/* Products: brand thumbnail in place of a screenshot */
.prod-thumb{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--radius-lg)}

/* Connect form states */
.cn-field[aria-invalid="true"]{border-color:var(--chapter-3-text);box-shadow:0 0 0 1px var(--chapter-3-text)}
.cn-error{display:flex;align-items:flex-start;gap:6px;margin:0;font:500 14px/1.4 var(--font-sans);color:var(--chapter-3-text)}
.cn-error svg{flex:none;margin-top:2px}
.cn-summary{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:var(--radius-md);border:1px solid var(--chapter-3-text);background:var(--surface-sunk)}
.cn-summary p{margin:0;font:600 15px/1.4 var(--font-sans);color:var(--ink)}
.cn-summary ul{margin:0;padding-left:18px;font:400 14px/1.5 var(--font-sans)}
.cn-summary a{color:var(--chapter-3-text) !important}
.cn-req{color:var(--ink-muted);font-weight:400}
.cn-sent{display:flex;flex-direction:column;gap:20px}
.cn-check{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg)}
.cn-recap{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--line)}
.cn-recap dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 16px;margin:0;font:400 15px/1.5 var(--font-sans)}
.cn-recap dt{color:var(--ink-muted)}
.cn-recap dd{margin:0}
.cn-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.cn-tags li{padding:4px 12px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);font:500 13px/1.4 var(--font-sans)}
.cn-banner{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius-md);background:var(--surface-sunk);border:1px solid var(--line-strong);font:400 15px/1.5 var(--font-sans)}
.jl-btn[aria-disabled="true"]{opacity:.6;cursor:progress}

/* Blog topic and archive pages */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0;font:500 14px/1.4 var(--font-sans);color:var(--ink-muted)}
.crumbs a{color:var(--ink-muted) !important}
.topic-hero{padding-block:64px 32px;display:flex;flex-direction:column;gap:16px;max-width:760px}
.topic-bar{width:56px;height:6px;border-radius:var(--radius-pill)}
.chip-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--radius-pill);font:500 14px/1 var(--font-sans);white-space:nowrap;border:1px solid var(--line-strong);color:var(--ink) !important;text-decoration:none !important}
.chip-link[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--bg) !important}
@media (hover:hover){.chip-link:not([aria-current="page"]):hover{background:var(--surface-sunk)}}
.pager-nums{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line)}
.pager-nums ol{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.pager-nums ol a,.pager-nums ol span{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:var(--radius-pill);font:500 15px/1 var(--font-sans);font-variant-numeric:tabular-nums;text-decoration:none !important}
.pager-nums ol a{color:var(--ink) !important}
@media (hover:hover){.pager-nums ol a:hover{background:var(--surface-sunk)}}
.pager-nums ol [aria-current="page"]{background:var(--ink);color:var(--bg)}

/* 404 */
.nf{padding-block:96px 120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.nf-code{font:500 clamp(120px,14vw,220px)/.9 var(--font-serif);letter-spacing:-0.04em;font-variant-numeric:lining-nums;display:flex;gap:.04em}
.nf-code span:nth-child(1){color:var(--chapter-1-text)}
.nf-code span:nth-child(2){color:var(--chapter-3-text)}
.nf-code span:nth-child(3){color:var(--chapter-2-text)}
.nf-links{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.nf-links a{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--line);font:500 17px/1.4 var(--font-sans);text-decoration:none !important}
@media (hover:hover){.nf-links a:hover span:first-child{text-decoration:underline;text-underline-offset:.2em}}
@media (max-width:860px){
.nf{grid-template-columns:minmax(0,1fr);padding-block:56px 72px;gap:32px}
.topic-hero{padding-block:40px 24px}
.cn-recap dl{grid-template-columns:minmax(0,1fr);gap:2px}
.cn-recap dd{margin-bottom:10px}
}
/* Phase 2 override sheet: additive rules on top of the verbatim bundle.css / site.css.
   Every rule here is a recorded deviation, see .planning/DEVIATIONS.md. */

/* D-01: bundle.css only swaps the Lockup mark for an explicit data-theme="dark";
   in auto mode with an OS dark scheme the night mark must show too. */
@media (prefers-color-scheme:dark){
.jl-root[data-theme="auto"] .jl-on-light{display:none}
.jl-root[data-theme="auto"] .jl-on-dark{display:block}
}

/* D-02: the closed mobile panel stays in the DOM; site.css sets display:block below 900px. */
.hdr-panel[hidden]{display:none}

/* D-09: the page outside .jl-root (overscroll, rubber-band) follows the theme background.
   Tokens are scoped to .jl-root so html cannot use var(--bg); these rgb() values are the
   site.css --bg tokens (light and dark) and tests/e2e/chrome-theme.spec.ts
   asserts they stay equal to the computed .jl-root background. */
html:has(.jl-root){background:rgb(249 250 253)}
html:has(.jl-root[data-theme="dark"]){background:rgb(3 5 16)}
@media (prefers-color-scheme:dark){
html:has(.jl-root[data-theme="auto"]){background:rgb(3 5 16)}
}

/* Pitfall 3 (06-RESEARCH): the board footer sits inside its own opaque .jl-root wrapper; without a
   background the footer mark gradient differs by +-1 per channel at Post 390. Colour equals the page. */
.ftr{background:var(--bg)}

/* Connect recap: long unbroken input (URLs, long emails) wraps inside the card instead of overflowing the page. */
.cn-recap dd{overflow-wrap:anywhere}

/* D-57: the Company field (Jon's addition) is as wide as Phone. The Email/Phone row shares its line from a
   420px form width (200 + 20 gap + 200); there Company is capped at half the row, (100% - 20px) / 2, and below
   it both wrap to full width. The form is the size container; the cap lives in a container query. */
.cn-card form{container-type:inline-size}
@container (min-width:420px){
.cn-card form>div>div:has(>#cn-company){max-width:calc((100% - 20px) / 2)}
}