/* Coming-soon page for otmadventure.com, live until the booking site launches.
 *
 * Tokens, fonts and the button are taken from client/src/assets/site.css
 * (Version C) so the two never drift apart in look. Navy only: the paintings
 * are framed by the brand and only sit on navy or paper (docs/brand.md).
 *
 * The one signature is the site's dotted route: a lime ring by the logo, the
 * rail down the left past the painting, the lime cross at the foot of the page.
 */

@font-face {
  font-family: 'Fraunces';
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: 'Archivo';
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0;
}

:root {
  --navy: #000026;
  --paper: #f6f6f6;
  --lime: #cfff06;
  --orange: #f2441f;
  --muted: rgba(246, 246, 246, 0.68);

  --display: 'Fraunces', Georgia, serif;
  --text: 'Archivo', system-ui, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --offset: clamp(2.25rem, 5vw, 4.5rem);
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2.25rem;
  --s7: 3.5rem;

  /* Same objects as the site: round-capped dash 12 on 10, the ring, the cross. */
  --dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='22'%3E%3Crect width='3' height='12' rx='1.5' fill='%23f6f6f6' fill-opacity='0.55'/%3E%3C/svg%3E");
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='7.5' fill='%23000026' stroke='%23cfff06' stroke-width='4.5'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg transform='rotate(-8 12 12)' fill='%23cfff06'%3E%3Crect x='2' y='9' width='20' height='6' rx='3'/%3E%3Crect x='9' y='2' width='6' height='20' rx='3'/%3E%3C/g%3E%3C/svg%3E");
}

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

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
}

img { display: block; max-width: 100%; }
p, h1, ul, figure { margin: 0; }
a { color: inherit; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ---- Layout -------------------------------------------------------------
 * Phone: logo, painting and place name fill exactly the first screen; the
 *        words start just below it, on scroll.
 * Wide:  words on the route at left, the painting framed at right, full height.
 */

.page {
  position: relative;
  display: grid;
  grid-template-areas: 'brand' 'gallery' 'intro' 'legal';
  grid-template-rows: auto auto auto 1fr;
  row-gap: var(--s6);
  min-height: 100svh;
  padding: var(--s5) var(--gutter) var(--s6) calc(var(--gutter) + var(--offset));
  overflow-x: clip;
}

/* The route: ring at the logo, dashes down past the painting, the cross at
   the foot of the page. The dashes are clipped to the content box so they stop
   short of both marks instead of running through the cross. */
.page::before {
  content: '';
  position: absolute;
  left: calc(var(--gutter) + var(--offset) / 2 - 12px);
  top: calc(var(--s5) + 1.25rem);
  bottom: var(--s6);
  width: 24px;
  padding: 30px 0 34px;
  background:
    var(--ring) center top / 22px no-repeat border-box,
    var(--cross) center bottom / 24px no-repeat border-box,
    var(--dash) center top / 3px 22px repeat-y content-box;
  pointer-events: none;
}

.brand   { grid-area: brand; }
.gallery { grid-area: gallery; }
.intro   { grid-area: intro; }
.legal   { grid-area: legal; align-self: end; }

/* The script wordmark goes to mush below ~60px tall (docs/brand.md). */
.brand__logo { width: auto; height: clamp(4.5rem, 12vw, 6.5rem); }

/* Side by side on a desktop, and on a phone turned sideways. */
@media (min-width: 60em), (orientation: landscape) and (min-width: 40em) {
  .page {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      'brand   gallery'
      'intro   gallery'
      'legal   gallery';
    column-gap: clamp(3rem, 6vw, 7rem);
    padding-block: var(--s6);
  }
  .page::before { top: calc(var(--s6) + 1.25rem); }
  .intro { align-self: center; max-width: 40rem; }
}

/* ---- The paintings ------------------------------------------------------
 * Federica's animated paintings are 9:16 and are shown whole, framed on the
 * navy, never cropped to the screen. Under the frame, the place now playing,
 * in the Expanded voice the brand keeps for place names (docs/brand.md).
 */

.gallery {
  display: grid;
  gap: var(--s3);
  justify-items: start;
}

.gallery__frame {
  position: relative;
  display: grid;
  aspect-ratio: 9 / 16;
  width: 100%;
  background: rgba(246, 246, 246, 0.06);
  overflow: hidden;
}

.gallery video {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.gallery video.is-on { opacity: 1; }

.gallery__place {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-stretch: 118%;
  font-weight: 600;
}
/* A pin on the route: the same lime ring that sits by the logo. */
.gallery__place::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--ring) center / contain no-repeat;
}
/* On a phone the logo, the painting and its place name are the whole first
   screen: the frame takes the height left under the logo, so the headline
   starts exactly at the fold, not peeking above it. The pin moves onto the
   route rail, beside the frame. */
@media not ((min-width: 60em) or ((orientation: landscape) and (min-width: 40em))) {
  .gallery {
    --above: calc(var(--s5) + clamp(4.5rem, 12vw, 6.5rem) + var(--s6));
    min-height: calc(100svh - var(--above));
    align-content: start;
  }
  .gallery__frame {
    width: min(100%, (100svh - var(--above) - var(--s6) - var(--s3) - 1.4rem) * 9 / 16);
  }
  .gallery__place::before {
    position: absolute;
    left: calc(var(--offset) / -2 - 7px);
  }
}

@media (min-width: 60em), (orientation: landscape) and (min-width: 40em) {
  .gallery {
    align-self: start;
    position: sticky;
    top: var(--s6);
  }
  .gallery__frame {
    width: auto;
    height: calc(100svh - 2 * var(--s6) - 2rem);
  }
  .brand__logo { height: clamp(4rem, 12vh, 6.5rem); }
  .intro__title { font-size: clamp(2rem, min(1.4rem + 3.4vw, 8vh), 4.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery video { transition: none; }
}

/* ---- Words -------------------------------------------------------------- */

.intro { max-width: 34rem; }

.intro__title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-weight: 400;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.intro__lede {
  margin-top: var(--s5);
  max-width: 30em;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
  margin-top: var(--s6);
  padding: 0;
  list-style: none;
}

/* The site's booking pill: orange takes a navy label, never white (5.5:1). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--orange);
  color: var(--navy);
  font-stretch: 112%;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--lime); }

.contact__link {
  font-stretch: 118%;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.contact__link:hover { color: var(--lime); }

.legal {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}