:root {
  --bg: #07111f;
  --bg-soft: #0b1727;
  --surface: rgba(240, 224, 185, 0.055);
  --surface-2: rgba(240, 224, 185, 0.08);
  --line: rgba(229, 196, 120, 0.16);
  --text: #f7efd8;
  --muted: #b7ad98;
  --faint: #756f63;
  --accent: #e5b85c;
  --accent-2: #d85c4a;
  --max: 1220px;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(circle at 82% 6%, rgba(229,184,92,.10), transparent 26rem),
    radial-gradient(circle at 10% 34%, rgba(216,92,74,.055), transparent 30rem),
    linear-gradient(180deg, rgba(7,17,31,.96), rgba(5,13,25,1)),
    var(--bg);
  overflow-x: hidden;
}



a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.noise {
  position: fixed;
  inset: 0;
  opacity: .045;
  pointer-events: none;
  z-index: 999;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(214,255,75,.055), transparent 67%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .25s ease;
}

.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), var(--max));
  z-index: 100;
  margin-top: 18px;
  min-height: 62px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(9,11,14,.72);
  backdrop-filter: blur(18px);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.03em;
  width: max-content;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #0a0c0f;
  font-weight: 800;
}

.nav { display: flex; gap: 30px; }
.nav a, .text-link {
  color: var(--muted);
  font-size: 14px;
  transition: color .2s ease;
}
.nav a:hover, .text-link:hover { color: var(--text); }

.status-chip {
  justify-self: end;
  font-family: var(--mono);
  font-size: 11px;
  color: #c7ccd4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: max-content;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(214,255,75,.08);
}

.section {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
  padding: 140px 0;
}

.hero {
  min-height: 100vh;
  padding-top: 170px;
  display: flex;
  align-items: center;
}

.hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
  gap: 72px;
  align-items: center;
}

.eyebrow,
.section-index,
.project-type,
.stack-kicker,
.beyond-label,
.meta-label {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--accent);
  font-size: 12px;
  margin-bottom: 22px;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 840px;
  margin-bottom: 28px;
  font-size: clamp(58px, 7.6vw, 116px);
  line-height: .92;
  letter-spacing: -.075em;
  font-weight: 800;
}

.accent-text {
  display: block;
  color: var(--accent);
  text-shadow: 0 0 42px rgba(214,255,75,.08);
}

.hero-lead {
  max-width: 670px;
  color: #b4bac4;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent);
  color: #0a0c0f;
}
.btn-primary:hover { background: #e2ff7c; }
.btn-ghost {
  border-color: var(--line);
  background: rgba(255,255,255,.025);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.2); }

.hero-meta {
  margin-top: 54px;
  display: flex;
  gap: 42px;
  color: #cbd0d8;
  font-size: 13px;
}

.hero-meta > div {
  display: grid;
  gap: 7px;
}

.meta-label { color: var(--faint); font-size: 10px; }

.hero-visual {
  position: relative;
  min-height: 570px;
  display: grid;
  place-items: center;
}

.orb {
  position: absolute;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 15%),
    radial-gradient(circle at 50% 50%, rgba(214,255,75,.21), rgba(214,255,75,.06) 42%, transparent 72%);
  filter: blur(.2px);
  box-shadow:
    inset -25px -20px 90px rgba(0,0,0,.45),
    0 0 120px rgba(214,255,75,.055);
}

.glass {
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.026));
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 90px rgba(0,0,0,.38);
}

.code-window {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(-2deg);
}

.window-bar {
  height: 44px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.window-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.17);
}

pre {
  margin: 0;
  padding: 26px 28px 30px;
  overflow: auto;
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.9;
  color: #d8dce3;
}

.code-muted { color: #6d7480; }
.code-keyword { color: #d6ff4b; }
.code-type { color: #9effcc; }
.code-string { color: #e7b9ff; }

.floating-note {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 205px;
  padding: 13px 14px;
  border-radius: 15px;
}

.note-1 { top: 55px; right: -4px; }
.note-2 { bottom: 36px; left: -16px; }
.note-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(214,255,75,.075);
}
.floating-note strong { display: block; font-size: 12px; }
.floating-note small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; line-height: 1.4; }

.scroll-indicator {
  position: absolute;
  left: 0;
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
}
.scroll-indicator i {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, var(--faint), transparent);
}

.section-heading {
  margin-bottom: 72px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
}

.section-index {
  color: var(--accent);
  font-size: 11px;
  padding-top: 13px;
}

.section-heading h2,
.contact-inner h2 {
  font-size: clamp(42px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.06em;
  margin: 0;
  max-width: 900px;
}

.about-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
}

.about-copy {
  color: var(--muted);
  line-height: 1.8;
  max-width: 620px;
}
.big-copy {
  color: var(--text);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.5;
  letter-spacing: -.025em;
}

.principles { border-top: 1px solid var(--line); }
.principle-card {
  display: grid;
  grid-template-columns: 54px 190px 1fr;
  gap: 18px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.principle-card > span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  padding-top: 5px;
}
.principle-card h3 { font-size: 16px; margin: 0; }
.principle-card p { color: var(--muted); line-height: 1.7; margin: 0; font-size: 14px; }

.projects { border-top: 1px solid var(--line); }
.project-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 280px;
  gap: 30px;
  padding: 42px 0;
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
.project-card:hover {
  background: linear-gradient(90deg, rgba(214,255,75,.035), transparent 60%);
}
.project-featured { padding-block: 54px; }
.project-number {
  font-family: var(--mono);
  color: var(--faint);
  font-size: 11px;
  padding-top: 7px;
}
.project-type {
  font-size: 10px;
  color: var(--accent);
  margin-bottom: 12px;
}
.project-content h3 {
  margin-bottom: 14px;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -.045em;
}
.project-content > p {
  color: var(--muted);
  line-height: 1.75;
  max-width: 760px;
}
.project-tags {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.project-tags span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #c6cad1;
  font-family: var(--mono);
  font-size: 10px;
}
.project-side {
  display: grid;
  gap: 12px;
  align-content: center;
}
.metric {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.metric strong { display: block; font-size: 15px; }
.metric span { display: block; color: var(--faint); margin-top: 4px; font-size: 11px; }
.project-side.subtle {
  color: var(--faint);
  line-height: 1.7;
  font-size: 13px;
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.stack-column {
  min-height: 410px;
  padding: 34px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}
.stack-column:last-child { border-right: 0; }
.stack-kicker {
  font-size: 10px;
  color: var(--accent);
}
.stack-column h3 {
  margin: 14px 0 28px;
  font-size: 28px;
  letter-spacing: -.04em;
}
.stack-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stack-column li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: #aeb4be;
  font-size: 14px;
}

.beyond-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.beyond-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}
.beyond-label { font-size: 10px; color: var(--accent); }
.beyond-card h3 {
  margin-top: 56px;
  margin-bottom: 12px;
  font-size: 28px;
  letter-spacing: -.04em;
}
.beyond-card p { color: var(--muted); line-height: 1.7; }

.waveform {
  position: absolute;
  left: 28px; right: 28px; bottom: 28px;
  height: 44px;
  display: flex;
  gap: 6px;
  align-items: end;
}
.waveform i {
  display: block;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(var(--accent), rgba(214,255,75,.15));
  animation: wave 1.8s ease-in-out infinite alternate;
}
.waveform i:nth-child(1) {height: 25%}
.waveform i:nth-child(2) {height: 60%; animation-delay: -.2s}
.waveform i:nth-child(3) {height: 40%; animation-delay: -.4s}
.waveform i:nth-child(4) {height: 90%; animation-delay: -.6s}
.waveform i:nth-child(5) {height: 55%; animation-delay: -.8s}
.waveform i:nth-child(6) {height: 78%; animation-delay: -1s}
.waveform i:nth-child(7) {height: 35%; animation-delay: -.5s}
.waveform i:nth-child(8) {height: 65%; animation-delay: -.7s}
.waveform i:nth-child(9) {height: 46%; animation-delay: -.9s}
.waveform i:nth-child(10) {height: 82%; animation-delay: -.3s}
.waveform i:nth-child(11) {height: 52%; animation-delay: -.1s}
.waveform i:nth-child(12) {height: 28%; animation-delay: -.8s}
@keyframes wave { to { transform: scaleY(.55); opacity: .55; } }

.constellation {
  position: absolute;
  width: 150px; height: 100px;
  right: 24px; bottom: 20px;
}
.constellation::before,
.constellation::after {
  content: "";
  position: absolute;
  height: 1px;
  background: rgba(214,255,75,.2);
  transform-origin: left center;
}
.constellation::before { width: 115px; left: 16px; top: 44px; transform: rotate(-14deg); }
.constellation::after { width: 80px; left: 49px; top: 36px; transform: rotate(34deg); }
.constellation b {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(214,255,75,.35);
}
.constellation b:nth-child(1){left:10px; top:52px}
.constellation b:nth-child(2){left:48px; top:35px}
.constellation b:nth-child(3){left:85px; top:28px}
.constellation b:nth-child(4){left:125px; top:20px}
.constellation b:nth-child(5){left:112px; top:78px}

.quote-card {
  display: flex;
  flex-direction: column;
}
.quote-card blockquote {
  margin: auto 0 18px;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -.035em;
}
.quote-card small {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
}

.contact-section { padding-bottom: 90px; }
.contact-inner {
  padding: 64px;
  border-radius: 30px;
  border: 1px solid rgba(214,255,75,.16);
  background:
    radial-gradient(circle at 88% 22%, rgba(214,255,75,.09), transparent 24rem),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.contact-inner .section-index { display: inline-block; margin-bottom: 70px; }
.contact-inner > p:not(.eyebrow):not(.todo-note) {
  max-width: 720px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 18px;
  margin-top: 26px;
}
.contact-actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.todo-note {
  margin-top: 30px;
  color: #6f7680;
  font-size: 11px;
  font-family: var(--mono);
}
.todo-note code { color: #a8afb9; }

footer {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
  padding: 28px 0 38px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--faint);
  font-size: 11px;
  font-family: var(--mono);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }
  .nav { display: none; }

  .hero {
    padding-top: 150px;
    min-height: auto;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-visual { min-height: 510px; }
  .note-1 { right: 0; }
  .note-2 { left: 0; }

  .about-layout { grid-template-columns: 1fr; gap: 60px; }
  .project-card { grid-template-columns: 50px 1fr; }
  .project-side { grid-column: 2; grid-template-columns: repeat(3,1fr); }
  .project-side.subtle { display: block; }

  .stack-grid, .beyond-grid { grid-template-columns: 1fr; }
  .stack-column {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .stack-column:last-child { border-bottom: 0; }
}

@media (max-width: 680px) {
  .section { width: min(calc(100% - 28px), var(--max)); padding: 100px 0; }
  .topbar { width: calc(100% - 20px); margin-top: 10px; min-height: 56px; padding: 0 13px; }
  .brand span:last-child { display: none; }
  .status-chip { font-size: 9px; padding: 8px 9px; }

  .hero { padding-top: 120px; }
  h1 { font-size: clamp(50px, 16vw, 78px); }
  .hero-lead { font-size: 16px; }
  .hero-meta { display: grid; gap: 18px; }
  .hero-visual { min-height: 420px; }
  .orb { width: 280px; height: 280px; }
  .code-window { transform: none; }
  pre { padding: 20px; font-size: 10px; }
  .floating-note { display: none; }
  .scroll-indicator { display: none; }

  .section-heading { grid-template-columns: 38px 1fr; gap: 10px; margin-bottom: 50px; }
  .section-index { padding-top: 9px; }
  .section-heading h2, .contact-inner h2 { font-size: 44px; }

  .principle-card {
    grid-template-columns: 36px 1fr;
  }
  .principle-card p {
    grid-column: 2;
  }

  .project-card {
    grid-template-columns: 34px 1fr;
    gap: 12px;
  }
  .project-side { grid-column: 2; grid-template-columns: 1fr; }
  .metric { padding: 10px 0; }

  .stack-column, .beyond-card { padding: 24px; }
  .contact-inner { padding: 34px 24px; }
  .contact-inner .section-index { margin-bottom: 48px; }
  footer { width: calc(100% - 28px); flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* --- Grand Line / One Piece inspired theme layer --- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .08;
  background-image:
    linear-gradient(rgba(229,184,92,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,184,92,.13) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.brand-mark {
  font-size: 16px;
  background: radial-gradient(circle at 50% 35%, #f0cf84, #b7792e 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 24px rgba(229,184,92,.16);
}

.topbar {
  background: rgba(7,17,31,.76);
  border-color: rgba(229,184,92,.14);
}

.status-dot {
  background: #d85c4a;
  box-shadow: 0 0 0 5px rgba(216,92,74,.10);
}

.hero::after {
  content: "";
  position: absolute;
  right: -110px;
  top: 145px;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  border: 1px dashed rgba(229,184,92,.15);
  box-shadow:
    0 0 0 52px rgba(229,184,92,.025),
    0 0 0 104px rgba(229,184,92,.018);
  pointer-events: none;
}

.hero h1 {
  text-wrap: balance;
}

.accent-text {
  color: #e9be63;
  text-shadow: 0 0 38px rgba(229,184,92,.12);
}

.glass {
  border-color: rgba(229,184,92,.16);
  background: linear-gradient(135deg, rgba(240,224,185,.075), rgba(7,17,31,.14));
}

.orb {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 15%),
    radial-gradient(circle at 50% 50%, rgba(229,184,92,.25), rgba(216,92,74,.055) 45%, transparent 72%);
  box-shadow:
    inset -25px -20px 90px rgba(0,0,0,.45),
    0 0 120px rgba(229,184,92,.08);
}

.code-keyword { color: #e5b85c; }
.code-type { color: #78b7d0; }
.code-string { color: #d98d80; }

.grandline-compass {
  position: absolute;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(229,184,92,.18);
  border-radius: 50%;
  z-index: 1;
  transform: rotate(-8deg);
}

.grandline-compass::before,
.grandline-compass::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: rgba(229,184,92,.15);
  transform: translate(-50%, -50%);
}
.grandline-compass::before { width: 1px; height: 100%; }
.grandline-compass::after { width: 100%; height: 1px; }

.grandline-compass span {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(229,184,92,.55);
}
.grandline-compass span:nth-child(1) { top: 13px; left: 50%; transform: translateX(-50%); }
.grandline-compass span:nth-child(2) { right: 13px; top: 50%; transform: translateY(-50%); }
.grandline-compass span:nth-child(3) { bottom: 13px; left: 50%; transform: translateX(-50%); }
.grandline-compass span:nth-child(4) { left: 13px; top: 50%; transform: translateY(-50%); }

.grandline-compass i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 150px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(28deg);
  background: linear-gradient(to top, transparent, #d85c4a);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}



.bounty-badge {
  position: absolute;
  top: 14px;
  left: 12px;
  z-index: 5;
  width: 150px;
  padding: 14px 16px;
  border-radius: 14px;
  transform: rotate(-7deg);
  text-align: center;
  font-family: var(--mono);
  background:
    linear-gradient(rgba(225,197,137,.88), rgba(189,151,92,.84));
  color: #3c2a1f;
  border: 1px solid rgba(80,51,29,.4);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.bounty-badge small,
.bounty-badge span {
  display: block;
  letter-spacing: .14em;
  font-size: 8px;
}
.bounty-badge strong {
  display: block;
  margin: 4px 0;
  font-size: 15px;
  letter-spacing: .03em;
}

.voyage-divider {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto -30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  color: rgba(229,184,92,.5);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
}
.voyage-divider span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229,184,92,.2));
}
.voyage-divider span:last-child {
  background: linear-gradient(90deg, rgba(229,184,92,.2), transparent);
}

.project-card:hover {
  background:
    linear-gradient(90deg, rgba(229,184,92,.05), rgba(216,92,74,.018), transparent 68%);
}

.project-tags span {
  border-color: rgba(229,184,92,.16);
  background: rgba(229,184,92,.025);
}

.stack-grid,
.beyond-card,
.contact-inner {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.01);
}

.quote-card blockquote::before {
  content: "☠ ";
  color: #d85c4a;
}

.contact-inner {
  border-color: rgba(229,184,92,.2);
  background:
    radial-gradient(circle at 88% 22%, rgba(229,184,92,.10), transparent 24rem),
    radial-gradient(circle at 14% 110%, rgba(216,92,74,.06), transparent 20rem),
    linear-gradient(135deg, rgba(240,224,185,.05), rgba(7,17,31,.08));
}

.btn-primary {
  background: linear-gradient(135deg, #f0cc7b, #b97931);
  box-shadow: 0 10px 30px rgba(183,121,49,.16);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #f4d58d, #c78639);
}

@media (max-width: 680px) {
  .grandline-compass {
    width: 320px;
    height: 320px;
  }
  .bounty-badge {
    width: 126px;
    top: -8px;
    left: -4px;
    padding: 10px 12px;
  }
  .hero::after { display: none; }
  .voyage-divider {
    width: calc(100% - 28px);
    font-size: 7px;
    gap: 9px;
  }
}


/* UX refinements */
.grandline-compass {
  opacity: .42;
  pointer-events: none;
  transition: opacity .4s ease;
}

.hero-visual:hover .grandline-compass {
  opacity: .58;
}

.grandline-compass i {
  opacity: .75;
}

/* =========================================================
   FINAL SELECTION OVERRIDE
   Keep selected text readable across every component.
   ========================================================= */
html ::selection,
body ::selection,
*::selection {
  background-color: #c94f42 !important;
  color: #fff7e6 !important;
  -webkit-text-fill-color: #fff7e6 !important;
  text-shadow: none !important;
}

html ::-moz-selection,
body ::-moz-selection,
*::-moz-selection {
  background-color: #c94f42 !important;
  color: #fff7e6 !important;
  text-shadow: none !important;
}


/* =========================================================
   HERO RADAR — animated but persistent
   The container itself NEVER fades or animates opacity.
   Only internal pieces move.
   ========================================================= */

.hero-visual .orb,
.grandline-compass,
.grandline-map,
.code-route-map {
  display: none !important;
}

.code-window {
  position: relative;
  isolation: isolate;
  z-index: 2;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(10,20,33,.84), rgba(8,17,29,.74));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.code-window .window-bar,
.code-window pre {
  position: relative;
  z-index: 4;
}

.code-radar {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 53%;
  width: 430px;
  height: 430px;
  transform: translate(-50%, -50%) rotate(-7deg);
  border: 1px solid rgba(229,184,92,.16);
  border-radius: 50%;
  pointer-events: none;

  /* Persistent layer: never animate this itself */
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(229,184,92,.17) 0%,
      rgba(229,184,92,.075) 17%,
      rgba(229,184,92,.025) 39%,
      rgba(4,10,18,.24) 40%,
      rgba(4,10,18,.14) 57%,
      transparent 72%
    );
  box-shadow:
    inset 0 0 58px rgba(229,184,92,.025),
    0 0 70px rgba(229,184,92,.025);
}

.code-radar::before,
.code-radar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.code-radar::before {
  inset: 28px;
  border: 1px dashed rgba(229,184,92,.10);
}

.code-radar::after {
  inset: 78px;
  border: 1px solid rgba(229,184,92,.075);
}

.code-radar-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(229,184,92,.085);
}

.code-radar .ring-1 {
  width: 75%;
  height: 75%;
  animation: radarRingPulse 4.8s ease-in-out infinite;
}

.code-radar .ring-2 {
  width: 49%;
  height: 49%;
  animation: radarRingPulse 4.8s ease-in-out 1.1s infinite;
}

.code-radar .ring-3 {
  width: 21%;
  height: 21%;
  border-color: rgba(216,92,74,.12);
  animation: radarRingPulse 4.8s ease-in-out 2.2s infinite;
}

.code-radar-axis {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(229,184,92,.09) 12%,
    rgba(229,184,92,.13) 50%,
    rgba(229,184,92,.09) 88%,
    transparent
  );
}

.code-radar .axis-h {
  width: 92%;
  height: 1px;
  transform: translate(-50%, -50%);
}

.code-radar .axis-v {
  width: 92%;
  height: 1px;
  transform: translate(-50%, -50%) rotate(90deg);
}

.code-radar .axis-d1 {
  width: 82%;
  height: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: .55;
}

.code-radar .axis-d2 {
  width: 82%;
  height: 1px;
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: .55;
}

.radar-dir {
  position: absolute;
  z-index: 2;
  color: rgba(229,184,92,.42);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
}

.radar-n { left: 50%; top: 14px; transform: translateX(-50%); }
.radar-e { right: 14px; top: 50%; transform: translateY(-50%); }
.radar-s { left: 50%; bottom: 14px; transform: translateX(-50%); }
.radar-w { left: 14px; top: 50%; transform: translateY(-50%); }

.radar-sweep-sector {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 48%;
  transform-origin: 0 0;
  border-radius: 0 100% 0 0;
  background:
    conic-gradient(
      from 0deg,
      rgba(229,184,92,.10),
      rgba(229,184,92,.025) 24deg,
      transparent 42deg
    );
  animation: none;
  opacity: .55;
}

.radar-needle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 152px;
  transform-origin: 50% 100%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(
    to bottom,
    rgba(216,92,74,.68),
    rgba(216,92,74,.16) 62%,
    transparent
  );
  filter: drop-shadow(0 0 7px rgba(216,92,74,.12));
  animation: none;
}

.radar-core {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(229,184,92,.30);
  background: rgba(229,184,92,.14);
  box-shadow:
    0 0 0 9px rgba(229,184,92,.025),
    0 0 42px rgba(229,184,92,.24);
  animation: radarCorePulse 2.8s ease-in-out infinite;
}

.radar-core::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229,184,92,.11), transparent 68%);
}

