/* Saeng Sai Pool Villas, Hua Hin (fictional brand) — round 2.
   Concept: the page is one day at the villas. Sand ground, teak ink, sea-glass morning;
   warmth arrives only through the scrubbed daylight layer, ending at dusk on the booking CTA. */

/* ---------- Tokens (silk 9-role architecture + one radius knob) ---------- */
:root {
  --background: #F1EBE1;          /* beach sand */
  --card: #E9E2D6;                /* deeper sand surface */
  --foreground: #2E2722;          /* deep teak */
  --primary-cta: #2E2722;
  --primary-cta-text: #F1EBE1;
  --secondary-cta: transparent;
  --secondary-cta-text: #2E2722;
  --accent: #9C8B76;              /* driftwood: hairlines, quiet marks */
  --background-accent: #A7B8B2;   /* sea-glass: morning, selection */
  --radius: .75rem;

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* derived roles */
  --muted: #5F5246;               /* small text on sand, 6.4:1 */
  --line: rgb(156 139 118 / .38);
  --line-strong: #857462;         /* form borders, 3.8:1 */
  --field: #F8F4EE;
  --night: #2E2722;
  --night-deep: #241F1B;
  --on-night: #F1EBE1;
  --on-night-muted: #C4B8A6;      /* 7.4:1 on teak */
  --error: #7F3626;

  --font-display: "Athiti", "IBM Plex Sans Thai Looped", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai Looped", "Athiti", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fluid type — every size is a clamp; Thai body never below 16px */
  --t-xs: clamp(.875rem, .85rem + .1vw, .9375rem);
  --t-sm: clamp(.9375rem, .9rem + .15vw, 1rem);
  --t-base: clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-md: clamp(1.125rem, 1.04rem + .4vw, 1.375rem);
  --t-lg: clamp(1.375rem, 1.18rem + .9vw, 2rem);
  --t-xl: clamp(1.75rem, 1.35rem + 1.9vw, 3.125rem);
  --t-2xl: clamp(2.125rem, 1.45rem + 3.2vw, 4.5rem);
  --t-hero: clamp(3rem, 1.4rem + 7.4vw, 9rem);
  --t-read: clamp(1.625rem, 1.2rem + 2.2vw, 3.25rem);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(6rem, 4.5rem + 8vw, 13rem);
  --header-h: 4.5rem;

  /* one motion language */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-curtain: cubic-bezier(.76, 0, .24, 1);
  --dur: 1.1s;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* kill rubber-band only for mouse/trackpad; phones keep pull-to-refresh */
@media (pointer: fine) { html, body { overscroll-behavior: none; } }
* { scrollbar-width: thin; scrollbar-color: rgb(46 39 34 / .3) transparent; }
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgb(46 39 34 / .08);
  /* focused elements never land under the fixed header or the mobile bar */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  scroll-padding-bottom: calc(var(--mbar-space, 0px) + 1rem);
}
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
h1, h2, h3, legend { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--background-accent); color: var(--foreground); }

:focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; border-radius: 4px; }
.on-night :focus-visible, .pv-strip :focus-visible, .mbar :focus-visible, .menu :focus-visible, body.menu-open .site-header :focus-visible { outline-color: var(--on-night); }

.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--foreground); color: var(--on-night);
  transform: translateY(-160%); transition: transform .4s var(--ease);
}
.skip:focus { transform: none; }
[tabindex="-1"]:focus { outline: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.wrap { width: min(100% - 2 * max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)), 90rem); margin-inline: auto; }
.section { padding-block: calc(var(--section) * .6); position: relative; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Type roles ---------- */
.display, h1, h2 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -.005em;
}
h2 { font-size: var(--t-2xl); line-height: 1.28; }
h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.4; }
.lead { font-size: var(--t-md); line-height: 1.75; color: var(--muted); max-width: 36em; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); line-height: 1.7; }
:lang(en) h2 { line-height: 1.12; letter-spacing: -.015em; }
:lang(en) .lead { line-height: 1.6; }

