@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@900&display=swap');

/* ---------------------------------------------------------------
   samboghossian.com — the hub
   Two colours drive the whole look. Change these to retaste it:
--------------------------------------------------------------- */
:root {
  --bg:  #e4b06c;   /* warm golden-sand background */
  --ink: #3a200e;   /* dark brown text */
}

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

body {
  background: var(--bg);
  color: var(--ink);
  /* Chunky display font — Lexend Black (900) from Google Fonts, chunky fallbacks */
  font-family: "Lexend", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The whole screen.
   - justify-content: space-evenly  -> equal gap above / between / below (vertical)
   - text-align: center             -> words centred left-to-right (reliable) */
.stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  padding: 8vh 1.25rem;
}

/* The two big links. display:block + inherited text-align:center = dead centre. */
a.word {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(2rem, 9vw, 5rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .18s ease;
}
a.word:hover,
a.word:focus { opacity: .72; }

/* "Coming soon" placeholder pages */
.stage--center { justify-content: center; gap: 1.75rem; }
.soon { font-size: clamp(1.4rem, 6.5vw, 2.75rem); letter-spacing: .02em; text-transform: uppercase; }
.back {
  display: block;
  color: var(--ink); opacity: .6; text-decoration: none;
  font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.back:hover, .back:focus { opacity: 1; }