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

 :root {
   --bg: #0a0a0a;
   --bg2: #111111;
   --gold: #c9a84c;
   --gold-dim: #8a6d2e;
   --white: #f0ece4;
   --muted: #5a5650;
   --border: rgba(201, 168, 76, 0.15);
   --font-display: 'Cormorant Garamond', Georgia, serif;
   --font-ui: 'Syne', sans-serif;
   --font-mono: 'DM Mono', monospace;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   background: var(--bg);
   color: var(--white);
   font-family: var(--font-display);
   font-size: 18px;
   line-height: 1.7;
   overflow-x: hidden;
 }

 /* ── Noise overlay ── */
 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)' opacity='1'/%3E%3C/svg%3E");
   opacity: 0.028;
   pointer-events: none;
   z-index: 9990;
 }

 /* ── Nav ── */
 nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 28px 60px;
   background: linear-gradient(to bottom, rgba(10, 10, 10, 0.95) 0%, transparent 100%);
 }

 .nav-logo {
   font-family: var(--font-ui);
   font-weight: 800;
   font-size: 15px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--gold);
 }

 .nav-links {
   display: flex;
   gap: 40px;
 }

 .nav-links a {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--muted);
   text-decoration: none;
   transition: color 0.25s;
   position: relative;
 }

 .nav-links a::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -3px;
   width: 0;
   height: 1px;
   background: var(--gold);
   transition: width 0.3s ease;
 }

 .nav-links a:hover {
   color: var(--white);
 }

 .nav-links a:hover::after {
   width: 100%;
 }

 /* ── Hero ── */

 #hero {
   min-height: 100vh;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   padding: 0 60px;
   position: relative;
   overflow: hidden;
 }

 .hero-left {
   padding-right: 60px;
 }

 .hero-eyebrow {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 36px;
   opacity: 0;
   animation: fadeUp 0.8s 0.3s forwards;
 }

 .eyebrow-item {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 0.28em;
   text-transform: uppercase;
   color: var(--muted);
   position: relative;
   transition: color 0.3s, gap 0.3s;
 }

 .eyebrow-item:hover {
   color: var(--white);
   gap: 18px;
 }

 .eyebrow-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--gold);
   flex-shrink: 0;
   box-shadow: 0 0 6px rgba(201, 168, 76, 0.5);
   transition: transform 0.3s, box-shadow 0.3s;
 }

 .eyebrow-item:hover .eyebrow-dot {
   transform: scale(1.6);
   box-shadow: 0 0 12px rgba(201, 168, 76, 0.8);
 }

 .eyebrow-item::after {
   content: '';
   flex: 1;
   max-width: 32px;
   height: 1px;
   background: linear-gradient(to right, var(--gold-dim), transparent);
   opacity: 0.5;
   transition: max-width 0.3s, opacity 0.3s;
 }

 .hero-eyebrow1 {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 28px;
   opacity: 0;
   animation: fadeUp 0.8s 0.3s forwards;
 }

 .eyebrow-item:hover::after {
   max-width: 52px;
   opacity: 1;
 }

 .hero-name {
   font-size: clamp(56px, 7vw, 100px);
   font-weight: 300;
   line-height: 1.0;
   letter-spacing: -0.01em;
   color: var(--white);
   opacity: 0;
   animation: fadeUp 0.8s 0.5s forwards;
 }

 .hero-name em {
   font-style: italic;
   color: var(--gold);
 }

 .hero-tagline {
   margin-top: 32px;
   font-size: 17px;
   font-weight: 300;
   color: var(--muted);
   max-width: 440px;
   line-height: 1.8;
   opacity: 0;
   animation: fadeUp 0.8s 0.7s forwards;
 }

 .hero-cta-row {
   margin-top: 52px;
   display: flex;
   gap: 24px;
   align-items: center;
   opacity: 0;
   animation: fadeUp 0.8s 0.9s forwards;
 }

 .btn-primary {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--bg);
   background: var(--gold);
   padding: 14px 32px;
   text-decoration: none;
   display: inline-block;
   transition: background 0.25s, transform 0.2s;
 }

 .btn-primary:hover {
   background: #e0ba5c;
   transform: translateY(-1px);
 }

 .btn-ghost {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--muted);
   text-decoration: none;
   border-bottom: 1px solid var(--border);
   padding-bottom: 2px;
   transition: color 0.25s, border-color 0.25s;
 }

 .btn-ghost:hover {
   color: var(--white);
   border-color: var(--muted);
 }

 .hero-bg-circle {
   position: absolute;
   right: -100px;
   top: 50%;
   transform: translateY(-50%);
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(201, 168, 76, 0.05) 0%, transparent 70%);
   pointer-events: none;
 }

 .hero-right-deco {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   height: 100%;
   min-height: 500px;
 }

 .deco-orbit {
   position: relative;
   width: 380px;
   height: 380px;
 }

 .deco-ring {
   position: absolute;
   border-radius: 50%;
   border: 1px solid var(--border);
 }

 .deco-ring:nth-child(1) {
   inset: 0;
   animation: spin 40s linear infinite;
 }

 .deco-ring:nth-child(2) {
   inset: 13%;
   border-style: dashed;
   border-color: rgba(201, 168, 76, 0.12);
   animation: spin 25s linear infinite reverse;
 }

 .deco-ring:nth-child(3) {
   inset: 28%;
   border-color: rgba(201, 168, 76, 0.22);
   animation: spin 16s linear infinite;
 }

 .deco-ring:nth-child(4) {
   inset: 43%;
   border-color: rgba(201, 168, 76, 0.4);
   animation: spin 10s linear infinite reverse;
 }

 .deco-dot-wrap {
   position: absolute;
   inset: 0;
   border-radius: 50%;
 }

 .deco-dot-wrap-1 {
   animation: spin 40s linear infinite;
 }

 .deco-dot-wrap-2 {
   animation: spin 25s linear infinite reverse;
 }

 .deco-dot-wrap-3 {
   animation: spin 16s linear infinite;
 }

 .deco-dot {
   position: absolute;
   border-radius: 50%;
   background: var(--gold);
 }

 .deco-dot-1 {
   width: 7px;
   height: 7px;
   top: -3.5px;
   left: 50%;
   transform: translateX(-50%);
 }

 .deco-dot-2 {
   width: 5px;
   height: 5px;
   top: calc(13% - 2.5px);
   left: 50%;
   transform: translateX(-50%);
   background: rgba(201, 168, 76, 0.6);
 }

 .deco-dot-3 {
   width: 4px;
   height: 4px;
   top: calc(28% - 2px);
   left: 50%;
   transform: translateX(-50%);
 }

 .deco-center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(201, 168, 76, 0.3) 0%, transparent 70%);
   border: 1px solid rgba(201, 168, 76, 0.35);
 }

 .deco-label {
   position: absolute;
   font-family: var(--font-mono);
   font-size: 9px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--gold-dim);
   white-space: nowrap;
 }

 .deco-label-1 {
   top: 8%;
   left: 56%;
 }

 .deco-label-2 {
   bottom: 18%;
   left: 8%;
 }

 .deco-label-3 {
   top: 46%;
   right: 2%;
 }

 .deco-vline {
   position: absolute;
   top: 0;
   left: 50%;
   width: 1px;
   height: 100%;
   background: linear-gradient(to bottom, transparent 0%, var(--border) 30%, var(--border) 70%, transparent 100%);
   transform: translateX(-50%);
 }

 .hero-right-deco-fade {
   opacity: 0;
   animation: fadeIn 1.2s 1s forwards;
 }

 /* ── Section shared ── */
 section {
   padding: 120px 60px;
 }

 .section-tag {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: var(--gold-dim);
   margin-bottom: 20px;
 }

 .section-heading {
   font-size: clamp(38px, 4vw, 60px);
   font-weight: 300;
   line-height: 1.1;
   letter-spacing: -0.01em;
 }

 .section-heading em {
   font-style: italic;
   color: var(--gold);
 }

 /* ── About ── */
 #about {
   background: var(--bg2);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1.4fr;
   gap: 100px;
   margin-top: 70px;
   align-items: start;
 }

 .about-photo-wrap {
   position: relative;
 }

 .about-photo-placeholder {
   width: 100%;
   aspect-ratio: 3/4;
   background: linear-gradient(135deg, #1a1a1a 0%, #222 50%, #161616 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }
.about-photo-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
 .about-photo-placeholder::before {
   content: '';
   position: absolute;
   inset: 0;
   background: repeating-linear-gradient(45deg,
       transparent, transparent 20px,
       rgba(201, 168, 76, 0.03) 20px, rgba(201, 168, 76, 0.03) 21px);
 }

 .about-photo-placeholder span {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--muted);
 }

 .about-photo-frame {
   position: absolute;
   top: 16px;
   left: 16px;
   right: -16px;
   bottom: -16px;
   border: 1px solid var(--border);
   pointer-events: none;
   z-index: -1;
 }

 .about-text .section-heading {
   margin-bottom: 32px;
 }

 .about-bio {
   font-size: 18px;
   font-weight: 300;
   color: #b0a898;
   line-height: 1.9;
   margin-bottom: 24px;
 }

 .about-bio strong {
   color: var(--white);
   font-weight: 400;
 }

 .skills-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px 40px;
   margin-top: 40px;
 }

 .skill-item {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.1em;
   color: var(--muted);
   transition: color 0.2s;
 }

 .skill-item::before {
   content: '▸';
   color: var(--gold);
   font-size: 10px;
 }

 .skill-item:hover {
   color: var(--white);
 }

 /* ── Projects ── */
 #projects {
   padding-top: 120px;
   padding-bottom: 80px;
 }

 .projects-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 80px;
 }

 .projects-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2px;
 }

 .project-card {
   position: relative;
   background: var(--bg2);
   overflow: hidden;
 }

 .project-card:first-child {
   grid-column: 1 / -1;
 }

 .project-card-inner {
   padding: 52px;
   position: relative;
   z-index: 1;
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .project-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
   opacity: 0;
   transition: opacity 0.4s;
 }

 .project-card:hover::before {
   opacity: 1;
 }

 .project-card:hover .project-card-inner {
   transform: translateY(-4px);
 }

 .project-number {
   font-family: var(--font-mono);
   font-size: 15px;
   letter-spacing: 0.2em;
   color: var(--gold-dim);
   margin-bottom: 28px;
 }

 .project-title {
   font-size: 32px;
   font-weight: 300;
   letter-spacing: -0.01em;
   line-height: 1.1;
   margin-bottom: 16px;
 }

 .project-card:first-child .project-title {
   font-size: 44px;
 }

 .project-desc {
   font-size: 15px;
   color: var(--muted);
   font-weight: 300;
   max-width: 460px;
   line-height: 1.7;
   margin-bottom: 32px;
 }

 .project-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 36px;
 }

 .tag {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--gold-dim);
   border: 1px solid var(--border);
   padding: 5px 12px;
 }

 .project-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--white);
   text-decoration: none;
   transition: color 0.2s, gap 0.2s;
 }

 .project-link:hover {
   color: var(--gold);
   gap: 14px;
 }

 .project-link svg {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   fill: none;
 }

 .project-visual {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 40%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }

 .project-card:first-child .project-visual {
   width: 45%;
 }

 .project-visual-inner {
   width: 240px;
   height: 240px;
   position: relative;
 }

 .project-card:first-child .project-visual-inner {
   width: 320px;
   height: 320px;
 }

 .ring {
   position: absolute;
   border-radius: 50%;
   border: 1px solid var(--border);
   animation: spin linear infinite;
 }

 .ring:nth-child(1) {
   inset: 0;
   animation-duration: 30s;
 }

 .ring:nth-child(2) {
   inset: 15%;
   border-style: dashed;
   animation-duration: 20s;
   animation-direction: reverse;
 }

 .ring:nth-child(3) {
   inset: 30%;
   border-color: rgba(201, 168, 76, 0.25);
   animation-duration: 14s;
 }

 .ring-dot {
   position: absolute;
   inset: 50%;
   width: 6px;
   height: 6px;
   background: var(--gold);
   border-radius: 50%;
   transform: translate(-50%, -50%) translateX(108px);
 }

 .project-card:first-child .ring-dot {
   transform: translate(-50%, -50%) translateX(148px);
 }

 /* ── Contact ── */
 #contact {
   background: var(--bg2);
   border-top: 1px solid var(--border);
   text-align: center;
   padding: 140px 60px;
 }

 .contact-eyebrow {
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: var(--gold-dim);
   margin-bottom: 24px;
 }

 .contact-heading {
   font-size: clamp(48px, 6vw, 88px);
   font-weight: 300;
   line-height: 1.0;
   max-width: 800px;
   margin: 0 auto 48px;
 }

 .contact-heading em {
   font-style: italic;
   color: var(--gold);
 }

 .contact-email {
   display: inline-block;
   font-family: var(--font-mono);
   font-size: 13px;
   letter-spacing: 0.12em;
   color: var(--muted);
   text-decoration: none;
   border-bottom: 1px solid var(--border);
   padding-bottom: 4px;
   margin-bottom: 60px;
   transition: color 0.25s, border-color 0.25s;
 }

 .contact-email:hover {
   color: var(--gold);
   border-color: var(--gold-dim);
 }

 .social-links {
   display: flex;
   justify-content: center;
   gap: 48px;
 }

 .social-link {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   color: var(--muted);
   text-decoration: none;
   transition: color 0.25s;
 }

 .social-link:hover {
   color: var(--white);
 }

 /* ── Footer ── */
 footer {
   padding: 32px 60px;
   border-top: 1px solid var(--border);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 footer span {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 0.15em;
   color: var(--muted);
 }

 /* ── Scroll reveal ── */
 .reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .reveal.visible {
   opacity: 1;
   transform: none;
 }

 /* ── Keyframes ── */
 @keyframes fadeIn {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(24px);
   }

   to {
     opacity: 1;
     transform: none;
   }
 }

 @keyframes floatLabel {

   0%,
   100% {
     transform: translateY(0px);
     opacity: 0.6;
   }

   50% {
     transform: translateY(-6px);
     opacity: 1;
   }
 }