/* phrase masks for headline reveals — generous room above (tone marks) and below (ุ ู) */
.ln { display: block; overflow: hidden; padding: .3em .04em .38em; margin: -.3em -.04em -.38em; }
.ln > span { display: block; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3.25rem; padding: .8rem 1.7rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; line-height: 1.3;
  text-decoration: none; cursor: pointer; text-align: center; max-width: 100%;
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.btn--solid { background: var(--primary-cta); color: var(--primary-cta-text); }
.btn--solid:hover { background: #4A3F37; }
.btn--line { border-color: currentColor; background: transparent; color: inherit; }
.btn--line:hover { background: rgb(46 39 34 / .06); }
.on-night .btn--line:hover { background: rgb(241 235 225 / .12); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
[data-magnetic] { will-change: transform; }
[data-magnetic] > span { display: inline-block; pointer-events: none; }

.link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-sm); font-weight: 500; text-decoration: none;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform .8s var(--ease);
}
.link:hover::after { transform-origin: left; animation: line-redraw .9s var(--ease); }
@keyframes line-redraw { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* ---------- Intro (CSS only, cannot get stuck) ---------- */
.intro { display: none; }
html.intro .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 120;
  background: var(--background); color: var(--foreground);
  animation: intro-lift .65s var(--ease-curtain) .5s forwards;
}
.intro__mark { display: flex; align-items: center; gap: .9rem; }
.intro__mark svg { width: 2.6rem; height: 2.6rem; opacity: 0; animation: fade-in .5s var(--ease) .05s forwards; }
.intro__word {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2.5rem, 2rem + 3vw, 4rem); line-height: 1.4;
  padding: .2em .1em .3em;
  clip-path: inset(0 100% 0 0);
  animation: wipe-in .5s var(--ease) .05s forwards;
}
@keyframes wipe-in { to { clip-path: inset(0 0 0 0); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes intro-lift { to { transform: translate3d(0, -101%, 0); visibility: hidden; } }

/* ---------- Daylight: the signature colour-temperature layer ---------- */
/* multiply works like a lighting gel: text and ground darken together, so contrast holds (>= 5:1 muted text at full dusk) */
.daylight { position: fixed; inset: 0; z-index: 40; pointer-events: none; contain: strict; mix-blend-mode: multiply; }
.daylight i { position: absolute; inset: 0; will-change: opacity; }
.dl--dawn {
  opacity: 1;
  background:
    radial-gradient(120% 70% at 15% 0%, rgb(167 184 178 / .30), rgb(167 184 178 / 0) 70%),
    linear-gradient(180deg, rgb(200 214 209 / .14), rgb(241 235 225 / 0) 60%);
}
.dl--gold {
  opacity: 0;
  background:
    radial-gradient(110% 80% at 88% 100%, rgb(214 163 98 / .20), rgb(214 163 98 / .05) 60%, rgb(214 163 98 / 0) 85%),
    linear-gradient(180deg, rgb(230 196 140 / .05), rgb(230 196 140 / .08));
}
.dl--dusk {
  opacity: 0;
  background:
    radial-gradient(130% 75% at 50% 110%, rgb(176 102 72 / .22), rgb(150 88 62 / .08) 55%, rgb(120 80 90 / 0) 80%),
    linear-gradient(180deg, rgb(110 78 88 / .07), rgb(176 110 70 / .09));
}
.dl--grain {
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .15 0 0 0 0 .13 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--foreground);
  transition: transform .8s var(--ease), color .6s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(241 235 225 / .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  opacity: 1; transition: opacity .6s var(--ease);
}
/* transparent over the hero's morning haze only when JS can switch it back on scroll */
html.js .site-header.is-over::before { opacity: 0; }
.site-header.is-hidden { transform: translate3d(0, -100%, 0); }
.header-in {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 44px;
  text-decoration: none; margin-right: auto;
}
.brand svg { width: 1.6rem; height: 1.6rem; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1.2; }
.brand__sub { display: block; font-size: .8125rem; line-height: 1.3; opacity: .82; letter-spacing: .01em; }
.brand__txt { display: flex; flex-direction: column; }
.concept {
  font-size: .8125rem; line-height: 1.3; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid currentColor; opacity: .9; white-space: nowrap;
}
.nav ul { display: flex; gap: .25rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem;
  font-size: var(--t-sm); text-decoration: none; position: relative;
}
.nav a:not(.nav__book)::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .7rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .nav__book { border: 1px solid currentColor; border-radius: 999px; padding: 0 1.1rem; margin-left: .4rem; transition: background-color .5s var(--ease), color .5s var(--ease); }
.nav .nav__book:hover { background: rgb(46 39 34 / .07); }
.nav .nav__book[aria-current="page"] { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.lang { display: flex; align-items: center; font-size: var(--t-xs); }
.lang a, .lang span[aria-current] {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  text-decoration: none;
}
.lang span[aria-current] { font-weight: 500; }
.lang a { opacity: .72; transition: opacity .4s; }
.lang a:hover { opacity: 1; text-decoration: underline; }
.lang__sep { opacity: .5; }
.menu-btn {
  display: none; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .2rem 0 .6rem;
  background: none; border: 0; cursor: pointer; font-size: var(--t-sm);
}
.menu-btn__icon { position: relative; width: 1.25rem; height: 10px; }
.menu-btn__icon::before, .menu-btn__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .6s var(--ease);
}
.menu-btn__icon::before { top: 1px; }
.menu-btn__icon::after { bottom: 1px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-4px) rotate(-45deg); }

/* fullscreen curtain menu (mobile + tablet) */
.menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--night); color: var(--on-night);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0);
  visibility: hidden; overscroll-behavior: contain;
  transition: clip-path .9s var(--ease-curtain), visibility 0s linear .9s;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease-curtain), visibility 0s; }
