/* jameshester.ai - shared tokens and components.
   Every page uses these classes; change a colour here and the whole site follows. */

:root {
  /* Paper and ink. */
  --bg: #FAF7F2;            /* page */
  --bg-2: #F3EEE6;          /* alternate band */
  --card: #FFFDF9;          /* cards and panels */
  --foot: #F1EBE2;          /* footer ground */
  --ink: #161412;           /* headings */
  --text: #3A3633;          /* body copy */
  --muted: #5F5852;         /* secondary copy, labels */
  --line: #E6DED2;          /* hairlines and card borders */
  --line-2: #D5CABB;        /* stronger borders, inputs */

  /* Brand red: an accent, never a wash. */
  --accent: #A61C1C;        /* text and strokes on paper */
  --accent-deep: #8B0000;   /* filled surfaces */
  --accent-tint: #F7EAE6;   /* the faintest red, for tags */
  --on-accent: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(48, 36, 24, .05), 0 2px 10px rgba(48, 36, 24, .04);
  --shadow: 0 1px 2px rgba(48, 36, 24, .06), 0 12px 32px rgba(48, 36, 24, .08);
  --shadow-lg: 0 2px 4px rgba(48, 36, 24, .05), 0 26px 64px rgba(48, 36, 24, .13);

  --radius: 18px;
  --radius-lg: 24px;
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.2, .65, .2, 1);

  --f-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100% }
a { color: var(--accent); text-decoration: none }
a:hover { color: var(--accent-deep) }
::selection { background: rgba(166, 28, 28, .16) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
}

/* ---------- Layers -------------------------------------------------
   The sketched background canvas sits at z-index 1, above the page
   ground and below everything a reader looks at, which sits at 2. */
.jh-main, .jh-footer { position: relative; z-index: 2 }

/* ---------- Layout ------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter) }
.section { padding-top: clamp(64px, 9vw, 128px) }
.section-last { padding-bottom: clamp(72px, 10vw, 140px) }
.band {
  margin-top: clamp(64px, 9vw, 128px);
  padding: clamp(56px, 8vw, 104px) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 5vw, 72px); align-items: start }
.split-center { align-items: center }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px }
.stack > * + * { margin-top: 16px }
.center { text-align: center }

/* ---------- Type --------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--f-head); color: var(--ink); letter-spacing: -.025em; line-height: 1.08 }
.display { font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 4.9rem); letter-spacing: -.04em; line-height: 1 }
.h1 { font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4rem); letter-spacing: -.035em; line-height: 1.03 }
.h2 { font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.75rem); letter-spacing: -.03em }
.h3 { font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.4rem) }
.pop { color: var(--accent) }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--text) }
.muted { color: var(--muted) }
.small { font-size: .9rem }
.measure { max-width: 60ch }
.kicker {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker-muted { color: var(--muted) }
.rule-row { display: flex; align-items: center; gap: 16px; margin-bottom: 26px }
.rule-row::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line) }

/* ---------- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s, background .2s, color .2s;
}
.btn:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-sm) }
.btn-primary { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent) }
.btn-primary:hover { background: #6E0000; border-color: #6E0000; color: var(--on-accent) }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px }
.text-link { font-weight: 600; color: var(--accent); border-bottom: 1px solid rgba(166, 28, 28, .3); padding-bottom: 1px }
.text-link:hover { border-color: var(--accent-deep) }

/* ---------- Cards -------------------------------------------------- */
.card {
  position: relative;
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(22px, 3vw, 32px);
  color: var(--text);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
a.card:hover { color: var(--text); transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2) }
.card-lg { border-radius: var(--radius-lg); padding: clamp(28px, 4.4vw, 56px) }
.card.split { display: grid }
.card h3 { margin: 14px 0 8px }
.card .more { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--accent) }
.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tag-plain { background: transparent; border: 1px solid var(--line-2); color: var(--muted) }

/* Row lists: one link per line, used for indexes and the links page. */
.rows { border-top: 1px solid var(--line) }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: background .2s, padding .2s var(--ease);
}
.row:hover { color: var(--text); background: rgba(255, 253, 249, .8); padding-left: 12px; padding-right: 12px }
.row-title { display: block; font-family: var(--f-head); font-weight: 700; font-size: 1.18rem; color: var(--ink); letter-spacing: -.02em; margin: 6px 0 4px }
.row-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); font-size: .95rem;
}
.row:hover .row-arrow { border-color: var(--accent); color: var(--accent) }

