/* =========================================================================
   Site styles. Colours come from CSS variables, and the accent is set from
   config.yml at runtime, so you should rarely need to touch this file.
   ========================================================================= */

:root {
  --accent: #0f7b8a;
  --accent-dark: #4bb8c7;
  --accent-live: var(--accent);

  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --text: #22262a;
  --muted: #666e76;
  --border: #e4e4e1;
  --code-bg: #f3f4f4;

  --sidebar-text: #eef2f4;
  --sidebar-muted: #a8b6bd;
  --sidebar-overlay: 0.35;
  /* Overlay colour as an r,g,b triple. build.py sets this from
     theme.sidebar_tint in config.yml. */
  --sidebar-tint: 18, 48, 51;

  --sidebar-w: 19rem;
  --measure: 46rem;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 40, .05), 0 6px 20px rgba(20, 30, 40, .06);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  /* No frame in light mode: a white chart on a white page needs nothing. */
  --image-frame: transparent;
  --image-frame-pad: 0rem;
  /* Syntax highlighting. Restrained on purpose: five colours, and anything
     the tokeniser does not recognise stays as body text. */
  --tok-comment: #626b76;
  --tok-string:  #9a4f2c;
  --tok-keyword: #7b3fa0;
  --tok-number:  #1a6b73;
  --tok-func:    #2a5db0;
  --tok-op:      #5c6670;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-live: var(--accent-dark);
    --bg: #14171a;
    --surface: #1b1f23;
    --surface-2: #20252a;
    --text: #e3e6e8;
    --muted: #98a2ab;
    --border: #2a3036;
    --code-bg: #232930;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    /* Most post images are charts on a white background. Framing them stops
       a bright rectangle looking like an accident. */
    --image-frame: #f3f3f1;
    --image-frame-pad: .8rem;
    --tok-comment: #8a949e;
    --tok-string:  #e0a072;
    --tok-keyword: #c8a0e8;
    --tok-number:  #7fd0d8;
    --tok-func:    #86b4f0;
    --tok-op:      #a8b2bb;
  }
}

:root[data-theme="dark"] {
  --accent-live: var(--accent-dark);
  --bg: #14171a;
  --surface: #1b1f23;
  --surface-2: #20252a;
  --text: #e3e6e8;
  --muted: #98a2ab;
  --border: #2a3036;
  --code-bg: #232930;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --image-frame: #f3f3f1;
  --image-frame-pad: .8rem;
  --tok-comment: #8a949e;
  --tok-string:  #e0a072;
  --tok-keyword: #c8a0e8;
  --tok-number:  #7fd0d8;
  --tok-func:    #86b4f0;
  --tok-op:      #a8b2bb;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-live); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }

code, pre, kbd { font-family: var(--font-mono); font-size: .9em; }

code {
  background: var(--code-bg);
  padding: .12em .35em;
  border-radius: 4px;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; }

.tok-comment { color: var(--tok-comment); font-style: italic; }
.tok-string  { color: var(--tok-string); }
.tok-keyword { color: var(--tok-keyword); font-weight: 600; }
.tok-number  { color: var(--tok-number); }
.tok-func    { color: var(--tok-func); }
.tok-op      { color: var(--tok-op); }

@media print {
  .tok-comment, .tok-string, .tok-keyword, .tok-number, .tok-func, .tok-op {
    color: #000;
  }
}

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: .75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

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

.layout { display: flex; min-height: 100vh; }

.main-col {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--measure) + 6rem);
  margin: 0 auto;
  padding: 3rem 3rem 4rem;
  outline: none;
  transition: opacity .12s ease;
}
.content.is-leaving { opacity: .35; }

/* ----------------------------------------------------------------- sidebar */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  color: var(--sidebar-text);
  background-color: rgb(var(--sidebar-tint));
  /* build.py adds the background image in an inline <style> on each page.
     A relative url() cannot live in a custom property here, because the
     browser would resolve it against this file rather than the page. */
  background-image:
    linear-gradient(rgba(var(--sidebar-tint), var(--sidebar-overlay)),
                    rgba(var(--sidebar-tint), var(--sidebar-overlay)));
  background-size: cover;
  background-position: center;
  overflow-y: auto;
  z-index: 30;
}

.sidebar-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.75rem 1.5rem;
}

.avatar-link { display: inline-block; }

.avatar {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
}

.site-title {
  display: block;
  margin: 1.1rem 0 .2rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.site-title:hover { text-decoration: none; opacity: .85; }

.site-role {
  margin: 0 0 .4rem;
  color: var(--accent-dark);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.site-tagline {
  margin: 0;
  color: var(--sidebar-muted);
  font-size: .93rem;
  line-height: 1.5;
}

.site-nav { margin: 2rem 0 auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0 0 .15rem; }

.site-nav a {
  display: block;
  padding: .5rem .75rem;
  margin-left: -.75rem;
  border-radius: 8px;
  color: var(--sidebar-text);
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.site-nav a:hover { background: rgba(255, 255, 255, .09); text-decoration: none; }
.site-nav a.is-active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }

.sidebar-foot { padding-top: 2rem; }

.social { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; }

.social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  color: var(--sidebar-text);
  background: rgba(255, 255, 255, .08);
  transition: background .15s ease, transform .15s ease;
}
.social a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }

.icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-inline { width: 1rem; height: 1rem; vertical-align: -2px; }

.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: var(--sidebar-muted);
  font: inherit;
  font-size: .82rem;
  padding: .35rem .8rem;
  cursor: pointer;
}
.mode-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.mode-dot { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 20;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar-title {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface); }
.icon-btn svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: none; }
:root[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: none; }
  :root:not([data-theme="light"]) .i-moon { display: block; }
}

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 18, .5);
  z-index: 25;
}

/* ------------------------------------------------------------------- pages */

.page-head { margin-bottom: 2rem; }
.page-head h1 { margin-bottom: .35rem; }

.lede { color: var(--muted); font-size: 1.08rem; margin-bottom: .75rem; }

.meta { color: var(--muted); font-size: .87rem; margin: 0 0 .6rem; }
.meta a { color: var(--muted); text-decoration: underline; }
.dot { opacity: .5; padding: 0 .15rem; }

.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--radius); }
.prose.tight { margin-bottom: .5rem; }
.prose.tight p { margin-bottom: .5em; }

.prose blockquote {
  margin: 1.5rem 0;
  padding: .25rem 0 .25rem 1.1rem;
  border-left: 3px solid var(--accent-live);
  color: var(--muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Old Jekyll posts: {:.figcaption} and {:.note} under a paragraph. */
.prose figure { margin: 1.5rem 0; }
.prose figure img { display: block; }
.prose figcaption, .prose .figcaption {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .87rem;
}
.prose .note {
  padding: .7rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-live);
  border-radius: var(--radius);
  font-size: .95rem;
}

.table-wrap { overflow-x: auto; margin: 0 0 1.2rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); }
th { font-weight: 600; background: var(--surface-2); }

.section { margin-top: 3rem; }
.item-lead {
  font-weight: 600;
  color: var(--text);
  max-width: var(--measure);
  margin: -.2rem 0 .9rem;
}

.section-lede {
  color: var(--muted);
  max-width: var(--measure);
  margin: -.4rem 0 1.4rem;
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.section-head h2 { margin: 0; }
.link-more { font-size: .9rem; font-weight: 600; white-space: nowrap; }

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card.pad { padding: 1.25rem 1.4rem; }
.card-body { padding: 1.4rem 1.5rem; }
.card-title { font-size: 1.3rem; margin-bottom: .3rem; }
.card-title a { color: var(--text); }
.card-title a:hover { color: var(--accent-live); text-decoration: none; }
.card-excerpt { color: var(--muted); margin-bottom: .9rem; }
.card-excerpt > :last-child { margin-bottom: 0; }
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 7; }

.post-list { display: grid; gap: 1.25rem; }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
/* Three across on a wide screen, so three cards never leave an orphan on a
   row of its own. Stacks below 52rem. */
.grid.highlights { margin-top: 2rem; grid-template-columns: repeat(3, 1fr); }
.grid.highlights h3 { font-size: 1rem; margin-bottom: .35rem; }
.grid.highlights p { color: var(--muted); font-size: .95rem; margin: 0; }

@media (max-width: 52rem) {
  .grid.highlights { grid-template-columns: 1fr; }
}

/* A highlight card that is a doorway into the site.

   The card is a div rather than an anchor, so the text inside it can carry a
   link of its own. The arrow link at the foot stretches an invisible overlay
   across the whole card, which keeps the card clickable, and any other link
   in the card sits above that overlay. */
.highlight-link {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
.highlight-link:hover,
.highlight-link:has(a:focus-visible) {
  border-color: var(--accent-live);
  transform: translateY(-2px);
}
.highlight-link p { flex: 1 1 auto; }

/* Links written into the card text: above the overlay, so they win. */
.highlight-link p a {
  position: relative;
  z-index: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.highlight-go {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .9rem;
  font-size: .87rem;
  font-weight: 600;
}
.highlight-go a { color: var(--accent-live); }
.highlight-go a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.highlight-link:hover .highlight-go a { text-decoration: underline; }
/* Work index cards. The anchor on the title is the only link in the card;
   it is stretched over the whole card below, so the card clicks without
   putting an anchor inside an anchor. A card with no image yet renders
   without the frame rather than leaving a gap. */
.work-card { position: relative; transition: border-color .15s ease; }
.work-card .card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.work-card:hover { border-color: var(--accent-live); }
.work-card:focus-within { border-color: var(--accent-live); }
.work-card .card-excerpt { margin-bottom: 0; }

/* Questions and answers on a page, closed until asked for. Native
   details/summary, so keyboard and screen reader behaviour comes free and
   nothing loads to make it work. */
.faq { max-width: var(--measure); border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted);
  transition: transform .15s ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent-live); }
