/* Chess Data Platform case study. verify-assets: 1.1.0
   Palette is the portfolio deck's: a chessboard. Board green and the light
   square carry the page; amber is "the move" and is spent sparingly; the
   medallion layers keep their metal colours. One bold element (the board in
   the hero); everything after it is rules, tables and prose. */
:root {
    --ink: #1B1F23;
    --green: #5E7F3E;
    --green-deep: #3F5A2A;
    --square: #EBECD0;
    --amber: #C8892B;
    --slate: #5B6770;
    --mute: #8A939B;
    --rule: #D5D8D0;
    --tint: #F4F5EF;
    --paper: #FFFFFF;
    --bronze: #A0673A;
    --silver: #7C8791;
    --gold: #B8912F;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --mono: "IBM Plex Mono", Consolas, "SFMono-Regular", monospace;
    --measure: 68ch;
    --wide: 1140px;
}
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.04rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.cdp { overflow-x: clip; }
.cdp a { color: var(--green-deep); text-underline-offset: 0.15em; }
.cdp a:hover { color: var(--amber); }
.cdp :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.cdp .wrap { max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
.cdp h1, .cdp h2, .cdp h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.012em; line-height: 1.12; margin: 0; }
.cdp h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); font-variation-settings: "opsz" 72; }
.cdp h3 { font-size: 1.22rem; font-weight: 600; }
.cdp p { margin: 0 0 1rem; max-width: var(--measure); }
.cdp ul, .cdp ol { max-width: var(--measure); padding-left: 1.2rem; }
.cdp li { margin-bottom: 0.45rem; }
.cdp li b, .cdp p b { font-weight: 600; }
.cdp code, .cdp pre { font-family: var(--mono); }
.cdp code { font-size: 0.92em; color: inherit; background: var(--tint); padding: 0.05em 0.35em; border-radius: 3px; }
/* Lists that are layout, not prose: beat the .cdp ol/ul measure above on specificity. */
.cdp .cdp-flow, .cdp .cdp-timeline, .cdp .cdp-star, .cdp .cdp-tech, .cdp .cdp-steps, .cdp .cdp-lessons, .cdp .cdp-path, .cdp .cdp-close ul { max-width: none; }
.cdp-cols > *, .cdp-report > *, .cdp-tenants > * { min-width: 0; }

