/* Villa Senja. Slow cinema: letterboxed frames, subtitles, scene counter, dissolves, grain.
   ---------------------------------------------------------------- tokens */
:root {
  --night: #0E1A14;      /* page */
  --night-2: #15241C;    /* raised panel */
  --bar: #070E0A;        /* letterbox bars */
  --moss: #5E6E52;
  --moss-ink: #46553D;   /* moss for small text on mist (contrast 5.6) */
  --mist: #E1E7E0;
  --mist-dim: rgba(225, 231, 224, .74);
  --rule: rgba(225, 231, 224, .16);
  --rule-ink: rgba(14, 26, 20, .18);
  --dusk: #E3A99C;
  --gold: #C9B26B;

  --serif: 'Libre Caslon Display', 'Times New Roman', serif;
  --sans: 'Albert Sans', system-ui, sans-serif;

  /* type scale */
  --fs-display: clamp(2.5rem, 1.2rem + 4.6vw, 5.6rem);
  --fs-h2: clamp(2.15rem, 1.3rem + 2.9vw, 4.1rem);
  --fs-h3: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem);
  --fs-lead: clamp(1.06rem, .98rem + .35vw, 1.3rem);
  --fs-body: clamp(1rem, .96rem + .14vw, 1.0625rem);
  --fs-sub: clamp(.95rem, .86rem + .42vw, 1.3rem);
  --fs-small: .875rem;

  /* spacing scale: one section rhythm everywhere */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px;
  --sec: clamp(64px, 3rem + 4vw, 112px);

  /* grid */
  --m: clamp(20px, 5vw, 80px);
  --g: clamp(14px, 1.6vw, 28px);
  --max: 1560px;

  /* letterbox (wide frames are 2.39:1) */
  --bars: clamp(60px, calc((100svh - 100vw / 2.39) / 2), 24svh);
  --bar-t: var(--bars); --bar-b: var(--bars);
  --hd: 72px;
  --ease: cubic-bezier(.22, .61, .2, 1);
  color-scheme: dark;
}
@media (max-aspect-ratio: 1/1) { :root { --bar-t: 64px; --bar-b: 152px; } }
@media (max-width: 760px) { :root { --hd: 60px; --bar-t: 60px; --bar-b: 178px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--mist); font: 400 var(--fs-body)/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.12; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--dusk); color: var(--night); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--mist); color: var(--night); padding: 12px 16px; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); max-width: var(--max); margin-inline: auto; }
.wrap { padding-inline: var(--m); max-width: var(--max); margin-inline: auto; }
.sec { padding-top: var(--sec); }
.sec-b { padding-bottom: var(--sec); }
.light { background: var(--mist); color: var(--night); }
.light ::selection { background: var(--night); color: var(--mist); }
.raised { background: var(--night-2); }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--mist-dim); max-width: 38em; }
.light .lead { color: var(--moss-ink); }
.dim { color: var(--mist-dim); }
.light .dim { color: var(--moss-ink); }
.gold { color: var(--gold); }
.tnum { font-variant-numeric: tabular-nums; }
.measure { max-width: 36em; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 2px;
  font: 500 1rem/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.btn-dusk { background: var(--dusk); color: var(--night); }
.btn-dusk:hover { background: #EDBDB2; }
.btn-line { border-color: rgba(225, 231, 224, .55); color: var(--mist); background: transparent; }
.btn-line:hover { border-color: var(--mist); background: rgba(225, 231, 224, .08); }
.light .btn-line { border-color: rgba(14, 26, 20, .45); color: var(--night); }
.light .btn-line:hover { background: rgba(14, 26, 20, .06); border-color: var(--night); }
.btn-ink { background: var(--night); color: var(--mist); }
.btn-ink:hover { background: #1d3127; }
.arrow { width: 18px; height: 10px; flex: none; }
.tlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 500; border-bottom: 1px solid currentColor; padding-top: 4px; }
.tlink .arrow { transition: transform .35s var(--ease); }
.tlink:hover .arrow { transform: translateX(5px); }

/* ---------------------------------------------------------------- header */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-t); display: flex; align-items: center; gap: var(--s3);
  padding-inline: var(--m); transition: background .45s, border-color .45s, height .45s var(--ease); border-bottom: 1px solid transparent; }
