/* ============================================================
   ATELIER — Luxury Editorial Portfolio
   ============================================================ */

:root {
   --bg: #0E0E0E;
   --surface: #171717;
   --border: rgba(255, 255, 255, .08);
   --text: #F5F5F5;
   --muted: #A0A0A0;
   --accent: #C6A56B;
   --accent-hover: #E0C48A;
   --ease: cubic-bezier(.16, 1, .3, 1);
   --ease-out: cubic-bezier(.22, 1, .36, 1);
   --pad: clamp(1.25rem, 5vw, 6rem);
   --maxw: 1600px;
}

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

html {
   -webkit-text-size-adjust: 100%
}

html.lenis,
html.lenis body {
   height: auto
}

.lenis.lenis-smooth {
   scroll-behavior: auto !important
}

body {
   background: var(--bg);
   color: var(--text);
   font-family: 'Inter', system-ui, sans-serif;
   font-weight: 300;
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   cursor: none;
}

@media (hover:none) {
   body {
      cursor: auto
   }
}

img {
   display: block;
   max-width: 100%;
   height: auto
}

a {
   color: inherit;
   text-decoration: none
}

::selection {
   background: var(--accent);
   color: #0E0E0E
}

h1,
h2,
h3 {
   font-weight: 400;
   line-height: .95;
   letter-spacing: -.01em
}

.bebas {
   font-family: 'Bebas Neue', sans-serif
}

.syne {
   font-family: 'Syne', sans-serif
}

/* ---------- Utility ---------- */
.tick {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .72rem;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--muted);
   display: block;
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: var(--bg);
   display: flex;
   align-items: flex-end;
   padding: var(--pad)
}

.preloader__inner {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   overflow: hidden
}

.pl-word {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(3rem, 14vw, 11rem);
   line-height: .85;
   letter-spacing: .02em;
   display: block;
   transform: translateY(110%)
}

.pl-sub {
   display: block;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .7rem;
   letter-spacing: .3em;
   color: var(--muted);
   margin-top: 1rem;
   opacity: 0
}

.preloader__count {
   font-family: 'Space Grotesk', sans-serif;
   font-size: clamp(2rem, 6vw, 4rem);
   color: var(--accent);
   font-weight: 300;
   display: flex;
   align-items: baseline
}

.pl-pct {
   font-size: .4em;
   color: var(--muted);
   margin-left: .2em
}

.preloader__bar {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 2px;
   background: var(--border)
}

.preloader__bar span {
   display: block;
   height: 100%;
   width: 0;
   background: var(--accent)
}

.preloader__curtain {
   position: absolute;
   inset: 0;
   background: var(--bg);
   transform: translateY(100%);
   z-index: -1
}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor {
   position: fixed;
   top: 0;
   left: 0;
   width: 14px;
   height: 14px;
   border: 1px solid var(--accent);
   border-radius: 50%;
   pointer-events: none;
   z-index: 9998;
   transform: translate(-50%, -50%);
   transition: width .4s var(--ease), height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
   display: flex;
   align-items: center;
   justify-content: center;
   mix-blend-mode: difference
}

.cursor__label {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .65rem;
   font-weight: 600;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--accent);
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
   opacity: 0;
   transform: scale(.5);
   transition: opacity .3s, transform .3s;
   white-space: nowrap
}

.cursor-dot {
   position: fixed;
   top: 0;
   left: 0;
   width: 4px;
   height: 4px;
   background: var(--accent);
   border-radius: 50%;
   pointer-events: none;
   z-index: 9998;
   transform: translate(-50%, -50%)
}

.cursor.is-hover {
   width: 54px;
   height: 54px;
   background: rgba(198, 165, 107, .14);
   border-color: var(--accent);
   mix-blend-mode: normal;
   backdrop-filter: blur(2px)
}

.cursor.is-hover .cursor__label {
   opacity: 1;
   transform: scale(1)
}

.cursor.is-view {
   width: 88px;
   height: 88px;
   background: rgba(198, 165, 107, .18);
   border: 1.5px solid var(--accent);
   mix-blend-mode: normal;
   backdrop-filter: blur(3px)
}

.cursor.is-view .cursor__label {
   opacity: 1;
   transform: scale(1);
   color: #FFFFFF;
   text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9)
}