/* ---------- hero: the board ---------- */
.cdp-hero { background: var(--ink); color: var(--square); padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2.4rem, 5vw, 4rem); }
.cdp-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.cdp-kicker { color: var(--square); opacity: 0.72; font-size: 0.95rem; margin: 0 0 1rem; }
.cdp-hero h1 { font-size: clamp(2.5rem, 2rem + 3.4vw, 4.4rem); font-variation-settings: "opsz" 144; color: #fff; margin-bottom: 1rem; }
.cdp-lede { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); line-height: 1.5; color: var(--square); max-width: 34ch; margin-bottom: 1.6rem; }
.cdp-path { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5em; row-gap: 0.2em; font-family: var(--mono); font-size: 0.88rem; color: var(--amber); line-height: 1.5; margin: 0 0 1.8rem; }
.cdp-path span { white-space: nowrap; }
.cdp-path i { font-style: normal; color: var(--mute); }
.cdp-hero .cdp-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cdp-btn { display: inline-block; padding: 0.6rem 1.1rem; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; }
.cdp-btn-solid { background: var(--amber); color: var(--ink) !important; }
.cdp-btn-solid:hover { background: #d99a3d; }
.cdp-btn-ghost { border-color: rgba(235,236,208,0.45); color: var(--square) !important; }
.cdp-btn-ghost:hover { border-color: var(--square); }
.cdp-board { aspect-ratio: 1; width: 100%; max-width: 420px; justify-self: end; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 6px solid #2A3036; box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.cdp-board i { display: block; background: #2A3036; }
.cdp-board i:nth-child(16n+1), .cdp-board i:nth-child(16n+3), .cdp-board i:nth-child(16n+5), .cdp-board i:nth-child(16n+7),
.cdp-board i:nth-child(16n+10), .cdp-board i:nth-child(16n+12), .cdp-board i:nth-child(16n+14), .cdp-board i:nth-child(16n+16) { background: var(--green-deep); }
.cdp-board i.move { background: var(--amber); }
.cdp-board i.trail { background: rgba(200,137,43,0.28); }

/* ---------- in-page nav ---------- */
/* top clears the site navbar, which is sticky-top itself (56px). */
.cdp-toc { position: sticky; top: 56px; z-index: 30; background: rgba(255,255,255,0.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.cdp-toc ul { list-style: none; margin: 0; padding: 0 20px; max-width: var(--wide); margin: 0 auto; display: flex; gap: 0.2rem; overflow-x: auto; scrollbar-width: none; }
.cdp-toc ul::-webkit-scrollbar { display: none; }
.cdp-toc li { margin: 0; flex: 0 0 auto; }
.cdp-toc a { display: block; padding: 0.7rem 0.7rem; font-size: 0.86rem; font-weight: 500; color: var(--slate); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.cdp-toc a:hover, .cdp-toc a.on { color: var(--ink); border-bottom-color: var(--green); }

/* ---------- sections ---------- */
.cdp-sec { padding: clamp(2.6rem, 6vw, 4.5rem) 0; scroll-margin-top: 6.6rem; }
.cdp-sec + .cdp-sec { border-top: 1px solid var(--rule); }
.cdp-sec.tint { background: var(--tint); }
.cdp-sec.ink { background: var(--ink); color: var(--square); }
.cdp-sec.ink h2, .cdp-sec.ink h3 { color: #fff; }
.cdp-sec.ink a { color: var(--square); }
.cdp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem 3rem; align-items: start; margin-bottom: 2.2rem; }
.cdp-head .cdp-mark { font-family: var(--serif); font-size: 0.95rem; color: var(--green); margin-bottom: 0.35rem; font-weight: 500; }
.cdp-head p { margin: 0; color: var(--slate); }
.cdp-sec.ink .cdp-head p, .cdp-sec.ink .cdp-mark { color: var(--square); opacity: 0.8; }
.cdp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem 3rem; }
.cdp-note { color: var(--slate); font-size: 0.95rem; }

/* ---------- at a glance ---------- */
.cdp-question { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-style: italic; line-height: 1.3; color: var(--ink); max-width: 24ch; margin: 0 0 1.4rem; }
.cdp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cdp-stat { background: var(--paper); padding: 1.1rem 1.1rem 1rem; }
.cdp-stat b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.cdp-stat b.amber { color: var(--amber); }
.cdp-stat span { display: block; color: var(--slate); font-size: 0.86rem; margin-top: 0.45rem; line-height: 1.3; }
.cdp-live { margin-top: 0.9rem; font-size: 0.86rem; color: var(--slate); }
.cdp-live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 0.5em; vertical-align: 0.05em; }
.cdp-tech { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.5rem; list-style: none; padding: 0; max-width: none; }
.cdp-tech li { margin: 0; font-size: 0.8rem; font-weight: 500; padding: 0.25rem 0.6rem; border: 1px solid var(--rule); border-radius: 3px; color: var(--slate); background: var(--paper); }

/* ---------- architecture flow ---------- */
.cdp-orch { border: 1px solid var(--rule); background: var(--paper); padding: 1rem 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.8rem 2rem; margin-bottom: 1.4rem; }
.cdp-orch b { display: block; font-weight: 600; }
.cdp-orch span { color: var(--slate); font-size: 0.92rem; }
.cdp-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; max-width: none; counter-reset: stage; }
.cdp-flow li { position: relative; margin: 0; padding: 1rem 1.1rem 1rem 1rem; border: 1px solid var(--rule); border-left: 4px solid var(--stage, var(--slate)); background: var(--paper); margin-right: -1px; }
.cdp-flow li::after { content: "\2192"; position: absolute; right: -0.55em; top: 0.8rem; color: var(--green); font-size: 1.1rem; background: var(--paper); line-height: 1; z-index: 1; padding: 0 0.1em; }
.cdp-flow li:last-child::after { content: none; }
.cdp-flow b { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.3rem; }
.cdp-flow p { font-size: 0.88rem; color: var(--slate); margin: 0 0 0.7rem; }
.cdp-flow small { display: block; font-size: 0.8rem; color: var(--green-deep); font-weight: 600; border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.cdp-flow small em { display: block; font-style: normal; font-weight: 400; color: var(--mute); font-size: 0.74rem; }

/* ---------- environment ---------- */
.cdp-tenants { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
.cdp-tenant { background: var(--paper); border: 1px solid var(--rule); padding: 1.2rem; }
.cdp-tenant h3 { color: var(--green); margin-bottom: 0.9rem; }
.cdp-tenant dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 0; }
.cdp-tenant dt { font-weight: 600; font-size: 0.95rem; }
.cdp-tenant dd { margin: 0.2rem 0 0; color: var(--slate); font-size: 0.86rem; line-height: 1.4; }
.cdp-bridge { text-align: center; color: var(--amber); font-weight: 600; font-size: 0.82rem; line-height: 1.3; padding: 0 0.3rem; }
.cdp-bridge::before { content: ""; display: block; width: 100%; height: 2px; background: var(--amber); margin-bottom: 0.4rem; }

/* ---------- run timeline ---------- */
.cdp-timeline { list-style: none; padding: 0; margin: 0 0 2rem; max-width: none; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.6rem; }
.cdp-timeline li { margin: 0; position: relative; padding-top: 1.4rem; font-size: 0.86rem; }
.cdp-timeline li::before { content: ""; position: absolute; top: 0.5rem; left: 0; right: -0.6rem; height: 2px; background: var(--rule); }
.cdp-timeline li:last-child::before { right: 0; }
.cdp-timeline li::after { content: ""; position: absolute; top: 0.18rem; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--dot, var(--slate)); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--rule); }
.cdp-timeline time { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--ink); font-weight: 600; }
.cdp-timeline b { display: block; color: var(--dot, var(--slate)); font-weight: 600; }
.cdp-timeline span { color: var(--slate); }
.cdp-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem 2.5rem; }
.cdp-three > div { border-top: 3px solid var(--green); padding-top: 0.8rem; }
.cdp-three h3 { margin-bottom: 0.4rem; }
.cdp-three p { font-size: 0.95rem; margin: 0; }

