/* Anurak Lodge: brand theme + page composition on top of scrollcraft.css.
   The engine files are untouched; everything bespoke lives here and in site.js. */

@font-face { font-family: "Amatic SC"; src: url(../fonts/AmaticSC-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Krub"; src: url(../fonts/Krub-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Krub"; src: url(../fonts/Krub-Italic.ttf) format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Krub"; src: url(../fonts/Krub-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Krub"; src: url(../fonts/Krub-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Charmonman"; src: url(../fonts/Charmonman-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* brand palette (brandbook p.18) */
  --deep: #00351E; --forest: #316335; --leaf: #7A9A38; --fern: #97B668;
  --orange: #E88B0D; --sand: #DBB889; --bark: #28241F;
  --lake: #2F7F74; --mist: #E3EAD2; --clay: #B8612A; --rice: #F3EDDD;

  --sc-canvas: var(--rice);
  --sc-surface: #EAE2CD;
  --sc-ink: #12281B;
  --sc-ink-soft: #46584A;
  --sc-accent: var(--orange);
  --sc-accent-ink: #1C1408;
  --sc-shadow-color: 150 60% 8%;

  --sc-font-display: "Amatic SC", "Krub", sans-serif;
  --sc-font-text: "Krub", system-ui, sans-serif;
  --script: "Charmonman", "Krub", cursive;

  /* Amatic is a condensed, light-looking hand face: it needs more size and no negative tracking */
  --sc-t-3xl: clamp(3.2rem, 2rem + 5.4vw, 6.4rem);
  --sc-t-4xl: clamp(4rem, 2rem + 8.6vw, 10rem);
  --sc-t-2xl: clamp(2.6rem, 1.8rem + 3vw, 4.4rem);
  --sc-track-tight: 0.01em; --sc-track-snug: 0.015em;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;
  --head-h: 112px;
}
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body { background: var(--sc-canvas); }
.sc-display { font-weight: 700; line-height: 0.92; }
.script { font-family: var(--script); font-weight: 700; letter-spacing: 0; }
.eyebrow { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); margin: 0 0 var(--sc-4); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
.lede { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.body { max-width: 62ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.body + .body { margin-top: var(--sc-4); }
.dark { --sc-ink: #F3EDDD; --sc-ink-soft: #C7D2B8; --sc-accent: #F2A33A; background: var(--deep); color: var(--sc-ink); }
.dark .eyebrow { color: var(--fern); }
.forestbg { --sc-ink: #F3EDDD; --sc-ink-soft: #D4DEC3; background: var(--forest); color: var(--sc-ink); }
.mistbg { background: var(--mist); }
.sandbg { background: var(--sand); --sc-ink-soft: #3E3A2C; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: .6em; padding: .85em 1.35em; border-radius: var(--sc-r-pill); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: .04em; text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.btn:active { transform: scale(.97); }
.btn--book { background: var(--orange); color: var(--sc-accent-ink); }
.btn--line { border-color: currentColor; color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .btn--book:hover { background: #F19E2E; }
  .btn--line:hover { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
}
.textlink { font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* ----------------------------------------------------------------- header */
.head { position: fixed; inset: 0 0 auto; z-index: 70; background: var(--rice); height: var(--head-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--sc-gutter); transition: background-color 300ms var(--sc-ease-out), transform 400ms var(--sc-ease-out); }
.head.is-solid { background: var(--rice); }
.head.is-hidden { transform: translateY(-100%); }
.head__menu { justify-self: start; display: inline-flex; align-items: center; gap: .7rem; background: none; border: 0; padding: .5rem 0; cursor: pointer; font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-ink); }
.head__menu i { display: grid; gap: 5px; width: 26px; }
.head__menu i::before, .head__menu i::after { content: ""; height: 2px; background: currentColor; border-radius: 2px; }
.head__menu i::after { width: 70%; }
.head__logo { display: block; }
.head__logo img { display: block; width: 124px; height: auto; }
.head__book { justify-self: end; }
@media (max-width: 700px) { :root { --head-h: 104px; } .head__menu span { display: none; } .head__book { padding: .7em 1em; } .head__logo img { width: 120px; } }

/* ------------------------------------------------------------ trail menu */
.menu { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--deep); color: var(--rice); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 620ms var(--sc-ease-in-out), visibility 0s 620ms; }
.menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 620ms var(--sc-ease-in-out), visibility 0s; }
.menu__list { padding: calc(var(--head-h) + 3vh) var(--sc-gutter) 5vh; overflow-y: auto; display: grid; align-content: center; gap: .1rem; }
.menu__group { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.5rem; align-items: baseline; padding-block: .7rem; }
.menu__big { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); line-height: .95; text-decoration: none; color: var(--rice); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.menu__big[aria-current="page"], .menu__sub a[aria-current="page"] { color: var(--orange); }
.menu__sub { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: var(--sc-t-sm); }
.menu__sub a { color: #C7D2B8; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .menu__big:hover, .menu__sub a:hover { color: var(--orange); } }
.menu__art { position: relative; overflow: hidden; }
.menu__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--sc-ease-out); }
.menu.is-open .menu__art img { transform: scale(1); }
.menu__card { position: absolute; left: var(--sc-5); right: var(--sc-5); bottom: var(--sc-5); background: var(--rice); color: var(--sc-ink); border-radius: var(--sc-r-md); padding: var(--sc-5); display: grid; gap: .35rem; font-size: var(--sc-t-sm); box-shadow: var(--sc-e2); }
.menu__card strong { font-family: var(--sc-font-display); font-size: 2rem; line-height: 1; }
.menu__close { position: absolute; top: 18px; left: var(--sc-gutter); z-index: 2; background: none; border: 0; color: var(--rice); font-weight: 600; font-size: var(--sc-t-sm); padding: .9rem 0; cursor: pointer; }
@media (max-width: 860px) { .menu { grid-template-columns: 1fr; } .menu__art { display: none; } .menu__group { grid-template-columns: 1fr; } }

/* -------------------------------------------- canopy curtain (signature) */
.curtain { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); }
.curtain__leaf { position: relative; transform: translateY(calc(100% + 12vh)); transition: transform 640ms var(--sc-ease-in-out); }
/* each band is a leaf segment: a rounded, slightly asymmetric top edge like the logo leaf */
.curtain__leaf::before { content: ""; position: absolute; left: -2px; right: -2px; top: -9vh; height: 18vh; background: inherit; border-radius: 60% 40% 0 0 / 100% 100% 0 0; }
.curtain__leaf:nth-child(1) { background: var(--deep); transition-delay: 0ms; }
.curtain__leaf:nth-child(2) { background: var(--forest); transition-delay: 60ms; }
.curtain__leaf:nth-child(2)::before { border-radius: 40% 60% 0 0 / 100% 100% 0 0; }
.curtain__leaf:nth-child(3) { background: var(--leaf); transition-delay: 120ms; }
.curtain__leaf:nth-child(4) { background: var(--fern); transition-delay: 180ms; }
.curtain__leaf:nth-child(4)::before { border-radius: 40% 60% 0 0 / 100% 100% 0 0; }
.curtain__label { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; color: var(--rice); opacity: 0; transition: opacity 260ms var(--sc-ease-out); }
.curtain__label img { width: 150px; height: auto; }
.curtain__label span { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3rem, 2rem + 5vw, 7rem); line-height: 1; }
.curtain.is-closed .curtain__leaf { transform: translateY(0); }
.curtain.is-closed .curtain__label { opacity: 1; transition-delay: 380ms; }
/* leaving upward on arrival: leaves continue up and off the top */
.curtain.is-opening .curtain__leaf { transform: translateY(calc(-100% - 12vh)); }
.curtain.is-opening .curtain__label { opacity: 0; transition-delay: 0ms; }
.curtain.no-anim .curtain__leaf, .curtain.no-anim .curtain__label { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .curtain__leaf { transform: none; opacity: 0; transition: opacity 240ms linear; }
  .curtain.is-closed .curtain__leaf { opacity: 1; }
  .curtain.is-opening .curtain__leaf { transform: none; opacity: 0; }
}

/* ---------------------------------------------------------- trail rail */
.trail { position: fixed; right: clamp(.8rem, 2vw, 1.8rem); top: 50%; translate: 0 -50%; z-index: 50; display: grid; gap: 1.1rem; }
.trail a { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: .7rem; text-decoration: none; color: var(--sc-ink); font-size: var(--sc-t-sm); font-weight: 600; }
.trail a span { opacity: 0; translate: 6px 0; transition: opacity var(--sc-d-fast) var(--sc-ease-out), translate var(--sc-d-fast) var(--sc-ease-out); background: var(--rice); padding: .15rem .5rem; border-radius: var(--sc-r-sm); }
.trail a i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--forest); background: var(--rice); transition: background-color var(--sc-d-fast); }
.trail a.is-here i { background: var(--orange); border-color: var(--orange); }
@media (hover: hover) and (pointer: fine) { .trail a:hover span, .trail a:focus-visible span { opacity: 1; translate: 0 0; } }
@media (max-width: 900px) { .trail { display: none; } }

/* --------------------------------------------------------- home: hero */
.hero { --sc-p: 0; }
.hero .sc-stage { height: 100svh; overflow: hidden; background: var(--deep); }
.hero__shot { position: absolute; inset: 0; display: block; }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  transform: scale(calc(1 + var(--sc-p) * .10)) translateY(calc(var(--sc-p) * -3vh)); transform-origin: 50% 60%; will-change: transform; }
/* the copy sits on the open sky, never on the trees or the water */
.hero__wash { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(243,237,221,.62) 0%, rgba(243,237,221,.34) 26%, rgba(243,237,221,0) 50%),
              linear-gradient(100deg, rgba(243,237,221,.5) 0%, rgba(243,237,221,.18) 30%, rgba(243,237,221,0) 52%); }