@keyframes radarNeedleSweep {
  from { transform: translate(-50%, -100%) rotate(25deg); }
  to   { transform: translate(-50%, -100%) rotate(385deg); }
}

@keyframes radarSweep {
  from { transform: rotate(18deg); }
  to   { transform: rotate(378deg); }
}

@keyframes radarRingPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes radarCorePulse {
  0%, 100% {
    box-shadow:
      0 0 0 9px rgba(229,184,92,.025),
      0 0 28px rgba(229,184,92,.16);
  }
  50% {
    box-shadow:
      0 0 0 13px rgba(229,184,92,.035),
      0 0 48px rgba(229,184,92,.26);
  }
}

/* =========================================================
   CONSTELLATION ANIMATION
   ========================================================= */

.constellation {
  transform-origin: 50% 50%;
  animation: constellationFloat 8s ease-in-out infinite;
}

.constellation::before,
.constellation::after {
  transform-origin: left center;
  animation: constellationLineGlow 3.6s ease-in-out infinite;
}

.constellation::after {
  animation-delay: 1.1s;
}

.constellation b {
  animation: constellationStar 2.6s ease-in-out infinite;
}

.constellation b:nth-child(1) { animation-delay: 0s; }
.constellation b:nth-child(2) { animation-delay: .35s; }
.constellation b:nth-child(3) { animation-delay: .7s; }
.constellation b:nth-child(4) { animation-delay: 1.05s; }
.constellation b:nth-child(5) { animation-delay: 1.4s; }

@keyframes constellationFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -5px, 0) rotate(.8deg); }
}

@keyframes constellationStar {
  0%, 100% {
    transform: scale(.86);
    opacity: .62;
    box-shadow: 0 0 8px rgba(229,184,92,.16);
  }
  50% {
    transform: scale(1.22);
    opacity: 1;
    box-shadow: 0 0 18px rgba(229,184,92,.42);
  }
}

@keyframes constellationLineGlow {
  0%, 100% { opacity: .26; filter: brightness(.8); }
  50% { opacity: .68; filter: brightness(1.25); }
}

/* Hover gives the card a little extra life without being distracting */
.beyond-card:hover .constellation {
  animation-duration: 5.5s;
}

@media (max-width: 680px) {
  .code-radar {
    width: 315px;
    height: 315px;
    top: 54%;
  }

  .radar-needle {
    height: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-needle,
  .radar-sweep-sector,
  .radar-core,
  .code-radar-ring,
  .constellation,
  .constellation::before,
  .constellation::after,
  .constellation b {
    animation: none !important;
  }
}

/* Final readable text selection */
html ::selection,
body ::selection,
*::selection {
  background: #c94f42 !important;
  color: #fff7e6 !important;
  -webkit-text-fill-color: #fff7e6 !important;
  text-shadow: none !important;
}


/* =========================================================
   RADAR SKILL DISCOVERY — canonical version
   Hidden until the needle actually reaches each blip.
   ========================================================= */

.radar-blips {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.radar-blip {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.radar-blip-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) scale(.55);
  border-radius: 50%;
  background: #e5b85c;
  border: 1px solid rgba(255,248,232,.78);
  opacity: 0;
  box-shadow:
    0 0 0 0 rgba(229,184,92,0),
    0 0 0 rgba(229,184,92,0);
}

.radar-blip-label {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%) scale(.97);
  white-space: nowrap;
  padding: 4px 7px;
  border: 1px solid rgba(229,184,92,.18);
  border-radius: 7px;
  background: rgba(7,17,31,.76);
  color: #fff3c3;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .08em;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
}

.radar-blip[data-side="left"] .radar-blip-label {
  left: auto;
  right: 13px;
  text-align: right;
}

/* A hit lasts ~1.9s, then JS removes the class. */
.radar-blip.is-hit {
  visibility: visible;
  animation: skillHitContainer 2.6s cubic-bezier(.22,.7,.2,1) forwards;
}

.radar-blip.is-hit .radar-blip-dot {
  animation: skillDotHit 2.6s cubic-bezier(.22,.7,.2,1) forwards;
}

.radar-blip.is-hit .radar-blip-label {
  animation: skillLabelHit 2.6s cubic-bezier(.22,.7,.2,1) forwards;
}

@keyframes skillHitContainer {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes skillDotHit {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.45);
    box-shadow:
      0 0 0 0 rgba(229,184,92,0),
      0 0 0 rgba(229,184,92,0);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.32);
    background: #fff1ab;
    box-shadow:
      0 0 0 9px rgba(229,184,92,.07),
      0 0 26px rgba(229,184,92,.44);
  }

  48% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: #e5b85c;
    box-shadow:
      0 0 0 5px rgba(229,184,92,.04),
      0 0 15px rgba(229,184,92,.25);
  }

  78% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
    box-shadow:
      0 0 0 0 rgba(229,184,92,0),
      0 0 0 rgba(229,184,92,0);
  }
}

@keyframes skillLabelHit {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-3px) scale(.96);
  }

  18% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1.025);
    border-color: rgba(229,184,92,.42);
    box-shadow: 0 0 16px rgba(229,184,92,.10);
  }

  55% {
    opacity: .95;
    transform: translateY(-50%) scale(1);
  }

  80% {
    opacity: .82;
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) scale(.98);
    border-color: rgba(229,184,92,.10);
    box-shadow: none;
  }
}

@media (max-width: 680px) {
  .radar-blip-dot {
    width: 6px;
    height: 6px;
  }

  .radar-blip-label {
    font-size: 6px;
    padding: 3px 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-blip.is-hit,
  .radar-blip.is-hit .radar-blip-dot,
  .radar-blip.is-hit .radar-blip-label {
    animation-duration: .01ms !important;
  }
}

/* Final readable text selection */
html ::selection,
body ::selection,
*::selection {
  background: #c94f42 !important;
  color: #fff7e6 !important;
  -webkit-text-fill-color: #fff7e6 !important;
  text-shadow: none !important;
}


/* Remove obsolete outer Grand Line hero ring */
.hero::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   DANCING CONSTELLATION
   Nodes move organically while edges remain connected.
   ========================================================= */

.constellation.constellation-dance {
  position: absolute;
  width: 180px;
  height: 120px;
  right: 18px;
  bottom: 14px;
  transform: none !important;
  animation: none !important;
  overflow: visible;
  pointer-events: none;
}

.constellation.constellation-dance::before,
.constellation.constellation-dance::after {
  content: none !important;
  display: none !important;
}

.constellation-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.constellation-lines line {
  stroke: rgba(229,184,92,.22);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(229,184,92,.05));
}

.constellation-nodes circle {
  fill: #e5b85c;
  stroke: rgba(255,245,220,.24);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(229,184,92,.34));
}

.beyond-card:hover .constellation.constellation-dance {
  animation: none !important;
}

@media (max-width: 680px) {
  .constellation.constellation-dance {
    width: 150px;
    height: 100px;
    right: 12px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .constellation.constellation-dance {
    animation: none !important;
  }
}


/* =========================================================
   EVOLVING CONSTELLATION polish
   ========================================================= */

.constellation-nodes circle {
  transition:
    filter .4s ease,
    stroke-opacity .4s ease;
}

.constellation-lines line {
  transition: opacity .4s ease;
}


/* =========================================================
   CLEAN CONSTELLATION polish
   ========================================================= */

.constellation-lines line {
  stroke: rgba(229,184,92,.26);
  stroke-width: 1;
  stroke-linecap: round;
  transition: opacity .32s ease;
}

.constellation-nodes circle {
  fill: #e5b85c;
  stroke: rgba(255,245,220,.38);
  stroke-width: .9;
  filter:
    drop-shadow(0 0 3px rgba(229,184,92,.28))
    drop-shadow(0 0 8px rgba(229,184,92,.16));
}

.constellation-nodes circle[data-node="2"] {
  r: 4.8px;
  fill: #f0c86f;
  stroke: rgba(255,250,231,.55);
  filter:
    drop-shadow(0 0 4px rgba(229,184,92,.34))
    drop-shadow(0 0 10px rgba(229,184,92,.22));
}


/* =========================================================
   LOCAL GRAPH CONSTELLATION polish
   ========================================================= */

.constellation-lines line {
  stroke: rgba(229,184,92,.72);
  stroke-width: .9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition:
    opacity .55s ease,
    stroke-opacity .45s ease;
}

.constellation-nodes circle {
  fill: #e5b85c;
  stroke: rgba(255,245,220,.42);
  stroke-width: .85;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 0 3px rgba(229,184,92,.26))
    drop-shadow(0 0 7px rgba(229,184,92,.12));
}


/* =========================================================
   REALISTIC RADAR PACING
   3 RPM => one full sweep every 20 seconds.
   Softer target returns; slower ambient breathing.
   ========================================================= */

.code-radar .ring-1 {
  animation-duration: 10s !important;
}

.code-radar .ring-2 {
  animation-duration: 11.5s !important;
}

.code-radar .ring-3 {
  animation-duration: 13s !important;
}

.radar-core {
  animation-duration: 6.5s !important;
}

@keyframes skillHitContainer {
  0%   { opacity: 0; }
  10%  { opacity: .72; }
  22%  { opacity: 1; }
  68%  { opacity: .92; }
  100% { opacity: 0; }
}

@keyframes skillDotHit {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.68);
    box-shadow:
      0 0 0 0 rgba(229,184,92,0),
      0 0 0 rgba(229,184,92,0);
  }

  18% {
    opacity: .9;
    transform: translate(-50%, -50%) scale(1.16);
    background: #f2d688;
    box-shadow:
      0 0 0 6px rgba(229,184,92,.045),
      0 0 18px rgba(229,184,92,.28);
  }

  42% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: #e5b85c;
    box-shadow:
      0 0 0 4px rgba(229,184,92,.035),
      0 0 12px rgba(229,184,92,.20);
  }

  72% {
    opacity: .78;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.9);
    box-shadow:
      0 0 0 0 rgba(229,184,92,0),
      0 0 0 rgba(229,184,92,0);
  }
}

@keyframes skillLabelHit {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-2px) scale(.98);
  }

  18% {
    opacity: .78;
    transform: translateY(-50%) translateX(0) scale(1.01);
    border-color: rgba(229,184,92,.26);
    box-shadow: 0 0 10px rgba(229,184,92,.06);
  }

  38% {
    opacity: .95;
    transform: translateY(-50%) scale(1);
  }

  74% {
    opacity: .72;
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) scale(.99);
    border-color: rgba(229,184,92,.08);
    box-shadow: none;
  }
}


/* =========================================================
   RADAR TARGET RETURN WAVES
   Sequential expanding rings around discovered skills.
   ========================================================= */

.radar-blip-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

.radar-blip-rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) scale(.45);
  border: 1px solid rgba(229,184,92,.72);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 0 6px rgba(229,184,92,.11),
    inset 0 0 4px rgba(229,184,92,.05);
}

.radar-blip.is-hit .radar-blip-rings {
  opacity: 1;
}

/*
  One ring fully expands/fades before the next begins.
  4 waves × 1.05s with a small gap gives a calm sonar/radar feel.
*/
.radar-blip.is-hit .radar-blip-rings i:nth-child(1) {
  animation: radarReturnWave 1.05s cubic-bezier(.18,.62,.22,1) 0s 1 both;
}

.radar-blip.is-hit .radar-blip-rings i:nth-child(2) {
  animation: radarReturnWave 1.05s cubic-bezier(.18,.62,.22,1) 1.12s 1 both;
}

.radar-blip.is-hit .radar-blip-rings i:nth-child(3) {
  animation: radarReturnWave 1.05s cubic-bezier(.18,.62,.22,1) 2.24s 1 both;
}

.radar-blip.is-hit .radar-blip-rings i:nth-child(4) {
  animation: radarReturnWave 1.05s cubic-bezier(.18,.62,.22,1) 3.36s 1 both;
}

@keyframes radarReturnWave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.55);
    border-color: rgba(229,184,92,.72);
  }

  12% {
    opacity: .76;
  }

  68% {
    opacity: .28;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.8);
    border-color: rgba(229,184,92,.05);
  }
}

/* Keep discovered target readable for longer */
.radar-blip.is-hit {
  animation: skillHitContainerLong 5.2s ease-out forwards !important;
}

.radar-blip.is-hit .radar-blip-dot {
  animation: skillDotHitLong 5.2s cubic-bezier(.22,.7,.2,1) forwards !important;
}

.radar-blip.is-hit .radar-blip-label {
  animation: skillLabelHitLong 5.2s cubic-bezier(.22,.7,.2,1) forwards !important;
}

@keyframes skillHitContainerLong {
  0%   { opacity: 0; }
  7%   { opacity: 1; }
  83%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes skillDotHitLong {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.7);
  }

  8% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
    background: #f2d688;
    box-shadow:
      0 0 0 5px rgba(229,184,92,.045),
      0 0 18px rgba(229,184,92,.28);
  }

  18% {
    transform: translate(-50%, -50%) scale(1);
    background: #e5b85c;
  }

  82% {
    opacity: .95;
    box-shadow:
      0 0 0 4px rgba(229,184,92,.03),
      0 0 12px rgba(229,184,92,.18);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.88);
  }
}

@keyframes skillLabelHitLong {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-2px) scale(.98);
  }

  9% {
    opacity: .9;
    transform: translateY(-50%) translateX(0) scale(1.01);
    border-color: rgba(229,184,92,.30);
    box-shadow: 0 0 10px rgba(229,184,92,.06);
  }

  18% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  82% {
    opacity: .86;
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) scale(.99);
    border-color: rgba(229,184,92,.08);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-blip.is-hit .radar-blip-rings i {
    animation: none !important;
  }
}


/* =========================================================
   CONSTELLATION — visual-only refinement
   Keep previous layout/animation; only improve color + z-index.
   ========================================================= */

.beyond-card {
  position: relative;
  overflow: hidden;
}

/* Constellation stays behind text without changing card layout */
.constellation.constellation-dance {
  z-index: 1 !important;
}

/* All readable content sits safely above the animation */
.beyond-card > .beyond-label,
.beyond-card > h3,
.beyond-card > p,
.beyond-card > blockquote,
.beyond-card > small {
  position: relative;
  z-index: 3;
}

/* Softer, more elegant lines */
.constellation-lines line {
  stroke: rgba(203, 166, 92, .48) !important;
  stroke-width: .85 !important;
  stroke-linecap: round;
  filter: none !important;
}

/* Warmer, less intrusive nodes */
.constellation-nodes circle {
  fill: rgba(228, 184, 92, .88) !important;
  stroke: rgba(255, 241, 211, .30) !important;
  stroke-width: .8 !important;
  filter:
    drop-shadow(0 0 3px rgba(228, 184, 92, .18))
    drop-shadow(0 0 7px rgba(228, 184, 92, .08)) !important;
}

/* Slight dimming when constellation visually passes behind copy */
.beyond-card:has(.constellation-dance)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(7,17,31,.20) 0%,
      rgba(7,17,31,.10) 48%,
      rgba(7,17,31,0) 76%
    );
}

/* Keep hover behavior subtle */
.beyond-card:hover .constellation.constellation-dance {
  opacity: .92;
}


/* =========================================================
   SECTION RHYTHM — tighter, more editorial spacing
   ========================================================= */