/* ---------- layers ---------- */
.cdp-layer { --metal: var(--slate); }
.cdp-layer .cdp-head .cdp-mark { color: var(--metal); }
.cdp-layer .cdp-head .cdp-mark::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--metal); margin-right: 0.5em; }
.cdp-layer.bronze { --metal: var(--bronze); }
.cdp-layer.silver { --metal: var(--silver); }
.cdp-layer.gold { --metal: var(--gold); }
.cdp-dl { margin: 0 0 1.4rem; max-width: var(--measure); }
.cdp-dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--rule); font-size: 0.95rem; }
.cdp-dl div:last-child { border-bottom: 1px solid var(--rule); }
.cdp-dl dt { font-weight: 600; margin: 0; }
.cdp-dl dd { margin: 0; color: var(--slate); }
.cdp-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.4rem 0 1.4rem; max-width: none; }
.cdp-steps li { margin: 0; font-size: 0.86rem; padding: 0.45rem 0.7rem; border: 1px solid var(--rule); background: var(--paper); }
.cdp-steps li + li::before { content: "\2192"; margin-right: 0.7rem; color: var(--metal); }
.cdp-code { background: var(--ink); color: var(--square); font-size: 0.8rem; line-height: 1.55; padding: 1.1rem 1.2rem; overflow-x: auto; border-radius: 4px; margin: 0; }
.cdp-code .c { color: var(--mute); }
.cdp-code .k { color: var(--amber); }
.cdp-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; background: var(--paper); }
.cdp-table th, .cdp-table td { padding: 0.5rem 0.65rem; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.cdp-table th { background: var(--ink); color: #fff; font-weight: 600; }
.cdp-table tbody tr:nth-child(even) td { background: var(--tint); }
.cdp-table td.mono { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }
.cdp-names td:nth-child(3) { white-space: normal; }
.cdp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cdp-callout { border-left: 4px solid var(--green); background: var(--tint); padding: 0.9rem 1.1rem; margin-top: 1.4rem; max-width: var(--measure); }
.cdp-callout b { display: block; color: var(--green); margin-bottom: 0.2rem; }
.cdp-callout p { margin: 0; font-size: 0.95rem; }

/* star schema */
.cdp-star { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 0.9rem; max-width: none; }
.cdp-star li { margin: 0; border: 1px solid var(--gold); background: var(--paper); padding: 0.55rem 0.4rem; text-align: center; font-size: 0.8rem; }
.cdp-star li b { display: block; font-family: var(--mono); font-weight: 600; font-size: 0.78rem; }
.cdp-star li span { color: var(--slate); }
.cdp-bus { height: 2px; background: var(--gold); margin: 0 6.5% 0.9rem; position: relative; }
.cdp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.cdp-fact { background: var(--ink); color: var(--square); padding: 1rem 1.2rem; position: relative; }
.cdp-fact::before { content: ""; position: absolute; top: -0.9rem; left: 50%; width: 2px; height: 0.9rem; background: var(--gold); }
.cdp-fact b { display: block; font-family: var(--mono); color: #fff; font-size: 1.05rem; margin-bottom: 0.3rem; }
.cdp-fact span { font-size: 0.86rem; }
.cdp-moveonly { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.4rem; font-size: 0.86rem; color: var(--slate); align-items: center; }
.cdp-moveonly span { border: 1px solid var(--gold); padding: 0.35rem 0.6rem; background: var(--paper); font-family: var(--mono); font-size: 0.78rem; color: var(--ink); }

/* ---------- charts: one series, so the table is the chart ---------- */
.cdp-bars { width: 100%; border-collapse: collapse; font-size: 0.9rem; max-width: 560px; }
.cdp-bars caption { text-align: left; font-weight: 600; padding: 0 0 0.6rem; caption-side: top; }
.cdp-bars th { font-weight: 400; color: var(--slate); text-align: left; padding: 0.3rem 0.8rem 0.3rem 0; white-space: nowrap; width: 1%; }
.cdp-bars td { padding: 0.3rem 0; }
.cdp-bars .bar { display: flex; align-items: center; gap: 0.6rem; }
.cdp-bars .bar i { display: block; height: 14px; background: var(--green); border-radius: 0 4px 4px 0; min-width: 2px; }
.cdp-bars .bar b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdp-bars tr:hover td .bar i { background: var(--green-deep); }
.cdp-bars tfoot td { padding-top: 0.6rem; color: var(--slate); font-size: 0.86rem; font-style: italic; }
.cdp-decisions { display: grid; gap: 1.2rem; }
.cdp-decisions div { border-top: 3px solid var(--green); padding-top: 0.7rem; }
.cdp-decisions h3 { color: var(--green); margin-bottom: 0.3rem; font-size: 1.1rem; }
.cdp-decisions p { margin: 0; font-size: 0.95rem; }
.cdp-big { font-family: var(--serif); font-size: 2.4rem; color: var(--amber); font-weight: 600; line-height: 1; }

/* ---------- screenshots ---------- */
.cdp-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem 2.5rem; }
.cdp-shots figure { margin: 0; }
.cdp-shots figure.wide { grid-column: 1 / -1; }
.cdp-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--paper); }
.cdp-shots figcaption { margin-top: 0.7rem; font-size: 0.92rem; color: var(--slate); max-width: var(--measure); }
.cdp-shots figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.15rem; }
.cdp-shots figure.wide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 1.5rem 2rem; align-items: start; }
.cdp-shots figure.wide figcaption { margin-top: 0; }
.cdp-shots figure.wide figcaption p { font-size: 0.92rem; margin-bottom: 0.9rem; }
.cdp-shots figure.wide figcaption p b { display: inline; }

