/* ==========================================================================
   Cocktail Culture — Coming Soon

   Design notes, since they are the reason for most of what follows:

   * No gold, no glows, no gradient rules. Those are the cocktail-template
     signals; their absence is what makes this read as considered.
   * The brand name is the hero. "Coming Soon" is deliberately small and quiet
     underneath it — a holding page that shouts COMING SOON looks like a
     placeholder, one that presents the brand looks like a brand.
   * Tracking is near zero on the serif and reserved for small caps only.
   * Contrast comes from scrim overlays, never from filters. A composited
     gradient is free; a per-pixel filter on full-screen video is not.
   ========================================================================== */

:root {
  --ink:        #0E0E0E;   /* ground */
  --bone:       #EDE8E0;   /* primary type */
  --bone-dim:   rgba(237, 232, 224, .74);
  --bone-faint: rgba(237, 232, 224, .30);
  --hairline:   rgba(237, 232, 224, .26);

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Notch and home-indicator aware gutters */
  --gut-x: max(1.75rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --gut-t: max(1.5rem, env(safe-area-inset-top));
  --gut-b: max(1.75rem, env(safe-area-inset-bottom));
}

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

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* one screen, never scrolls */
  background: var(--ink);
}

body {
  font-family: var(--sans);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Stage
   position:fixed rather than 100vh/100dvh — immune to the mobile address bar
   collapsing, on every browser, with no unit fallback chain needed.
   -------------------------------------------------------------------------- */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}

/* Full-bleed on both orientations. The portrait file is served to portrait
   viewports and the landscape file to landscape ones, so `cover` is only ever
   trimming a little overflow rather than discarding most of the frame. */
.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--ink);
  z-index: 0;
}

/* Legibility. Soft pools rather than one flat wash, so the picture keeps its
   depth everywhere no type sits over it.

   The pool has to follow the type. Anchoring it bottom-left while the content
   is centred leaves the headline fighting whatever the video is doing in the
   middle of frame — which, on daylight footage, it loses. */
.stage__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(14,14,15,.58) 0%,
      rgba(14,14,15,.14) 26%,
      rgba(14,14,15,.20) 58%,
      rgba(14,14,15,.88) 100%),
    radial-gradient(120% 90% at 0% 100%,
      rgba(14,14,15,.72) 0%, rgba(14,14,15,0) 62%);
}

.stage[data-layout="center"] .stage__scrim {
  background:
    radial-gradient(62% 44% at 50% 46%,
      rgba(14,14,15,.68) 0%, rgba(14,14,15,.34) 52%, rgba(14,14,15,0) 78%),
    linear-gradient(180deg,
      rgba(14,14,15,.50) 0%,
      rgba(14,14,15,.12) 28%,
      rgba(14,14,15,.18) 66%,
      rgba(14,14,15,.82) 100%);
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */
.content {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Editorial: anchored to the bottom-left, video left open above it. */
.stage[data-layout="corner"] .content {
  left: var(--gut-x);
  right: var(--gut-x);
  bottom: var(--gut-b);
  align-items: flex-start;
  text-align: left;
}

/* Centred: closer to a classic holding page, same type system. */
.stage[data-layout="center"] .content {
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--gut-t) var(--gut-x) var(--gut-b);
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  /* Tops out at 60px. Larger than the old headline in raw pixels, but a
     tight-tracked serif at 60px occupies far less width and far less visual
     weight than 52px of wide-tracked uppercase sans. */
  font-size: clamp(2.5rem, 7vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--bone);
}

.rule {
  display: block;
  width: 2.25rem;
  height: 1px;
  margin: 1.5rem 0 1.15rem;
  background: var(--hairline);
}

.stage[data-layout="center"] .rule { margin-left: auto; margin-right: auto; }

/* Small, quiet, secondary. This is the line that was doing all the shouting. */
.status {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .6875rem;                /* 11px */
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.contact {
  position: relative;
  align-self: flex-start;
  margin-top: 2.25rem;
  padding: .5rem 0;                   /* keeps the tap target ~40px tall */
  font-family: var(--sans);
  font-weight: 400;
  font-size: .8125rem;                /* 13px */
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
}

.stage[data-layout="center"] .contact { align-self: center; }

/* A rule that draws itself in on hover, rather than a pill button. */
.contact::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .25rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  opacity: .38;
  transition: opacity .4s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}

.contact:hover::after,
.contact:focus-visible::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.ctl {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--bone-faint);
  border-radius: 50%;
  background: transparent;
  color: var(--bone-dim);
  cursor: pointer;
  transition: color .35s ease, border-color .35s ease, background .35s ease;
}