.hero__title { position: absolute; z-index: 6; left: clamp(1.25rem, 11vw, 13rem); top: calc(var(--head-h) + 5vh); max-width: 34rem;
  transform: translateY(calc(var(--sc-p) * 12vh)); opacity: calc(1 - var(--sc-p) * 2.2); }
.hero__title h1 { font-family: var(--sc-font-display); font-size: clamp(3.2rem, 1.8rem + 5.4vw, 7rem); line-height: .86; color: var(--deep); text-shadow: 0 2px 18px rgba(243,237,221,.9), 0 0 40px rgba(243,237,221,.7); }
.hero__title .hero__lede { max-width: 26ch; margin-top: .9rem; text-shadow: 0 1px 10px rgba(243,237,221,.95), 0 0 22px rgba(243,237,221,.8); font-size: var(--sc-t-lg); line-height: 1.45; color: #22382A; }
.hero__title .hero__tag { margin-top: 1.1rem; text-shadow: 0 1px 10px rgba(243,237,221,.95), 0 0 22px rgba(243,237,221,.8); font-family: var(--script); font-weight: 700; font-size: clamp(1.15rem, 1rem + .8vw, 1.7rem); color: var(--forest); }
.hero__cta { position: absolute; z-index: 6; left: clamp(1.25rem, 11vw, 13rem); bottom: 6vh; display: flex; gap: .8rem; flex-wrap: wrap; opacity: calc(1 - var(--sc-p) * 2.2); }
.hero__after { position: absolute; z-index: 7; left: clamp(1.25rem, 11vw, 13rem); top: calc(var(--head-h) + 6vh); max-width: 34rem; color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.45;
  /* Owner, 2026-09-29, "cannot see": this copy used to sit straight on the karsts
     and jungle. Brand rule: text sits on a calm area. It now has its own rice
     panel at every width, as the phone layout already did. */
  background: rgba(243,237,221,.95); padding: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.35rem, 1rem + 1.4vw, 2.4rem); border-radius: var(--sc-r-md); box-shadow: var(--sc-e1); }