/* ---------- report insights ---------- */
.cdp-report { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 1.5rem 2.5rem; align-items: start; margin-bottom: 3rem; }
.cdp-report img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.cdp-report h3 { margin-bottom: 0.9rem; }
.cdp-insight { border-top: 1px solid var(--rule); padding: 0.8rem 0; }
.cdp-insight b { display: block; font-family: var(--serif); font-size: 1.7rem; color: var(--amber); font-weight: 600; line-height: 1.05; margin-bottom: 0.25rem; font-variant-numeric: tabular-nums; }
.cdp-insight span { font-size: 0.9rem; color: var(--slate); }

/* ---------- practices, roadmap, close ---------- */
.cdp-tree { font-size: 0.82rem; }
.cdp-lessons { list-style: none; padding: 0; margin: 0; max-width: none; }
.cdp-lessons li { border-top: 1px solid var(--rule); padding: 0.8rem 0; margin: 0; }
.cdp-lessons b { display: block; margin-bottom: 0.15rem; }
.cdp-lessons span { color: var(--slate); font-size: 0.95rem; }
.cdp-sec.ink .cdp-lessons li { border-top-color: rgba(235,236,208,0.2); }
.cdp-sec.ink .cdp-lessons span { color: var(--square); opacity: 0.8; }
.cdp-verdict { border-left: 4px solid var(--amber); padding: 0.2rem 0 0.2rem 1rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; max-width: 40ch; }
.cdp-close ul { list-style: none; padding: 0; }
.cdp-close li b { color: #fff; }
.cdp-close .cdp-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .cdp-flow { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
    .cdp-flow li { margin-right: 0; }
    .cdp-flow li::after { content: none; }
    .cdp-timeline { grid-template-columns: repeat(4, 1fr); row-gap: 1.2rem; }
    .cdp-star { grid-template-columns: repeat(4, 1fr); }
    .cdp-bus { display: none; }
    .cdp-fact::before { content: none; }
}
@media (max-width: 720px) {
    .cdp-hero .wrap { grid-template-columns: minmax(0, 1fr); }
    .cdp-board { max-width: 260px; justify-self: start; }
    .cdp-head { grid-template-columns: 1fr; gap: 0.6rem; }
    .cdp-stats { grid-template-columns: repeat(2, 1fr); }
    .cdp-tenants { grid-template-columns: minmax(0, 1fr); }
    .cdp-bridge::before { display: none; }
    .cdp-flow { grid-template-columns: 1fr 1fr; }
    .cdp-timeline { grid-template-columns: repeat(2, 1fr); }
    .cdp-star { grid-template-columns: repeat(2, 1fr); }
    .cdp-facts { grid-template-columns: 1fr; }
    .cdp-report, .cdp-shots figure.wide { grid-template-columns: minmax(0, 1fr); }
    .cdp-tenant dl { grid-template-columns: 1fr; }
    .cdp-dl div { grid-template-columns: 1fr; gap: 0.1rem; }
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}