/* Cosy Concepts · The Hill, v2 (30 Oct 2026).
   v1 merged Astra's opening (Between Waters), the house pair from Lantern Folio and the prints, room cards, review deck
   and postcard from Kraft and Ink. v2 applies the AIBC Foundry build standard
   (aibc-foundry/knowledge/website-craft): motion tokens and the motion gate, hover only where hover exists, press
   feedback, sentence-case labels instead of tiny tracked capitals, a warmer text face than Inter, fail-safe reveals,
   one statement that lights up as it is read. Every fact and button still works without app.js. */
@font-face { font-family: "Marcellus"; src: url("assets/fonts/Marcellus-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("assets/fonts/HankenGrotesk-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --kraft: #B8935F; --ink: #14110C; --night: #0F120E; --line-d: #2A2F27;
  --sand: #E8DFD1; --paper: #F1EADF; --ivory: #F5EFE4; --card: #FBF8F2;
  --gold: #C9A15C; --gold-l: #E4C588; --bronze: #8A6A32; --brown: #3A2F1F;
  --serif: "Marcellus", Georgia, serif; --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(22px, 5vw, 88px); --hh: 92px; --body: 18px;
  /* motion: the three curves of the standard, one for long reveals, and the durations they pair with */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entering, leaving, answering a tap */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* something on screen moving: the card turning, the header shift */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* the phone booking bar */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);      /* the one-time deal of the room cards */
  --ease: var(--ease-out);
  --d-press: 160ms; --d-hover: 150ms; --d-modal: 300ms; --d-drawer: 500ms; --d-reveal: 700ms;
  --corner-shift: clamp(96px, 8vw, 160px);
}
* { box-sizing: border-box; }
/* overflow-x: clip on html (v1 had it on body only, which Chrome did not apply to the viewport: phones could pan 30 px sideways) */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: var(--hh); overflow-x: clip; }
main, .foot { overflow-x: clip; }
button, .btn, .rcard, .filters button, .turn, .x, .motion { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
body { margin: 0; background: var(--kraft) url("assets/kraft-tile.jpg") 0 0 / 420px; color: var(--ink); font: 400 var(--body)/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
p, figure, blockquote { margin: 0; }
address { font-style: normal; }
::selection { background: var(--ink); color: var(--sand); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 200; padding: 14px 18px; background: var(--ivory); color: var(--ink); }
.skip:focus { top: 12px; }
main, .foot { position: relative; z-index: 1; }
section { position: relative; }
.wrap { padding: clamp(90px, 11vw, 170px) var(--gut); position: relative; z-index: 2; }

/* A caption in the serif, set like a line written on the back of a print (v1 used tiny tracked capitals here) */
.eyebrow { font: 400 clamp(17px, 1.3vw, 19px)/1.4 var(--serif); letter-spacing: .01em; margin: 0 0 16px; }
.eyebrow.gold { color: var(--gold-l); }
.text-link { display: inline-flex; align-items: center; gap: 22px; padding: 12px 0 8px; border-bottom: 1px solid currentColor; font-size: 17px; text-decoration: none; transition: transform var(--d-press) var(--ease-out); }
.text-link > span { display: inline-block; transition: transform var(--d-hover) var(--ease-out); }
.text-link:active { transform: translateY(1px); }
.btn {
  --bg: var(--ink); --fg: var(--sand); --bg-h: #2B241A;
  display: inline-flex; align-items: center; gap: .6em; border: 0; cursor: pointer; text-decoration: none; min-height: 48px;
  background: var(--bg); color: var(--fg); padding: 14px 24px; border-radius: 3px;
  font: 600 16px/1 var(--sans); letter-spacing: .005em; white-space: nowrap;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-hover) ease, color var(--d-hover) ease;
}
.btn:active { transform: scale(.97); }
.btn .arr { display: inline-block; transition: transform var(--d-hover) var(--ease-out); }
.btn.gold { --bg: var(--gold); --fg: var(--ink); --bg-h: var(--gold-l); }
.btn:focus-visible { outline: 2px solid var(--ink); box-shadow: 0 0 0 4px var(--sand); }
.btn.ghost { --bg: transparent; --fg: currentColor; --bg-h: rgba(232, 223, 209, .1); box-shadow: inset 0 0 0 1px currentColor; }
/* Hover lives only where a mouse can hover, so a tapped button never stays "hovered" on a phone */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-color: var(--bg-h); }
  .btn:hover .arr { transform: translateX(4px); }
  .text-link:hover > span { transform: translateX(5px); }
  .text-link:hover > span.dn { transform: translateY(3px); }
  .text-link:hover > span.up { transform: translateY(-3px); }
}

/* Reveals, kept to the sections that earn them. Hidden only under .js, which the page drops again if app.js never runs. */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay: var(--d, 0s); }
.js .rv.from-left { transform: translateX(-24px); }
.js .rv.from-right { transform: translateX(24px); }
.js .rv.in { opacity: 1; transform: none; }
.grow { position: absolute; pointer-events: none; color: var(--ink); z-index: 1; }
.grow svg { width: 100%; height: 100%; overflow: visible; }
.grow .leaf { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--i) * 22ms); }
.grow .spine { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.2s var(--ease); }
.grow.in .leaf { opacity: 1; }
.grow.in .spine { stroke-dashoffset: 0; }

