/* ---------------------------------------------------------------
   Stone Union — design tokens
   A dark quarry gallery: travertine ink on basalt, one oxide accent.
   --------------------------------------------------------------- */
:root {
  --basalt-950: #0e0d0b;
  --basalt-900: #17140f;
  --stone-line: #3a3327;
  --travertine: #e7ded0;
  --travertine-dim: #a99e8c;
  --chalk: #f8f4ea;
  --oxide: #c1603a;
  --oxide-bright: #e07a4f;
  --quarry: #8a9678;

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--basalt-950);
}

body {
  margin: 0;
  background: var(--basalt-950);
  color: var(--travertine);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

h1 {
  font-family: var(--font-display);
  color: var(--chalk);
  font-weight: 480;
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

/* faint stone-grain overlay across the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}


.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--quarry);
  border: 1px solid var(--stone-line);
  border-radius: 999px;
  padding: 0.42em 0.95em;
}

/* ---------------------------------------------------------------
   Coming soon
   --------------------------------------------------------------- */
.coming-soon {
  position: relative;
  z-index: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--basalt-950);
}

.coming-soon-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.coming-soon-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(0.6) contrast(1.1) brightness(0.8);
}

.coming-soon-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 13, 11, 0.6) 0%,
    rgba(14, 13, 11, 0.45) 28%,
    rgba(14, 13, 11, 0.85) 68%,
    var(--basalt-950) 100%
  );
}

.coming-soon-content {
  position: relative;
  padding: 0 var(--gutter);
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coming-soon-mark {
  width: 140px;
  height: auto;
  margin: 1.8rem 0;
  mix-blend-mode: screen;
  filter: grayscale(1);
  opacity: 0.9;
}

.coming-soon-title {
  margin-top: 1.1rem;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 0.98;
  font-weight: 380;
  letter-spacing: -0.01em;
}

.coming-soon-title em {
  font-style: italic;
  font-weight: 340;
}

.coming-soon-tag {
  margin-top: 1.2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--travertine);
}

.coming-soon-badge {
  margin-top: 2.2rem;
  font-size: 0.8rem;
  color: var(--chalk);
}