.section {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.section-heading {
  margin-bottom: 48px !important;
}

.hero {
  padding-top: 145px !important;
  padding-bottom: 72px !important;
}

.about-layout {
  gap: 64px !important;
}

.project-card {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.project-featured {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

.contact-section {
  padding-top: 88px !important;
  padding-bottom: 72px !important;
}

.voyage-divider {
  margin-top: -8px !important;
  margin-bottom: -10px !important;
}

@media (max-width: 680px) {
  .section {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  .section-heading {
    margin-bottom: 38px !important;
  }

  .hero {
    padding-top: 118px !important;
    padding-bottom: 58px !important;
  }

  .about-layout {
    gap: 46px !important;
  }

  .contact-section {
    padding-top: 72px !important;
    padding-bottom: 56px !important;
  }
}

/* Experience Logbook */
.experience-intro{max-width:720px;margin:-14px 0 52px 84px;color:var(--muted);font-size:16px;line-height:1.75}
.voyage-timeline{position:relative;margin-left:60px}.voyage-timeline:before{content:"";position:absolute;left:91px;top:20px;bottom:25px;width:1px;background:linear-gradient(#e5b85c88,#e5b85c22)}
.exp-item{position:relative;display:grid;grid-template-columns:64px 54px 1fr;gap:22px;margin-bottom:22px;align-items:start}
.exp-year{text-align:right;padding-top:22px;font:11px var(--mono);color:#d7c7a6}.exp-year small{color:var(--faint);font-size:9px}
.exp-port{position:relative;width:54px;height:54px;z-index:2}.exp-port:before{content:"";position:absolute;left:22px;top:22px;width:10px;height:10px;border-radius:50%;background:#b38b45;border:2px solid #132031;box-shadow:0 0 0 5px #e5b85c12}
.exp-port.current:after{content:"";position:absolute;left:12px;top:12px;width:28px;height:28px;border:1px dashed #e5b85c55;border-radius:50%;animation:expSpin 18s linear infinite}
.exp-card{padding:26px 28px;border:1px solid #e5b85c22;border-radius:20px;background:linear-gradient(135deg,#f0e0b90a,#07111f10)}
.exp-card b{display:block;color:var(--accent);font:9px var(--mono);letter-spacing:.12em;margin-bottom:8px}.exp-card h3{margin:0;font-size:28px;letter-spacing:-.045em}.exp-card>p{color:var(--muted);line-height:1.7;font-size:13px;margin:18px 0}
.exp-head{display:flex;justify-content:space-between;gap:20px}.exp-head em{display:block;color:var(--faint);font:10px var(--mono);font-style:normal;margin-top:6px}
.current-chip,.promoted{height:max-content;border:1px solid #e5b85c22;border-radius:999px;padding:7px 9px;font:8px var(--mono);color:#b7a98e;white-space:nowrap}.current-chip,.promoted{color:#d9b85f}
.exp-card ul{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid #e5b85c16}.exp-card li{color:#a9a292;font-size:12px;line-height:1.55;padding:10px 0;border-bottom:1px solid #e5b85c10}.exp-card li:before{content:"↳";color:#e5b85c77;margin-right:9px}
.exp-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.exp-tags span{border:1px solid #e5b85c1c;border-radius:999px;padding:6px 9px;color:#928a7b;font:9px var(--mono)}
.role{position:relative;margin-top:22px;padding:0 0 20px 20px;border-left:1px solid #e5b85c22}.role:last-of-type{padding-bottom:2px}.role:before{content:"";position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:#e5b85c}.role strong{font-size:14px}.role small{float:right;color:var(--faint);font:9px var(--mono)}.role p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.compact .exp-port{height:44px}.compact .exp-port:before{width:7px;height:7px;left:23px;top:18px}.compact .exp-year{padding-top:15px}.compact .exp-card{padding:16px 20px;display:grid;grid-template-columns:190px 220px 1fr;gap:18px;align-items:center}.compact .exp-card b{margin:0}.compact .exp-card h3{font-size:14px}.compact .exp-card p{margin:0;font-size:11px}
@keyframes expSpin{to{transform:rotate(360deg)}}
@media(max-width:980px){.experience-intro,.voyage-timeline{margin-left:0}.compact .exp-card{grid-template-columns:1fr}.voyage-timeline:before{left:81px}.exp-item{grid-template-columns:54px 42px 1fr;gap:16px}.exp-port{width:42px}.exp-port:before{left:16px}.exp-port.current:after{left:6px}}
@media(max-width:680px){.experience-intro{margin-bottom:38px;font-size:14px}.voyage-timeline:before{left:17px}.exp-item{grid-template-columns:36px 1fr;gap:12px}.exp-year{display:none}.exp-port{grid-column:1;width:36px}.exp-port:before{left:12px}.exp-port.current:after{left:2px}.exp-card{grid-column:2;padding:20px}.exp-head{display:block}.current-chip,.promoted{display:inline-flex;margin-top:12px}.exp-card h3{font-size:22px}.role small{float:none;display:block;margin-top:4px}.compact .exp-card{grid-column:2}.compact .exp-port:before{left:13px}}


/* =========================================================
   EXPERIENCE TIMELINE — node / route alignment fix
   Keep every port exactly centered on the voyage line.
   ========================================================= */

.voyage-timeline::before {
  left: 113px !important;
}

.exp-port::before {
  left: 50% !important;
  top: 27px !important;
  transform: translate(-50%, -50%) !important;
}

.exp-port.current::after {
  left: 50% !important;
  top: 27px !important;
  transform-origin: center !important;
  animation: expSpinCentered 18s linear infinite !important;
}

@keyframes expSpinCentered {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Compact ports use the same axis, just a tighter vertical position */
.compact .exp-port::before {
  left: 50% !important;
  top: 21px !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 980px) {
  .voyage-timeline::before {
    left: 91px !important;
  }

  .exp-port::before,
  .exp-port.current::after {
    left: 50% !important;
  }
}

@media (max-width: 680px) {
  .voyage-timeline::before {
    left: 18px !important;
  }

  .exp-port::before,
  .exp-port.current::after {
    left: 50% !important;
  }
}


/* =========================================================
   RADAR SWEEP TRAIL — geometry fix
   The sweep fan is anchored to the radar center and follows
   directly behind the needle.
   ========================================================= */

.radar-sweep-sector {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  /* Radius of the sweep */
  width: 48% !important;
  height: 48% !important;

  /* Pivot exactly at radar center */
  transform-origin: 0 0 !important;

  /* Fan extends from the center into the top-right quadrant */
  border-radius: 0 100% 0 0 !important;

  /* Softer, more radar-like trailing wedge */
  background:
    conic-gradient(
      from -34deg at 0 0,
      rgba(229,184,92,.00) 0deg,
      rgba(229,184,92,.018) 8deg,
      rgba(229,184,92,.045) 20deg,
      rgba(229,184,92,.075) 31deg,
      rgba(229,184,92,.00) 36deg
    ) !important;

  opacity: .72 !important;
  filter: blur(.2px);
  pointer-events: none;

  /* JS owns rotation, never CSS animation */
  animation: none !important;
}

/* Keep the fan visually behind the needle and radar returns */
.radar-sweep-sector {
  z-index: 1 !important;
}

.radar-needle {
  z-index: 3 !important;
}

.radar-core,
.radar-blips {
  z-index: 4 !important;
}


/* =========================================================
   RADAR SWEEP TRAIL — full-circle implementation
   Visible sector trails directly behind the needle.
   ========================================================= */

.radar-sweep-sector {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;

  border-radius: 50% !important;
  transform-origin: 50% 50% !important;

  background:
    conic-gradient(
      from -42deg,
      rgba(229,184,92,0) 0deg,
      rgba(229,184,92,.008) 7deg,
      rgba(229,184,92,.025) 16deg,
      rgba(229,184,92,.055) 27deg,
      rgba(229,184,92,.085) 36deg,
      rgba(229,184,92,0) 42deg,
      rgba(229,184,92,0) 360deg
    ) !important;

  opacity: .9 !important;
  filter: none !important;
  pointer-events: none !important;
  animation: none !important;
  z-index: 1 !important;

  /* Keep only the useful radar body and avoid a harsh edge */
  -webkit-mask-image:
    radial-gradient(circle, #000 0 72%, rgba(0,0,0,.9) 79%, transparent 94%);
  mask-image:
    radial-gradient(circle, #000 0 72%, rgba(0,0,0,.9) 79%, transparent 94%);
}

.radar-needle {
  z-index: 3 !important;
}

.radar-core,
.radar-blips {
  z-index: 4 !important;
}


/* =========================================================
   RADAR SWEEP TRAIL — attached fan
   Restore the clean v26 fan, but lock its leading edge
   exactly to the needle direction.
   ========================================================= */

.radar-sweep-sector {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 50% !important;
  transform-origin: 50% 50% !important;

  /*
    0deg in conic-gradient is straight up, same as the radar needle.
    The trail lives from 320deg -> 360deg, so 360/0deg is the
    leading edge and touches the needle exactly.
  */
  background:
    conic-gradient(
      from 0deg,
      rgba(229,184,92,0) 0deg,
      rgba(229,184,92,0) 320deg,
      rgba(229,184,92,.008) 326deg,
      rgba(229,184,92,.018) 333deg,
      rgba(229,184,92,.035) 341deg,
      rgba(229,184,92,.055) 348deg,
      rgba(229,184,92,.078) 354deg,
      rgba(229,184,92,.105) 359.2deg,
      rgba(229,184,92,.075) 360deg
    ) !important;

  opacity: .92 !important;
  filter: none !important;
  pointer-events: none !important;
  animation: none !important;
  z-index: 2 !important;

  -webkit-mask-image:
    radial-gradient(
      circle,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.96) 74%,
      rgba(0,0,0,.72) 84%,
      transparent 96%
    );
  mask-image:
    radial-gradient(
      circle,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.96) 74%,
      rgba(0,0,0,.72) 84%,
      transparent 96%
    );
}

.radar-needle {
  z-index: 3 !important;
}

.radar-core,
.radar-blips {
  z-index: 4 !important;
}


/* =========================================================
   RADAR TRAIL LIFETIME — 90 degree tail
   A target remains active exactly while it is inside the tail.
   ========================================================= */

.radar-sweep-sector {
  background:
    conic-gradient(
      from 0deg,
      rgba(229,184,92,0) 0deg,
      rgba(229,184,92,0) 270deg,

      rgba(229,184,92,.004) 278deg,
      rgba(229,184,92,.010) 288deg,
      rgba(229,184,92,.020) 300deg,
      rgba(229,184,92,.034) 312deg,
      rgba(229,184,92,.050) 324deg,
      rgba(229,184,92,.068) 336deg,
      rgba(229,184,92,.086) 347deg,
      rgba(229,184,92,.105) 356deg,
      rgba(229,184,92,.115) 360deg
    ) !important;

  opacity: .94 !important;
}

/*
  During the full time a target is inside the radar tail,
  the point gently breathes instead of playing a fixed 5s animation.
*/
.radar-blip.is-in-trail {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

.radar-blip.is-in-trail .radar-blip-dot {
  visibility: visible !important;
  opacity: 1 !important;
  animation: radarTailTargetPulse 1.55s ease-in-out infinite !important;
}

.radar-blip.is-in-trail .radar-blip-label {
  visibility: visible !important;
  opacity: .94 !important;
  animation: radarTailLabelPulse 1.55s ease-in-out infinite !important;
}

/* Continuous radar-return rings while target remains inside the tail */
.radar-blip.is-in-trail .radar-blip-rings {
  opacity: 1 !important;
}

.radar-blip.is-in-trail .radar-blip-rings i:nth-child(1) {
  animation: radarReturnWave 1.2s cubic-bezier(.18,.62,.22,1) 0s infinite !important;
}

.radar-blip.is-in-trail .radar-blip-rings i:nth-child(2) {
  animation: radarReturnWave 1.2s cubic-bezier(.18,.62,.22,1) .4s infinite !important;
}

.radar-blip.is-in-trail .radar-blip-rings i:nth-child(3) {
  animation: radarReturnWave 1.2s cubic-bezier(.18,.62,.22,1) .8s infinite !important;
}

.radar-blip.is-in-trail .radar-blip-rings i:nth-child(4) {
  display: none;
}

@keyframes radarTailTargetPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(.96);
    background: #e5b85c;
    box-shadow:
      0 0 0 3px rgba(229,184,92,.025),
      0 0 10px rgba(229,184,92,.15);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.13);
    background: #f1d485;
    box-shadow:
      0 0 0 6px rgba(229,184,92,.05),
      0 0 18px rgba(229,184,92,.28);
  }
}

@keyframes radarTailLabelPulse {
  0%, 100% {
    opacity: .76;
    border-color: rgba(229,184,92,.16);
    box-shadow: none;
  }

  50% {
    opacity: 1;
    border-color: rgba(229,184,92,.32);
    box-shadow: 0 0 10px rgba(229,184,92,.06);
  }
}

/* Soft exit at the end of the sweep tail */
.radar-blip.is-leaving-trail {
  visibility: visible !important;
  animation: radarTargetTailExit .42s ease-out forwards !important;
}

@keyframes radarTargetTailExit {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* =========================================================
   RADAR TARGET PULSE — smoother / slower
   Keep tail-synced lifetime, remove jumpy blinking.
   ========================================================= */

/* Slow breathing instead of sharp blinking */
.radar-blip.is-in-trail .radar-blip-dot {
  animation: radarTailTargetPulseSmooth 3.2s ease-in-out infinite !important;
}

.radar-blip.is-in-trail .radar-blip-label {
  animation: radarTailLabelPulseSmooth 3.2s ease-in-out infinite !important;
}

/* Slower radar-return waves with more breathing room */
.radar-blip.is-in-trail .radar-blip-rings i:nth-child(1) {
  animation: radarReturnWaveSmooth 2.4s ease-out 0s infinite !important;
}

.radar-blip.is-in-trail .radar-blip-rings i:nth-child(2) {
  animation: radarReturnWaveSmooth 2.4s ease-out .8s infinite !important;
}

.radar-blip.is-in-trail .radar-blip-rings i:nth-child(3) {
  animation: radarReturnWaveSmooth 2.4s ease-out 1.6s infinite !important;
}

@keyframes radarTailTargetPulseSmooth {
  0%, 100% {
    transform: translate(-50%, -50%) scale(.99);
    opacity: .88;
    background: #e5b85c;
    box-shadow:
      0 0 0 3px rgba(229,184,92,.02),
      0 0 9px rgba(229,184,92,.14);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.055);
    opacity: 1;
    background: #ecd07a;
    box-shadow:
      0 0 0 5px rgba(229,184,92,.035),
      0 0 15px rgba(229,184,92,.22);
  }
}

@keyframes radarTailLabelPulseSmooth {
  0%, 100% {
    opacity: .78;
    transform: translateY(-50%) scale(1);
    border-color: rgba(229,184,92,.15);
    box-shadow: none;
  }

  50% {
    opacity: .96;
    transform: translateY(-50%) scale(1.008);
    border-color: rgba(229,184,92,.24);
    box-shadow: 0 0 8px rgba(229,184,92,.045);
  }
}

@keyframes radarReturnWaveSmooth {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.75);
    border-color: rgba(229,184,92,.42);
  }

  14% {
    opacity: .34;
  }

  72% {
    opacity: .12;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.2);
    border-color: rgba(229,184,92,.025);
  }
}

/* Softer exit, no snap */
.radar-blip.is-leaving-trail {
  animation: radarTargetTailExitSmooth .7s ease-out forwards !important;
}

@keyframes radarTargetTailExitSmooth {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* =========================================================
   ALMAS GALLERY — EXPANDABLE CASE STUDY
   ========================================================= */

.project-case-study {
  overflow: visible;
}

.project-case-study .case-lead {
  max-width: 760px;
}

.case-toggle {
  margin-top: 24px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 16px;
  border: 1px solid rgba(229,184,92,.18);
  border-radius: 999px;
  background: rgba(229,184,92,.025);
  color: #d9cfbb;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.case-toggle:hover {
  border-color: rgba(229,184,92,.36);
  background: rgba(229,184,92,.055);
  transform: translateY(-1px);
}

.case-toggle-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(229,184,92,.08);
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.project-case-study.is-open .case-toggle-icon {
  transform: rotate(45deg);
}

.case-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows .7s cubic-bezier(.2,.75,.2,1),
    opacity .45s ease;
}

.project-case-study.is-open .case-details {
  grid-template-rows: 1fr;
  opacity: 1;
}

.case-details-inner {
  min-height: 0;
  overflow: hidden;
}

.case-map-label {
  margin: 42px 0 28px 100px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  color: rgba(229,184,92,.44);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
}

.case-map-label i {
  height: 1px;
  background: linear-gradient(90deg, rgba(229,184,92,.22), rgba(229,184,92,.05));
}

.case-grid {
  margin-left: 100px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid rgba(229,184,92,.12);
  border-left: 1px solid rgba(229,184,92,.08);
}

.case-block {
  position: relative;
  min-height: 255px;
  padding: 28px 30px;
  border-right: 1px solid rgba(229,184,92,.08);
  border-bottom: 1px solid rgba(229,184,92,.08);
  background:
    radial-gradient(circle at 100% 0%, rgba(229,184,92,.025), transparent 45%);
}

.case-block::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(229,184,92,.24);
}

.case-index {
  display: block;
  margin-bottom: 36px;
  color: rgba(229,184,92,.52);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .13em;
}

.case-block h4 {
  max-width: 470px;
  margin: 0 0 13px;
  font-size: 21px;
  letter-spacing: -.035em;
}

.case-block p {
  max-width: 590px;
  margin: 0;
  color: #9f998c;
  font-size: 12px;
  line-height: 1.75;
}

.case-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-points li {
  position: relative;
  padding: 8px 0 8px 18px;
  border-bottom: 1px solid rgba(229,184,92,.06);
  color: #9f998c;
  font-size: 11px;
  line-height: 1.55;
}

.case-points li::before {
  content: "↳";
  position: absolute;
  left: 0;
  color: rgba(229,184,92,.52);
}

.case-system-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.case-system-list span {
  padding: 7px 9px;
  border: 1px solid rgba(229,184,92,.11);
  border-radius: 8px;
  color: #a69e8e;
  background: rgba(229,184,92,.018);
  font-family: var(--mono);
  font-size: 9px;
}

.case-wide {
  grid-column: 1 / -1;
  min-height: 210px;
}

.case-outcome {
  background:
    radial-gradient(circle at 88% 35%, rgba(229,184,92,.055), transparent 30%),
    rgba(229,184,92,.012);
}

.case-live-link {
  margin-top: 22px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
}

.case-live-link span {
  transition: transform .2s ease;
}

.case-live-link:hover span {
  transform: translate(2px,-2px);
}

@media (max-width: 980px) {
  .case-map-label,
  .case-grid {
    margin-left: 0;
  }
}

@media (max-width: 680px) {
  .case-details {
    grid-column: 1 / -1;
  }

  .case-map-label {
    margin-top: 34px;
  }

  .case-grid {
    grid-template-columns: 1fr;
  }

  .case-block,
  .case-wide {
    grid-column: 1;
    min-height: auto;
    padding: 24px 20px;
  }

  .case-index {
    margin-bottom: 24px;
  }

  .case-block h4 {
    font-size: 19px;
  }
}


/* =========================================================
   ALMAS CASE STUDY — MODAL MODE
   ========================================================= */

.case-actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.case-live-inline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #b8ae9a;
  font-family: var(--mono);
  font-size: 10px;
  transition: color .2s ease, transform .2s ease;
}

.case-live-inline span {
  color: var(--accent);
  transition: transform .2s ease;
}

.case-live-inline:hover {
  color: var(--text);
}

.case-live-inline:hover span {
  transform: translate(2px, -2px);
}

/* Inline case-details no longer used */
.project-case-study .case-details {
  display: none !important;
}

.project-case-study.is-open .case-toggle-icon {
  transform: none !important;
}

/* Modal shell */
.case-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 34px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .32s ease,
    visibility .32s ease;
}

.case-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.case-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 15, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.case-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 68px));
  max-height: min(88vh, 920px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(229,184,92,.18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 8%, rgba(229,184,92,.07), transparent 22rem),
    linear-gradient(160deg, rgba(13,24,39,.98), rgba(6,15,27,.985));
  box-shadow:
    0 32px 120px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.012);
  transform: translateY(18px) scale(.985);
  transition: transform .38s cubic-bezier(.2,.75,.2,1);
}

.case-modal.is-open .case-modal-panel {
  transform: translateY(0) scale(1);
}

.case-modal-topbar {
  min-height: 94px;
  padding: 22px 26px 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid rgba(229,184,92,.11);
  background: rgba(7,17,31,.48);
}

.case-modal-kicker {
  display: block;
  margin-bottom: 7px;
  color: rgba(229,184,92,.52);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .15em;
}

.case-modal-topbar h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -.05em;
}

.case-modal-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229,184,92,.14);
  border-radius: 50%;
  background: rgba(229,184,92,.025);
  color: #d7c9ad;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.case-modal-close:hover {
  transform: rotate(6deg);
  border-color: rgba(229,184,92,.30);
  background: rgba(229,184,92,.055);
}

.case-modal-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 30px 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(229,184,92,.22) transparent;
}

.case-modal-scroll::-webkit-scrollbar {
  width: 8px;
}

.case-modal-scroll::-webkit-scrollbar-thumb {
  background: rgba(229,184,92,.18);
  border-radius: 999px;
}

.case-modal .case-map-label {
  margin: 28px 0 24px 0 !important;
}

.case-modal .case-grid {
  margin-left: 0 !important;
}

.case-modal .case-block {
  background:
    radial-gradient(circle at 100% 0%, rgba(229,184,92,.025), transparent 45%),
    rgba(255,255,255,.005);
}