.cursor.is-hidden {
   opacity: 0
}

@media (hover:none) {

   .cursor,
   .cursor-dot {
      display: none
   }
}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 2px;
   width: 0;
   background: var(--accent);
   z-index: 9997;
   will-change: width
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 900;
   transition: background .5s var(--ease), border-color .5s, backdrop-filter .5s;
   border-bottom: 1px solid transparent
}

.nav.is-solid {
   background: rgba(14, 14, 14, .82);
   border-bottom: 1px solid var(--border);
   backdrop-filter: blur(14px)
}

.nav__inner {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 1.4rem var(--pad);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem
}

.nav__logo {
   display: flex;
   align-items: baseline;
   gap: .6rem
}

.nav__logo-mark {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 1.5rem;
   letter-spacing: .05em;
   color: var(--accent)
}

.nav__logo-text {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .75rem;
   letter-spacing: .35em;
   color: var(--text)
}

.nav__links {
   display: flex;
   gap: 2.4rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%)
}

.nav__link {
   position: relative;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .78rem;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--muted);
   padding: .3rem 0;
   transition: color .4s
}

.nav__link span {
   display: block
}

.nav__link::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -2px;
   height: 1px;
   width: 0;
   background: var(--accent);
   transition: width .5s var(--ease)
}

.nav__link:hover,
.nav__link.is-active {
   color: var(--text)
}

.nav__link:hover::after,
.nav__link.is-active::after {
   width: 100%
}

.nav__cta {
   position: relative;
   overflow: hidden;
   border: 1px solid var(--border);
   padding: .7rem 1.4rem;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .72rem;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--text);
   transition: color .4s
}

.nav__cta::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--accent);
   transform: translateY(101%);
   transition: transform .5s var(--ease);
   z-index: -1
}

.nav__cta:hover {
   color: #0E0E0E;
   border-color: var(--accent)
}

.nav__cta:hover::before {
   transform: translateY(0)
}

.nav__cta span {
   position: relative;
   z-index: 1
}

.nav__burger {
   display: none;
   flex-direction: column;
   gap: 6px;
   width: 34px;
   height: 34px;
   background: none;
   border: none;
   cursor: none;
   align-items: flex-end;
   justify-content: center
}

.nav__burger span {
   display: block;
   height: 1.5px;
   background: var(--text);
   transition: transform .5s var(--ease), width .4s var(--ease), opacity .3s
}

.nav__burger span:first-child {
   width: 28px
}

.nav__burger span:last-child {
   width: 20px
}

.nav.menu-open .nav__burger span:first-child {
   transform: translateY(7.5px) rotate(45deg);
   width: 28px
}

.nav.menu-open .nav__burger span:last-child {
   transform: translateY(-6px) rotate(-45deg);
   width: 28px
}

/* ---------- Mobile menu ---------- */
.menu {
   position: fixed;
   inset: 0;
   z-index: 850;
   background: var(--bg);
   padding: var(--pad);
   display: flex;
   flex-direction: column;
   justify-content: center;
   transform: translateY(-100%);
   transition: transform .8s var(--ease);
   pointer-events: none
}

.menu.is-open {
   transform: translateY(0);
   pointer-events: auto
}

.menu__index {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .7rem;
   letter-spacing: .3em;
   color: var(--muted);
   text-transform: uppercase;
   margin-bottom: 2rem
}

.menu__list {
   list-style: none
}

.menu__list li {
   overflow: hidden;
   border-bottom: 1px solid var(--border)
}

.menu__list a {
   display: flex;
   align-items: baseline;
   gap: 1.5rem;
   padding: 1.1rem 0
}

.menu__num {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .8rem;
   color: var(--accent)
}

.menu__word {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(2.6rem, 13vw, 5rem);
   letter-spacing: .02em;
   line-height: 1;
   transition: transform .5s var(--ease), color .4s
}

.menu__list a:hover .menu__word {
   color: var(--accent);
   transform: translateX(1rem)
}

.menu__footer {
   margin-top: 3rem;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .8rem;
   color: var(--muted)
}

.menu__socials {
   display: flex;
   gap: 1.4rem
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
   position: relative;
   min-height: 100svh;
   padding: 9rem var(--pad) 3rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   overflow: hidden
}

.hero__bg-word {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 0;
   pointer-events: none;
   width: 120%;
   text-align: center
}

