@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/fraunces.woff2") format("woff2");
}

@font-face {
  font-family: Fraunces;
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/fraunces-italic.woff2") format("woff2");
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/manrope.woff2") format("woff2");
}

@layer reset, tokens, base, layout, components, motion;

@layer tokens {
  :root {
    --sand: #f3eee6;
    --sand-deep: #e6ddd0;
    --foam: #faf8f5;
    --ink: #132428;
    --ink-soft: #3d5054;
    --lagoon: #1e6b72;
    --lagoon-deep: #164e54;
    --deep: #0b2e34;
    --deep-soft: #164047;

    --bg: var(--sand);
    --fg: var(--ink);
    --muted: var(--ink-soft);
    --accent: var(--lagoon);
    --accent-fg: var(--foam);
    --border: color-mix(in oklab, var(--ink) 12%, transparent);
    --border-strong: color-mix(in oklab, var(--ink) 22%, transparent);

    --font-display: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --font-body: Manrope, "Segoe UI", system-ui, sans-serif;

    --text-xs: clamp(0.72rem, 0.68rem + 0.15vw, 0.78rem);
    --text-sm: clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
    --text-base: clamp(1.02rem, 0.96rem + 0.28vw, 1.125rem);
    --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
    --text-xl: clamp(1.65rem, 1.2rem + 1.6vw, 2.4rem);
    --text-2xl: clamp(2.15rem, 1.4rem + 2.8vw, 3.4rem);
    --text-3xl: clamp(2.8rem, 1.6rem + 5vw, 5.6rem);

    --leading-tight: 1.05;
    --leading-snug: 1.22;
    --leading-body: 1.6;
    --tracking-display: -0.03em;
    --tracking-kicker: 0.16em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;
    --space-9: 112px;
    --section-y: clamp(3.5rem, 2.25rem + 5.5vw, 7rem);

    --wrap: min(1120px, calc(100% - clamp(48px, 8vw, 96px)));
    --header-h: 72px;

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --shadow-soft:
      0 0 0 1px color-mix(in oklab, var(--ink) 6%, transparent),
      0 18px 40px -28px color-mix(in oklab, var(--deep) 40%, transparent);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-quick: 150ms;
    --motion-fast: 250ms;
    --motion-slow: 400ms;
  }
}

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    interpolate-size: allow-keywords;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  ul,
  ol,
  li {
    margin: 0;
    padding: 0;
  }

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

  img {
    height: auto;
    outline: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
    outline-offset: -1px;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-body);
    background: var(--bg);
    color: var(--fg);
    min-height: 100svh;
  }

  body.nav-open {
    overflow: hidden;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  h1 {
    font-size: var(--text-3xl);
    text-box: trim-both cap alphabetic;
  }

  h2 {
    font-size: var(--text-2xl);
    text-box: trim-both cap alphabetic;
  }

  h3 {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
  }

  p {
    text-wrap: pretty;
  }

  :focus-visible {
    outline: 2px solid var(--lagoon);
    outline-offset: 3px;
  }

  ::selection {
    background: color-mix(in oklab, var(--lagoon) 28%, white);
    color: var(--deep);
  }
}

@layer layout {
  .wrap {
    width: var(--wrap);
    margin-inline: auto;
  }

  .skip-link {
    position: absolute;
    inset: var(--space-3) auto auto var(--space-3);
    z-index: 30;
    padding: 0.6rem 0.9rem;
    background: var(--deep);
    color: var(--foam);
    border-radius: var(--radius-sm);
    translate: 0 -120%;

    &:focus {
      translate: 0;
    }
  }

  .kicker {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--lagoon);
    line-height: 1;
  }

  .section-head {
    max-width: 40rem;
    margin-block-end: clamp(1.75rem, 3.2vw, 3rem);

    h2 {
      margin-block-start: var(--space-4);
    }
  }

  .section-lead {
    margin-block-start: var(--space-4);
    color: var(--muted);
    max-width: 38rem;
  }
}

@layer components {
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--header-h);
    padding-inline: clamp(16px, 4vw, 40px);
    color: var(--foam);
    background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--deep) 42%, transparent),
      transparent 85%
    );
    transition:
      background-color var(--motion-fast) var(--ease-out),
      color var(--motion-fast) var(--ease-out),
      box-shadow var(--motion-fast) var(--ease-out);

    &.is-scrolled {
      color: var(--ink);
      background: color-mix(in oklab, var(--sand) 86%, transparent);
      backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 var(--border);
    }
  }

  .wordmark {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    z-index: 2;

    .mark {
      width: 28px;
      height: 28px;
    }
  }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    margin-inline-start: auto;
    font-size: var(--text-sm);
    font-weight: 500;

    a {
      position: relative;
      padding-block: 0.4rem;
      color: inherit;

      &::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--motion-fast) var(--ease-out);
      }

      &:hover,
      &:focus-visible {
        color: currentColor;

        &::after {
          transform: scaleX(1);
        }
      }
    }
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition:
      background-color var(--motion-quick) var(--ease-out),
      color var(--motion-quick) var(--ease-out),
      transform var(--motion-quick) var(--ease-out);

    &:active {
      scale: 0.96;
    }
  }

  .btn-nav {
    background: color-mix(in oklab, var(--foam) 14%, transparent);
    color: inherit;
    border: 1px solid color-mix(in oklab, currentColor 28%, transparent);

    .is-scrolled & {
      background: var(--deep);
      color: var(--foam);
      border-color: transparent;
    }

    &:hover {
      background: var(--foam);
      color: var(--deep);
      border-color: transparent;
    }
  }

  .btn-light {
    background: var(--foam);
    color: var(--deep);

    &:hover {
      background: var(--sand);
    }
  }

  .btn-dark {
    background: var(--deep);
    color: var(--foam);

    &:hover {
      background: var(--lagoon-deep);
    }
  }

  .nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    z-index: 2;

    span {
      display: block;
      width: 18px;
      height: 1.5px;
      background: currentColor;
      border-radius: 2px;
      transition:
        transform var(--motion-fast) var(--ease-out),
        opacity var(--motion-quick) var(--ease-out);

      &:first-child {
        translate: 0 -3.5px;
      }
      &:last-child {
        translate: 0 3.5px;
      }
    }

    .is-open & span:first-child {
      translate: 0 0;
      rotate: 45deg;
    }

    .is-open & span:last-child {
      translate: 0 0;
      rotate: -45deg;
    }
  }

  .hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: end;
    color: var(--foam);
    background-size: cover;
    background-position: center;
    isolation: isolate;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          to bottom,
          color-mix(in oklab, var(--deep) 45%, transparent),
          transparent 28%
        ),
        linear-gradient(
          to top,
          color-mix(in oklab, var(--deep) 78%, transparent) 0%,
          color-mix(in oklab, var(--deep) 18%, transparent) 46%,
          transparent 70%
        );
      z-index: 0;
      pointer-events: none;
    }
  }

  .hero-inner {
    position: relative;
    z-index: 1;
    width: var(--wrap);
    margin-inline: auto;
    padding-block: calc(var(--header-h) + var(--space-6)) var(--section-y);

    .kicker {
      color: color-mix(in oklab, var(--foam) 78%, var(--lagoon));
    }

    h1 {
      max-width: 12ch;
      margin-block: var(--space-5) var(--space-5);
    }

    .lead {
      max-width: 34rem;
      font-size: var(--text-lg);
      color: color-mix(in oklab, var(--foam) 88%, var(--sand));
      margin-block-end: var(--space-6);
    }
  }

  .intro {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: center;
    padding-block: var(--section-y);
  }

  .intro-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }

  .intro-copy {
    max-width: 38rem;

    h2 {
      margin-block: var(--space-4) var(--space-5);
    }

    p + p {
      margin-block-start: 1rem;
    }

    blockquote {
      margin-block-start: var(--space-6);
      padding-inline-start: var(--space-5);
      border-inline-start: 1px solid var(--lagoon);

      p {
        font-family: var(--font-display);
        font-size: var(--text-lg);
        font-style: italic;
        font-weight: 400;
        line-height: var(--leading-snug);
        color: var(--deep-soft);
      }
    }
  }

  .stay {
    padding-block: 0 var(--section-y);
  }

  .gallery-section {
    padding-block: 0;
  }

  .shore {
    display: flow-root;
    background: var(--foam);
    padding-block: var(--section-y);
  }

  .water {
    padding-block: var(--section-y);
  }

  .suites,
  .outings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .suite,
  .outing {
    container-type: inline-size;
  }

  .suite img,
  .outing img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
  }

  .suite img {
    aspect-ratio: 4 / 5;
  }

  .outing img {
    aspect-ratio: 3 / 2;
    margin-block-end: var(--space-4);
  }

  .suite-body {
    padding-block-start: var(--space-4);
  }

  .suite-rate,
  .outing-num {
    font-variant-numeric: tabular-nums;
  }

  .suite-rate {
    margin-block-start: var(--space-3);
    font-family: var(--font-display);
    font-style: italic;
    color: var(--lagoon-deep);
  }

  .outing-num {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-kicker);
    color: var(--lagoon);
    margin-block-end: var(--space-2);
  }

  .outing h3,
  .suite h3 {
    margin-block-end: var(--space-2);
  }

  .outing p:last-child,
  .suite p:not(.suite-rate) {
    color: var(--muted);
    font-size: var(--text-sm);
  }

  .table-section {
    background: var(--deep);
    color: var(--foam);
    padding-block: var(--section-y);
  }

  .table-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }

  .table-photo img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--radius-lg);
    outline-color: color-mix(in oklab, white 12%, transparent);
  }

  .table-copy {
    .kicker {
      color: color-mix(in oklab, var(--foam) 55%, var(--lagoon));
    }

    h2 {
      margin-block: var(--space-4) var(--space-5);
      max-width: 16ch;
    }

    p {
      color: color-mix(in oklab, var(--foam) 82%, var(--sand));
    }

    p + p {
      margin-block-start: 1rem;
    }

    table {
      margin-block-start: var(--space-6);
      font-size: var(--text-sm);
    }

    th {
      text-align: left;
      font-weight: 600;
      padding: 0.85rem 0;
      width: 40%;
      color: var(--foam);
    }

    td {
      color: color-mix(in oklab, var(--foam) 78%, var(--sand));
      font-variant-numeric: tabular-nums;
    }

    tr + tr th,
    tr + tr td {
      border-top: 1px solid color-mix(in oklab, var(--foam) 14%, transparent);
    }
  }

  .gallery {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3);

    li {
      min-width: 0;
    }

    a {
      display: block;
      height: 100%;
      border-radius: var(--radius-md);
      overflow: hidden;
    }

    img {
      width: 100%;
      height: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      outline: none;
      transition: transform var(--motion-slow) var(--ease-out);
    }

    a:hover img {
      transform: scale(1.03);
    }

    li:nth-child(1) { grid-column: span 7; }
    li:nth-child(2) { grid-column: span 5; }
    li:nth-child(3) { grid-column: span 4; }
    li:nth-child(4) { grid-column: span 8; }
    li:nth-child(5) { grid-column: span 5; }
    li:nth-child(6) { grid-column: span 7; }

    li:nth-child(1) img,
    li:nth-child(4) img,
    li:nth-child(6) img {
      aspect-ratio: 16 / 10;
    }
  }

  .visit {
    padding-block-start: var(--section-y);
    padding-block-end: 0;
  }

  .visit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .visit-grid h2 {
    margin-block: var(--space-4) var(--space-5);
    max-width: 16ch;
  }

  .visit-grid p + p {
    margin-block-start: 1rem;
    color: var(--muted);
  }

  .visit-card {
    background: var(--foam);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: var(--space-3);

    h3 {
      font-size: var(--text-sm);
      font-family: var(--font-body);
      font-weight: 600;
      letter-spacing: var(--tracking-kicker);
      text-transform: uppercase;
      color: var(--lagoon);
    }

    a.cms-editable,
    p.cms-editable {
      font-size: var(--text-lg);
      font-family: var(--font-display);
    }

    .visit-note {
      font-family: var(--font-body) !important;
      font-size: var(--text-sm) !important;
      color: var(--muted);
    }

    .btn {
      margin-block-start: var(--space-3);
      justify-self: start;
    }
  }

  .site-footer {
    background: var(--deep);
    color: color-mix(in oklab, var(--foam) 86%, var(--sand));
    padding-block: clamp(2.75rem, 4vw, 4.5rem);
  }

  .footer-grid {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    align-items: end;

    .wordmark {
      margin-block-end: var(--space-3);
    }

    p {
      max-width: 28rem;
      color: color-mix(in oklab, var(--foam) 70%, var(--sand));
      font-size: var(--text-sm);
    }
  }

  .footer-meta {
    font-size: var(--text-xs) !important;
    letter-spacing: 0.02em;
  }

  .lightbox {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: color-mix(in oklab, var(--deep) 88%, black);
    color: var(--foam);
    border: 0;
    padding: 0;

    &::backdrop {
      background: color-mix(in oklab, var(--deep) 70%, black);
    }

    figure {
      height: 100%;
      display: grid;
      place-items: center;
      padding: var(--space-8) var(--space-8) 5.5rem;
    }

    img {
      max-width: min(1100px, 100%);
      max-height: calc(100svh - 9rem);
      width: auto;
      object-fit: contain;
      outline: none;
      border-radius: var(--radius-sm);
    }

    figcaption {
      position: absolute;
      inset: auto 0 var(--space-5);
      text-align: center;
      font-size: var(--text-sm);
      color: color-mix(in oklab, var(--foam) 80%, var(--sand));
    }
  }

  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    position: absolute;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--foam);
    border-radius: 999px;
    background: color-mix(in oklab, var(--deep) 35%, transparent);

    svg {
      width: 22px;
      height: 22px;
    }

    &:hover {
      background: color-mix(in oklab, var(--foam) 14%, transparent);
    }
  }

  .lightbox-close {
    top: var(--space-4);
    right: var(--space-4);
  }

  .lightbox-prev {
    left: var(--space-4);
    top: 50%;
    translate: 0 -50%;
  }

  .lightbox-next {
    right: var(--space-4);
    top: 50%;
    translate: 0 -50%;
  }

  .is-cms {
    .hero {
      min-height: 80svh;
    }

    .gallery a:hover img {
      transform: none;
    }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .intro-photo,
      .intro-copy,
      .suite,
      .outing,
      .table-photo,
      .table-copy,
      .gallery li,
      .visit-grid > * {
        animation: rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 28%;
      }
    }

    @keyframes rise {
      from {
        opacity: 0.01;
        transform: translateY(18px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }

    .gallery a:hover img {
      transform: none;
    }
  }
}

