/* 2K Paw Resort — Villa Cam pages.
   Brand Book v1.3: Cream canvas, Pine structure and headlines, Cocoa reading text,
   Gold only for the paw and small celebrations (never text on cream).
   Fraunces for the big feelings, Nunito Sans for everything you read.
   Phone-first: the player fills the width in portrait, no horizontal scroll. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("fonts/nunito-sans-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  /* Brand palette (Chapter 05) */
  --pine: #315342;
  --deep-pine: #243b30;
  --cocoa: #4d3c2e;
  --gold: #cb984f;
  --cream: #f9f1e6;
  --white: #ffffff;

  /* Roles */
  --bg: var(--cream);
  --surface: var(--white);
  --heading: var(--pine);
  --text: var(--cocoa);
  --muted: rgba(77, 60, 46, 0.8);
  --rule: rgba(49, 83, 66, 0.16);
  --accent: var(--gold);
  --button-bg: var(--pine);
  --button-fg: var(--cream);
  --player-bg: #1a2a22;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Nunito Sans", Verdana, system-ui, sans-serif;
  --radius: 14px;
  --gutter: 16px;
  --max: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Cream on Deep Pine (AAA); Gold on Deep Pine is AA for text. */
    --bg: var(--deep-pine);
    --surface: var(--pine);
    --heading: var(--cream);
    --text: var(--cream);
    --muted: rgba(249, 241, 230, 0.8);
    --rule: rgba(249, 241, 230, 0.16);
    --button-bg: var(--cream);
    --button-fg: var(--pine);
    --player-bg: #101b16;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; }

[hidden] { display: none !important; }

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Header: a Pine band with the Cream Ivory emblem, in every colour mode ---- */

/* Compact 64 px bar (common mobile practice: 56–72 px, logo about two-thirds of the height):
   46 px emblem + 9 px above and below, plus the notch area on phones that have one. */
.brand-bar {
  background: var(--pine);
  color: var(--cream);
  padding-top: max(9px, env(safe-area-inset-top));
  padding-bottom: 9px;
}

/* Flex row so the inline lockup doesn't pick up text line-height under it. */
.brand-bar .wrap {
  display: flex;
  align-items: center;
}

/* Baseline lockup, reading "2K Paw Resort": "Paw Resort" sits on the emblem K's baseline
   (about 80% down the mark, so about 9 px above its bottom at 51 px wide). */
.lockup {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  color: var(--cream);
  text-decoration: none;
}

/* 51 px wide (46 px tall). Deliberately under the Brand Book's 64 px screen minimum for a
   compact header — Hirak's call, 2026-11-06; the K's thin diagonal still holds at this size. */
.emblem {
  display: block;
  width: 51px;
  height: auto;
  flex: none;
}

.wordmark {
  padding-bottom: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* ---- Hero ----------------------------------------------------------------- */

.eyebrow {
  margin: 0;
  color: var(--heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero {
  padding-top: 18px;
  padding-bottom: 14px;
}

.hero h1 {
  margin: 0;
  color: var(--heading);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.hero .sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
}

/* ---- Player --------------------------------------------------------------- */

.player-wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.player {
  position: relative;
  width: 100%;
  aspect-ratio: 704 / 576;
  background: var(--player-bg);
  overflow: hidden;
}

.player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--player-bg);
}

.player:fullscreen { aspect-ratio: auto; }
.player:-webkit-full-screen { aspect-ratio: auto; }

/* Live badge, top left — only while the picture is playing. */
.live-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 27, 22, 0.66);
  color: var(--cream);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.live-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.8s ease-in-out infinite;
}

.player[data-state="playing"] .live-badge { display: inline-flex; }

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 27, 22, 0.66);
  color: var(--cream);
  cursor: pointer;
}

.fullscreen {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* Centred state: connecting / offline / ended. Hidden while playing. */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  color: var(--cream);
  background: rgba(16, 27, 22, 0.55);
}

.overlay p {
  margin: 0;
  max-width: 28ch;
  font-weight: 600;
  font-size: 16px;
}

.player[data-state="playing"] .overlay { display: none; }

.overlay-paw {
  width: 30px;
  height: 30px;
}