/* Palm shade: blurred frond shadows drifting over the kraft, fixed like a canopy overhead */
.shade { position: fixed; inset: -6%; z-index: 0; pointer-events: none; overflow: hidden; transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0); transition: transform 1.2s var(--ease); }
.shade canvas { position: absolute; opacity: var(--o, .5); transform-origin: var(--ox, 0%) var(--oy, 0%); animation: sway var(--dur, 11s) ease-in-out var(--del, 0s) infinite alternate; will-change: transform; }
@keyframes sway { from { transform: rotate(-2.4deg) translate(-12px, 0); } to { transform: rotate(2.8deg) translate(14px, 8px); } }

/* Header: clear over the opening, kraft over kraft, ink with the white logo over anything dark */
.header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hh); display: flex; align-items: center; gap: 32px; padding: 0 max(var(--gut), env(safe-area-inset-right, 0px)) 0 max(var(--gut), env(safe-area-inset-left, 0px)); color: var(--ink); transition: color 300ms ease, background-color 300ms ease, box-shadow 300ms ease; }
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kraft) url("assets/kraft-tile.jpg") 0 0 / 420px; opacity: 0; transition: opacity 300ms ease; }
.header[data-theme="kraft"]::before { opacity: 1; }
.header[data-theme="kraft"] { box-shadow: 0 1px 0 rgba(20, 17, 12, .16), 0 10px 30px -22px rgba(40, 26, 10, .6); }
.header[data-theme="dark"] { color: var(--sand); background-color: rgba(15, 18, 14, .9); box-shadow: 0 1px 0 rgba(232, 223, 209, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.brand { position: relative; display: block; width: 100px; flex: none; }
.brand img { width: 100%; transition: opacity 300ms ease; }
.brand .w { position: absolute; inset: 0; opacity: 0; }
.header[data-theme="dark"] .brand .w { opacity: 1; }
.header[data-theme="dark"] .brand .b { opacity: 0; }
.header nav { display: flex; gap: 30px; margin-left: auto; }
.header nav a { text-decoration: none; font: 500 16px/1 var(--sans); letter-spacing: .005em; padding: 12px 0; border-bottom: 1px solid transparent; opacity: .88; transition: opacity var(--d-hover) ease, border-color var(--d-hover) ease; }
/* While the corner frond is in view the nav and the button step left together; transform, so nothing re-lays out */
.header nav, .header .actions { transition: transform 450ms var(--ease-in-out); }
.header .actions { display: flex; align-items: center; gap: 22px; flex: none; }
.header.corner nav, .header.corner .actions { transform: translateX(calc(-1 * var(--corner-shift))); }
.header .btn { padding: 12px 18px; font-size: 15px; min-height: 44px; }
.header[data-theme="dark"] .btn.book { --bg: var(--gold); --fg: var(--ink); --bg-h: var(--gold-l); }
.motion { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 8px 0; min-height: 44px; font: 500 15px/1 var(--sans); cursor: pointer; opacity: .8; transition: opacity var(--d-hover) ease, transform var(--d-press) var(--ease-out); }
.motion:active { transform: translateY(1px); }
.motion[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .header nav a:hover { opacity: 1; border-bottom-color: currentColor; }
  .motion:hover { opacity: 1; }
}

/* 1. Between waters */
.hero { height: 175vh; min-height: 1150px; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; }
.contours { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); opacity: .15; pointer-events: none; z-index: 0; }
.window { position: absolute; right: -4%; top: calc(var(--hh) + 1.6vh); height: calc(100% - var(--hh) - 6.6vh); width: 62%; z-index: 1; overflow: hidden; background: #737058;
  border-radius: 49% 0 0 46% / 44% 0 0 56%; will-change: width, height, top, border-radius;
  box-shadow: -8px -2px 0 #D9BB89, -19px 3px 0 #A5824D, -21px 4px 0 1px #674C2C88, -32px 10px 30px #49341D40; }
.window::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset calc(9px + var(--edge, 0px)) 5px 18px #14110C35, inset 1px 1px 0 #F4DEC0AA; }
.water-src { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; transform: scale(1.015); transform-origin: 52% 50%; }
.water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .8s; }
.water.ready { opacity: 1; }
.window-caption { position: absolute; right: 9%; bottom: 12%; max-width: 330px; color: #fff; font: 400 28px/1.4 var(--serif); text-shadow: 0 2px 12px #000; z-index: 2; }
.frond { position: absolute; z-index: 6; pointer-events: none; transform-origin: 6.45% 53.57%; max-width: none; }
.frond-corner { --fw: clamp(190px, 15vw, 280px); width: var(--fw); right: calc(var(--fw) * -.9355 - 6px); top: calc(var(--fw) * -.4838 - 6px); transform: rotate(182deg); opacity: .92; }
.frond-low { --fw: clamp(140px, 11vw, 210px); width: var(--fw); left: calc(var(--fw) * -.0645 - 6px); bottom: calc(var(--fw) * -.4192 - 6px); transform: rotate(-28deg); opacity: .82; }
.hero-copy { position: absolute; left: var(--gut); top: calc(var(--hh) + 4.5vh); z-index: 5; max-width: 44%; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.hero-copy .eyebrow { margin-bottom: 26px; }
.hero-copy h1 { font-size: min(7.6vw, 12.6vh, 132px); line-height: 1.02; letter-spacing: -.06em; text-shadow: 0 0 24px #B8935F35; }
.hero-copy h1 > span, .hero-copy h1 > em { display: block; }
.hero-copy h1 em { font-style: normal; color: #533D21; }
.hero-sub { margin: 24px 0 10px; line-height: 1.65; }
.scroll-cue { position: absolute; right: var(--gut); bottom: 28px; z-index: 8; color: var(--sand); font: 400 17px/1 var(--serif); letter-spacing: .01em; text-shadow: 0 1px 6px #000; }

/* 2. A place on either side of the garden */
.either { z-index: 2; background: var(--night); color: var(--sand); padding: clamp(90px, 10vw, 150px) var(--gut) clamp(100px, 11vw, 160px); text-align: center; }
/* v2: the line Jachin picked from Lantern Folio is now the section's heading, set in the serif, not a tiny label */
.either-title { font: 400 clamp(26px, 2.7vw, 40px)/1.15 var(--serif); letter-spacing: -.01em; color: var(--gold-l); max-width: 20ch; margin: 0 auto clamp(44px, 5.5vw, 72px); text-wrap: balance; }
.pair { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: start; gap: 40px; max-width: 1300px; margin: 0 auto; }
.pair article { padding: 25px; }
.pair .index { display: block; font: 400 23px/1 var(--serif); color: var(--bronze); margin-bottom: 22px; }
.pair h3 { font-size: clamp(54px, 5.4vw, 88px); line-height: 1; margin-bottom: 20px; }
.pair article > p:not(.eyebrow) { color: #D9D0C0; max-width: 34ch; margin: 22px auto 26px; }
.divider { position: relative; width: 1px; height: 280px; justify-self: center; }
.divider .line { position: absolute; inset: 0; background: #3A3F36; transform-origin: top; }
.js .divider .line { transform: scaleY(0); transition: transform 1s var(--ease-in-out); }
.js .divider.in .line { transform: scaleY(1); }
.gold-frond { position: absolute; width: 220px; max-width: none; left: -110px; top: 40px; filter: invert(70%) sepia(27%) saturate(430%); transform: rotate(80deg); animation: goldsway 7s ease-in-out infinite alternate; }
@keyframes goldsway { from { transform: rotate(75deg) translateY(-4px); } to { transform: rotate(85deg) translateY(4px); } }

/* 3. The houses as taped prints */
.houses .head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 90px); }
.houses h2 { font-size: clamp(30px, 5.4vw, 84px); line-height: 1; }
.houses .head > p { max-width: 460px; color: var(--brown); }
.prints { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 110px); align-items: start; }
/* The prints tilt with the scroll (the moving postcards); the transition only smooths the scroll, it never waits */
.print { display: block; text-decoration: none; color: inherit; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); transition: transform .6s var(--ease-out); will-change: transform; }
.print:nth-child(2) { margin-top: clamp(40px, 8vw, 130px); }
.print .paper { position: relative; background: var(--card); padding: clamp(10px, 1.3vw, 18px) clamp(10px, 1.3vw, 18px) clamp(54px, 6vw, 84px); box-shadow: 0 30px 50px -28px rgba(40, 26, 10, .7), 0 2px 3px rgba(40, 26, 10, .2); transition: transform var(--d-press) var(--ease-out); }
.print:active .paper { transform: scale(.985); }
.print .photo { aspect-ratio: 4 / 4.4; overflow: hidden; }
.print .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .print:hover .photo img { transform: scale(1.04); } }
.print .label { position: absolute; left: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); bottom: clamp(14px, 1.8vw, 26px); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.print .label b { font: 400 clamp(24px, 2.6vw, 38px)/1 var(--serif); }
.print .label span { font: 400 16px/1.3 var(--serif); color: #80612F; text-align: right; }
.print .cap { margin-top: 22px; max-width: 460px; color: #2E2618; font-size: 17px; }
.print .cap .eyebrow { display: block; margin-bottom: 8px; color: var(--ink); opacity: .85; }
.tape { position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%) rotate(-3deg); background: rgba(240, 228, 200, .72); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); z-index: 2; }
.tape-r { transform: translateX(-50%) rotate(4deg); }

/* 4. The six room cards */
.rooms { overflow: hidden; }
.rooms .head { text-align: center; max-width: 780px; margin: 0 auto; }
.rooms h2 { font-size: clamp(40px, 5.4vw, 84px); line-height: 1; margin: 0 0 18px; }
.rooms .head > p { color: var(--brown); margin: 0 auto; }
.filters { display: flex; justify-content: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.filters button { border: 1px solid var(--ink); background: transparent; padding: 11px 20px; border-radius: 99px; cursor: pointer; font: 500 16px/1 var(--sans); min-height: 44px; transition: background-color var(--d-hover) ease, color var(--d-hover) ease, transform var(--d-press) var(--ease-out); }
.filters button:active { transform: scale(.97); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--sand); }
@media (hover: hover) and (pointer: fine) { .filters button:not([aria-pressed="true"]):hover { background: rgba(20, 17, 12, .1); } }
.fan { position: relative; display: flex; justify-content: center; padding: clamp(60px, 7vw, 100px) 0 30px; perspective: 1400px; }
/* The deal is a one-time entrance (slow, staggered, expo); once dealt, a card answers a pointer in 300 ms */
.rcard { --w: clamp(210px, 16.5vw, 262px); position: relative; flex: none; width: var(--w); aspect-ratio: 5 / 7.4; margin: 0 calc(var(--w) * -.17); border: 0; padding: 0; cursor: pointer; background: none; text-align: left;
  transform-origin: 50% 120%; transform: rotate(var(--rot)) translateY(var(--dy)); transition: transform .9s var(--ease-expo), opacity .5s ease, filter .3s ease; z-index: var(--z); }
.js .fan .rcard { opacity: 0; transform: rotate(0deg) translateY(120px); }
.js .fan.in .rcard { opacity: 1; transform: rotate(var(--rot)) translateY(var(--dy)); transition-delay: calc(var(--z) * 60ms); }
.js .fan.dealt .rcard { transition: transform 300ms var(--ease-out), opacity 300ms ease, filter 300ms ease; transition-delay: 0s; }
.js .fan.in .rcard:focus-visible, .rcard:focus-visible { transform: rotate(0deg) translateY(-34px) scale(1.06); z-index: 20; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .js .fan.in .rcard:hover, .rcard:hover { transform: rotate(0deg) translateY(-34px) scale(1.06); z-index: 20; transition-delay: 0s; }
}
.rcard.dim { opacity: .35 !important; filter: saturate(.4); }
.rc { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ivory); border-radius: 4px; padding: 12px; box-shadow: 0 24px 40px -24px rgba(40, 26, 10, .75), 0 1px 2px rgba(40, 26, 10, .25); transition: transform var(--d-press) var(--ease-out); }
.rcard:active .rc { transform: scale(.97); }
.rc::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--bronze); pointer-events: none; }
.rc::after { content: ""; position: absolute; inset: 10px; border: .5px solid var(--bronze); opacity: .7; pointer-events: none; }
.rc .win { display: block; aspect-ratio: 1 / 1; overflow: hidden; margin: 8px 8px 0; position: relative; z-index: 1; }
.rc .win img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rcard:hover .win img { transform: scale(1.06); } }
.rc .txt { display: flex; flex-direction: column; flex: 1; justify-content: center; padding: 14px 12px 10px; text-align: center; position: relative; z-index: 1; }
.rc .house { font: 400 15px/1 var(--serif); letter-spacing: .02em; color: var(--bronze); }
.rc .nm { font: 400 clamp(19px, 1.5vw, 23px)/1.12 var(--serif); margin: 9px 0 7px; }
.rc .rate { font-size: 15px; color: #5C574C; }
.rc .rate b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fan-hint { text-align: center; font: 400 18px/1.3 var(--serif); opacity: .9; }
.room-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-top: 60px; }
.room-list article { background: var(--ivory); padding: 26px; }
.room-list h3 { font-size: 28px; margin: 6px 0 10px; }
.room-list .house { font: 400 16px/1.4 var(--serif); color: var(--bronze); }
.room-list ul { margin: 14px 0; padding-left: 18px; font-size: 16px; }
.room-list .rate { font: 400 26px/1 var(--serif); font-variant-numeric: tabular-nums; }
.js .room-list { display: none; }

