/*
  Sanctorum website. Redesigned 2026-10-06 after the Google review poster:
  stepped giant titles in Instrument Serif, outlined numerals, hard gold shadow
  blocks, ink tag labels, one outlined type marquee. Cream ground by Thupden's
  choice (dark read as sombre). Colours are the design system's Cream Light,
  Ink, Antique Gold, Gold Deep and Muted Brown. No sans, no new colours.
*/

@font-face { font-family: 'Arapey'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/arapey-regular.woff2') format('woff2'); }
@font-face { font-family: 'Arapey'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/arapey-italic.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/instrument-regular.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/instrument-italic.woff2') format('woff2'); }

:root {
  /* Names kept from the earlier builds so the markup needs no change: --espresso is the page, --cream the text. */
  --espresso: #F4E5C8;
  --espresso-deep: #F4E5C8;
  --panel: #FBF3E2;
  --hairline: #C9B48A;
  --cream: #0C0804;
  --cream-dim: #5A4630;
  --gold: #9E7840;
  --gold-mid: #9E7840;
  --gold-deep: #584018;
  --ink: #0C0804;
  --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --body: 'Arapey', Georgia, 'Times New Roman', serif;
  --gutter: clamp(18px, 5vw, 80px);
  --measure: 1360px;
  --shadow: clamp(8px, 1.2vw, 16px);
  color-scheme: only light;
}

/* Over photographs and in the photo viewer, text stays cream on a dark scrim */
.band, #lb {
  --espresso: #181009; --espresso-deep: #0C0804; --panel: #221510; --hairline: #3A2A1B;
  --cream: #F0E4C8; --cream-dim: #CDBB97; --gold: #C9A874; --gold-mid: #9E7840; --gold-deep: #6B5232;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--espresso);
  color: var(--cream);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

/* Type */
.kicker {
  display: inline-block;
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--espresso);
  background: var(--ink);
  padding: 7px 11px 6px;
  line-height: 1;
}
.band .kicker { background: var(--gold); color: #0C0804; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--cream); letter-spacing: -0.02em; }
h1 { font-size: clamp(60px, 12vw, 176px); line-height: 0.88; }
h2 { font-size: clamp(46px, 7.4vw, 112px); line-height: 0.92; }
h3 { font-size: clamp(36px, 4.2vw, 60px); line-height: 0.98; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold); }
p { color: var(--cream-dim); }
p + p { margin-top: 0.9em; }
.lead { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; max-width: 30em; }
.note { font-style: italic; font-size: 16px; color: var(--cream-dim); }

/* Top bar */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--espresso);
  border-bottom: 1px solid var(--ink);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand .mark { width: 30px; height: 32px; object-fit: contain; }
.brand .word { font-family: var(--display); font-size: 20px; letter-spacing: 0.3em; color: var(--cream); }
.top nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.top nav a {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream-dim); text-decoration: none; white-space: nowrap; padding: 6px 0;
}
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--cream); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--gold); }
.top nav a.wa { color: var(--espresso); background: var(--ink); padding: 9px 16px; box-shadow: 4px 4px 0 var(--gold); }
.top nav a.wa:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--gold); }

/* Actions: ink block with a gold shadow, or an ink outline */
.act {
  display: inline-block; font-family: var(--display); font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; padding: 16px 26px; border: 1px solid var(--ink); color: var(--espresso); background: var(--ink);
  box-shadow: 6px 6px 0 var(--gold); transition: transform 0.15s, box-shadow 0.15s;
}
.act:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--gold); }
.act.line { background: none; color: var(--cream); box-shadow: none; }
.act.line:hover { background: var(--ink); color: var(--espresso); box-shadow: 6px 6px 0 var(--gold); }
.more {
  font-family: var(--display); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 4px;
}
.more:hover { color: var(--gold); border-color: var(--ink); }