.hero__bg-word span {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(8rem, 34vw, 30rem);
   color: rgba(255, 255, 255, .02);
   letter-spacing: .05em;
   white-space: nowrap;
   display: inline-block
}

.hero__grid {
   position: relative;
   z-index: 2;
   max-width: var(--maxw);
   margin: 0 auto;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 3rem
}

.hero__meta {
   display: flex;
   flex-direction: column;
   gap: .8rem
}

.hero__meta--right {
   align-items: flex-end;
   text-align: right;
   gap: 2.5rem
}

.hero__meta--right p {
   max-width: 22ch;
   color: var(--muted);
   font-size: .9rem;
   line-height: 1.7
}

.hero__headline {
   text-align: center
}

.hero__title {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(4.2rem, 17vw, 15rem);
   line-height: .82;
   letter-spacing: .01em
}

.hero__title .line {
   display: block;
   overflow: hidden
}

.hero__title .word {
   display: inline-block;
   transform: translateY(110%)
}

.hero__title .line--accent .word {
   color: var(--accent);
   font-style: italic;
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: .62em;
   letter-spacing: 0
}

.hero__role {
   margin-top: 1.6rem;
   display: flex;
   gap: .6rem;
   justify-content: center;
   align-items: center;
   font-family: 'Space Grotesk', sans-serif;
   font-size: clamp(.9rem, 1.6vw, 1.15rem);
   color: var(--muted);
   letter-spacing: .02em
}

.hero__role-rotate {
   position: relative;
   height: 1.5em;
   overflow: hidden;
   display: inline-flex;
   color: var(--text)
}

.hero__role-rotate span {
   display: block
}

.hero__scroll {
   display: flex;
   align-items: center;
   gap: .8rem;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .7rem;
   letter-spacing: .25em;
   text-transform: uppercase;
   color: var(--muted)
}

.hero__scroll-line {
   width: 60px;
   height: 1px;
   background: var(--border);
   position: relative;
   overflow: hidden
}

.hero__scroll-line::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--accent);
   transform: translateX(-100%);
   animation: scrollLine 2.4s var(--ease) infinite
}

@keyframes scrollLine {
   0% {
      transform: translateX(-100%)
   }

   50% {
      transform: translateX(0)
   }

   100% {
      transform: translateX(100%)
   }
}

.hero__portrait {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -46%);
   z-index: 1;
   width: clamp(220px, 26vw, 420px);
   pointer-events: none
}

.hero__portrait-frame {
   position: relative;
   overflow: hidden;
   aspect-ratio: 3/4;
   border-radius: 4px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5)
}

.hero__portrait-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: grayscale(.15) contrast(1.05);
   transform: scale(1)
}

.hero__portrait-tag {
   position: absolute;
   bottom: 1rem;
   left: 1rem;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .65rem;
   letter-spacing: .2em;
   color: var(--accent);
   background: rgba(14, 14, 14, .4);
   padding: .3rem .6rem;
   backdrop-filter: blur(4px)
}

.hero__cta-row {
   position: relative;
   z-index: 2;
   max-width: var(--maxw);
   margin: 3.5rem auto 0;
   width: 100%;
   display: flex;
   gap: 1.2rem;
   justify-content: center;
   flex-wrap: wrap
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: .7rem;
   padding: 1rem 1.8rem;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .78rem;
   letter-spacing: .16em;
   text-transform: uppercase;
   overflow: hidden;
   transition: color .5s var(--ease);
   border: 1px solid var(--accent)
}

.btn__arrow {
   display: inline-block;
   transition: transform .5s var(--ease)
}

.btn:hover .btn__arrow {
   transform: translateX(6px)
}

.btn span {
   position: relative;
   z-index: 2
}

.btn--fill {
   background: var(--accent);
   color: #0E0E0E;
   border-color: var(--accent)
}

.btn--fill::before {
   content: "";
   position: absolute;
   top: 0;
   left: -120%;
   width: 60%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
   transform: skewX(-20deg);
   transition: left .7s var(--ease);
   z-index: 1
}

.btn--fill:hover::before {
   left: 120%
}

.btn--ghost {
   color: var(--text);
   border-color: var(--border)
}

.btn--ghost::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s var(--ease);
   z-index: 0
}