/* ---------- Page heads --------------------------------------------- */
.page-head { padding-top: clamp(56px, 9vw, 120px) }
.page-head .h1 { margin-top: 14px }
.page-head .lead { margin-top: 22px; max-width: 58ch }
.back { display: inline-block; margin-bottom: 26px; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; color: var(--muted) }
.back:hover { color: var(--accent) }
.facts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px }

/* ---------- Home hero ---------------------------------------------- */
.hero { padding-top: clamp(8px, 2vw, 20px) }
.hero-frame {
  --ratio: .5625;   /* 16:9 */
  position: relative;
  width: 100%;
  /* 16:9 of the content width, but never taller than most of the screen. */
  height: min(74vh, calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) * var(--ratio)));
  min-height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.hero-frame img, .hero-frame canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45% }

/* About scrub. With no JS, or under reduced motion, this is just the still (the last
   frame). site.js adds .scrub-on, which makes the wrapper tall and pins the frame while
   the page scrolls through it; the canvas then covers the still. */
.scrub-on { height: 230vh }
.scrub-on .hero-frame { position: sticky; top: 6.5rem }
.scrub-on .hero-frame canvas { position: absolute; inset: 0 }
.scrub-on .hero-still { opacity: 0 }
@media (max-width: 640px) {
  .scrub .hero-frame { --ratio: 1; min-height: 0 }
  .scrub-on .hero-frame { height: min(calc(100vw - 2 * var(--gutter)), 70vh) }
}

/* ---------- Home hero: full-bleed photo, headline in the sky -------
   Everything inside is sized in container units (cqw) of the full-width
   section, so the headline, the notes and the arrows scale with the photo
   and keep the same place on it at every width. The photo is shown at its
   own aspect (bottom 5% cropped), with a deeper sky band above it for the
   headline. The band's last colour matches the photo's top edge under the
   scrim, so the two read as one sky. */
.jh-bar.jh-bar-over { position: fixed; left: 0; right: 0 }
.hero-full {
  --nav-h: 5.75rem;             /* the floating nav's height, in rem so it grows with a larger text setting */
  --cream: var(--bg);
  --sky-top: #1F3F69;
  --sky-join: #446B95;          /* the photo's top row under the scrim */
  --sky-end: calc(var(--nav-h) + 8vw);
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: linear-gradient(to bottom, var(--sky-top) 0, var(--sky-join) var(--sky-end)) var(--sky-join);
}
.hero-title {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(var(--nav-h) + 1.2cqw);
  text-align: center;
  white-space: nowrap;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: 10.2cqw;
  line-height: .9;
  letter-spacing: -.015em;
  color: var(--cream);
  text-shadow: 0 .02em .14em rgba(10, 24, 44, .3);
}
.ht-cap { text-transform: uppercase }
.ht-im { font-style: italic; font-weight: 500; letter-spacing: -.035em; margin: 0 .03em 0 .01em }
.ht-br { display: none }
.hero-shot {
  position: relative;
  margin-top: calc(var(--nav-h) + 8.6cqw);
  aspect-ratio: 1800 / 961;
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0 }
.hero-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(30, 70, 118, .7) 0, rgba(30, 70, 118, .38) 6%, rgba(30, 70, 118, 0) 14%);
}

/* The three notes sit on the photo itself: a box the same size and place
   as .hero-shot, with each note and arrow placed in percent of it. */
