/* Highdown Hideaways, look v8 (DESIGN.md, 24 Oct 2026).
   Why v8: blind AI judges (research/judge-v1/calib) read v7 as AI-made (p_ai 0.77), and still did with professional
   photos swapped in, so layout and type drive the verdict. Measured against four studio sites at 1440 px, v7 had
   13 type sizes (studio median 7), 44 bordered boxes (median 9), 17 px body text and 600-weight labels.
   v8: about 7 sizes, a light display serif, small tracked capitals, hairlines only, thin outline buttons, an
   asymmetric photo collage, drawn artwork and a live sunset time. No cards, no radius, no shadows. */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-display: swap; src: url(fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-display: swap; src: url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url(fonts/jost-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url(fonts/jost-latin-500-normal.woff2) format("woff2"); }

:root {
  --ground: #FBFBF9; --ground-2: #E8E3DA; --ink: #26231F; --muted: #4A443D; --rule: #CFC6B8; --accent: #6E2C3C;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --t-ui: 13px;
  --t-small: 15px;
  --t-body: clamp(16px, 1.25vw, 18px);
  --s-1: 20px;
  --s-2: 24px;
  --s-3: clamp(24px, 2.2vw, 30px);
  --s-4: clamp(30px, 3.1vw, 44px);
  --s-hero: clamp(46px, 7.2vw, 96px);
  --g: clamp(20px, 5vw, 72px);          /* side gutter */
  --sec: clamp(72px, 10vw, 152px);      /* space between chapters */
  --max: 1600px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }  /* the stuck header (K0293) must not cover a section's heading */
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-body)/1.65 var(--sans); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--rule); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 300; }
h2 { font: 300 var(--s-4)/1.12 var(--serif); letter-spacing: -.005em; margin-bottom: 28px; }
blockquote { margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--ground); padding: 8px; }

/* small type in sentence case (v9): the blind judges of 24 Oct named tracked capitals on every block as the AI
   recipe, and the ai_tells check flagged them. Section labels are a short italic line in the accent colour. */
.btn, .book .f, .top, .sun-l, .foot-links, .contact, .more-list summary, .all summary {
  font: 500 var(--t-ui)/1.4 var(--sans); letter-spacing: .02em; }
.label { font: italic 400 var(--s-2)/1.3 var(--serif); letter-spacing: 0; color: var(--accent); margin: 0 0 14px; }
figcaption { font: italic 400 var(--s-1)/1.35 var(--serif); color: var(--muted); margin-top: 10px; }
.draw { color: var(--muted); height: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 26px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--ground); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: transparent; color: var(--ink); }
.btn.line { background: transparent; color: inherit; border-color: currentColor; min-height: 40px; padding: 0 20px; }
.btn.line:hover { background: rgba(255, 255, 255, .12); }

/* header: over the hero, white; it stays on screen when scrolling and takes the page's ground once past the hero
   (K0293, 26 Oct 2026: "as you scroll down the header at the top should remain"; The PIG's is fixed, 90 px) */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 22px var(--g); color: #fff; }
.menu-btn { justify-self: start; display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 10px 0;
  color: inherit; font: 500 var(--t-ui)/1.4 var(--sans); letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.menu-btn i { display: block; width: 22px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; letter-spacing: .3em; text-transform: uppercase; font-size: var(--t-ui); }
.brand .mark { flex: none; }
.top .btn { justify-self: end; }
@media (prefers-reduced-motion: no-preference) { .top { transition: background-color .3s ease, color .3s ease, padding .3s ease; } }
.top.stuck { background: var(--ground); color: var(--ink); padding-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--rule); }
.top.stuck .btn.line:hover { background: var(--ink); color: var(--ground); }
.top nav a[aria-current] { text-decoration-color: currentColor; }
.top nav { display: none; }
.top.open { color: var(--ink); position: fixed; }
.top.open nav { display: flex; flex-direction: column; gap: 6px; position: fixed; inset: 0; z-index: -1; background: var(--ground);
  padding: 120px var(--g) 40px; overflow-y: auto; }
.top.open nav a { font: 300 var(--s-4)/1.25 var(--serif); letter-spacing: 0; text-transform: none; text-decoration: none; }
.top.open nav a:hover { color: var(--accent); }
.top.open .menu-btn i { height: 1px; border-bottom: 0; }

/* hero */
.hero { position: relative; height: 88vh; min-height: 520px; max-height: 1100px; color: #fff; overflow: hidden; }
.hero-photo, .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 50% 60%; }
.hero::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to bottom, rgba(20, 18, 16, .45) 0, rgba(20, 18, 16, 0) 22%, rgba(20, 18, 16, 0) 55%, rgba(20, 18, 16, .55) 100%); }
.hero-text { position: absolute; z-index: 1; left: var(--g); bottom: clamp(32px, 6vw, 72px); right: var(--g); }
.hero-text .label { color: rgba(255, 255, 255, .85); margin-bottom: 14px; }
h1 { font: 300 var(--s-hero)/1 var(--serif); letter-spacing: -.01em; }
.sun { position: absolute; z-index: 1; right: var(--g); bottom: clamp(36px, 6vw, 78px); margin: 0; text-align: right; }
.sun:not([hidden]) { display: flex; flex-direction: column; gap: 4px; }
.sun-l { color: rgba(255, 255, 255, .8); }
.sun-t { font: 400 var(--s-2)/1 var(--serif); letter-spacing: .02em; }
.sun-n { font: 400 var(--t-ui)/1.4 var(--sans); color: rgba(255, 255, 255, .8); }

/* the stay line: booking under the hero */
.stay { max-width: var(--max); margin: 0 auto; padding: 32px var(--g) 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 48px; border-bottom: 1px solid var(--rule); }
.book { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0 28px; align-items: end; margin: 0; }
.book .f { display: block; color: var(--muted); font: 500 var(--t-ui)/1.4 var(--sans); letter-spacing: .02em; border-bottom: 1px solid var(--ink); padding-bottom: 8px; cursor: pointer; }
.book input, .book select { display: block; font: 400 var(--s-2)/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink);
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 6px 0 0; width: 100%; min-width: 0; height: 30px;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.book input:focus-visible, .book select:focus-visible { outline: none; }
.book .f:focus-within { border-bottom-color: var(--accent); }
.book .f:has(:focus-visible) { outline: 1px solid var(--ink); outline-offset: 3px; }  /* the date inputs are see-through, so the ring goes on their label (keyboard check, 24 Oct) */
.book select { padding-right: 16px; background: linear-gradient(45deg, transparent 50%, var(--muted) 50%) right 5px center / 5px 5px no-repeat,
  linear-gradient(-45deg, transparent 50%, var(--muted) 50%) right 0 center / 5px 5px no-repeat; }