.menu__list li { overflow: hidden; padding: .3em 0 .38em; margin: -.3em 0 -.38em; }
.menu__list a {
  display: block; padding: .35rem 0; text-decoration: none;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2.5rem, 1.8rem + 4vw, 4.5rem); line-height: 1.3;
  transform: translate3d(0, 120%, 0); transition: transform .9s var(--ease);
}
.menu.is-open .menu__list a { transform: none; }
.menu__list a:hover { opacity: .75; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: .08s; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: .16s; }
.menu__meta { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(241 235 225 / .2); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: var(--t-sm); color: var(--on-night-muted); }
.menu__meta a { display: inline-flex; align-items: center; min-height: 44px; }
body.menu-open .site-header { color: var(--on-night); }
body.menu-open .site-header::before { opacity: 0; }

@media (max-width: 63.99rem) {
  html.js .nav { display: none; }
  html.js .menu-btn { display: inline-flex; }
  /* without JS the links stay reachable in a second header row */
  html:not(.js) .header-in { flex-wrap: wrap; }
  html:not(.js) .nav { order: 5; width: 100%; }
  html:not(.js) .menu { display: none; }
}
@media (max-width: 47.99rem) {
  .header-in { flex-wrap: wrap; row-gap: 0; padding-top: .35rem; }
  .concept { order: 6; width: max-content; margin: -.2rem 0 .55rem; font-size: .8125rem; padding: .2rem .65rem; }
  .brand__sub { display: none; }
  .lang { margin-left: auto; }
}
@media (min-width: 48rem) {
  .concept { margin-right: .5rem; }
}

/* ---------- Reveal system: ONE config everywhere ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0; transform: translate3d(0, 28px, 0);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    transition-delay: calc(var(--base, 0s) + var(--d, 0s));
  }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }

  html.js [data-lines] .ln > span {
    opacity: 0; transform: translate3d(0, 130%, 0);
    transition: transform 1.25s var(--ease), opacity 1.25s var(--ease);
    transition-delay: calc(var(--base, 0s) + var(--i, 0) * .11s);
  }
  html.js [data-lines].is-in .ln > span { opacity: 1; transform: none; }

  /* villa windows open from the centre, like the villas' glass doors */
  html.js .window[data-window] { clip-path: inset(0 50% 0 50% round var(--radius-sm)); transition: clip-path 1.4s var(--ease); }
  html.js .window[data-window] img { transform: scale(1.14); transition: transform 2s var(--ease); }
  html.js .window[data-window]::after { opacity: 0; transition: opacity 1.2s var(--ease) .7s; }
  html.js .window[data-window].is-in { clip-path: inset(0 0 0 0 round var(--radius-sm)); }
  html.js .window[data-window].is-in img { transform: none; }
  html.js .window[data-window].is-in::after { opacity: 1; }

  html.js .fill .ph { opacity: .2; }
  html.js.no-scrub .fill.is-in .ph { opacity: 1; transition: opacity 1.4s var(--ease); }

  html.intro .hero { --base: .75s; }
}