.player[data-state="connecting"] .overlay-paw {
  animation: pulse 1.4s ease-in-out infinite;
}

.player[data-state="offline"] .overlay-paw,
.player[data-state="ended"] .overlay-paw {
  opacity: 0.8;
}

@keyframes pulse {
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .live-badge::before,
  .player[data-state="connecting"] .overlay-paw { animation: none; }
}

@media (min-width: 720px) {
  .player-wrap { padding: 0 var(--gutter); }
  .player { border-radius: var(--radius); }
}

/* ---- Details under the player --------------------------------------------- */

.details {
  padding-top: 16px;
  padding-bottom: 8px;
}

.until {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--heading);
  font-weight: 700;
}

.until .icon { flex: none; }

.help {
  margin: 6px 0 0 28px;
  color: var(--muted);
  font-size: 15px;
}

/* ---- Icons (Chapter 07): 24px grid, 1.7px strokes, round caps, no fills ---- */

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-fg);
  font: inherit;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.button.secondary {
  background: transparent;
  color: var(--heading);
  box-shadow: inset 0 0 0 1.5px var(--heading);
}

/* On the dark video overlay: Cream button, Pine text. 44 px is the minimum touch target. */
.button.small {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 15px;
  background: var(--cream);
  color: var(--pine);
}

/* Focus rings need 3:1 against what's behind them. Gold on Cream is only 2.3:1, so the
   ring is Pine on the page (Cream in dark mode, via --heading) and Gold only on dark
   surfaces: the Pine header (3.3:1) and the video. */
.button:focus-visible,
.icon-button:focus-visible,
.lockup:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--heading);
  outline-offset: 3px;
}

.lockup:focus-visible,
.player .icon-button:focus-visible,
.player .button:focus-visible {
  outline-color: var(--gold);
}

/* ---- "Need a hand?" ---------------------------------------------------------- */

.contact {
  margin-top: 24px;
}

.contact-title {
  margin: 0;
  color: var(--heading);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
}

.contact .buttons { margin-top: 10px; }

.contact-number {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* ---- Paw divider: the gold paw is the signature accent -------------------- */

.paw-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
}

.paw-rule::before,
.paw-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.paw {
  width: 18px;
  height: 18px;
  fill: var(--gold);
}

/* ---- "Come back together" card -------------------------------------------- */

.discover {
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.discover h2 {
  margin: 4px 0 0;
  color: var(--heading);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.15;
}

.discover p { margin: 10px 0 0; }

.discover .button { margin-top: 18px; }

/* Service names as small Pine tags: scannable at a glance, a hint of what's on the website. */
.services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.services li {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(49, 83, 66, 0.08);
  color: var(--heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
  .services li { background: rgba(249, 241, 230, 0.1); }
}

.discover .free-park {
  margin-top: 14px;
  color: var(--muted);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
}

/* ---- Expired page --------------------------------------------------------- */

.notice {
  margin-top: 24px;
  padding: 24px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.notice h1 {
  margin: 6px 0 0;
  color: var(--heading);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 7.5vw, 2.6rem);
  line-height: 1.1;
}

.notice p { margin: 12px 0 0; }

/* ---- Footer --------------------------------------------------------------- */

main { flex: 1; }

.site-footer {
  margin-top: 32px;
  padding-top: 20px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 14px;
}

/* Tagline lockup (Chapter 02): Fraunces Italic 400, tight leading, at least 24 px cap
   height on screen — about 36 px type. Pine on Cream, Cream on Deep Pine; never gold. */
.site-footer .tagline {
  margin: 0 0 10px;
  color: var(--heading);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
}

.site-footer p { margin: 0; }

.site-footer a { color: var(--heading); font-weight: 700; }

/* ---- Landscape phone: video only, filling the screen (AC-3) --------------- */
/* Header and name step aside; the rest of the page is still there if they scroll. */

@media (orientation: landscape) and (max-height: 500px) {
  .page-watch .brand-bar,
  .page-watch .hero { display: none; }
  .page-watch .player-wrap { padding: 0; }
  .page-watch .player {
    aspect-ratio: auto;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
}