.hero__after strong { display: block; color: var(--deep); font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: .95; margin-bottom: .6rem; }
@media (max-width: 760px) {
  .hero__shot img { object-position: 50% 62%; }
  .hero__wash { background: linear-gradient(to bottom, rgba(243,237,221,.92) 0%, rgba(243,237,221,.7) 34%, rgba(243,237,221,0) 60%); }
  .hero__title { top: calc(var(--head-h) + 2.5vh); right: var(--sc-gutter); left: var(--sc-gutter); max-width: none; }
  .hero__title h1 { font-size: clamp(3.1rem, 13vw, 4.6rem); }
  .hero__cta { left: var(--sc-gutter); right: var(--sc-gutter); }
  .hero__after { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--head-h) + 2vh); max-width: none; background: rgba(243,237,221,.94); padding: 1rem 1.1rem; border-radius: var(--sc-r-md); box-shadow: var(--sc-e1); }
}
@media (prefers-reduced-motion: reduce) { .hero__shot img, .hero__title { transform: none !important; } }

/* ------------------------------------------------------ section layouts */
.sect { padding-block: var(--sc-section); position: relative; }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.h-xl { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-4xl); line-height: .86; }
.h-lg { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: .9; }
.h-md { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-2xl); line-height: .92; }
.h-sm { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl); line-height: 1; }
.cap { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: .6rem; letter-spacing: .02em; }

/* asymmetric spread: text column + overlapping photo pair */
.spread { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.spread--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.spread--flip > .spread__text { order: 2; }
.spread__text > * + * { margin-top: var(--sc-5); }
.spread__text > h2 + p, .spread__text > .eyebrow + h2 { margin-top: var(--sc-4); }
.pair { position: relative; min-height: clamp(360px, 46vw, 640px); }
.pair figure { margin: 0; position: absolute; overflow: hidden; border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); }
.pair figure img { width: 100%; height: 100%; object-fit: cover; }
.pair .a { left: 0; top: 0; width: 64%; height: 78%; }
.pair .b { right: 0; bottom: 0; width: 44%; height: 56%; z-index: 2; border: 8px solid var(--sc-canvas); }
.pair .sprite { position: absolute; z-index: 3; width: 26%; left: 46%; top: -8%; box-shadow: none; border-radius: 0; }
.pair .sprite img { object-fit: contain; }
@media (max-width: 860px) { .spread, .spread--flip { grid-template-columns: 1fr; } .spread--flip > .spread__text { order: 0; } }

/* full-bleed band with image masked away from the text */
.band { position: relative; min-height: 92svh; display: grid; align-items: end; overflow: hidden; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__copy { position: relative; z-index: 2; max-width: 40rem; margin: 0 var(--sc-gutter) var(--sc-7); padding: clamp(1.4rem, 1rem + 1.6vw, 2.6rem);
  /* a solid ground for the copy: the photo behind is jungle, water or people, never calm enough on its own */
  background: rgba(0,30,17,.9); border-radius: var(--sc-r-md); }
.band__copy > * + * { margin-top: var(--sc-4); }
.band--light .band__copy { background: rgba(243,237,221,.95); box-shadow: var(--sc-e1); }
.band__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top right, rgba(0,30,17,.78) 0%, rgba(0,30,17,.35) 38%, transparent 62%); }
.band--light .band__scrim { background: linear-gradient(to top right, rgba(243,237,221,.94) 0%, rgba(243,237,221,.6) 36%, transparent 60%); }