/* 5. The stay: the ink panel and what every stay includes */
.stay .grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.panel { background: var(--night); color: var(--sand); padding: clamp(30px, 4.5vw, 64px); position: relative; box-shadow: 0 40px 70px -40px rgba(20, 12, 4, .8); }
.panel::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(201, 161, 92, .28); pointer-events: none; }
.panel h2 { font-size: clamp(34px, 3.8vw, 56px); margin: 6px 0 8px; }
.panel .sub { color: #B5AD9C; margin-bottom: 30px; }
.panel .eyebrow { color: var(--gold); }
.panel table { width: 100%; border-collapse: collapse; }
.panel td, .panel th { padding: 15px 0; border-bottom: 1px solid var(--line-d); vertical-align: baseline; }
.panel .n { font: 400 clamp(19px, 1.7vw, 24px)/1.2 var(--serif); text-align: left; }
.panel td.h { font: 400 16px/1 var(--serif); color: #A39A86; text-align: right; padding-right: 20px; white-space: nowrap; }
.panel td.p { font: 400 clamp(22px, 2vw, 30px)/1 var(--serif); color: var(--gold-l); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.panel .times { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 26px; color: #B5AD9C; font-size: 15px; }
.panel .times b { color: var(--sand); font-weight: 500; }
.panel .btn { margin-top: 30px; }
.inc h3 { font-size: clamp(36px, 3.6vw, 56px); margin: 0 0 16px; }
.inc .lead { color: var(--brown); margin-bottom: 18px; }
.inc ul { list-style: none; margin: 0; padding: 0; }
.inc li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid rgba(20, 17, 12, .25); }
/* v2: a small diamond, the same mark as the turned-over card's list, instead of 01 / 02 / 03 (the order means nothing) */
.inc li::before { content: ""; width: 7px; height: 7px; margin-top: 10px; background: var(--ink); transform: rotate(45deg); }
.inc b { display: block; font: 400 21px/1.25 var(--serif); }
.inc small { display: block; color: var(--brown); font-size: 15px; margin-top: 3px; }
.inc .note { font-size: 15px; color: var(--brown); margin-top: 18px; }

/* 5b. One statement that lights up as it is read (the standard's word-by-word statement; ink.js).
   Without JavaScript or under reduced motion it is simply printed in full ink. */
.ink-sec { position: relative; z-index: 2; padding: clamp(40px, 6vw, 90px) var(--gut) clamp(110px, 12vw, 190px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(30px, 6vw, 110px); align-items: center; }
.ink { font: 400 clamp(25px, 3.5vw, 50px)/1.18 var(--serif); letter-spacing: -.015em; max-width: 24ch; margin: 0; color: var(--ink); text-wrap: balance; }
/* A small taped print closes the far side of the statement, so the screen is never half empty */
.ink-print { position: relative; margin: 0; justify-self: center; width: min(100%, 360px); background: var(--card); padding: 12px 12px 18px; transform: rotate(2.2deg); box-shadow: 0 30px 50px -28px rgba(40, 26, 10, .7), 0 2px 3px rgba(40, 26, 10, .2); }
.ink-print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.ink-print figcaption { margin-top: 12px; font: 400 17px/1.3 var(--serif); color: #3C3A33; }
.ink-print .tape { top: -12px; }
.ink .w { color: rgba(20, 17, 12, .3); transition: color 450ms var(--ease-out); }
.ink .w.on { color: var(--ink); }

/* 6. The garden after dark */
.garden { background: var(--night); color: var(--sand); overflow: hidden; }
.garden .grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.garden h2 { font-size: clamp(32px, 4.4vw, 70px); line-height: 1.02; margin: 0 0 24px; text-wrap: balance; }
.garden .intro-t { color: #CFC6B5; }
.lit { position: relative; aspect-ratio: 4 / 3.2; border: 1px solid rgba(201, 161, 92, .55); padding: 10px; cursor: crosshair; }
.lit::after { content: ""; position: absolute; inset: 15px; border: .5px solid rgba(201, 161, 92, .4); pointer-events: none; z-index: 3; }
.lit .base, .lit .glow { position: absolute; inset: 10px; overflow: hidden; }
.lit img { width: 100%; height: 100%; object-fit: cover; }
.js .lit .base img { filter: brightness(.4) saturate(.7); }
.lit .glow { display: none; }
.js .lit .glow { display: block; -webkit-mask-image: radial-gradient(circle var(--rad, 240px) at var(--mx, 50%) var(--my, 45%), #000 0%, rgba(0, 0, 0, .85) 35%, transparent 100%); mask-image: radial-gradient(circle var(--rad, 240px) at var(--mx, 50%) var(--my, 45%), #000 0%, rgba(0, 0, 0, .85) 35%, transparent 100%); }
.lit .glow img { filter: saturate(1.08) brightness(1.06); }
.lit .tip { position: absolute; z-index: 4; left: 26px; bottom: 22px; font: 400 17px/1 var(--serif); color: var(--gold-l); text-shadow: 0 1px 8px #000; transition: opacity 300ms ease; }
.lit.used .tip { opacity: 0; }
.gstats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin: 30px 0; }
.gstats div { border-top: 1px solid var(--line-d); padding: 16px 0; }
.gstats b { display: block; font: 400 22px/1.2 var(--serif); color: var(--gold-l); }
.gstats span { color: #B5AD9C; font-size: 15px; }
.garden .ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.occ { margin-top: clamp(50px, 6vw, 90px); display: flex; flex-wrap: wrap; gap: 10px; }
/* The occasions are words, not buttons: v2 drops the hover fill that made them look clickable */
.occ span { border: 1px solid rgba(232, 223, 209, .3); border-radius: 99px; padding: 10px 18px; font: 400 17px/1 var(--serif); }

/* 7. Guest cards */
.reviews { text-align: center; overflow: hidden; }
.reviews h2 { font-size: clamp(36px, 4.4vw, 66px); margin: 0 0 50px; }
.deck { position: relative; width: min(720px, 92vw); height: clamp(280px, 30vw, 340px); margin: 0 auto; cursor: pointer; }
.rev { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: clamp(28px, 4vw, 54px); background: var(--ivory);
  box-shadow: 0 30px 50px -30px rgba(40, 26, 10, .7), 0 1px 2px rgba(40, 26, 10, .2);
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--tr, 0deg)); transition: transform 450ms var(--ease-out), opacity 300ms ease; }
.rev::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--bronze); pointer-events: none; opacity: .8; }
.rev blockquote { font: 400 clamp(20px, 2.3vw, 32px)/1.3 var(--serif); }
.rev figcaption { font: 500 16px/1 var(--sans); color: var(--bronze); }
/* the top card leaves faster than the cards settle (exits about a fifth quicker than entrances) */
.rev.out { transform: translate(120%, -30px) rotate(14deg); opacity: 0; transition: transform 360ms var(--ease-out), opacity 240ms ease; }.deck-ctl { display: flex; justify-content: center; margin-top: 46px; }
.reviews .src { margin-top: 26px; font-size: 15px; }

/* 8. Find us: the postcard */
.find .grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.find h2 { font-size: clamp(32px, 4vw, 60px); line-height: 1.04; margin: 0 0 22px; text-wrap: balance; }
.find .grid > div:first-child > p:not(.eyebrow) { color: var(--brown); max-width: 440px; margin-bottom: 28px; }
.postcard { position: relative; overflow: hidden; aspect-ratio: 148 / 100; padding: clamp(18px, 2.6vw, 36px); display: grid; grid-template-columns: 1.2fr 1px 1fr; gap: clamp(16px, 2.4vw, 34px); background: var(--card);
  box-shadow: 0 40px 60px -34px rgba(40, 26, 10, .75), 0 2px 3px rgba(40, 26, 10, .2); transform: rotate(-2deg) rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg)); transition: transform .6s var(--ease-out); }
.postcard .sep { background: #D7CBB5; }
.postcard h3 { font-size: clamp(22px, 2.2vw, 32px); margin-bottom: 14px; }
.postcard .left p { font-size: clamp(14px, 1.1vw, 16px); color: #3C3A33; }
.postcard address { margin-top: 14px; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.6; }
.postcard .right { display: flex; flex-direction: column; gap: 10px; position: relative; }
.stamp { align-self: flex-end; width: clamp(70px, 8vw, 104px); aspect-ratio: 4 / 5; border: 2px dashed var(--bronze); padding: 6px; background: var(--kraft); display: grid; place-items: center; }
.stamp img { width: 80%; }
.postmark { position: absolute; right: clamp(60px, 7vw, 100px); top: clamp(20px, 3vw, 40px); width: clamp(90px, 9vw, 130px); opacity: .55; transform: rotate(-14deg); }
.dist { margin-top: auto; display: grid; }
.dist div { display: flex; justify-content: space-between; border-bottom: 1px solid #D7CBB5; padding: 9px 0; font-size: clamp(13px, 1.05vw, 15px); }
.dist b { font: 400 1.2em/1 var(--serif); }
.pshade { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pshade canvas { position: absolute; opacity: var(--o, .5); transform-origin: var(--ox, 100%) var(--oy, 0%); animation: sway var(--dur, 9s) ease-in-out var(--del, 0s) infinite alternate; }

/* 9. Book a room */
.booking { background: var(--ink); color: var(--sand); }
.booking .wrap { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: 8%; row-gap: 40px; }
.booking .wrap::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(138, 106, 50, .4); pointer-events: none; }
.booking h2 { font-size: clamp(46px, 5.6vw, 88px); margin-bottom: 24px; }
.booking-intro > p:not(.eyebrow) { color: #CFC6B5; }
.placeholder-tag { display: inline-block; margin-top: 28px; font-size: 15px; border: 1px solid var(--bronze); padding: 10px 12px; color: var(--gold-l); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.booking label { display: block; font-size: 15px; font-weight: 500; color: #B5AD9C; }
.booking input, .booking select { display: block; width: 100%; min-width: 0; min-height: 54px; margin-top: 4px; background: transparent; color: var(--sand); border: 0; border-bottom: 1px solid #73664E; border-radius: 0; padding: 12px 0; font-size: 18px; letter-spacing: 0; text-transform: none; color-scheme: dark; }
.booking select option { background: var(--ink); }
.field-note { font-size: 15px; color: #B5AD9C; margin: 18px 0; }
.btn.wide { width: 100%; justify-content: center; }
.date-error { font-size: 15px; color: #FFD4A1; margin-top: 14px; min-height: 1em; }
.result { grid-column: 1 / -1; border: 1px dashed var(--bronze); padding: 30px; background: rgba(232, 223, 209, .03); }
.result[hidden] { display: none; }
.result h3 { font-size: 30px; margin-bottom: 14px; }
.result .selection { color: var(--gold-l); margin-bottom: 12px; }
.result:focus { outline: 2px solid var(--gold-l); outline-offset: 4px; }
.booking .help { grid-column: 1 / -1; font-size: 15px; color: #B5AD9C; }

/* Footer on the kraft */
.foot { overflow: hidden; }
.foot .wrap { padding-top: 70px; padding-bottom: 30px; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-bottom: 50px; flex-wrap: wrap; }
.foot-top img { width: 115px; }
.foot-top p { font: 400 clamp(28px, 3vw, 42px)/1.2 var(--serif); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 18px 30px; justify-content: space-between; border-top: 1px solid rgba(20, 17, 12, .25); padding-top: 24px; font-size: 16px; }
.foot-bottom a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot-bottom a:hover { text-decoration: underline; } }
.foot-bottom .tag { font: 400 18px/1.3 var(--serif); align-self: center; }
.credit { margin-top: 26px; font-size: 15px; opacity: .88; }
.foot-bottom { align-items: flex-start; }
.foot-bottom .tag { align-self: flex-start; padding-top: 9px; }
.foot-bottom .loc { display: inline-flex; align-items: center; min-height: 44px; margin-top: -4px; }
.contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; }
.ig-mark, .wa-mark { width: 24px; height: 24px; flex: none; border-radius: 6.5px; box-shadow: 0 2px 6px rgba(40, 26, 10, .25); }
.foot-end { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 26px; }
.foot-end .credit { margin-top: 0; }

/* The room card, turned over */
/* The modal and its scrim move as one surface: in over 300 ms from scale(.96) at the centre, out a little faster */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(15, 12, 8, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.scrim.on { opacity: 1; pointer-events: auto; transition: opacity var(--d-modal) var(--ease-out); }
.modal { position: fixed; z-index: 90; left: 50%; top: 50%; width: min(980px, 94vw); max-height: 92vh; transform: translate(-50%, -50%) scale(.96); opacity: 0; visibility: hidden; perspective: 2000px; transition: transform 220ms var(--ease-out), opacity 220ms ease, visibility 0s 220ms; }
.modal.on { transform: translate(-50%, -50%); opacity: 1; visibility: visible; transition: transform var(--d-modal) var(--ease-out), opacity var(--d-modal) var(--ease-out); }
.x { position: absolute; top: 18px; right: 18px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #CBBFA9; background: var(--ivory); color: var(--ink); cursor: pointer; font-size: 22px; line-height: 1; transition: transform var(--d-press) var(--ease-out); }
.x:active { transform: scale(.92); }
/* The card turning over is the one place a morph runs long: a marketing reveal, seen a few times a visit at most */
.bigcard { position: relative; width: 100%; aspect-ratio: 16 / 10; transform-style: preserve-3d; transition: transform 700ms var(--ease-in-out); }
.bigcard.flipped { transform: rotateY(180deg); }
.bigcard .side { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--ivory); border-radius: 6px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); }
.bigcard .side::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--bronze); z-index: 3; pointer-events: none; }
.bigcard .side::after { content: ""; position: absolute; inset: 16px; border: .5px solid var(--bronze); z-index: 3; pointer-events: none; opacity: .7; }
.bigcard .ph { position: absolute; inset: 0; }
.bigcard .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.bigcard .ph img.on { opacity: 1; }
.bigcard .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(15, 18, 14, .7)); }
.bigcard .ftxt { position: absolute; left: 44px; bottom: 40px; right: 44px; z-index: 4; color: var(--sand); display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.bigcard .fname { font: 400 clamp(34px, 4.4vw, 62px)/1 var(--serif); margin-top: 8px; }
.bigcard .back2 { transform: rotateY(180deg); display: grid; grid-template-columns: 1fr 1fr; }
.bigcard .back2 .l { position: relative; }
.bigcard .back2 .l img { width: 100%; height: 100%; object-fit: cover; }
.bigcard .back2 .r { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; overflow-y: auto; position: relative; z-index: 4; }
.bigcard .back2 .house { color: var(--bronze); }
.bigcard .back2 h3 { font-size: clamp(30px, 3.2vw, 46px); margin: 4px 0 14px; }
.bigcard .back2 p { color: #3C3A33; font-size: clamp(15px, 1.2vw, 17px); }
.bigcard .back2 ul { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.bigcard .back2 li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #E1D6C3; font-size: 14px; }
.bigcard .back2 li::before { content: ""; width: 6px; height: 6px; background: var(--ink); transform: rotate(45deg); flex: none; }
.bigcard .back2 .price { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 16px; }
.bigcard .back2 .price b { font: 400 36px/1 var(--serif); font-variant-numeric: tabular-nums; }
.bigcard .back2 .price small { display: block; font-size: 14px; color: #5C574C; margin-top: 6px; }
.turn { background: none; border: 0; cursor: pointer; font: 500 16px/1 var(--sans); text-decoration: underline; text-underline-offset: 5px; padding: 13px 0; min-height: 44px; transition: transform var(--d-press) var(--ease-out); }
.turn:active { transform: translateY(1px); }
.bigcard .front2 .turn { color: var(--sand); }
.bigcard .back2 .turn { align-self: flex-start; margin-top: 10px; }
.mbar { display: none; }
.rc .house, .room-list .house, .rev figcaption, .bigcard .back2 .house { color: #80612F; }

.header nav a { white-space: nowrap; }
@media (max-width: 1200px) {
  .header nav { gap: 22px; }
  .header .motion { display: none; }
}
@media (max-width: 1100px) {
  .hero-copy { max-width: 48%; }
}
@media (max-width: 1000px) {
  .header nav { display: none; }
  .header .actions { margin-left: auto; }
}
@media (max-width: 900px) {
  :root { --hh: 76px; --body: 16px; }
  .header { gap: 14px; }
  .header nav, .header .motion { display: none; }
  .header .actions { margin-left: auto; }
  :root { --corner-shift: 84px; }
  .brand { width: 72px; }
  .hero { height: 150vh; height: 150svh; min-height: 980px; }
  .window { width: 86%; right: -8%; top: max(45%, var(--copy-bottom, 430px)); height: calc(96% - max(45%, var(--copy-bottom, 430px))); border-radius: 58% 0 0 42% / 40% 0 0 60%; box-shadow: -6px -2px 0 #D9BB89, -13px 2px 0 #A5824D, -15px 3px 0 1px #674C2C88, -24px 8px 24px #49341D40; }
  .window-caption { font-size: 19px; right: 13%; bottom: 15%; max-width: 190px; }
  .frond-corner { --fw: 150px; }
  .frond-low { --fw: 118px; }
  .hero-copy { top: calc(var(--hh) + 16px); right: var(--gut); max-width: none; }
  .hero-copy h1 { font-size: clamp(46px, 13.4vw, 64px); }
  .hero-copy .eyebrow { margin-bottom: 16px; }
  .hero-sub { margin: 16px 0 6px; max-width: 26ch; }
  .scroll-cue { bottom: 18px; font-size: 11px; }
  .contours { width: 170%; height: 95%; left: -20%; top: 17%; }
  .pair { grid-template-columns: 1fr; gap: 10px; }
  .divider { width: 70%; height: 1px; margin: 16px auto; }
  .divider .line { transform-origin: center; }
  .js .divider .line { transform: scaleX(0); }
  .js .divider.in .line { transform: scaleX(1); }
  .gold-frond { width: 130px; left: calc(50% - 65px); top: -48px; transform: rotate(-12deg); animation-name: goldsway-h; }
  @keyframes goldsway-h { from { transform: rotate(-16deg); } to { transform: rotate(-8deg); } }
  .prints, .stay .grid, .garden .grid, .find .grid, .booking .wrap, .ink-sec { grid-template-columns: 1fr; }
  .ink-print { width: min(78%, 320px); }
  .print:nth-child(2) { margin-top: 0; }
  .fan { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 50px var(--gut) 40px; margin: 0 calc(-1 * var(--gut)); gap: 16px; perspective: none; -webkit-overflow-scrolling: touch; }
  .rcard, .js .fan .rcard, .js .fan.in .rcard { --w: 68vw; margin: 0; transform: none; scroll-snap-align: center; }
  .js .fan .rcard { opacity: 0; transform: translateY(40px); }
  .js .fan.in .rcard { opacity: 1; transform: none; }
  .rcard:hover, .js .fan.in .rcard:hover { transform: none; }
  .postcard { aspect-ratio: auto; grid-template-columns: 1fr; transform: rotate(-1.5deg); }
  .postcard .sep { display: none; }
  .postmark { right: 20px; top: auto; bottom: 150px; }
  .bigcard { aspect-ratio: auto; height: 86vh; }
  .bigcard .back2 { grid-template-columns: 1fr; grid-template-rows: 32% 1fr; }
  .bigcard .ftxt { left: 28px; right: 28px; bottom: 30px; flex-direction: column; align-items: flex-start; }
  .bigcard .back2 ul { grid-template-columns: 1fr; }
  .fields { gap: 18px 14px; }
  .booking input, .booking select { font-size: 16px; }
  .mbar { display: flex; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); transition: transform var(--d-drawer) var(--ease-drawer); }
  .mbar.on { transform: none; }
  .mbar .btn { flex: 1; justify-content: center; padding: 17px; box-shadow: 0 14px 36px -12px rgba(0, 0, 0, .6); }
  .foot .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
  .header .btn { padding: 12px 14px; }
  :root { --corner-shift: 78px; }
  .filters { gap: 8px; }
  .filters button { padding: 10px 15px; font-size: 15px; }
  .fields { grid-template-columns: 1fr; }
  .gstats { grid-template-columns: 1fr; }
}
/* Reduced motion: gentler, not zero. No travel, no turning, no loops; short fades and colour changes stay. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: 200ms !important; transition-timing-function: ease !important; transition-delay: 0s !important; }
  .btn:active, .filters button:active, .rcard:active .rc, .x:active, .print:active .paper { transform: none; }
  .bigcard .side { transition: opacity 200ms ease; }
  .hero { height: auto; min-height: 0; }
  .stage { position: relative; }
  .js .rv, .js .fan .rcard { opacity: 1; transform: none; }
  .js .fan.in .rcard, .js .fan .rcard { transform: rotate(var(--rot)) translateY(var(--dy)); }
  .grow .leaf { opacity: 1; }
  .grow .spine { stroke-dashoffset: 0; }
  .js .divider .line { transform: none; }
  .js .lit .base img { filter: none; }
  .js .lit .glow, .lit .tip { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .js .fan.in .rcard, .js .fan .rcard { transform: none; }
}
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }