:root{
  --rock-950:#100f0c;
  --rock-900:#181712;
  --rock-800:#26241d;
  --quartz:#eee7d8;
  --quartz-dim:#a89f8c;
  --ochre:#c17d3f;
  --malachite:#5f8272;
  --line: rgba(238,231,216,0.16);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--rock-950);
  color:var(--quartz);
  font-family: 'Fraunces', serif;
  overflow-x:hidden;
}

body{
  min-height:100dvh;
  position:relative;
}

/* ---------- Background layers ---------- */

.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--rock-950);
}

.bg video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.4s ease;
}

.bg video.is-visible{ opacity:0.62; }

.bg-fallback{
  position:absolute;
  inset:-10%;
  opacity:1;
  transition:opacity 1s ease;
}

.bg-fallback svg{
  width:100%;
  height:100%;
}

.bg-fallback path{
  fill:none;
  stroke:var(--rock-800);
  stroke-width:1;
}

.bg-fallback.is-hidden{ opacity:0; }

.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(0deg, rgba(16,15,12,0.94) 0%, rgba(16,15,12,0.55) 38%, rgba(16,15,12,0.35) 60%, rgba(16,15,12,0.72) 100%),
    linear-gradient(90deg, rgba(16,15,12,0.55) 0%, rgba(16,15,12,0) 45%);
}

@keyframes driftContours{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-2%, -2%, 0); }
}

@media (prefers-reduced-motion: no-preference){
  .bg-fallback{ animation: driftContours 40s ease-in-out infinite alternate; }
}

/* ---------- Layout ---------- */

main{
  position:relative;
  z-index:1;
  min-height:100dvh;
  display:flex;
  align-items:flex-end;
  padding: clamp(20px, 6vw, 64px);
}

.plate{
  width:100%;
  max-width:440px;
}

.plate > *{
  opacity:0;
  transform:translateY(14px);
}

.is-ready .plate > *{
  animation: settle 0.7s cubic-bezier(.2,.7,.3,1) forwards;
}

.is-ready .plate > *:nth-child(1){ animation-delay: 0.05s; }
.is-ready .plate > *:nth-child(2){ animation-delay: 0.15s; }
.is-ready .plate > *:nth-child(3){ animation-delay: 0.25s; }
.is-ready .plate > *:nth-child(4){ animation-delay: 0.35s; }
.is-ready .plate > *:nth-child(5){ animation-delay: 0.45s; }

@keyframes settle{
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .plate > *{ opacity:1; transform:none; animation:none !important; }
}

.coords{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.03em;
  color:var(--quartz-dim);
  margin:0 0 14px;
}

h1.name{
  margin:0;
  font-weight:500;
  font-size:clamp(32px, 6vw, 46px);
  line-height:1.05;
  letter-spacing:-0.01em;
}

p.role{
  margin:10px 0 0;
  font-size:15px;
  line-height:1.5;
  color:var(--quartz-dim);
  font-style:italic;
  max-width:38ch;
}

.divider{
  height:1px;
  background:var(--line);
  border:none;
  margin:22px 0;
  width:64px;
}

.links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}

.links li{ border-top:1px solid var(--line); }
.links li:last-child{ border-bottom:1px solid var(--line); }

.link-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 4px 14px 14px;
  text-decoration:none;
  color:var(--quartz);
  border-left:2px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
}

.link-row:hover, .link-row:focus-visible{
  border-left-color:var(--ochre);
  background:rgba(238,231,216,0.03);
  padding-left:20px;
}

.link-row:focus-visible{
  outline:2px solid var(--malachite);
  outline-offset:-2px;
}

.link-text .title{
  display:block;
  font-size:16px;
  font-weight:400;
}

.link-text .subtitle{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  color:var(--quartz-dim);
  margin-top:3px;
}

.arrow{
  font-family:'JetBrains Mono', monospace;
  font-size:15px;
  color:var(--quartz-dim);
  transform:translateX(-2px);
  transition:transform 0.2s ease, color 0.2s ease;
  flex-shrink:0;
}

.link-row:hover .arrow, .link-row:focus-visible .arrow{
  transform:translateX(0);
  color:var(--ochre);
}

footer{
  margin-top:22px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--quartz-dim);
}

@media (max-width:480px){
  main{ align-items:flex-end; padding:20px; }
  .plate{ max-width:100%; }
}