/* ═══════════════════════════════════════════════════════════
   CARLOS S. RAMIREZ — HIGH HOROLOGY
   Single screen. No scroll. The stone from the deck's opening
   slide fills the viewport; the lockup is part of the wall.
   Palette and type are the deck's: #B39A83 on stone, Peignot.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Peignot';
  src: url('/fonts/Peignot-subset-v2.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* subset: uppercase, digits and punctuation only */
}
@font-face {
  font-family: 'InterBrand';
  src: url('/fonts/Inter-Light-subset-v2.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0B0E12;
  --champagne: #B39A83;
  --champagne-lit: #D9C6AF;
  --display: 'Peignot', 'Copperplate', Georgia, serif;
  --body: 'InterBrand', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;                 /* one screen, nothing to scroll to */
  background: var(--ink);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body { font-family: var(--body); font-weight: 300; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── The wall ─────────────────────────────────────────── */
.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px calc(34px + env(safe-area-inset-bottom));
  background-color: var(--ink);
}

/* the wall lives on its own layer so it can settle without moving the type */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* portrait composite by default; the slide's own frame when wide enough */
  background-image: url('/assets/stone-portrait-v2.jpg');
  background-image: image-set(url('/assets/stone-portrait-v2.webp') type('image/webp'),
                              url('/assets/stone-portrait-v2.jpg')  type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: settle 2.6s cubic-bezier(.2,.7,.2,1) both;
}
@media (min-aspect-ratio: 6/5) {
  .stage::before {
    background-image: url('/assets/stone-wide-v2.jpg');
    background-image: image-set(url('/assets/stone-wide-v2.webp') type('image/webp'),
                                url('/assets/stone-wide-v2.jpg')  type('image/jpeg'));
  }
}
@keyframes settle {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: none; }
}

/* ─── The only words on the page ───────────────────────── */
.legend {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
  animation: lift 1.6s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: 1.1s;
}
@keyframes lift {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.tagline {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(8.5px, 1.35vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
  padding-left: 0.32em;
}

.rule {
  display: block;
  width: min(340px, 54vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne) 24%, var(--champagne) 76%, transparent);
  opacity: 0.7;
}

/* deliberately quiet: the enquiry line should be found, not announced */
.whisper {
  margin: 0;
  font-size: clamp(9px, 1.05vw, 11px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
  opacity: 0.52;
  padding-left: 0.2em;
  transition: opacity 0.6s ease;
}
.whisper:hover { opacity: 0.88; }
.sep { margin: 0 0.5em; opacity: 0.6; }

.whisper a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.whisper a:hover,
.whisper a:focus-visible {
  color: var(--champagne-lit);
  border-bottom-color: rgba(217,198,175,0.5);
  outline: none;
}

/* ─── Grain ────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  animation: grainShift 7s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  16% { transform: translate(-3%, 2%); }
  33% { transform: translate(2%, -3%); }
  50% { transform: translate(-2%, -2%); }
  66% { transform: translate(3%, 1%); }
  83% { transform: translate(1%, 3%); }
}

/* ─── Small and short screens ──────────────────────────── */
@media (max-width: 600px) {
  .stage { padding: 0 18px calc(28px + env(safe-area-inset-bottom)); }
  .legend { gap: 11px; }
  .tagline { letter-spacing: 0.2em; padding-left: 0.2em; }
  .whisper { letter-spacing: 0.14em; padding-left: 0.14em; }
}
@media (max-height: 420px) {
  .stage { padding-bottom: 16px; }
  .legend { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage::before, .legend { animation: none; }
  .grain { animation: none; }
}