/* page hero (inner pages): illustration plate + title + overlapping photo */
.phero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.phero__art { position: absolute; inset: -6% 0 0; width: 100%; height: 106%; object-fit: cover; }
.phero__copy { position: relative; z-index: 3; padding: calc(var(--head-h) + 6vh) var(--sc-gutter) clamp(3rem, 10vh, 7rem); max-width: 60rem; }
.phero:has(.phero__photo) .phero__copy { max-width: min(60rem, calc(100vw - clamp(200px, 22vw, 360px) - 4 * var(--sc-gutter))); }
.phero__copy .lede { margin-top: var(--sc-5); }
.phero--light .phero__copy { color: var(--deep); }
/* The light heroes' scrim fades out across the copy, so the right-hand ends of
   the lede and the eyebrow landed on foliage. They now sit on a rice panel,
   like every other block of text on a photograph on this site. */
.phero--light .phero__copy { justify-self: start; width: fit-content; max-width: min(56rem, calc(100% - 2 * var(--sc-gutter)));
  margin: calc(var(--head-h) + 4vh) var(--sc-gutter) clamp(2rem, 7vh, 5rem); padding: clamp(1.4rem, 1rem + 1.8vw, 2.8rem);
  background: rgba(243,237,221,.95); border-radius: var(--sc-r-md); box-shadow: var(--sc-e1); }
.phero--light:has(.phero__photo) .phero__copy { max-width: min(56rem, calc(100vw - clamp(200px, 22vw, 360px) - 5 * var(--sc-gutter))); }
.phero--light .phero__copy .lede { color: #22382A; }
.phero--dark .eyebrow { color: var(--fern); }
.phero__photo { position: absolute; z-index: 2; right: calc(var(--sc-gutter) + 2vw); bottom: -6%; width: clamp(200px, 22vw, 360px); aspect-ratio: 4/5; border-radius: var(--sc-r-md); overflow: hidden; border: 10px solid var(--rice); box-shadow: var(--sc-e3); }
.phero__photo img { width: 100%; height: 100%; object-fit: cover; }
.phero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(243,237,221,.94) 0%, rgba(243,237,221,.82) 28%, rgba(243,237,221,.42) 46%, transparent 62%), linear-gradient(to top, rgba(243,237,221,.72) 0%, transparent 36%); }
@media (max-width: 760px) { .phero__scrim { background: linear-gradient(to top, rgba(243,237,221,.97) 0%, rgba(243,237,221,.9) 45%, rgba(243,237,221,.4) 70%, transparent 85%); } }
.phero--dark .phero__scrim { background: linear-gradient(to right, rgba(0,40,22,.94) 0%, rgba(0,40,22,.85) 30%, rgba(0,40,22,.45) 50%, transparent 68%), linear-gradient(to top, rgba(0,40,22,.8), transparent 40%); }
@media (max-width: 760px) { .phero--dark .phero__scrim { background: linear-gradient(to top, rgba(0,40,22,.95) 0%, rgba(0,40,22,.85) 45%, rgba(0,40,22,.35) 70%, transparent 85%); } }
.phero--dark .phero__copy { color: var(--rice); }
@media (max-width: 860px) {
  /* the inset print would squeeze the headline into a one-word column: drop it
     and let the full-bleed photograph carry the hero on its own */
  .phero__photo { display: none; }
  .phero:has(.phero__photo) .phero__copy { max-width: none; }
  .phero__copy { padding-inline: var(--sc-gutter); }
  .phero__scrim { background: linear-gradient(to top, rgba(243,237,221,.96) 0%, rgba(243,237,221,.88) 40%, rgba(243,237,221,.6) 66%, rgba(243,237,221,.2) 86%, transparent 100%); }
  .phero--dark .phero__scrim { background: linear-gradient(to top, rgba(0,40,22,.95) 0%, rgba(0,40,22,.85) 40%, rgba(0,40,22,.55) 66%, rgba(0,40,22,.2) 86%, transparent 100%); }
}
@media (max-width: 760px) { .phero__photo { display: none; } }

/* horizontal rail (pan act) */
.rail-act .sc-stage { height: 100svh; overflow: hidden; display: grid; align-content: center; }
.rail { gap: clamp(1rem, 2.4vw, 2.2rem); padding-inline: var(--sc-gutter); width: max-content; align-items: stretch; }
.rail__intro { width: min(30rem, 78vw); flex: none; align-self: center; padding-right: 2vw; }
.rail__intro > * + * { margin-top: var(--sc-4); }
.tile { flex: none; width: clamp(240px, 24vw, 370px); display: grid; grid-template-rows: auto 1fr; gap: 1rem; text-decoration: none; color: inherit; }
.tile__img { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--sc-r-md); box-shadow: var(--sc-e1); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sc-ease-out); }
.tile:nth-child(odd of .tile) { margin-top: 6vh; }
.tile h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; }
.tile p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: .4rem; }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__img img { transform: scale(1.05); } }
@media (max-width: 760px) { .tile:nth-child(odd of .tile) { margin-top: 0; } }