/* ---------- Hero (index): full-bleed, very slow Ken Burns ---------- */
.hero {
  position: relative; height: 100svh; min-height: 36rem; overflow: hidden;
  color: var(--foreground); background: #DDD5C9;
}
.hero__media { position: absolute; inset: 0; will-change: transform; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%;
  filter: saturate(.84) contrast(.95) brightness(.97);
  transform-origin: 62% 58%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: kenburns 30s cubic-bezier(.33, 0, .2, 1) 1 both; }
}
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgb(241 235 225 / .92) 0%, rgb(241 235 225 / .8) 30%, rgb(241 235 225 / .5) 52%, rgb(241 235 225 / .15) 70%, rgb(241 235 225 / 0) 80%),
    linear-gradient(to bottom, rgb(241 235 225 / .75), rgb(241 235 225 / .45) 10%, rgb(241 235 225 / 0) 22%);
}
.hero__content {
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: calc(clamp(2.5rem, 7vh, 5.5rem) + var(--mbar-space, 0px));
}
.hero h1 { font-size: var(--t-hero); line-height: 1.2; letter-spacing: -.01em; max-width: 12em; }
.hero h1 .h1-sub { font-size: .36em; line-height: 1.5; margin-top: .35em; letter-spacing: 0; }
:lang(en) .hero h1 { line-height: 1.04; letter-spacing: -.025em; }
:lang(en) .hero h1 .h1-sub { margin-top: .6em; }
.hero__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}
.hero__price { font-size: var(--t-sm); color: var(--foreground); }
.hero__price strong { font-family: var(--font-display); font-weight: 500; font-size: 1.25em; }
.hero__cue {
  position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(2.5rem, 7vh, 5.5rem);
  display: none; align-items: center; gap: .9rem; font-size: var(--t-xs); color: var(--muted);
}
.hero__cue i { display: block; width: 1px; height: 3.5rem; background: rgb(46 39 34 / .2); position: relative; overflow: hidden; }
.hero__cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--foreground);
  transform: scaleY(0); transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cue i::after { animation: cue 2.4s var(--ease) 2; }
}
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 64rem) { .hero__cue { display: flex; } }
.hero__pause { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__pause {
    display: grid; place-items: center; position: absolute; z-index: 3;
    right: var(--gutter); top: calc(var(--header-h) + 2.75rem);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgb(46 39 34 / .35); background: rgb(241 235 225 / .55); color: var(--foreground);
    cursor: pointer; transition: border-color .4s var(--ease), background-color .4s var(--ease);
  }
  html.js .hero__pause:hover { border-color: var(--foreground); background: rgb(241 235 225 / .85); }
  .hero.is-paused .hero__media img, .hero.is-paused .hero__cue i::after { animation-play-state: paused; }
}
.hero__pause svg { width: 14px; height: 14px; }
.hero__pause .i-play, .hero.is-paused .hero__pause .i-pause { display: none; }
.hero.is-paused .hero__pause .i-play { display: block; }
@media (min-width: 64rem) { html.js .hero__pause { top: auto; bottom: calc(clamp(2.5rem, 7vh, 5.5rem) + 4.75rem); } }

/* ---------- Statement (reading fill) ---------- */
.statement { padding-block: var(--section) calc(var(--section) * .7); }
.fill {
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-read); line-height: 1.55;
  max-width: 21em;
}
:lang(en) .fill { line-height: 1.3; letter-spacing: -.01em; }
.fill .ph { will-change: opacity; }
.facts {
  display: grid; gap: 1.5rem; margin-top: clamp(3.5rem, 8vw, 7rem);
  border-top: 1px solid var(--line); padding-top: 1.75rem;
}
.facts li { display: flex; flex-direction: column; gap: .15rem; font-size: var(--t-sm); color: var(--muted); }
.facts__n { font-family: var(--font-display); font-weight: 300; font-size: var(--t-xl); line-height: 1.25; color: var(--foreground); font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Generic two-part section head ---------- */
.head { display: grid; gap: 1.5rem; margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.head p { max-width: 34em; color: var(--muted); }
@media (min-width: 64rem) {
  .head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 8%; align-items: end; }
}

/* ---------- Book direct ---------- */
.direct { display: grid; gap: 3rem; }
.direct__intro p { margin-top: 1.5rem; color: var(--muted); max-width: 30em; }
.perks li { padding: 1.75rem 0 2rem; border-top: 1px solid var(--line); }
.perks li:last-child { border-bottom: 1px solid var(--line); }
.perks h3 { margin-bottom: .5rem; }
.perks p { color: var(--muted); max-width: 36em; }
.direct__cta { margin-top: 2.5rem; }
.direct__note { margin-top: 1rem; font-size: var(--t-sm); color: var(--muted); }
@media (min-width: 64rem) {
  .direct { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 9%; align-items: start; }
  .direct__intro { position: sticky; top: calc(var(--header-h) + 3rem); }
}

/* ---------- Windows (tall clip-path frames) ---------- */
.window {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  aspect-ratio: 2 / 3; background: var(--card);
  clip-path: inset(0 0 0 0 round var(--radius-sm));
}
.window__img { position: absolute; inset: -7% 0; will-change: transform; }
.window img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(.96); }
.window::after {
  content: ""; position: absolute; inset: clamp(8px, 1.1vw, 14px); pointer-events: none;
  border: 1px solid rgb(241 235 225 / .5); border-radius: calc(var(--radius-sm) - 4px);
}
.window--wide { aspect-ratio: 4 / 5; }
.cap { margin-top: .85rem; font-size: var(--t-xs); color: var(--muted); }

