*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --black: #0a0a0a;
      --white: #f5f4f0;
      --gray: #888;
      --light-gray: #d0ceca;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--white);
      color: var(--black);
      font-family: 'Manrope', sans-serif;
      font-weight: 300;
      overflow-x: hidden;
      cursor: none;
    }

    /* ── CURSOR ── */
    .cursor {
      position: fixed;
      width: 12px; height: 12px;
      background: #ffffff;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      mix-blend-mode: difference;
      transition: transform 0.12s ease, width 0.2s ease, height 0.2s ease;
    }
    .cursor-ring {
      position: fixed;
      width: 38px; height: 38px;
      border: 1.5px solid #ffffff;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      mix-blend-mode: difference;
      transition: width 0.25s ease, height 0.25s ease, opacity 0.2s ease;
      opacity: 0.6;
    }

    /* GRAIN */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: 0.04;
      pointer-events: none;
      z-index: 9997;
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 1000;
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.5rem 3rem;
      background: rgba(245,244,240,0.9);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      transition: background 0.45s ease, border-color 0.45s ease;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards 2.3s;
    }
    nav.nav-dark {
      background: rgba(10,10,10,0.9);
      border-bottom-color: rgba(255,255,255,0.07);
    }
    .nav-logo {
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem; font-weight: 400;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--black); text-decoration: none;
      transition: color 0.45s ease;
    }
    nav.nav-dark .nav-logo { color: var(--white); }
    .nav-links { display: flex; gap: 2.5rem; list-style: none; }
    .nav-links a {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--black); text-decoration: none;
      opacity: 0.5; transition: opacity 0.2s, color 0.45s ease;
    }
    nav.nav-dark .nav-links a { color: var(--white); }
    .nav-links a:hover { opacity: 1; }

    /* ── HERO ── */
    #hero {
      height: 100vh;
      display: flex; flex-direction: column; justify-content: center;
      position: relative; padding: 0 3rem; overflow: hidden;
    }

    .hero-eyebrow {
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--gray); margin-bottom: 1.8rem;
      opacity: 0; animation: fadeUp 0.8s ease forwards 2.3s;
      position: relative; z-index: 1;
    }

    .hero-greeting {
      font-family: 'DM Mono', monospace;
      font-weight: 300;
      font-size: clamp(0.8rem, 1.5vw, 1.1rem);
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--gray);
      margin-bottom: 0.6rem;
      opacity: 0; animation: fadeUp 0.8s ease forwards 2.55s;
      position: relative; z-index: 1;
    }

    /* SPENCER */
    .hero-name {
      font-family: 'Bebas Neue', sans-serif;
      font-weight: 400;
      font-size: clamp(6rem, 16vw, 15rem);
      line-height: 0.88;
      letter-spacing: 0.2em;
      color: var(--black);
      display: flex;
      align-items: baseline;
      margin-bottom: 2.5rem;
      position: relative; z-index: 1;
    }

    .hero-letter {
      display: inline-block;
      opacity: 0;
      animation: letterPop 0.06s ease forwards;
    }
    .hero-letter:nth-child(1) { animation-delay: 2.80s; }
    .hero-letter:nth-child(2) { animation-delay: 2.92s; }
    .hero-letter:nth-child(3) { animation-delay: 3.04s; }
    .hero-letter:nth-child(4) { animation-delay: 3.16s; }
    .hero-letter:nth-child(5) { animation-delay: 3.28s; }
    .hero-letter:nth-child(6) { animation-delay: 3.40s; }
    .hero-letter:nth-child(7) { animation-delay: 3.52s; }

    /* ── TRANSMUTATION CIRCLE WATERMARK ── */
    .hero-sigil {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) scale(1);
      width: 72vw;
      height: 72vw;
      max-width: 920px;
      max-height: 920px;
      opacity: 0.10;
      color: #8a7050;
      pointer-events: none;
      z-index: 0;
      overflow: visible;
      /* Parent handles only opacity/color/scale — NO filter here */
      animation: sigilIntro 2.2s ease-out forwards;
      will-change: opacity, color, transform;
    }
    @keyframes sigilIntro {
      0%   { opacity: 0;    color: #f5c842; transform: translate(-50%,-50%) scale(1.28); }
      12%  { opacity: 0.82; color: #f5c842; transform: translate(-50%,-50%) scale(1.22); }
      55%  { opacity: 0.28; color: #d09030; transform: translate(-50%,-50%) scale(1.02); }
      80%  { opacity: 0.13; color: #9a7858; transform: translate(-50%,-50%) scale(1.0);  }
      100% { opacity: 0.10; color: #8a7050; transform: translate(-50%,-50%) scale(1.0);  }
    }

    /* Groups: glow lives HERE (per-group, not parent SVG) — no full-element rasterization */
    #sigilOuter {
      transform-box: fill-box;
      transform-origin: center;
      will-change: transform, filter;
      animation:
        outerIntro 2.0s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        groupGlow  2.2s ease-out forwards;
    }
    #sigilMiddle {
      transform-box: fill-box;
      transform-origin: center;
      will-change: transform, filter;
      animation:
        middleIntro 2.0s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        groupGlow   2.2s ease-out forwards;
    }
    #sigilInner {
      transform-box: fill-box;
      transform-origin: center;
      will-change: transform, filter;
      animation:
        innerIntro 2.0s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        groupGlow  2.2s ease-out forwards;
    }
    /* 50% slower start angles, smooth pure decel — no overshoot */
    @keyframes outerIntro  { from { transform: rotate(-75deg);  } to { transform: rotate(0deg); } }
    @keyframes middleIntro { from { transform: rotate( 60deg);  } to { transform: rotate(0deg); } }
    @keyframes innerIntro  { from { transform: rotate(-100deg); } to { transform: rotate(0deg); } }
    /* Per-group glow — strokes glow, not the whole SVG bitmap */
    @keyframes groupGlow {
      0%   { filter: drop-shadow(0 0 10px #f5c842) drop-shadow(0 0 28px #c8860a) drop-shadow(0 0 52px rgba(200,136,10,0.7)); }
      30%  { filter: drop-shadow(0 0 8px #d49020)  drop-shadow(0 0 18px rgba(180,110,10,0.5)); }
      70%  { filter: drop-shadow(0 0 3px rgba(180,110,10,0.25)); }
      100% { filter: none; }
    }

    @keyframes letterPop {
      from { opacity:0; transform:translateY(12px) scale(0.94); }
      to   { opacity:1; transform:translateY(0) scale(1); }
    }

    /* Tagline */
    .hero-tagline-wrap {
      max-width: 580px;
      opacity: 0; animation: fadeUp 0.9s ease forwards 3.75s;
      position: relative; z-index: 1;
    }
    .hero-tagline {
      font-family: 'Manrope', sans-serif; font-style: normal; font-weight: 300;
      font-size: clamp(1rem, 2vw, 1.45rem);
      line-height: 1.55; color: var(--black);
    }
    .hero-tagline em {
      font-style: normal; font-weight: 600; position: relative;
    }

    /* Freelance availability badge */
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      margin-top: 2.5rem;
      padding: 0.5rem 1.1rem;
      border: 1px solid var(--black);
      width: fit-content;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards 4.0s;
      cursor: default;
      position: relative; z-index: 1;
    }
    .hero-badge-text {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--black);
    }
    .hero-badge-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #22c55e;
      flex-shrink: 0;
      position: relative;
    }
    .hero-badge-dot::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      background: #22c55e;
      opacity: 0.3;
      animation: pulse 2s ease-out infinite;
    }
    @keyframes pulse {
      0%   { transform: scale(1);   opacity: 0.3; }
      70%  { transform: scale(2.2); opacity: 0; }
      100% { transform: scale(2.2); opacity: 0; }
    }

    .hero-scroll {
      position: absolute; bottom: 2.5rem; left: 3rem;
      display: flex; align-items: center; gap: 1rem;
      opacity: 0; animation: fadeUp 0.8s ease forwards 4.2s;
      z-index: 1;
    }
    .hero-scroll span {
      font-family: 'DM Mono', monospace; font-size: 0.62rem;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray);
    }
    .scroll-line { width:40px; height:1px; background:var(--gray); position:relative; overflow:hidden; }
    .scroll-line::after {
      content:''; position:absolute; top:0; left:-100%;
      width:100%; height:100%; background:var(--black);
      animation: slideRight 2s ease infinite 2.6s;
    }
    @keyframes slideRight { 0%{left:-100%} 50%{left:0} 100%{left:100%} }

    .hero-location {
      position: absolute; bottom: 2.5rem; right: 3rem;
      font-family: 'DM Mono', monospace; font-size: 0.62rem;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray);
      opacity: 0; animation: fadeUp 0.8s ease forwards 4.2s;
      z-index: 1;
    }

    /* ── SECTIONS ── */
    section { padding: 7rem 3rem; border-top: 1px solid var(--light-gray); }
    #experience { position: relative; z-index: 1; }
    .section-header { display:flex; align-items:baseline; gap:1.5rem; margin-bottom:4rem; }
    .section-number { font-family:'DM Mono',monospace; font-size:0.65rem; letter-spacing:0.2em; color:var(--gray); text-transform:uppercase; }
    .section-title { font-family:'Manrope',sans-serif; font-size:clamp(2rem,4vw,3.2rem); font-weight:700; letter-spacing:-0.03em; line-height:1; }

    /* ── ALCHEMIST ── */
    .alchemist-outer {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      width: 100%;
    }
    #alchemist-wrapper {
      position: relative;
      width: 100%;
      min-height: 380px;
      height: 100%;
      flex-shrink: 0;
    }
    #alchemist-wrapper::after {
      content: '';
      position: absolute;
      bottom: -20%;
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      height: 30px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      filter: blur(14px);
    }
    #alchemist-canvas {
      position: absolute;
      top: 50%; left: 50%;
      width: 79%;
      height: auto;
      aspect-ratio: 1611 / 2000;
      transform: translate(-50%, -50%);
      display: block;
      background: transparent;
    }
    .alch-symbol {
      position: absolute;
      top: 0; left: 0;
      font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', serif;
      opacity: 0;
      pointer-events: none;
      will-change: transform, opacity;
      user-select: none;
    }

    #about { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 3; }
    #about .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; padding-top: 1rem; }
    /* ── ABOUT TEXT ── */
    .about-text p,
    .about-distiller {
      font-family: 'Manrope', sans-serif;
      font-size: clamp(1rem, 2vw, 1.45rem);
      line-height: 1.7;
      color: var(--black);
      margin-bottom: 2rem;
      font-weight: 300;
      font-style: normal;
    }
    .about-text p strong { color:var(--black); font-weight:600; }

    /* "I subtract." — Manrope, medium weight */
    .about-subtract {
      font-family: 'Manrope', sans-serif;
      font-size: inherit;
      font-weight: 500;
      color: var(--black);
      display: inline;
      font-style: normal;
    }

    /* noise — roman (not italic), light smudge */
    .smudge {
      display: inline-block;
      color: #666;
      font-family: inherit;
      font-size: inherit;
      font-style: normal;
      text-shadow:
        -7px 3px 0 rgba(80,80,80,0.42),
         7px -3px 0 rgba(80,80,80,0.32);
      letter-spacing: 0.04em;
    }

    /* Metallic gold gradient */
    .gold {
      display: inline-block;
      font-style: normal;
      font-weight: 700;
      font-size: 1.4em;
      letter-spacing: 0.01em;
      background-image: linear-gradient(
        100deg,
        #7a5200 0%,
        #c8860a 18%,
        #f5c842 34%,
        #fff0a0 48%,
        #f5c842 62%,
        #c8860a 78%,
        #7a5200 92%,
        #e8b030 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .social-links { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; }
    .social-link {
      font-family:'DM Mono',monospace; font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase;
      color:var(--black); text-decoration:none; border:1px solid var(--black); padding:0.5rem 1.1rem;
      transition:background 0.2s, color 0.2s, border-color 0.2s;
    }
    .social-link:hover { border-color: #c8860a; color: #c8860a; }

    /* ── PROJECTS ── */
    #projects { background:var(--black); color:var(--white); position:relative; z-index: 2; }
    #projects .section-number { color:#555; }
    #projects .section-title  { color:var(--white); }

    /* Particle canvas */
    #projects-particles { position:absolute; inset:0; pointer-events:none; z-index:0; }
    #projects .section-header { position:relative; z-index:1; }
    .projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem; position:relative; z-index:1; }

    /* Card base */
    .project-card { position:relative; background:transparent; border:1px solid #1e1e1e; transition:border-color 0.4s ease; }
    .project-card.featured { grid-column:1/-1; border-color:transparent; overflow:visible; }

    .project-card-inner { padding:2.5rem; display:flex; flex-direction:column; gap:1.2rem; height:100%; background:transparent; padding-bottom:1.5rem; }
    .project-card.featured .project-card-inner { display:grid; grid-template-columns:1.3fr 1fr; gap:4rem; align-items:center; padding:0; }
    .project-card.featured .project-details { display:flex; flex-direction:column; gap:1.2rem; }

    /* ── MACBOOK MOCKUP ── */
    .macbook-mockup {
      width: 100%;
    }
    .macbook-photo {
      width: 100%;
      height: auto;
      display: block;
    }

    .project-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }
    .project-title { font-family:'Manrope',sans-serif; font-size:1.3rem; font-weight:700; color:var(--white); line-height:1.2; letter-spacing:-0.02em; }
    .project-desc { font-size:0.88rem; line-height:1.75; color:#aaa; font-weight:300; }
    /* Project details — frosted glass to kill particle bleed-through */
    .project-card.featured .project-details {
      display: flex; flex-direction: column; gap: 1.2rem;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      background: rgba(10,10,10,0.55);
      border-radius: 6px;
      padding: 2rem;
    }

    /* Gold tag */
    .project-tag { font-family:'DM Mono',monospace; font-size:0.58rem; letter-spacing:0.15em; text-transform:uppercase; color:#555; border:1px solid #2a2a2a; padding:0.25rem 0.6rem; }

    /* ── EXPERIENCE TIMELINE ── */
    .timeline-track {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1.5rem;
      margin-bottom: 5rem;
    }
    .timeline-svg {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 40px;
      overflow: visible;
      pointer-events: none;
      z-index: 0;
    }
    #timeline-path {
      fill: none;
      stroke: url(#tlGrad);
      stroke-width: 1;
      /* rAF owns all path animation — zero CSS transition */
    }
    .timeline-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
      flex: 1 1 0;
      min-width: 0;
    }
    .timeline-node:hover { z-index: 3; }
    .timeline-dot {
      width: 14px; height: 14px;
      border-radius: 50%;
      border: 1.5px solid #c8860a;
      background: radial-gradient(circle, #f5c842 0%, #c8860a 100%);
      flex-shrink: 0;
      position: relative; z-index: 2;
      transition: box-shadow 0.4s ease;
    }
    .timeline-node:hover .timeline-dot {
      box-shadow: 0 0 0 6px rgba(200, 140, 10, 0.22);
    }
    .timeline-stem {
      width: 1px;
      height: 2.5rem;
      background: linear-gradient(to bottom, #c8860a 0%, rgba(200,136,10,0.06) 100%);
      flex-shrink: 0;
    }
    .timeline-content {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      padding: 1.4rem 1.5rem;
      border: 1px solid rgba(200, 136, 10, 0.12);
      background: var(--white);
      position: relative; z-index: 2;
      text-align: center;
      width: 100%;
      transform-origin: center center;
      transition:
        transform    0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.5s ease,
        box-shadow   0.5s ease;
    }
    .timeline-node:hover .timeline-content {
      transform: scale(1.06);
      border-color: rgba(200, 136, 10, 0.45);
      box-shadow:
        0 0 32px rgba(200, 140, 10, 0.13),
        0 0 72px rgba(200, 140, 10, 0.07),
        inset 0 0 20px rgba(245, 200, 66, 0.05);
    }
    .exp-alchemy {
      font-family: 'DM Mono', monospace;
      font-size: 0.52rem; color: #bba;
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-top: 0.15rem; margin-bottom: 0.25rem;
    }
    .exp-company {
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem; letter-spacing: 0.15em;
      text-transform: uppercase; color: #c8860a;
    }
    .exp-role {
      font-family: 'Manrope', sans-serif;
      font-size: 1.1rem; font-weight: 700;
      color: var(--black); line-height: 1.3;
      letter-spacing: -0.02em; margin-top: 0.1rem;
    }
    .exp-period {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem; letter-spacing: 0.12em;
      color: var(--gray); margin-top: 0.3rem;
    }

    /* ── SKILLS MARQUEE ── */
    .skills-label { font-family:'DM Mono',monospace; font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray); margin-bottom:2rem; }
    .marquee-wrapper {
      overflow:hidden;
      mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);
      -webkit-mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);
    }
    .marquee-track {
      display:flex; width:max-content;
      animation: marquee 28s linear infinite;
    }
    @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    .skill-pill {
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
      margin-right: 3rem;
    }
    .skill-pill img { width:68px; height:68px; object-fit:contain; display:block; }

    /* ── CONTACT ── */
    #contact { background:var(--black); color:var(--white); text-align:center; padding:9rem 3rem; border-top-color:#1e1e1e; position:relative; overflow:hidden; }

    /* Diagonal gold lines parallax canvas */
    #contact-lines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    /* Lift contact content above canvas */
    #contact .section-header,
    #contact .contact-headline,
    #contact .contact-sub,
    #contact .contact-email {
      position: relative;
      z-index: 1;
    }
    #contact .section-number { color:#555; }
    .contact-headline { font-family:'Manrope',sans-serif; font-size:clamp(2.5rem,6vw,5rem); font-weight:800; line-height:1; letter-spacing:-0.04em; color:var(--white); margin:1.5rem auto 1rem; max-width:700px; }
    .contact-sub { font-size:0.9rem; color:#666; font-weight:300; margin-bottom:3rem; }
    .contact-email { font-family:'Manrope',sans-serif; font-size:clamp(1rem,2.5vw,1.4rem); font-weight:300; font-style:normal; color:var(--white); text-decoration:none; border-bottom:1px solid #444; padding-bottom:0.3rem; transition:border-color 0.2s; }
    .contact-email:hover { border-color:var(--white); }

    /* ── FOOTER ── */
    footer { background:var(--black); padding:2rem 3rem; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #1e1e1e; }
    footer p { font-family:'DM Mono',monospace; font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:#444; }
    footer p.footer-gold { color: #c8860a; }

    /* ── SCROLL REVEAL ── */
    .reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s ease, transform 0.8s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .reveal-delay-1 { transition-delay:0.1s; }
    .reveal-delay-2 { transition-delay:0.2s; }
    .reveal-delay-3 { transition-delay:0.3s; }
    .reveal-delay-4 { transition-delay:0.4s; }

    @keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

    /* ── SKIP INTRO (refresh) — jump all animated hero els to final state ── */
    html.skip-intro body nav,
    html.skip-intro body .hero-eyebrow,
    html.skip-intro body .hero-greeting,
    html.skip-intro body .hero-tagline-wrap,
    html.skip-intro body .hero-badge,
    html.skip-intro body .hero-scroll,
    html.skip-intro body .hero-location {
      opacity: 1 !important;
      transform: translateY(0) !important;
      animation: none !important;
    }
    html.skip-intro body .hero-letter {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
    html.skip-intro body .hero-sigil {
      opacity: 0.10 !important;
      animation: none !important;
    }
    html.skip-intro body #sigilOuter,
    html.skip-intro body #sigilMiddle,
    html.skip-intro body #sigilInner {
      animation: none !important;
      filter: none !important;
    }

    /* ── RESPONSIVE ── */
    @media (max-width:900px) {
      .projects-grid { grid-template-columns:1fr; }
      .project-card.featured .project-card-inner { grid-template-columns:1fr; }
    }
    @media (max-width:768px) {
      nav { padding:1.2rem 1.5rem; }
      section { padding:5rem 1.5rem; }
      #hero { padding:0 1.5rem; }
      .hero-scroll { left:1.5rem; } .hero-location { right:1.5rem; }
      #about .about-grid { grid-template-columns:1fr; gap:3rem; }
      .cursor,.cursor-ring { display:none; }
      body { cursor:auto; }
      /* Vertical timeline — disable all JS hover effects */
      .timeline-track {
        flex-direction: column; align-items: flex-start;
        padding-left: 2.5rem; gap: 2.5rem;
      }
      .timeline-svg { display: none; }
      .timeline-track::before {
        content: ''; position: absolute; top: 0; left: 0;
        width: 1px; height: 100%;
        background: linear-gradient(to bottom, transparent 0%, #c8860a 10%, #f5c842 50%, #c8860a 90%, transparent 100%);
      }
      .timeline-node {
        flex-direction: row; align-items: flex-start;
        width: 100%; transform: none !important;
      }
      .timeline-dot {
        position: absolute; left: -2.5rem; top: 0;
        transform: translateX(calc(-50% + 0.5px)) !important;
      }
      .timeline-stem { display: none; }
      .timeline-content { text-align: left; transform: none !important; }
    }