:root {
  --gold: #C9A227;
  --gold-lt: #E8C766;
  --ink: #F2EDE4;
  --ink-60: rgba(242,237,228,0.6);
  --ink-45: rgba(242,237,228,0.45);
  --base: #0E0D0B;
  --slot-bg: #15130F;
  --edge: rgba(201,162,39,0.35);
  --glow: rgba(232,199,102,0.45);
  --dot-glow: rgba(232,199,102,0.8);
  --wash: radial-gradient(120% 70% at 50% -10%, rgba(201,162,39,0.10), transparent 62%);
}

html[data-theme="light"] {
  --gold: #B68235;
  --gold-lt: #7A5418;
  --ink: #1A1814;
  --ink-60: rgba(26,24,20,0.74);
  --ink-45: rgba(26,24,20,0.62);
  --base: #F7F4EC;
  --slot-bg: #E9E2D2;
  --edge: rgba(182,130,53,0.45);
  --glow: rgba(182,130,53,0.3);
  --dot-glow: rgba(182,130,53,0.55);
  --wash: linear-gradient(180deg, rgba(201,162,39,0.55) 0%, rgba(232,199,102,0.28) 28%, rgba(232,199,102,0.06) 58%, transparent 80%);
}

html { background: var(--base); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  transition: background-color 800ms cubic-bezier(0.22,1,0.36,1), color 800ms cubic-bezier(0.22,1,0.36,1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
::selection { background: rgba(201,162,39,0.28); color: var(--ink); }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold-lt); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
[data-rail] { scrollbar-width: none; -ms-overflow-style: none; }
[data-rail]::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rail] { scroll-behavior: auto; }
}

/* ---- background layer ---- */
.bg-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-grid {
  position: absolute;
  top: -20vh; left: 0; right: 0; height: 200vh;
  opacity: 0.5;
  will-change: transform;
  background-image: repeating-linear-gradient(90deg, var(--edge) 0 1px, transparent 1px 148px);
  mask-image: radial-gradient(120% 60% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 60% at 50% 30%, #000 0%, transparent 78%);
}
.bg-trail {
  position: absolute;
  top: 0; left: 0;
  width: 44vmax; height: 44vmax;
  margin: -22vmax 0 0 -22vmax;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.22,1,0.36,1);
  background: radial-gradient(circle at 50% 50%, var(--glow), transparent 58%);
  will-change: transform;
}
.bg-hairline {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 100vh;
  transform-origin: top;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--gold), var(--gold-lt));
}

/* ---- custom cursor ---- */
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  will-change: transform;
  transition: opacity 600ms cubic-bezier(0.22,1,0.36,1), width 600ms cubic-bezier(0.22,1,0.36,1),
    height 600ms cubic-bezier(0.22,1,0.36,1), margin 600ms cubic-bezier(0.22,1,0.36,1),
    background-color 600ms cubic-bezier(0.22,1,0.36,1);
}
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--gold-lt);
  opacity: 0;
  pointer-events: none;
  z-index: 41;
  will-change: transform;
  transition: opacity 600ms cubic-bezier(0.22,1,0.36,1);
}
html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button {
  cursor: none !important;
}

/* ---- layout ---- */
.page {
  min-height: 100vh;
  background-color: var(--base);
  background-image: var(--wash);
  background-repeat: no-repeat;
  color: var(--ink);
  overflow-x: hidden;
  padding: 0 clamp(24px,5vw,56px);
  transition: background-color 800ms cubic-bezier(0.22,1,0.36,1), color 800ms cubic-bezier(0.22,1,0.36,1);
}
.column {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

/* ---- nav ---- */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px 28px;
  padding-top: 28px;
}
.nav-link {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 700ms cubic-bezier(0.22,1,0.36,1), color 700ms cubic-bezier(0.22,1,0.36,1);
}
.nav-link:hover { background-size: 100% 1px; color: var(--gold-lt); }

.theme-toggle {
  appearance: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 50%;
  color: var(--ink-60);
  transition: color 700ms cubic-bezier(0.22,1,0.36,1), border-color 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.theme-toggle:hover { color: var(--gold-lt); border-color: var(--gold); transform: rotate(35deg); }

/* ---- reveal ---- */
[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal].is-static { opacity: 1; transform: translateY(0); }

/* ---- hero ---- */
.hero { padding: clamp(96px,18vh,190px) 0 clamp(110px,16vh,170px); opacity: 1; transform: translateY(0); }
[data-hero-line] { opacity: 0; transform: translateY(24px); }
.hero-kicker {
  font-family: 'Satoshi', sans-serif;
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-60);
  transform: translateY(20px);
}
.hero-title {
  margin: 26px 0 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(58px,12.5vw,124px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.hero-desc {
  margin: 34px 0 0;
  max-width: 30em;
  font-size: 17px; line-height: 1.75;
  color: var(--ink-60);
  text-wrap: pretty;
}
.hero-meta {
  display: flex; flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 48px;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-60);
}
.hero-available { display: inline-flex; align-items: center; gap: 9px; color: var(--gold-lt); }
.hero-available .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(135deg,var(--gold),var(--gold-lt));
  box-shadow: 0 0 10px var(--dot-glow);
}

