/* ==========================================================================
   Ocean Spray Inn — global.css
   Tokens, resets and reusable primitives shared across every page.
   Page-specific layout lives in its own stylesheet (e.g. index.css).
   ========================================================================== */

:root {
  /* Brand */
  --osi-navy: #01193a;
  --osi-gold: #e9a93c;
  --osi-gold-hover: #f2b94f;

  /* Sand / cream */
  --osi-sand: #fdf8ef;
  --osi-cream: #fffcf6;
  --osi-tint-warm: #fbeee0;

  /* Sea green */
  --osi-deep: #1f4441;
  --osi-deepest: #163330;
  --osi-veil: 20, 44, 42;
  --osi-ink: #1f3d3a;
  --osi-ink-gold: #14332f;
  --osi-seafoam: #edf5f1;
  --osi-accent: #236b5f;

  /* Body inks */
  --osi-body: #3d5b57;
  --osi-body-soft: #4a6763;
  --osi-muted: #5e736f;
  --osi-brown: #6b5442;

  /* Type */
  --osi-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --osi-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --osi-gutter: clamp(16px, 3.4vw, 40px);
  --osi-measure: 1240px;
  --osi-section-y: clamp(50px, 8vw, 116px);
  --osi-radius-lg: clamp(26px, 3vw, 44px);
  --osi-radius-md: clamp(20px, 2.4vw, 30px);
  --osi-radius-sm: clamp(16px, 2vw, 24px);

  /* Motion */
  --osi-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --osi-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --------------------------------------------------------------- Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--osi-sand);
  color: var(--osi-ink);
  font-family: var(--osi-sans);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
}

address {
  font-style: normal;
}

a {
  color: var(--osi-ink);
  text-decoration: none;
}

a:hover {
  color: var(--osi-accent);
}

::selection {
  background: var(--osi-gold);
  color: var(--osi-ink-gold);
}

/* --------------------------------------------------------- Layout shell */

.osi-wrap {
  max-width: var(--osi-measure);
  margin-inline: auto;
  width: 100%;
}

.osi-section {
  padding: var(--osi-section-y) var(--osi-gutter);
}

.osi-section--flush-top {
  padding-top: 0;
}

/* Two-column split that collapses on tablet */
.osi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.4vw, 72px);
  align-items: start;
}

.osi-split--narrow-left {
  grid-template-columns: 0.8fr 1.2fr;
}

.osi-split--wide-left {
  grid-template-columns: 0.95fr 1.05fr;
}

.osi-split--balanced {
  grid-template-columns: 0.85fr 1.15fr;
}

/* Inset panel — a tinted rounded block inside a section */
.osi-panel {
  max-width: var(--osi-measure);
  margin-inline: auto;
  border-radius: var(--osi-radius-lg);
  padding: clamp(34px, 5vw, 84px) clamp(22px, 3.4vw, 64px);
}

.osi-panel--seafoam {
  background: var(--osi-seafoam);
}

.osi-panel--deep {
  background: var(--osi-deep);
  color: var(--osi-sand);
}

/* ------------------------------------------------------------ Typography */

.osi-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--osi-accent);
  margin-bottom: 18px;
}

.osi-eyebrow--gold {
  color: var(--osi-gold);
}

.osi-h2 {
  font-family: var(--osi-serif);
  font-weight: 400;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.osi-h2--sm {
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.1;
}

.osi-h3 {
  font-family: var(--osi-serif);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.osi-lead {
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--osi-body);
}

.osi-note {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--osi-body-soft);
}

.osi-fineprint {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--osi-muted);
}

/* --------------------------------------------------------------- Buttons */

.osi-btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  padding: 19px 30px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: background 0.25s var(--osi-ease), color 0.25s var(--osi-ease),
    transform 0.25s var(--osi-ease), border-color 0.25s var(--osi-ease);
}

.osi-btn--gold {
  background: var(--osi-gold);
  color: var(--osi-ink-gold);
}

.osi-btn--gold:hover {
  background: var(--osi-gold-hover);
  color: var(--osi-ink-gold);
  transform: translateY(-2px);
}

.osi-btn--ghost-light {
  border-color: rgba(255, 252, 246, 0.6);
  color: var(--osi-cream);
}

.osi-btn--ghost-light:hover {
  background: rgba(255, 252, 246, 0.16);
  color: var(--osi-cream);
}

.osi-btn--ghost-dark {
  border-color: rgba(31, 61, 58, 0.28);
  color: var(--osi-ink);
}

.osi-btn--ghost-dark:hover {
  background: var(--osi-seafoam);
  border-color: var(--osi-seafoam);
}

.osi-btn--cream {
  background: var(--osi-sand);
  color: var(--osi-ink-gold);
}

.osi-btn--cream:hover {
  background: var(--osi-gold);
  color: var(--osi-ink-gold);
}

/* Stack full-width on phones */
.osi-btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------ Components */

/* Badge — a light pill used over imagery */
.osi-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(253, 248, 239, 0.9);
  color: var(--osi-ink);
}

.osi-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--osi-accent);
  flex-shrink: 0;
}

/* Chip — pill used in lists of amenities */
.osi-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 400;
  padding: 11px 17px;
  border-radius: 999px;
  background: var(--osi-sand);
}

.osi-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--osi-gold);
  flex-shrink: 0;
}

.osi-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* Tag — quiet seafoam pill for room specs */
.osi-tag {
  font-size: 13px;
  font-weight: 400;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--osi-seafoam);
  color: #2a544f;
}

/* Stat card */
.osi-stat {
  border-radius: var(--osi-radius-sm);
  padding: clamp(16px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--osi-tint-warm);
}

.osi-stat__value {
  font-family: var(--osi-serif);
  font-size: clamp(23px, 2.5vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.osi-stat__label {
  font-size: 13px;
  font-weight: 400;
  color: var(--osi-brown);
}

/* Row of label / value separated by a hairline */
.osi-ruled-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(253, 248, 239, 0.14);
}

.osi-ruled-row__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--osi-gold);
  white-space: nowrap;
}

/* Rounded media frame */
.osi-frame {
  border-radius: var(--osi-radius-md);
  overflow: hidden;
  background: var(--osi-deepest);
}

.osi-frame > img,
.osi-frame > video,
.osi-frame > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* ----------------------------------------------------------- Scroll reveal */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--osi-ease-out), transform 1s var(--osi-ease-out);
}

[data-reveal][data-in] {
  opacity: 1;
  transform: none;
}

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

@media (max-width: 880px) {
  .osi-split,
  .osi-split--narrow-left,
  .osi-split--wide-left,
  .osi-split--balanced {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .osi-panel {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 22px;
  }

  .osi-btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .osi-btn-row > .osi-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------- Reduced motion */

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

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}