/* ---------- Villas (index) ---------- */
.vlist { display: grid; gap: clamp(5rem, 12vw, 11rem); }
.vrow { display: grid; gap: 2rem; align-items: end; }
.vrow__media { width: 100%; max-width: 30rem; }
.vrow__body h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--t-2xl); line-height: 1.28; }
:lang(en) .vrow__body h3 { line-height: 1.1; letter-spacing: -.015em; }
.vrow__en { margin-top: .4rem; font-size: var(--t-sm); color: var(--muted); }
.vrow__body > p:not([class]) { margin-top: 1.25rem; max-width: 30em; color: var(--muted); }
.specs { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin-top: 1.5rem; font-size: var(--t-sm); }
.specs li { white-space: nowrap; }
.from { margin-top: 1.75rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-size: var(--t-sm); color: var(--muted); }
.from strong { font-family: var(--font-display); font-weight: 300; font-size: var(--t-xl); line-height: 1.2; color: var(--foreground); }
.vrow__body .link { margin-top: .75rem; }
@media (min-width: 64rem) {
  .vrow { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
  .vrow__media { grid-column: 2 / span 4; grid-row: 1; max-width: none; }
  .vrow__body { grid-column: 7 / span 5; grid-row: 1; padding-bottom: 2rem; }
  .vrow:nth-child(even) .vrow__media { grid-column: 8 / span 4; }
  .vrow:nth-child(even) .vrow__body { grid-column: 2 / span 5; }
}

/* ---------- Amenities ---------- */
.amen { display: grid; gap: 3rem; }
.amen h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--t-base); margin-bottom: .75rem; }
.ticks li { padding: .85rem 0; border-top: 1px solid var(--line); }
.ticks small { display: block; font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }
@media (min-width: 48rem) { .amen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8%; } }

/* ---------- A day at Saeng Sai ---------- */
.day { display: grid; gap: clamp(3.5rem, 8vw, 6rem); }
.day figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); filter: saturate(.85) contrast(.96); }
.day .tall img { aspect-ratio: 4 / 5; }
.day figcaption { display: flex; flex-direction: column; gap: .1rem; margin-top: 1rem; font-size: var(--t-sm); color: var(--muted); }
.day time { font-family: var(--font-display); font-weight: 300; font-size: var(--t-xl); line-height: 1.2; color: var(--foreground); font-variant-numeric: tabular-nums; }
.day li:nth-child(even) { width: 82%; margin-left: auto; }
.day li:nth-child(odd) { width: 92%; }
@media (min-width: 64rem) {
  .day { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 0; }
  .day li:nth-child(n) { width: auto; margin: 0; }
  .day li:nth-child(1) { grid-column: 1 / span 4; }
  .day li:nth-child(2) { grid-column: 6 / span 7; margin-top: 12rem; }
  .day li:nth-child(3) { grid-column: 2 / span 6; margin-top: 6rem; }
  .day li:nth-child(4) { grid-column: 9 / span 4; margin-top: 2rem; }
  .day li:nth-child(5) { grid-column: 3 / span 8; margin-top: 7rem; }
}