.when { position: relative; display: block; }
.shown { display: none; }
.js .when .shown { display: flex; align-items: center; position: absolute; left: 0; right: 0; top: 6px; height: 30px; pointer-events: none;
  font: 400 var(--s-2)/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.js .when .shown.empty { color: var(--muted); }
.stay-note { display: contents; color: var(--muted); font-size: var(--t-small); }
.stay-note p { margin: 0; }
.rating span:first-child { color: var(--ink); }
.stay .price { display: contents; }
.price b { display: block; grid-row: 1; font: 400 var(--s-3)/1.2 var(--serif); color: var(--ink); }
.stay .rating { grid-row: 2; margin-top: 6px; }
.stay .book { grid-row: 3; margin: 20px 0 0; }
.stay .quote { grid-row: 4; margin-top: 20px; }
/* direct quote (site.js, src/pricing.json): the total for the chosen dates and the request button, under the bar */
.quote { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; border-top: 1px solid var(--rule); padding-top: 18px; color: var(--muted); font-size: var(--t-small); }
.quote p { margin: 0; }
.quote[hidden], .quote [hidden] { display: none; }
.q-line { color: var(--ink); font: 400 var(--s-2)/1.3 var(--serif); }
.q-total { font-weight: 500; font-size: var(--s-3); }
.q-dog { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.q-dog input { width: 18px; height: 18px; accent-color: var(--accent); }
.q-how { flex-basis: 100%; margin-top: -6px; max-width: 62ch; }  /* the nights that make the total, smaller than it */
.q-terms { flex-basis: 100%; max-width: 62ch; }
.q-cancel { flex-basis: 100%; max-width: 62ch; }
.q-cancel summary { cursor: pointer; width: max-content; text-decoration: underline; text-underline-offset: 4px; }
.q-cancel p { margin-top: 6px; }
.q-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.q-air { color: var(--muted); }
.q-alt { margin: 0; color: var(--muted); font-size: var(--t-ui); }
.q-copy { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.q-done { color: var(--ink); }
.quote:focus { outline: none; }
[tabindex="-1"]:not(a, button, input, select, textarea):focus { outline: none; }  /* a menu jump focuses its target (site.js); rings belong on controls */

/* date picker (site.js): two months under the booking line on wide screens, a sheet from the bottom on phones.
   Square days with the site's 2 px corners; the chosen nights in the elderberry accent, the nights between on ground-2. */
.book { position: relative; }
.js .when .shown { pointer-events: auto; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; }
.js .when .shown:focus-visible { outline: none; }
.js .when input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.js .when { height: 36px; }  /* the input no longer gives the field its height (30 px plus its 6 px top margin) */
.cal { position: absolute; z-index: 40; top: calc(100% + 14px); left: 0; width: min(760px, 100%); box-sizing: border-box;
  padding: 24px 28px 20px; background: #FFFFFF; border-radius: 14px; box-shadow: 0 2px 6px rgba(38, 35, 31, .08), 0 24px 60px rgba(38, 35, 31, .22);
  color: var(--ink); font: 400 var(--t-small)/1.4 var(--sans); }
.cal[hidden], .cal-back[hidden] { display: none; }
.cal-top { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.cal-say { margin: 0; flex: 1 1 260px; font: 500 var(--s-2)/1.25 var(--serif); }
.cal button:not(.btn) { font: 400 var(--t-small)/1.4 var(--sans); color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* Arrive and Leave: one box split in two, the side being chosen outlined in ink */
.cal-pick { display: grid; grid-template-columns: 1fr 1fr; flex: 0 1 300px; border: 1px solid var(--rule); border-radius: 10px; }
.cal .cal-pick button { display: grid; text-align: left; padding: 8px 14px; border-radius: 10px; }
.cal-pick span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cal-pick b { font-weight: 400; color: var(--muted); }
.cal .cal-pick button.on { box-shadow: 0 0 0 2px var(--ink); background: #fff; }
.cal-nav { display: flex; justify-content: space-between; margin: 20px 0 -38px; position: relative; z-index: 1; pointer-events: none; }
.cal .cal-nav button { pointer-events: auto; width: 38px; height: 38px; display: grid; place-items: center; font-size: 17px;
  border-radius: 50%; border: 1px solid var(--rule); }
.cal .cal-nav button:hover:not(:disabled) { border-color: var(--ink); }
.cal-nav button:disabled { opacity: .35; cursor: default; }
.cal-months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 44px; }
.cal-name { margin: 0 0 10px; text-align: center; font: 500 22px/38px var(--serif); }
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.cal-days span { display: grid; place-items: center; height: 28px; color: var(--muted); font-size: 12px; font-weight: 500; }
/* a day is a round mark with its night's price under the number; the stay between the two marks is one band */
.cal-days button { position: relative; z-index: 0; height: 50px; display: grid; align-content: center; justify-items: center;
  font-variant-numeric: tabular-nums; }
.cal-days button::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: min(48px, 100%); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; }
.cal-days button b { font-weight: 500; line-height: 1.1; }
.cal-days button i { font-style: normal; font-size: 10.5px; line-height: 1.2; color: var(--muted); }
.cal-days button:hover:not(.no)::before { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal-days button:focus-visible { outline: none; }
.cal-days button:focus-visible::before { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink); }
.cal-days button.now b { text-decoration: underline; text-underline-offset: 3px; }
.cal-days button.in { background: var(--ground-2); }
.cal-days button.s.r { background: linear-gradient(90deg, transparent 50%, var(--ground-2) 50%); }
.cal-days button.e { background: linear-gradient(90deg, var(--ground-2) 50%, transparent 50%); }
.cal-days button.s::before, .cal-days button.e::before { background: var(--ink); }
.cal-days button.s, .cal-days button.e, .cal-days button.s i, .cal-days button.e i { color: #fff; }
.cal-days button.no { color: #ABA196; cursor: default; }
.cal-days button.no i { visibility: hidden; }
.cal-days button.booked b, .cal-days button.past b { text-decoration: line-through; }
.cal-rule { margin: 14px 0 0; color: var(--muted); font-size: var(--t-ui); }
.cal-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--rule); }
.cal-clear { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cal button.cal-x { min-height: 44px; padding: 0 26px; border-radius: 2px; background: var(--ink); color: #fff; font-weight: 500; }
.cal button.cal-x:hover { background: var(--accent); }
.cal-back { position: fixed; inset: 0; z-index: 59; background: rgba(38, 35, 31, .45); }
@media (max-width: 699px) {
  .cal { position: fixed; z-index: 60; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 92vh; overflow-y: auto;
    padding: 26px var(--g) calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .cal::after { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--rule); }
  .cal-say { font-size: var(--s-1); flex-basis: 100%; }
  .cal-pick { flex-basis: 100%; }
  .cal-days button { height: 52px; }
  .cal-days button b { font-size: 16px; }
  .cal-days button i { font-size: 11px; }
  html.cal-lock { overflow: hidden; }
}

/* guests panel (site.js): the calendar's frame, with plus and minus and the dog */
.js .book select.native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gsel { display: block; width: 100%; height: 30px; margin: 6px 0 0; padding: 0 16px 0 0; border: 0; text-align: left; cursor: pointer;
  font: 400 var(--s-2)/1.3 var(--serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(45deg, transparent 50%, var(--muted) 50%) right 5px center / 5px 5px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--muted) 50%) right 0 center / 5px 5px no-repeat; }
.gsel:focus-visible { outline: none; }
.gp-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.gp-row:first-child { padding-top: 0; }
.gp-h { margin: 0; font: 400 var(--s-2)/1.2 var(--serif); }
.gp-s { margin: 4px 0 0; color: var(--muted); font-size: var(--t-ui); }
.gp-step { display: flex; align-items: center; gap: 14px; }
.gp-step button { width: 40px; height: 40px; border: 1px solid var(--ink) !important; border-radius: 2px; font-size: var(--s-1); line-height: 1; }
.gp-step button:disabled { border-color: var(--rule) !important; color: var(--rule); cursor: default; }
.gp-step button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gp-n { min-width: 1.4em; text-align: center; font: 400 var(--s-2)/1 var(--serif); }
.gp-dog { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.gp-dog input { display: inline-block; width: 20px; height: 20px; margin: 0; -webkit-appearance: auto; appearance: auto; accent-color: var(--accent); }  /* the panel sits inside .book, whose input rule strips the native look (K0288: the tick box vanished) */
.gp-foot { display: flex; justify-content: flex-end; padding-top: 14px; }
@media (min-width: 700px) { .gp { width: min(400px, 100%); } }

/* shared chapter frame: a 12-column grid inside the gutters */
.intro, .ch, .rooms, .hosts, .photos, .where, .words, .answers {
  max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--g) 0; }
/* the price bar's own 48 px foot already parts it from the lodge: pad once (proportion audit 28 Oct: 209 px against a 144 median) */
.stay + .intro { padding-top: calc(var(--sec) - 48px); }

/* intro: the lede, the facts, a drawing; a two-photo collage */
.intro { display: grid; gap: 56px; }
.lede { font: 400 var(--s-3)/1.4 var(--serif); letter-spacing: 0; margin: 0 0 30px; max-width: 34ch; }
.facts { max-width: 46ch; color: var(--ink); }
.facts-list { list-style: none; padding: 0; margin: 1.25rem 0 0; max-width: 46ch; color: var(--ink); }
.facts-list li { padding: .45rem 0; border-top: 1px solid var(--rule); }
.facts-list li:last-child { border-bottom: 1px solid var(--rule); }
.intro-draw { width: 120px; margin-top: 36px; }
.collage { position: relative; }
.collage .c1 img { aspect-ratio: 4 / 5; object-fit: cover; }
.collage .c2 { position: absolute; width: 46%; left: -6%; bottom: -12%; border: 10px solid var(--ground); border-left-width: 0; border-bottom-width: 0; }
.collage .c2 img { aspect-ratio: 4 / 5; object-fit: cover; }

/* hot tub: a large photo to the page edge, text beside it */
.ch { display: grid; gap: 40px; }
.ch-text p { max-width: 42ch; }
.ch-small { margin-top: 40px; max-width: 320px; }
.ch-small img { aspect-ratio: 4 / 3; object-fit: cover; }
.tub .ch-photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* inside: an uneven trio */
.inside figure img { object-fit: cover; }
.inside .i1 img { aspect-ratio: 16 / 10; }
.inside .i2 img { aspect-ratio: 1 / 1; }
.inside .i3 img { aspect-ratio: 4 / 5; }

/* lists with hairlines */
.list { margin: 0; }
.list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--rule); }
.list > div:last-child { border-bottom: 1px solid var(--rule); }
.list dt { font: 500 var(--s-2)/1.25 var(--serif); }
.list dd { margin: 0; color: var(--muted); }
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
.more-list, .all { margin-top: 28px; }
.more-list summary, .all summary { display: inline-flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--ink); }
.more-list summary::after, .all summary::after { content: ""; width: 7px; height: 7px; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-3px) rotate(45deg); }
details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.amenities { display: grid; gap: 28px 40px; margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.amenities ul { margin: 0; padding: 0; list-style: none; }
.amenities li { padding: 6px 0; border-top: 1px solid var(--rule); }
.amenities .label { margin-bottom: 10px; }

.rooms { display: grid; gap: 32px 56px; }
/* bedroom cards (K0293): a photo for each room; resting the pointer shows its second view where it has one */
.beds { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bed { display: block; text-decoration: none; }
.bed-ph { position: relative; display: block; overflow: hidden; }
.bed-ph img { aspect-ratio: 1 / 1; object-fit: cover; }  /* square: 4:5 cut the beds (user 26 Oct); build checks rooms_bed_box */
.bed-ph picture + picture { position: absolute; inset: 0; opacity: 0; }
.bed-t { display: block; margin-top: 12px; color: var(--muted); font-size: var(--t-small); }
.bed-t b { display: block; font: 500 var(--s-2)/1.25 var(--serif); color: var(--ink); }
.bed:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* the downs, full width */
.band { margin: var(--sec) 0 0; }
.band img { aspect-ratio: 21 / 9; object-fit: cover; min-height: 280px; }
.band figcaption { padding: 0 var(--g); }

/* hosts, on the second ground */
.hosts { max-width: none; background: var(--ground-2); margin-top: var(--sec); padding-bottom: var(--sec); display: grid; gap: 56px; }
.hosts-photos { position: relative; }
.hosts-photos .h1p img { aspect-ratio: 4 / 5; object-fit: cover; }
.hosts-photos .h2p { position: absolute; width: 44%; right: -4%; bottom: -10%; border: 10px solid var(--ground-2); }
.hosts-photos .h2p img { aspect-ratio: 1 / 1; object-fit: cover; }
.hosts-text p { max-width: 46ch; }
.hosts-text blockquote { margin: 36px 0; padding-left: 24px; border-left: 1px solid var(--accent); }
.hosts-text blockquote p { font: 400 italic var(--s-2)/1.45 var(--serif); }
blockquote footer { font-size: var(--t-small); color: var(--muted); }
.contact a, .foot-links a { margin-right: 24px; text-decoration: none; }

/* photos by area (K0293): the list swaps the large photo, as The PIG's tabbed lists do; "See all" opens the tour */
.photos-head { margin-bottom: 8px; }
.tour { display: grid; gap: 24px; margin-top: 24px; }
.tour-list { list-style: none; margin: 0; padding: 0; }
.tour-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule);
  text-decoration: none; color: var(--muted); }
.tour-list li:last-child a { border-bottom: 1px solid var(--rule); }
.tour-list span { font: 400 var(--s-3)/1.2 var(--serif); }
.tour-list small { font-size: var(--t-ui); }
.tour-list a.on, .tour-list a:hover { color: var(--ink); }
.tour-list a.on span { font-style: italic; }
/* The open tab's name is italic, which is narrower: upright 'Bedrooms and bathrooms' takes two lines at 320 px and
   italic one, so switching tabs moved the list 29 px and a hovering pointer then picked the next tab, every frame.
   A hidden copy in the other style shares the name's cell, so the cell is always the taller of the two (A17). */
.tour-list span { display: grid; }
.tour-list span > span { grid-area: 1 / 1; }
.tour-list span > [aria-hidden] { font-style: italic; visibility: hidden; }
.tour-list a.on span > [aria-hidden] { font-style: normal; }
.tour-show { display: grid; }
.tour-panel { grid-area: 1 / 1; }
.js .tour-panel:not(.on) { visibility: hidden; opacity: 0; }
.tp-big img { aspect-ratio: 3 / 2; object-fit: cover; }
/* a photo held until the hero loads has no address yet: hide the alt text and broken icon phones draw for it */
img[data-hold-src] { opacity: 0; }
.tp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.tp-row img { aspect-ratio: 4 / 3; object-fit: cover; }
.tp-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 12px 0 0;
  font: italic 400 var(--s-1)/1.35 var(--serif); color: var(--muted); }
