*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { --bg:#fff; --ink:#111; --muted:#888; --line:rgba(0,0,0,0.12); --ls:-0.03em; }
    html { scrollbar-width:none; }
    html::-webkit-scrollbar { display:none; }
    body { background:var(--bg); color:var(--ink); font-family:'Instrument Sans',sans-serif; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

    /* NAV */
    nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:rgba(255,255,255,0.92); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); opacity:0; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
    nav::after { content:''; position:absolute; bottom:0; left:20px; right:20px; height:1px; background:#111; }
    .nav-logo { font-size:20px; font-weight:500; letter-spacing:var(--ls); text-decoration:none; color:var(--ink); }
    .nav-links { display:flex; gap:40px; }
    .nav-links a, .nav-links .nav-disabled { font-size:20px; font-weight:400; letter-spacing:var(--ls); text-decoration:none; color:var(--ink); transition:opacity 0.2s; }
    .nav-links a:hover { opacity:0.5; }
    .nav-disabled { cursor: default; }
    .nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
    .nav-burger span { display:block; width:24px; height:1.5px; background:var(--ink); transition:all 0.3s; }
    .nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
    .nav-burger.open span:nth-child(2) { opacity:0; }
    .nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
    .mobile-menu { display:none; position:fixed; inset:0; background:var(--bg); z-index:99; flex-direction:column; justify-content:center; padding:32px; gap:32px; }
    .mobile-menu.open { display:flex; }
    .mobile-menu a, .mobile-menu .nav-disabled { font-size:36px; letter-spacing:var(--ls); color:var(--ink); text-decoration:none; }

    /* PAGES */
    .page { display:none; }
    .page.active { display:block; }

    /* WORK PAGE */
    #work-page { padding-top:80px; }

    .hero { display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; padding:160px 20px 160px; }
    .hero p {
      grid-column:1 / 10; font-size:64px; font-weight:400; letter-spacing:var(--ls); line-height:1.06; max-width:none; padding-bottom:0.15em;
    }
    .hero-line-wrap {
      display: block;
      overflow: hidden;
      padding-bottom: 0.15em;
      margin-bottom: -0.15em;
    }
    .hero-line {
      display: block;
      opacity: 0;
      transform: translateY(110%);
      animation: none;
    }
    
    /* scroll-in elements start hidden */
    .fade-in {
      opacity: 0;
      animation: none;
    }
    
    

    /* section header */
    .section-divider {
      display:block;
      border:none;
      border-top:1px solid #111;
      margin:0 20px;
      transform:scaleX(0);
      transform-origin:left;
      animation: none;
      
    }

    /* project */
    .project { padding:32px 20px 0; }
    .img-row { overflow:hidden; }
    .img-track { display:flex; gap:5px; width:max-content; animation:marquee 50s linear infinite; }
    .img-wrap { height:448px; width:480px; flex-shrink:0; overflow:hidden; background:#e8e8e8; opacity:0; transform:translateY(0); transition: opacity 1.0s ease, transform 1.0s ease; }
    .img-wrap.visible { opacity:1; transform:translateY(0); }
    .img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
    @keyframes marquee {
      0% { transform:translateX(0); }
      100% { transform:translateX(-50%); }
    }

    .project-info { display:grid; grid-template-columns:auto auto 1fr auto; gap:0 20px; align-items:start; padding:16px 0 0; }

    @media (min-width:769px) {
      .project-info--grid {
        grid-template-columns: repeat(12, 1fr);
      }

      .project-info--grid > div:nth-child(1) { grid-column: 1 / 2; }
      .project-info--grid > div:nth-child(2) { grid-column: 2 / 4; }
      .project-info--grid > div:nth-child(3) { display: none; }
      .project-info--grid > .project-right { grid-column: 10 / 13; }
    }

    .project-name { font-size:16px; font-weight:600; letter-spacing:var(--ls); line-height:1.3; color:#808080; }
    .project-type { font-size:16px; font-weight:600; letter-spacing:var(--ls); line-height:1.5; }
    .project-date { font-size:16px; font-weight:600; letter-spacing:var(--ls); line-height:1.5; color:#808080; }
    .project-right { display:flex; flex-direction:column; align-items:flex-start; gap:30px; padding-bottom:32px; }
    .project-desc { font-size:16px; letter-spacing:var(--ls); line-height:1.3; text-align:left; max-width:316px; }
    .see-project { font-size:16px; font-weight:500; letter-spacing:var(--ls); color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:4px; transition:color 0.2s; padding-bottom:32px; }
    .see-project:hover { color:var(--ink); }
    .see-project .arrow { display:inline-block; transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
    .see-project:hover .arrow { transform:translate(5px,-5px); }

    /* ABOUT PAGE */
    #about-page { padding-top:80px; }
    .about-hero { padding:80px 32px 64px; }
    .about-hero p { font-size:64px; font-weight:400; letter-spacing:var(--ls); line-height:1.05; max-width:900px; }
    .about-body { padding:48px 32px; display:grid; grid-template-columns:1fr 1fr; gap:80px; }
    .about-body p { font-size:16px; letter-spacing:var(--ls); line-height:1.7; margin-bottom:16px; }
    .about-skills h4 { font-size:16px; letter-spacing:var(--ls); color:var(--muted); margin-bottom:12px; margin-top:32px; }
    .about-skills h4:first-child { margin-top:0; }
    .about-skills ul { list-style:none; }
    .about-skills ul li { font-size:16px; letter-spacing:var(--ls); line-height:1.8; }

    /* CONTACT PAGE */
    #contact-page { padding-top:80px; }
    .contact-hero { padding:80px 32px 64px; }
    .contact-hero p { font-size:64px; font-weight:400; letter-spacing:var(--ls); line-height:1.05; }
    .contact-links { padding:0 32px; }
    .contact-link { display:flex; justify-content:space-between; align-items:center; padding:24px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:opacity 0.2s; }
    .contact-link:first-child { border-top:1px solid var(--line); }
    .contact-link:hover { opacity:0.5; }
    .contact-link-label { font-size:16px; letter-spacing:var(--ls); color:var(--muted); width:120px; }
    .contact-link-value { font-size:16px; letter-spacing:var(--ls); }
    .contact-link-arrow { font-size:16px; transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
    .contact-link:hover .contact-link-arrow { transform:translate(4px,-4px); }

    /* FOOTER */
    footer { padding:32px 20px; display:flex; justify-content:space-between; align-items:center; margin-top:64px; }
    footer p, footer a { font-size:14px; font-weight:500; letter-spacing:var(--ls); color:var(--muted); text-decoration:none; }
    footer a:hover { color:var(--ink); }
    .footer-links { display:flex; gap:24px; }

    /* RESPONSIVE */
    @media (max-width:768px) {
      nav { padding:16px 20px; }
      .nav-links { display:none; }
      .nav-burger { display:flex; }
      .hero, .about-hero, .contact-hero { padding:120px 20px 120px; }
      .hero p, .about-hero p, .contact-hero p { font-size:36px; }
      .hero p { grid-column:1 / -1; }
      #work-page, #about-page, #contact-page { padding-top:64px; }
      .section-divider { margin:12px 20px 0; }
      .project { padding:24px 20px 0; }
      .img-row { overflow:hidden; }
      .img-wrap { height:275px; width:320px; }
      .img-row .img-wrap:nth-child(3) { display:none; }
      .project-info { display:grid; grid-template-columns:auto auto 1fr; gap:36px 20px; padding-top:24px; }
      .project-right { grid-column:1/-1; align-items:flex-start; width:100%; }
      .project-desc { max-width:340px; width:100%; }
      .about-body { padding:32px 20px; grid-template-columns:1fr; gap:40px; }
      .contact-links { padding:0 20px; }
      footer { padding:24px 20px; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; }
      .footer-links { gap:16px; }
    }
  
    .all-work-wrap {
      margin: 0 20px;
      padding: 16px 0 0;
      overflow: hidden;
    }
    .all-work-inner {
      display: inline-block;
      font-size: 24px;
      font-weight: 400;
      font-family: inherit;
      letter-spacing: var(--ls);
      color: var(--ink);
      opacity: 0;
      transform: translateY(110%);
      animation: none;
    }
    /* ── SITE WRAP ── */
    #site-wrap {
      position: static;
      background: #fff;
      overflow-y: visible;
      overflow-x: hidden;
    }