/* ---- section label ---- */
.section-label {
  margin: 0 0 30px;
  font-family: 'Satoshi', sans-serif;
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-45);
}

/* ---- what I build ---- */
.build { padding: 0 0 clamp(110px,15vh,160px); }
.build-body { margin: 0; max-width: 34em; font-size: 19px; line-height: 1.8; color: var(--ink); text-wrap: pretty; }
.build-stack { margin: 38px 0 0; max-width: 36em; font-size: 15px; line-height: 2; letter-spacing: 0.03em; color: var(--ink-60); }

/* ---- projects ---- */
.projects { padding: 0 0 clamp(110px,15vh,160px); }
.projects .section-label { margin: 0 0 clamp(44px,6vw,64px); }
.project-list { display: flex; flex-direction: column; gap: clamp(72px,10vw,110px); }

.project {
  border-radius: 14px;
  transition: transform 900ms cubic-bezier(0.22,1,0.36,1);
}
.project:hover { transform: translateY(-8px); }
.project-offset-end { align-self: flex-end; width: 94%; }
.project-offset-start { align-self: flex-start; width: 94%; }

.rail-wrap { position: relative; }
.rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  padding: 4px 40px 4px 4px;
  mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 152px),rgba(0,0,0,0.35) calc(100% - 76px),rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 152px),rgba(0,0,0,0.35) calc(100% - 76px),rgba(0,0,0,0) 100%);
}
.shot {
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--slot-bg);
  box-shadow: 0 26px 60px -34px rgba(0,0,0,0.75);
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-web { width: clamp(280px,46%,340px); aspect-ratio: 16/10; border-radius: 10px; }
.shot-phone { width: clamp(146px,40vw,172px); aspect-ratio: 1242/2688; border-radius: 24px; }

.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  background-color: var(--base);
  border: 1px solid var(--edge);
  color: var(--gold-lt);
  font-size: 15px; line-height: 1;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), border-color 700ms cubic-bezier(0.22,1,0.36,1),
    color 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.rail-arrow:hover { border-color: var(--gold); color: var(--gold); }
.rail-prev { left: -44px; opacity: 0; pointer-events: none; }
.rail-prev:hover { transform: translateY(-50%) translateX(-3px); }
.rail-prev.is-visible { opacity: 1; pointer-events: auto; }
.rail-next { right: -44px; }
.rail-next:hover { transform: translateY(-50%) translateX(4px); }

.project-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 24px; margin-top: 30px; padding: 0 4px; }
.project-title {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px,4.6vw,42px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.live-link {
  font-size: 13px; letter-spacing: 0.06em;
  color: var(--gold-lt);
  background-image: linear-gradient(var(--gold-lt),var(--gold-lt));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 700ms cubic-bezier(0.22,1,0.36,1);
}
.live-link:hover { background-size: 100% 1px; }
.project-desc { margin: 16px 0 0; max-width: 32em; font-size: 16px; line-height: 1.75; color: var(--ink-60); padding: 0 4px; }
.project-stack { margin: 14px 0 0; font-size: 13px; line-height: 1.9; letter-spacing: 0.03em; color: var(--ink-45); padding: 0 4px 8px; }

/* ---- work ---- */
.work { padding: 0 0 clamp(110px,15vh,160px); }
.work-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; }
.work-title { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(28px,4.2vw,38px); letter-spacing: -0.02em; color: var(--ink); }
.work-dates { font-size: 13px; letter-spacing: 0.04em; color: var(--ink-45); }
.work-body { margin: 20px 0 0; max-width: 32em; font-size: 16px; line-height: 1.8; color: var(--ink-60); }

/* ---- contact ---- */
.contact { padding: 0 0 clamp(120px,18vh,200px); }
.contact-email {
  display: inline-block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(34px,7.5vw,72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  background-image: linear-gradient(var(--gold-lt),var(--gold-lt));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 1px;
  transition: background-size 800ms cubic-bezier(0.22,1,0.36,1), color 800ms cubic-bezier(0.22,1,0.36,1);
}
.contact-email:hover { background-size: 100% 1px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 52px; font-size: 13px; letter-spacing: 0.05em; color: var(--ink-60); }
.contact-link {
  color: var(--ink-60);
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 700ms cubic-bezier(0.22,1,0.36,1), color 700ms cubic-bezier(0.22,1,0.36,1);
}
.contact-link:hover { background-size: 100% 1px; color: var(--gold-lt); }