:root {
    --ink: #ffffff;
    --ink-soft: color-mix(in srgb, var(--ink) 88%, transparent);
    --btn: #ffffff; --btn-ink: #10302f; --shade: 1;
    --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
    --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pad: clamp(20px, 4.4vw, 88px);
    --ease: cubic-bezier(.2, .8, .2, 1);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: #7fb9ab; overflow: hidden; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
  #page { position: fixed; inset: 0; overflow: hidden; background: #7fb9ab; }
  #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; transition: opacity 1s ease; }
  body.loading #gl { opacity: 0; }
  #page a, #page button { font: inherit; color: inherit; }

  /* deep water under the bar and under the words, so they read over the bright pond */
  .shade { position: absolute; inset: 0 0 auto 0; height: 170px; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 36, 40, calc(.42 * var(--shade))), rgba(6, 36, 40, 0)); opacity: 0; transition: opacity 1.4s ease .3s; }
  body.ready .shade { opacity: 1; }

  header { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
    padding: clamp(18px, 2.8vw, 32px) var(--pad); }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 1.75vw, 32px); letter-spacing: .01em; text-decoration: none; text-shadow: 0 1px 18px rgba(4, 30, 34, .45); }
  .brand svg.logo { width: 1.05em; height: 1.05em; flex: none; }
  .brand svg.logo[hidden] { display: none; }
  nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 46px); font-size: clamp(12px, 0.88vw, 16px); }
  nav a { text-decoration: none; text-shadow: 0 1px 12px rgba(4, 30, 34, .55); opacity: .96; transition: opacity .25s; }
  nav a:hover { opacity: .72; }
  .book { display: inline-flex; align-items: center; height: clamp(28px, 2.2vw, 40px); padding: 0 clamp(13px, 1.2vw, 22px); background: var(--btn); color: var(--btn-ink) !important; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: clamp(12px, 0.88vw, 16px); transition: transform .3s var(--ease), filter .25s; text-shadow: none !important; opacity: 1 !important; }
  .book:hover { filter: brightness(.95); }
  .book:active { transform: scale(.97); }

  .hero { position: absolute; z-index: 3; left: 50%; bottom: clamp(40px, 10vh, 120px); transform: translateX(-50%); width: min(calc(100% - 2 * var(--pad)), 900px); text-align: center; }
  /* a deep spot in the pond behind the words, only where they sit */
  .hero::before { content: ""; position: absolute; z-index: -1; inset: -34% -16% -30% -16%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(5, 34, 38, calc(.6 * var(--shade))), rgba(5, 34, 38, calc(.34 * var(--shade))) 50%, rgba(5, 34, 38, 0)); opacity: 0; transition: opacity 1.6s ease .5s; }
  body.ready .hero::before { opacity: 1; }
  h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 4.6vw, 92px); line-height: 1.0; letter-spacing: -.012em; margin: 0 0 clamp(14px, 1.6vw, 26px);
    text-shadow: 0 2px 30px rgba(4, 30, 34, .4); }
  h1 .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; white-space: nowrap; }
  h1 .ln > span { display: inline-block; transform: translateY(105%); transition: transform 1.5s var(--ease); }
  body.ready h1 .ln > span { transform: none; }
  body.ready h1 .ln:nth-child(1) > span { transition-delay: .5s; }
  body.ready h1 .ln:nth-child(2) > span { transition-delay: .66s; }
  .lede { font-size: clamp(13px, 1.02vw, 18px); line-height: 1.6; color: var(--ink-soft); margin: 0 auto clamp(20px, 2.2vw, 34px); max-width: 34em; text-shadow: 0 1px 16px rgba(4, 30, 34, .55); }
  .ctas { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2vw, 34px); }
  .cta { display: inline-flex; align-items: center; height: clamp(40px, 3.1vw, 56px); padding: 0 clamp(20px, 1.9vw, 34px); background: var(--btn); color: var(--btn-ink) !important; border-radius: 999px; text-decoration: none; font-size: clamp(13px, 1.0vw, 17px); font-weight: 500; transition: transform .3s var(--ease), filter .25s; box-shadow: 0 10px 30px -14px rgba(4, 30, 34, .6); }
  .cta:hover { filter: brightness(.95); }
  .cta:active { transform: scale(.97); }
  .link { font-size: clamp(13px, 1.0vw, 17px); text-decoration: none; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; text-shadow: 0 1px 14px rgba(4, 30, 34, .6); transition: background-size .4s var(--ease); }
  .link:hover { background-size: 0 1px; background-position: 100% 100%; }

  .rise { opacity: 0; transform: translateY(14px); transition: opacity 1.3s ease, transform 1.3s var(--ease); }
  body.ready .rise { opacity: 1; transform: none; }
  body.ready header.rise { transition-delay: .2s; }
  body.ready .lede.rise { transition-delay: .95s; }
  body.ready .ctas.rise { transition-delay: 1.15s; }
  span[data-edit] { display: inline-block; }
  .ed-seg.wrap { flex-wrap: wrap; border-radius: 16px; gap: 2px; }
  .ed-seg.wrap button { flex: 1 0 22%; }
  .brand .ic-up, .cta .ic-up { display: inline-block; flex: none; }

  .nogl-msg { display: none; position: fixed; inset: 0; z-index: 9; place-items: center; color: #10302f; background: #dff0ec; font: 15px var(--sans); }
  body.nogl .nogl-msg { display: grid; }

  /* the pond turns a quarter on a tall screen (the dock and the fisherman at the bottom): the words go up top */
  @media (max-aspect-ratio: 9/10) {
    .hero { top: 14vh; bottom: auto; }
    .hero::before { inset: -18% -10% -16% -10%; }
  }
  @media (max-width: 760px) {
    nav a:not(.book) { display: none; }
    h1 .ln { white-space: normal; }
    h1 { font-size: clamp(34px, 9.4vw, 56px); }
    .lede { font-size: 15px; max-width: 24em; }
    .cta { height: 50px; padding: 0 26px; font-size: 15px; }
    .book { height: 38px; padding: 0 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    h1 .ln > span, .rise { transition-duration: .01s !important; transition-delay: 0s !important; }
  }