/* ==========================================================================
   Max Li — Portfolio
   Design language: engineering drawing / spec sheet.
   Paper ground, graphite ink, hairline rules, blueprint-blue accent,
   fiducial marks referencing PCB panel registration crosses.
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

   :root {
     --bg: #fbfbfa;
     --bg-alt: #f2f3f1;
     --ink: #15171a;
     --ink-soft: #454a4f;
     --muted: #8a8f93;
     --line: #dcdfdc;
     --line-strong: #b9bdb9;
     --accent: #2e5eaa;
     --accent-warm: #c1541c;
   
     --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --display: 'Space Grotesk', var(--sans);
     --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
   
     --max: 760px;
     --edge: clamp(20px, 5vw, 64px);
   }
   
   * { box-sizing: border-box; }
   
   html {
     scroll-behavior: smooth;
   }
   
   @media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
     * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
   }
   
   body {
     margin: 0;
     background: var(--bg);
     color: var(--ink);
     font-family: var(--sans);
     font-size: 16px;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
   }
   
   a {
     color: var(--ink);
     text-decoration: none;
   }
   
   ::selection {
     background: var(--accent);
     color: #fff;
   }
   
   :focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 3px;
   }
   
   /* -------------------------------------------------------------------------
      Fiducial marks — fixed corner registration crosses, PCB-panel style
      ------------------------------------------------------------------------- */
   .fiducial {
     position: fixed;
     width: 18px;
     height: 18px;
     pointer-events: none;
     z-index: 40;
     opacity: 0.55;
   }
   .fiducial::before,
   .fiducial::after {
     content: "";
     position: absolute;
     background: var(--line-strong);
   }
   .fiducial::before { width: 100%; height: 1px; top: 50%; left: 0; }
   .fiducial::after   { width: 1px; height: 100%; left: 50%; top: 0; }
   .fiducial.tl { top: 14px; left: 14px; }
   .fiducial.tr { top: 14px; right: 14px; }
   .fiducial.bl { bottom: 14px; left: 14px; }
   .fiducial.br { bottom: 14px; right: 14px; }
   @media (max-width: 640px) { .fiducial { display: none; } }
   
   /* -------------------------------------------------------------------------
      Header
      ------------------------------------------------------------------------- */
   .site-header {
     position: sticky;
     top: 0;
     z-index: 30;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 22px var(--edge);
     background: rgba(251, 251, 250, 0.92);
     backdrop-filter: saturate(140%) blur(6px);
     border-bottom: 1px solid var(--line);
   }
   
   .site-header .mark {
     font-family: var(--mono);
     font-size: 13px;
     letter-spacing: 0.02em;
     color: var(--ink);
   }
   
   .site-nav {
     display: flex;
     gap: 28px;
     font-family: var(--mono);
     font-size: 13px;
   }
   
   .site-nav a {
     color: var(--ink-soft);
     position: relative;
     padding-bottom: 2px;
   }
   
   .site-nav a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -3px;
     width: 100%;
     height: 1px;
     background: var(--accent);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.25s ease;
   }
   
   .site-nav a:hover::after,
   .site-nav a[aria-current="page"]::after {
     transform: scaleX(1);
   }
   
   .site-nav a[aria-current="page"] {
     color: var(--ink);
   }
   
   /* -------------------------------------------------------------------------
      Layout shells
      ------------------------------------------------------------------------- */
   main {
     padding: 0 var(--edge);
   }
   
   .sheet {
     max-width: var(--max);
     margin: 0 auto;
   }
   
   /* -------------------------------------------------------------------------
      Hero (home)
      ------------------------------------------------------------------------- */
   .hero {
     padding: clamp(56px, 12vh, 120px) 0 48px;
     border-bottom: 1px solid var(--line);
   }
   
   .hero .name {
     font-family: var(--display);
     font-weight: 600;
     font-size: clamp(2.6rem, 8vw, 5rem);
     line-height: 1.02;
     letter-spacing: -0.02em;
     margin: 0;
     opacity: 0;
     animation: rise 0.6s ease forwards;
   }
   
   .hero .role {
     margin: 14px 0 0;
     font-family: var(--mono);
     font-size: clamp(0.92rem, 1.6vw, 1.05rem);
     color: var(--ink-soft);
     opacity: 0;
     animation: rise 0.6s ease 0.12s forwards;
   }
   
   .hero .intro {
     margin: 32px 0 0;
     max-width: 58ch;
     color: var(--ink-soft);
     font-size: 1.02rem;
     opacity: 0;
     animation: rise 0.6s ease 0.24s forwards;
   }
   
   @keyframes rise {
     from { opacity: 0; transform: translateY(8px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* -------------------------------------------------------------------------
      Placeholder text — visibly editable filler
      ------------------------------------------------------------------------- */
   .placeholder {
     color: var(--muted);
     font-style: italic;
   }
   
   /* -------------------------------------------------------------------------
      Section blocks (home: Projects / Work Experience teasers)
      ------------------------------------------------------------------------- */
   .section-list {
     padding: 8px 0 80px;
   }
   
   .section-block {
     display: grid;
     grid-template-columns: 160px 1fr;
     gap: 24px;
     padding: 40px 0;
     border-bottom: 1px solid var(--line);
   }
   
   .section-block:last-child { border-bottom: none; }
   
   .section-block .label {
     font-family: var(--mono);
     font-size: 13px;
     color: var(--muted);
     padding-top: 4px;
   }
   
   .section-block h2 {
     font-family: var(--display);
     font-size: 1.5rem;
     font-weight: 600;
     margin: 0 0 12px;
   }
   
   .section-block p {
     margin: 0 0 20px;
     max-width: 56ch;
     color: var(--ink-soft);
   }
   
   .home-projects {
     display: flex;
     flex-direction: column;
   }
   
   .home-project {
     display: grid;
     grid-template-columns: 40px 1fr;
     gap: 16px;
     padding: 20px 0;
     border-top: 1px solid var(--line);
     color: inherit;
   }
   
   .home-project:first-child { border-top: none; padding-top: 0; }
   
   .home-project .num {
     font-family: var(--mono);
     font-size: 13px;
     color: var(--muted);
     padding-top: 3px;
     transition: color 0.2s ease;
   }
   
   .home-project h3 {
     font-family: var(--display);
     font-size: 1.05rem;
     font-weight: 600;
     margin: 0 0 6px;
     transition: color 0.2s ease;
   }
   
   .home-project .tags {
     font-family: var(--mono);
     font-size: 12px;
     color: var(--accent-warm);
     margin: 0 0 8px;
   }
   
   .home-project p:not(.tags) {
     margin: 0;
     color: var(--ink-soft);
     max-width: 56ch;
   }
   
   .home-project:hover h3,
   .home-project:focus-visible h3 { color: var(--accent); }
   
   .home-project:hover .num,
   .home-project:focus-visible .num { color: var(--accent); }
   
   @media (max-width: 640px) {
     .home-project { grid-template-columns: 1fr; gap: 4px; }
   }
   
   /* -------------------------------------------------------------------------
      Project detail page
      ------------------------------------------------------------------------- */
   .back-link {
     display: inline-block;
     font-family: var(--mono);
     font-size: 13px;
     color: var(--ink-soft);
     margin: 28px 0 0;
   }
   
   .back-link:hover { color: var(--accent); }
   
   .project-head {
     padding: 20px 0 36px;
     border-bottom: 1px solid var(--line);
   }
   
   .project-head h1 {
     font-family: var(--display);
     font-weight: 600;
     font-size: clamp(2rem, 5.5vw, 3rem);
     margin: 10px 0 16px;
     letter-spacing: -0.01em;
   }
   
   .project-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 22px;
     font-family: var(--mono);
     font-size: 13px;
     color: var(--ink-soft);
     margin: 0 0 18px;
   }
   
   .project-meta span::before {
     content: attr(data-label);
     color: var(--muted);
     margin-right: 6px;
   }
   
   .project-links {
     display: flex;
     gap: 22px;
   }
   
   .image-frame {
     border: 1px dashed var(--line-strong);
     background: var(--bg-alt);
     aspect-ratio: 16 / 9;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--mono);
     font-size: 13px;
     color: var(--muted);
     text-align: center;
     padding: 16px;
   }
   
   .image-frame.hero-image { margin: 36px 0; }
   
   .image-gallery {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     margin: 36px 0;
   }
   
   .image-gallery .image-frame { aspect-ratio: 4 / 3; }
   
   @media (max-width: 640px) {
     .image-gallery { grid-template-columns: 1fr; }
   }
   
   .project-body {
     padding-bottom: 100px;
   }
   
   .project-body section {
     padding: 32px 0;
     border-top: 1px solid var(--line);
   }
   
   .project-body section:first-child { border-top: none; }
   
   .project-body h2 {
     font-family: var(--display);
     font-size: 1.3rem;
     font-weight: 600;
     margin: 0 0 14px;
   }
   
   .project-body p {
     margin: 0 0 14px;
     max-width: 62ch;
     color: var(--ink-soft);
   }
   
   .project-body ul {
     margin: 0;
     padding-left: 18px;
     color: var(--ink-soft);
     max-width: 60ch;
   }
   
   .project-body li { margin-bottom: 6px; }
   
   .tech-link {
     display: inline-block;
     font-family: var(--mono);
     font-size: 13.5px;
     color: var(--accent);
     border-bottom: 1px solid transparent;
     transition: border-color 0.2s ease;
   }
   
   .tech-link:hover,
   .tech-link:focus-visible {
     border-bottom-color: var(--accent);
   }
   
   @media (max-width: 640px) {
     .section-block {
       grid-template-columns: 1fr;
       gap: 10px;
     }
   }
   
   /* -------------------------------------------------------------------------
      Page header (Projects / Experience pages)
      ------------------------------------------------------------------------- */
   .page-head {
     padding: clamp(48px, 10vh, 96px) 0 40px;
     border-bottom: 1px solid var(--line);
   }
   
   .page-head .eyebrow {
     font-family: var(--mono);
     font-size: 13px;
     color: var(--muted);
     margin: 0 0 10px;
   }
   
   .page-head h1 {
     font-family: var(--display);
     font-weight: 600;
     font-size: clamp(2.2rem, 6vw, 3.4rem);
     margin: 0;
     letter-spacing: -0.01em;
   }
   
   .page-head .dek {
     margin: 18px 0 0;
     max-width: 56ch;
     color: var(--ink-soft);
   }
   
   /* -------------------------------------------------------------------------
      Projects grid
      ------------------------------------------------------------------------- */
   .project-grid {
     padding: 8px 0 100px;
     display: grid;
     gap: 1px;
     background: var(--line);
     border: 1px solid var(--line);
   }
   
   .project-card {
     background: var(--bg);
     padding: 36px clamp(0px, 2vw, 8px);
     display: grid;
     grid-template-columns: 64px 1fr;
     gap: 20px;
   }
   
   .project-card .num {
     font-family: var(--mono);
     font-size: 13px;
     color: var(--muted);
     padding-top: 3px;
   }
   
   .project-card h3 {
     font-family: var(--display);
     font-size: 1.25rem;
     font-weight: 600;
     margin: 0 0 8px;
   }
   
   .project-card .tags {
     font-family: var(--mono);
     font-size: 12px;
     color: var(--accent-warm);
     margin: 0 0 12px;
     letter-spacing: 0.01em;
   }
   
   .project-card p {
     margin: 0;
     color: var(--ink-soft);
     max-width: 60ch;
   }
   
   .project-card .links {
     margin-top: 16px;
     display: flex;
     gap: 20px;
   }
   
   @media (max-width: 640px) {
     .project-card { grid-template-columns: 1fr; }
   }
   
   /* -------------------------------------------------------------------------
      Experience timeline
      ------------------------------------------------------------------------- */
   .timeline {
     padding: 8px 0 100px;
     position: relative;
   }
   
   .timeline::before {
     content: "";
     position: absolute;
     left: 152px;
     top: 8px;
     bottom: 100px;
     width: 1px;
     background: var(--line);
   }
   
   .timeline-entry {
     display: grid;
     grid-template-columns: 152px 1fr;
     gap: 24px;
     padding: 36px 0;
     position: relative;
   }
   
   .timeline-entry .when {
     font-family: var(--mono);
     font-size: 13px;
     color: var(--muted);
     padding-top: 4px;
     text-align: right;
     position: relative;
   }
   
   .timeline-entry .when::after {
     content: "";
     position: absolute;
     right: -25px;
     top: 8px;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--accent);
     transform: translateX(50%);
   }
   
   .timeline-entry .body {
     padding-left: 24px;
     border-left: 1px solid transparent;
   }
   
   .timeline-entry h3 {
     font-family: var(--display);
     font-size: 1.2rem;
     font-weight: 600;
     margin: 0 0 4px;
   }
   
   .timeline-entry .org {
     font-family: var(--mono);
     font-size: 13px;
     color: var(--ink-soft);
     margin: 0 0 14px;
   }
   
   .timeline-entry ul {
     margin: 0;
     padding-left: 18px;
     color: var(--ink-soft);
   }
   
   .timeline-entry li {
     margin-bottom: 6px;
     max-width: 58ch;
   }
   
   @media (max-width: 640px) {
     .timeline::before { left: 6px; }
     .timeline-entry { grid-template-columns: 1fr; gap: 6px; }
     .timeline-entry .when { text-align: left; }
     .timeline-entry .when::after { left: -1px; right: auto; top: 8px; }
     .timeline-entry .body { padding-left: 20px; border-left: 1px solid var(--line); }
   }
   
   /* -------------------------------------------------------------------------
      Footer
      ------------------------------------------------------------------------- */
   .site-footer {
     border-top: 1px solid var(--line);
     padding: 28px var(--edge) 40px;
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     flex-wrap: wrap;
     gap: 10px;
     font-family: var(--mono);
     font-size: 12.5px;
     color: var(--muted);
   }