.btn--ghost:hover {
   color: #0E0E0E;
   border-color: var(--accent)
}

.btn--ghost:hover::before {
   transform: scaleX(1)
}

.btn--block {
   width: 100%;
   justify-content: center;
   margin-top: 1rem
}

.link-underline {
   position: relative;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .8rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   padding-bottom: 3px;
   color: var(--text)
}

.link-underline::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   height: 1px;
   width: 100%;
   background: var(--muted);
   transform: scaleX(1);
   transform-origin: right;
   transition: transform .5s var(--ease)
}

.link-underline::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   height: 1px;
   width: 100%;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s var(--ease) .05s;
   z-index: 1
}

.link-underline:hover {
   color: var(--accent)
}

.link-underline:hover::after {
   transform: scaleX(0);
   transform-origin: left
}

.link-underline:hover::before {
   transform: scaleX(1)
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   padding: 1.6rem 0;
   overflow: hidden;
   white-space: nowrap
}

.marquee__track {
   display: inline-flex;
   align-items: center;
   gap: 2.5rem;
   will-change: transform
}

.marquee__track span {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(1.6rem, 4vw, 3rem);
   letter-spacing: .04em;
   color: var(--text)
}

.marquee__track i {
   color: var(--accent);
   font-style: normal;
   font-size: 1.2rem
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section-head {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 var(--pad);
   display: flex;
   align-items: baseline;
   gap: 1.5rem;
   flex-wrap: wrap
}

.section-head__index {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .8rem;
   letter-spacing: .2em;
   color: var(--accent)
}

.section-head__title {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(3rem, 10vw, 8rem);
   letter-spacing: .02em;
   line-height: .9
}

.section-head__note {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .75rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--muted);
   margin-left: auto
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
   padding: 9rem 0
}

.about__grid {
   max-width: var(--maxw);
   margin: 4rem auto 0;
   padding: 0 var(--pad);
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: clamp(2rem, 6vw, 7rem);
   align-items: center
}

.about__portrait {
   position: relative
}

.about__portrait img {
   width: 100%;
   aspect-ratio: 3/4;
   object-fit: cover;
   filter: grayscale(.2) contrast(1.05)
}

.about__portrait-caption {
   display: block;
   margin-top: 1rem;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .72rem;
   letter-spacing: .15em;
   color: var(--muted)
}

.about__lead {
   font-family: 'Syne', sans-serif;
   font-weight: 600;
   font-size: clamp(1.4rem, 3vw, 2.4rem);
   line-height: 1.25;
   letter-spacing: -.01em;
   margin-bottom: 2rem
}

.about__text {
   color: var(--muted);
   font-size: 1rem;
   line-height: 1.9;
   margin-bottom: 1.4rem;
   max-width: 52ch
}

.about__signature {
   margin-top: 2.5rem;
   padding-top: 1.5rem;
   border-top: 1px solid var(--border)
}

.about__sign-name {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 1.3rem;
   display: block
}

.about__sign-role {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .75rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--muted)
}

/* Timeline */
.timeline {
   max-width: var(--maxw);
   margin: 7rem auto 0;
   padding: 0 var(--pad)
}

.timeline__label {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .75rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--accent);
   display: block;
   margin-bottom: 2.5rem
}

.timeline__item {
   display: grid;
   grid-template-columns: .4fr 1fr;
   gap: 2rem;
   padding: 2.2rem 0;
   border-top: 1px solid var(--border);
   transition: padding-left .5s var(--ease)
}

.timeline__item:hover {
   padding-left: 1.5rem
}

.timeline__item:last-child {
   border-bottom: 1px solid var(--border)
}

.timeline__year {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .85rem;
   letter-spacing: .1em;
   color: var(--muted)
}

.timeline__body h3 {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: clamp(1.4rem, 3vw, 2rem);
   margin-bottom: .3rem
}

.timeline__co {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .8rem;
   letter-spacing: .12em;
   color: var(--accent);
   text-transform: uppercase
}

.timeline__body p {
   color: var(--muted);
   margin-top: .8rem;
   max-width: 55ch;
   line-height: 1.8
}

/* ============================================================
   WORK
   ============================================================ */
.work {
   padding: 9rem 0
}

.project {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 5rem var(--pad);
   display: grid;
   grid-template-columns: 1.3fr 1fr;
   gap: clamp(2rem, 5vw, 5rem);
   align-items: center
}

