/* ═══════════════════════════════════════════════════
   ASHREEF.COM — the vault, v2: single viewport, no scroll
   Pagella (Palatino) hero · Inter body · monochrome
   ═══════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pagella';
  src: url('/fonts/pagella-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000000;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --hi: #F5F7FA;
  --mid: #9BA3AF;
  --low: #565D68;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--mid);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* the page does not scroll. period. */
}

::selection { background: #FFFFFF; color: #000000; }

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

:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: 4px;
}

/* ── film grain ── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── frame: vault corridor ── */
.frame {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1120px;
  margin-inline: auto;
  border-inline: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding-inline: clamp(28px, 6vw, 72px);
}

@media (max-width: 1180px) { .frame { border-inline: none; } }

/* ── hero: fills all space between bars ── */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-title {
  font-family: 'Pagella', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-size: clamp(4.6rem, 13.5vw, 11rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--hi);
}

.hero-sub {
  margin-top: 26px;
  font-size: clamp(1.02rem, 1.8vw, 1.25rem);
  font-weight: 450;
  line-height: 1.6;
  color: var(--mid);
}

/* ── projects: two names. nothing else ── */
.projects {
  padding-block: 30px;
  border-top: 1px solid var(--line);
}

.proj-row {
  display: flex;
  gap: clamp(36px, 6vw, 80px);
}

.proj {
  font-family: 'Pagella', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  color: var(--hi);
  transition: opacity 0.3s ease;
}

.proj .arr {
  font-family: 'Inter', sans-serif;
  font-size: 0.62em;
  color: var(--low);
  margin-left: 10px;
  transition: margin-left 0.3s ease, color 0.3s ease;
}

.proj:hover .arr { color: var(--hi); margin-left: 16px; }

/* ── contact line ── */
.contact {
  padding-block: 26px;
  border-top: 1px solid var(--line);
}

.contact a {
  color: var(--low);
  font-size: 0.9rem;
  transition: color 0.3s ease;
}
.contact a:hover { color: var(--hi); }

/* ── hero watermark ── */
.hero { position: relative; }

/* giant watermark monogram behind everything */
.hero-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.hero-watermark img {
  width: min(92vmin, 900px);
  height: auto;
  opacity: 0.04;
}


/* ── mobile: quiet luxury, not loud ── */
@media (max-width: 640px) {
  /* headline still fills the width — that's the one element allowed to shout */
  .hero-title { font-size: clamp(3rem, min(11vh, 22.5vw), 12rem); }
  .hero-sub { font-size: 1.125rem; }

  .proj { font-size: 1.45rem; }
  .projects { padding-block: 32px; }

}

/* ── short screens: allow scroll only if truly needed ── */
@media (max-height: 560px) {
  body { overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}