.hd.solid { height: var(--hd); background: rgba(10, 19, 14, .94); border-color: var(--rule); }
@supports (backdrop-filter: blur(8px)) { .hd.solid { background: rgba(10, 19, 14, .82); backdrop-filter: blur(10px); } }
.hd.open { height: var(--hd); background: transparent; border-color: transparent; backdrop-filter: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 400 1.5rem/1 var(--serif); letter-spacing: -.005em; min-height: 44px; }
.brand svg { width: 30px; height: 30px; color: var(--gold); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(18px, 2.4vw, 40px); list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 450; position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.hd-cta { min-height: 44px; padding: 0 18px; }
.menu-btn { display: none; margin-left: auto; min-height: 44px; min-width: 64px; padding: 0 14px; background: transparent; border: 1px solid rgba(225, 231, 224, .5); border-radius: 2px; cursor: pointer; }

.menu { position: fixed; inset: 0; z-index: 49; background: var(--bar); display: grid; grid-template-rows: var(--hd) 1fr auto; padding: 0 var(--m) 96px; }
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; align-self: center; display: grid; gap: 4px; text-align: center; }
.menu li a { display: block; padding: 8px 0; font: 400 clamp(2.4rem, 11vw, 3.4rem)/1.1 var(--serif); text-decoration: none; }
.menu li a[aria-current="page"] { color: var(--gold); }
.menu .menu-foot { text-align: center; color: var(--mist-dim); font-size: var(--fs-small); }
.menu .menu-foot .btn { margin-bottom: var(--s3); }
@media (max-width: 1000px) {
  .nav, .hd-cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------------------------------------------------------------- film grain over the whole page */
.grain { position: fixed; inset: -50%; z-index: 45; pointer-events: none; background: url(grain.webp) repeat; background-size: 192px; opacity: .055; mix-blend-mode: overlay; }
.motion .grain { animation: grain 0.9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); } 50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); } 100% { transform: translate(1%, -2%); } }