/* ---------- Location ---------- */
.loc { display: grid; gap: 3.5rem; }
.loc__text > p { margin-top: 1.5rem; color: var(--muted); max-width: 32em; }
.dist__cap { margin-top: 2.5rem !important; font-size: var(--t-sm); color: var(--foreground) !important; font-weight: 500; }
.dist { margin-top: .75rem; }
.dist div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.dist div:last-child { border-bottom: 1px solid var(--line); }
.dist dt { min-width: 0; }
.dist dd { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.address { margin-top: 2rem; font-size: var(--t-sm); color: var(--muted); max-width: 30em; line-height: 1.7; }
.loc__text .btn { margin-top: 1.5rem; }
.loc__media { max-width: 30rem; width: 100%; }
@media (min-width: 64rem) {
  .loc { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: start; }
  .loc__text { grid-column: 1 / span 6; }
  .loc__media { grid-column: 8 / span 5; max-width: none; position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ---------- Reviews ---------- */
.rating { margin-top: 1.25rem; font-size: var(--t-sm); color: var(--muted); }
.rating b { font-family: var(--font-display); font-weight: 500; font-size: 1.6em; color: var(--foreground); margin-right: .35rem; }
.reviews { display: grid; gap: 3rem; margin-top: clamp(3rem, 6vw, 5rem); }
.review p { font-family: var(--font-display); font-weight: 300; font-size: var(--t-lg); line-height: 1.6; }
:lang(en) .review p { line-height: 1.45; }
.review footer { margin-top: 1.25rem; font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }
.review cite { font-style: normal; color: var(--foreground); font-weight: 500; }
@media (min-width: 64rem) {
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
  .reviews li:nth-child(2) { margin-top: 5rem; }
  .reviews li:nth-child(3) { margin-top: 10rem; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 2.5rem; }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  min-height: 44px; padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-size: var(--t-md); font-weight: 500; line-height: 1.55;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: #4A3F37; }
.faq__list summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 14px no-repeat;
  transition: transform .6s var(--ease);
}
.faq__list details[open] summary::after { transform: rotate(135deg); }
.faq__list details > div { padding: 0 0 1.75rem; max-width: 40em; color: var(--muted); }
@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }
  .faq__list details::details-content {
    height: 0; overflow: clip;
    transition: height .7s var(--ease), content-visibility .7s allow-discrete;
  }
  .faq__list details[open]::details-content { height: auto; }
}
@media (min-width: 64rem) {
  .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 8%; align-items: start; }
}

/* ---------- Closing CTA: dusk, pool lights on ---------- */
.cta {
  position: relative; min-height: 112svh; overflow: hidden;
  display: grid; place-items: center; padding: 8rem var(--gutter);
  color: var(--on-night); background: #3B2F28;
}
.cta__media { position: absolute; inset: -12% 0; will-change: transform; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(.95); }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(46 39 34 / .35), rgb(46 39 34 / .2) 50%, rgb(46 39 34 / .45)); pointer-events: none; }
.cta__card {
  position: relative; z-index: 2; width: min(100%, 36rem);
  background: var(--background); color: var(--foreground);
  border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.75rem);
  will-change: transform;
}
.cta__card h2 { font-size: var(--t-2xl); }
.cta__card p { margin-top: 1.25rem; color: var(--muted); }
.cta__card .btn-row { margin-top: 2rem; }
.cta__time { display: block; margin-bottom: 1.25rem; font-size: var(--t-xs); color: var(--muted); }

