must not re-pad or re-colour — that belongs to the frame
and to the highlighter respectively. Applies whether or not the block is
wrapped, since both cases share …
. */
pre.hl-code code {
font-family: inherit;
font-size: inherit;
line-height: inherit;
background: none;
padding: 0;
}
/* ---- Djot output ----
`::: warning` renders as , and the heading inside it
is the callout's title. */
.prose .warning,
.prose .note {
margin: 2.4rem 0;
padding: 1.25rem 1.5rem 1.35rem;
border-left: 2px solid var(--warn-edge);
background: var(--warn-bg);
border-radius: 0 5px 5px 0;
font-size: 0.95rem;
line-height: 1.68;
}
.prose .note {
border-left-color: var(--accent);
background: var(--surface);
}
/* The title earns its own colour and tracking rather than just more weight:
at 0.95rem body copy, a 1rem bold heading reads as an emphasised sentence,
not as a label. Sentence case is deliberate — these titles carry acronyms
("ARC eats your RAM") that uppercasing would flatten. */
.prose .warning > h2,
.prose .note > h2 {
margin: 0 0 0.7rem;
font-size: 1.06rem;
font-weight: 650;
line-height: 1.3;
letter-spacing: -0.006em;
color: var(--warn-title);
}
.prose .note > h2 {
color: var(--note-title);
}
/* A callout that opens with a title and runs several paragraphs needs the
paragraphs held apart too, or the block reads as one grey slab. */
.prose .warning > * + *,
.prose .note > * + * {
margin-top: 0.85rem;
}
.prose .warning > :last-child,
.prose .note > :last-child {
margin-bottom: 0;
}
/* ---- Diagram lightbox ----
The trigger is an overlay button covering the whole figure, added by
script: the figure keeps its role="img" and label, the click target is the
diagram itself, and the keyboard gets a real focusable control rather than
a div with a click handler. */
.prose figure.is-zoomable {
position: relative;
}
.lightbox-trigger {
position: absolute;
inset: 0;
width: 100%;
padding: 0;
border: 0;
border-radius: inherit;
background: none;
cursor: zoom-in;
}
.lightbox-trigger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.lightbox {
width: min(96vw, 1500px);
max-height: 94vh;
padding: 0;
border: 1px solid var(--rule);
border-radius: 8px;
background: var(--bg);
color: var(--text);
overflow: hidden;
}
.lightbox::backdrop {
background: rgb(0 0 0 / 0.74);
}
.lightbox-stage {
padding: 1.25rem;
max-height: 94vh;
overflow: auto;
}
/* The diagrams carry their own viewBox, so width alone scales them; height
auto keeps the aspect ratio the SVG declares. */
.lightbox-stage svg {
display: block;
width: 100%;
height: auto;
}
.lightbox-close {
position: absolute;
top: 0.55rem;
right: 0.55rem;
z-index: 1;
display: inline-flex;
padding: 0.32rem;
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.lightbox-close svg {
width: 1.15rem;
height: 1.15rem;
}
.lightbox-close:hover {
border-color: var(--accent);
color: var(--accent);
}
.lightbox-close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.math-error {
background: var(--warn-bg);
border-bottom: 1px dotted var(--warn-edge);
}
math {
font-size: 1.05em;
}
/* ---- focus ----
The audit found no focus styles at all: keyboard users got only the browser
default, which `text-decoration: none` on nav links made worse. */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
/* Only suppress the ring for pointer users, never for keyboard. */
:focus:not(:focus-visible) {
outline: none;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
padding: 0.6rem 1rem;
background: var(--bg);
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 0 0 5px 0;
z-index: 10;
}
.skip-link:focus {
left: 0;
}
/* ---------- print (the CV, downloaded as a PDF or printed directly) ---------- */
@media print {
.site-head,
.site-foot,
.skip-link,
.theme-switch,
.lightbox,
.lightbox-trigger,
.cv-download {
display: none;
}
/* Print is always the light palette; a dark CV wastes toner and reads
badly on paper. `:root[data-theme="dark"]` (set by the toggle's
localStorage-backed script) is more specific than a bare `:root`, so a
reader who last left the site in dark mode would otherwise still get a
dark printout — hence !important, not just a higher-specificity rule. */
:root {
color-scheme: light !important;
}
body {
font-size: 10.5pt;
line-height: 1.45;
}
.wrap {
max-width: none;
padding: 0;
}
/* Links must not print as blue underlined web links, but the contact line
(phone, email) still needs to be readable as plain text on paper. */
a {
color: inherit;
text-decoration: none;
}
/* Roles must not be split across a page break mid-entry, and a role's
heading/date line must never be orphaned alone at the foot of a page. */
.cv-role {
break-inside: avoid;
}
.cv-role h3,
.cv-role .meta {
break-after: avoid;
}
/* A section heading (Experience/Skills/Education) must not print alone at
the foot of a page with its content pushed to the next one. */
h2 {
break-after: avoid;
}
@page {
margin: 18mm 16mm;
}
}