.project--reverse {
   direction: rtl
}

.project--reverse>* {
   direction: ltr
}

.project__media {
   position: relative;
   overflow: hidden
}

.project__media img {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   transition: transform 1.1s var(--ease);
   filter: grayscale(.15)
}

.project:hover .project__media img {
   transform: scale(1.06)
}

.project__cat {
   position: absolute;
   top: 1.2rem;
   left: 1.2rem;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .68rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--accent);
   background: rgba(14, 14, 14, .5);
   padding: .4rem .8rem;
   backdrop-filter: blur(6px);
   border: 1px solid var(--border)
}

.project__index {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .8rem;
   color: var(--accent);
   letter-spacing: .2em
}

.project__title {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(3rem, 8vw, 6rem);
   letter-spacing: .03em;
   line-height: .9;
   margin: .5rem 0 1.2rem
}

.project__desc {
   color: var(--muted);
   line-height: 1.8;
   max-width: 42ch;
   margin-bottom: 1.6rem
}

.project__tags {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem;
   margin-bottom: 2rem
}

.project__tags span {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .68rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--muted);
   border: 1px solid var(--border);
   padding: .4rem .8rem;
   transition: border-color .4s, color .4s
}

.project:hover .project__tags span {
   border-color: rgba(198, 165, 107, .3)
}

.project__links {
   display: flex;
   gap: 2rem
}

/* ============================================================
   SKILLS
   ============================================================ */
.skills {
   padding: 9rem 0
}

.skills__grid {
   max-width: var(--maxw);
   margin: 4rem auto 0;
   padding: 0 var(--pad);
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem
}

.skill-card {
   background: var(--surface);
   border: 1px solid var(--border);
   padding: 2.5rem 2rem;
   min-height: 220px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s
}

.skill-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 40px -10px rgba(198, 165, 107, .15);
   border-color: rgba(198, 165, 107, .25)
}

.skill-card__id {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .75rem;
   letter-spacing: .2em;
   color: var(--accent)
}

.skill-card h3 {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   margin-top: 2rem
}

.skill-card p {
   color: var(--muted);
   font-size: .9rem;
   margin-top: .6rem;
   line-height: 1.6
}

.techstack {
   max-width: var(--maxw);
   margin: 5rem auto 0;
   padding: 2.5rem var(--pad);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   gap: 1.5rem
}

.techstack__label {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .72rem;
   letter-spacing: .25em;
   text-transform: uppercase;
   color: var(--muted)
}

.techstack__row {
   display: flex;
   flex-wrap: wrap;
   gap: 1.2rem 2.5rem
}

.techstack__row span {
   font-family: 'Syne', sans-serif;
   font-weight: 600;
   font-size: clamp(1rem, 2.4vw, 1.6rem);
   color: var(--muted);
   transition: color .4s, transform .4s
}

.techstack__row span:hover {
   color: var(--accent);
   transform: translateY(-4px)
}

/* ============================================================
   PROCESS
   ============================================================ */
.process {
   padding: 9rem 0
}

.process__list {
   max-width: var(--maxw);
   margin: 4rem auto 0;
   padding: 0 var(--pad);
   display: grid;
   grid-template-columns: repeat(2, 1fr)
}

.process__step {
   padding: 3rem 2.5rem;
   border-top: 1px solid var(--border);
   border-left: 1px solid var(--border);
   transition: background .5s
}

.process__step:nth-child(odd) {
   border-left: none
}

.process__step:hover {
   background: var(--surface)
}

.process__num {
   font-family: 'Bebas Neue', sans-serif;
   font-size: 3rem;
   color: var(--accent);
   letter-spacing: .05em;
   display: block;
   margin-bottom: 1rem
}

.process__step h3 {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: clamp(1.4rem, 2.6vw, 1.9rem);
   margin-bottom: 1rem
}

.process__step p {
   color: var(--muted);
   line-height: 1.8;
   max-width: 44ch
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
   padding: 6rem 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border)
}

.stats__grid {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 var(--pad);
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2rem
}

.stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative
}

.stat::after {
   content: "";
   position: absolute;
   right: -1rem;
   top: 10%;
   height: 80%;
   width: 1px;
   background: var(--border)
}

