/* Layout: full-bleed sections scaled from the 1920px design via --u (1 design px). */
:root {
  --paper: #ffffff;
  --mist: #e7e7e7;
  --ink: #141414;
  --ink-soft: #3a3a3a;
  --sindoor: #c24646;
  --leaf: #1e5c3a;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--sindoor); outline-offset: 4px; }

.page { container-type: inline-size; overflow-x: hidden; }
.page > * { --u: calc(100cqw / 1920); }

/* ---------- Nav ---------- */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(46 * var(--u)) calc(227 * var(--u)) 0 calc(132 * var(--u));
  font-size: max(12px, calc(19 * var(--u)));
  letter-spacing: 0.06em; text-transform: uppercase;
}
.nav a { text-decoration: none; }
.brand { color: #fff; font-weight: 500; }
.nav ul { display: flex; gap: calc(37 * var(--u)); list-style: none; margin: 0; padding: 0; }
.nav li a { color: var(--ink); font-weight: 500; position: relative; }
.nav li a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav li a:hover::after, .nav li a:focus-visible::after { transform: scaleX(1); }
.nav .resume { color: var(--leaf); margin-left: calc(14 * var(--u)); }

/* ---------- Hero ---------- */
.hero {
  position: relative; aspect-ratio: 1920 / 1083;
  background: #bdbdbd url("assets/hero.jpg") center / cover no-repeat;
  animation: develop 1.6s ease-out both;
}
@keyframes develop { from { filter: contrast(.85) brightness(1.08); } to { filter: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Philosophy ---------- */
.philosophy {
  display: grid; grid-template-columns: 632fr 84fr 1204fr;
  height: calc(675 * var(--u)); margin-top: calc(174 * var(--u));
}
.phil-title { grid-column: 1; background: var(--mist); position: relative; overflow: hidden; }
.phil-title h2 {
  position: absolute; left: calc(80 * var(--u)); top: calc(510 * var(--u)); margin: 0;
  font-family: var(--display); font-weight: 800; color: #fff;
  font-size: calc(88 * var(--u)); line-height: .98; letter-spacing: -0.005em;
}
.phil-body {
  grid-column: 3; position: relative;
  background: #eee url("assets/ripple.jpg") right center / cover no-repeat;
}
.phil-body p {
  position: absolute; left: calc(139 * var(--u)); top: calc(322 * var(--u));
  width: calc(480 * var(--u)); margin: 0;
  font-size: calc(18.5 * var(--u)); line-height: 1.42; color: var(--ink-soft);
}
.phil-body strong { font-weight: 600; color: var(--ink); }

/* ---------- Projects ---------- */
.projects { padding-top: calc(200 * var(--u)); }
.stack {
  position: relative; width: calc(1554 * var(--u)); aspect-ratio: 1546 / 1028;
  margin: 0 auto; max-width: 100%;
}
.stack::before, .stack::after {
  content: ""; position: absolute; inset: 0; border-radius: calc(46 * var(--u));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.stack::before { background: #dcdad8; transform: translate(calc(-30 * var(--u)), calc(-40 * var(--u))) rotate(-3.4deg); }
.stack::after  { background: #fbefee; transform: translate(calc(-6 * var(--u)), calc(-18 * var(--u))) rotate(-1.6deg); }
.card {
  position: relative; z-index: 1; display: block; height: 100%;
  border-radius: calc(46 * var(--u)); overflow: hidden;
  box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(40, 30, 20, .14);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.card img { width: 100%; height: 100%; object-fit: cover; }
.card .view {
  position: absolute; right: calc(36 * var(--u)); bottom: calc(32 * var(--u));
  background: rgba(255,255,255,.92); color: var(--ink); text-decoration: none;
  font-size: max(12px, calc(16 * var(--u))); letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding: .7em 1.2em; border-radius: 999px; opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.stack:hover .card, .card:focus-visible { transform: translateY(calc(-10 * var(--u))); }
.stack:hover::before { transform: translate(calc(-44 * var(--u)), calc(-52 * var(--u))) rotate(-5deg); }
.stack:hover::after  { transform: translate(calc(-14 * var(--u)), calc(-26 * var(--u))) rotate(-2.6deg); }
.stack:hover .view, .card:focus-visible .view { opacity: 1; transform: none; }

/* ---------- Find me ---------- */
.find { position: relative; height: calc(1082 * var(--u)); margin-top: calc(323 * var(--u)); margin-bottom: calc(110 * var(--u)); }
.find-strip { position: absolute; left: 0; top: 0; bottom: 0; width: calc(365 * var(--u)); background: var(--mist); }
.find-strip .sig { position: absolute; left: calc(85 * var(--u)); top: calc(62 * var(--u)); width: calc(200 * var(--u)); }
.find-strip .label {
  position: absolute; right: calc(-6 * var(--u)); bottom: calc(142 * var(--u));
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--display); font-weight: 800; color: #fff;
  font-size: calc(112 * var(--u)); line-height: .8; letter-spacing: .01em; margin: 0;
}
.find-panel {
  position: absolute; left: calc(408 * var(--u)); top: 0; bottom: 0; width: calc(1032 * var(--u));
  background: var(--mist);
  clip-path: polygon(0 0, 100% 0, calc(607 * var(--u)) 100%, 0 100%);
}
.find-panel h2 {
  position: absolute; left: calc(60 * var(--u)); top: calc(205 * var(--u)); margin: 0;
  font-family: var(--display); font-weight: 800; color: #fff;
  font-size: calc(128 * var(--u)); line-height: 1.2; letter-spacing: -0.005em;
}
.find-panel .about {
  position: absolute; left: calc(74 * var(--u)); top: calc(630 * var(--u)); width: calc(510 * var(--u));
  font-size: calc(19 * var(--u)); line-height: 1.38; color: var(--ink-soft);
}
.about p { margin: 0 0 1.35em; }
.socials { position: absolute; left: calc(74 * var(--u)); top: calc(945 * var(--u)); display: flex; gap: calc(26 * var(--u)); }
.socials a { display: block; width: calc(42 * var(--u)); height: calc(36 * var(--u)); transition: transform .25s ease; }
.socials a:hover { transform: translateY(-3px); }
.socials svg { width: 100%; height: 100%; }
.rider {
  position: absolute; right: 0; top: calc(120 * var(--u)); width: calc(800 * var(--u)); height: calc(813 * var(--u));
  clip-path: polygon(calc(320 * var(--u)) 0, 100% 0, 100% 100%, 0 100%);
}
.rider img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Phone & small tablet ---------- */
@media (max-width: 760px) {
  .page > * { --u: 1px; }
  .nav { padding: 18px 16px 0; font-size: 11.5px; }
  .nav ul { gap: 14px; }
  .nav .resume { margin-left: 0; }
  .hero { aspect-ratio: 1137 / 1083; background-position: 37% center; }

  .philosophy { display: block; height: auto; margin-top: 48px; }
  .phil-title { height: 130px; }
  .phil-title h2 { left: 20px; top: 52px; font-size: 52px; }
  .phil-body { min-height: 300px; margin-top: 16px; background-position: 82% center; }
  .phil-body p { left: 20px; top: 50%; transform: translateY(-50%); width: 58%; font-size: 14.5px; }

  .projects { padding: 64px 22px 0 26px; }
  .stack { width: 100%; }
  .stack::before, .stack::after, .card { border-radius: 22px; }
  .card .view { opacity: 1; transform: none; right: 14px; bottom: 12px; font-size: 11px; }

  .find { height: auto; margin: 72px 0 56px; display: grid; }
  .find-strip, .find-panel, .rider, .socials { position: static; }
  .find-strip { width: auto; height: auto; padding: 24px 20px 0; background: var(--mist); }
  .find-strip .sig { position: static; width: 130px; }
  .find-strip .label { display: none; }
  .find-panel { width: auto; clip-path: none; padding: 8px 20px 32px; }
  .find-panel h2 { position: static; font-size: 54px; line-height: 1.02; margin: 18px 0 22px; }
  .find-panel .about { position: static; width: auto; font-size: 15.5px; max-width: 34em; }
  .socials { gap: 18px; margin-top: 8px; }
  .socials a { width: 34px; height: 30px; }
  .rider { width: 100%; height: auto; aspect-ratio: 800 / 813; clip-path: polygon(41% 0, 100% 0, 100% 100%, 0 100%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}