.deco-label-1 {font-size: 20px; top: 6%; right: 4%; animation: floatLabel 4s ease-in-out infinite; }
.deco-label-2 {font-size: 20px; bottom: 10%; left: 2%; animation: floatLabel 4s ease-in-out 1.3s infinite; }
.deco-label-3 {font-size: 20px; top: 48%; right: -2%; animation: floatLabel 4s ease-in-out 2.6s infinite; }
.deco-label-4 {font-size: 20px; top: 6%; left: 2%; animation: floatLabel 4s ease-in-out 0.65s infinite; }

 @keyframes spin {
   from {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(360deg);
   }
 }

 /* ── Scrollbar ── */
 ::-webkit-scrollbar {
   width: 4px;
 }

 ::-webkit-scrollbar-track {
   background: var(--bg);
 }

 ::-webkit-scrollbar-thumb {
   background: var(--gold-dim);
 }

 /* ── Responsive ── */
 @media (max-width: 900px) {
   nav {
     padding: 22px 28px;
   }
   .about-photo-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.about-photo-frame {
  display: none;
}

   nav .nav-links {
     display: none;
   }

   section {
     padding: 80px 28px;
   }

   #hero {
     grid-template-columns: 1fr;
     padding: 120px 28px 80px;
     min-height: auto;
   }

   .hero-left {
     padding-right: 0;
   }

   .hero-right-deco {
     display: none;
   }

   .about-grid {
     grid-template-columns: 1fr;
     gap: 60px;
   }

   .projects-grid {
     grid-template-columns: 1fr;
   }

   .project-card:first-child {
     grid-column: auto;
   }

   .project-visual {
     display: none;
   }

   .projects-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 20px;
   }

   footer {
     flex-direction: column;
     gap: 12px;
     text-align: center;
   }

   .social-links {
     flex-wrap: wrap;
     gap: 28px;
   }
 }