.stat:last-child::after {
   display: none
}

.stat__num {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(4rem, 10vw, 8rem);
   line-height: 1;
   letter-spacing: .02em
}

.stat__plus {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(2rem, 5vw, 4rem);
   color: var(--accent);
   margin-top: -.5rem
}

.stat p {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .78rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--muted);
   margin-top: 1rem
}

/* ============================================================
   QUOTES
   ============================================================ */
.quotes {
   padding: 9rem 0
}

.quotes__grid {
   max-width: var(--maxw);
   margin: 4rem auto 0;
   padding: 0 var(--pad);
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2rem
}

.quote {
   background: var(--surface);
   border: 1px solid var(--border);
   padding: 3rem;
   position: relative
}

.quote::before {
   content: "\201C";
   position: absolute;
   top: .5rem;
   left: 1.5rem;
   font-family: 'Bebas Neue', sans-serif;
   font-size: 6rem;
   color: var(--accent);
   opacity: .25;
   line-height: 1
}

.quote p {
   font-family: 'Syne', sans-serif;
   font-weight: 500;
   font-size: clamp(1.1rem, 2vw, 1.5rem);
   line-height: 1.5;
   position: relative;
   z-index: 1
}

.quote footer {
   margin-top: 2rem;
   display: flex;
   flex-direction: column;
   gap: .2rem
}

.quote footer span:first-child {
   font-family: 'Syne', sans-serif;
   font-weight: 700
}

.quote footer span:last-child {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .75rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--muted)
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 9rem var(--pad);
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(2rem, 6vw, 6rem);
   align-items: start
}

.contact__title {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(4rem, 13vw, 11rem);
   line-height: .85;
   letter-spacing: .02em;
   margin: 1rem 0
}

.contact__sub {
   color: var(--muted);
   line-height: 1.9;
   max-width: 38ch;
   margin-bottom: 2rem
}

.contact__mail {
   font-size: 1rem !important
}

.contact__form {
   display: flex;
   flex-direction: column;
   gap: 2.2rem;
   padding-top: 5rem
}

.field {
   position: relative
}

.field input,
.field textarea {
   width: 100%;
   background: none;
   border: none;
   border-bottom: 1px solid var(--border);
   padding: .8rem 0;
   color: var(--text);
   font-family: 'Inter', sans-serif;
   font-size: 1.05rem;
   resize: none;
   transition: border-color .4s
}

.field input:focus,
.field textarea:focus {
   outline: none
}

.field label {
   position: absolute;
   left: 0;
   top: .8rem;
   color: var(--muted);
   font-size: 1.05rem;
   pointer-events: none;
   transition: all .4s var(--ease);
   font-family: 'Space Grotesk', sans-serif
}

.field input:focus+label,
.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,
.field textarea:not(:placeholder-shown)+label {
   top: -.9rem;
   font-size: .7rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--accent)
}

.field__line {
   position: absolute;
   left: 0;
   bottom: 0;
   height: 1px;
   width: 100%;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s var(--ease)
}

.field input:focus~.field__line,
.field textarea:focus~.field__line {
   transform: scaleX(1)
}

.contact__success {
   overflow: hidden;
   max-height: 0;
   opacity: 0;
   color: var(--accent);
   font-family: 'Space Grotesk', sans-serif;
   font-size: .85rem;
   letter-spacing: .05em;
   transition: max-height .6s var(--ease), opacity .6s, margin .6s
}

.contact__success.show {
   max-height: 60px;
   opacity: 1;
   margin-top: .5rem
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
   border-top: 1px solid var(--border);
   padding: 5rem var(--pad) 2.5rem;
   max-width: var(--maxw);
   margin: 0 auto
}

.footer__top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 2rem;
   flex-wrap: wrap
}

.footer__logo {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(4rem, 16vw, 13rem);
   letter-spacing: .03em;
   line-height: .85
}

.footer__totop {
   display: flex;
   align-items: center;
   gap: .6rem;
   background: none;
   border: 1px solid var(--border);
   color: var(--text);
   padding: .8rem 1.3rem;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .72rem;
   letter-spacing: .16em;
   text-transform: uppercase;
   cursor: none;
   transition: border-color .4s, color .4s
}

.footer__totop i {
   transition: transform .4s var(--ease)
}