@media (width < 960px) {
  .footer-grid {
    flex-direction: column;
    align-items: start;
    gap: var(--space-5);
  }

  .visit-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .visit-card {
    max-width: 26rem;
  }

  .gallery {
    gap: var(--space-3);

    li:nth-child(n) {
      grid-column: span 6;
    }

    li:nth-child(n) img {
      aspect-ratio: 4 / 5;
    }
  }

  .suites,
  .outings {
    gap: var(--space-5);
  }
}

@media (720px <= width < 960px) {
  .suites,
  .outings {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .suite {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-5);
    align-items: center;
  }

  .suite img {
    aspect-ratio: 4 / 3;
  }

  .suite-body {
    padding-block-start: 0;
  }

  .outing {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "photo num"
      "photo title"
      "photo copy";
    column-gap: var(--space-5);
    row-gap: var(--space-2);
    align-items: center;
  }

  .outing img {
    grid-area: photo;
    aspect-ratio: 4 / 3;
    margin-block-end: 0;
    height: 100%;
    object-fit: cover;
  }

  .outing-num {
    grid-area: num;
    align-self: end;
    margin: 0;
  }

  .outing h3 {
    grid-area: title;
    margin: 0;
  }

  .outing p:last-child {
    grid-area: copy;
    align-self: start;
  }
}