.ctl:hover,
.ctl:focus-visible {
  color: var(--ink);
  background: var(--bone);
  border-color: var(--bone);
}

.ctl--sound,
.ctl--play   { top: var(--gut-t); right: var(--gut-x); }
.ctl--social { bottom: var(--gut-b); right: var(--gut-x); }

.contact:focus-visible,
.ctl:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 4px;
}

/* Icon swap, driven by .is-muted on the stage */
.ico { display: none; }
.stage.is-muted .ico--off { display: block; }
.stage:not(.is-muted) .ico--on { display: block; }

/* The top-right slot holds either the sound toggle or, when autoplay was
   refused, the play button — never both. */
.ctl--play { display: none; }
.stage.is-blocked .ctl--sound { display: none; }
.stage.is-blocked .ctl--play  { display: inline-flex; }

/* No playable video: the poster carries the page and there is nothing to
   unmute, so neither control should be offered. */
.stage.is-nomedia .ctl--sound,
.stage.is-nomedia .ctl--play { display: none; }

/* --------------------------------------------------------------------------
   Entrance — slow and small. Anything faster reads as a web template.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes widen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.wordmark, .status, .contact {
  animation: rise 1.1s cubic-bezier(.22,.61,.36,1) both;
}
.rule { animation: widen .9s cubic-bezier(.22,.61,.36,1) both; transform-origin: left; }
.ctl  { animation: fade 1.2s ease both; }

.wordmark { animation-delay: .20s; }
.rule     { animation-delay: .55s; }
.status   { animation-delay: .70s; }
.contact  { animation-delay: .85s; }
.ctl      { animation-delay: 1.1s; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Portrait phones: the corner layout would crowd the bottom edge, so the
   centred composition is used regardless of the data-layout attribute. */
@media (max-aspect-ratio: 1/1) and (max-width: 700px) {
  /* Phones always get the centred composition, so they need the centred pool
     regardless of which layout the desktop is set to. */
  .stage[data-layout] .stage__scrim {
    background:
      radial-gradient(74% 40% at 50% 47%,
        rgba(14,14,15,.70) 0%, rgba(14,14,15,.34) 52%, rgba(14,14,15,0) 80%),
      linear-gradient(180deg,
        rgba(14,14,15,.52) 0%,
        rgba(14,14,15,.12) 26%,
        rgba(14,14,15,.16) 68%,
        rgba(14,14,15,.84) 100%);
  }

  .stage[data-layout] .content {
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--gut-t) var(--gut-x) calc(var(--gut-b) + 3.5rem);
  }
  .stage[data-layout] .rule { margin-left: auto; margin-right: auto; }
  .stage[data-layout] .contact { align-self: center; }
  .stage[data-layout] .status { text-align: center; }

  .ctl--social { left: 50%; right: auto; transform: translateX(-50%); }
}

/* Landscape phones have very little vertical room. */
@media (max-height: 430px) {
  .wordmark { font-size: clamp(1.75rem, 5.5vw, 2.25rem); }
  .rule     { margin: .85rem 0 .7rem; }
  .contact  { margin-top: 1.1rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion — honour the OS setting rather than overriding it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}