:root {
  --parchment: #f4ecda;
  --parchment-2: #ebe0c4;
  --ink: #2b2016;
  --ink-soft: #6a5842;
  --navy: #1f3b4d;
  --sea: #9fc0bb;
  --red: #a8322d;
  --land: #e2cf9f;
  --line: rgba(43, 32, 22, .18);
  --display: "Cormorant Garamond", Georgia, serif;
  --chart: "IM Fell English", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --topbar: 58px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font: 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
/* paper texture, kept subtle so text stays crisp */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(/img/paper.jpg) center / cover;
  opacity: .5;
}
a { color: var(--red); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.layout { display: grid; grid-template-columns: minmax(300px, 40%) 1fr; }

/* ---------- map ---------- */
.map {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  background: var(--sea);
  border-right: 1px solid var(--ink-soft);
  box-shadow: 1px 0 0 rgba(255,255,255,.35);
  overflow: hidden;
}
.map svg { width: 100%; height: 100%; display: block; }
.map .hint {
  position: absolute; left: 12px; bottom: 10px; margin: 0;
  font: italic 15px var(--chart); color: var(--ink);
  background: rgba(244,236,218,.88); padding: 2px 8px; border-radius: 3px;
}
.map .chart-title { font: italic 23px var(--chart); fill: var(--ink); }
.map .chart-sub { font: italic 14px var(--chart); fill: var(--ink-soft); }
.port-link { cursor: pointer; }
.port-link .dot { fill: var(--parchment); stroke: var(--ink); stroke-width: 1.5; transition: fill .3s, r .3s; }
.port-link.active .dot { fill: var(--red); r: 7; }
.port-link .name { font: 18px var(--chart); fill: var(--ink); paint-order: stroke; stroke: var(--parchment); stroke-width: 4.5px; stroke-linejoin: round; }
.port-link .when { font: italic 13.5px var(--chart); fill: var(--ink-soft); paint-order: stroke; stroke: var(--parchment); stroke-width: 3px; }
.port-link.active .name { fill: var(--red); }
.port-link:hover .name, .port-link:focus .name { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .bob { animation: bob 2.6s ease-in-out infinite; transform-origin: 0 6px; }
  .waves { animation: drift 12s linear infinite; }
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-1.5px) rotate(3deg); } }
@keyframes drift { to { transform: translateX(-40px); } }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 18px;
  height: var(--topbar); padding: 0 clamp(16px, 5vw, 72px);
  background: rgba(244,236,218,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { font: 600 20px var(--display); color: var(--ink); text-decoration: none; letter-spacing: .01em; margin-right: auto; white-space: nowrap; }
.topbar nav { display: flex; gap: 18px; align-items: center; font-size: 14px; }
.topbar nav a { color: var(--ink-soft); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }
.topbar .lang { font-weight: 600; color: var(--navy); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.topbar .cta { font-size: 14px; padding: 6px 12px; }

/* ---------- content ---------- */
main { padding: 0 clamp(16px, 5vw, 72px); max-width: 880px; }
section { min-height: 88vh; padding: 64px 0 48px; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; min-height: 70vh; }
.port-tag {
  font: italic 16px var(--display); color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
}
.port-tag::before { content: ""; width: 28px; height: 1px; background: var(--ink-soft); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; color: var(--navy); letter-spacing: -.005em; }
h1 { font-size: clamp(42px, 6vw, 66px); color: var(--ink); }
h2 { font-size: clamp(30px, 4vw, 42px); }
h3 { font-size: 24px; margin-top: 32px; }
.company { font-size: 17px; margin: 8px 0 2px; }
.company strong { color: var(--red); font-weight: 600; }
.company .note { color: var(--ink-soft); }
.dates { font: italic 17px var(--display); color: var(--ink-soft); margin: 0; }
.blurb { font-style: italic; color: var(--ink-soft); margin: 10px 0 0; }
ul.log { padding-left: 18px; margin: 18px 0 0; }
ul.log li { margin-bottom: 8px; padding-left: 4px; }
ul.log li::marker { color: var(--red); }

.results-title { font: italic 16px var(--display); color: var(--ink-soft); margin: 30px 0 10px; display: flex; align-items: center; gap: 10px; }
.results-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.tile {
  border: 1px solid var(--line); background: rgba(255,255,255,.42);
  padding: 14px 16px; border-radius: 6px;
}
.tile b { display: block; font: 600 30px/1.1 var(--display); color: var(--navy); }
.tile span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; display: block; margin-top: 4px; }

.hero-head { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.portrait { width: 124px; height: 124px; border-radius: 50%; border: 2px solid var(--ink-soft); padding: 3px; background: var(--parchment); object-fit: cover; }
.role { font: italic 23px var(--display); color: var(--ink-soft); margin: 6px 0 0; }
.current { margin: 14px 0 0; font-size: 15px; color: var(--ink-soft); }
.current a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.lead { font-size: 18px; margin-top: 22px; max-width: 64ch; }
.skills-title { font: italic 16px var(--display); color: var(--ink-soft); margin: 26px 0 6px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn {
  display: inline-block; padding: 10px 18px; border: 1.5px solid var(--navy); border-radius: 6px;
  text-decoration: none; color: var(--navy); font-weight: 500; background: rgba(255,255,255,.35);
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--navy); color: var(--parchment); }
.btn.primary { background: var(--navy); color: var(--parchment); }
.btn.primary:hover { background: var(--red); border-color: var(--red); }
.set-sail { margin-top: 40px; font: italic 17px var(--display); color: var(--ink-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; background: rgba(255,255,255,.35); color: var(--ink); }
.edu p { margin: 8px 0 0; }
.edu .where { color: var(--ink-soft); }
footer { padding: 40px 0 48px; font: italic 14px var(--display); color: var(--ink-soft); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--ink-soft); }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .layout { display: block; }
  .map { height: 34vh; height: 34dvh; border-right: 0; border-bottom: 1px solid var(--ink-soft); z-index: 2; }
  .map .hint { display: none; }
  .topbar { position: static; height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 10px 14px; }
  .topbar nav { gap: 14px; }
  .topbar .cta { display: none; }
  section { min-height: auto; padding: 44px 0 36px; }
  html { scroll-padding-top: calc(34vh + 16px); }
  h3 { font-size: 22px; }
}

@media print {
  .map, .topbar, .set-sail, .actions, body::before { display: none !important; }
  .layout { display: block; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  section { min-height: auto; padding: 14pt 0; border-bottom: 1px solid #999; page-break-inside: avoid; }
  .tile { background: none; }
  h1, h2, h3, .tile b { color: #000; }
}