.hero-notes {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100cqw * 961 / 1800);
  list-style: none;
  pointer-events: none;
}
.note-text {
  position: absolute;
  white-space: nowrap;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(11px, 1.05cqw, 17px);
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .45);
}
.note-arrow {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.note-founder .note-arrow, .note-sparky .note-arrow { transform: scaleX(-1) }
/* Each note is anchored by its bottom edge, so when the minimum font size
   makes it relatively larger on a narrow screen it grows up, away from its arrow. */
.note-claude .note-text { right: 70%; bottom: 57%; text-align: right }
.note-claude .note-arrow { left: 24%; top: 46%; width: 10.5% }
.note-founder .note-text { left: 67%; bottom: 73.5% }
.note-founder .note-arrow { left: 60.5%; top: 27%; width: 7.5% }
.note-sparky .note-text { left: 71%; bottom: 50% }
.note-sparky .note-arrow { left: 65.5%; top: 52%; width: 7.5% }

/* Phones: the headline stacks in the sky band, the notes become a short list
   under it, and the photo crops its sides so the person stays large. */
@media (max-width: 640px) {
  .hero-full { --nav-h: 6.75rem; --sky-end: calc(var(--nav-h) + 60vw); display: flex; flex-direction: column }
  .hero-title { position: static; padding-top: calc(var(--nav-h) + 5cqw); white-space: normal; font-size: 19cqw; line-height: .92 }
  .ht-br { display: inline }
  .hero-notes { position: static; height: auto; margin: 5cqw 0 6cqw; display: flex; flex-direction: column; align-items: center; gap: 4px }
  .note-text { position: static; font-size: 12px }
  .note-br { display: none }
  .note-arrow { display: none }
  .hero-shot { margin-top: 0; aspect-ratio: 9 / 10 }
  .hero-shot img { object-position: 42% 0 }
}

/* The promise and the two buttons, in a clean band under the photo. */
.hero-promise { padding-top: clamp(36px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px clamp(24px, 4vw, 56px) }
.hero-promise .lead { max-width: 50ch; color: var(--ink) }

/* ---------- Forms -------------------------------------------------- */
.field-label { display: block; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .18em; color: var(--muted); margin-bottom: 10px }
.input {
  display: block;
  width: 100%;
  padding: 15px 22px;
  margin-bottom: 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
}
.input::placeholder { color: #857C73 }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent) }
.btn-block { display: flex; width: 100% }
.field-aux { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.form-note { color: var(--muted); font-size: .85rem; margin-top: 12px }
.form-done { color: var(--ink); font-weight: 600; margin-top: 14px }

/* ---------- Article prose ------------------------------------------ */
.prose { max-width: 68ch }
.prose > * + * { margin-top: 1.1em }
.prose h2 { font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 1.8rem); margin-top: 2.1em }
.prose h3 { font-weight: 700; font-size: 1.2rem; margin-top: 1.8em }
.prose ul, .prose ol { padding-left: 1.3em }
.prose li + li { margin-top: .5em }
.prose strong { color: var(--ink) }
.prose blockquote, .pull {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 20px;
  color: var(--ink);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.5;
}
code, .prose code {
  font-family: var(--f-mono);
  font-size: .86em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--ink);
}
.step-label { display: block; margin-top: 2.2em; font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .16em; color: var(--accent) }
.step-label + h3 { margin-top: .4em }
.recipe { list-style: none; padding: 0 !important; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden }
.recipe li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 18px; margin: 0 !important; border-top: 1px solid var(--line) }
.recipe li:first-child { border-top: 0 }
.recipe li span:first-child { font-family: var(--f-mono); font-size: .78rem; color: var(--accent); padding-top: 2px }

/* ---------- Skill file block --------------------------------------- */
.skillfile {
  margin-top: 26px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.skillfile-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.skillfile-name { font-family: var(--f-mono); font-size: .82rem; font-weight: 600; color: var(--ink); margin-right: auto }
.skillfile-bar .btn { padding: 9px 16px; font-size: .84rem }
.skillfile pre {
  margin: 0;
  max-height: 520px;
  overflow: auto;
  padding: 20px 22px;
  font-family: var(--f-mono);
  font-size: .8rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Sources ------------------------------------------------ */
.sources { list-style: none; padding: 0 !important }
.source { padding: 22px 0; border-top: 1px solid var(--line) }
.source:last-child { border-bottom: 1px solid var(--line) }
.source-link { font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; color: var(--ink); overflow-wrap: anywhere }
.source-link:hover { color: var(--accent) }
.source-url { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: .74rem; color: var(--muted); overflow-wrap: anywhere }
.source-quotes { list-style: none; padding: 0 !important; margin-top: 14px }
.source-quotes li { margin-top: 10px; padding-left: 16px; border-left: 2px solid var(--line-2); color: var(--text); font-size: .96rem }

/* ---------- Page-specific layouts ---------------------------------- */
/* Home shelf: the latest newsletter as one big card, the skills as a list beside it. */
.shelf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: stretch }
.feature { display: flex; flex-direction: column; min-height: 100% }
.feature .more { margin-top: auto; padding-top: 28px }
.shelf-side .row { padding-top: 18px; padding-bottom: 18px }
.shelf-all { display: inline-block; margin-top: 18px }
@media (max-width: 860px) { .shelf { grid-template-columns: 1fr } }

/* About: the story with the side card riding alongside it. */
.story { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start }
.story-side { position: sticky; top: 110px }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr }
  .story-side { position: static }
}

/* Builds: name on the left, what it does on the right, a rule between. */
.builds { border-top: 1px solid var(--line) }
.build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(18px, 4vw, 64px); padding: clamp(30px, 4.5vw, 52px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px }
@media (max-width: 760px) { .build { grid-template-columns: 1fr } }