/* Hero: stepped title over a tilted photo block */
.hero { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.hero .rail {
  position: absolute; left: calc(var(--gutter) * 0.35); bottom: clamp(40px, 5vw, 72px);
  transform-origin: left bottom; transform: rotate(-90deg); white-space: nowrap;
  font-family: var(--display); font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep);
}
.hero .rail b { font-weight: 400; color: var(--cream); }
.hero::after {
  content: ""; position: absolute; left: -5%; right: -5%; top: 52%; height: 1.5px; background: var(--ink);
  transform: rotate(-4deg); pointer-events: none; z-index: 3;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.stack { grid-column: 1 / 10; grid-row: 1; position: relative; z-index: 2; display: flex; flex-direction: column; font-size: clamp(64px, 13.5vw, 212px); line-height: 0.82; }
.stack .w { display: block; white-space: nowrap; }
.stack .w2 { margin-left: 0.55em; }
.stack .w4 { margin-left: 0.3em; }
.stack em { font-style: italic; color: var(--gold); }
.hero-shot {
  grid-column: 7 / 13; grid-row: 1; align-self: start; margin-top: 0.42em; margin-right: var(--shadow);
  position: relative; z-index: 1; transform-origin: center;
  background: #fff; padding: clamp(8px, 1vw, 14px); box-shadow: var(--shadow) var(--shadow) 0 0 var(--gold);
}
.hero-shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.hero-shot .tag { position: absolute; left: -10px; top: -14px; }
.hero .lead { grid-column: 1 / 7; margin-top: clamp(28px, 4vw, 56px); color: var(--cream); }
.hero .acts { grid-column: 1 / 13; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 18px; }
.hero .facts { grid-column: 1 / 13; }

/* Facts row: gold numeral, letterspaced caption */
.facts {
  margin-top: clamp(36px, 5vw, 64px); padding-top: 22px;
  border-top: 1px solid var(--ink);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 32px;
}
.facts .n { font-family: var(--display); font-size: clamp(34px, 3.6vw, 56px); line-height: 1; color: var(--gold); letter-spacing: -0.02em; }
.facts .l { font-family: var(--display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-dim); margin-top: 8px; }

/* Tape: a slow marquee of outlined and solid words */
.tape { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); overflow: hidden; padding: 14px 0; background: var(--espresso); }
.tape-in { display: flex; gap: 0.9em; width: max-content; animation: tape 48s linear infinite; font-family: var(--display); font-size: clamp(40px, 6vw, 92px); line-height: 1; white-space: nowrap; }
.tape-in span { color: transparent; -webkit-text-stroke: 1px var(--ink); font-style: italic; letter-spacing: -0.02em; }
.tape-in span:nth-child(even) { color: var(--gold); -webkit-text-stroke: 0; font-style: normal; }
.tape-in span::after { content: "·"; color: var(--gold); -webkit-text-stroke: 0; margin-left: 0.5em; font-style: normal; }
@keyframes tape { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape-in { animation: none; } }