.tp-all { font: 500 var(--t-ui)/1.4 var(--sans); font-style: normal; color: var(--ink); text-decoration-color: currentColor; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid img { aspect-ratio: 4 / 3; object-fit: cover; }
.grid a, .tour a, .tp-row a { display: block; text-decoration: none; }
.tour-list a { display: flex; }
.grid-h { scroll-margin-top: 90px; }
/* every photo that opens large: a pointer that says so and a slow, small zoom while it rests there (K0293: "when
   you hover over the pictures it feels interactive"). Moves only on the guest's own pointer, never on scroll. */
.zoomable { cursor: zoom-in; }
.zoomable picture, .bed-ph { overflow: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zoomable img, .bed-ph img { transition: transform .9s cubic-bezier(.2, .6, .2, 1), opacity .5s ease; }
  .zoomable:hover img, .bed:hover .bed-ph img { transform: scale(1.04); }
  .bed-ph picture + picture { transition: opacity .5s ease; }
  .tour-panel { transition: opacity .35s ease, visibility .35s; }
}
@media (hover: hover) { .bed.has-two:hover .bed-ph picture + picture { opacity: 1; } }
/* the photo tour: every photo by area in a full-screen sheet, opened by "All 26 photos" or "See all" */
.tdlg { border: 0; padding: 0; margin: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: var(--ground); color: var(--ink); }
.tdlg::backdrop { background: var(--ground); }
.td-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; padding: 14px var(--g);
  background: var(--ground); box-shadow: 0 1px 0 var(--rule); font-size: var(--t-ui); }
.td-head a { white-space: nowrap; }
.td-x { margin-left: auto; }
/* phones: one row that scrolls sideways, Close pinned at its end (27 Oct, user: "top bit too big"; it wrapped to 3 rows,
   about 170 of 812 px) */
@media (max-width: 699px) {
  .td-head { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; gap: 20px; }
  .td-head::-webkit-scrollbar { display: none; }
  .td-head > b { display: none; }
  .td-head .td-x { position: sticky; right: 0; flex: none; min-height: 40px; padding: 0 16px; background: var(--ground);
    box-shadow: -18px 0 14px -4px var(--ground); }
}
.td-body { max-width: var(--max); margin: 0 auto; padding: 0 var(--g) 60px; }
.td-body .grid-h { margin-top: 40px; }
.all .grid { margin-top: 14px; }
.js .all > summary { cursor: zoom-in; }
.grid-h { font: italic 400 var(--s-2)/1.3 var(--serif); color: var(--muted); margin: 32px 0 0; }
.viewer { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: var(--ink); color: var(--ground); }
.viewer::backdrop { background: var(--ink); }
.viewer { height: 100dvh; max-height: 100dvh; }  /* iOS: 100vh runs under the browser's own bar (26 Oct audit) */
.viewer figure { touch-action: pan-y pinch-zoom; }  /* a sideways swipe reaches the viewer's own handler */
/* the page stays put behind an open photo or menu: the wheel moved it 500 px behind the viewer (26 Oct audit) */
html:has(dialog[open]), html:has(.top.open) { overflow: hidden; }
html:has(.top.open) .bbar { visibility: hidden; }
.viewer figure { margin: 0; height: calc(100% - 64px); display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; padding: 16px 16px 0; box-sizing: border-box; }
.viewer picture { display: contents; }  /* the photo stays the figure's own row */
.viewer source { display: none; }  /* else the empty source took the photo's grid row and pushed the photo below it (27 Oct: off a landscape screen) */
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; background: center / cover no-repeat; }
.viewer figcaption { color: var(--ground-2); margin: 8px 0 0; }
.v-nav { display: flex; justify-content: center; align-items: center; gap: 24px; height: 64px; margin: 0; }
.v-nav button { font: 500 var(--t-ui)/1.4 var(--sans); color: var(--ground); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 8px 2px; cursor: pointer; }
.v-nav button:focus-visible { outline: 1px solid var(--ground); outline-offset: 3px; }
.v-n { font-size: var(--t-ui); color: var(--ground-2); }

