/*
  styles.css
  ----------
  Layout and components. Every color, font and size comes from tokens.css.
*/

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* The drifting 3D forms sit behind everything */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.nav, main, .footer { position: relative; z-index: 1; }

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }

.icon { display: inline-flex; line-height: 0; }
.icon svg { display: block; }

/* ---------- navigation ---------- */

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 3.5rem;
}
.brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding-block: var(--space-1);
  border-bottom: 2px solid var(--accent);
  line-height: 1.1;
}
.nav-links {
  display: flex;
  gap: var(--space-5);
  margin-left: auto;
  font-size: var(--text-sm);
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: var(--space-2);
}
.nav-links a:hover { color: var(--ink); }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--bg-sunken); }

/* ---------- buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 1.15rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: var(--on-accent); }
.btn-primary[disabled] { opacity: 0.6; cursor: default; }
.btn-quiet { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn-quiet:hover { background: var(--bg-sunken); }
.btn-small { padding: 0.45rem 0.8rem; }

.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.text-link:hover { color: var(--accent); }

/* ---------- hero ---------- */

.hero { padding-block: var(--space-8) var(--space-8); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-7);
  align-items: end;
}
.hero-copy { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.hero-name {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero-headline {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34rem;
  text-wrap: pretty;
}
.hero-location { font-size: var(--text-sm); color: var(--ink-faint); margin-top: calc(var(--space-3) * -1); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-facts { border-top: 1px solid var(--rule-strong); max-width: 38rem; margin-top: var(--space-3); }
.fact {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
}
.fact dt { color: var(--ink-faint); }
.fact dd { font-weight: 500; }

.portrait {
  justify-self: end;
  width: 100%;
  max-width: 23rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--portrait-a) 62%, transparent),
    color-mix(in srgb, var(--portrait-b) 78%, transparent)
  );
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---------- sections: label column on the left, content on the right ---------- */

.section { padding-block: 0 var(--space-8); scroll-margin-top: 4.5rem; }
.hero { scroll-margin-top: 4.5rem; }
.section-grid {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: var(--space-6);
}
/* the ruled line above each section, kept inside the page gutter */
.section-grid::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: var(--rule-strong);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  align-self: start;
  position: sticky;
  top: 5rem;
}
.section-body { min-width: 0; }

.prose { display: flex; flex-direction: column; gap: var(--space-4); }
.prose p { font-size: 1.1875rem; line-height: 1.6; max-width: 41rem; text-wrap: pretty; }

.minor-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: var(--space-2);
}
.note { font-size: var(--text-xs); color: var(--ink-faint); }

/* resume-style entries */
#experience-body, #education-body { display: flex; flex-direction: column; gap: var(--space-6); }
.entry { display: flex; flex-direction: column; gap: var(--space-3); }
.entry + .entry { border-top: 1px solid var(--rule); padding-top: var(--space-6); }
.entry-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1) var(--space-5);
}
.entry-title { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.entry-org { color: var(--ink-soft); }
.entry-dates { font-size: var(--text-sm); color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.entry-line { color: var(--ink-soft); }
.entry-line + .entry-line { margin-top: calc(var(--space-2) * -1); }
.entry-list { padding-left: 1.1rem; display: flex; flex-direction: column; gap: var(--space-2); max-width: 46rem; }
.entry-list li { color: var(--ink-soft); padding-left: var(--space-1); }
.entry-list li::marker { color: var(--accent); }

.ledger { list-style: none; border-bottom: 1px solid var(--rule); }
.ledger li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
  padding-block: 0.7rem;
  border-top: 1px solid var(--rule);
}
.ledger-main { font-weight: 500; }
.ledger-side { font-size: var(--text-sm); color: var(--ink-faint); white-space: nowrap; }

/* projects */
#projects-body { display: flex; flex-direction: column; gap: var(--space-5); }
.project {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.project-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.project-summary { max-width: 44rem; }
.solutions { border-top: 1px solid var(--rule); padding-top: var(--space-4); }
.solution-list { list-style: none; counter-reset: sol; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.solution-list li {
  counter-increment: sol;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: var(--space-3);
}
.solution-list li::before {
  content: counter(sol);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--accent);
}
.solution-list strong { font-weight: 600; }
.solution-list span { color: var(--ink-soft); max-width: 42rem; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tags span {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.5rem;
}

/* skills */
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.skill-group ul { list-style: none; border-bottom: 1px solid var(--rule); }
.skill-group li { font-size: var(--text-sm); padding-block: 0.5rem; border-top: 1px solid var(--rule); }

/* ---------- coverage table ---------- */

.coverage-head {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: var(--space-6);
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--space-6);
  margin-bottom: var(--space-5);
}
.coverage-head .section-title { position: static; }
.coverage-intro { max-width: 41rem; color: var(--ink-soft); }

.coverage-panel {
  --cov-cols: minmax(10rem, 1.5fr) 5.25rem 5.25rem 5.5rem 6.75rem minmax(11rem, 1.35fr) 1.25rem;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cov-header {
  display: grid;
  grid-template-columns: var(--cov-cols);
  gap: var(--space-4);
  align-items: center;
  padding: 0.7rem var(--space-5);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}
.right { text-align: right; }
.cov-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.cov-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.cov-legend-mobile { display: none; font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--space-3); }
.key { display: inline-block; }
.key-band { width: 14px; height: 6px; border-radius: 3px; background: var(--rule-strong); }
.key-target { width: 3px; height: 12px; border-radius: 2px; background: var(--accent); }
.key-price { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }

.cov + .cov { border-top: 1px solid var(--rule); }
.cov-row {
  display: grid;
  grid-template-columns: var(--cov-cols);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
}
.cov-row::-webkit-details-marker { display: none; }
.cov-row:hover { background: color-mix(in srgb, var(--bg-sunken) 55%, transparent); }
.cov-row:focus-visible { outline-offset: -3px; }
.cov-cell { min-width: 0; }
.cov-name { display: flex; flex-direction: column; }
.ticker { font-size: var(--text-lg); font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; }
.company { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.3; }
.cell-label { display: none; font-size: var(--text-xs); color: var(--ink-faint); }
.cov-price, .cov-target, .cov-delta { text-align: right; }
.num { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.delta { font-weight: 700; }
.delta.is-up { color: var(--up); }
.delta.is-down { color: var(--down); }
.delta.is-flat { color: var(--flat); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.tag.is-up { background: var(--up-soft); color: var(--up); }
.tag.is-down { background: var(--down-soft); color: var(--down); }
.tag.is-flat { background: var(--flat-soft); color: var(--flat); }

.range { padding-top: 2px; }
.range-track { position: relative; height: 14px; }
.range-band { position: absolute; top: 4px; height: 6px; border-radius: 3px; background: var(--rule-strong); }
.range-target {
  position: absolute; top: 0; width: 3px; height: 14px; border-radius: 2px;
  background: var(--accent); transform: translateX(-50%);
}
.range-price {
  position: absolute; top: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--bg-raised); transform: translateX(-50%);
}
.range-labels { position: relative; height: 1.1rem; margin-top: 2px; }
.range-label { position: absolute; top: 0; font-size: 0.75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.range-label-high { transform: translateX(-100%); }

.cov-chevron { color: var(--ink-faint); justify-self: end; }
.cov-chevron .icon { transition: transform 0.2s ease; }
.cov[open] .cov-chevron .icon { transform: rotate(180deg); }

.cov-note {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-6);
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg-sunken) 40%, transparent);
}
.note-col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.note-block p, .note-block li { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; }
.note-block ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: var(--space-2); }
.note-block li::marker { color: var(--accent); }