/* ---------------------------------------------------------------- the film (home) */
.film { position: relative; background: var(--bar); }
.film-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--bar); }
.film-frame { position: absolute; left: 0; right: 0; top: var(--bar-t); bottom: var(--bar-b); background: #0b1510; }
.film-frame > canvas { z-index: 2; opacity: 0; transition: opacity .8s; }
.film-frame.gl-on > canvas { opacity: 1; }
.scene { position: absolute; inset: 0; margin: 0; }
.scene .im { position: absolute; inset: 0; overflow: hidden; }
.scene .im img { width: 100%; height: 100%; object-fit: cover; }
.scene + .scene .im { opacity: 0; }
.film-frame.gl-on .scene .im { visibility: hidden; }
/* subtitles sit in the bottom bar, centred, like film subtitles */
.scene .sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: var(--bar-b); width: min(44em, calc(100vw - 2 * var(--m) - 22em));
  display: flex; align-items: center; justify-content: center; margin: 0; text-align: center; font-size: var(--fs-sub); line-height: 1.42; color: #F2F5F1; text-wrap: balance; z-index: 5; }
.scene + .scene .sub { opacity: 0; }
.film-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 58% 60% at 50% 54%, rgba(7, 14, 10, .46), rgba(7, 14, 10, .06) 80%), linear-gradient(to top, rgba(7, 14, 10, .3), transparent 40%); }
.film-title { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; text-align: center; padding: var(--s3) var(--m); }
.film-title h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -.018em; max-width: 13.5em; text-shadow: 0 2px 34px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .25); }
.film-title p { margin: var(--s3) 0 0; max-width: 40em; font-size: var(--fs-lead); line-height: 1.5; color: #EEF2ED; text-shadow: 0 1px 16px rgba(0, 0, 0, .5); }
.film-title .acts { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; align-items: center; margin-top: var(--s4); }
.film-title .tlink { color: var(--mist); }
/* scene counter: bottom right (the bottom left belongs to the Smart Build pill) */
.film .counter { position: absolute; right: var(--m); bottom: 0; height: var(--bar-b); z-index: 5; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; font-size: var(--fs-small); line-height: 1.5; color: var(--mist-dim); }
.film .counter p { margin: 0; }
.counter b { font-weight: 500; color: var(--mist); }
.counter .ct { display: block; }
.counter .tc { display: block; color: var(--gold); font-variant-numeric: tabular-nums; }
.reel { display: flex; gap: 4px; justify-content: flex-end; margin-top: 10px; }
.reel i { display: block; width: 28px; height: 2px; background: rgba(225, 231, 224, .22); position: relative; overflow: hidden; }
.reel i::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* static film (no JS, reduced motion): the first scene is the hero, the rest are stills with their subtitles */
html:not(.motion) .film-stage { height: auto; overflow: visible; padding-bottom: var(--s5); }
html:not(.motion) .film-frame { position: static; background: none; }
html:not(.motion) .scene { position: relative; inset: auto; }
html:not(.motion) .scene .im { opacity: 1; }
html:not(.motion) .scene:first-child { height: 100vh; height: 100svh; }
html:not(.motion) .scene:first-child .im { top: var(--bar-t); bottom: var(--bar-b); }
html:not(.motion) .scene:first-child .sub { top: auto; bottom: 0; }
html:not(.motion) .scene:not(:first-child) { margin: var(--s5) var(--m) 0; }
html:not(.motion) .scene:not(:first-child) .im { position: relative; aspect-ratio: 2.39; }
html:not(.motion) .scene:not(:first-child) .sub { position: static; transform: none; width: auto; height: auto; opacity: 1; display: block; text-align: left; margin-top: 12px; font-size: var(--fs-body); color: var(--mist-dim); }
.scene .sn { display: none; }
html:not(.motion) .scene .sn { display: inline; color: var(--gold); }
html:not(.motion) .scene:first-child .sub { display: block; padding-top: calc(var(--bar-b) / 2 - 1.5em); left: var(--m); right: var(--m); width: auto; transform: none; }
html:not(.motion) .film-shade, html:not(.motion) .film-title { top: var(--bar-t); bottom: auto; height: calc(100svh - var(--bar-t) - var(--bar-b)); }
html:not(.motion) .film .counter { display: none; }
@media (max-aspect-ratio: 1/1) { html:not(.motion) .scene:not(:first-child) .im { aspect-ratio: 4 / 5; } }

/* ---------------------------------------------------------------- stills (every photo is a frame with a numbered caption) */
.still { margin: 0; }
.still .f { position: relative; overflow: hidden; background: #0b1510; }
.still .f img { width: 100%; height: 100%; object-fit: cover; }
.still figcaption { margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--mist-dim); max-width: 46em; }
.light .still figcaption { color: var(--moss-ink); }
.still figcaption b { font-weight: 500; color: var(--mist); margin-right: .4em; }
.light .still figcaption b { color: var(--night); }
.r-wide .f { aspect-ratio: 2.39; }
.r-16 .f { aspect-ratio: 16 / 9; }
.r-32 .f { aspect-ratio: 3 / 2; }
.r-45 .f { aspect-ratio: 4 / 5; }
.r-23 .f { aspect-ratio: 2 / 3; }
.sbgl-on img { opacity: 0; }

/* title card over a wide frame (inner page heroes and villa blocks) */
.card { position: relative; background: var(--bar); padding: var(--bar-t) 0 0; }
.card .f { position: relative; height: calc(100svh - var(--bar-t) - var(--bar-b)); min-height: 360px; overflow: hidden; }
.card .f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .shade { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse 72% 80% at 50% 50%, rgba(7, 14, 10, .48), rgba(7, 14, 10, .1) 80%); }
.card .t { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; text-align: center; padding: var(--s3) var(--m); }
.card h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -.018em; max-width: 14em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.card .t p { margin: var(--s3) 0 0; max-width: 38em; font-size: var(--fs-lead); line-height: 1.5; color: #EEF2ED; text-shadow: 0 1px 16px rgba(0, 0, 0, .5); }
.card .t .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; margin-top: var(--s4); }
.card .bar { min-height: var(--bar-b); display: grid; grid-template-columns: 1fr minmax(0, 44em) 1fr; align-items: center; padding: 14px var(--m); }
.card .bar .sub { grid-column: 2; margin: 0; text-align: center; font-size: var(--fs-sub); line-height: 1.42; color: #F2F5F1; text-wrap: balance; }
.card .bar .counter { grid-column: 3; justify-self: end; margin: 0; font-size: var(--fs-small); color: var(--mist-dim); }
.card.short .f { height: min(62svh, calc(100vw / 2.39)); }

/* ---------------------------------------------------------------- home: intro */
.intro .still { grid-column: 1 / span 5; }
.intro .txt { grid-column: 7 / span 6; align-self: center; }
.intro h2 { margin-bottom: var(--s4); }
.facts { margin: var(--s4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: 9.5em 1fr; gap: var(--g); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts li span:first-child { color: var(--gold); }
.facts li span:last-child { color: var(--mist-dim); }

/* home: the villa monitor */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; margin-bottom: var(--s5); }
.sec-head h2 { grid-column: 1 / span 7; }
.sec-head .lead { grid-column: 8 / span 5; margin: 0; }
.sec-head.center { display: block; text-align: center; max-width: 52rem; margin-inline: auto; }
.sec-head.center .lead { margin: var(--s3) auto 0; }
.monitor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.mon-screen { grid-column: 1 / span 7; position: sticky; top: calc(var(--hd) + 32px); }
.mon-screen .f { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1510; }
.mon-screen .f > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.mon-screen .f > img.on { opacity: 1; }
.mon-screen .f > canvas { z-index: 2; }
.mon-screen.gl-on .f > img { opacity: 0 !important; }
.mon-cap { display: flex; justify-content: space-between; gap: var(--g); margin-top: 12px; font-size: var(--fs-small); color: var(--mist-dim); }
.mon-list { grid-column: 9 / span 4; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.mon-list li { border-bottom: 1px solid var(--rule); }
.mon-list a { display: block; padding: 22px 0 22px; text-decoration: none; position: relative; }
.mon-list .nm { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 400 var(--fs-h3)/1.1 var(--serif); }
.mon-list .nm small { font: 400 var(--fs-small)/1 var(--sans); color: var(--mist-dim); white-space: nowrap; }
.mon-list .sp { display: block; margin-top: 8px; color: var(--mist-dim); font-size: .95rem; }
.mon-list .pr { display: block; margin-top: 6px; color: var(--gold); font-size: .95rem; }
.mon-list .thumb { display: none; }
.mon-list a::before { content: ''; position: absolute; left: -22px; top: 32px; width: 8px; height: 8px; border-radius: 50%; background: var(--dusk); transform: scale(0); transition: transform .4s var(--ease); }
.mon-list a.on::before, .mon-list a:hover::before, .mon-list a:focus-visible::before { transform: scale(1); }
.mon-more { margin-top: var(--s4); }

/* home: video from above */
.aerial { position: relative; }
.aerial .f { position: relative; aspect-ratio: 2.39; overflow: hidden; background: #0b1510; }
.aerial video, .aerial .f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.05) brightness(.92); }
.vid-btn { position: absolute; right: var(--m); bottom: 16px; z-index: 7; min-height: 44px; padding: 0 16px; background: rgba(7, 14, 10, .62); border: 1px solid rgba(225, 231, 224, .4); border-radius: 2px; cursor: pointer; font-size: var(--fs-small); }
.vid-btn:hover { background: rgba(7, 14, 10, .85); }
.aerial-bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: var(--s4) var(--m) 0; max-width: var(--max); margin-inline: auto; align-items: start; }
.aerial-bar h2 { grid-column: 1 / span 5; }
.aerial-bar p { grid-column: 7 / span 6; color: var(--mist-dim); margin: 0; }

/* home: programme (light) */
.prog { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-ink); }
.prog li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 20px 0; border-bottom: 1px solid var(--rule-ink); align-items: center; }
.prog .pf { grid-column: 1 / span 3; aspect-ratio: 2.39; overflow: hidden; background: #c9d1c8; }
.prog .pf img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.prog li:hover .pf img { transform: scale(1.05); }
.prog h3 { grid-column: 4 / span 4; font-size: clamp(1.45rem, 1.1rem + 1vw, 2.1rem); }
.prog h3 a { text-decoration: none; }
.prog h3 a::after { content: ''; position: absolute; inset: 0; }
.prog li { position: relative; }
.prog .when { grid-column: 8 / span 3; color: var(--moss-ink); }
.prog .price { grid-column: 11 / span 2; text-align: right; font-weight: 500; }

/* home: journal teaser */
.posts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--s5); }
.post-card { grid-column: span 4; position: relative; }
.post-card h3 { font-size: clamp(1.45rem, 1.15rem + .9vw, 2rem); margin: 18px 0 10px; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a::after { content: ''; position: absolute; inset: 0; }
.post-card p { color: var(--mist-dim); margin: 0; }
.post-card .date { display: block; margin-top: 14px; font-size: var(--fs-small); color: var(--gold); }

/* end card */
.card.endcard { padding-top: 0; margin-top: var(--sec); }
.endcard .bar { min-height: 0; padding-block: 22px; }
.endcard .f { aspect-ratio: auto; height: min(78svh, calc(100vw / 2.39 + 120px)); min-height: 420px; }
.endcard .t h2 { font-size: var(--fs-h2); max-width: 14em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }

/* ---------------------------------------------------------------- footer as end credits */
.ft { background: var(--bar); padding: var(--s5) var(--m) 96px; text-align: center; border-top: 1px solid rgba(201, 178, 107, .22); }
.endcard + .ft, main:has(> .endcard:last-child) + .ft { border-top: 0; }
.ft-brand { font: 400 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--serif); margin: 0 0 14px; }
.ft-line { color: var(--mist-dim); max-width: 32em; margin: 0 auto var(--s4); }
.credits { margin: 0 auto; max-width: 760px; display: grid; gap: 10px; }
.credits div { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; }
.credits dt { text-align: right; color: var(--mist-dim); }
.credits dd { margin: 0; }
.credits a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.ft-nav { margin: var(--s4) auto 0; }
.ft-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
.ft-nav a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font: 400 1.25rem/1 var(--serif); }
.ft-cred { margin: var(--s4) auto 0; max-width: 46em; font-size: var(--fs-small); color: var(--mist-dim); }
.ft-cred summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: .25em; }
.ft-cred p { margin: 10px 0 0; }