/* where (27 Oct 2026 redesign): a real map drawn from OpenStreetMap (src/map.py, its own look in src/map.css) with
   each walk and drive on it, and the times beside it. site.js adds the On foot / By car switch, the dots and labels,
   the scale and the route highlights; without it the map is a plain image and both lists show. */
.where { display: grid; gap: 40px 72px; }
.where-head p { max-width: 52ch; }
.where > *, .intro > *, .ch > *, .rooms > *, .hosts > *, .answers > * { min-width: 0; }
.mapbox { position: relative; overflow: hidden; aspect-ratio: 10 / 11; margin: 0 calc(-1 * var(--g)); background: #DEDFCB; }
.mapbox > svg.map, .mapbox > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapbox > svg.map { opacity: 0; transition: opacity .5s ease; }
.mapbox.ready > svg.map { opacity: 1; }
.map-credit { position: absolute; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 2px 6px; font-size: 11px; line-height: 1.4;
  background: rgba(237, 232, 224, .85); color: var(--muted); }
.map-mode { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; background: var(--ground); border: 1px solid var(--ink); }
.map-mode button { font: 500 var(--t-ui)/1 var(--sans); letter-spacing: .02em; min-height: 40px; padding: 0 16px; border: 0;
  background: none; color: var(--ink); cursor: pointer; }
.map-mode button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.map-mode button:focus-visible { outline-offset: -4px; outline-color: currentColor; }
.map-scale { position: absolute; left: 12px; bottom: 10px; z-index: 2; font: 500 11px/1 var(--sans); color: var(--muted); }
.map-scale i { display: block; height: 5px; margin-bottom: 4px; border: 1px solid var(--muted); border-top: 0; }
.pins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* routes draw and pins appear once, when the map is reached: it shows the journeys, so ai_tells' fade-in-on-scroll flag is kept on purpose */
.pin { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; opacity: 0; transition: opacity .35s ease; }
.pins.in .pin, .pin.lodge { opacity: 1; }
.pin[hidden] { display: none; }
.pin b { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--ground); transition: transform .2s ease; }
.pin em { position: absolute; top: -8px; font: 500 12px/16px var(--sans); letter-spacing: .02em; color: var(--ink); white-space: nowrap;
  text-shadow: 0 0 2px var(--ground), 0 0 2px var(--ground), 0 0 4px var(--ground), 0 0 6px var(--ground); }
.pin s { display: none; text-decoration: none; }
.pin.s-r em { left: 11px; }
.pin.s-l em { right: 11px; }
.pin.s-t em { top: auto; bottom: 9px; left: 0; transform: translateX(-50%); }
.pin.s-b em { top: 9px; left: 0; transform: translateX(-50%); }
.pin.on b { transform: scale(1.5); }
.pin.on em { color: var(--accent); }
.mapbox.hl .pin:not(.on):not(.lodge) { opacity: .35; }
.pin.edge b { display: none; }
.pin.edge em { left: 0; right: auto; top: 0; bottom: auto; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 7px; background: var(--ground); border: 1px solid var(--rule); text-shadow: none; }
.pin.edge s { display: block; color: var(--accent); }
.pin.lodge { cursor: default; z-index: 1; }
.pin.lodge b { left: -8px; top: -8px; width: 16px; height: 16px; background: var(--ink); box-shadow: 0 0 0 3px var(--ground); }
.pin.lodge em { right: 15px; top: -11px; font: italic 400 19px/22px var(--serif); letter-spacing: 0; }
.pin i { display: none; }
/* the time sits after each name, quieter; a chosen place opens a card with both times and a directions link */
.pin em small { margin-left: 5px; font: 400 12px/16px var(--sans); color: var(--muted); }
.pin.on em small { color: var(--accent); }
.map-card { position: absolute; left: 12px; bottom: 34px; z-index: 4; width: min(300px, calc(100% - 24px)); box-sizing: border-box;
  padding: 16px 18px 18px; background: #FFFFFF; border-radius: 10px; box-shadow: 0 2px 6px rgba(38, 35, 31, .1), 0 14px 36px rgba(38, 35, 31, .2); }
.map-card[hidden] { display: none; }
.map-card h3 { margin: 0 32px 8px 0; font: 500 var(--s-1)/1.2 var(--serif); }
.map-card .mc-t { display: flex; gap: 18px; margin: 0 0 4px; }
.map-card .mc-t b { font-weight: 600; }
.map-card .mc-d { margin: 0 0 12px; color: var(--muted); font-size: var(--t-ui); }
.map-card a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; background: var(--ink); color: #fff;
  font-weight: 500; text-decoration: none; border-radius: 2px; }
.map-card a:hover { background: var(--accent); }
.map-card .mc-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none;
  font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; }
.map-card .mc-x:hover { background: var(--ground-2); }
.map-card.up { bottom: auto; top: 64px; }
.map-card .mc-s { display: none; }
@media (max-width: 699px) {
  /* on a phone the card is a strip: short name and time on the left, directions on the right */
  .map-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 6px; padding: 10px 6px 10px 14px; width: calc(100% - 24px);
    bottom: 30px; }
  .map-card.up { top: 60px; }
  .map-card .mc-f, .map-card .mc-d { display: none; }
  .map-card .mc-s { display: inline; }
  .map-card h3 { grid-column: 1; margin: 0; font-size: 17px; }
  .map-card .mc-t { grid-column: 1; margin: 0; gap: 12px; font-size: var(--t-ui); }
  .map-card a { grid-column: 2; grid-row: 1 / 3; min-height: 40px; padding: 0 12px; font-size: var(--t-ui); }
  .map-card .mc-x { position: static; grid-column: 3; grid-row: 1 / 3; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* the lodge marks itself with three slow rings when the map arrives, then stays still */
  .pins.in .pin.lodge i { display: block; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid var(--ink); animation: ring 2.2s ease-out 3; opacity: 0; }
  @keyframes ring { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
}
.times { display: grid; gap: 36px; align-content: start; }
.tl h3 { margin-bottom: 6px; }
.tl h3 span { font: 400 var(--t-small)/1.4 var(--sans); color: var(--muted); margin-left: 6px; }
.tl ol { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.tl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule); }
.times.live .tl:not(.show) { display: none; }
.times.live .tl li { display: block; padding: 0; }
.tl .tr { width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 12px 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tl .tr::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .55; align-self: center;
  transition: transform .2s ease, opacity .2s ease; }