/* ------------------------------------------------ home peak: the reef */
.reef .sc-stage { height: 100svh; overflow: hidden; }
.reef__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reef__sunset { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: clamp(0, calc(var(--sc-p) * 2.2 - 1.2), 1); }
/* the sea returns: rises over the karsts, holds, drains */
.reef__sea { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(47,127,116,.92) 0%, rgba(47,127,116,.55) 26%, rgba(47,127,116,.16) 52%, rgba(47,127,116,0) 74%);
  opacity: clamp(0, calc(var(--sc-p) * 1.8 - .1), 1); transform: translateY(calc((1 - var(--sc-p)) * 34%));
  transform: translateY(calc(100% - max(0, min(var(--sc-p) * 4, 1, calc((0.74 - var(--sc-p)) * 8))) * 100%)); }
.reef__sea svg { width: 100%; height: 100%; }
.reef__copy { position: absolute; z-index: 4; left: var(--sc-gutter); right: var(--sc-gutter); top: 50%; translate: 0 -50%; }
.reef__line { position: absolute; left: 0; top: 0; max-width: min(34rem, 86vw); color: var(--rice); padding: 1.1rem 1.4rem 1.3rem; border-radius: var(--sc-r-lg); background: rgba(0,45,26,.88); }
.reef__line--ink { background: rgba(243,237,221,.92); }
.reef__line--trail { left: auto; right: 0; text-align: right; }
.reef__line .num { display: block; font-family: var(--sc-font-display); font-size: clamp(5rem, 3rem + 10vw, 14rem); line-height: .8; color: var(--orange); }
.reef__line--ink { color: var(--deep); }
.reef__line--ink .num { color: var(--deep); }
.reef__line--sky { top: -30vh; }
@media (max-width: 760px) {
  .reef__line--sky { top: -34vh; }
  .reef__line { padding: .9rem 1rem; border-radius: var(--sc-r-md); background: rgba(0,45,26,.9); }
  .reef__line--ink { background: rgba(243,237,221,.94); }
  .reef__line--trail { max-width: 20ch; }
}
.reef__line .h-md { color: inherit; }

/* experiences pin: name cycles, photo swaps */
.xp .sc-stage { height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 4vw; padding-inline: var(--sc-gutter); }
.xp__names { position: relative; height: 60vh; }
.xp__item { position: absolute; inset: 0; display: grid; align-content: center; gap: 1rem; }
.xp__item h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-4xl); line-height: .84; color: var(--rice); }
.xp__item p { color: #C7D2B8; max-width: 38ch; }
.xp__item .price { color: var(--orange); font-weight: 600; letter-spacing: .04em; }
.xp__pics { position: relative; height: min(62vh, 520px); width: min(100%, 420px); justify-self: center; }
.xp__pic { position: absolute; inset: 0; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e3); }
.xp__pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .xp .sc-stage { grid-template-columns: 1fr; align-content: center; gap: 3vh; }
  .xp__pics { height: 38vh; order: -1; } .xp__names { height: 34vh; }
  .xp__item h3 { font-size: var(--sc-t-3xl); }
}

/* packages: asymmetric list, not identical cards */
.pk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.6rem); }
.pk__item { grid-column: span 6; display: grid; grid-template-columns: 42% 1fr; gap: 1.4rem; align-items: start; padding-top: 1.4rem; text-decoration: none; color: inherit; }
.pk__item:nth-child(4n+1), .pk__item:nth-child(4n+4) { grid-column: span 7; }
.pk__item:nth-child(4n+2), .pk__item:nth-child(4n+3) { grid-column: span 5; }
.pk__img { aspect-ratio: 1; border-radius: var(--sc-r-md); overflow: hidden; }
.pk__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sc-ease-out); }
.pk__item h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; }
.pk__price { font-weight: 600; color: var(--clay); margin-top: .5rem; font-size: var(--sc-t-sm); }
.dark .pk__price { color: var(--orange); }
.pk__item p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: .5rem; }
@media (hover: hover) and (pointer: fine) { .pk__item:hover .pk__img img { transform: scale(1.05); } }
@media (max-width: 900px) { .pk__item, .pk__item:nth-child(n) { grid-column: 1 / -1; } }

/* night close */
.night { position: relative; min-height: 110svh; overflow: hidden; display: grid; align-items: center; background: #04251A; color: var(--rice); }
.night > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(.85) hue-rotate(-8deg); }
.night__copy { position: relative; z-index: 3; padding: var(--sc-9) var(--sc-gutter); max-width: 50rem; }
.night__copy > * + * { margin-top: var(--sc-5); }
.fireflies { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fireflies i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FFC46A; box-shadow: 0 0 10px 3px rgba(255,180,70,.55); animation: fly var(--d, 9s) ease-in-out infinite alternate; opacity: .8; }
@keyframes fly { 0% { transform: translate(0,0); opacity: .15; } 50% { opacity: .95; } 100% { transform: translate(var(--x, 40px), var(--y, -60px)); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .fireflies i { animation: none; } }

/* trailhead close (every page): the next leg of the walk */
.next { position: relative; display: block; min-height: 78svh; overflow: hidden; color: var(--rice); text-decoration: none; }
.next > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sc-ease-out); }
.next__scrim { position: absolute; inset: 0; background: linear-gradient(to top right, rgba(0,30,17,.84), rgba(0,30,17,.2) 55%, transparent 75%); }
.next__copy { position: absolute; left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem); max-width: calc(100% - 2 * var(--sc-gutter));
  /* its own ground: the trail photos are all foliage */
  padding: clamp(1.2rem, 1rem + 1.2vw, 2.2rem) clamp(1.3rem, 1rem + 1.6vw, 2.6rem); background: rgba(0,30,17,.88); border-radius: var(--sc-r-md); }