.footer__totop:hover {
   border-color: var(--accent);
   color: var(--accent)
}

.footer__totop:hover i {
   transform: translateY(-4px)
}

.footer__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
   margin-top: 4rem;
   padding-top: 3rem;
   border-top: 1px solid var(--border)
}

.footer__col {
   display: flex;
   flex-direction: column;
   gap: .8rem
}

.footer__col--wide {
   grid-column: span 1
}

.footer__label {
   font-family: 'Space Grotesk', sans-serif;
   font-size: .7rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: .5rem
}

.footer__col a {
   color: var(--muted);
   font-size: .95rem;
   transition: color .4s, padding-left .4s
}

.footer__col a:hover {
   color: var(--text);
   padding-left: .4rem
}

.footer__col p {
   color: var(--muted);
   font-size: .85rem;
   line-height: 1.7
}

.footer__base {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
   margin-top: 4rem;
   font-family: 'Space Grotesk', sans-serif;
   font-size: .72rem;
   letter-spacing: .1em;
   color: var(--muted)
}

/* ============================================================
   REVEAL STATES (JS-driven)
   ============================================================ */
.reveal-img {
   overflow: hidden;
   border-radius: 4px
}

.reveal-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1.08);
   opacity: 0.85;
   transition: transform 1.2s var(--ease), opacity 1s var(--ease)
}

.reveal-img.in img {
   transform: scale(1);
   opacity: 1
}

.reveal-up {
   opacity: 0;
   transform: translateY(50px);
   transition: opacity 1s var(--ease), transform 1s var(--ease)
}

.reveal-up.in {
   opacity: 1;
   transform: translateY(0)
}

.reveal-line {
   display: block;
   overflow: hidden
}

.reveal-line>span {
   display: block;
   transform: translateY(105%);
   transition: transform .9s var(--ease)
}

.reveal-line.in>span {
   transform: translateY(0)
}

.split-char {
   display: inline-block;
   transform: translateY(105%)
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
   .nav__links {
      gap: 1.6rem
   }

   .about__grid {
      grid-template-columns: 1fr;
      gap: 3rem
   }

   .about__portrait {
      max-width: 440px
   }

   .project,
   .project--reverse {
      grid-template-columns: 1fr;
      direction: ltr
   }

   .project__media {
      order: -1
   }

   .skills__grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .quotes__grid {
      grid-template-columns: 1fr
   }

   .contact {
      grid-template-columns: 1fr;
      gap: 3rem
   }

   .contact__form {
      padding-top: 1rem
   }
}

@media (max-width:768px) {

   .nav__links,
   .nav__cta {
      display: none
   }

   .nav__burger {
      display: flex
   }

   .hero__grid {
      grid-template-columns: 1fr;
      gap: 2rem;
      text-align: center
   }

   .hero__meta {
      align-items: center;
      text-align: center
   }

   .hero__meta--right {
      align-items: center;
      text-align: center
   }

   .hero__meta--right p {
      max-width: 32ch
   }

   .hero__portrait {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      margin: 2rem auto 0;
      width: min(70vw, 280px)
   }

   .hero {
      padding-top: 7rem
   }

   .hero__bg-word {
      opacity: .6
   }

   .stats__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem 1rem
   }

   .stat:nth-child(2)::after {
      display: none
   }

   .process__list {
      grid-template-columns: 1fr
   }

   .process__step {
      border-left: none !important
   }

   .timeline__item {
      grid-template-columns: 1fr;
      gap: .8rem
   }

   .footer__grid {
      grid-template-columns: 1fr 1fr
   }

   .footer__base {
      flex-direction: column;
      gap: .5rem
   }
}

@media (max-width:480px) {
   .skills__grid {
      grid-template-columns: 1fr
   }

   .footer__grid {
      grid-template-columns: 1fr
   }

   .btn {
      width: 100%;
      justify-content: center
   }

   .hero__cta-row {
      flex-direction: column
   }

   .quote {
      padding: 2rem
   }
}

@media (prefers-reduced-motion:reduce) {
   * {
      animation-duration: .001ms !important;
      transition-duration: .001ms !important
   }

   .reveal-up,
   .reveal-line>span,
   .split-char,
   .hero__title .word {
      opacity: 1 !important;
      transform: none !important
   }

   .reveal-img {
      clip-path: none
   }
}