/* ---------- Page head (villas, booking) ---------- */
.page-head { padding: calc(var(--header-h) + clamp(4rem, 10vw, 9rem)) 0 clamp(3rem, 7vw, 6rem); }
.page-head h1 { font-size: var(--t-hero); line-height: 1.2; }
:lang(en) .page-head h1 { line-height: 1.04; letter-spacing: -.025em; }
.page-head .lead { margin-top: 2rem; }
.seasons { display: grid; gap: 1rem; margin-top: 3rem; max-width: 40rem; }
.seasons > div { border-top: 1px solid var(--line); padding-top: 1rem; }
.seasons dt { font-weight: 500; }
.seasons dd { color: var(--muted); font-size: var(--t-sm); }
@media (min-width: 48rem) { .seasons { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.jump { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 2.5rem; }
.perk-line { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 2rem; font-size: var(--t-sm); }
.perk-line li { display: flex; align-items: center; gap: .6rem; }
.perk-line li::before { content: ""; width: 1.5rem; height: 1px; background: var(--accent); }

/* ---------- Villa detail (villas.html) ---------- */
.villa { padding-block: clamp(3.5rem, 7vw, 7rem); border-top: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.villa__photos { display: grid; gap: 1rem; }
.villa__photos .window:nth-child(2) { width: 62%; margin-left: auto; }
.villa__photos .cap { margin-top: 0; }
.villa__body { display: grid; gap: 3rem; margin-top: clamp(4rem, 8vw, 6rem); }
.villa__body h2 { line-height: 1.25; }
.villa__en { margin-top: .4rem; color: var(--muted); font-size: var(--t-sm); }
.villa__desc { margin-top: 1.75rem; display: grid; gap: 1rem; color: var(--muted); max-width: 34em; }
.villa__body .ticks { margin-top: 2rem; }
.facts-table div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.facts-table dt { color: var(--muted); }
.rates { margin-top: 2.5rem; }
.rates h3 { font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; margin-bottom: .5rem; }
.rates__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.rates__row:last-of-type { border-bottom: 1px solid var(--line); }
.rates__row small { display: block; font-size: var(--t-xs); color: var(--muted); }
.rates__row strong { font-family: var(--font-display); font-weight: 300; font-size: var(--t-xl); line-height: 1.2; font-variant-numeric: tabular-nums; }
.rates__note { margin-top: .9rem; font-size: var(--t-sm); color: var(--muted); }
.rates .btn { margin-top: 1.5rem; }
@media (min-width: 64rem) {
  .villa__photos { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: end; }
  .villa__photos .window:nth-child(1) { grid-column: 1 / span 6; grid-row: 1; }
  .villa__photos .window:nth-child(2) { grid-column: 8 / span 4; grid-row: 1; width: auto; margin: 0; }
  .villa__photos .cap { grid-column: 8 / span 4; grid-row: 2; }
  .villa__body { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 9%; }
  .villa:nth-of-type(even) .villa__photos .window:nth-child(1) { grid-column: 7 / span 6; }
  .villa:nth-of-type(even) .villa__photos .window:nth-child(2) { grid-column: 2 / span 4; }
  .villa:nth-of-type(even) .villa__photos .cap { grid-column: 2 / span 4; }
}

.compare-wrap { overflow-x: auto; margin-top: 2.5rem; }
.compare { width: 100%; min-width: 19rem; border-collapse: collapse; font-size: var(--t-sm); }
.compare caption { text-align: left; color: var(--muted); padding-bottom: 1rem; caption-side: top; }
.compare th, .compare td { text-align: left; padding: .9rem .75rem .9rem 0; border-top: 1px solid var(--line); font-weight: 400; vertical-align: baseline; }
.compare thead th { font-family: var(--font-display); font-weight: 500; font-size: var(--t-md); border-top: 0; }
.compare tbody th { color: var(--muted); }
.compare td { font-variant-numeric: tabular-nums; }
.compare tr:last-child > * { border-bottom: 1px solid var(--line); }

.extras { display: grid; margin-top: 2.5rem; column-gap: 8%; }
.extras li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.extras b { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .extras { grid-template-columns: 1fr 1fr; } }

/* ---------- Booking ---------- */
.bform { display: grid; gap: 3rem; padding-bottom: var(--section); }
.bform fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.bform legend { padding: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--t-xl); line-height: 1.3; margin-bottom: 1.5rem; }
.fields { display: grid; gap: 1.25rem; }
.two { display: grid; gap: 1.25rem; }
@media (min-width: 30rem) { .two { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--t-sm); font-weight: 500; }
.hint { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem;
  font-size: 1rem; line-height: 1.5;
  background-color: var(--field); color: var(--foreground); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232E2722' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--foreground); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--foreground); outline: 2px solid var(--foreground); outline-offset: 2px; background: #FFFDF9; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 3px 0 0 var(--error); }
.field input::placeholder, .field textarea::placeholder { color: #7A6B5D; opacity: 1; }
.err { color: var(--error); font-size: var(--t-sm); min-height: 0; }
.err:empty { display: none; }
.choice { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice legend { font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; margin-bottom: .5rem; width: 100%; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem;
  border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-size: var(--t-sm);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.choice span:hover { border-color: var(--foreground); }
.choice input:checked + span { background: var(--foreground); color: var(--on-night); border-color: var(--foreground); }
.choice input:focus-visible + span { outline: 2px solid var(--foreground); outline-offset: 3px; }
.estimate {
  background: var(--card); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.estimate h2 { font-size: var(--t-lg); line-height: 1.4; }
.est__villa { margin-top: .75rem; font-weight: 500; }
.est__dates { color: var(--muted); font-size: var(--t-sm); }
.est__empty { margin-top: 1rem; color: var(--muted); font-size: var(--t-sm); }
.est__lines { margin-top: 1.25rem; }
.est__lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.est__lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.est__free { color: #3D5A52; font-weight: 500; }
.est__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--foreground); }
.est__total strong { font-family: var(--font-display); font-weight: 300; font-size: var(--t-xl); line-height: 1.2; font-variant-numeric: tabular-nums; }
.est__meta, .est__save { margin-top: .75rem; font-size: var(--t-sm); color: var(--muted); line-height: 1.65; }
.bform__send p { margin-top: 1rem; font-size: var(--t-sm); color: var(--muted); max-width: 34em; }
@media (min-width: 64rem) {
  .bform { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 8%; align-items: start; }
  .bform > fieldset, .bform__send { grid-column: 1; }
  .estimate { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h) + 2rem); }
}
.thanks { padding: 0 0 var(--section); max-width: 44rem; }
.thanks:focus { outline: none; }
.thanks h2 { font-size: var(--t-2xl); }
.thanks > p { margin-top: 1.25rem; color: var(--muted); }
.thanks__sum { margin: 2rem 0; }
.thanks__sum div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.thanks__sum dt { color: var(--muted); }
.thanks__sum dd, .est__lines span:first-child { min-width: 0; overflow-wrap: anywhere; }
.thanks .btn-row { margin-top: 2rem; }
@media (max-width: 29.99rem) {
  .facts-table div, .thanks__sum div { grid-template-columns: minmax(6.5rem, 38%) 1fr; gap: .75rem; }
}

/* ---------- Footer (night) ---------- */
.site-footer { background: var(--night); color: var(--on-night); padding: clamp(4.5rem, 9vw, 8rem) 0 3rem; }
.foot { display: grid; gap: 3rem; }
.foot h2 { font-family: var(--font-body); font-weight: 500; font-size: var(--t-sm); margin-bottom: .75rem; color: var(--on-night-muted); }
.foot ul { list-style: none; padding: 0; }
.foot li { font-size: var(--t-sm); color: var(--on-night); }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot li a:hover { text-decoration: underline; }
.foot .address { color: var(--on-night-muted); }
.foot__map { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem; font-size: var(--t-sm); }
.foot__fine { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgb(241 235 225 / .16); font-size: var(--t-xs); color: var(--on-night-muted); }
.foot__word { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.5rem, 1rem + 12vw, 12rem); line-height: 1.25; color: rgb(241 235 225 / .9); margin-bottom: 3rem; }
:lang(en) .foot__word { line-height: 1; letter-spacing: -.03em; }
@media (min-width: 48rem) { .foot { grid-template-columns: 1.4fr 1fr 1fr; column-gap: 4rem; } }

/* ---------- PV Dev strip (quiet, separate) ---------- */
.pv-strip { background: var(--night-deep); color: var(--on-night-muted); border-top: 1px solid rgb(156 139 118 / .35); padding: .85rem 0; font-size: var(--t-xs); line-height: 1.6; }
.pv-strip a { color: var(--on-night); }
.pv-strip a:hover { text-decoration-thickness: 2px; }

/* ---------- Mobile contact bar ---------- */
.mbar { display: none; }
@media (max-width: 47.99rem) {
  :root { --mbar-space: 4.25rem; }
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .mbar {
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: .4rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
    background: rgb(46 39 34 / .96); color: var(--on-night);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .mbar a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; border-radius: 999px; text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  }
  .mbar svg { width: 1.25rem; height: 1.25rem; flex: none; }
  .mbar .mbar__book { background: var(--on-night); color: var(--foreground); }
  .mbar :focus-visible { outline-color: var(--on-night); }
}

/* ---------- Reduced motion: everything at rest ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.intro .intro { display: none; }
}

@media print {
  .daylight, .mbar, .menu, .intro, .site-header { display: none !important; }
  html.js [data-reveal], html.js [data-lines] .ln > span, html.js .fill .ph { opacity: 1 !important; transform: none !important; }
  html.js .window[data-window] { clip-path: none !important; }
}