body.case-modal-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .case-modal {
    padding: 12px;
    align-items: end;
  }

  .case-modal-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 12px 12px;
  }

  .case-modal-topbar {
    min-height: 78px;
    padding: 18px 18px 16px 20px;
  }

  .case-modal-scroll {
    padding: 0 16px 22px;
  }

  .case-modal .case-grid {
    grid-template-columns: 1fr;
  }

  .case-modal .case-block,
  .case-modal .case-wide {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-modal,
  .case-modal-panel,
  .case-modal-close {
    transition: none !important;
  }
}


/* =========================================================
   CASE STUDY CTA ROW — live link alignment + dotted underline
   ========================================================= */

.case-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.case-live-inline {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  min-height: 42px;
  padding: 0 2px 2px;
  color: #b8ae9a;
  line-height: 1;
  transform: translateY(0);
}

.case-live-inline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1px;
  background:
    repeating-linear-gradient(
      to right,
      rgba(229,184,92,.55) 0 3px,
      transparent 3px 7px
    );
  opacity: .75;
  transition: opacity .2s ease, transform .2s ease;
}

.case-live-inline:hover::after {
  opacity: 1;
  transform: translateY(1px);
}

.case-live-inline span {
  transform: translateY(-1px);
}

@media (max-width: 680px) {
  .case-actions {
    gap: 12px !important;
  }

  .case-live-inline {
    min-height: 40px;
    font-size: 9px;
  }
}


/* =========================================================
   CASE CTA BASELINE FIX
   Button and live link share the exact same visual baseline.
   ========================================================= */