.faq summary:focus-visible { outline: 2px solid var(--accent-live); outline-offset: 2px; }
.faq details[open] summary { padding-bottom: .4rem; }
.faq .prose { padding-bottom: 1.1rem; }
.faq .prose > :last-child { margin-bottom: 0; }

.grid.projects { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

/* Somebody else's words about a package. Understated on purpose: a rule and
   a slight indent, no pull-quote theatrics. */
.project-quote {
  margin: 0 0 1rem;
  padding-left: .9rem;
  border-left: 2px solid var(--accent-live);
}
.project-quote p { margin: 0 0 .35rem; font-size: .95rem; }
.project-quote cite { font-style: normal; font-size: .85rem; color: var(--muted); }

.project-links { margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ------------------------------------------------------- buttons and tags */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .95rem;
  border: 1px solid var(--accent-live);
  border-radius: 999px;
  color: var(--accent-live);
  background: none;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--accent-live); color: #fff; text-decoration: none; }
.btn:hover .icon { stroke: #fff; }
.btn-small { font-size: .82rem; padding: .3rem .75rem; }
.btn-ghost { border-color: var(--border); color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; }

.tag {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}
a.tag:hover { color: var(--accent-live); border-color: var(--accent-live); text-decoration: none; }
a.tag.is-active { background: var(--accent-live); border-color: var(--accent-live); color: #fff; }

.tag-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.filter-note { margin-bottom: 1.25rem; }

/* -------------------------------------------------------------- post pages */

.post-hero { border-radius: var(--radius); margin-bottom: 2rem; width: 100%; }

/* Header images and images inside a post. In dark mode they sit on a light
   frame, which also rescues a chart saved with a transparent background and
   black text. Box-sizing keeps the padding inside the column width. */
.post-hero,
.prose img {
  box-sizing: border-box;
  background: var(--image-frame);
  padding: var(--image-frame-pad);
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
}
.post-nav a { color: var(--text); display: block; }
.post-nav a:hover { border-color: var(--accent-live); text-decoration: none; }
.post-nav a.align-end { text-align: right; }
.post-nav-title { display: block; font-weight: 600; }

/* ---------------------------------------------------------------------- cv */

.timeline { display: grid; gap: 1.75rem; }

.timeline-item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline-when { color: var(--muted); font-size: .9rem; font-weight: 600; padding-top: .15rem; }
.timeline-what h3 { margin-bottom: .15rem; }

.bullets { margin: .6rem 0 0; padding-left: 1.2rem; }
.bullets li { margin-bottom: .35rem; }

.cv-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

.grid.skills h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.grid.skills .tags { margin-bottom: 0; }

/* ------------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--border); margin-top: 3rem; }

.footer-inner {
  max-width: calc(var(--measure) + 6rem);
  margin: 0 auto;
  padding: 1.5rem 3rem 2.5rem;
  color: var(--muted);
  font-size: .85rem;
}
.footer-inner p { margin: 0 0 .25rem; }
.footer-meta { opacity: .75; }

.loading { color: var(--muted); display: flex; align-items: center; gap: .6rem; }

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border);
  border-top-color: var(--accent-live);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.noscript { padding: 2rem; max-width: 40rem; margin: 0 auto; }

/* -------------------------------------------------------------- responsive */

/* ------------------------------------------------- closing note and archive */

/* Quiet sign-off at the foot of a page. A rule and a tint, no shouting. */
.section.closing {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.section.closing .prose { max-width: var(--measure); }
.section.closing p { margin-bottom: .6em; }

.archive-year { margin-top: 2.4rem; }
.archive-year h2,
.archive-year h3 {
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .8rem;
}
.archive-list { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.archive-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
}
.archive-list li:last-child { border-bottom: 0; }
.archive-list a { flex: 1 1 18rem; }
.archive-list .meta { margin: 0; white-space: nowrap; }

.archive-note {
  margin-bottom: 2rem;
  border-left: 3px solid var(--accent-live);
  color: var(--muted);
  font-size: .93rem;
}
.archive-note > :last-child { margin-bottom: 0; }

@media (max-width: 60rem) {
  body { font-size: 16px; }

  .sidebar {
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: none;
  }
  body.drawer-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }

  .main-col { margin-left: 0; }
  .topbar { display: flex; }
  .content { padding: 2rem 1.25rem 3rem; }
  .footer-inner { padding: 1.5rem 1.25rem 2.5rem; }

  h1 { font-size: 1.8rem; }

  .timeline-item { grid-template-columns: 1fr; gap: .35rem; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav a.align-end { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------- print */

@media print {
  .sidebar, .topbar, .backdrop, .site-footer, .no-print, .btn { display: none !important; }
  .main-col { margin-left: 0; }
  .content { max-width: none; padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { border: 0; box-shadow: none; padding: 0; }
  .card.pad { padding: 0 0 .75rem; }
  .timeline-item { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.home-image{margin:2rem 0 0}