/* ---------------------------------------------------------------- villas page */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.cmp { width: 100%; border-collapse: collapse; min-width: 880px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 15px 18px 15px 0; border-bottom: 1px solid var(--rule-ink); }
.cmp thead th { font: 400 clamp(1.4rem, 1.1rem + .8vw, 1.9rem)/1.1 var(--serif); padding-bottom: 18px; border-bottom: 1px solid var(--night); vertical-align: bottom; }
.cmp thead th small { display: block; font: 400 var(--fs-small)/1.4 var(--sans); color: var(--moss-ink); margin-top: 6px; }
.cmp tbody th { font-weight: 500; width: 15%; color: var(--moss-ink); }
.cmp td { width: 21.25%; }
.cmp tr.price td { font-weight: 600; }
.cmp-note { margin-top: var(--s3); color: var(--moss-ink); font-size: var(--fs-small); }
.swipe { display: none; }

.villa { padding-top: var(--sec); }
.villa .card { padding-top: 0; }
.villa .card .f { height: auto; aspect-ratio: 2.39; min-height: 300px; }
.villa .card .shade { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(7, 14, 10, .6), rgba(7, 14, 10, .18) 85%); }
.villa .card .bar, .endcard .bar { min-height: 0; padding-block: 26px; }
.villa .card h2 { font-size: var(--fs-display); line-height: 1; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.villa-body { padding-top: var(--s5); align-items: start; }
.villa-body .txt { grid-column: 1 / span 4; }
.villa-body .txt p { color: var(--mist-dim); }
.villa-body dl { margin: var(--s3) 0 var(--s4); border-top: 1px solid var(--rule); }
.villa-body dl div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.villa-body dt { color: var(--gold); }
.villa-body dd { margin: 0; }
.villa-body .s1 { grid-column: 6 / span 3; }
.villa-body .s2 { grid-column: 9 / span 4; margin-top: var(--s5); }
.incl { columns: 2; column-gap: var(--g); list-style: none; padding: 0; margin: 0; }
.incl li { break-inside: avoid; padding: 12px 0; border-top: 1px solid var(--rule-ink); }

/* ---------------------------------------------------------------- experiences page */
.filters { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 0 var(--s4); padding: 0; list-style: none; }
.filters button { background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; font-size: 1.05rem; color: var(--mist-dim); border-bottom: 1px solid transparent; }
.filters button[aria-pressed="true"] { color: var(--mist); border-color: var(--gold); }
.xp-list { display: grid; gap: var(--sec); }
.xp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; }
.xp[hidden] { display: none; }
.xp .still { grid-column: 1 / span 7; }
.xp .txt { grid-column: 9 / span 4; }
.xp.flip .still { grid-column: 6 / span 7; order: 2; }
.xp.flip .txt { grid-column: 1 / span 4; order: 1; }
.xp h2 { font-size: var(--fs-h3); margin-bottom: var(--s3); line-height: 1.08; }
.xp .txt > p { color: var(--mist-dim); }
.xp dl { margin: var(--s3) 0; border-top: 1px solid var(--rule); }
.xp dl div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.xp dt { color: var(--gold); }
.xp dd { margin: 0; }
.howbook { grid-column: 3 / span 8; text-align: center; }
.howbook p { color: var(--moss-ink); margin-inline: auto; }