.case-actions {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.case-toggle,
.case-live-inline {
  height: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}

.case-live-inline {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  padding: 0 2px !important;
  line-height: 1 !important;
  transform: none !important;
  vertical-align: middle;
  white-space: nowrap;
}

.case-live-inline > span {
  display: inline-block;
  transform: translateY(-1px);
}

/* underline sits under the text row, not the whole CTA area */
.case-live-inline::after {
  left: 0 !important;
  right: 0 !important;
  bottom: 4px !important;
}

@media (max-width: 680px) {
  .case-toggle,
  .case-live-inline {
    height: 40px !important;
    min-height: 40px !important;
  }
}


/* =========================================================
   CASE CTA TRUE BASELINE FIX
   Force text in both actions onto the same visual line.
   ========================================================= */

.case-actions {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.case-toggle,
.case-live-inline {
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.case-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.case-toggle-label,
.case-live-inline {
  line-height: 1 !important;
}

.case-live-inline {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 2px !important;
  top: 0 !important;
  transform: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.case-live-inline > span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

.case-live-inline::after {
  bottom: 3px !important;
}

@media (max-width: 680px) {
  .case-toggle,
  .case-live-inline {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 9px !important;
  }
}

/* Myket case study */
[data-case-study="myket"] .project-side.subtle{display:grid;gap:10px}[data-case-study="myket"] .project-side.subtle .metric{padding:12px 0}#myket-case-modal .case-outcome{background:radial-gradient(circle at 88% 35%,rgba(229,184,92,.045),transparent 30%),rgba(229,184,92,.01)}

/* Production & Infrastructure case study */
[data-case-study="infrastructure"] .project-side.subtle{display:grid;gap:10px}[data-case-study="infrastructure"] .project-side.subtle .metric{padding:12px 0}#infra-case-modal .case-outcome{background:radial-gradient(circle at 88% 35%,rgba(229,184,92,.05),transparent 30%),rgba(229,184,92,.01)}


/* =========================================================
   SELECTED WORK — metric consistency
   ========================================================= */

.projects .project-side .metric strong,
.projects .project-side.subtle .metric strong,
[data-case-study="myket"] .metric strong,
[data-case-study="infrastructure"] .metric strong {
  color: var(--text) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

.projects .project-side .metric span,
.projects .project-side.subtle .metric span,
[data-case-study="myket"] .metric span,
[data-case-study="infrastructure"] .metric span {
  color: var(--faint) !important;
  opacity: 1 !important;
}

.projects .project-side,
.projects .project-side.subtle {
  color: inherit !important;
}

.projects .project-side .metric {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}


/* =========================================================
   HERO — Download CV
   ========================================================= */

.btn-cv {
  border-color: rgba(229,184,92,.18);
  background: rgba(229,184,92,.025);
  color: #d8cfbd;
}

.btn-cv span {
  color: var(--accent);
  font-family: var(--mono);
  transition: transform .22s ease;
}

.btn-cv:hover {
  border-color: rgba(229,184,92,.34);
  background: rgba(229,184,92,.055);
}

.btn-cv:hover span {
  transform: translateY(2px);
}

@media (max-width: 680px) {
  .hero-actions .btn-cv {
    min-width: 0;
  }
}


/* =========================================================
   CURRENT STACK — production-focused polish
   ========================================================= */

.stack-intro {
  max-width: 700px;
  margin: -14px 0 42px 84px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.stack-grid-polished {
  align-items: stretch;
}

.stack-grid-polished .stack-column {
  min-height: 470px;
  position: relative;
}

.stack-note {
  min-height: 48px;
  margin: -12px 0 22px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.65;
}

.stack-grid-polished ul {
  margin-top: 4px;
}

.stack-grid-polished li {
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
}

.stack-grid-polished li > span {
  color: #d8d1c4;
  font-size: 13px;
  font-weight: 600;
}

.stack-grid-polished li > small {
  max-width: 150px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.45;
  text-align: right;
}

.stack-grid-polished .stack-column::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 20px;
  width: 34px;
  height: 34px;
  border-top: 1px solid rgba(229,184,92,.08);
  border-right: 1px solid rgba(229,184,92,.08);
  pointer-events: none;
}

@media (max-width: 980px) {
  .stack-intro {
    margin-left: 0;
  }

  .stack-grid-polished .stack-column {
    min-height: auto;
  }
}

@media (max-width: 680px) {
  .stack-intro {
    margin-bottom: 32px;
    font-size: 14px;
  }

  .stack-grid-polished li {
    min-height: auto;
    align-items: flex-start;
  }

  .stack-grid-polished li > small {
    max-width: 120px;
  }
}

/* Log Pose skill-depth signals */
.signal-legend{margin:-18px 0 26px 84px;display:flex;gap:22px;flex-wrap:wrap}
.signal-legend>div{display:flex;align-items:center;gap:8px;color:var(--faint);font:8px var(--mono);letter-spacing:.04em}
.signal-legend b{font-weight:400}
.log-signal{width:25px;height:14px;display:inline-flex;align-items:flex-end;gap:3px;flex:0 0 auto;transform:skewX(-9deg)}
.log-signal i{display:block;width:5px;border-radius:3px 3px 1px 1px;background:rgba(229,184,92,.10);border:1px solid rgba(229,184,92,.08)}
.log-signal i:nth-child(1){height:6px}.log-signal i:nth-child(2){height:9px}.log-signal i:nth-child(3){height:13px}
.log-signal.level-1 i:nth-child(1),
.log-signal.level-2 i:nth-child(-n+2),
.log-signal.level-3 i{background:linear-gradient(to top,rgba(183,121,49,.72),rgba(240,204,123,.95));border-color:rgba(229,184,92,.36);box-shadow:0 0 7px rgba(229,184,92,.10)}
.skill-name{display:inline-flex!important;align-items:center;gap:10px;color:#d8d1c4!important;font-size:13px!important;font-weight:600!important}
.stack-grid-polished li:hover .log-signal i{filter:brightness(1.15)}
@media(max-width:980px){.signal-legend{margin-left:0}}
@media(max-width:680px){.signal-legend{gap:12px 16px;margin-top:-10px}.signal-legend>div{font-size:7px}.skill-name{gap:8px!important}.log-signal{transform:skewX(-9deg) scale(.9);transform-origin:left center}}

/* =========================================================
   BACKGROUND — compact education / language
   ========================================================= */
.background-section{padding-top:72px!important;padding-bottom:72px!important}
.background-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:22px;overflow:hidden}
.background-card{position:relative;min-height:220px;padding:28px 30px;background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(229,184,92,.012))}
.background-card+ .background-card{border-left:1px solid var(--line)}
.background-kicker{color:var(--accent);font:9px var(--mono);letter-spacing:.13em}
.background-icon{position:absolute;right:26px;top:24px;color:rgba(229,184,92,.18);font:26px var(--mono)}
.background-card h3{margin:48px 0 8px;font-size:24px;letter-spacing:-.04em}
.background-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.background-meta{margin-top:24px;padding-top:14px;border-top:1px solid rgba(229,184,92,.08);display:flex;justify-content:space-between;gap:14px;color:var(--faint);font:9px var(--mono)}
@media(max-width:680px){.background-grid{grid-template-columns:1fr}.background-card+.background-card{border-left:0;border-top:1px solid var(--line)}.background-card{min-height:200px;padding:24px}.background-card h3{margin-top:42px}.background-meta{flex-direction:column;gap:6px}}

/* Education navigation-chart icon */
.background-map-icon{width:46px;height:46px;top:18px!important;right:22px!important;opacity:.72}
.background-map-icon svg{width:100%;height:100%;overflow:visible}
.background-map-icon .map-paper,.background-map-icon .map-fold,.background-map-icon .map-route,.background-map-icon .map-star{fill:none;stroke:rgba(229,184,92,.34);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.background-map-icon .map-fold{stroke:rgba(229,184,92,.16)}
.background-map-icon .map-route{stroke:rgba(216,92,74,.30);stroke-dasharray:2.5 3.5}
.background-map-icon .map-node{fill:rgba(229,184,92,.52)}
.background-map-icon .map-star{stroke:rgba(229,184,92,.46);filter:drop-shadow(0 0 4px rgba(229,184,92,.08))}

/* =========================================================
   CONTACT — FINAL PORT
   ========================================================= */
.contact-final{position:relative;overflow:hidden;padding-bottom:54px!important}
.contact-logline{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);font:8px var(--mono);letter-spacing:.12em}
.contact-status{display:inline-flex;align-items:center;gap:8px;color:#b7ad98}.contact-status i{width:7px;height:7px;border-radius:50%;background:#d85c4a;box-shadow:0 0 0 5px rgba(216,92,74,.07)}
.contact-coordinates{color:var(--faint)}
.contact-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:72px;padding:72px 0 54px;align-items:end}
.contact-kicker{display:block;margin-bottom:20px;color:var(--accent);font:9px var(--mono);letter-spacing:.14em}
.contact-copy h2{margin:0;font-size:clamp(44px,6vw,78px);line-height:.98;letter-spacing:-.065em}.contact-copy h2 em{color:#d7c49a;font-style:normal;font-weight:400}
.contact-copy p{max-width:620px;margin:28px 0 0;color:var(--muted);font-size:15px;line-height:1.75}
.contact-actions-panel{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.012)}
.contact-email-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px}.contact-label{display:block;margin-bottom:7px;color:var(--faint);font:8px var(--mono);letter-spacing:.12em}.contact-email-row a{color:#e5ddcc;font-size:15px}
.copy-email{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid rgba(229,184,92,.16);border-radius:999px;background:rgba(229,184,92,.025);color:#b8ae9b;font:9px var(--mono);cursor:pointer;transition:.2s ease}.copy-email:hover,.copy-email:focus-visible{border-color:rgba(229,184,92,.34);color:#eee3cc;outline:none}.copy-email.is-copied{color:#e5b85c;border-color:rgba(229,184,92,.32)}
.contact-socials{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.contact-socials a{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;color:#aaa291;font:10px var(--mono);transition:.2s ease}.contact-socials a+a{border-left:1px solid var(--line)}.contact-socials a:hover,.contact-socials a:focus-visible{color:#eee3cc;background:rgba(229,184,92,.025);outline:none}.contact-socials i{color:var(--accent);font-style:normal}
.contact-route{position:relative;height:100px;margin-top:4px}.contact-route svg{width:100%;height:100%;overflow:visible}.contact-route-line{fill:none;stroke:rgba(229,184,92,.18);stroke-width:1;stroke-dasharray:3 8}.contact-route-dot{fill:rgba(229,184,92,.35)}.port-wave{fill:none;stroke:rgba(229,184,92,.18);stroke-width:1}.port-core-final{fill:#e5b85c;filter:drop-shadow(0 0 8px rgba(229,184,92,.28))}.wave-a{animation:finalPortPulse 3.6s ease-out infinite}.wave-b{animation:finalPortPulse 3.6s ease-out 1.2s infinite}.contact-route>span{position:absolute;right:6%;bottom:2px;color:rgba(229,184,92,.36);font:7px var(--mono);letter-spacing:.14em}
@keyframes finalPortPulse{0%{opacity:.6;transform:scale(.72)}70%,100%{opacity:0;transform:scale(1.35)}}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px max(24px,calc((100vw - 1180px)/2));border-top:1px solid var(--line);color:var(--faint);font:8px var(--mono);letter-spacing:.04em}.site-footer a{color:#a99f8c}.site-footer a:hover{color:var(--accent)}
@media(max-width:900px){.contact-main{grid-template-columns:1fr;gap:42px}.contact-actions-panel{max-width:560px}.site-footer{flex-wrap:wrap}}
@media(max-width:680px){.contact-logline{gap:14px}.contact-coordinates{display:none}.contact-main{padding:54px 0 36px}.contact-copy h2{font-size:44px}.contact-email-row{align-items:flex-start;flex-direction:column}.contact-socials{grid-template-columns:1fr}.contact-socials a+a{border-left:0;border-top:1px solid var(--line)}.contact-route{height:76px}.site-footer{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.port-wave{animation:none!important}}


/* =========================================================
   CONTACT / FOOTER polish v50
   ========================================================= */

/* Keep "YOU ARE HERE" attached to the actual final port */
.contact-port-label {
  fill: rgba(229,184,92,.42);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
  dominant-baseline: middle;
}

.contact-route > span {
  display: none !important;
}

/* Phone sits naturally between email and socials */
.contact-phone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
}

.contact-phone-row a {
  color: #e5ddcc;
  font-size: 14px;
}

.phone-note {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .05em;
}

/* Footer gets a real wide inner container */
.site-footer {
  padding: 0 !important;
}

.site-footer-inner {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 34px;
  color: var(--faint);
  font: 8px var(--mono);
  letter-spacing: .04em;
}

.site-footer-inner > span:nth-child(2) {
  flex: 1;
  text-align: center;
}

.site-footer-inner a {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .site-footer-inner {
    width: min(100% - 32px, 1320px);
    flex-wrap: wrap;
  }

  .site-footer-inner > span:nth-child(2) {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .contact-phone-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .site-footer-inner {
    width: calc(100% - 28px);
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .site-footer-inner > span:nth-child(2) {
    text-align: left;
  }
}


/* =========================================================
   FULL-PAGE GRAND LINE — SCROLL-AWARE VOYAGE
   ========================================================= */

.page-grandline {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.page-grandline-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: visible;
}

.page-grandline-path,
.page-grandline-shadow {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.page-grandline-shadow {
  stroke: rgba(3,8,15,.75);
  stroke-width: 5;
  opacity: .35;
}

.page-grandline-path {
  stroke: rgba(229,184,92,.18);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 3 9;
}

.page-grandline-port circle {
  fill: rgba(229,184,92,.24);
  stroke: rgba(229,184,92,.18);
  stroke-width: 1;
}

.page-grandline-port text {
  fill: rgba(229,184,92,.34);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
  dominant-baseline: middle;
}

.page-grandline-port.is-active circle {
  fill: #e5b85c;
  stroke: rgba(255,244,214,.35);
  filter: drop-shadow(0 0 7px rgba(229,184,92,.24));
}

.page-grandline-port.is-active text {
  fill: rgba(239,215,159,.72);
}

.page-grandline-marker {
  will-change: transform;
}

.page-grandline-marker .marker-core {
  fill: #e5b85c;
  stroke: rgba(255,244,214,.46);
  stroke-width: 1;
  filter: drop-shadow(0 0 7px rgba(229,184,92,.32));
}

.page-grandline-marker .marker-wave {
  fill: none;
  stroke: rgba(229,184,92,.20);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.page-grandline-marker .marker-wave-a {
  animation: pageGrandlinePulse 3.8s ease-out infinite;
}

.page-grandline-marker .marker-wave-b {
  animation: pageGrandlinePulse 3.8s ease-out 1.25s infinite;
}

.page-grandline-marker .marker-label {
  fill: rgba(229,184,92,.56);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .11em;
}

@keyframes pageGrandlinePulse {
  0% { opacity: .52; transform: scale(.68); }
  72%,100% { opacity: 0; transform: scale(1.45); }
}

/* Keep real content above the decorative voyage layer */
header,
main,
section,
footer,
.site-footer,
.nav,
.hero,
.contact-final {
  position: relative;
  z-index: 1;
}

/* Let the global route hand off into the existing Contact route */
.contact-route::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 50%;
  width: 34px;
  border-top: 1px dashed rgba(229,184,92,.18);
  transform: translateY(-50%);
}

@media (max-width: 980px) {
  .page-grandline-port text,
  .page-grandline-marker .marker-label {
    font-size: 6px;
  }
}

@media (max-width: 760px) {
  .page-grandline {
    display: none !important;
  }

  .contact-route::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-grandline-marker .marker-wave {
    animation: none !important;
  }
}


/* =========================================================
   GRAND LINE — active label polish
   Keep the moving dot on the route; show YOU ARE HERE beside
   the active section name instead.
   ========================================================= */

.page-grandline-marker .marker-label {
  display: none !important;
}

.page-grandline-port text {
  transition: fill .2s ease, opacity .2s ease;
}

.page-grandline-port.is-active text {
  fill: rgba(239,215,159,.84) !important;
}

.page-grandline-port .active-suffix {
  fill: rgba(229,184,92,.52);
  font-size: 6px;
  letter-spacing: .10em;
}


/* =========================================================
   GRAND LINE — mirrored labels
   Section name and YOU ARE HERE live on opposite sides
   of each route node, especially when the path crosses left.
   ========================================================= */

.page-grandline-port .section-name,
.page-grandline-port .active-suffix {
  dominant-baseline: middle;
}

.page-grandline-port .active-suffix {
  fill: rgba(229,184,92,.52);
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: .10em;
}

.page-grandline-port.is-active .active-suffix {
  fill: rgba(229,184,92,.72);
}


/* =========================================================
   GRAND LINE — anchored active marker
   Marker no longer travels continuously with scroll.
   It stays on the active section port.
   ========================================================= */

.page-grandline-marker {
  will-change: auto !important;
}

.page-grandline-port.is-active circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: activePortBreath 2.8s ease-in-out infinite;
}

@keyframes activePortBreath {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .page-grandline-port.is-active circle {
    animation: none !important;
  }
}


/* =========================================================
   GRAND LINE — voyage progress semantics
   Marker travels between islands and reaches each port exactly
   when the viewport reaches that section's anchor.
   ========================================================= */

.page-grandline-marker {
  will-change: transform !important;
}

.page-grandline-port.is-active circle {
  animation: activePortBreath 3.2s ease-in-out infinite;
}


/* =========================================================
   GRAND LINE — marker label + true start alignment
   ========================================================= */

.page-grandline-marker .marker-label {
  display: block !important;
  fill: rgba(229,184,92,.62) !important;
  font-family: var(--mono);
  font-size: 7px !important;
  letter-spacing: .10em;
  dominant-baseline: middle;
}

.page-grandline-port .active-suffix {
  display: none !important;
}

/* Keep marker label readable when route is on the right edge */
.page-grandline-marker {
  overflow: visible;
}


/* v59: minimal Grand Line stability patch */
.page-grandline-marker .marker-label {
  display: block !important;
}


/* =========================================================
   GRAND LINE v60 — marker locked to SVG curve
   ========================================================= */

.page-grandline-marker .marker-core {
  filter:
    drop-shadow(0 0 5px rgba(229,184,92,.34))
    drop-shadow(0 0 10px rgba(229,184,92,.14));
}


/* =========================================================
   GRAND LINE v61 — true section-start islands
   ========================================================= */

.page-grandline-marker .marker-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: rgba(239,215,159,.72) !important;
  font-family: var(--mono);
  font-size: 7px !important;
  letter-spacing: .10em;
  dominant-baseline: middle;
  pointer-events: none;
}

.page-grandline-port .section-name {
  dominant-baseline: middle;
}


/* =========================================================
   GRAND LINE v62 — island visual offset + visible marker label
   ========================================================= */

.page-grandline-marker .marker-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: rgba(239,215,159,.76) !important;
  font-family: var(--mono);
  font-size: 7px !important;
  font-weight: 500;
  letter-spacing: .10em;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(7,17,31,.72);
  stroke-width: 2px;
  stroke-linejoin: round;
  pointer-events: none;
}



/* =========================================================
   GRAND LINE v63 — synchronized island arrival
   ========================================================= */

.page-grandline-marker .marker-label {
  paint-order: stroke;
  stroke: rgba(7,17,31,.82);
  stroke-width: 2.2px;
  stroke-linejoin: round;
}


/* =========================================================
   CONTACT v64 — remove legacy local route
   Global Grand Line now owns the navigation story.
   ========================================================= */

.contact-route,
.contact-route::before {
  display: none !important;
}

.contact-final {
  padding-bottom: 34px !important;
}


/* =========================================================
   FOOTER TAIL — THE VOYAGE CONTINUES
   ========================================================= */

.footer-tail {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-top: 1px solid rgba(229,184,92,.035);
  background:
    radial-gradient(circle at 85% 35%, rgba(229,184,92,.028), transparent 28%),
    linear-gradient(to bottom, rgba(7,17,31,.18), rgba(4,10,18,.72));
}

.footer-tail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.10) 45%,
      rgba(4,10,18,.72) 100%
    );
}

.footer-tail-inner {
  position: relative;
  width: min(1320px, calc(100% - 48px));
  height: 220px;
  margin: 0 auto;
}

.footer-tail-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.footer-tail-path {
  fill: none;
  stroke: rgba(229,184,92,.12);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 3 10;
  vector-effect: non-scaling-stroke;
}

.footer-tail-node {
  fill: rgba(229,184,92,.22);
}

.future-ring {
  fill: none;
  stroke: rgba(229,184,92,.14);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.future-core {
  fill: rgba(229,184,92,.52);
  filter: drop-shadow(0 0 7px rgba(229,184,92,.14));
}

.ring-a {
  animation: footerFuturePulse 4.6s ease-out infinite;
}

.ring-b {
  animation: footerFuturePulse 4.6s ease-out 1.45s infinite;
}

.footer-tail-copy {
  position: absolute;
  z-index: 2;
  right: 7%;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  text-align: right;
}

.footer-tail-copy span {
  color: rgba(229,184,92,.38);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .16em;
}

.footer-tail-copy small {
  color: rgba(167,157,139,.30);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .07em;
}

@keyframes footerFuturePulse {
  0% {
    opacity: .42;
    transform: scale(.72);
  }

  70%,100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@media (max-width: 900px) {
  .footer-tail {
    min-height: 190px;
  }

  .footer-tail-inner {
    width: min(100% - 32px, 1320px);
    height: 190px;
  }

  .footer-tail-copy {
    right: 5%;
    bottom: 22px;
  }
}

@media (max-width: 680px) {
  .footer-tail {
    min-height: 150px;
  }

  .footer-tail-inner {
    width: calc(100% - 24px);
    height: 150px;
  }

  .footer-tail-copy {
    right: 8px;
    bottom: 16px;
  }

  .footer-tail-copy span {
    font-size: 7px;
  }

  .footer-tail-copy small {
    font-size: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .future-ring {
    animation: none !important;
  }
}


/* =========================================================
   v66 — accessibility & interaction safety
   ========================================================= */
.skip-link{
  position:fixed;left:16px;top:12px;z-index:9999;
  transform:translateY(-160%);
  padding:10px 14px;border:1px solid var(--accent);
  border-radius:10px;background:#07111f;color:#f3ead7;
  font:10px var(--mono);
}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible{
  outline:2px solid rgba(229,184,92,.78);
  outline-offset:4px;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* =========================================================
   v66 — mobile hardening
   ========================================================= */
@media(max-width:680px){
  html,body{overflow-x:hidden}
  img,svg{max-width:100%}
  .hero-actions{flex-wrap:wrap}
  .case-actions{align-items:center!important}
  .case-modal-panel{max-width:100%}
  .project-card,.experience-card,.stack-column,.background-card{min-width:0}
  .contact-copy h2{overflow-wrap:anywhere}
}


/* =========================================================
   v68 — MOBILE NAVIGATION / LOG POSE MENU
   ========================================================= */

.mobile-menu-toggle,
.mobile-nav-drawer,
.mobile-grandline {
  display: none;
}

@media (max-width: 760px) {
  /* Hide desktop nav links but keep header identity */
  header nav > a,
  header nav .nav-links,
  .nav-links {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(229,184,92,.16);
    border-radius: 999px;
    background: rgba(229,184,92,.025);
    color: #d8cfbd;
    font: 9px var(--mono);
    cursor: pointer;
  }

  .menu-logpose {
    width: 18px;
    height: 14px;
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
  }

  .menu-logpose i {
    width: 4px;
    border-radius: 2px;
    background: rgba(229,184,92,.82);
  }

  .menu-logpose i:nth-child(1){height:6px}
  .menu-logpose i:nth-child(2){height:10px}
  .menu-logpose i:nth-child(3){height:14px}

  .mobile-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
  }

  .mobile-nav-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3,8,15,.74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mobile-nav-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(86vw, 360px);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 22px 18px 18px;
    border-left: 1px solid rgba(229,184,92,.14);
    background:
      radial-gradient(circle at 100% 0%, rgba(229,184,92,.06), transparent 34%),
      rgba(7,17,31,.985);
    transform: translateX(102%);
    transition: transform .34s cubic-bezier(.2,.75,.2,1);
  }

  .mobile-nav-drawer.is-open .mobile-nav-panel {
    transform: translateX(0);
  }

  .mobile-nav-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }

  .mobile-nav-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font: 8px var(--mono);
    letter-spacing: .14em;
  }

  .mobile-nav-title strong {
    color: #eee4cf;
    font-size: 18px;
    letter-spacing: -.03em;
  }

  .mobile-nav-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(229,184,92,.14);
    border-radius: 50%;
    background: transparent;
    color: #d6ccb8;
    font-size: 23px;
  }

  .mobile-nav-links {
    display: grid;
    margin-top: 14px;
  }

  .mobile-nav-links a {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    border-bottom: 1px solid rgba(229,184,92,.07);
    color: #b8b09f;
  }

  .mobile-nav-links a span {
    color: rgba(229,184,92,.42);
    font: 8px var(--mono);
  }

  .mobile-nav-links a b {
    font-size: 16px;
    font-weight: 500;
  }

  .mobile-nav-links a.is-active b,
  .mobile-nav-links a:hover b {
    color: #f0e5cf;
  }

  .mobile-nav-links a.is-active span {
    color: var(--accent);
  }

  .mobile-nav-status {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--faint);
    font: 8px var(--mono);
  }

  .mobile-nav-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d85c4a;
    box-shadow: 0 0 0 5px rgba(216,92,74,.07);
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  /* Mini Grand Line */
  .mobile-grandline {
    position: fixed;
    z-index: 40;
    right: 3px;
    top: 90px;
    bottom: 18px;
    width: 46px;
    display: block;
    pointer-events: none;
    opacity: .86;
    transition: opacity .25s ease;
  }

  body.mobile-menu-open .mobile-grandline {
    opacity: .16;
  }

  .mobile-grandline-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .mobile-grandline-path {
    fill: none;
    stroke: rgba(229,184,92,.16);
    stroke-width: 1;
    stroke-dasharray: 3 9;
    vector-effect: non-scaling-stroke;
  }

  .mobile-grandline-marker {
    transform: translate(30px, 10px);
    will-change: transform;
  }

  .mobile-marker-ring {
    fill: none;
    stroke: rgba(229,184,92,.20);
    stroke-width: 1;
  }

  .mobile-marker-core {
    fill: #e5b85c;
    filter: drop-shadow(0 0 6px rgba(229,184,92,.28));
  }

  .mobile-grandline-label {
    position: absolute;
    right: 32px;
    top: 0;
    min-width: 92px;
    text-align: right;
    color: rgba(229,184,92,.56);
    font: 7px var(--mono);
    letter-spacing: .10em;
    white-space: nowrap;
    transform: translateY(-50%);
  }

  /* Reserve a little breathing room so the mini route doesn't sit on text */
  main,
  .site-footer,
  .footer-tail {
    padding-right: 10px;
  }
}

@media (max-width: 390px) {
  .mobile-grandline {
    right: -4px;
    opacity: .72;
  }

  .mobile-grandline-label {
    right: 27px;
    font-size: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-drawer,
  .mobile-nav-panel,
  .mobile-grandline {
    transition: none !important;
  }
}


/* =========================================================
   v69 — Mobile Grand Line disabled for now
   ========================================================= */
.mobile-grandline,
.mobile-grandline-svg,
.mobile-grandline-label {
  display: none !important;
}


/* =========================================================
   v69 — Mobile header / drawer visibility fix
   ========================================================= */
@media (max-width: 760px) {
  header {
    position: relative !important;
  }

  header nav {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1301 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(229,184,92,.20) !important;
    border-radius: 999px !important;
    background: rgba(7,17,31,.92) !important;
    color: #e8dfcc !important;
    font: 9px var(--mono) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-nav-drawer {
    display: block !important;
  }
}

/* Drawer must render above every decorative layer */
.mobile-nav-drawer {
  z-index: 5000 !important;
}


/* =========================================================
   v71 — MOBILE HEADER REBUILD
   Stable base: v69
   ========================================================= */

@media (max-width: 760px) {
  /*
    Reset desktop fixed/grid positioning completely.
    The previous version kept left:50% + translateX(-50%)
    while switching to sticky, which pushed the header off-screen.
  */
  .topbar {
    position: sticky !important;
    top: 8px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: calc(100% - 16px) !important;
    min-height: 58px !important;
    margin: 8px auto 0 !important;
    padding: 0 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    z-index: 2000 !important;
  }

  /* Desktop nav + status are replaced by the mobile drawer. */
  .topbar > .nav,
  .topbar > .status-chip {
    display: none !important;
  }

  /* Keep the brand on the left. */
  .topbar > .brand {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 1;
    min-width: 0;
  }

  /* Compact mobile already hides the long brand text at <=680px. */
  .topbar .brand-mark {
    flex: 0 0 auto;
  }

  /*
    Menu belongs on the right side of the header.
    The DRAWER itself opens from the left because the interface is LTR.
  */
  .mobile-menu-toggle {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    order: 2;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;

    min-height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }

  /* English / LTR: drawer enters from the left. */
  .mobile-nav-panel {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-102%) !important;

    border-left: 0 !important;
    border-right: 1px solid rgba(229,184,92,.14) !important;

    direction: ltr !important;
    text-align: left !important;

    background:
      radial-gradient(circle at 0% 0%, rgba(229,184,92,.06), transparent 34%),
      rgba(7,17,31,.985) !important;
  }

  .mobile-nav-drawer.is-open .mobile-nav-panel {
    transform: translateX(0) !important;
  }

  .mobile-nav-head,
  .mobile-nav-links,
  .mobile-nav-links a {
    direction: ltr !important;
    text-align: left !important;
  }

  .mobile-nav-drawer {
    z-index: 5000 !important;
  }
}

@media (max-width: 420px) {
  .topbar {
    top: 6px !important;
    width: calc(100% - 12px) !important;
    margin-top: 6px !important;
    min-height: 54px !important;
    padding: 0 8px !important;
  }

  .mobile-menu-toggle {
    min-height: 36px !important;
    padding: 0 10px !important;
  }

  .mobile-nav-panel {
    width: min(88vw, 340px) !important;
  }
}


/* =========================================================
   v72 — MOBILE HEADER FINAL STRUCTURE
   Fixed header: brand | voyage status | menu
   ========================================================= */

@media (max-width: 760px) {
  .topbar {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;

    width: auto !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 9px !important;

    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;

    z-index: 3000 !important;
  }

  /* Desktop navigation is replaced by drawer. */
  .topbar > .nav {
    display: none !important;
  }

  /* Brand / skull on the left */
  .topbar > .brand {
    display: inline-flex !important;
    grid-column: 1 !important;
    align-items: center !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .topbar .brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  .topbar .brand > span:last-child {
    display: none !important;
  }

  /* Restore voyage availability in the center */
  .topbar > .status-chip {
    display: inline-flex !important;
    grid-column: 2 !important;
    justify-self: center !important;
    align-items: center !important;

    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px 9px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    font-size: 7px !important;
    letter-spacing: .015em !important;
  }

  .topbar > .status-chip .status-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    margin-right: 6px !important;
  }

  /* Menu on the right */
  .mobile-menu-toggle {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    grid-column: 3 !important;
    justify-self: end !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    min-height: 38px !important;
    padding: 0 10px !important;
    margin: 0 !important;

    flex: 0 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-menu-toggle .menu-text {
    font-size: 8px !important;
  }

  /* Fixed header needs real content clearance */
  .hero {
    padding-top: 128px !important;
  }

  /* Drawer still opens from the left in this LTR interface */
  .mobile-nav-panel {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-102%) !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(229,184,92,.14) !important;
  }

  .mobile-nav-drawer.is-open .mobile-nav-panel {
    transform: translateX(0) !important;
  }
}

@media (max-width: 420px) {
  .topbar {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    min-height: 54px !important;
    padding: 0 7px !important;
    gap: 6px !important;
  }

  .topbar .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .topbar > .status-chip {
    padding: 6px 7px !important;
    font-size: 6.5px !important;
  }

  .mobile-menu-toggle {
    min-height: 34px !important;
    padding: 0 8px !important;
  }

  .menu-logpose {
    transform: scale(.88);
    transform-origin: center;
  }

  .hero {
    padding-top: 116px !important;
  }
}


/* =========================================================
   v73 — MOBILE HEADER SINGLE ROW FIX
   ========================================================= */

@media (max-width: 760px) {
  .topbar {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;

    width: auto !important;
    min-height: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;

    transform: none !important;
    z-index: 3000 !important;
  }

  .topbar > .nav {
    display: none !important;
  }

  .topbar > .brand,
  .topbar > .status-chip,
  .mobile-menu-toggle {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Left: compact skull brand */
  .topbar > .brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    order: 1 !important;
  }

  .topbar .brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  .topbar .brand > span:last-child {
    display: none !important;
  }

  /* Center: voyage status */
  .topbar > .status-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 190px !important;
    height: 34px !important;

    padding: 0 10px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    font-size: 6.8px !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    order: 2 !important;
  }

  .topbar > .status-chip .status-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    margin-right: 6px !important;
  }

  /* Right: menu */
  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    height: 36px !important;
    min-height: 36px !important;

    padding: 0 10px !important;
    gap: 6px !important;

    order: 3 !important;
  }

  .mobile-menu-toggle .menu-text {
    font-size: 8px !important;
  }

  .menu-logpose {
    transform: scale(.9);
    transform-origin: center;
  }

  /* Header is fixed; hero needs only one-row clearance */
  .hero {
    padding-top: 102px !important;
  }
}

@media (max-width: 420px) {
  .topbar {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 7px !important;
    gap: 6px !important;
  }

  .topbar .brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .topbar > .status-chip {
    max-width: 160px !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 6.2px !important;
  }

  .mobile-menu-toggle {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
  }

  .mobile-menu-toggle .menu-text {
    font-size: 7.5px !important;
  }

  .hero {
    padding-top: 94px !important;
  }
}

@media (max-width: 360px) {
  .topbar > .status-chip {
    max-width: 135px !important;
    font-size: 5.8px !important;
    padding: 0 6px !important;
  }

  .mobile-menu-toggle {
    padding: 0 7px !important;
  }

  .mobile-menu-toggle .menu-text {
    display: none !important;
  }
}


/* =========================================================
   v74 — MOBILE HEADER BALANCE
   Menu | centered logo | voyage status
   ========================================================= */

@media (max-width: 760px) {
  .topbar {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;

    width: auto !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 8px !important;

    display: grid !important;
    grid-template-columns: minmax(86px,1fr) auto minmax(86px,1fr) !important;
    align-items: center !important;
    gap: 8px !important;

    transform: none !important;
    z-index: 3000 !important;
  }

  .topbar > .nav {
    display: none !important;
  }

  /* Left: Menu */
  .mobile-menu-toggle {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    grid-column: 1 !important;
    justify-self: start !important;
    order: initial !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    gap: 6px !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Center: Brand */
  .topbar > .brand {
    position: static !important;
    grid-column: 2 !important;
    justify-self: center !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    min-width: 0 !important;
    order: initial !important;
  }

  .topbar .brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  .topbar .brand > span:last-child {
    display: none !important;
  }

  /* Right: Voyage status */
  .topbar > .status-chip {
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: 180px !important;
    min-width: 0 !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    font-size: 6.6px !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    order: initial !important;
  }

  .topbar > .status-chip .status-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    margin-right: 6px !important;
  }

  .hero {
    padding-top: 102px !important;
  }
}

@media (max-width: 420px) {
  .topbar {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 7px !important;
    grid-template-columns: minmax(72px,1fr) auto minmax(72px,1fr) !important;
    gap: 6px !important;
  }

  .mobile-menu-toggle {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
  }

  .mobile-menu-toggle .menu-text {
    font-size: 7.5px !important;
  }

  .menu-logpose {
    transform: scale(.88);
    transform-origin: center;
  }

  .topbar .brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .topbar > .status-chip {
    max-width: 152px !important;
    height: 32px !important;
    padding: 0 7px !important;
    font-size: 6px !important;
  }

  .hero {
    padding-top: 94px !important;
  }
}

@media (max-width: 360px) {
  .mobile-menu-toggle .menu-text {
    display: none !important;
  }

  .mobile-menu-toggle {
    width: 34px !important;
    padding: 0 !important;
  }

  .topbar > .status-chip {
    max-width: 132px !important;
    font-size: 5.6px !important;
  }
}


/* =========================================================
   v75 — TABLET / SMALL-LAPTOP NAV MODE
   Hide desktop Grand Line and use drawer navigation up to 980px.
   ========================================================= */

@media (min-width: 761px) and (max-width: 980px) {

  /* Grand Line is temporarily disabled at this size too. */
  .page-grandline {
    display: none !important;
  }

  /* Header becomes compact navigation mode. */
  .topbar {
    position: fixed !important;
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 12px !important;

    display: grid !important;
    grid-template-columns: minmax(120px, 1fr) auto minmax(180px, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;

    transform: none !important;
    z-index: 3000 !important;
  }

  /* Desktop nav links are replaced by drawer navigation. */
  .topbar > .nav {
    display: none !important;
  }

  /* Left: menu */
  .mobile-menu-toggle {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;

    grid-column: 1 !important;
    justify-self: start !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 40px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    gap: 7px !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Center: brand */
  .topbar > .brand {
    display: inline-flex !important;
    position: static !important;
    grid-column: 2 !important;
    justify-self: center !important;
    align-items: center !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .topbar .brand-mark {
    flex: 0 0 auto !important;
  }

  /* Right: availability */
  .topbar > .status-chip {
    display: inline-flex !important;
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;
    margin: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  /* Fixed header clearance */
  .hero {
    padding-top: 118px !important;
  }

  /* Drawer must be available in this breakpoint too. */
  .mobile-nav-drawer {
    display: block !important;
    z-index: 5000 !important;
  }

  .mobile-nav-panel {
    left: 0 !important;
    right: auto !important;
    width: min(420px, 72vw) !important;
    transform: translateX(-102%) !important;

    border-left: 0 !important;
    border-right: 1px solid rgba(229,184,92,.14) !important;

    direction: ltr !important;
    text-align: left !important;

    background:
      radial-gradient(circle at 0% 0%, rgba(229,184,92,.06), transparent 34%),
      rgba(7,17,31,.985) !important;
  }

  .mobile-nav-drawer.is-open .mobile-nav-panel {
    transform: translateX(0) !important;
  }

  .mobile-nav-head,
  .mobile-nav-links,
  .mobile-nav-links a {
    direction: ltr !important;
    text-align: left !important;
  }
}

/* Grand Line remains disabled for every compact/tablet viewport for now. */
@media (max-width: 980px) {
  .page-grandline {
    display: none !important;
  }
}


/* =========================================================
   v76 — COMPACT HEADER: MENU → LOGO → STATUS
   Mobile + tablet use the same reliable flex layout.
   ========================================================= */

@media (max-width: 980px) {
  .topbar {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;

    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    transform: none !important;
    z-index: 3000 !important;
  }

  /* Desktop links switch to drawer navigation. */
  .topbar > .nav {
    display: none !important;
  }

  /* Far left: Menu */
  .mobile-menu-toggle {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;

    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 11px !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    order: initial !important;
  }

  /* Immediately after Menu: logo / brand */
  .topbar > .brand {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;

    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    margin: 0 !important;
    order: initial !important;
  }

  .topbar .brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  /* Right side: availability */
  .topbar > .status-chip {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;

    margin: 0 0 0 auto !important;
    flex: 0 1 auto !important;
    max-width: 245px !important;
    min-width: 0 !important;
    height: 36px !important;

    align-items: center !important;
    justify-content: center !important;
    padding: 0 11px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    order: initial !important;
  }

  .hero {
    padding-top: 106px !important;
  }

  /* Compact mode uses drawer and no Grand Line. */
  .page-grandline {
    display: none !important;
  }

  .mobile-nav-drawer {
    display: block !important;
    z-index: 5000 !important;
  }

  .mobile-nav-panel {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-102%) !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(229,184,92,.14) !important;
    direction: ltr !important;
    text-align: left !important;
  }

  .mobile-nav-drawer.is-open .mobile-nav-panel {
    transform: translateX(0) !important;
  }
}

/* Phones: keep only skull after Menu; long brand name is hidden. */
@media (max-width: 680px) {
  .topbar {
    gap: 8px !important;
  }

  .topbar .brand > span:last-child {
    display: none !important;
  }

  .topbar > .status-chip {
    max-width: 180px !important;
    font-size: 6.5px !important;
  }

  .mobile-menu-toggle {
    padding: 0 9px !important;
  }
}

@media (max-width: 420px) {
  .topbar {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 7px !important;
    gap: 7px !important;
  }

  .topbar .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .mobile-menu-toggle {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
  }

  .topbar > .status-chip {
    max-width: 155px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 6px !important;
  }

  .hero {
    padding-top: 98px !important;
  }
}

@media (max-width: 360px) {
  .mobile-menu-toggle .menu-text {
    display: none !important;
  }

  .mobile-menu-toggle {
    width: 34px !important;
    padding: 0 !important;
  }

  .topbar > .status-chip {
    max-width: 138px !important;
    font-size: 5.7px !important;
  }
}


/* =========================================================
   v77 — COMPACT NAVIGATION SYSTEM
   One complete navigation system for mobile + tablet <= 980px
   ========================================================= */

@media (max-width: 980px) {

  /* ---------- HEADER ---------- */

  .topbar {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    transform: none !important;
    z-index: 3000 !important;
  }

  .topbar > .nav {
    display: none !important;
  }

  .mobile-menu-toggle {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    flex: 0 0 auto !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 11px !important;

    border: 1px solid rgba(229,184,92,.18) !important;
    border-radius: 999px !important;
    background: rgba(229,184,92,.025) !important;
    color: #ded4bf !important;

    font-family: var(--mono) !important;
    font-size: 9px !important;
    line-height: 1 !important;

    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .menu-logpose {
    width: 18px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 2px !important;
  }

  .menu-logpose i {
    display: block !important;
    width: 4px !important;
    border-radius: 2px !important;
    background: rgba(229,184,92,.82) !important;
  }

  .menu-logpose i:nth-child(1){height:6px !important}
  .menu-logpose i:nth-child(2){height:10px !important}
  .menu-logpose i:nth-child(3){height:14px !important}

  .topbar > .brand {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .topbar .brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  .topbar > .status-chip {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 0 auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 245px !important;
    height: 36px !important;
    padding: 0 11px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* ---------- DRAWER SHELL ---------- */

  .mobile-nav-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;

    display: block !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
      opacity .28s ease,
      visibility .28s ease !important;
  }

  .mobile-nav-drawer.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-nav-backdrop {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    background: rgba(3,8,15,.76) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* ---------- DRAWER PANEL ---------- */

  .mobile-nav-panel {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;

    width: min(420px, 82vw) !important;
    height: 100% !important;
    padding: 22px 18px 18px !important;

    display: flex !important;
    flex-direction: column !important;

    border: 0 !important;
    border-right: 1px solid rgba(229,184,92,.14) !important;

    background:
      radial-gradient(circle at 0% 0%, rgba(229,184,92,.065), transparent 34%),
      rgba(7,17,31,.99) !important;

    box-shadow: 22px 0 70px rgba(0,0,0,.34) !important;

    transform: translateX(-102%) !important;
    transition: transform .34s cubic-bezier(.2,.75,.2,1) !important;

    direction: ltr !important;
    text-align: left !important;
    overflow-y: auto !important;
  }

  .mobile-nav-drawer.is-open .mobile-nav-panel {
    transform: translateX(0) !important;
  }

  /* ---------- DRAWER HEADER ---------- */

  .mobile-nav-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;

    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--line) !important;

    direction: ltr !important;
    text-align: left !important;
  }

  .mobile-nav-title {
    min-width: 0 !important;
  }

  .mobile-nav-kicker {
    display: block !important;
    margin-bottom: 6px !important;

    color: var(--accent) !important;
    font: 8px var(--mono) !important;
    letter-spacing: .14em !important;
  }

  .mobile-nav-title strong {
    display: block !important;
    color: #eee4cf !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -.03em !important;
  }

  .mobile-nav-close {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid rgba(229,184,92,.14) !important;
    border-radius: 50% !important;

    background: rgba(229,184,92,.02) !important;
    color: #d6ccb8 !important;

    font-size: 23px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  /* ---------- DRAWER LINKS ---------- */

  .mobile-nav-links {
    display: grid !important;
    margin-top: 14px !important;

    direction: ltr !important;
    text-align: left !important;
  }

  .mobile-nav-links a {
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    align-items: center !important;
    gap: 10px !important;

    min-height: 54px !important;

    border-bottom: 1px solid rgba(229,184,92,.07) !important;

    color: #b8b09f !important;
    text-decoration: none !important;

    direction: ltr !important;
    text-align: left !important;
  }

  .mobile-nav-links a span {
    color: rgba(229,184,92,.42) !important;
    font: 8px var(--mono) !important;
  }

  .mobile-nav-links a b {
    color: inherit !important;
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  .mobile-nav-links a.is-active b,
  .mobile-nav-links a:hover b {
    color: #f0e5cf !important;
  }

  .mobile-nav-links a.is-active span {
    color: var(--accent) !important;
  }

  /* ---------- DRAWER STATUS ---------- */

  .mobile-nav-status {
    margin-top: auto !important;
    padding-top: 18px !important;

    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    color: var(--faint) !important;
    font: 8px var(--mono) !important;
  }

  .mobile-nav-status i {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;

    border-radius: 50% !important;
    background: #d85c4a !important;
    box-shadow: 0 0 0 5px rgba(216,92,74,.07) !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
  }

  .page-grandline {
    display: none !important;
  }

  .hero {
    padding-top: 106px !important;
  }
}

/* ---------- PHONE TUNING ---------- */

@media (max-width: 680px) {
  .topbar {
    gap: 8px !important;
  }

  .topbar .brand > span:last-child {
    display: none !important;
  }

  .topbar > .status-chip {
    max-width: 180px !important;
    font-size: 6.5px !important;
  }

  .mobile-nav-panel {
    width: min(360px, 88vw) !important;
  }
}

@media (max-width: 420px) {
  .topbar {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;

    height: 54px !important;
    min-height: 54px !important;
    padding: 0 7px !important;
    gap: 7px !important;
  }

  .topbar .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .mobile-menu-toggle {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
  }

  .topbar > .status-chip {
    max-width: 155px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 6px !important;
  }

  .hero {
    padding-top: 98px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-drawer,
  .mobile-nav-panel {
    transition: none !important;
  }
}


/* =========================================================
   v78 — EXPERIENCE YEARS ON MOBILE
   Keep the section exactly as-is; only restore the hidden years.
   ========================================================= */

@media (max-width: 680px) {
  .exp-item {
    position: relative !important;
  }

  .exp-year {
    display: inline-flex !important;
    position: absolute !important;

    /* Sit just to the left of the timeline node/line */
    left: -2px !important;
    top: 54px !important;

    align-items: center !important;
    gap: 4px !important;

    padding: 0 !important;
    margin: 0 !important;

    color: rgba(215,199,166,.72) !important;
    font: 8px var(--mono) !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    transform: rotate(-90deg) !important;
    transform-origin: left top !important;

    pointer-events: none !important;
    z-index: 3 !important;
  }

  .exp-year br {
    display: none !important;
  }

  .exp-year small {
    display: inline !important;
    color: var(--faint) !important;
    font-size: 7px !important;
  }

  /* A tiny separator so ranges read as one annotation */
  .exp-year small::before {
    content: "—";
    margin-right: 4px;
    color: rgba(229,184,92,.32);
  }

  .compact .exp-year {
    top: 46px !important;
  }
}


/* =========================================================
   v79 — EXPERIENCE MOBILE YEAR RHYTHM
   Timeline reads vertically as:
   YEAR → DOT → YEAR → DOT
   ========================================================= */

@media (max-width: 680px) {
  /*
    Keep the existing experience cards exactly as they are.
    Only reposition the date annotation onto the timeline itself.
  */
  .exp-item {
    position: relative !important;
  }

  .exp-year {
    display: inline-flex !important;
    position: absolute !important;

    /*
      Put the year immediately BEFORE the node on the vertical line.
      Since the text is rotated, the visual rhythm along the line becomes:
      date — node — date — node
    */
    left: -7px !important;
    top: 6px !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(215,199,166,.72) !important;
    font: 8px var(--mono) !important;
    letter-spacing: .07em !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    transform: rotate(-90deg) translateX(-100%) !important;
    transform-origin: left top !important;

    pointer-events: none !important;
    z-index: 4 !important;
  }

  .exp-year br {
    display: none !important;
  }

  .exp-year small {
    display: inline !important;
    color: var(--faint) !important;
    font-size: 7px !important;
  }

  .exp-year small::before {
    content: "—";
    margin: 0 4px 0 3px;
    color: rgba(229,184,92,.32);
  }

  /*
    Compact / older roles use the same sequence.
    No extra top offset so each label belongs to the node below it.
  */
  .compact .exp-year {
    top: 6px !important;
  }
}


/* =========================================================
   v82 — EXPERIENCE MOBILE YEAR BESIDE TIMELINE SEGMENT
   Year sits vertically just to the RIGHT of the line,
   starting below each node — matching the marked area.
   ========================================================= */

@media (max-width: 680px) {
  .exp-item {
    position: relative !important;
  }

  .exp-year {
    display: inline-flex !important;
    position: absolute !important;

    /*
      Timeline axis is around x = 17px.
      Put the label a few pixels to the RIGHT of the line,
      and start it below the node.
    */
    left: 29px !important;
    top: 42px !important;

    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;

    width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;

    color: rgba(215,199,166,.68) !important;
    background: transparent !important;

    font: 7px var(--mono) !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    /*
      Vertical reading down the timeline segment.
      Rotate clockwise so the label visually follows the line.
    */
    transform: rotate(90deg) !important;
    transform-origin: left top !important;

    text-align: left !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  .exp-year br {
    display: none !important;
  }

  .exp-year small {
    display: inline !important;
    color: rgba(167,157,139,.58) !important;
    font-size: 6.5px !important;
  }

  .exp-year small::before {
    content: "—";
    margin: 0 3px;
    color: rgba(229,184,92,.32);
  }

  .compact .exp-year {
    left: 29px !important;
    top: 42px !important;
  }

  /* Restore v79 spacing behavior */
  .exp-port,
  .compact .exp-port {
    margin-top: 0 !important;
  }
}


/* =========================================================
   v87 — MOBILE HERO CTA REFINEMENT
   Primary CTA stays strong; secondary actions become text links.
   Desktop/tablet desktop-style buttons remain unchanged.
   ========================================================= */

@media (max-width: 680px) {
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
    align-items: center !important;
    margin-top: 30px !important;
  }

  /* Primary action: one clear full-width CTA */
  .hero-actions .btn-primary,
  .hero-actions a[href="#work"] {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* Secondary actions: lightweight text links */
  .hero-actions .btn-cv,
  .hero-actions a[href="#about"] {
    position: relative !important;

    width: auto !important;
    min-height: auto !important;
    padding: 8px 0 10px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #cfc5b4 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
  }

  .hero-actions .btn-cv {
    justify-self: start !important;
  }

  .hero-actions a[href="#about"] {
    justify-self: end !important;
  }

  .hero-actions .btn-cv::after,
  .hero-actions a[href="#about"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 1px;

    background:
      repeating-linear-gradient(
        to right,
        rgba(229,184,92,.42) 0 3px,
        transparent 3px 7px
      );
  }

  .hero-actions .btn-cv:hover,
  .hero-actions .btn-cv:focus-visible,
  .hero-actions a[href="#about"]:hover,
  .hero-actions a[href="#about"]:focus-visible {
    color: #f0e4ca !important;
    background: transparent !important;
  }
}

@media (max-width: 390px) {
  .hero-actions {
    gap: 12px 14px !important;
  }

  .hero-actions .btn-primary,
  .hero-actions a[href="#work"] {
    min-height: 52px !important;
    font-size: 14px !important;
  }

  .hero-actions .btn-cv,
  .hero-actions a[href="#about"] {
    font-size: 10px !important;
  }
}


/* =========================================================
   v88 — MOBILE HERO CTA GRID
   Keep all 3 original button styles.
   Layout:
   [ View selected work      ]
   [ Download CV ][ More about me ]
   ========================================================= */

@media (max-width: 680px) {
  .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 30px !important;
  }

  /* Primary button spans the full row */
  .hero-actions .btn-primary {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Restore the original button appearance for both secondary actions */
  .hero-actions .btn-cv,
  .hero-actions .btn-ghost {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border-radius: 16px !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
  }

  /* Explicitly remove the dotted underline introduced in v87 */
  .hero-actions .btn-cv::after,
  .hero-actions .btn-ghost::after {
    content: none !important;
    display: none !important;
  }

  /* Re-enable original framed button visuals */
  .hero-actions .btn-cv {
    border: 1px solid rgba(229,184,92,.18) !important;
    background: rgba(229,184,92,.025) !important;
    color: #d8cfbd !important;
    box-shadow: none !important;
  }

  .hero-actions .btn-ghost {
    border: 1px solid rgba(229,184,92,.18) !important;
    background: rgba(255,255,255,.012) !important;
    color: #d8cfbd !important;
    box-shadow: none !important;
  }

  .hero-actions .btn-cv:hover,
  .hero-actions .btn-cv:focus-visible,
  .hero-actions .btn-ghost:hover,
  .hero-actions .btn-ghost:focus-visible {
    color: #f0e4ca !important;
  }
}

@media (max-width: 390px) {
  .hero-actions {
    gap: 10px !important;
  }

  .hero-actions .btn-cv,
  .hero-actions .btn-ghost {
    min-height: 50px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   v89 — MOBILE "MORE ABOUT ME" BUTTON STYLE FIX
   Match the secondary CTA treatment used by Download CV.
   ========================================================= */

@media (max-width: 680px) {
  .hero-actions .btn-ghost,
  .hero-actions a[href="#about"] {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border: 1px solid rgba(229,184,92,.18) !important;
    border-radius: 16px !important;

    background: rgba(229,184,92,.025) !important;
    color: #d8cfbd !important;
    box-shadow: none !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

  .hero-actions .btn-ghost::after,
  .hero-actions a[href="#about"]::after {
    content: none !important;
    display: none !important;
  }

  .hero-actions .btn-ghost:hover,
  .hero-actions .btn-ghost:focus-visible,
  .hero-actions a[href="#about"]:hover,
  .hero-actions a[href="#about"]:focus-visible {
    color: #f0e4ca !important;
    border-color: rgba(229,184,92,.30) !important;
    background: rgba(229,184,92,.045) !important;
  }
}

@media (max-width: 390px) {
  .hero-actions .btn-ghost,
  .hero-actions a[href="#about"] {
    min-height: 50px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   v90 — MOBILE HERO CTA ALTERNATIVE
   [ View selected work ]
   [ More about me     ]
       Download CV ↗
   ========================================================= */

@media (max-width: 680px) {
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 30px !important;
  }

  /* Primary button full width */
  .hero-actions .btn-primary,
  .hero-actions a[href="#work"] {
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
  }

  /* More about me keeps full secondary button styling */
  .hero-actions .btn-ghost,
  .hero-actions a[href="#about"] {
    grid-column: 1 !important;

    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border: 1px solid rgba(229,184,92,.18) !important;
    border-radius: 16px !important;

    background: rgba(229,184,92,.025) !important;
    color: #d8cfbd !important;
    box-shadow: none !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  .hero-actions .btn-ghost::after,
  .hero-actions a[href="#about"]::after {
    content: none !important;
    display: none !important;
  }

  /* Download CV becomes a lightweight link beneath both buttons */
  .hero-actions .btn-cv {
    grid-column: 1 !important;
    justify-self: start !important;

    position: relative !important;
    width: auto !important;
    min-height: auto !important;

    margin: 2px 0 0 !important;
    padding: 7px 0 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #cfc5b4 !important;
    box-shadow: none !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

  .hero-actions .btn-cv::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 1px;

    display: block !important;

    background:
      repeating-linear-gradient(
        to right,
        rgba(229,184,92,.42) 0 3px,
        transparent 3px 7px
      );
  }

  .hero-actions .btn-cv:hover,
  .hero-actions .btn-cv:focus-visible {
    color: #f0e4ca !important;
    background: transparent !important;
  }
}

@media (max-width: 390px) {
  .hero-actions {
    gap: 10px !important;
  }

  .hero-actions .btn-primary,
  .hero-actions a[href="#work"] {
    min-height: 52px !important;
  }

  .hero-actions .btn-ghost,
  .hero-actions a[href="#about"] {
    min-height: 50px !important;
    font-size: 11px !important;
  }

  .hero-actions .btn-cv {
    font-size: 10px !important;
  }
}


/* =========================================================
   v91 — MOBILE HERO CTA ALIGNMENT
   Nothing in the Hero CTA group is centered.
   Order:
   [ View selected work ]
   [ More about me      ]
   Download CV ↗
   ========================================================= */

@media (max-width: 680px) {
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Both full-width buttons use left-aligned labels */
  .hero-actions .btn-primary,
  .hero-actions a[href="#work"],
  .hero-actions .btn-ghost,
  .hero-actions a[href="#about"] {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Primary first */
  .hero-actions .btn-primary,
  .hero-actions a[href="#work"] {
    order: 1 !important;
  }

  /* More about me second */
  .hero-actions .btn-ghost,
  .hero-actions a[href="#about"] {
    order: 2 !important;
  }

  /* Download CV is the final lightweight action under both buttons */
  .hero-actions .btn-cv {
    order: 3 !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin-top: 2px !important;
  }
}


/* =========================================================
   v92 — MOBILE DOWNLOAD CV LINK POLISH
   Align with the two buttons above and make the link state clear.
   ========================================================= */

@media (max-width: 680px) {
  .hero-actions .btn-cv {
    order: 3 !important;
    justify-self: stretch !important;

    position: relative !important;

    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 11px 18px 13px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #cfc5b4 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-align: left !important;
    text-decoration: none !important;
  }

  /* Same left edge as button labels above */
  .hero-actions .btn-cv {
    padding-left: 18px !important;
  }

  /* Clear "this is a link" affordance */
  .hero-actions .btn-cv::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 6px !important;

    height: 1px !important;

    background:
      repeating-linear-gradient(
        to right,
        rgba(229,184,92,.42) 0 4px,
        transparent 4px 8px
      ) !important;
  }

  .hero-actions .btn-cv:hover,
  .hero-actions .btn-cv:focus-visible {
    color: #f0e4ca !important;
    background: transparent !important;
  }

  .hero-actions .btn-cv:hover::after,
  .hero-actions .btn-cv:focus-visible::after {
    background:
      repeating-linear-gradient(
        to right,
        rgba(229,184,92,.72) 0 4px,
        transparent 4px 8px
      ) !important;
  }
}

@media (max-width: 390px) {
  .hero-actions .btn-cv {
    min-height: 40px !important;
    padding: 10px 16px 12px !important;
    font-size: 10px !important;
  }

  .hero-actions .btn-cv::after {
    left: 16px !important;
    right: 16px !important;
  }
}


/* =========================================================
   v93 — CV ALWAYS AVAILABLE IN HEADER
   Download CV replaces "Open for the next voyage" in every viewport.
   Availability remains inside the navigation drawer.
   ========================================================= */

.header-cv-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 38px;
  padding: 0 14px;

  border: 1px solid rgba(229,184,92,.18);
  border-radius: 999px;

  background: rgba(229,184,92,.025);
  color: #d8cfbd;

  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.header-cv-link span {
  color: rgba(229,184,92,.78);
  font-size: 10px;
}

.header-cv-link:hover,
.header-cv-link:focus-visible {
  color: #f0e4ca;
  border-color: rgba(229,184,92,.34);
  background: rgba(229,184,92,.05);
}

/* Desktop: push CV to the far right, where availability used to live. */
@media (min-width: 981px) {
  .topbar > .header-cv-link {
    margin-left: auto;
  }
}


/* Compact navigation: Menu → Brand → CV */
@media (max-width: 980px) {
  .topbar > .header-cv-link {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: inline-flex !important;
    margin: 0 0 0 auto !important;

    flex: 0 0 auto !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 11px !important;

    font-size: 8px !important;
  }
}

@media (max-width: 420px) {
  .topbar > .header-cv-link {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 9px !important;
    font-size: 7px !important;
    gap: 5px !important;
  }
}

/* Hero now intentionally has only two actions. */
@media (max-width: 680px) {
  .hero-actions {
    grid-template-columns: 1fr !important;
  }

  .hero-actions .btn-primary,
  .hero-actions a[href="#work"],
  .hero-actions .btn-ghost,
  .hero-actions a[href="#about"] {
    width: 100% !important;
  }
}


/* =========================================================
   v94 — CV MOVED INTO NAVIGATION
   Header status restored; CV lives in nav/drawer.
   ========================================================= */

/* Desktop nav CV link */
.nav-cv-link {
  color: #d8cfbd !important;
}

.nav-cv-link::after {
  content: none !important;
}

.nav-cv-link:hover,
.nav-cv-link:focus-visible {
  color: #f0e4ca !important;
}

/* Drawer CV action */
.mobile-nav-cv {
  margin-top: 18px;
  min-height: 48px;
  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border: 1px solid rgba(229,184,92,.16);
  border-radius: 14px;

  background: rgba(229,184,92,.025);
  color: #d8cfbd;

  font-family: var(--mono);
  font-size: 9px;
  text-decoration: none;

  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
}

.mobile-nav-cv i {
  color: rgba(229,184,92,.78);
  font-style: normal;
}

.mobile-nav-cv:hover,
.mobile-nav-cv:focus-visible {
  color: #f0e4ca;
  border-color: rgba(229,184,92,.32);
  background: rgba(229,184,92,.05);
}

/* Keep status beneath the CV action */
.mobile-nav-status {
  margin-top: 12px !important;
}

/* Compact header goes back to Menu → Brand → Status */
@media (max-width: 980px) {
  .topbar > .status-chip {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;

    margin: 0 0 0 auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 245px !important;
    height: 36px !important;
    padding: 0 11px !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .topbar > .status-chip .status-dot {
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    margin-right: 6px !important;
  }
}

@media (max-width: 680px) {
  .topbar > .status-chip {
    max-width: 180px !important;
    font-size: 6.5px !important;
  }
}

@media (max-width: 420px) {
  .topbar > .status-chip {
    max-width: 155px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 6px !important;
  }

  .mobile-nav-cv {
    min-height: 46px;
    font-size: 8px;
  }
}

/* Any old header-CV styling is now irrelevant */
.header-cv-link {
  display: none !important;
}


/* =========================================================
   v97 — TYPOGRAPHY PASS
   Goal: calmer hierarchy, less cramped tracking,
   cleaner body rhythm, better mobile readability.
   Layout/animation behavior intentionally unchanged.
   ========================================================= */

:root {
  --type-body: 16px;
  --type-small: 13px;
  --type-mono: 9px;
  --type-card-title: 26px;
  --type-section-title: clamp(34px, 4.4vw, 58px);
  --type-hero: clamp(58px, 8.2vw, 116px);
}

/* ---------- GLOBAL BODY RHYTHM ---------- */

body {
  font-size: var(--type-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p,
li {
  line-height: 1.72;
}

p {
  letter-spacing: -0.006em;
}

/* ---------- HERO ---------- */

.hero-copy h1,
.hero h1 {
  font-size: var(--type-hero) !important;
  line-height: .96 !important;
  letter-spacing: -0.055em !important;
}

.hero-copy p,
.hero .hero-description,
.hero > div p {
  font-size: 16px !important;
  line-height: 1.72 !important;
  letter-spacing: -0.008em !important;
}

.hero-kicker,
.eyebrow,
.hero .mono,
.hero [class*="kicker"] {
  font-size: 9px !important;
  letter-spacing: .11em !important;
  line-height: 1.4 !important;
}

/* ---------- SECTION HEADINGS ---------- */

.section-heading h2 {
  font-size: var(--type-section-title) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.042em !important;
}

.section-index {
  font-size: 9px !important;
  letter-spacing: .10em !important;
}

/* ---------- CARD TITLES ---------- */

.project-card h3,
.stack-column h3,
.background-card h3,
.case-block h4,
.exp-role,
.experience-card h3,
.contact-copy h2 {
  letter-spacing: -0.03em !important;
}

.project-card h3,
.stack-column h3,
.background-card h3 {
  font-size: var(--type-card-title) !important;
  line-height: 1.12 !important;
}

.exp-role,
.experience-card h3 {
  line-height: 1.12 !important;
}

/* ---------- BODY / SECONDARY COPY ---------- */

.project-content > p,
.stack-note,
.background-card p,
.case-block p,
.case-points li,
.exp-body,
.exp-body p,
.contact-copy p,
.stack-intro p {
  font-size: 15px !important;
  line-height: 1.72 !important;
  letter-spacing: -0.006em !important;
}

/* ---------- MONO LABELS ---------- */

.project-type,
.stack-kicker,
.background-kicker,
.case-index,
.case-modal-kicker,
.contact-kicker,
.contact-label,
.contact-coordinates,
.contact-status,
.metric span,
.project-tags span,
.case-system-list span,
.mobile-nav-kicker,
.footer-tail-copy span,
.footer-tail-copy small {
  font-size: var(--type-mono) !important;
  letter-spacing: .075em !important;
  line-height: 1.4 !important;
}

/* Small tech chips need slightly tighter treatment */
.project-tags span,
.case-system-list span {
  letter-spacing: .035em !important;
}

/* ---------- BUTTONS / NAV ---------- */

.btn,
.case-toggle,
.header-cv-link,
.nav a,
.mobile-menu-toggle,
.mobile-nav-links a,
.mobile-nav-cv {
  letter-spacing: .01em !important;
}

.btn {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.nav a {
  font-size: 10px !important;
}

/* ---------- EXPERIENCE ---------- */

.exp-company {
  font-size: 12px !important;
  letter-spacing: .015em !important;
}

.exp-year {
  letter-spacing: .04em !important;
}

/* ---------- CONTACT ---------- */

.contact-copy h2 {
  font-size: clamp(46px, 6vw, 78px) !important;
  line-height: .98 !important;
}

.contact-email-row a,
.contact-phone-row a {
  font-size: 15px !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 680px) {
  :root {
    --type-body: 15px;
    --type-small: 12px;
    --type-mono: 8px;
    --type-card-title: 23px;
    --type-section-title: clamp(31px, 10vw, 42px);
    --type-hero: clamp(46px, 14vw, 68px);
  }

  body {
    font-size: var(--type-body);
    line-height: 1.68;
  }

  .hero-copy h1,
  .hero h1 {
    line-height: .98 !important;
    letter-spacing: -0.048em !important;
  }

  .hero-copy p,
  .hero .hero-description,
  .hero > div p {
    font-size: 15px !important;
    line-height: 1.68 !important;
  }

  .section-heading h2 {
    line-height: 1.04 !important;
    letter-spacing: -0.036em !important;
  }

  .project-card h3,
  .stack-column h3,
  .background-card h3 {
    line-height: 1.14 !important;
  }

  .project-content > p,
  .stack-note,
  .background-card p,
  .case-block p,
  .case-points li,
  .exp-body,
  .exp-body p,
  .contact-copy p,
  .stack-intro p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .hero-kicker,
  .eyebrow,
  .hero .mono,
  .project-type,
  .stack-kicker,
  .background-kicker,
  .case-index,
  .contact-kicker {
    letter-spacing: .08em !important;
  }

  .btn {
    font-size: 12px !important;
  }

  .contact-copy h2 {
    font-size: clamp(40px, 12vw, 52px) !important;
    line-height: 1 !important;
  }
}

/* ---------- LANDSCAPE / SHORT VIEWPORT ---------- */

@media (max-height: 650px) and (min-width: 600px) {
  .hero-copy h1,
  .hero h1 {
    font-size: clamp(44px, 7vw, 72px) !important;
    line-height: .98 !important;
  }

  .hero-copy p,
  .hero .hero-description {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }
}


/* =========================================================
   v98 — FONT SYSTEM
   Display: Bricolage Grotesque
   Body/UI: Manrope
   Technical/Log Pose: IBM Plex Mono
   ========================================================= */

:root {
  --font-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --font-body: "Manrope", Inter, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Keep legacy variable names wired to the new system */
  --sans: var(--font-body);
  --display: var(--font-display);
  --mono: var(--font-mono);
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}

body {
  font-weight: 400;
}

/* ---------- DISPLAY / EDITORIAL ---------- */

.hero h1,
.hero-copy h1,
.section-heading h2,
.project-card h3,
.stack-column h3,
.background-card h3,
.contact-copy h2,
.case-modal-topbar h2,
.case-block h4,
.exp-role,
.experience-card h3 {
  font-family: var(--font-display) !important;
}

.hero h1,
.hero-copy h1 {
  font-weight: 650 !important;
}

.section-heading h2 {
  font-weight: 620 !important;
}

.project-card h3,
.stack-column h3,
.background-card h3,
.exp-role,
.case-block h4 {
  font-weight: 600 !important;
}

/* ---------- BODY / INTERFACE ---------- */

p,
li,
.btn,
.copy-email,
.contact-email-row a,
.contact-phone-row a,
.mobile-nav-title strong,
.mobile-nav-links a b {
  font-family: var(--font-body) !important;
}

/* ---------- TECHNICAL / LOG POSE ---------- */

.hero-kicker,
.eyebrow,
.section-index,
.project-type,
.project-tags span,
.stack-kicker,
.stack-grid-polished li > small,
.signal-legend,
.background-kicker,
.background-meta,
.case-index,
.case-modal-kicker,
.case-map-label,
.case-system-list span,
.contact-kicker,
.contact-label,
.contact-status,
.contact-coordinates,
.contact-socials a,
.project-number,
.exp-company,
.exp-year,
.metric span,
.nav a,
.mobile-menu-toggle,
.mobile-nav-kicker,
.mobile-nav-links a span,
.mobile-nav-status,
.mobile-nav-cv,
.site-footer,
.footer-tail-copy,
.log-signal {
  font-family: var(--font-mono) !important;
}

/* Bricolage benefits from slightly calmer tracking than the old display face */
.hero h1,
.hero-copy h1 {
  letter-spacing: -0.045em !important;
}

.section-heading h2 {
  letter-spacing: -0.035em !important;
}

.project-card h3,
.stack-column h3,
.background-card h3,
.exp-role,
.case-block h4 {
  letter-spacing: -0.022em !important;
}

/* Mono stays technical without feeling crushed */
.hero-kicker,
.eyebrow,
.section-index,
.project-type,
.stack-kicker,
.background-kicker,
.case-index,
.case-modal-kicker,
.contact-kicker {
  letter-spacing: .065em !important;
}

/* ---------- MOBILE FONT TUNING ---------- */

@media (max-width: 680px) {
  .hero h1,
  .hero-copy h1 {
    letter-spacing: -0.038em !important;
  }

  .section-heading h2 {
    letter-spacing: -0.03em !important;
  }

  .project-card h3,
  .stack-column h3,
  .background-card h3,
  .exp-role {
    letter-spacing: -0.018em !important;
  }
}


/* =========================================================
   v100 — SAFE SINGLE-LINE LABELS
   Based on v98. Prevent awkward wraps WITHOUT horizontal overflow.
   ========================================================= */

/* Never let decorative/technical labels enlarge the document width */
.hero-kicker,
.eyebrow,
.project-type,
.stack-kicker,
.background-kicker,
.case-index,
.case-modal-kicker,
.contact-kicker,
.exp-company {
  max-width: 100% !important;
  min-width: 0 !important;

  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Hero itself must always stay inside viewport */
.hero,
.hero-inner,
.hero-copy,
.hero-copy h1,
.hero h1,
.hero-copy p {
  max-width: 100% !important;
  min-width: 0 !important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Compact widths: shrink only the mono labels enough to stay on one line */
@media (max-width: 980px) {
  .hero-kicker,
  .eyebrow {
    font-size: clamp(6.2px, 1.05vw, 8px) !important;
    letter-spacing: .04em !important;
  }

  .project-type,
  .stack-kicker,
  .background-kicker,
  .case-index,
  .case-modal-kicker,
  .contact-kicker,
  .exp-company {
    font-size: clamp(6.2px, 1vw, 8px) !important;
    letter-spacing: .038em !important;
  }
}

/* Phone portrait */
@media (max-width: 680px) {
  .hero-kicker,
  .eyebrow {
    font-size: 7px !important;
    letter-spacing: .035em !important;
  }

  .project-type,
  .stack-kicker,
  .background-kicker,
  .case-index,
  .case-modal-kicker,
  .contact-kicker,
  .exp-company {
    font-size: 6.8px !important;
    letter-spacing: .032em !important;
  }

  /* Restore safe Hero wrapping from v98 */
  .hero-copy h1,
  .hero h1 {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    max-width: 100% !important;
  }

  .hero-copy p,
  .hero .hero-description {
    max-width: 100% !important;
  }
}

/* Very narrow phones: keep phrase on one line by reducing only the label */
@media (max-width: 390px) {
  .hero-kicker,
  .eyebrow {
    font-size: 6.2px !important;
    letter-spacing: .025em !important;
  }

  .project-type,
  .stack-kicker,
  .background-kicker,
  .case-index,
  .case-modal-kicker,
  .contact-kicker,
  .exp-company {
    font-size: 6px !important;
    letter-spacing: .025em !important;
  }
}


/* =========================================================
   v101 — HERO EYEBROW CONTROLLED WRAP
   Allow clean wrapping by phrase instead of overflowing viewport.
   ========================================================= */

.hero-eyebrow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 .65em !important;

  max-width: 100% !important;
  min-width: 0 !important;

  white-space: normal !important;
  overflow: visible !important;
}

.hero-eyebrow > span {
  display: inline-block !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* Revert v100's nowrap specifically for the Hero eyebrow */
.eyebrow.hero-eyebrow {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Keep the label readable rather than shrinking it into dust */
@media (max-width: 680px) {
  .hero-eyebrow {
    font-size: 8px !important;
    line-height: 1.65 !important;
    letter-spacing: .045em !important;
    row-gap: .15em !important;
  }
}

@media (max-width: 390px) {
  .hero-eyebrow {
    font-size: 7.2px !important;
    letter-spacing: .04em !important;
  }
}


/* =========================================================
   v102 — DESKTOP TYPOGRAPHY PASS
   Desktop only (>= 981px). Responsive layout, tablet/mobile
   typography, navigation, animation and Grand Line are unchanged.
   ========================================================= */

@media (min-width: 981px) {
  :root {
    --type-mono: 10px;
    --type-card-title: 25px;
    --type-section-title: clamp(40px, 3.35vw, 50px);
    --type-hero: clamp(64px, 5.2vw, 80px);
  }

  /* Hero: editorial, but no longer oversized or over-compressed. */
  .hero-copy h1,
  .hero h1 {
    font-size: var(--type-hero) !important;
    line-height: .99 !important;
    letter-spacing: -.032em !important;
  }

  .hero-eyebrow,
  .hero-kicker,
  .eyebrow.hero-eyebrow {
    font-size: 10px !important;
    line-height: 1.5 !important;
    letter-spacing: .075em !important;
  }

  .hero-copy > p:not(.eyebrow),
  .hero-copy .hero-description,
  .hero .hero-description {
    font-size: 16px !important;
    line-height: 1.68 !important;
    letter-spacing: -.004em !important;
  }

  /* Section hierarchy. */
  .section-heading h2 {
    font-size: var(--type-section-title) !important;
    line-height: 1.04 !important;
    letter-spacing: -.026em !important;
  }

  .section-heading > p,
  .section-intro,
  .about-copy p,
  .stack-intro p,
  .contact-copy p {
    font-size: 16px !important;
    line-height: 1.72 !important;
    letter-spacing: -.003em !important;
  }

  /* Cards and experience roles share one calm display rhythm. */
  .project-card h3,
  .stack-column h3,
  .background-card h3,
  .case-block h4,
  .exp-card h3,
  .exp-role,
  .experience-card h3 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -.016em !important;
  }

  .project-card h3,
  .stack-column h3,
  .background-card h3 {
    font-size: var(--type-card-title) !important;
    line-height: 1.16 !important;
  }

  .exp-card h3,
  .exp-role,
  .experience-card h3 {
    font-size: 26px !important;
    line-height: 1.16 !important;
  }

  .exp-item.compact .exp-card h3 {
    font-size: 22px !important;
    line-height: 1.18 !important;
  }

  .case-block h4 {
    line-height: 1.18 !important;
  }

  .project-content > p:not(.project-type),
  .stack-note,
  .background-card p,
  .case-block p,
  .case-points li,
  .exp-body,
  .exp-body p,
  .exp-card > p,
  .contact-copy p,
  .stack-intro p {
    font-size: 15px !important;
    line-height: 1.72 !important;
    letter-spacing: -.003em !important;
  }

  /* Technical labels: legible, still compact and navigational. */
  .section-index,
  .project-type,
  .project-content > p.project-type,
  .stack-kicker,
  .background-kicker,
  .case-index,
  .case-modal-kicker,
  .contact-kicker,
  .contact-label,
  .contact-coordinates,
  .contact-status,
  .metric span,
  .exp-company,
  .exp-year,
  .project-number,
  .project-tags span,
  .case-system-list span {
    font-size: var(--type-mono) !important;
    line-height: 1.45 !important;
    letter-spacing: .055em !important;
  }

  .project-tags span,
  .case-system-list span {
    letter-spacing: .025em !important;
  }

  /* UI copy should read clearly without competing with headings. */
  .btn,
  .case-toggle,
  .copy-email {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: .005em !important;
  }

  .nav a,
  .nav-cv-link,
  .header-cv-link {
    font-size: clamp(9.5px, .75vw, 11px) !important;
    line-height: 1.35 !important;
    letter-spacing: .025em !important;
  }
}


/* =========================================================
   v103 — DESKTOP NAV + GRAND LINE LEGIBILITY
   Scoped to desktop. No layout, route or animation changes.
   ========================================================= */

@media (min-width: 981px) {
  /* Primary navigation reads as interface copy, not tiny metadata. */
  .topbar .nav a,
  .topbar .nav-cv-link {
    font-family: var(--font-body) !important;
    font-size: clamp(11px, .7vw, 13px) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: .005em !important;
    color: rgba(247, 239, 216, .78) !important;
  }

  .topbar .nav a:hover,
  .topbar .nav a:focus-visible,
  .topbar .nav a.is-active {
    color: var(--text) !important;
  }

  /* Grand Line islands remain subtle, but readable at desktop distance. */
  .page-grandline-port circle {
    r: 5px !important;
    fill: rgba(229, 184, 92, .34) !important;
    stroke: rgba(255, 235, 189, .34) !important;
    stroke-width: 1.2px !important;
    filter: drop-shadow(0 0 5px rgba(229, 184, 92, .16));
  }

  .page-grandline-port:last-child circle {
    r: 6px !important;
  }

  .page-grandline-port .section-name {
    font-size: clamp(9px, .53vw, 10px) !important;
    font-weight: 550 !important;
    line-height: 1 !important;
    letter-spacing: .075em !important;
    fill: rgba(239, 215, 159, .52) !important;
    paint-order: stroke;
    stroke: rgba(7, 17, 31, .88);
    stroke-width: 2.4px;
    stroke-linejoin: round;
  }

  .page-grandline-port.is-active .section-name {
    font-weight: 650 !important;
    fill: rgba(255, 226, 158, .92) !important;
  }

  .page-grandline-port.is-active circle {
    fill: #e5b85c !important;
    stroke: rgba(255, 247, 225, .62) !important;
    filter:
      drop-shadow(0 0 7px rgba(229, 184, 92, .34))
      drop-shadow(0 0 14px rgba(229, 184, 92, .14)) !important;
  }

  .page-grandline-marker .marker-core {
    r: 5.5px !important;
  }

  .page-grandline-marker .marker-label {
    font-size: clamp(9px, .53vw, 10px) !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: .075em !important;
    fill: rgba(255, 226, 158, .94) !important;
    stroke: rgba(7, 17, 31, .94) !important;
    stroke-width: 3px !important;
  }
}


/* =========================================================
   v104 — DESKTOP CONTENT LEGIBILITY
   Raise secondary and tertiary copy without changing card layout.
   ========================================================= */

@media (min-width: 981px) {
  /* Shared card titles */
  .project-card h3,
  .stack-column h3,
  .background-card h3 {
    font-size: 28px !important;
    line-height: 1.16 !important;
    letter-spacing: -.014em !important;
  }

  /* Current stack */
  .stack-note {
    font-size: 16px !important;
    line-height: 1.65 !important;
    letter-spacing: -.002em !important;
  }

  .stack-grid-polished .skill-name {
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 650 !important;
  }

  .stack-grid-polished li > small {
    max-width: 165px;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    letter-spacing: .015em !important;
  }

  .signal-legend > div {
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .025em !important;
  }

  /* Selected work */
  .project-content > p:not(.project-type) {
    font-size: 16px !important;
    line-height: 1.68 !important;
    letter-spacing: -.002em !important;
  }

  .project-content > p.project-type,
  .project-type,
  .project-number {
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: .045em !important;
  }

  .project-tags span {
    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: .015em !important;
  }

  .metric strong {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }

  .metric span {
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
  }

  .case-toggle,
  .case-actions .text-link {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* Experience */
  .exp-card h3,
  .exp-role,
  .experience-card h3 {
    font-size: 28px !important;
    line-height: 1.16 !important;
  }

  .exp-card > p {
    font-size: 16px !important;
    line-height: 1.68 !important;
    letter-spacing: -.002em !important;
  }

  .exp-card li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .exp-card b,
  .exp-company,
  .exp-year {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .exp-head em {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .current-chip,
  .promoted,
  .exp-tags span {
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: .02em !important;
  }

  .role strong {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .role small {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  .role p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    letter-spacing: -.002em !important;
  }

  .exp-item.compact .exp-card h3 {
    font-size: 23px !important;
    line-height: 1.18 !important;
  }

  .exp-item.compact .exp-card p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
}


/* =========================================================
   v105 — COMPACT EXPERIENCE ROWS
   Keep company and role names intact; body copy owns wrapping.
   ========================================================= */

@media (min-width: 981px) {
  .exp-item.compact .exp-card {
    grid-template-columns: max-content max-content minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
  }

  .exp-item.compact .exp-card > b,
  .exp-item.compact .exp-card > h3 {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .exp-item.compact .exp-card > b {
    letter-spacing: .08em !important;
  }

  .exp-item.compact .exp-card > p {
    min-width: 0 !important;
  }
}


/* =========================================================
   v106 — DESKTOP MICROCOPY LEGIBILITY
   Bring legacy 7–11px mono details into the current type scale.
   ========================================================= */

@media (min-width: 981px) {
  :root {
    --type-mono: 11px;
  }

  /* Section wayfinding */
  .section-index,
  .project-number {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .05em !important;
  }

  .scroll-indicator {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .11em !important;
  }

  .voyage-divider {
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: .12em !important;
  }

  /* Background metadata */
  .background-kicker {
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: .10em !important;
  }

  .background-meta {
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
  }

  /* Work metadata, tags and secondary actions */
  .project-content > p.project-type,
  .project-type {
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: .04em !important;
  }

  .project-tags span {
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .01em !important;
  }

  .metric span {
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: .015em !important;
  }

  .case-toggle,
  .case-actions .text-link {
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
  }

  /* Experience metadata */
  .exp-card b,
  .exp-company,
  .exp-year {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .06em !important;
  }

  .exp-year small,
  .exp-head em,
  .role small {
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: .015em !important;
  }

  .current-chip,
  .promoted,
  .exp-tags span {
    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: .015em !important;
  }

  /* Contact panel and footer */
  .contact-logline,
  .contact-kicker,
  .contact-label,
  .phone-note,
  .contact-socials a {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .04em !important;
  }

  .contact-logline,
  .contact-kicker,
  .contact-label {
    letter-spacing: .09em !important;
  }

  .contact-email-row a,
  .contact-phone-row a {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .copy-email {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .contact-port-label {
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }

  .site-footer-inner {
    font-size: 11px !important;
    line-height: 1.5 !important;
    letter-spacing: .025em !important;
  }

  .footer-tail-copy span {
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: .10em !important;
  }

  .footer-tail-copy small {
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .04em !important;
  }
}


/* =========================================================
   v107 — COMPACT EXPERIENCE HIERARCHY
   Company + role share the first row; description starts below.
   ========================================================= */

@media (min-width: 981px) {
  .exp-item.compact .exp-card {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
    align-items: baseline !important;
  }

  .exp-item.compact .exp-card > p {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }
}


/* =========================================================
   v108 — ALIGNED COMPACT EXPERIENCE TITLES
   Give every company the same column so positions line up.
   ========================================================= */

@media (min-width: 981px) {
  .exp-item.compact .exp-card {
    grid-template-columns: 230px minmax(0, 1fr) !important;
  }
}


/* =========================================================
   v109 — WORK ACTION LEGIBILITY
   Keep both case-study actions equally readable and aligned.
   ========================================================= */

@media (min-width: 981px) {
  .case-toggle,
  .case-live-inline {
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
  }
}


/* =========================================================
   v110 — MOBILE / TABLET DRAWER ACTION LEGIBILITY
   Increase the CV action and availability status only.
   ========================================================= */

@media (max-width: 980px) {
  .mobile-nav-cv {
    min-height: 50px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    letter-spacing: .01em !important;
  }

  .mobile-nav-status {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .015em !important;
  }

  .mobile-nav-status i {
    width: 8px !important;
    height: 8px !important;
    flex-basis: 8px !important;
  }
}


/* =========================================================
   v111 — ABOUT PORTRAIT
   A restrained personal portrait that belongs to the visual system.
   ========================================================= */

.about-portrait {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  margin: 0 0 30px;
  overflow: hidden;
  border: 1px solid rgba(229,184,92,.24);
  border-radius: 22px;
  background: #0a1320;
  box-shadow: 0 24px 70px rgba(0,0,0,.2);
}

.about-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 52%, rgba(3,9,16,.78) 100%),
    linear-gradient(135deg, rgba(229,184,92,.06), transparent 44%);
}

.about-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.84) contrast(1.03) brightness(.88);
}

.about-portrait figcaption {
  position: absolute;
  z-index: 1;
  left: 18px;
  right: 18px;
  bottom: 16px;
  color: rgba(240,228,202,.86);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .10em;
}

@media (max-width: 680px) {
  .about-portrait {
    max-width: none;
    aspect-ratio: 1 / 1;
    margin-bottom: 24px;
    border-radius: 18px;
  }

  .about-portrait figcaption {
    left: 14px;
    right: 14px;
    bottom: 13px;
    font-size: 10px;
  }
}


/* =========================================================
   v113 — DESKTOP ABOUT COMPOSITION
   Balance portrait, narrative and principles across the full width.
   ========================================================= */

@media (min-width: 981px) {
  .about-layout {
    grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr) !important;
    column-gap: 64px !important;
    row-gap: 34px !important;
    align-items: start !important;
  }

  .about-copy {
    display: contents !important;
  }

  .about-portrait {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: start !important;
  }

  .about-copy > p {
    grid-column: 2 !important;
    max-width: 680px !important;
    margin: 0 !important;
  }

  .about-copy > p:nth-of-type(1) { grid-row: 1 !important; }
  .about-copy > p:nth-of-type(2) { grid-row: 2 !important; }
  .about-copy > p:nth-of-type(3) { grid-row: 3 !important; }

  .about-copy > .big-copy {
    font-size: 22px !important;
    line-height: 1.48 !important;
    letter-spacing: -.015em !important;
  }

  .principles {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .principle-card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    padding: 26px 24px !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 0 !important;
  }

  .principle-card:first-child {
    padding-left: 0 !important;
  }

  .principle-card:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  .principle-card p {
    grid-column: 2 !important;
  }
}


/* =========================================================
   v114 — GRAND LINE COMPACT-VIEW PAUSE
   Hide the full-page route at 1024px and below for redesign.
   ========================================================= */

@media (max-width: 1024px) {
  .page-grandline {
    display: none !important;
  }
}


/* =========================================================
   v115 — SAFE TABLET GRAND LINE
   Restore the route from 768–1024px with inward-safe labels.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  .page-grandline {
    display: block !important;
  }

  .page-grandline-svg {
    overflow: hidden !important;
  }
}


/* =========================================================
   v116 — TABLET GRAND LINE LABEL SEPARATION
   Keep route labels out of section-heading typography.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  .page-grandline-port text,
  .page-grandline-marker .marker-label {
    font-size: 7.5px !important;
    letter-spacing: .08em !important;
  }
}


/* =========================================================
   v117 — TABLET GRAND LINE TITLE CLEARANCE
   Give the route a dedicated gutter and separate its labels
   vertically from every section title.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1600px) {
  .page-grandline-port .section-name,
  .page-grandline-marker .marker-label {
    font-size: 6.5px !important;
    letter-spacing: .065em !important;
  }
}


/* =========================================================
   v120 — CONTACT GRAND LINE CLEARANCE
   Reserve the left route gutter before the contact availability
   status at compact and laptop widths.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1366px) {
  .contact-logline {
    padding-left: clamp(100px, 12vw, 140px) !important;
  }
}


/* =========================================================
   v121 — LEFT-SIDE ISLAND LABEL SIMPLIFICATION
   The section title becomes the island name whenever the route
   reaches the left side, avoiding duplicate labels near content.
   ========================================================= */

@media (min-width: 768px) {
  .page-grandline-port.is-left .section-name,
  .page-grandline-marker.is-left .marker-label {
    display: none !important;
  }
}


/* =========================================================
   v123 — MOBILE LOCAL ISLANDS
   Replace the full-page route with a small island and a short
   route fragment inside each numbered section heading.
   ========================================================= */

@media (max-width: 767px) {
  .section-heading .section-index {
    position: relative;
    overflow: visible;
  }

  .section-heading .section-index::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 7px;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(255, 241, 205, .46);
    border-radius: 50%;
    background: #e5b85c;
    box-shadow:
      0 0 0 5px rgba(229, 184, 92, .055),
      0 0 10px rgba(229, 184, 92, .18);
    transform: translate(-50%, -50%);
  }

  .section-heading .section-index::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 15px;
    height: 28px;
    border-left: 1px dashed rgba(229, 184, 92, .22);
    transform: translateX(-50%);
  }
}


/* =========================================================
   PRODUCTION DESKTOP POLISH
   Header responsiveness + Grand Line island labels
   ========================================================= */

/* Brand has a full desktop label and a compact mid-desktop label. */
.brand-name-short {
  display: none;
}

@media (min-width: 1025px) {
  .topbar {
    width: min(calc(100% - 32px), 1440px) !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 16px !important;

    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
  }

  .topbar .mobile-menu-toggle {
    display: none !important;
  }

  .topbar > .brand {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: 9px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  .topbar .brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 17px !important;
  }

  .topbar > .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: clamp(12px, 1.25vw, 22px) !important;
    margin-left: 6px !important;
  }

  .topbar > .nav a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .topbar > .status-chip {
    flex: 0 0 auto !important;
    margin-left: 2px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 13px !important;
    font-size: 8px !important;
    white-space: nowrap !important;
  }

  /* Restore BOTH parts of the desktop navigation story. */
  .page-grandline-port .section-name {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    fill: rgba(239,215,159,.66) !important;
    font-family: var(--mono) !important;
    font-size: 7px !important;
    font-weight: 500 !important;
    letter-spacing: .09em !important;
    dominant-baseline: middle !important;
    paint-order: stroke !important;
    stroke: rgba(7,17,31,.84) !important;
    stroke-width: 2.2px !important;
    stroke-linejoin: round !important;
  }

  .page-grandline-port.is-active .section-name {
    fill: rgba(239,215,159,.92) !important;
  }

  .page-grandline-marker .marker-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    fill: rgba(229,184,92,.78) !important;
    font-family: var(--mono) !important;
    font-size: 6.5px !important;
    font-weight: 500 !important;
    letter-spacing: .09em !important;
    dominant-baseline: middle !important;
    paint-order: stroke !important;
    stroke: rgba(7,17,31,.86) !important;
    stroke-width: 2.2px !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
  }

  /* Undo v122's desktop-side label suppression. */
  .page-grandline-port.is-left .section-name,
  .page-grandline-marker.is-left .marker-label {
    display: block !important;
  }
}

/* Mid desktop: keep every nav item on one line without crowding the brand. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .topbar {
    gap: 12px !important;
    padding: 0 12px !important;
  }

  .brand-name-full {
    display: none !important;
  }

  .brand-name-short {
    display: inline !important;
  }

  .topbar > .nav {
    gap: 10px !important;
    margin-left: 2px !important;
  }

  .topbar > .nav a {
    font-size: 8px !important;
  }

  .topbar > .status-chip {
    padding: 0 10px !important;
    font-size: 7px !important;
  }
}

@media (min-width: 1241px) {
  .brand-name-full {
    display: inline !important;
  }

  .brand-name-short {
    display: none !important;
  }
}


/* =========================================================
   HEADER FONT SIZE RESTORE
   Keep the compact responsive layout, but restore readable
   desktop typography. No other layout/Grand Line changes.
   ========================================================= */

@media (min-width: 1025px) {
  .topbar > .brand {
    font-size: 14px !important;
  }

  .topbar > .nav a {
    font-size: 10px !important;
  }

  .topbar > .status-chip {
    font-size: 8.5px !important;
  }
}

/* Mid desktop keeps the short brand, but DOES NOT shrink nav text. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .topbar > .brand {
    font-size: 14px !important;
  }

  .topbar > .nav a {
    font-size: 10px !important;
  }

  .topbar > .status-chip {
    font-size: 8.5px !important;
  }
}


/* =========================================================
   DESKTOP HEADER SCALE RESTORE
   Restore the larger visual proportions from before the compact pass.
   Grand Line / favicon / SEO / compact mobile header are untouched.
   ========================================================= */

@media (min-width: 1025px) {
  .topbar {
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 18px !important;
    gap: 22px !important;
  }

  .topbar > .brand {
    gap: 11px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .topbar .brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    font-size: 19px !important;
  }

  .topbar > .nav {
    gap: clamp(16px, 1.5vw, 28px) !important;
  }

  .topbar > .nav a {
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .topbar > .status-chip {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
}

/* Mid desktop: preserve readable scale; use short brand + tighter gaps,
   never tiny text. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .topbar {
    min-height: 68px !important;
    height: 68px !important;
    padding: 0 14px !important;
    gap: 14px !important;
  }

  .topbar > .brand {
    font-size: 15px !important;
  }

  .topbar .brand-mark {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .topbar > .nav {
    gap: 12px !important;
  }

  .topbar > .nav a {
    font-size: 11px !important;
  }

  .topbar > .status-chip {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 9px !important;
  }
}


/* =========================================================
   CONTACT ISLAND ALIGNMENT
   Desktop global port aligns with LET'S TALK via JS.
   Mobile gets the same local-island language as other sections.
   ========================================================= */

.contact-local-island {
  display: none;
}

@media (max-width: 767px) {
  .contact-local-island {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    margin: 0 0 18px;
    overflow: visible;
    font-family: var(--mono);
    pointer-events: none;
  }

  .contact-local-route {
    position: absolute;
    left: 0;
    top: 50%;
    width: 54px;
    border-top: 1px dashed rgba(229,184,92,.20);
    transform: translateY(-50%);
  }

  .contact-local-port {
    position: absolute;
    left: 54px;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255,241,205,.46);
    border-radius: 50%;
    background: #e5b85c;
    box-shadow:
      0 0 0 6px rgba(229,184,92,.055),
      0 0 12px rgba(229,184,92,.18);
    transform: translate(-50%,-50%);
  }

  .contact-local-name,
  .contact-local-here {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 6.5px;
    line-height: 1;
    letter-spacing: .08em;
  }

  .contact-local-name {
    left: 68px;
    color: rgba(239,215,159,.78);
  }

  .contact-local-here {
    right: 0;
    color: rgba(229,184,92,.52);
  }
}