@media (width < 720px) {
  .nav-toggle {
    display: grid;
    margin-inline-start: auto;
  }

  .btn-nav {
    display: none;
  }

  .nav {
    position: fixed;
    inset: 0;
    margin: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-5);
    background: var(--deep);
    color: var(--foam);
    font-size: var(--text-xl);
    font-family: var(--font-display);
    translate: 0 -100%;
    opacity: 0;
    pointer-events: none;
    transition:
      translate var(--motion-slow) var(--ease-out),
      opacity var(--motion-fast) var(--ease-out);

    .is-open & {
      translate: 0;
      opacity: 1;
      pointer-events: auto;
    }

    a {
      color: var(--foam);
    }
  }

  .intro,
  .table-grid,
  .visit-grid,
  .suites,
  .outings {
    grid-template-columns: 1fr;
  }

  .intro,
  .table-grid,
  .visit-grid {
    gap: var(--space-6);
  }

  .suites,
  .outings {
    gap: var(--space-7);
  }

  .intro-photo img {
    aspect-ratio: 4 / 3;
  }

  .suite img {
    aspect-ratio: 4 / 3;
  }

  .table-photo img {
    aspect-ratio: 3 / 2;
  }

  .gallery > li {
    grid-column: 1 / -1;
  }

  .gallery img {
    aspect-ratio: 3 / 2;
  }

  .hero-inner {
    padding-block-end: var(--space-7);
  }

  .lightbox figure {
    padding: var(--space-8) var(--space-4) 5rem;
  }

  .visit-card {
    padding: var(--space-5);
  }
}