/* ---------------------------------------------------------------- journal page */
.j-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); grid-column: 1 / span 12; }
.j-index li { border-bottom: 1px solid var(--rule); }
.j-index a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 18px 0; text-decoration: none; align-items: baseline; }
.j-index .n { grid-column: 1 / span 1; color: var(--gold); }
.j-index .tt { grid-column: 2 / span 7; font: 400 clamp(1.35rem, 1.1rem + .9vw, 2rem)/1.15 var(--serif); }
.j-index .d { grid-column: 10 / span 3; text-align: right; color: var(--mist-dim); font-size: var(--fs-small); }
.j-index a:hover .tt { color: var(--dusk); }
.post { padding-top: var(--sec); scroll-margin-top: var(--hd); }
.post .still { grid-column: 1 / span 12; }
.post .head { grid-column: 3 / span 8; text-align: center; margin-top: var(--s5); }
.post .head .d { color: var(--gold); margin-bottom: var(--s3); }
.post .head h2 { font-size: var(--fs-h2); }
.post .body { grid-column: 4 / span 6; margin-top: var(--s4); font-size: 1.08rem; }
.post .body p { color: #CFD6CE; }
.post .body p:first-child::first-letter { font-family: var(--serif); float: left; font-size: 3.5em; line-height: .84; padding: 7px 5px 0 0; margin-left: -2px; color: var(--gold); }

/* ---------------------------------------------------------------- plan page */
.getting { align-items: start; }
.getting .txt { grid-column: 1 / span 5; }
.getting .map { grid-column: 7 / span 6; }
.routes { list-style: none; padding: 0; margin: var(--s4) 0 0; border-top: 1px solid var(--rule); }
.routes li { display: grid; grid-template-columns: 1fr auto; gap: var(--g); padding: 12px 0; border-bottom: 1px solid var(--rule); }
.routes li span:last-child { color: var(--gold); }
.map svg { width: 100%; height: auto; overflow: visible; }
.map figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--mist-dim); }
.map .land { fill: #15261C; }
.map .sea { fill: #0A1510; }
.map .coast { fill: none; stroke: rgba(225, 231, 224, .4); stroke-width: 1.2; }
.map .route { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; opacity: .85; }
.map .place circle { fill: var(--mist); }
.map .place text, .map .lbl { fill: var(--mist); font: 500 15px var(--sans); }
.map .lbl { fill: var(--mist-dim); }
.map .time { fill: var(--gold); font: 600 14px var(--sans); }
.map .home circle { fill: var(--dusk); }
.map .home text { fill: var(--dusk); font: 400 22px var(--serif); }
.map .mtn { fill: none; stroke: rgba(225, 231, 224, .35); stroke-width: 1.2; }
.map .sea-lbl { fill: rgba(225, 231, 224, .45); font: italic 400 14px var(--sans); }

.faq-wrap { align-items: start; }
.faq-wrap .side { grid-column: 1 / span 4; position: sticky; top: calc(var(--hd) + 32px); }
.faq { grid-column: 6 / span 7; border-top: 1px solid var(--rule-ink); }
.faq details { border-bottom: 1px solid var(--rule-ink); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: center; min-height: 64px; padding: 14px 0; font: 400 clamp(1.25rem, 1.05rem + .6vw, 1.6rem)/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 14px; height: 14px; justify-self: end; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-4px) rotate(45deg); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: translateY(3px) rotate(225deg); }
.faq details > div { padding: 0 0 22px; color: var(--moss-ink); max-width: 40em; }
.faq details > div p:last-child { margin: 0; }

.enq { align-items: start; }
.enq .side { grid-column: 1 / span 4; }
.enq form { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px var(--g); }
.fld { display: grid; gap: 8px; grid-column: span 3; }
.fld.w2 { grid-column: span 2; }
.fld.w6 { grid-column: span 6; }
.fld label { font-weight: 500; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 50px; padding: 12px 14px; background: rgba(225, 231, 224, .04); border: 1px solid rgba(225, 231, 224, .38); border-radius: 2px; color: var(--mist); }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.fld select option { background: var(--night); }
.fld textarea { min-height: 120px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.fld .hint { font-size: var(--fs-small); color: var(--mist-dim); }
.f-act { grid-column: span 6; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.f-act p { margin: 0; font-size: var(--fs-small); color: var(--mist-dim); max-width: 30em; }
.f-done { grid-column: span 6; border-top: 1px solid var(--gold); padding-top: 18px; }
.f-done[hidden] { display: none; }
.f-done h3 { margin-bottom: 10px; }
::-webkit-calendar-picker-indicator { filter: invert(.9); }

/* ---------------------------------------------------------------- entrance motion (only with JS and motion) */
.motion.vs [data-in]:not(.in) { opacity: 0; transform: translateY(24px); }
.motion.vs [data-in].in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.motion.vs [data-hero] { opacity: 0; }
.motion .film-stage .bar-t, .motion .film-stage .bar-b { position: absolute; left: 0; right: 0; z-index: 6; background: var(--bar); pointer-events: none; }
.motion .film-stage .bar-t { top: 0; height: 50%; transform-origin: top; }
.motion .film-stage .bar-b { bottom: 0; height: 50%; transform-origin: bottom; }
html:not(.motion) .bar-t, html:not(.motion) .bar-b { display: none; }
.split-line { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }

/* ---------------------------------------------------------------- page transitions: fade through black like a cut */
@view-transition { navigation: auto; }
::view-transition { background: #030604; }
::view-transition-old(root) { animation: vs-out .34s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vs-in .6s cubic-bezier(0, 0, .2, 1) .26s both; }
@keyframes vs-out { to { opacity: 0; } }
@keyframes vs-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .grain { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1100px) {
  .intro .still { grid-column: 1 / span 6; }
  .intro .txt { grid-column: 7 / span 6; }
  .mon-screen { grid-column: 1 / span 7; }
  .mon-list { grid-column: 8 / span 5; }
  .prog h3 { grid-column: 4 / span 5; }
  .prog .when { grid-column: 9 / span 2; }
  .villa-body .txt { grid-column: 1 / span 6; }
  .villa-body .s1 { grid-column: 7 / span 6; }
  .villa-body .s2 { grid-column: 1 / span 12; margin-top: var(--s4); }
  .getting .txt, .getting .map { grid-column: 1 / span 12; }
  .getting .map { margin-top: var(--s5); }
  .faq-wrap .side, .enq .side { grid-column: 1 / span 12; position: static; margin-bottom: var(--s4); }
  .faq, .enq form { grid-column: 1 / span 12; }
  .post .head, .post .body { grid-column: 2 / span 10; }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 760px) {
  body { line-height: 1.58; }
  .brand { font-size: 1.32rem; }
  .brand svg { width: 26px; height: 26px; }
  .scene .sub { top: calc(100% + 44px); height: auto; width: calc(100vw - 2 * var(--m)); align-items: flex-start; font-size: .98rem; line-height: 1.42; }
  .film .counter { left: var(--m); right: var(--m); bottom: auto; top: calc(100% - var(--bar-b) + 14px); height: auto; display: block; text-align: left; font-size: .8rem; }
  .film .counter p { display: flex; justify-content: space-between; white-space: nowrap; }
  .counter .ct { display: none; }
  .counter .tc { display: inline; }
  .film .reel { display: none; }
  .film-title { padding-inline: 22px; }
  .film-title h1 { font-size: clamp(2.2rem, 10.4vw, 2.7rem); line-height: 1.02; }
  .film-title p { font-size: 1rem; }
  .film-title .acts { flex-direction: column; gap: 6px; margin-top: var(--s3); }
  .card .bar { display: block; padding: 16px var(--m) 20px; }
  .card .bar .counter { display: none; }
  .card .bar .sub { font-size: .98rem; }
  .card .t h1 { font-size: clamp(2.2rem, 10.4vw, 2.7rem); line-height: 1.02; }
  .card .t p { font-size: 1rem; }
  .card .t .acts { flex-direction: column; gap: 6px; margin-top: var(--s3); }
  .card.short .f { height: 58svh; }

  .intro .still, .intro .txt { grid-column: 1 / -1; }
  .intro .txt { margin-top: var(--s5); }
  .intro .still .f { aspect-ratio: 4 / 5; }
  .facts li { grid-template-columns: 1fr; gap: 2px; }
  .sec-head h2, .sec-head .lead { grid-column: 1 / -1; }
  .sec-head .lead { margin-top: var(--s3); }
  .sec-head { margin-bottom: var(--s4); }
  .mon-screen { display: none; }
  .mon-list { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    border: 0; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); scroll-padding-inline: var(--m); padding-bottom: 8px; scrollbar-width: none; }
  .mon-list::-webkit-scrollbar { display: none; }
  .mon-list li { scroll-snap-align: start; border: 0; }
  .mon-list a { padding: 0; }
  .mon-list a::before { display: none; }
  .mon-list .thumb { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 14px; background: #0b1510; }
  .mon-list .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .mon-list .nm { font-size: 1.6rem; }
  .aerial .f { aspect-ratio: 4 / 5; }
  .aerial-bar { display: block; }
  .aerial-bar p { margin-top: var(--s3); }
  .prog li { grid-template-columns: 34% 1fr; row-gap: 4px; padding: 16px 0; align-items: start; }
  .prog .pf { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 1; }
  .prog h3, .prog .when, .prog .price { grid-column: 2; text-align: left; }
  .prog h3 { font-size: 1.3rem; }
  .prog .when, .prog .price { font-size: .92rem; }
  .post-card { grid-column: 1 / -1; }
  .endcard .f { height: 70svh; min-height: 0; }

  .ft { padding-bottom: 104px; }
  .credits div { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .credits dt { text-align: center; font-size: var(--fs-small); }
  .credits { gap: 16px; }

  .swipe { display: block; font-size: var(--fs-small); color: var(--moss-ink); margin: 0 0 12px; }
  .cmp { min-width: 720px; }
  .cmp tbody th { position: sticky; left: 0; background: var(--mist); z-index: 1; width: 110px; padding-right: 12px; }
  .cmp thead th:first-child { position: sticky; left: 0; background: var(--mist); z-index: 1; }
  .villa .card .f { aspect-ratio: 4 / 5; }
  .villa-body .txt, .villa-body .s1, .villa-body .s2 { grid-column: 1 / -1; }
  .villa-body .s1 { margin-top: var(--s4); }
  .incl { columns: 1; }

  .xp .still, .xp .txt, .xp.flip .still, .xp.flip .txt { grid-column: 1 / -1; order: 0; }
  .xp .txt { margin-top: var(--s3); }
  .xp-list { gap: var(--s5); }
  .howbook { grid-column: 1 / -1; }

  .j-index a { grid-template-columns: 2em 1fr; row-gap: 4px; }
  .j-index .n { grid-column: 1; }
  .j-index .tt, .j-index .d { grid-column: 2; text-align: left; }
  .post .head, .post .body { grid-column: 1 / -1; }
  .post .still .f { aspect-ratio: 4 / 5; }

  .fld, .fld.w2 { grid-column: span 6; }
  .fld.half { grid-column: span 3; }
  .faq summary { font-size: 1.22rem; }
  .map .place text, .map .lbl { font-size: 21px; }
  .map .time { font-size: 20px; }
  .map .home text { font-size: 28px; }
  .map .sea-lbl { font-size: 19px; }
  .card .bar { min-height: 0; }
  .card.hero .f { height: calc(100svh - var(--bar-t) - 136px); min-height: 440px; }
  .card.hero .bar { min-height: 136px; padding-top: 18px; align-items: start; }
}