/* Sections */
section { padding: clamp(72px, 10vw, 160px) 0; border-top: 1px solid var(--ink); position: relative; }
.head { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.head::before {
  content: attr(data-n); position: absolute; right: -0.04em; top: -0.62em; z-index: 0;
  font-family: var(--display); font-size: clamp(140px, 22vw, 340px); line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px var(--gold); opacity: 0.65; pointer-events: none;
}
.head > * { position: relative; z-index: 1; }
.head h2 { margin-top: 18px; max-width: 8.5em; }
.head .lead { justify-self: end; padding-bottom: 0.4em; }

/* Panels: bordered, with a hard gold shadow block */
.panel { border: 1px solid var(--ink); background: var(--panel); padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow) var(--shadow) 0 0 var(--gold); }
.panel > .kicker { margin-bottom: 10px; }
.panel > p { font-size: 17px; margin-top: 10px; max-width: 46em; }
.rows { margin-top: 10px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.rows .row:last-child { border-bottom: none; padding-bottom: 0; }
.row .what { font-family: var(--display); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; color: var(--cream); }
.row .how { display: block; font-family: var(--body); font-style: italic; font-size: 16px; line-height: 1.45; color: var(--cream-dim); margin-top: 4px; }
.row .amt { font-family: var(--display); font-size: clamp(28px, 2.8vw, 38px); line-height: 1; color: var(--gold); white-space: nowrap; text-align: right; flex-shrink: 0; }
.row .per { display: block; font-family: var(--body); font-style: italic; font-size: 15px; color: var(--cream-dim); margin-top: 6px; }

/* Short stays: rows on the left, plain answers on the right */
.stay { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.answers dt { font-family: var(--display); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); padding-top: 18px; border-top: 1px solid var(--ink); }
.answers dt:first-child { border-top: none; padding-top: 0; }
.answers dd { color: var(--cream-dim); font-size: 18px; margin: 6px 0 18px; }

/* Planner: two questions, one answer. Works without script. */
.planner fieldset { border: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.planner legend { margin-bottom: 12px; }
.planner label { font-family: var(--display); font-size: 20px; color: var(--cream); border: 1px solid var(--ink); padding: 9px 16px; cursor: pointer; background: transparent; }
.planner label:hover { background: var(--espresso); }
.planner input { position: absolute; opacity: 0; pointer-events: none; }
.planner label:has(input:checked) { color: var(--espresso); background: var(--ink); box-shadow: 4px 4px 0 var(--gold); }
.planner label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.results { border-top: 1px solid var(--ink); margin-top: 6px; }
.res { display: none; }
.res .row { border-bottom: none; padding-bottom: 6px; }
.res p { font-size: 18px; max-width: 34em; }
.res .more { display: inline-block; margin-top: 22px; }
.planner:has(#dA:checked):has(#p1:checked) .res[data-k="A1"],
.planner:has(#dA:checked):has(#p2:checked) .res[data-k="A2"],
.planner:has(#dA:checked):has(#p3:checked) .res[data-k="A3"],
.planner:has(#dB:checked):has(#p1:checked) .res[data-k="B1"],
.planner:has(#dB:checked):has(#p2:checked) .res[data-k="B2"],
.planner:has(#dB:checked):has(#p3:checked) .res[data-k="B3"],
.planner:has(#dC:checked):has(#p1:checked) .res[data-k="C1"],
.planner:has(#dC:checked):has(#p2:checked) .res[data-k="C2"],
.planner:has(#dC:checked):has(#p3:checked) .res[data-k="C3"],
.planner:has(#dD:checked):has(#p1:checked) .res[data-k="D1"],
.planner:has(#dD:checked):has(#p2:checked) .res[data-k="D2"],
.planner:has(#dD:checked):has(#p3:checked) .res[data-k="D3"] { display: block; }

/* Offshoots map */
.mapbox { border: 1px solid var(--ink); background: var(--panel); padding: clamp(8px, 2vw, 24px); box-shadow: var(--shadow) var(--shadow) 0 0 var(--gold); }
.offshoots { display: block; width: 100%; height: auto; }
.offshoots .ring { fill: none; stroke: var(--hairline); stroke-width: 1; }
.offshoots line.stay { stroke: var(--ink); stroke-width: 1.2; }
.offshoots line.trip { stroke: var(--gold-deep); stroke-width: 1.2; stroke-dasharray: 4 5; }
.offshoots .dot.stay { fill: var(--gold); }
.offshoots .dot.trip { fill: var(--panel); stroke: var(--ink); stroke-width: 1.4; }
.offshoots .home { fill: var(--cream); }
.offshoots text { font-family: var(--display); fill: var(--cream); }
.offshoots .pl { font-size: 22px; }
.offshoots .km { fill: var(--gold); font-style: italic; }
.offshoots .hl { font-size: 15px; letter-spacing: 0.3em; }
.offshoots .rl { font-size: 13px; letter-spacing: 0.14em; fill: #8C7450; text-transform: uppercase; }
.places .row:first-child { padding-top: 0; }

/* Rate card folds away */
.ratecard summary { list-style: none; cursor: pointer; display: block; width: max-content; max-width: 100%; padding: 6px 0; margin: -6px 0; -webkit-tap-highlight-color: transparent; }
.ratecard summary::-webkit-details-marker { display: none; }
.ratecard[open] summary { margin-bottom: clamp(28px, 4vw, 48px); }
.ratecard[open] summary .more { color: var(--cream-dim); }

/* Rooms: lead photo beside text, then a strip of captioned photos */
.room + .room { margin-top: clamp(72px, 10vw, 160px); padding-top: clamp(72px, 10vw, 160px); border-top: 1px solid var(--ink); }
.room-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.room.flip .room-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.room.flip .shotcol { order: 2; }
.room .num { display: block; font-family: var(--display); font-size: clamp(110px, 13vw, 200px); line-height: 0.8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--gold); margin-bottom: -0.3em; margin-left: -0.04em; }
.room h3 { margin-top: 10px; position: relative; }
.room .copy { margin-top: 18px; font-size: 18px; }
.room .facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px 36px; margin-top: 26px; padding-top: 18px; }
.room .facts .n { font-size: clamp(26px, 2.4vw, 36px); }
.room .more { display: inline-block; margin-top: 28px; }
.shot { position: relative; background: #fff; padding: clamp(8px, 1vw, 14px); box-shadow: var(--shadow) var(--shadow) 0 0 var(--gold); margin-right: var(--shadow); margin-bottom: var(--shadow); }
.shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.shot.tall img { aspect-ratio: 4 / 5; }
.shot.tall { transform: rotate(-2deg); }
figure.g { margin-right: var(--shadow); margin-bottom: var(--shadow); }
figure.g button { display: block; width: 100%; padding: clamp(6px, 0.8vw, 10px); border: 0; background: #fff; cursor: zoom-in; overflow: visible; box-shadow: var(--shadow) var(--shadow) 0 0 var(--gold); transition: transform 0.2s, box-shadow 0.2s; }
figure.g img { aspect-ratio: 4 / 3; object-fit: cover; }
figure.g.tall img { aspect-ratio: 4 / 5; }
figure.g button:hover { transform: translate(-3px, -3px); box-shadow: calc(var(--shadow) + 3px) calc(var(--shadow) + 3px) 0 0 var(--gold); }
figure.g figcaption { margin-top: 18px; font-size: 16px; line-height: 1.5; color: var(--cream-dim); }
figure.g figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--cream); margin-bottom: 2px; }
.room-top .shotcol figure.g:nth-child(1) { transform: rotate(-1.5deg); }
.room.flip .room-top .shotcol figure.g:nth-child(1) { transform: rotate(1.5deg); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.pair figure.g:nth-child(1) { transform: rotate(-2deg); }
.pair figure.g:nth-child(2) { transform: rotate(2deg) translateY(8%); }
.strip { margin-top: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.strip figure.g:nth-child(even) { margin-top: clamp(16px, 3vw, 48px); }

/* Photo viewer */
#lb { margin: auto; padding: 0; border: 0; background: transparent; color: var(--cream); max-width: min(1100px, 94vw); width: 100%; }
#lb::backdrop { background: rgba(12, 8, 4, 0.94); }
#lb img { width: 100%; height: 64vh; object-fit: contain; border-top: 2px solid var(--gold); background: var(--espresso-deep); }
#lb button { font-family: var(--display); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); background: none; border: 1px solid var(--gold-mid); padding: 9px 16px; cursor: pointer; }
#lb button:hover { color: var(--cream); border-color: var(--cream); }
#lb .lb-x { display: block; margin: 0 0 12px auto; }
#lb .lb-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 14px; }
#lb p { flex: 1; text-align: center; font-size: 17px; color: var(--cream-dim); }
#lb p b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--cream); }
#lb p span { display: block; margin-top: 6px; font-family: var(--display); font-size: 12px; letter-spacing: 0.22em; color: var(--gold); }

/* Rate card */
.card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px); align-items: start; }
.card .wide { grid-column: 1 / -1; }
table.ladder { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 17px; }
table.ladder th {
  font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream-dim); text-align: right; padding: 0 0 10px 12px; border-bottom: 1px solid var(--ink);
}
table.ladder th:first-child, table.ladder td:first-child { text-align: left; padding-left: 0; }
table.ladder td { text-align: right; padding: 12px 0 12px 12px; border-bottom: 1px solid var(--hairline); color: var(--cream-dim); white-space: nowrap; }
table.ladder tr:last-child td { border-bottom: none; padding-bottom: 0; }
table.ladder td:first-child { font-family: var(--display); font-size: 21px; color: var(--cream); }
table.ladder td.total { font-family: var(--display); font-size: 24px; color: var(--gold); }
.terms { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(32px, 6vw, 96px); }
.terms p { font-size: 17px; margin: 0; }
.terms strong { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--cream); display: block; margin-bottom: 6px; }

/* Virtual office */
.vo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.incl li { padding: 16px 0; border-bottom: 1px solid var(--hairline); color: var(--cream-dim); font-size: 17px; }
.incl li:last-child { border-bottom: none; }
.incl b { display: block; font-family: var(--display); font-weight: 400; font-size: 23px; color: var(--cream); }
.price-line { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.price-line .amt { font-family: var(--display); font-size: clamp(48px, 6vw, 84px); line-height: 1; color: var(--gold); letter-spacing: -0.02em; }
.price-line .per { font-style: italic; font-size: 16px; color: var(--cream-dim); }

/* Reviews: staggered, with a giant gold opening quote */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px) clamp(32px, 6vw, 96px); align-items: start; }
.quotes figure { position: relative; padding: 36px 0 0; border-top: 1px solid var(--ink); }
.quotes figure:nth-child(even) { margin-top: clamp(40px, 8vw, 140px); }
.quotes figure::before { content: "“"; position: absolute; right: 0; top: -0.1em; font-family: var(--display); font-size: clamp(120px, 12vw, 200px); line-height: 1; color: var(--gold); opacity: 0.9; }
.quotes blockquote { position: relative; text-wrap: pretty; font-family: var(--display); font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -0.01em; color: var(--cream); max-width: 14em; }
.quotes figcaption { margin-top: 18px; font-family: var(--display); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); }
.rev-cta { margin-top: clamp(40px, 6vw, 80px); display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; }
.rev-cta .note { max-width: 24em; }

/* Visit */
.visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: stretch; }
.visit .map { border: 1px solid var(--ink); background: #fff; padding: clamp(8px, 1vw, 14px); min-height: 420px; box-shadow: var(--shadow) var(--shadow) 0 0 var(--gold); transform: rotate(1.5deg); margin-right: var(--shadow); }
.visit iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; filter: grayscale(0.4) sepia(0.2); }
.visit a { text-decoration-color: var(--gold); text-underline-offset: 4px; }
.visit a:hover { color: var(--gold); }

/* Prose (about page) */
.prose { max-width: 36em; }
.prose p { font-size: 20px; line-height: 1.65; }
.prose p + p { margin-top: 1em; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split .shot { position: sticky; top: 96px; }
.years .row .amt { font-style: italic; text-align: left; min-width: 3.2em; order: -1; }
.years .row { justify-content: flex-start; }

/* Closing section and footer */
.close h2 { max-width: 10em; }
.close .acts { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 18px; }
footer { border-top: 1px solid var(--ink); background: var(--espresso); padding: 0 0 28px; font-size: 16px; overflow: hidden; }
.foot-word { font-family: var(--display); font-size: clamp(72px, 17vw, 260px); line-height: 0.82; letter-spacing: 0.02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--gold); margin: 0.08em 0 0 calc(-0.02em); padding-bottom: 0.04em; border-bottom: 1px solid var(--ink); }
footer .wrap { padding-top: clamp(40px, 5vw, 64px); }
.foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 32px clamp(32px, 6vw, 96px); }
.foot .word { font-family: var(--display); font-size: 26px; letter-spacing: 0.3em; color: var(--cream); }
.foot .tag { font-family: var(--display); font-style: italic; color: var(--gold); margin-top: 6px; font-size: 18px; }
.foot h4 { font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
.foot li, .foot p { color: var(--cream-dim); line-height: 1.9; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.ident { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; font-family: var(--display); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.ident span { color: #8C7450; }

/* Sikkim photo band */
.band { position: relative; min-height: clamp(380px, 52vw, 660px); display: flex; align-items: flex-end; overflow: hidden; border-top: 1px solid var(--ink); }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(12,8,4,0.86) 0%, rgba(12,8,4,0.4) 36%, rgba(12,8,4,0) 62%); }
.band .wrap { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: clamp(28px, 4vw, 52px); }
.band p { margin-top: 16px; font-family: var(--display); font-size: clamp(30px, 4.4vw, 64px); line-height: 0.98; letter-spacing: -0.02em; color: var(--cream); max-width: 16em; }

/* Deeper parchment for the travel block */
.light { background: #E4CFAA; --hairline: #B99E72; }
.light .offshoots .rl { fill: #6A5238; }

@media (max-width: 900px) {
  body { font-size: 18px; }
  .top .wrap { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 12px; }
  .top nav { width: calc(100% + 2 * var(--gutter)); margin: 6px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter) 14px; overflow-x: auto; gap: 22px; scrollbar-width: none; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a.wa { padding: 6px 12px; box-shadow: 3px 3px 0 var(--gold); }
  html { scroll-padding-top: 110px; }
  .hero .rail { display: none; }
  .hero::after { top: 38%; }
  .hero .wrap { display: block; }
  .stack { font-size: clamp(56px, 17vw, 120px); }
  .stack .w2 { margin-left: 0.3em; }
  .stack .w4 { margin-left: 0.15em; }
  .hero-shot { margin: 28px var(--shadow) 0 0; }
  .hero .lead { margin-top: 32px; }
  .head, .stay, .room-top, .room.flip .room-top, .vo, .visit, .split, .card, .terms, .quotes, .foot { grid-template-columns: minmax(0, 1fr); }
  .head::before { font-size: clamp(120px, 34vw, 200px); top: -0.5em; opacity: 0.5; }
  .head .lead { justify-self: start; padding-bottom: 0; }
  .room.flip .shotcol { order: 0; }
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gutter)); padding: 8px var(--gutter) var(--shadow) 4px; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip figure.g { flex: 0 0 74%; scroll-snap-align: start; margin-top: 0 !important; }
  .split .shot { position: static; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .room .facts { grid-template-columns: repeat(2, auto); }
  .quotes figure:nth-child(even) { margin-top: 0; }
  .visit .map { transform: none; }
  .pair figure.g:nth-child(2) { transform: rotate(2deg); }
}
@media (max-width: 520px) {
  .row { flex-direction: column; gap: 6px; }
  .row .amt { text-align: left; }
  .years .row { flex-direction: row; gap: 18px; }
  table.ladder { font-size: 15px; }
  table.ladder td:first-child { font-size: 18px; }
  table.ladder td.total { font-size: 19px; }
  table.ladder .opt { display: none; }
  .act { width: 100%; text-align: center; }
  .stack { font-size: clamp(52px, 17.5vw, 80px); }
  .quotes figure::before { font-size: 96px; }
}

/* ------------------------------------------------------------------ */
/* Motion. Added 2026-10-06. Gated by the `js` class on <html>, which  */
/* motion.js removes under prefers-reduced-motion.                     */
/* ------------------------------------------------------------------ */

/* Hero: words rise in sequence, the photo drops into place, the rule draws itself */
.js .stack .w { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .stack .w1 { animation-delay: 0.05s; }
.js .stack .w2 { animation-delay: 0.2s; animation-name: rise-left; }
.js .stack .w3 { animation-delay: 0.35s; }
.js .stack .w4 { animation-delay: 0.5s; animation-name: rise-right; }
.hero-shot { --tilt: -3deg; transform: rotate(var(--tilt)); }
.js .hero-shot { animation: drop 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }
.js .hero::after { transform-origin: left center; animation: draw 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s both; }
.js .hero .lead, .js .hero .acts, .js .hero .facts, .js .hero .rail { animation: fade 0.9s ease 1s both; }
.js .hero .acts { animation-delay: 1.15s; }
.js .hero .facts { animation-delay: 1.3s; }
.js .tape { animation: fade 0.9s ease 1.4s both; }
@keyframes rise { from { opacity: 0; translate: 0 0.35em; } to { opacity: 1; translate: 0 0; } }
@keyframes rise-left { from { opacity: 0; translate: -0.3em 0.2em; } to { opacity: 1; translate: 0 0; } }
@keyframes rise-right { from { opacity: 0; translate: 0.3em 0.2em; } to { opacity: 1; translate: 0 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(48px) rotate(calc(var(--tilt) - 7deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--tilt)); } }
@keyframes draw { from { transform: rotate(-4deg) scaleX(0); } to { transform: rotate(-4deg) scaleX(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Reveal on scroll. `translate` leaves the rotations in `transform` alone. */
.js [data-reveal] { opacity: 0; translate: 0 36px; transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); will-change: opacity, translate; }
.js [data-reveal="left"] { translate: -56px 24px; }
.js [data-reveal="right"] { translate: 56px 24px; }
.js [data-reveal].in { opacity: 1; translate: 0 0; will-change: auto; }
.js .head[data-reveal] { translate: 0 24px; }
.js .head[data-reveal]::before { opacity: 0; translate: 0.08em 0; transition: opacity 1.2s ease 0.2s, translate 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.js .head[data-reveal].in::before { opacity: 0.65; translate: 0 0; }

/* Scroll-linked drift where the browser supports scroll-driven animations */
@supports (animation-timeline: view()) {
  .js .head.in::before { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; opacity: 0.65; translate: none; transition: none; }
  .js .room .num { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .js .quotes figure::before { animation: drift-small linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .js .band { view-timeline: --band block; }
  .js .band > img { animation: parallax linear both; animation-timeline: --band; animation-range: cover 0% cover 100%; }
  .js footer { view-timeline: --foot block; }
  .js .foot-word { animation: slide linear both; animation-timeline: --foot; animation-range: entry 0% cover 100%; }
  .js .tape-in { animation: tape 48s linear infinite, fade 0.9s ease 1.4s both; }
}
@keyframes drift { from { transform: translateY(0.22em); } to { transform: translateY(-0.3em); } }
@keyframes drift-small { from { transform: translateY(0.15em); } to { transform: translateY(-0.25em); } }
@keyframes parallax { from { transform: translateY(-9%) scale(1.18); } to { transform: translateY(9%) scale(1.18); } }
@keyframes slide { from { transform: translateX(4%); } to { transform: translateX(-6%); } }

@media (max-width: 900px) {
  .hero-shot { --tilt: -2deg; }
  .js [data-reveal="left"], .js [data-reveal="right"] { translate: 0 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .stack .w, .js .hero-shot, .js .hero::after, .js .hero .lead, .js .hero .acts, .js .hero .facts, .js .hero .rail, .js .tape, .js .head::before, .js .room .num, .js .quotes figure::before, .js .band > img, .js .foot-word { animation: none; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
}