/* Skills: three numbered steps. */
.steps { list-style: none; display: grid; gap: 14px }
.steps .h3 { margin: 8px 0 6px }

/* Links page: a narrow centred column. */
.linkbio { padding-top: clamp(40px, 7vw, 90px); text-align: center }
.linkbio .lead { margin: 16px auto 0; max-width: 46ch }
.linkbio-mark {
  width: 76px; height: 76px; margin: 0 auto 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-deep); color: var(--on-accent);
  font-family: var(--f-head); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em;
  box-shadow: var(--shadow);
}
.socials { display: grid; gap: 12px; margin-top: 34px; text-align: left }
.social { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 18px }
.social-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--bg-2); display: flex; align-items: center; justify-content: center }
.social-icon svg { width: 26px; height: 26px }
.social-text { display: flex; flex-direction: column; min-width: 0 }
.social-text .row-title { margin: 0 }
.linkbio-rows { margin-top: 30px; text-align: left }

/* Legal pages: the section number sits in front of each heading. */
.legal h2 { display: flex; align-items: baseline; gap: 14px }
.legal h2 .kicker { font-size: .7rem }

/* Thank-you: one card in the middle of the screen. */
.thanks { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 40px; padding-bottom: 40px }
.thanks .card { width: 100% }

/* ---------- Footer ------------------------------------------------- */
.jh-footer {
  margin-top: clamp(72px, 10vw, 140px);
  background: var(--foot);
  border-top: 1px solid var(--line);
}
.foot-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(28px, 4vw, 52px);
}
/* A page that ends on a tinted band runs straight into the footer. */
.jh-main:has(> .band:last-child) + .jh-footer { margin-top: 0 }
.foot-head { font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .2em; color: var(--accent); margin-bottom: 16px }
.foot-links { display: flex; flex-direction: column; gap: 10px }
.foot-links a { color: var(--text); font-weight: 500; font-size: .95rem }
.foot-links a:hover { color: var(--accent) }
.foot-word {
  max-width: var(--wrap);
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding: clamp(24px, 4vw, 40px) var(--gutter) 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2.1rem, 8.4vw, 7rem);
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--ink);
  white-space: nowrap;
  text-align: center;
}
.foot-word span { color: var(--accent) }
.foot-base {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) var(--gutter) 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--muted);
}
.foot-base a { color: var(--muted) }
.jh-legal:hover, .foot-base a:hover { color: var(--accent) }

/* ---------- The floating nav bubble -------------------------------- */
.jh-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: clamp(10px, 1.6vh, 16px) clamp(12px, 3vw, 26px);
  pointer-events: none;   /* only the pill itself is clickable */
}
.jh-bubble {
  pointer-events: auto;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px 10px 10px clamp(18px, 2.4vw, 26px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
  border-radius: 999px;
  background: rgba(255, 253, 249, .78);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(214, 202, 187, .7);
  box-shadow: 0 1px 2px rgba(48, 36, 24, .05), 0 10px 30px rgba(48, 36, 24, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jh-bubble { background: rgba(255, 253, 249, .97) }
}
.jh-word { font-family: var(--f-head); font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; color: var(--ink); white-space: nowrap }
.jh-word span { color: var(--accent) }
.jh-word:hover { color: var(--ink) }
.jh-navlinks { display: flex; gap: clamp(12px, 1.8vw, 24px); margin-left: auto }
.jh-nav { font-weight: 500; font-size: .88rem; color: var(--muted); white-space: nowrap }
.jh-nav:hover { color: var(--accent) }
.jh-nav[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent) }
.jh-cta { padding: 10px 18px; font-size: .84rem; white-space: nowrap }

/* A phone has no room for a wordmark, six links and a button on one line, so the
   pill becomes two rows: wordmark, then the links spread across the width. The
   same call to action is the primary button in each page's own content. */
@media (max-width: 760px) {
  .jh-cta { display: none }
}
@media (max-width: 640px) {
  .jh-bubble { flex-wrap: wrap; border-radius: 20px; padding: 10px 14px; gap: 6px }
  .jh-navlinks { margin-left: 0; width: 100%; justify-content: space-between; gap: 6px }
  .jh-nav { font-size: .8rem }
}
@media (max-width: 360px) {
  .jh-nav { font-size: .74rem }
}

@media print {
  .jh-bar, .jh-bar.jh-bar-over { position: static }
  .jh-sketch { display: none !important }
}