.tn { font: 400 var(--s-1)/1.3 var(--serif); }
.tt { font: 500 var(--t-ui)/1.3 var(--sans); letter-spacing: .02em; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl li.on .tn { color: var(--accent); }
.tl li.on .tr::before { opacity: 1; transform: scale(1.4); }
@media (hover: hover) { .tl .tr:hover .tn { color: var(--accent); } }
.ag-promo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px;
  background: #FFFFFF; border-radius: 10px; color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 3px rgba(38, 35, 31, .08), 0 10px 28px rgba(38, 35, 31, .1); transition: box-shadow .2s ease; }
.ag-promo:hover { box-shadow: 0 1px 3px rgba(38, 35, 31, .1), 0 16px 40px rgba(38, 35, 31, .18); }
.ag-promo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.ag-promo-t { display: grid; gap: 4px; }
.ag-promo-t b { font: 500 var(--s-1)/1.2 var(--serif); }
.ag-promo-t > span { color: var(--muted); font-size: var(--t-ui); line-height: 1.45; }
.ag-promo-t em { font-style: normal; font-weight: 500; font-size: var(--t-ui); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .ag-promo { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } .ag-promo img { aspect-ratio: 4 / 3; } }

/* reviews: the score, the lead quote, then guests' words by why they came (site.js: one group at a time) */
.words { text-align: center; }
.score { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 18px; }
.score b { font: 300 clamp(76px, 9vw, 128px)/1 var(--serif); font-variant-numeric: lining-nums; }
.score span { font-size: var(--t-small); color: var(--muted); }
.badges { display: flex; justify-content: center; margin: 0 0 64px; font: 500 var(--t-ui)/1.4 var(--sans); letter-spacing: .02em; }
.badges span { padding: 0 14px; }
.badges span + span { border-left: 1px solid var(--rule); }
.words .big { max-width: 920px; margin: 0 auto 72px; }
.words .big p { font: 300 var(--s-3)/1.35 var(--serif); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; margin: 0 auto 40px; }
.chips button { font: 500 var(--t-ui)/1 var(--sans); letter-spacing: .02em; min-height: 40px; padding: 0 16px; border: 1px solid var(--rule);
  background: none; color: var(--ink); cursor: pointer; }
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.theme { max-width: 1100px; margin: 0 auto; text-align: left; }
.theme h3 { font: italic 400 var(--s-2)/1.3 var(--serif); color: var(--accent); margin: 40px 0 16px; }
.themes.live .theme h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.th-q { display: grid; gap: 24px; }
.th-q blockquote { padding-top: 16px; border-top: 1px solid var(--rule); }
.th-q p { font: 400 italic var(--s-1)/1.5 var(--serif); margin-bottom: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .themes.live .theme:not([hidden]) blockquote { animation: th-in .5s ease both; }
  .themes.live .theme blockquote:nth-child(2) { animation-delay: .07s; }
  .themes.live .theme blockquote:nth-child(3) { animation-delay: .14s; }
  @keyframes th-in { from { opacity: 0; transform: translateY(10px); } }
}
.words .sub { margin-top: 48px; font-size: var(--t-small); }

/* before you book */
.answers { display: grid; gap: 48px 72px; padding-bottom: var(--sec); }
.truths > div { padding: 16px 0; border-top: 1px solid var(--rule); }
.truths h3 { font: 400 var(--s-2)/1.3 var(--serif); margin-bottom: 4px; }
.truths p { margin: 0; color: var(--muted); }
.qa { margin: 0; }
.qa > div { padding: 16px 0; border-top: 1px solid var(--rule); }
.qa dt { font: 400 var(--s-2)/1.3 var(--serif); margin-bottom: 4px; }
.qa dd { margin: 0; color: var(--muted); }
.ask { margin-top: 8px; }
.ask p:first-child { font: italic 400 var(--s-2)/1.3 var(--serif); color: var(--muted); margin-bottom: 8px; }
.ask a { line-height: 2; }

/* the close: one last photo, then the footer with Check dates and four short columns */
.closing img { aspect-ratio: 4 / 3; object-fit: cover; }
.foot { background: var(--ink); color: var(--ground); padding: 72px var(--g) 110px; font-size: var(--t-small); }
.foot p { margin: 0 0 8px; }
.foot a { text-decoration-color: rgba(237, 232, 224, .35); }
.foot-cta { text-align: center; }
.foot-draw { color: rgba(237, 232, 224, .55); width: 90px; margin: 0 auto 24px; }
.foot-name { font: 300 var(--s-4)/1.15 var(--serif); margin-bottom: 28px !important; }
.btn.light { background: var(--ground); color: var(--ink); border-color: var(--ground); }
.btn.light:hover { background: transparent; color: var(--ground); }
.foot-cols { max-width: var(--max); margin: 72px auto 0; padding-top: 40px; border-top: 1px solid rgba(237, 232, 224, .2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.foot-cols h2 { font: italic 400 var(--s-1)/1.3 var(--serif); color: rgba(237, 232, 224, .6); margin: 0 0 10px; letter-spacing: 0; }
.foot-cols p { font: 400 var(--t-small)/1.75 var(--sans); }
.foot-nav a, .foot-cols .foot-links a { display: block; margin: 0; text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.foot-credit { max-width: var(--max); margin: 0 auto 4px !important; font-size: 13px; color: rgba(237, 232, 224, .55); }
@media (max-width: 599px) { .foot-cols > div:nth-child(-n+2) { grid-column: 1 / -1; } }
.foot-cols + .foot-credit { margin-top: 48px !important; }
.foot-credit a { white-space: nowrap; }

/* the booking bar, on every screen at every width (K0293: our own version of The PIG's always-on bar). Its fields
   open the page's own calendar and guests panel just above it, so dates are chosen without scrolling back up; it
   steps aside while the booking line itself is on screen. */
.bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px var(--g); background: var(--ground); box-shadow: 0 -1px 0 var(--rule); font-size: var(--t-ui); color: var(--muted); }
.bbar p { margin: 0; }
.bbar b { color: var(--ink); font-weight: 500; }
/* .ready: no slide at load, when the page opens already at the booking line */
@media (prefers-reduced-motion: no-preference) { .bbar.ready { transition: transform .25s ease; } }
.bbar.away { transform: translateY(110%); }
.bb-f { display: block; min-width: 0; padding: 4px 0; background: none; border: 0; border-bottom: 1px solid var(--ink); text-align: left; cursor: pointer;
  color: var(--muted); font: 500 var(--t-ui)/1.3 var(--sans); letter-spacing: .02em; }
.bb-f span { display: block; color: var(--ink); font: 400 var(--s-1)/1.25 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-f span.empty { color: var(--muted); }
.bb-f:hover, .bb-f:focus-visible { border-bottom-color: var(--accent); }
.bb-f:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }  /* a border colour alone is no ring (keyboard check at 1440 px, 26 Oct) */
.bb-f:focus-visible span { text-decoration: underline; text-decoration-thickness: 1px; }
.js .bbar .bb-rate { display: none; }
.bbar.on .bb-fields { display: contents; }
.bb-fields { display: none; }
/* from the bar, the calendar and the guests panel open above it, wherever the page is */
html.from-bar .cal:not(.gp) { position: fixed; top: auto; bottom: 84px; left: 50%; transform: translateX(-50%); }
html.from-bar .gp { position: fixed; top: auto; bottom: 84px; left: auto !important; right: max(var(--g), calc(50% - 470px)); }
@media (max-width: 699px) {
  .bbar { gap: 10px; }
  .bb-f span { font-size: var(--s-1); }
  .bb-f.bb-co { display: none; }
  .bbar .btn { padding: 0 16px; }
  html.from-bar .cal:not(.gp), html.from-bar .gp { bottom: 0; left: 0 !important; right: 0; transform: none; }
}

/* phones */
@media (max-width: 699px) {
  .brand span { display: none; }
  .top { grid-template-columns: 1fr auto 1fr; }
  .sun { left: var(--g); right: auto; bottom: auto; top: 86px; text-align: left; }
  .book { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .book .f:nth-of-type(3) { grid-column: span 2; }
  .book .btn { grid-column: span 2; }
  .collage { margin-bottom: 12%; }
  .list > div { grid-template-columns: 1fr; }
  .hosts-photos { margin-bottom: 10%; }
}
@media (max-width: 380px) { .book { grid-template-columns: 1fr; } .book .f:nth-of-type(3), .book .btn { grid-column: auto; } }


/* wide screens: the 12-column layouts */
@media (min-width: 700px) {
  .bbar { justify-content: center; gap: 28px; padding: 12px var(--g); }
  .bbar.on .bb-f { width: 180px; }
}
@media (min-width: 900px) {
  .foot { padding-bottom: 120px; }
  /* e4: the price notes (nights, dog fee) sit on a 1440 x 900 first screen, as on live: e2 pushed them 60 px lower and the
     screenshot tester needed 2 actions for the dog fee where live needed 0 (test/visual_arm_e2) */
  .hero { height: 84vh; }
  .stay { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; padding-top: 32px; row-gap: 8px; }
  .stay .book { grid-column: 2; grid-row: 1 / 5; margin: 0; }
  .price b { grid-column: 1; }
  .stay .rating { grid-column: 1; grid-row: 2; }
  .stay .quote { grid-row: 5; }
  .intro, .ch, .rooms, .hosts, .where, .answers { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .intro-text { grid-column: 1 / 6; align-self: center; }
  .collage { grid-column: 7 / 12; margin-bottom: 10%; }

  .tub .ch-photo { grid-column: 1 / 8; margin-left: calc(-1 * var(--g)); }
  .tub .ch-text { grid-column: 9 / 13; align-self: end; }

  .inside { row-gap: 24px; }
  .inside .ch-text { grid-column: 1 / 5; grid-row: 1; align-self: center; }
  .inside .i1 { grid-column: 6 / 13; grid-row: 1; margin-right: calc(-1 * var(--g)); }
  .inside .i2 { grid-column: 2 / 6; grid-row: 2; margin-top: -12%; }
  .inside .i3 { grid-column: 8 / 11; grid-row: 2; margin-top: 8%; }

  .rooms-head { grid-column: 1 / 13; }
  .beds { grid-column: 1 / 13; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .rooms .more-list { grid-column: 1 / 13; margin-top: 0; }

  .hosts { padding-left: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); padding-right: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); }
  .hosts-photos { grid-column: 1 / 7; margin-bottom: 8%; }
  .hosts-text { grid-column: 8 / 13; align-self: center; }

  .tour { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: start; }
  .tour-list { position: sticky; top: 100px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .where-head { grid-column: 1 / 9; }
  .mapbox { grid-column: 1 / 9; aspect-ratio: 4 / 3; margin: 0 0 0 calc(-1 * var(--g)); }
  .times { grid-column: 9 / 13; grid-row: 2; }

  .th-q { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .closing img { aspect-ratio: 21 / 8; }
  .foot-cols { grid-template-columns: 1.2fr 1fr 1.5fr 1fr; }
  .foot-nav { columns: 2; column-gap: 24px; }

  .answers-head { grid-column: 1 / 6; }
  .answers { grid-template-rows: auto 1fr; }
  .answers .qa-wrap { grid-column: 7 / 13; grid-row: 1 / span 2; padding-top: 44px; }
  .answers .ask { grid-column: 1 / 6; grid-row: 2; align-self: start; }
}
/* desktop header: brand left, the section links and Book together on the right; Menu only below 1280 px.
   Between 700 and 1279 px Menu sits beside Book (K0293: "menu and book on the top are too far apart"). */
@media (min-width: 700px) {
  .top { grid-template-columns: auto 1fr auto auto; column-gap: 28px; }
  .top .brand { grid-column: 1; grid-row: 1; }
  .top .menu-btn { grid-column: 3; grid-row: 1; }
  .top > .btn { grid-column: 4; grid-row: 1; }
}
@media (min-width: 1280px) {
  .top .menu-btn { display: none; }
  .top nav { display: flex; grid-column: 2 / 4; grid-row: 1; justify-content: flex-end; gap: 26px; }
  .top nav a { text-decoration: none; white-space: nowrap; }
  .top nav a:hover, .top nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; }
  .top nav a[href^="tel"] { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .stay .book { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
  .stay .book .btn { grid-column: 1 / -1; }
}
/* short screens: a phone on its side is 320-430 px tall, while a tablet on its side or the smallest laptop is 600+.
   There the header (64 px) and the booking bar (75 px) took 36% of an 844 x 390 screen before Chrome's own bar
   (user, 27 Oct: "unusable"). Each bar becomes one 44-48 px row, and the header slides away while scrolling down
   (site.js), so reading leaves 89% of the screen to the page; controls stay 36-40 px, above WCAG 2.2's 24 px. */
/* a short laptop (1366 x 768 leaves about 625 px of page) gets the slim bars too, both kept on screen as K0293 asked:
   at full height they took 139 px, 22% of it (guest walk laptop1366, 27 Oct) */
@media (max-height: 499px), (min-width: 1000px) and (max-height: 799px) {
  .top, .top.stuck { padding-top: 4px; padding-bottom: 4px; }
  .top .btn { min-height: 36px; padding-top: 0; padding-bottom: 0; }
  .menu-btn { padding: 6px 0; }
  .bbar { padding-top: 4px; padding-bottom: 4px; }
  .bb-f { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
  .bbar .btn { min-height: 36px; padding-top: 0; padding-bottom: 0; }
  html.from-bar .cal:not(.gp), html.from-bar .gp { bottom: 48px; max-height: calc(100dvh - 56px); overflow-y: auto; }
}
@media (max-height: 499px) {
  .top.open nav { padding-top: 60px; padding-bottom: 16px; gap: 0; }
  .top.open nav a { font-size: var(--s-2); }
  /* the sheet's area links wrapped to 3 rows, 97 px of 320-342 (27 Oct probe): one row that scrolls sideways */
  .td-head { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 4px; padding-bottom: 4px; }
  .td-head .td-x { position: sticky; right: 0; flex: none; min-height: 36px; background: var(--ground); }
  .viewer figure { height: calc(100% - 44px); padding-top: 8px; }
  .viewer figcaption { margin-top: 4px; }
  .v-nav { height: 44px; }
}
/* a phone on its side: the photo takes the whole height, the controls and caption sit in the dark either side
   (site.js SIDE). The band under the photo took 80 of 360 px; a 4:3 photo filled 34% of the screen (user 27 Oct). */
@media (max-height: 499px) and (orientation: landscape) {
  .viewer figure { height: 100%; padding: 0; display: flex; align-items: center; justify-content: center; }
  .viewer figcaption { position: absolute; left: 12px; bottom: 10px; width: max(72px, calc((100vw - var(--pw, 60vw)) / 2 - 24px)); margin: 0; font-size: var(--t-ui); line-height: 1.35; }
  .v-nav { position: absolute; inset: 0; height: auto; pointer-events: none; }
  .v-nav > * { position: absolute; pointer-events: auto; }
  .v-prev { left: 12px; top: 50%; transform: translateY(-50%); }
  .v-next { right: 12px; top: 50%; transform: translateY(-50%); }
  .v-x { right: 12px; top: 6px; }
  .v-n { left: 12px; top: 14px; }
}
/* under 900 px tall (phones either way up, laptops) the header slides away while reading down and is back on the
   first move up: the bars took 16% of an upright phone and 14% of a 1366 x 768 laptop while reading, the header
   alone 44-64 px of it (27 Oct). K0293's aim, a header and booking bar always one move away, still holds. */
@media (max-height: 899px) { .top.tuck { transform: translateY(-100%); } }
@media (max-height: 899px) and (prefers-reduced-motion: no-preference) { .top { transition: transform .25s ease, background-color .3s ease, color .3s ease; } }
@media print { .top, .bbar, .stay { display: none; } .hero { height: auto; } }

/* Lenis wheel smoothing (site.js, K0294): its own scrolling replaces the CSS smooth scroll while it runs */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* chapter photos that step through their area (site.js, K0294) */
figure[data-steps] { position: relative; touch-action: pan-y; }
.steps { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 4px; margin: 0;
  padding: 4px; background: rgba(28, 26, 23, .62); color: #fff; border-radius: 999px; font-size: var(--t-ui); }
.steps .s-n { min-width: 4.5ch; text-align: center; font-variant-numeric: tabular-nums; }
.steps button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.steps button::before { content: ''; display: block; width: 9px; height: 9px; margin: auto; border: solid currentColor;
  border-width: 0 0 2px 2px; transform: translateX(2px) rotate(45deg); }
.steps .s-next::before { transform: translateX(-2px) rotate(-135deg); }
.steps button:hover { background: rgba(255, 255, 255, .16); }
.steps button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* area guide (area.html, 27 Oct 2026): one reading column of the lodge page's lists; the header starts on the ground
   colour because there is no photo under it */
.ag-top { grid-template-columns: 1fr auto 1fr; }
.ag-back { justify-self: start; font-size: var(--t-ui); text-decoration: none; padding: 10px 0; }
.ag-back::before { content: "\2190\00a0"; }
.ag-main { max-width: 1320px; margin: 0 auto; padding: 120px var(--g) var(--sec); }
.ag-head { max-width: 760px; }
.ag-head h1 { font-size: var(--s-4); margin-bottom: 20px; }
.ag-head p { color: var(--muted); max-width: 60ch; }
.ag-toc { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: var(--t-ui); }
.ag { margin-top: 72px; scroll-margin-top: 90px; }
.ag[hidden], .ag .list > div[hidden] { display: none; }
.ag .list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
/* each section opens on its photo: full width on a phone, half the page beside the text from 1000 px, sides alternating */
.ag-ph { margin: 0 calc(-1 * var(--g)) 28px; }
.ag-ph img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ag-ph figcaption { margin: 8px var(--g) 0; font-size: var(--t-ui); color: var(--muted); }
.ag dd p { margin: 0; }
.ag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px !important; font-size: var(--t-ui); }
.ag-meta .tag { padding: 3px 10px; border-radius: 999px; background: var(--ground-2); color: var(--ink); }
.ag-meta .tag.ok { background: #DCE6D5; color: #2F4A2A; }
.ag-meta a { font-weight: 500; text-underline-offset: 3px; }
.ag-today { margin-bottom: 6px !important; font-weight: 600; color: #2F4A2A; }
.ag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; font-size: var(--t-ui); }
.ag-filter[hidden] { display: none; }
.ag-filter span { margin-right: 4px; color: var(--muted); }
.ag-filter button { min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: none;
  color: var(--ink); font: 500 var(--t-ui)/1 var(--sans); cursor: pointer; }
.ag-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }
@media (min-width: 1000px) {
  .ag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: start; margin-top: 96px; }
  .ag-ph { position: sticky; top: 96px; margin: 0; }
  .ag-ph figcaption { margin-left: 0; }
  .ag:nth-of-type(even) .ag-ph { order: 2; }
  .ag .list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .ag-tx > h2 { margin-top: 0; }
}
.ag-src { margin-top: 14px; font-size: var(--t-ui); color: var(--muted); }
.ag-end { margin-top: 72px; }
@media (max-width: 559px) {
  .ag .list > div { grid-template-columns: 1fr; }
  .ag-top .brand span { display: none; }
}
@media (min-width: 700px) { .top.ag-top .ag-back { grid-column: 3; grid-row: 1; justify-self: end; } }  /* beside Book, as Menu sits on the lodge page */