/* Salt & Sky — Siargao Retreat 2027
   Built by build/build.py from design-source/. Layout and colour live in
   inline styles on the markup, exactly as the design authored them; this
   sheet carries what an inline style cannot express. */

/* ── Base + keyframes + responsive (from the design's helmet) ─────────── */
html,body{margin:0;padding:0;background:#F7F3EE}
body{font-family:'Outfit',sans-serif;color:#232619;-webkit-font-smoothing:antialiased}
a{color:#2E6A70;text-decoration:none}a:hover{color:#1F4F54}
/* The nav is sticky, so an anchor jump would otherwise drop the section's
   heading underneath it. Keep every nav target clear of the bar. */
section[id]{scroll-margin-top:82px}
html{scroll-behavior:smooth}
/* Every Reserve CTA is a two-option disclosure: there is no booking form on
   this site, so the button opens the two channels Jennison actually answers
   on. Each instance passes its own palette down as --rs-*, so the options
   always match the button that revealed them. */
[data-reserve]{position:relative;display:inline-flex;flex-direction:column}
[data-reserve-trigger]{font-family:'Outfit',sans-serif;cursor:pointer;border:none;text-align:center;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
[data-reserve-trigger]:hover{box-shadow:0 7px 20px rgba(35,38,25,0.20)}
[data-reserve-panel]{display:flex;gap:8px;max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .42s cubic-bezier(0.16,1,0.3,1),opacity .3s ease,margin-top .42s cubic-bezier(0.16,1,0.3,1)}
[data-reserve][data-open="1"]>[data-reserve-panel]{max-height:64px;opacity:1;margin-top:9px}
[data-reserve-opt]{flex:1;white-space:nowrap;text-align:center;padding:11px 20px;border-radius:999px;font-size:13.5px;font-weight:600;background:var(--rs-bg);color:var(--rs-fg);border:1px solid var(--rs-bd,transparent);transition:opacity .25s ease}
[data-reserve-opt]:hover{color:var(--rs-fg);opacity:0.8}
/* The nav bar must not grow, so its panel floats clear instead of taking space. */
[data-reserve-drop]>[data-reserve-panel]{position:absolute;top:calc(100% + 9px);right:0;flex-direction:column;gap:7px;margin-top:0;z-index:130}
[data-reserve-drop][data-open="1"]>[data-reserve-panel]{max-height:120px;margin-top:0}
@keyframes curtainUp{0%{transform:translateY(0)}100%{transform:translateY(-101%)}}
@keyframes silkA{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(6vw,-4vh) rotate(8deg)}100%{transform:translate(0,0) rotate(0deg)}}
@keyframes silkB{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-7vw,5vh) rotate(-7deg)}100%{transform:translate(0,0) rotate(0deg)}}
@media (max-width:820px){
[data-shell]{min-width:0 !important}
[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:24px !important}
nav>div:first-child{gap:12px !important;padding:9px 16px !important}
[data-nav-links]{display:none !important}
[data-nav-brand]{font-size:16px !important}
/* Burger first, then the wordmark, then Reserve pushed to the far edge. */
[data-burger]{display:flex !important;width:34px !important;height:34px !important;order:-1 !important}
[data-nav-reserve]>[data-reserve-trigger]{padding:8px 16px !important;font-size:12.5px !important}
[data-nav-drawer]{display:block !important}
[data-nav-drawer][data-open="1"]{max-height:420px !important}
section{padding-left:16px !important;padding-right:16px !important}
section[data-screen-label="Hero"]{padding:8px 8px 0 !important}
section[data-screen-label="Hero"]>div{height:auto !important;min-height:0 !important;border-radius:22px !important}
section[data-screen-label="Hero"] image-slot{height:300px !important}
[data-hero-copy]{position:static !important;inset:auto !important;padding:26px 20px 32px 58px !important}
[data-hero-meta],[data-hero-actions]{flex-wrap:wrap !important;gap:10px 14px !important}
[data-sep]{display:none !important}
[data-hero-rail]{width:52px !important}
h1{font-size:52px !important;line-height:1.02 !important;margin-bottom:18px !important}
h2{font-size:32px !important;line-height:1.12 !important}
h3{font-size:23px !important}
p{font-size:15px !important}
/* What's included becomes an accordion here. Desktop shows every chapter at
   once because reading it all in one pass is the point; on a phone that is a
   very long column, so all but the first collapse to a title. */
[data-chapter]{padding:0 !important;border-top:1px solid #E7DED2 !important}
[data-chapters-end]{display:none !important}
[data-chapter-head]{gap:14px !important;margin-bottom:0 !important;padding:22px 2px !important;cursor:pointer !important}
[data-chapter-head] h3{white-space:normal !important;font-size:22px !important;opacity:0.42 !important;transition:opacity .35s ease !important}
[data-chapter][data-open="1"] [data-chapter-head] h3{opacity:1 !important}
[data-chapter-rule="l"]{display:none !important}
[data-chapter-mark]{display:block !important}
[data-chapter][data-open="1"] [data-chapter-mark-v]{opacity:0 !important}
[data-chapter-body]{max-height:0 !important;overflow:hidden !important;opacity:0 !important;
  transition:max-height .55s cubic-bezier(0.16,1,0.3,1),opacity .4s ease !important}
[data-chapter][data-open="1"] [data-chapter-body]{max-height:1600px !important;opacity:1 !important;
  padding-bottom:26px !important}
[data-notinc]{padding:26px 22px !important;gap:24px !important}
[data-notinc-photo]{height:220px !important}
[data-day-strip]{flex-direction:column !important;height:auto !important;gap:12px !important}
[data-resort-tile]{height:280px !important}
[data-addons]{padding:20px !important;gap:22px !important}
[data-addons-photo]{height:210px !important}
[data-addons-copy]{padding-right:0 !important}
[data-addons-copy] p{font-size:20px !important;line-height:1.45 !important}
[data-day-panel]{flex:none !important;height:120px !important;transition:height .6s cubic-bezier(0.16,1,0.3,1) !important}
[data-day-panel][data-open="1"]{height:330px !important}
[data-day-collapsed] div{writing-mode:horizontal-tb !important;transform:none !important}
[data-day-collapsed]{justify-content:flex-start !important;padding:0 22px 22px !important}
[data-day-open]{padding:24px 22px 26px !important}
[data-day-open] h3{white-space:normal !important;font-size:25px !important}
/* The gallery keeps its shape on a phone — one photo, arrows either side, the
   close button pinned in the bar above. The arrows must survive here: in /edit
   they are the only way to reach the second, third and fourth photo of a room. */
[data-lb-bar]{padding:14px 16px 10px !important}
[data-lb-title]{font-size:19px !important}
/* Arrows sit ON the photo here rather than beside it — flanking them cost the
   image a third of the screen width. */
[data-lb-body]{position:relative !important;gap:0 !important;padding:0 12px 16px !important}
[data-lb-prev],[data-lb-next]{position:absolute !important;top:50% !important;
  transform:translateY(-50%) !important;z-index:2 !important;
  width:42px !important;height:42px !important;font-size:16px !important;
  background:rgba(20,22,15,0.55) !important;backdrop-filter:blur(6px) !important}
[data-lb-prev]{left:16px !important}
[data-lb-next]{right:16px !important}
[data-room-card]{border-radius:22px !important}
/* A long label ran off the side of its box — worst in the Terms card, where it
   also cleared the viewport edge. It wraps to its own line now and the hairline
   rule drops underneath it. */
[data-eyebrow]{flex-wrap:wrap !important;gap:10px !important;align-items:center !important}
[data-eyebrow]>span:first-child{white-space:normal !important;flex:1 1 100% !important;
  letter-spacing:0.18em !important;line-height:1.5 !important}
[data-eyebrow]>span:last-child{flex:1 1 100% !important}
/* Rooms carried a second 32px gutter inside the section's own, so its cards and
   the Terms box sat 48px in while every neighbouring section sat at 16px. */
section[data-screen-label="Rooms"]>div{padding-left:0 !important;padding-right:0 !important}
[data-terms]{padding:26px 22px !important}
footer>div{flex-direction:column !important;gap:14px !important;text-align:center !important}
section[data-screen-label="Resort"]>div,section[data-screen-label="Testimonials"]>div,section[data-screen-label="A day"]>div{padding-left:20px !important;padding-right:20px !important}
}

/* ── Hover ──────────────────────────────────────────────────────────────
   Authored as style-hover="" but never implemented by dc-runtime, so all 18
   were inert on the canvas. The transition is added so they ease rather than
   snap — only the gallery buttons carried one inline. */
[data-h]{transition:background .3s ease,color .3s ease,border-color .3s ease}
[data-h="4c511b"]:hover{background:#232619;color:#F7F3EE}
[data-h="5f169f"]:hover{background:#F7F3EE;color:#232619}
[data-h="a11eda"]:hover{background:#60B6BF;color:#12261F}
[data-h="c6cad2"]:hover{background:#4D5931;color:#F7F3EE}

/* ── Focus ──────────────────────────────────────────────────────────────
   The day panels take tabindex=0 and the lightbox is keyboard driven. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #60B6BF;outline-offset:3px;border-radius:4px
}

/* ── Reduced motion ─────────────────────────────────────────────────────
   Cut the ambient and entrance motion, keep every functional transition.
   The curtain is display:none rather than animation:none — it starts
   covering the viewport, so merely cancelling its animation would leave the
   page behind a black screen. */
@media (prefers-reduced-motion:reduce){
  [data-curtain]{display:none !important}
  [data-silk]>div{animation:none !important}
  [data-r]{opacity:1 !important;transform:none !important;transition:none !important}
  [data-mask]>span{transform:none !important;transition:none !important}
}