/* Portfolio-specific layout and accessible interaction refinements. */
:root { --muted-2: #8c9ba8; }
::selection { background: var(--lime); color: var(--bg); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }
main:focus { outline: none; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 40; padding: 12px 18px; background: var(--lime); color: var(--bg); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
[data-reveal] { opacity: 1; transform: none; }
.js-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(18px); }
.hero { grid-template-columns: 1.12fr .88fr; gap: 22px; padding-top: 72px; padding-bottom: 70px; }
h1 { font-size: clamp(54px, 6vw, 83px); line-height: 1.02; letter-spacing: -.055em; }
.hero-lede { max-width: 520px; font-size: 16px; }
.hero-meta { margin-top: 42px; }
.visual-card { width: 240px; }
.visual-card p { font-size: 19px; }
.label-bottom { left: 0; bottom: 23%; font-size: 8px; }
.company-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.company-strip > span:not(.eyebrow) { font-size: clamp(18px, 2.1vw, 26px); font-weight: 500; color: #d3dee5; letter-spacing: -.04em; }
.work { padding-top: 100px; padding-bottom: 100px; }
.portfolio-projects { gap: 24px; margin-top: 48px; }
.portfolio-projects .work-card { display: flex; flex-direction: column; }
.portfolio-projects .card-body { padding: 30px; display: flex; flex-direction: column; flex: 1; }
.portfolio-projects .card-body h3 { font-size: 31px; line-height: 1.12; }
.portfolio-projects .card-body p { font-size: 15px; }
.portfolio-projects .tag-row { margin-top: auto; }
.project-link { display: inline-flex; align-self: flex-start; padding: 12px 0 5px; margin-top: 23px; border-bottom: 1px solid var(--line-bright); color: var(--lime); font-family: var(--mono); font-size: 11px; }
.project-link:hover { border-color: var(--lime); }
.graph-visual, .matching-visual { height: 270px; min-height: 270px; background: radial-gradient(ellipse at center, #192b2c, #111c21); color: var(--cyan); border-bottom: 1px solid var(--line); }
.graph-visual svg { width: 100%; height: 100%; }
.matching-visual { position: relative; display: grid; place-items: center; background: radial-gradient(ellipse at center, #242637, #141c25); color: var(--violet); }
.matching-columns { display: flex; width: 76%; height: 160px; align-items: center; }
.matching-columns > div { display: flex; flex-direction: column; height: 160px; justify-content: space-around; align-items: center; width: 24px; position: relative; }
.matching-columns > div > span { position: absolute; top: -22px; font: 9px var(--mono); letter-spacing: .1em; }
.matching-columns i { display: block; width: 10px; height: 10px; border: 1px solid currentColor; background: #242637; border-radius: 50%; }
.matching-columns > svg { flex: 1; height: 160px; width: 0; }
.diagram-caption { position: absolute; left: 24px; bottom: 15px; font: 9px var(--mono); color: #ad9bcf; }
.experience { padding-top: 100px; padding-bottom: 100px; }
.timeline { margin-top: 55px; }
.timeline-item { padding-bottom: 30px; min-height: 120px; }
.timeline-copy p { max-width: 620px; font-size: 14px; }
.timeline-copy h3 { line-height: 1.4; }
.about { padding-bottom: 95px; }
.about-card { grid-template-columns: 95px 1fr .65fr; padding: 48px; gap: 30px; }
.about-side { padding-left: 25px; }
.about-side ul { font-size: 12px; }
.contact { padding-top: 85px; padding-bottom: 100px; }
.contact h2 { font-size: clamp(45px, 6.5vw, 82px); }
.nav-links a, .topbar-contact { padding-block: 12px; }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { max-width: 650px; }
  .hero-visual { min-height: 420px; max-width: 580px; }
  .about-card { grid-template-columns: 90px 1fr; }
  .about-side { grid-column: 2; padding-left: 0; }
  .nav-links { margin-left: 0; gap: 24px; }
}
@media (max-width: 700px) {
  .hero { padding-top: 44px; padding-bottom: 40px; }
  h1 { font-size: clamp(42px, 10.8vw, 68px); }
  .hero-visual { min-height: 360px; margin-top: 15px; }
  .company-strip { display: grid; grid-template-columns: 1fr 1fr; padding-block: 24px; gap: 20px; }
  .company-strip .eyebrow { grid-column: 1 / -1; }
  .company-strip > span:not(.eyebrow) { font-size: 19px; }
  .company-strip > span:last-child { grid-column: 1 / -1; }
  .work, .experience { padding-top: 70px; padding-bottom: 70px; }
  .portfolio-projects .card-body { padding: 25px; }
  .portfolio-projects .card-body h3 { font-size: 28px; }
  .card-topline { font-size: 8px; letter-spacing: .08em; }
  .timeline-item { grid-template-columns: 24px 1fr; gap: 0 12px; padding-bottom: 32px; }
  .timeline-year, .timeline-copy, .timeline-type { grid-column: 2; }
  .timeline-marker { grid-column: 1; margin-left: 4px; }
  .timeline-line { left: 8px; }
  .timeline-copy h3 { font-size: 19px; }
  .timeline-copy h3 span { display: block; font-size: 15px; }
  .about-card { display: block; padding: 30px 24px; }
  .about-side { padding-left: 0; }
  .about-side ul { font-size: 13px; }
  .menu-toggle { min-height: 44px; min-width: 44px; }
  .mobile-menu a { padding-block: 10px; }
  .contact-kicker { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
}