/* Palette taken from the 2026 deck's diagram images so reused PNGs and new SVGs match */
:root {
  --bg: #fdfdfc;
  --ink: #23232a;
  --muted: #5d5c66;
  --navy: #283593;
  --lav-f: #eeedfb; --lav-s: #8d84d6; --lav-t: #3c3489;
  --grn-f: #e5f4ee; --grn-s: #5e9c82; --grn-t: #22543d;
  --amb-f: #f9efdd; --amb-s: #c09253; --amb-t: #6b4310;
  --pnk-f: #f9e9e7; --pnk-s: #c98680; --pnk-t: #7a2621;
  --gry-f: #f0efeb; --gry-s: #9a9890; --gry-t: #44433f;
  --blu-f: #e8f0fb; --blu-s: #7fa3d6; --blu-t: #1d4e89;
  --line: #6f6e72;
}

html, body, .reveal-viewport { background: var(--bg); }
.reveal .slide-number { font-size: 30px; font-weight: 600; background: transparent; color: var(--muted); right: auto; left: 28px; bottom: 20px; }
/* The muted grey number disappears on the navy title and divider slides */
.reveal:has(section.present.title, section.present.divider) .slide-number { color: #b9bfe8; }
.reveal { font-family: "Inter", system-ui, sans-serif; color: var(--ink); font-size: 54px; }
.reveal .slides { text-align: left; }
.reveal .slides section { padding: 70px 110px 0; box-sizing: border-box; height: 1080px; }

.reveal h1, .reveal h2, .reveal h3 {
  font-family: "Inter", system-ui, sans-serif; text-transform: none; letter-spacing: -0.01em;
  color: var(--navy); font-weight: 700;
}
.reveal h2 { font-size: 80px; margin: 0 0 56px; }
.reveal p { margin: 0 0 28px; line-height: 1.3; }
/* Avoid one-word last lines on wrapped bullets and titles */
.reveal p, .reveal li { text-wrap: pretty; }
.reveal h1, .reveal h2 { text-wrap: balance; }
.reveal strong { color: var(--navy); }

.reveal ul, .reveal ol { display: block; margin: 0 0 0 1.1em; line-height: 1.3; }
.reveal li { margin-bottom: 26px; }
.reveal li::marker { color: var(--navy); }
.reveal li ul li::marker { color: var(--gry-s); }
.reveal li ul { margin-top: 20px; font-size: 0.88em; color: var(--muted); }
.reveal li ul li { margin-bottom: 14px; }
.reveal .tight li { margin-bottom: 16px; }
.reveal .small { font-size: 46px; }
.reveal .lede { font-size: 58px; }
.reveal .after-dia { margin-top: 56px; }
.reveal .caption { color: var(--muted); font-style: italic; text-align: center; margin-top: 30px; }

/* Title and section divider slides */
.reveal section.title, .reveal section.divider { color: #fff; padding-top: 360px; }
.reveal section.title h1 { color: #fff; font-size: 112px; margin-bottom: 40px; }
.reveal section.divider h2 { color: #fff; font-size: 104px; margin-bottom: 36px; }
.reveal section.title p, .reveal section.divider p { color: #d9ddf5; font-size: 58px; }
.reveal section.title::after, .reveal section.divider::after {
  content: ""; position: absolute; left: 110px; top: 300px; width: 160px; height: 10px;
  background: #e8577e; border-radius: 5px;
}

/* Quote slide */
.reveal .quote { font-size: 68px; line-height: 1.3; color: var(--navy); font-weight: 600; margin-top: 120px; }
.reveal .attrib { font-size: 44px; color: var(--muted); margin-top: 60px; line-height: 1.4; }

/* Generic layout helpers */
.reveal .row { display: flex; gap: 70px; align-items: center; }
.reveal .row > .grow { flex: 1; }
.reveal .center { text-align: center; }
/* overflow visible: boxes drawn flush to the viewBox edge would otherwise lose half their stroke */
.reveal svg.dia { display: block; width: 100%; height: auto; overflow: visible; font-family: "Inter", system-ui, sans-serif; }

/* Cards (risk cards, columns, ladders) */
.card { border: 3px solid; border-radius: 22px; padding: 30px 32px; box-sizing: border-box; }
.c-lav { background: var(--lav-f); border-color: var(--lav-s); color: var(--lav-t); }
.c-grn { background: var(--grn-f); border-color: var(--grn-s); color: var(--grn-t); }
.c-amb { background: var(--amb-f); border-color: var(--amb-s); color: var(--amb-t); }
.c-pnk { background: var(--pnk-f); border-color: var(--pnk-s); color: var(--pnk-t); }
.c-gry { background: var(--gry-f); border-color: var(--gry-s); color: var(--gry-t); }
.c-blu { background: var(--blu-f); border-color: var(--blu-s); color: var(--blu-t); }

.risks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.risks .card { height: 340px; text-align: center; padding-top: 34px; }
.risks svg { width: 84px; height: 84px; display: block; margin: 0 auto 18px; }
.risks h3 { font-size: 46px; margin: 0 0 14px; color: inherit; }
.risks p { font-size: 36px; color: var(--ink); opacity: 0.85; margin: 0; line-height: 1.25; }

.skills { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; font-size: 50px; }
.skills div { padding: 22px 0; border-bottom: 2px solid #e4e3df; }
.skills .hd { font-weight: 700; font-size: 54px; border-bottom: 4px solid; }
.skills .old { color: var(--muted); }
.skills .hd.old { border-color: var(--gry-s); }
.skills .new { color: var(--navy); }
.skills .hd.new { border-color: var(--navy); }

.gaps { display: grid; grid-template-columns: 300px 1fr; row-gap: 44px; column-gap: 50px; align-items: center; }
.gaps .card { text-align: center; font-weight: 700; padding: 22px 0; font-size: 48px; }
.gaps p { margin: 0; font-size: 42px; }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.twocol .card { padding: 34px 50px; font-size: 48px; }
.twocol h3 { font-size: 56px; margin: 0 0 24px; color: inherit; }
.twocol .item { color: var(--ink); padding: 14px 0; }
.twocol .foot { margin-top: 26px; padding-top: 22px; border-top: 3px solid; font-weight: 700; }

/* Validation ladder: rungs step up from cheap to expensive */
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; align-items: end; }
.ladder .rung { text-align: center; font-weight: 700; font-size: 42px; padding: 26px 0; }
.ladder .r1 { margin-bottom: 0; } .ladder .r2 { margin-bottom: 30px; } .ladder .r3 { margin-bottom: 60px; }
.ladder .r4 { margin-bottom: 90px; } .ladder .r5 { margin-bottom: 120px; }
.ladder-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 32px; margin: 14px 4px 0; }
.rules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; margin-top: 30px; }
.rules p { font-size: 36px; line-height: 1.3; margin: 0; text-align: center; }

/* Screenshot slides: one caption line, then the still as large as the slide allows */
.reveal .slides section.shot { padding: 50px 60px 0; }
.reveal .shot-cap { font-size: 56px; font-weight: 700; color: var(--navy); margin: 0 0 30px; text-wrap: balance; }
.reveal .shot-cap span { font-size: 32px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 28px; }
.reveal .shot-frame { height: 860px; display: flex; align-items: center; justify-content: center; }
/* Leaves room for a caption line under the still */
.reveal .shot-frame.capped { height: auto; max-height: 760px; }
.reveal .shot .caption { font-size: 38px; margin-top: 24px; }
.reveal .shot-frame img { display: block; margin: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* Drops the triptych's title line (commit hashes); cover + bottom anchor crops from the top only */
.reveal .shot-frame img.crop-title { width: 100%; aspect-ratio: 1894 / 531; object-fit: cover; object-position: 50% 100%; }
/* The 404 capture's lower half is blank: keep the top, bordered so the frame's edge shows */
.reveal .shot-frame img.framed { width: 980px; aspect-ratio: 700 / 320; object-fit: cover; object-position: 50% 0;
  border: 3px solid var(--gry-s); border-radius: 18px; }

.flowline { font-size: 64px; font-weight: 700; color: var(--navy); margin: 40px 0 70px; }
.flowline span { color: var(--muted); font-weight: 400; margin: 0 28px; }

/* About Me: logos right and along the bottom, as on the 2026 slide; heights fixed, widths auto so nothing stretches */
.reveal .about ul { max-width: 1240px; }
.about img { display: block; height: auto; width: auto; }
.about .logos-right { position: absolute; top: 60px; right: 110px; width: 360px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.about .lg-lloyds { height: 210px; }
.about .lg-pulse { height: 320px; }
.about .logos-bottom { position: absolute; left: 110px; bottom: 80px; display: flex; align-items: center; gap: 130px; }
.about .lg-lab { height: 136px; }
.about .lg-mark { height: 190px; }
.about .lg-kinetic { height: 96px; }

/* More from me: pitch left, contact details and LinkedIn card right */
.contact .pitch { max-width: 1080px; }
.contact .pitch p { margin-bottom: 22px; }
.contact .pitch .thanks { margin-top: 40px; }
.contact-card { position: absolute; top: 80px; right: 110px; width: 600px; font-size: 36px; color: var(--navy); }
.contact-card p { margin: 0 0 6px; line-height: 1.3; }
.contact-card .email { color: #c2416b; }
.contact-card .url { margin-top: 26px; white-space: nowrap; }
.contact-card img { display: block; width: 540px; height: auto; margin-top: 30px; border-radius: 18px; }

.placeholder { color: var(--muted); font-family: ui-monospace, Menlo, monospace; }


/* SVG diagram classes */
.dia text { font-family: "Inter", system-ui, sans-serif; }
.dia .lav { fill: var(--lav-f); stroke: var(--lav-s); } .dia .t-lav { fill: var(--lav-t); }
.dia .grn { fill: var(--grn-f); stroke: var(--grn-s); } .dia .t-grn { fill: var(--grn-t); }
.dia .amb { fill: var(--amb-f); stroke: var(--amb-s); } .dia .t-amb { fill: var(--amb-t); }
.dia .pnk { fill: var(--pnk-f); stroke: var(--pnk-s); } .dia .t-pnk { fill: var(--pnk-t); }
.dia .gry { fill: var(--gry-f); stroke: var(--gry-s); } .dia .t-gry { fill: var(--gry-t); }
.dia .blu { fill: var(--blu-f); stroke: var(--blu-s); } .dia .t-blu { fill: var(--blu-t); }
.dia rect, .dia path.box, .dia circle.box { stroke-width: 3; }
.dia .arrow { stroke: var(--line); stroke-width: 4; fill: none; marker-end: url(#arr); }
.dia .dash { stroke-dasharray: 12 9; }
.dia .t-ink { fill: var(--ink); } .dia .t-mut { fill: var(--muted); }
.dia .t-nvy { fill: var(--navy); }

/* Box text for the two-line (title + subtitle) diagrams redrawn from the 2026 deck */
.dia .h { font-size: 36px; font-weight: 700; }
.dia .h.big { font-size: 46px; }
.dia .s { font-size: 28px; font-weight: 400; }
.dia .s.big { font-size: 32px; }
.dia .pill { font-size: 26px; font-weight: 700; }
.dia .lbl { font-size: 30px; font-weight: 700; }
.dia .panel { fill: #f6f5f1; stroke: #cfcdc6; stroke-width: 2; stroke-dasharray: 10 8; }
.dia .link { stroke: var(--line); stroke-width: 2.5; stroke-dasharray: 6 6; }
.dia .pass { stroke: var(--grn-s); stroke-width: 4; fill: none; marker-end: url(#arr-grn); }
.dia .handoff { stroke: var(--pnk-s); stroke-width: 2.5; stroke-dasharray: 8 6; }
.dia .lane { stroke: #e4e3df; stroke-width: 2; }

/* Case study stat tiles */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin: 36px 0 44px; }
.stats div { background: #f3f4fb; border: 2px solid #c5cae9; border-radius: 22px; padding: 26px 10px 22px; text-align: center; }
.stats b { display: block; font-size: 72px; font-weight: 800; color: #283593; line-height: 1; }
.stats span { display: block; font-size: 26px; color: #444; margin-top: 12px; line-height: 1.2; }

/* Best practices per layer: label column, two practice columns */
.practices { display: grid; grid-template-columns: 330px 1fr 1fr; gap: 18px 34px; align-items: center; margin-top: 10px; }
.practices .card { text-align: center; font-weight: 700; font-size: 38px; padding: 16px 0; }
.practices p { margin: 0; font-size: 34px; line-height: 1.25; }

/* Annotated-findings stills: full width, natural aspect, bordered */
.reveal .shot-frame img.wide { width: 100%; max-height: 100%; object-fit: contain; border: 2px solid #c5cae9; border-radius: 18px; background: #fff; }

/* Optional rung (evals): only applies when the product ships AI features, so it must not read as a default layer */
.ladder .rung.optional { border-style: dashed; color: var(--muted); font-weight: 600; }
.reveal li.optional, .reveal li.optional strong { color: var(--muted); }