.quote-status { font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.quote-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); flex: none; }
.quote-status.is-live::before { background: var(--up); }
.disclaimer { font-size: var(--text-xs); color: var(--ink-faint); max-width: 54rem; margin-top: var(--space-3); line-height: 1.55; }

/* ---------- interests ---------- */

.interests {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}
.interest { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.interest-icon { color: var(--ink); }
.interest-icon svg { width: 2.75rem; height: 2.75rem; }
.interest-label { font-size: var(--text-sm); font-weight: 500; line-height: 1.3; }

/* ---------- contact ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-7); }
.contact-direct { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.contact-direct > p:first-child { color: var(--ink-soft); max-width: 24rem; }
.contact-email a {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.contact-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.copy-note { font-size: var(--text-sm); color: var(--ink-soft); }

.contact-form { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--focus); }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.form-status { font-size: var(--text-sm); min-width: 0; }
.form-status.is-ok { color: var(--up); }
.form-status.is-error { color: var(--down); }

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

.footer { border-top: 1px solid var(--rule); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-6);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

/* ---------- wide screens: a little more gutter ---------- */

@media (min-width: 64rem) {
  .wrap {
    padding-left: max(2.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(2.5rem, env(safe-area-inset-right, 0px));
  }
}

/* ---------- tablets and phones ---------- */

@media (max-width: 60rem) {
  .section-grid, .coverage-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .section-title { position: static; }
  .hero { padding-block: var(--space-7) var(--space-7); }
  .section { padding-bottom: var(--space-7); }
  .interests { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* coverage rows become stacked blocks */
  .cov-header { display: none; }
  .cov-legend-mobile { display: flex; }
  .cov-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "name name tag chev"
      "price target delta delta"
      "range range range range";
    row-gap: var(--space-3);
  }
  .cov-name { grid-area: name; }
  .cov-tag { grid-area: tag; justify-self: end; }
  .cov-chevron { grid-area: chev; }
  .cov-price { grid-area: price; }
  .cov-target { grid-area: target; }
  .cov-delta { grid-area: delta; }
  .cov-range { grid-area: range; }
  .cov-price, .cov-target, .cov-delta { text-align: left; display: flex; flex-direction: column; }
  .cell-label { display: block; }
  .cov-note { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 78rem) {
  #scene { opacity: 0.7; }
}

@media (max-width: 44rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .portrait { justify-self: start; max-width: 15rem; order: -1; }
  .nav-wide { display: none; }
  .nav-inner { gap: var(--space-4); }
  .skills { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .interests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .project { padding: var(--space-5); }
  .fact { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-3); }
  .cov-row, .cov-note { padding-inline: var(--space-4); }
  #scene { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cov-chevron .icon { transition: none; }
}