.next__copy b { display: block; font-family: var(--sc-font-display); font-size: var(--sc-t-4xl); line-height: .84; }
.next__copy span { display: inline-block; margin-top: 1rem; max-width: 42ch; color: #D8E1CB; }
@media (hover: hover) and (pointer: fine) { .next:hover > img { transform: scale(1.04); } }

/* footer */
.foot { background: var(--deep); color: var(--rice); padding: var(--sc-9) var(--sc-gutter) var(--sc-6); --sc-ink-soft: #C7D2B8; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sc-7); max-width: var(--sc-maxw); margin-inline: auto; }
.foot__grid h4 { font-size: 1.1rem; color: var(--fern); margin-bottom: 1.1rem; font-weight: 600; }
.foot__grid a { color: var(--rice); text-decoration: none; display: block; padding-block: .2rem; }
.foot__grid p { color: #C7D2B8; font-size: var(--sc-t-sm); }
.foot__logo { display: block; width: 150px; margin: 0 auto; }
.foot__brand { display: inline-block; text-align: center; }
.foot__tag { display: block; margin-top: .4rem; font-family: var(--script); font-weight: 700; font-size: 1.4rem; color: var(--fern); }
.foot__base { max-width: var(--sc-maxw); margin: var(--sc-9) auto 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--sc-t-xs); color: #AFC0A2; }
.foot__hornbill { width: 84px; }
@media (hover: hover) and (pointer: fine) { .foot__grid a:hover { color: var(--orange); } }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------- inner page pieces */
.facts { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 6rem); margin-top: var(--sc-7); }
.fact b { display: block; font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: .9; color: var(--forest); }
.dark .fact b { color: var(--orange); }
.fact span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

.amen { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem 1.5rem; margin-top: var(--sc-6); }
.amen li { list-style: none; display: flex; gap: .9rem; align-items: center; padding: .8rem .2rem; font-size: var(--sc-t-sm); }
.amen img { width: 34px; height: 34px; object-fit: contain; }
.amen { padding: 0; }

.room { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: var(--sc-8); }
.room:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.room:nth-of-type(even) .room__pics { order: 2; }
.room__pics { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; align-items: end; }
.room__pics img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--sc-r-md); aspect-ratio: 4/5; }
.room__pics img:nth-child(2) { aspect-ratio: 3/4; margin-bottom: -3rem; }
.room__text > * + * { margin-top: var(--sc-4); }
@media (max-width: 860px) { .room, .room:nth-of-type(even) { grid-template-columns: 1fr; } .room:nth-of-type(even) .room__pics { order: 0; } }

.timeline-act .sc-stage { height: 100svh; overflow: hidden; display: grid; align-content: center; }
.era { flex: none; width: clamp(280px, 34vw, 480px); padding: 2.2rem 2rem; }
.era b { display: block; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: .95; color: var(--orange); margin-bottom: 1rem; }
.era p { color: #D4DEC3; font-size: var(--sc-t-sm); line-height: 1.6; }

.guide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 5rem); }
.critter { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; padding-block: 1.6rem; align-items: start; }
.critter img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; }
.critter h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; }
.critter p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: .4rem; }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; } .critter { grid-template-columns: 84px 1fr; } .critter img { width: 84px; height: 84px; } }

