/* Navigation preview (portfolio-visual-refresh-plan.md §3 V2). site-fixes.js sets
   <html data-cs-nav="a|b|framer"> from ?nav=… (remembered per browser, default "b").
     a       slim top bar: full width, no fill or shadow, ink text, scribble hover, scribble under the current page
     b       Contents rail (case studies from 810px, other pages from 1440px); phones open it as a sheet
     framer  the original teal pill bar (none of the rules below apply)
   Remove the <link> to this file to go back to the original bar everywhere. */

/* ---- Slim top bar (a, and b below 1200px) ----
   Full-bleed at the top edge (the Framer bar is a 90%-wide sticky pill), with the links
   inset to line up with the page content. */
html:is([data-cs-nav="a"], [data-cs-nav="b"]) .framer-172cruo-container {
  width: 100% !important;
  top: 0 !important;
}
html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P {
  width: 100% !important;
  padding-left: max(20px, calc((100% - 1300px) / 2)) !important;
  padding-right: max(20px, calc((100% - 1300px) / 2)) !important;
  background-color: rgba(239, 255, 254, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none !important;
  border-radius: 0 !important;
  --border-color: rgba(16, 32, 31, 0.16) !important;
  --border-top-width: 0px !important;
  --border-left-width: 0px !important;
  --border-right-width: 0px !important;
  --border-bottom-width: 1px !important;
}
html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P p.framer-text {
  --framer-text-color: #10201f !important;
  --framer-link-text-color: #10201f !important;
}
html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P a.framer-text { color: #10201f !important; }
html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P a span {
  color: #10201f !important;
  transition: color 0.2s ease;
}
/* Hover keeps the hand-drawn scribble; it draws in currentColor, which was ice for the teal bar. */
html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P a span > div { color: rgb(0, 127, 128) !important; }
/* Current tab (site-fixes.js marks it; case studies count as Work): teal text with a static
   scribble from the same path family, drawn in once on arrival. It's its own box rather than
   Framer's hover box, whose height differs per link, so every tab gets the same line.
   Hovering it swaps the static stroke for Framer's animated one. */
html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P a[data-cs-current] span { color: rgb(0, 127, 128) !important; }
html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P a[data-cs-current] span[tabindex]::after {
  content: "";
  position: absolute;
  top: 1.1em;
  left: -2px;
  right: -2px;
  height: 0.4em;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 310 44' preserveAspectRatio='none'%3E%3Cpath d='M5 20.9999C26.7762 16.2245 49.5532 11.5572 71.7979 14.6666C84.9553 16.5057 97.0392 21.8432 109.987 24.3888C116.413 25.6523 123.012 25.5143 129.042 22.6388C135.981 19.3303 142.586 15.1422 150.092 13.3333C156.799 11.7168 161.702 14.6225 167.887 16.8333C181.562 21.7212 194.975 22.6234 209.252 21.3888C224.678 20.0548 239.912 17.991 255.42 18.3055C272.027 18.6422 288.409 18.867 305 17.9999' fill='none' stroke='%23007F80' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: cs-tab-draw 0.5s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P a[data-cs-current]:hover span[tabindex]::after { visibility: hidden; }
@keyframes cs-tab-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { html nav.framer-kon4P a[data-cs-current] span[tabindex]::after { animation: none; } }
/* The phone menu icon was drawn white for the teal bar. */
html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P .framer-e1156k { filter: brightness(0) saturate(100%); }

/* ---- Nav B: Contents rail (site-fixes.js builds #cs-rail when ?nav=b) ----
   Case studies get the fixed rail from tablet width (810px) up: it takes over their
   table-of-contents column. Home, About, Work and Whimsies need 1220px of their own, so
   they get it from 1440px. Phones: the top-bar menu opens the same rail as a sheet. */
#cs-rail, #cs-rail-toggle, #cs-rail-dots { display: none; }
#cs-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: 220px;
  flex-direction: column;
  gap: clamp(12px, 2.2vh, 24px);
  padding: 22px 20px 0 22px;
  /* The rail never scrolls as a whole; only the chapter list (.cs-toc) does. */
  overflow: hidden;
  background: rgb(239, 255, 254);
  border-right: 1.5px solid rgba(16, 32, 31, 0.14);
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 13.5px;
  line-height: 1.35;
  color: #10201f;
}
#cs-rail a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
#cs-rail a:hover { color: rgb(0, 127, 128); }
#cs-rail a:focus-visible, #cs-rail button:focus-visible, #cs-rail-toggle:focus-visible { outline: 2px solid rgb(0, 127, 128); outline-offset: 2px; border-radius: 4px; }

/* Option C: a tilted caption box, like a comic anthology's contents page. */
.cs-rail-masthead {
  align-self: flex-start;
  margin: 0;
  padding: 5px 9px;
  font-family: "Necto Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #10201f;
  background: #eee0ad;
  border: 1.5px solid #222;
  box-shadow: 2px 2px 0 #222;
  transform: rotate(-1.5deg);
}
.cs-rail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cs-rail-me { display: grid; gap: 2px; }
.cs-rail-logo { width: 56px; height: auto; margin-bottom: 6px; }
.cs-rail-name { font-family: "National Park", "National Park Placeholder", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 2px; }
.cs-rail-role { font-size: 13px; color: #4d605e; }
.cs-rail-close { display: none; }
.cs-rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-rail-id { display: grid; gap: 2px; }

/* Compact layout (default; ?rail=roomy for the stacked one): links in a 2×2 grid, logo
   beside the name, LinkedIn and email on the masthead line. Saves ~130px of height. */
.cs-rail--compact .cs-rail-top .cs-rail-social { margin: 0; gap: 6px; }
.cs-rail--compact .cs-rail-social a { width: 26px; height: 26px; margin: -3px; }
.cs-rail--compact .cs-rail-social .cs-icon { width: 20px; height: 20px; }
.cs-rail--compact .cs-rail-me { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.cs-rail--compact .cs-rail-logo { width: 46px; margin: 0; }
.cs-rail--compact .cs-rail-name { font-size: 19px; }
.cs-rail--compact .cs-rail-role { font-size: 12px; }
.cs-rail--compact .cs-rail-links { grid-template-columns: repeat(2, max-content); justify-content: space-between; column-gap: 6px; row-gap: 10px; }
.cs-rail--compact .cs-rail-links a { font-size: 14.5px; gap: 5px; }
.cs-rail--compact .cs-rail-links .cs-icon { width: 17px; height: 17px; }
.cs-rail--compact .cs-link-t { white-space: nowrap; }
.cs-ext { font-size: 0.8em; }
.cs-rail-social { display: flex; gap: 12px; margin-top: -8px; }
.cs-rail-social a { display: grid; place-items: center; width: 30px; height: 30px; margin: -4px; border-radius: 6px; }
.cs-rail-social .cs-icon { width: 22px; height: 22px; }
.cs-rail-social a:hover .cs-icon { transform: rotate(-8deg) scale(1.08); }

/* The contents take the middle of the rail; the page links sit at the bottom. Only the
   chapter list scrolls: the masthead, name and social icons above it, the "Contents"
   label and the page links below stay put, at any window height. site-fixes.js marks which
   edges have more (data-more-above / data-more-below) for the fades. */
.cs-rail-contents { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; }
#cs-rail .cs-toc {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Room for the hand-drawn circle around the current chapter's number. */
  padding: 8px 12px 8px 0;
  margin: -8px -12px -8px 0;
  --fade-top: #000;
  --fade-bottom: #000;
  -webkit-mask-image: linear-gradient(to bottom, var(--fade-top), #000 28px, #000 calc(100% - 28px), var(--fade-bottom));
  mask-image: linear-gradient(to bottom, var(--fade-top), #000 28px, #000 calc(100% - 28px), var(--fade-bottom));
}
#cs-rail .cs-toc[data-more-above] { --fade-top: transparent; }
#cs-rail .cs-toc[data-more-below] { --fade-bottom: transparent; }
.cs-rail-label { margin: 0 0 10px; font-family: "National Park", "National Park Placeholder", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #10201f; }
.cs-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 1.1vh, 12px); }
.cs-toc > li > a { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: baseline; column-gap: 6px; }
.cs-toc > li > a::after { content: ""; grid-column: 2; grid-row: 1; border-bottom: 1.5px dotted rgba(16, 32, 31, 0.35); transform: translateY(-3px); transition: border-color 0.15s ease; }
.cs-toc-sub { grid-column: 1 / -1; grid-row: 2; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: #4d605e; }
.cs-toc > li > a:hover::after { border-color: rgb(0, 127, 128); }
.cs-toc-t { grid-column: 1; grid-row: 1; }
.cs-toc-n { grid-column: 3; grid-row: 1; position: relative; font-family: "National Park", "National Park Placeholder", sans-serif; font-size: 13px; font-weight: 700; color: #10201f; }
/* The current chapter's number is circled by hand. */
#cs-rail .cs-toc > li.is-active > a .cs-toc-n { color: rgb(0, 127, 128); }
#cs-rail .cs-toc > li.is-active > a .cs-toc-n::before {
  content: "";
  position: absolute;
  inset: -7px -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' preserveAspectRatio='none'%3E%3Cpath d='M30 4C21 1 6 4 4 13c-2 9 12 13 22 12s12-8 9-15c-2-4-9-6-15-5' fill='none' stroke='%23007F80' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* On a project page the other projects fold behind a "••• N more" toggle on the Contents
   line (site-fixes.js adds .cs-rail--focus). The phone sheet always shows the full list. */
.cs-rail-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cs-rail-labelrow .cs-rail-label { margin: 0; }
#cs-rail.cs-rail--focus:not(.is-expanded) .cs-toc-extra { margin-top: 0; padding-top: 0; border-top: 0; }
html:not([data-cs-rail-open]) #cs-rail.cs-rail--focus:not(.is-expanded) .cs-toc > li:not(.is-active):not([data-leaving]) { display: none; }
/* Page transitions (Framer's reveal) mask the whole screen. The rail sits out of it: it holds
   still during the 0.3s reveal, then folds and unfolds on its own (site-fixes.js). */
#cs-rail { view-transition-name: cs-rail; }
::view-transition-group(cs-rail),
::view-transition-old(cs-rail),
::view-transition-new(cs-rail) { animation: none; mix-blend-mode: normal; }
::view-transition-new(cs-rail) { opacity: 0; }
.cs-toc-more {
  all: unset;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #4d605e;
  transition: color 0.15s ease;
}
.cs-toc-more .cs-icon { width: 20px; height: 20px; }
.cs-toc-more:hover { color: rgb(0, 127, 128); }
.cs-toc-more:focus-visible { outline: 2px solid rgb(0, 127, 128); outline-offset: 2px; border-radius: 4px; }
html[data-cs-rail-open] .cs-toc-more { display: none; }
.cs-toc-extra { margin-top: 4px; padding-top: 10px; border-top: 1.5px dotted rgba(16, 32, 31, 0.25); }
.cs-toc-extra > a::after { display: none; }
#cs-rail .cs-toc > li.is-active > a { color: rgb(0, 127, 128); font-weight: 600; }
.cs-sub { list-style: none; margin: 8px 0 4px 6px; padding: 0 0 0 12px; border-left: 1.5px solid rgb(0, 127, 128); display: grid; gap: 6px; overflow: hidden; }
.cs-sub li { animation: cs-sub-item 0.35s ease-out backwards; animation-delay: calc(var(--i, 0) * 35ms + 90ms); }
@keyframes cs-sub-item { from { opacity: 0; transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { .cs-sub, .cs-sub li { animation: none; } }
.cs-sub button { all: unset; cursor: pointer; font-size: 13px; line-height: 1.3; color: #4d605e; transition: color 0.15s ease; }
.cs-sub button:hover { color: rgb(0, 127, 128); }
.cs-sub li.is-active button { color: #10201f; font-weight: 600; }
.cs-sub button[data-n]::before { content: attr(data-n); margin-right: 7px; font-family: "Necto Mono", ui-monospace, monospace; font-size: 0.85em; font-weight: 400; color: rgb(0, 127, 128); }

.cs-rail-links {
  position: sticky;
  bottom: 0;
  list-style: none;
  margin: 0 -20px 0 -22px;
  padding: 12px 20px 20px 22px;
  display: grid;
  gap: clamp(6px, 1.1vh, 10px);
  background: linear-gradient(to bottom, rgba(239, 255, 254, 0), rgb(239, 255, 254) 14px);
}
.cs-rail-links a { display: flex; align-items: center; gap: 10px; font-family: "National Park", "National Park Placeholder", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.cs-icon { width: 22px; height: 22px; flex: none; color: rgb(0, 127, 128); transition: transform 0.2s ease; }
.cs-rail-links a:hover .cs-icon { transform: rotate(-8deg) scale(1.08); }
.cs-link-t { position: relative; }
/* Revealed left to right with a clip (a dash offset breaks on wide labels under non-scaling strokes). */
.cs-link-scribble { position: absolute; left: -2px; bottom: -7px; width: calc(100% + 4px); height: 8px; overflow: visible; pointer-events: none; clip-path: inset(0 100% 0 0); transition: clip-path 0.45s ease; }
.cs-link-scribble path { fill: none; stroke: rgb(0, 127, 128); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cs-rail-links a:is(:hover, :focus-visible, [data-cs-current]) .cs-link-scribble { clip-path: inset(0 0 0 0); }
#cs-rail .cs-rail-links a:hover { color: #10201f; }
#cs-rail .cs-rail-links a[data-cs-current] { color: rgb(0, 127, 128); }
@media (prefers-reduced-motion: reduce) { .cs-link-scribble { transition: none; } }

/* A light halftone "shadow" off the rail's edge, echoing the halftone thumbnails. */
#cs-rail-dots {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 220px;
  z-index: 49;
  width: 14px;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 127, 128, 0.28) 1.1px, transparent 1.4px);
  background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}
.cs-rail-issue { margin: 0; padding-top: 12px; border-top: 1.5px solid rgba(16, 32, 31, 0.14); font-family: "Necto Mono", ui-monospace, monospace; font-size: 11px; color: #4d605e; }

@media (min-width: 810px) {
  html[data-cs-nav="b"][data-cs-case-study] #cs-rail { display: flex; }
  html[data-cs-nav="b"][data-cs-case-study] #cs-rail-dots { display: block; }
  html[data-cs-nav="b"][data-cs-case-study] .framer-172cruo-container { display: none !important; }
  /* Collapse the original table-of-contents column and move the page over by the rail's
     width, so full-bleed headers start at the rail's edge instead of under it. */
  html[data-cs-nav="b"][data-cs-case-study] :is([data-code-component-plugin-id="84d4c1"], [data-framer-name="TOC Sticky Wrapper"]) { display: none !important; }
  html[data-cs-nav="b"][data-cs-case-study] #main { padding-left: 220px; }
  /* The row that held the table of contents (directly, or inside a "TOC Sticky Wrapper")
     centers the content column. Left-align it so every case study starts at the same edge. */
  html[data-cs-nav="b"][data-cs-case-study] :is(
    :has(> [data-code-component-plugin-id="84d4c1"]),
    :has(> .ssr-variant > [data-code-component-plugin-id="84d4c1"]),
    :has(> [data-framer-name="TOC Sticky Wrapper"])
  ) {
    justify-content: flex-start !important;
    padding-left: 20px !important;
  }
}
@media (min-width: 1440px) {
  html[data-cs-nav="b"] #cs-rail { display: flex; }
  html[data-cs-nav="b"] #cs-rail-dots { display: block; }
  html[data-cs-nav="b"] .framer-172cruo-container { display: none !important; }
  html[data-cs-nav="b"] #main { padding-left: 220px; }
}

/* Phones (both a and b): the menu button replaces Framer's hamburger, whose dropdown was
   the old teal-era menu, and opens the Contents rail as a full-screen sheet. */
@media (max-width: 809.98px) {
  html:is([data-cs-nav="a"], [data-cs-nav="b"]) nav.framer-kon4P .framer-e1156k { visibility: hidden !important; pointer-events: none !important; }
  html:is([data-cs-nav="a"], [data-cs-nav="b"]) #cs-rail-toggle {
    display: grid;
    place-items: center;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 20px);
    right: max(16px, env(safe-area-inset-right, 0px));
    z-index: 60;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #10201f;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  html:is([data-cs-nav="a"], [data-cs-nav="b"]) #cs-rail-toggle .cs-icon { width: 28px; height: 28px; color: inherit; }
  html:is([data-cs-nav="a"], [data-cs-nav="b"])[data-cs-rail-open] #cs-rail {
    display: flex;
    inset: 0;
    width: 100%;
    z-index: 1000;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) max(24px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 24px) max(24px, env(safe-area-inset-left, 0px));
    border-right: 0;
    font-size: 16px;
    animation: cs-sheet-in 0.25s ease-out;
  }
  html:is([data-cs-nav="a"], [data-cs-nav="b"])[data-cs-rail-open] body { overflow: hidden; }
  html:is([data-cs-nav="a"], [data-cs-nav="b"])[data-cs-rail-open] .cs-rail-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: -6px -8px 0 0;
    padding: 0;
    color: #10201f;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  html:is([data-cs-nav="a"], [data-cs-nav="b"])[data-cs-rail-open] .cs-rail-close .cs-icon { width: 28px; height: 28px; color: inherit; }
  html:is([data-cs-nav="a"], [data-cs-nav="b"])[data-cs-rail-open] .cs-sub button { font-size: 15px; }
  html:is([data-cs-nav="a"], [data-cs-nav="b"])[data-cs-rail-open] .cs-rail-links a { font-size: 20px; }
}
@keyframes cs-sheet-in { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #cs-rail { animation: none !important; } }

/* ---- Mobile section pill and drawer (Framer's "Mobile TOC"), restyled to match the rail ----
   Applies to both a and b. Framer sets these styles inline, hence the attribute selectors. */
html:is([data-cs-nav="a"], [data-cs-nav="b"]) [data-framer-name="Mobile TOC"] :is([style*="border-radius:999px"], [style*="border-radius: 999px"]) {
  background: #fff !important;
  border: 1.5px solid #222 !important;
  box-shadow: 3px 3px 0 #222 !important;
}
html:is([data-cs-nav="a"], [data-cs-nav="b"]) [data-framer-name="Mobile TOC"] :is([style*="border-radius:999px"], [style*="border-radius: 999px"]) span {
  color: #10201f !important;
  font-family: "Inter", "Inter Placeholder", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
html:is([data-cs-nav="a"], [data-cs-nav="b"]) [data-framer-name="Mobile TOC"] svg path { stroke: rgb(0, 127, 128) !important; }
html:is([data-cs-nav="a"], [data-cs-nav="b"]) [data-framer-name="Mobile TOC"] div:has(> nav) {
  background: rgb(239, 255, 254) !important;
  border: 1.5px solid #222 !important;
  border-radius: 25px 25px 25px 0 !important;
  box-shadow: 4px 4px 0 #222 !important;
}
html:is([data-cs-nav="a"], [data-cs-nav="b"]) [data-framer-name="Mobile TOC"] [aria-expanded="true"] span {
  color: #4d605e !important;
  opacity: 1 !important;
  font-family: "Necto Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}
html:is([data-cs-nav="a"], [data-cs-nav="b"]) [data-framer-name="Mobile TOC"] nav [role="link"] span {
  color: #10201f !important;
  font-family: "Inter", "Inter Placeholder", sans-serif !important;
  font-size: 15px !important;
}
html:is([data-cs-nav="a"], [data-cs-nav="b"]) [data-framer-name="Mobile TOC"] nav [role="link"]:is([style*="0.04"]) { background: transparent !important; }
html:is([data-cs-nav="a"], [data-cs-nav="b"]) [data-framer-name="Mobile TOC"] nav [role="link"]:is([style*="0.04"]) span { color: rgb(0, 127, 128) !important; font-weight: 600 !important; }
html:is([data-cs-nav="a"], [data-cs-nav="b"]) [data-framer-name="Mobile TOC"] nav [role="link"] > div:first-child { background: rgb(0, 127, 128) !important; }

/* ---------- Footer (site-fixes.js "Footer") ----------
   Replaces Framer's footer and the "See more?" cards. Delete this block and the JS block to reverse. */
[data-cs-footer-host] > :not(#cs-footer),
[data-cs-seemore] { display: none !important; }
#cs-footer {
  box-sizing: border-box;
  width: 100%;
  padding: 40px max(24px, calc((100% - 1040px) / 2)) 28px;
  border-top: 1.5px solid rgba(16, 32, 31, 0.14);
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #10201f;
  text-align: left;
}
#cs-footer * { box-sizing: border-box; }
#cs-footer p { margin: 0; }
#cs-footer a { color: inherit; text-decoration: none; }
#cs-footer a:focus-visible { outline: 2px solid rgb(0, 127, 128); outline-offset: 3px; border-radius: 4px; }
.cs-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.cs-foot-links a, .cs-foot-email a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
#cs-footer a:is(:hover, :focus-visible) .cs-link-scribble { clip-path: inset(0 0 0 0); }
#cs-footer a:hover .cs-icon { transform: rotate(-8deg) scale(1.08); }
.cs-foot-doodle { display: block; flex: none; width: 56px; height: auto; transition: transform 0.3s ease; }
#cs-footer:hover .cs-foot-doodle { transform: rotate(-6deg); }
.cs-foot-colophon { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: "Necto Mono", ui-monospace, monospace; font-size: 11.5px; color: #4d605e; }
.cs-foot-c { font-family: "Inter", "Inter Placeholder", sans-serif; } /* Necto Mono's © is a tiny superscript */

/* Case studies: "To be continued…" and the next project. */
.cs-foot-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding-bottom: 28px;
  margin-bottom: 24px;
  border-bottom: 1.5px dotted rgba(16, 32, 31, 0.25);
}
.cs-foot-cap {
  padding: 6px 10px;
  background: rgb(238, 224, 173);
  border: 1.5px solid #222;
  box-shadow: 2px 2px 0 #222;
  transform: rotate(-2deg);
  font-family: "Necto Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cs-foot-nextcard {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 14px 22px 14px 14px;
  background: #fff;
  border: 1.5px solid #222;
  border-radius: 25px 25px 25px 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cs-foot-nextcard:is(:hover, :focus-visible) { box-shadow: 4px 4px 0 #222; transform: translate(-1px, -1px); }
/* §7.6: thumbnail, chapter number, outcome, type tag and "Read chapter 03 →", then a row
   back to the previous chapter, all work, and the top. */
.cs-foot-thumb { display: block; aspect-ratio: 16 / 9.5; overflow: hidden; border: 1.5px solid #222; border-radius: 10px; background: #fff; }
.cs-foot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-foot-nextcard[href="/physiovaping"] .cs-foot-thumb img { object-position: center 18%; }
.cs-foot-body { display: grid; gap: 4px; min-width: 0; }
.cs-foot-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 6px; }
.cs-foot-chip { padding: 2px 10px; border: 1px solid #222; border-radius: 999px; background: #fff; font-size: 12.5px; color: #10201f; }
.cs-foot-chip[data-cs-concept] { border-style: dashed; }
.cs-foot-read { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; color: rgb(0, 127, 128); }
.cs-foot-read .cs-foot-arrow { font-size: 18px; }
.cs-foot-back { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: #4d605e; }
.cs-foot-back a { display: inline-flex; align-items: baseline; gap: 6px; }
.cs-foot-back a:first-child { color: #10201f; font-weight: 600; }
.cs-foot-k { font-family: "Necto Mono", ui-monospace, monospace; font-size: 11.5px; color: #4d605e; }
.cs-foot-t { font-family: "National Park", "National Park Placeholder", sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.cs-foot-s { font-size: 14px; color: #4d605e; }
.cs-foot-s b { color: #10201f; font-weight: 600; }
.cs-foot-arrow { font-family: "National Park", "National Park Placeholder", sans-serif; font-size: 28px; color: rgb(0, 127, 128); transition: transform 0.2s ease; }
.cs-foot-nextcard:hover .cs-foot-arrow { transform: translateX(4px); }
.cs-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.cs-foot-left { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

/* Home, Work, Whimsies: the contact card. */
.cs-foot-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 32px; }
.cs-foot-h { font-family: "National Park", "National Park Placeholder", sans-serif; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
#cs-footer .cs-foot-avail { margin-top: 10px; max-width: 46ch; font-size: 16px; color: #4d605e; }
#cs-footer .cs-foot-email { margin-top: 20px; }
.cs-foot-email a { gap: 10px; font-family: "National Park", "National Park Placeholder", sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.cs-foot-email .cs-icon { width: 28px; height: 28px; }
.cs-foot-card .cs-foot-links { margin-top: 18px; }
.cs-foot-side { display: grid; justify-items: end; gap: 14px; }
.cs-foot-side .cs-foot-doodle { width: 112px; transform: rotate(4deg); }
#cs-footer:hover .cs-foot-side .cs-foot-doodle { transform: rotate(-3deg); }
.cs-foot-side .cs-foot-colophon { justify-content: flex-end; text-align: right; }

@media (max-width: 809.98px) {
  #cs-footer { padding: 32px 20px 24px; }
  html[data-cs-case-study] #cs-footer { padding-bottom: 96px; } /* clear the floating contents pill */
  .cs-foot-next { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; }
  .cs-foot-nextcard { width: 100%; padding: 12px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cs-foot-t { font-size: 21px; }
  .cs-foot-card { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs-foot-h { font-size: 28px; }
  .cs-foot-email a { font-size: 19px; }
  .cs-foot-side { justify-items: start; }
  .cs-foot-side .cs-foot-doodle { width: 84px; }
  .cs-foot-side .cs-foot-colophon { justify-content: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .cs-foot-doodle, .cs-foot-nextcard, .cs-foot-arrow { transition: none; } }