/* ============================================================
   Mathias Randrüüt — The Arch (Holy Mountain)
   ============================================================ */
:root{
  --bg:#0e0906;
  --cream:#efe2c6;
  --dim:#b3a081;
  --ochre:#d8a94e;
  --ink:#0e0906;
  --disp:"Abril Fatface", Georgia, serif;
  --ui:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; }
html,body{ height:100%; overflow:hidden; }

body{
  font-family:var(--ui);
  color:var(--cream);
  background:var(--bg);
  height:100%;
  position:relative;
  -webkit-font-smoothing:antialiased;
  animation:flick 8s steps(70) infinite;
}
@keyframes flick{ 0%,100%{ filter:none } 48%{ filter:brightness(1.04) } 50%{ filter:brightness(.96) } }

a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ochre); color:var(--ink); }
:focus-visible{ outline:2px solid var(--ochre); outline-offset:4px; border-radius:2px; }

/* ---------- film overlays ---------- */
.grain{
  position:fixed; inset:-150%; z-index:40; pointer-events:none; opacity:.42; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .45s steps(3) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0) } 33%{ transform:translate(-5%,3%) }
  66%{ transform:translate(4%,-5%) } 100%{ transform:translate(4%,4%) }
}
.scan{
  position:fixed; inset:0; z-index:41; pointer-events:none; opacity:.28;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 3px);
}
.vig{
  position:fixed; inset:0; z-index:39; pointer-events:none;
  background:radial-gradient(120% 110% at 50% 60%, transparent 42%, rgba(0,0,0,.66) 100%);
}

/* ---------- the arch ---------- */
.hero{
  position:relative; height:100vh; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding:clamp(56px,13vh,140px) 6vw clamp(28px,5vh,56px); overflow:hidden;
}
.arch{
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  width:min(118vh,132vw); height:min(59vh,66vw); z-index:0; pointer-events:none;
  filter:saturate(1.05) brightness(1.02);
}
.arch svg{ width:100%; height:100%; display:block; }
.floorline{
  position:absolute; left:50%; bottom:0; width:2px; height:22vh;
  background:linear-gradient(#f4ecd6, rgba(244,236,214,0));
  transform:translateX(-50%); z-index:1; opacity:.7;
}

/* ---------- center content ---------- */
.center{ position:relative; z-index:20; display:flex; flex-direction:column; align-items:center; gap:1.5rem; }

.name{
  font-family:var(--disp); font-weight:400; line-height:.9; letter-spacing:.005em;
  text-transform:uppercase; color:var(--cream);
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
/* RANDRÜÜT (widest line) is ~5.6em wide in Abril Fatface; 14.5vw keeps it
   inside the padded viewport at every width, and the 132px ceiling holds the
   poster size on desktop. */
.name span{ display:block; white-space:nowrap; font-size:min(132px, 14.5vw); }

.caption{
  font-weight:600; font-size:clamp(16px,2.3vw,25px); color:var(--cream);
  letter-spacing:.01em; max-width:30ch; text-shadow:0 1px 16px rgba(0,0,0,.8);
}

.social{ display:flex; gap:clamp(20px,3.4vw,32px); flex-wrap:wrap; justify-content:center; margin-top:1.1rem; }
.social a{
  display:inline-flex; color:var(--cream); opacity:.82;
  transition:opacity .25s, color .25s, transform .25s;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.6));
}
.social a:hover, .social a:focus-visible{ opacity:1; color:var(--ochre); transform:translateY(-2px); }
.social svg{
  width:clamp(24px,3.4vw,28px); height:clamp(24px,3.4vw,28px); display:block;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.social svg .dot{ fill:currentColor; stroke:none; }
.social svg .fill{ fill:currentColor; stroke:currentColor; }

/* ---------- small screens ---------- */
@media (max-width:520px){
  .arch{ width:190vw; height:95vw; }
  .caption{ max-width:22ch; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  body, .grain{ animation:none; }
  .grain{ opacity:.3; }
}