/* experiences ledger with filters */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: var(--sc-6) var(--sc-5); }
.chip { border: 1.5px solid var(--sc-hairline-strong); background: transparent; border-radius: var(--sc-r-pill); padding: .55em 1.1em; font-weight: 600; font-size: var(--sc-t-sm); cursor: pointer; color: var(--sc-ink); transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.chip[aria-pressed="true"] { background: var(--deep); color: var(--rice); border-color: var(--deep); }
.chip:active { transform: scale(.97); }
.ledger { border-top: 1px solid var(--sc-hairline-strong); }
.ledger details { border-bottom: 1px solid var(--sc-hairline-strong); }
.ledger details[hidden] { display: none; }
.ledger summary { list-style: none; display: grid; grid-template-columns: 1fr auto auto; gap: 1.5rem; align-items: baseline; padding: 1.3rem .2rem; cursor: pointer; }
.ledger summary::-webkit-details-marker { display: none; }
.ledger summary h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; }
.ledger summary .p { font-weight: 600; font-size: var(--sc-t-sm); color: var(--clay); white-space: nowrap; }
.ledger summary .tag { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.ledger summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; width: 1.4rem; text-align: center; grid-column: 3; grid-row: 1; justify-self: end; }
.ledger details[open] summary::after { content: "–"; }
.ledger__body { display: grid; grid-template-columns: 260px 1fr; gap: 1.6rem; padding: 0 .2rem 1.8rem; }
.ledger__body img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sc-r-md); }
.ledger__body .body { font-size: var(--sc-t-sm); }
.ledger__body ul { margin: .8rem 0 0; padding-left: 1.1rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
@media (max-width: 700px) { .ledger summary { grid-template-columns: 1fr auto; } .ledger summary .tag { display: none; } .ledger__body { grid-template-columns: 1fr; } }

.cornerstones { columns: 2 320px; column-gap: clamp(2rem, 5vw, 5rem); margin-top: var(--sc-6); padding: 0; }
.cornerstones li { list-style: none; break-inside: avoid; display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; padding-block: .9rem; font-size: var(--sc-t-sm); }
.cornerstones figure { margin: 0; width: 64px; height: 46px; overflow: hidden; border-radius: var(--sc-r-sm); }
.cornerstones img { width: 64px; height: 64px; max-width: none; margin-top: -2px; }
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: var(--sc-7); }
.four > div > b { display: block; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); margin: .8rem 0 .4rem; }
.four__ic { display: grid; place-items: center; aspect-ratio: 5/4; border-radius: var(--sc-r-md); background: var(--mist); }
.four__ic img { width: 42%; height: auto; }
.four p { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 860px) { .four { grid-template-columns: 1fr 1fr; } }
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: var(--sc-7); }
.counts b { display: block; font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: .9; color: var(--orange); }
.counts span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
@media (max-width: 760px) { .counts { grid-template-columns: 1fr 1fr; } }
.checks { padding: 0; margin: var(--sc-5) 0 0; }
.checks li { list-style: none; padding: .7rem 0 .7rem 2rem; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 14px; height: 14px; border-radius: 50%; background: var(--leaf); }

.articles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem) clamp(1.2rem, 2.6vw, 2.4rem); }
.article { grid-column: span 4; text-decoration: none; color: inherit; display: grid; gap: .9rem; align-content: start; }
.article:first-child { grid-column: span 8; grid-row: span 2; }
.article img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--sc-r-md); transition: transform 600ms var(--sc-ease-out); }
.article:first-child img { aspect-ratio: 16/11; }
.article h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; }
.article:first-child h3 { font-size: var(--sc-t-2xl); }
.article p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.article .more { font-weight: 600; font-size: var(--sc-t-sm); }
@media (hover: hover) and (pointer: fine) { .article:hover img { transform: scale(1.03); } }
@media (max-width: 860px) { .article, .article:first-child { grid-column: 1 / -1; grid-row: auto; } }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .9rem 2rem; }
.contact dt { font-size: var(--sc-t-sm); font-weight: 600; color: var(--forest); }
.contact dd { margin: 0; }
.contact dd a { color: inherit; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.sprite-deco { position: absolute; pointer-events: none; width: clamp(120px, 16vw, 260px); z-index: 1; }
.quote { font-family: var(--script); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 2vw, 3rem); line-height: 1.35; color: var(--forest); max-width: 26ch; }
.dark .quote { color: var(--fern); }
.center { text-align: center; margin-inline: auto; }
.mt-7 { margin-top: var(--sc-7); } .mt-5 { margin-top: var(--sc-5); } .mt-8 { margin-top: var(--sc-8); }
.skip { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--orange); color: var(--sc-accent-ink); padding: .6rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }

/* ======================================================= stay planner == */
.plan { position: fixed; inset: 0; z-index: 120; visibility: hidden; transition: visibility 0s 520ms; }
.plan.is-open { visibility: visible; transition: none; }
.plan__veil { position: absolute; inset: 0; background: rgba(0, 25, 14, .5); opacity: 0; transition: opacity 400ms var(--sc-ease-out); border: 0; width: 100%; cursor: pointer; }
.plan.is-open .plan__veil { opacity: 1; }
.plan__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--rice); display: grid; grid-template-rows: auto 1fr auto; transform: translateX(104%); transition: transform 560ms var(--sc-ease-drawer); box-shadow: var(--sc-e3); }
.plan.is-open .plan__panel { transform: none; }
.plan__top { position: relative; padding: 1.4rem 1.6rem 1.2rem; background: var(--deep); color: var(--rice); overflow: hidden; }
.plan__top h2 { font-family: var(--sc-font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: .9; }
.plan__top p { font-family: var(--script); font-weight: 700; color: var(--fern); margin-top: .3rem; }
.plan__top img { position: absolute; right: -10px; bottom: -34px; width: 150px; opacity: .95; }
.plan__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(243,237,221,.4); background: var(--deep); color: var(--rice); font-size: 1.3rem; cursor: pointer; }
.plan__body { overflow-y: auto; padding: 1.4rem 1.6rem 2rem; overscroll-behavior: contain; }
.plan__q { font-family: var(--sc-font-display); font-size: 2rem; line-height: 1; margin: 1.6rem 0 .8rem; color: var(--deep); }
.plan__q:first-child { margin-top: 0; }
.quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.quick button { border: 1.5px solid var(--sc-hairline-strong); background: transparent; border-radius: var(--sc-r-pill); padding: .45em 1em; font-size: var(--sc-t-sm); font-weight: 600; cursor: pointer; }
.quick button:active { transform: scale(.97); }
.cal__nav { display: flex; justify-content: space-between; margin-bottom: .6rem; }
.cal__nav button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--sc-hairline-strong); background: transparent; cursor: pointer; font-size: 1rem; }
.cal__nav button:disabled { opacity: .3; cursor: default; }
.cal { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cal__m b { display: block; font-weight: 600; font-size: var(--sc-t-sm); margin-bottom: .4rem; }
.cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__w { font-size: 10px; text-align: center; color: var(--sc-ink-soft); padding-bottom: 2px; }
.cal__d { aspect-ratio: 1; border: 0; background: transparent; border-radius: 50%; font-size: 13px; cursor: pointer; color: var(--sc-ink); transition: background-color 120ms; }
.cal__d:disabled { color: color-mix(in oklab, var(--sc-ink) 28%, transparent); cursor: default; }
.cal__d.is-mid { background: var(--mist); border-radius: 0; }
.cal__d.is-in, .cal__d.is-out { background: var(--forest); color: var(--rice); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .cal__d:not(:disabled):not(.is-in):not(.is-out):hover { background: var(--sand); } }
@media (max-width: 520px) { .cal { grid-template-columns: 1fr; } }
.steps { display: grid; gap: .2rem; }
.step { display: grid; grid-template-columns: 52px 1fr auto; gap: .9rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--sc-hairline); }
.step img { width: 52px; height: 44px; object-fit: contain; }
.step b { display: block; font-weight: 600; }
.step small { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
.step__ctl { display: flex; align-items: center; gap: .6rem; }
.step__ctl button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--forest); background: transparent; color: var(--forest); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.step__ctl button:disabled { opacity: .3; cursor: default; }
.step__ctl button:not(:disabled):active { transform: scale(.92); }
.step output { min-width: 1.4rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan__rooms { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; border: 0; padding: 0; margin: 0; }
.plan__rooms label { position: relative; display: grid; gap: .4rem; cursor: pointer; }
.plan__rooms input { position: absolute; opacity: 0; }
.plan__rooms .r { border-radius: var(--sc-r-md); overflow: hidden; aspect-ratio: 4/3; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color 160ms; background: var(--mist); display: grid; place-items: center; }
.plan__rooms .r img { width: 100%; height: 100%; object-fit: cover; }
.plan__rooms .r--any img { width: 70%; height: auto; object-fit: contain; }
.plan__rooms input:checked + .r { outline-color: var(--orange); }
.plan__rooms input:focus-visible + .r { outline-color: var(--forest); }
.plan__rooms span { font-size: var(--sc-t-xs); font-weight: 600; line-height: 1.3; }
.plan__rooms em { font-style: normal; color: var(--clay); font-weight: 600; }
.plan__foot { border-top: 1px solid var(--sc-hairline-strong); padding: 1rem 1.6rem 1.3rem; background: var(--rice); display: grid; gap: .8rem; }
.plan__sum { display: grid; gap: .15rem; font-size: var(--sc-t-sm); }
.plan__sum b { font-family: var(--sc-font-display); font-size: 1.7rem; line-height: 1; color: var(--deep); }
.plan__sum span { color: var(--sc-ink-soft); }
.plan__est { color: var(--clay) !important; font-weight: 600; }
.plan__go { justify-content: center; font-size: var(--sc-t-base); padding: 1em; }
.plan__go[aria-disabled="true"] { background: var(--sand); color: #6A5C44; }
.plan__fine { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-align: center; }
.plan__fine a { color: inherit; }
.plan-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 65; display: none; box-shadow: var(--sc-e2); }
@media (max-width: 700px) { .plan-fab { display: inline-flex; } .head__book { display: none; } }
html.plan-open, html.menu-open { overflow: hidden; }

/* package cards: photo, title, clamped description with View more, price + CTA footer */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); align-items: start; }
.pcard { display: grid; grid-template-rows: auto 1fr auto; background: #FBF7EC; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e1), var(--sc-edge); transition: transform var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out); height: 100%; }
.pcard__img { aspect-ratio: 4/3; overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--sc-ease-out); }
.pcard__body { padding: 1.3rem 1.4rem .6rem; display: grid; gap: .6rem; align-content: start; }
.pcard h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; color: var(--deep); }
.pcard__desc { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard.is-open .pcard__desc { -webkit-line-clamp: unset; display: block; }
.pcard__more { justify-self: start; background: none; border: 0; padding: 0; font-weight: 600; font-size: var(--sc-t-sm); color: var(--forest); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .3em; cursor: pointer; }
.pcard__fine { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem 1.3rem; border-top: 1px solid var(--sc-hairline); margin-top: .6rem; }
.pcard__price { display: grid; line-height: 1.15; }
.pcard__price b { font-family: var(--sc-font-display); font-size: 2rem; color: var(--clay); line-height: 1; }
.pcard__price small { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) { .pcard:hover { transform: translateY(-3px); box-shadow: var(--sc-e2), var(--sc-edge); } .pcard:hover .pcard__img img { transform: scale(1.04); } }