/* ============================================================
   HOLIDAY MODE
   Loaded only by the holidays page. Same Nottage palette, locked by
   design v2 section 2, redistributed: photography and Ink lead, Dune
   Stone carries the grounds that Paper carries on the ownership pages,
   and Paper appears once, around the booking form. Nothing here is a
   new colour, and nothing here reaches the ownership pages.
   ============================================================ */

/* --- hero: the photograph runs full bleed and full strength, and the
       words sit beneath it on their own ink ground. No scrim. --- */
.hol-stage{display:block;width:100%;height:clamp(340px,62svh,680px);object-fit:cover;background:var(--ink)}
.hol-say{background:var(--ink);color:var(--paper);padding-block:clamp(38px,5.5vw,74px)}
.hol-say .d1{color:var(--paper);max-width:none}
.hol-say .lede{color:var(--paper-70);max-width:46ch;margin-top:20px}
.hol-say .hero-cta{margin-top:30px}

/* --- the lodges. Tom, 12 September: the options were too hard to see and
       the pictures were not the same size as each other. They were in
       alternating rows at two different aspect ratios, which is a layout
       you read one at a time rather than compare. Four identical cells,
       same picture size, same line in the same place, two up on a desk
       and one up on a phone. --- */
/* One sideways row: two lodges and the edge of the third on a wide screen,
   one and the edge of the next on a phone (Tom, 28 Sep). */
.stay{
  display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:clamp(22px,3vw,44px);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;padding-bottom:4px;
}
.stay::-webkit-scrollbar{display:none}
.stay:focus-visible{outline:2px solid var(--clay-ink);outline-offset:6px}
.stay-row{scroll-snap-align:start}
@media(min-width:900px){ .stay{grid-auto-columns:calc((100% - 2 * clamp(22px,3vw,44px)) / 2.35)} }
.stay-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.stay-nav{display:flex;gap:10px;flex:none}
.stay-nav[hidden]{display:none}
.stay-nav button{
  width:48px;height:48px;border:1px solid var(--ink-38);background:none;cursor:pointer;position:relative;
  transition:border-color .3s var(--ease),opacity .3s var(--ease);
}
.stay-nav button::before{
  content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;
  border-top:1px solid var(--ink);border-right:1px solid var(--ink);
}
.stay-prev::before{transform:translateX(2px) rotate(-135deg)}
.stay-next::before{transform:translateX(-2px) rotate(45deg)}
.stay-nav button:hover{border-color:var(--ink)}
.stay-nav button:disabled{opacity:.3;cursor:default}
.stay-nav button:focus-visible{outline:2px solid var(--clay-ink);outline-offset:3px}
@media(max-width:899px){ .stay-nav{display:none} }
.stay-row{display:flex;flex-direction:column}
.stay-shot{display:block}
.stay-shot img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.stay-body{display:flex;flex-direction:column;flex:1 1 auto;padding-top:22px}
.stay-body h3{margin:0;font-family:var(--display);font-weight:300;line-height:1.08;
  font-size:clamp(1.6rem,2.4vw,2.15rem)}
/* one line of copy holds the same height in all four, so the facts and the
   buttons line up across the pair and the four read as one set */
.stay-line{margin-top:12px;max-width:38ch;color:var(--ink-85);flex:1 1 auto}
.stay-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:20px;padding-top:14px;
  border-top:1px solid var(--ink-16);font-size:12px;letter-spacing:1.4px;text-transform:uppercase}
.stay-facts span{color:rgba(20,20,20,.75)}
.stay-row .hero-cta{margin-top:20px;align-items:center;gap:20px}

/* --- photography reaching the viewport edges, carrying no words --- */
.hol-full{display:block;width:100%;height:clamp(300px,68svh,760px);object-fit:cover;background:var(--ink)}

/* --- the destination: named places, photographs, no icon grid --- */
.places{display:grid;gap:clamp(40px,5vw,72px);margin-top:clamp(36px,5vw,64px)}
.place img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.place h3{margin:22px 0 0;font-family:var(--display);font-weight:300;line-height:1.15;
  font-size:clamp(1.3rem,2vw,1.75rem)}
.place p{margin-top:10px;max-width:36ch}
.ink .place p{color:var(--paper-70)}
@media(min-width:760px){ .places{grid-template-columns:repeat(3,1fr)} }

/* --- practical facts, scanning quickly rather than in long lists --- */
.knowing{display:grid;gap:clamp(26px,3vw,44px);margin-top:clamp(30px,4vw,52px)}
@media(min-width:760px){ .knowing{grid-template-columns:repeat(3,1fr)} }
.knowing h4{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-quiet);margin:0 0 14px}
.knowing ul{margin:0;padding:0;list-style:none}
.knowing li{padding:9px 0;border-top:1px solid var(--ink-16)}

/* --- ownership, after the holiday and visually quieter than it --- */
.aside-own{border-top:1px solid var(--ink-16);padding-top:clamp(22px,3vw,34px);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline}
.aside-own p{margin:0;max-width:52ch;color:var(--ink-quiet)}

/* --- booking is never more than a thumb away on a phone --- */
.hol-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--ink);border-top:1px solid var(--paper-20)}
.hol-bar .btn{flex:1 1 auto;justify-content:center;margin:0;white-space:nowrap;
  padding-inline:16px;font-size:12px}
.hol-bar .btn-clay{flex:0 0 auto}
@media(max-width:900px){
  .hol-bar{display:flex}
  body.hol{padding-bottom:74px}
  .stay-facts{gap:4px 18px;font-size:11px}
}

/* The photography is of the model, and the page says so rather than
   letting somebody assume the lodge they book is the one dressed for
   the showground. Tom, 12 September. */
.shot-note{margin-top:20px;font-size:12px;color:var(--ink-quiet);max-width:52ch}
.ink .shot-note{color:var(--paper-45)}

/* The facts block on a lodge page sits on ink, but .hol-say is not .ink,
   so every "…ink .fact…" rule in the stylesheet missed it: the labels kept
   their dark colour and disappeared, and the rules between the facts went
   with them. On a phone that left four bare words, Four Two Two Two, a
   screen apart with nothing to say what they counted. Tom, 12 September. */
.hol-say .facts,.hol-say .fact{border-color:var(--paper-20)}
.hol-say .fact dt{color:var(--paper-quiet)}
.hol-say .fact dd{color:var(--paper)}
/* and they stay a set of four on a phone rather than a column of numbers */
@media(max-width:520px){
  .hol-say .facts.g-4{grid-template-columns:1fr 1fr}
  .hol-say .fact{padding-block:18px;border-bottom:1px solid var(--paper-20)}
  .hol-say .fact:nth-child(2n+1){padding-left:0;padding-right:clamp(16px,4vw,26px)}
  .hol-say .fact:nth-child(2n){border-right:0;padding-right:0;padding-left:clamp(16px,4vw,26px)}
  .hol-say .fact:nth-child(2n){border-left:1px solid var(--paper-20)}
  .hol-say .fact:nth-last-child(-n+2){border-bottom:0}
  .hol-say .fact dd{font-size:1.45rem;margin-top:8px}
}

/* A phone asks a landscape photograph to fill a portrait slot: at 375 the
   stage was 503px tall, so a 1500x859 interior lost both ends and showed
   the middle, which on the Scandinavian is the kitchen floor. Square on a
   phone keeps it generous and crops far less, and the interiors sit a
   little above centre because that is where the room is. */
@media(max-width:760px){
  .hol-stage{height:auto;aspect-ratio:1/1;object-position:center 42%}
}

/* .btn and .btn-clay both carry ink colours, and .hol-say / .hol-bar are ink
   grounds that were not telling them so: the buttons were ink on ink, with
   only the clay border faintly showing. They now carry .on-ink, which is the
   class that exists for this, and clay keeps its own edge rather than being
   flattened to paper by it. Tom, 12 September. */
.on-ink .btn-clay{border-color:var(--clay);color:var(--paper)}
.on-ink .btn-clay:hover{background:var(--clay);color:var(--ink);border-color:var(--clay)}

/* ============================================================
   THE HOLIDAY MASTHEAD
   Codex, 12 September, and Tom's own requirement: nobody should drift
   onto these pages by mistake. The body already reads as a holiday; the
   part a visitor sees the whole time did not. The header was the same
   translucent Paper, the same logo and the same components as the sales
   site, and the one phrase that separates renting from buying, "by the
   night", appeared nowhere on any of the five pages.
   ============================================================ */
.hol-hdr.solid{
  background:var(--ink);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:var(--paper-20);
}
.hol-hdr .hol-mast{
  margin-right:auto;padding-left:clamp(12px,1.6vw,22px);
  font-size:10.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--clay);white-space:nowrap;
}
.hol-hdr .nav a{color:var(--paper-70)}
/* The three section links belong to the holiday side, so they sit with the
   masthead in clay; "Lodges for sale" stands apart on the right as the way
   out to the other site (Tom, 28 Sep: "a little bit stuck on that page"). */
.hol-hdr .hol-mast{margin-right:0}
.hol-hdr .hol-sub{margin-right:auto;margin-left:clamp(12px,1.4vw,22px);padding-left:clamp(12px,1.4vw,22px);border-left:1px solid var(--paper-20);gap:clamp(14px,1.6vw,26px)}
.hol-hdr .hol-sub a{color:var(--clay);opacity:.85}
.hol-hdr .hol-sub a:hover{opacity:1;color:var(--clay)}
.hol-hdr .hol-out{padding-right:clamp(12px,1.4vw,22px)}
.hol-hdr .hol-out a{color:var(--paper)}
/* The menu button's drawer, grouped the same way as the header: this side
   in clay under its masthead, the way out to the sales site beneath a rule. */
.hol-drawer-k{font-size:10.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:var(--clay);margin-bottom:14px}
.hol-drawer a.hol-in{color:var(--clay)}
.hol-drawer a.hol-in:hover{color:var(--paper)}
.hol-drawer-out{display:flex;flex-direction:column;margin-top:28px;padding-top:22px;border-top:1px solid var(--paper-20)}
.hol-drawer-out a{font-size:clamp(1.25rem,3.4vw,1.6rem)}
.hol-drawer-out .arw{font-family:var(--body);font-size:.8em;margin-left:.45em}
@media(max-width:1320px){ .hol-hdr .nav{display:none} .hol-hdr .burger{display:block} .hol-hdr .hol-mast{margin-right:auto} }
@media(max-width:1480px){ .hol-hdr .tel-num{display:none} .hol-hdr .tel-icon{display:block} }
.hol-hdr .nav a:hover,.hol-hdr .nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--clay)}
.hol-hdr .tel{color:var(--paper)}
.hol-hdr .burger span{background:var(--paper)}
/* The button too. Third time an ink ground of mine has been built without
   telling .btn about it, so it is listed here beside the others rather than
   left to be rediscovered. */
.hol-hdr .btn{color:var(--paper);border-color:var(--paper-45);white-space:nowrap}
.hol-hdr .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
/* Availability was invisible between 901 and 1200: the site stylesheet hides
   the header button at 1200 and below, and the holiday bar only appears at 900
   and below. Every iPad and small laptop had no way to check dates. */
@media(min-width:901px){
  .hol-hdr .hdr-r .btn{display:inline-flex}
}
@media(max-width:560px){
  .hol-hdr .hol-mast{font-size:9.5px;letter-spacing:1.4px;padding-left:10px}
}

/* The price, in holiday language. RMS prices by the night on a derived
   ladder from Base Rate: two nights +50%, then -10% to -25% from four nights
   to seven, and seven or more nights all take the seven night rate. "From"
   is the true floor, a seven night stay in a low period: Edmonton 195,
   Margaux and Moselle 169.50, shown as 170 (Tom, 19 September 2026). */
.stay-price{
  margin-top:18px;font-family:var(--display);font-weight:300;line-height:1.1;
  font-size:clamp(1.2rem,1.8vw,1.5rem);color:var(--ink);
}
.stay-price small{
  display:block;margin-bottom:7px;font-family:var(--body);font-size:11px;
  font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--ink-quiet);
}
.on-ink .stay-price{color:var(--paper)}
.on-ink .stay-price small{color:var(--paper-quiet)}

/* ============================================================
   PLAN YOUR STAY (book.html), after the Chancery Rosewood
   ============================================================ */
.book-plan{padding-top:calc(var(--hdr-h,92px) + clamp(40px,6vw,80px))}
.book-head{text-align:center}
.book-head .d1{margin-top:16px}
.book-grid{display:grid;gap:clamp(22px,3vw,40px);margin-top:clamp(34px,5vw,64px);align-items:start}
@media(min-width:960px){ .book-grid{grid-template-columns:minmax(260px,.9fr) 2.1fr} }
.book-side{border:1px solid var(--ink-16)}
.book-panel{padding:22px 24px;position:relative}
.book-panel + .book-panel{border-top:1px solid var(--ink-16)}
.book-k{display:block;font-size:10.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink)}
.book-v{margin-top:12px;font-family:var(--display);font-weight:300;font-size:1.15rem;line-height:1.35}
.book-clear{position:absolute;top:20px;right:22px;background:none;border:0;padding:0 0 2px;cursor:pointer;
  font-size:12px;color:var(--ink);border-bottom:1px solid var(--ink-38)}
.book-step{display:grid;grid-template-columns:1fr 36px 36px 36px;align-items:center;gap:6px;margin-top:14px;font-size:14px}
.book-step button{width:36px;height:36px;border:1px solid var(--ink-16);background:none;cursor:pointer;font-size:16px;color:var(--ink)}
.book-step button:hover{border-color:var(--ink)}
.book-step output{text-align:center;font-family:var(--display);font-size:1.15rem}
.book-dogs{background:var(--dune);padding-top:16px;padding-bottom:16px}
.book-dogs .book-dogs-step{margin-top:0}
.book-dogs-line{margin-top:8px;font-size:10.5px;font-style:italic;color:rgba(20,20,20,.75)}
@media(min-width:960px){
  .book-grid{align-items:stretch}
  .book-side{display:flex;flex-direction:column}
  .book-dogs{flex:1;display:flex;flex-direction:column}
  .book-dogs{justify-content:center}
}

.book-cal{position:relative;border:1px solid var(--ink-16);padding:clamp(20px,2.6vw,34px)}
.book-months{display:grid;gap:clamp(24px,3vw,44px)}
@media(min-width:700px){ .book-months{grid-template-columns:1fr 1fr} .book-month + .book-month{border-left:1px solid var(--ink-16);padding-left:clamp(24px,3vw,44px)} }
@media(max-width:699px){ .book-month + .book-month{display:none} }
.book-month-name{text-align:center;font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px}
.book-wk,.book-days{display:grid;grid-template-columns:repeat(7,1fr)}
.book-wk span{text-align:center;font-size:10px;letter-spacing:1.5px;color:var(--ink-quiet);padding-bottom:8px}
.book-day{height:44px;border:0;background:none;cursor:pointer;font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.book-day:hover{outline:1px solid var(--ink);outline-offset:-1px}
.book-day.is-past{color:var(--ink-16);cursor:default}
.book-day.is-past:hover{outline:0}
.book-day.is-in{background:var(--dune)}
.book-day.is-start,.book-day.is-end{background:var(--ink);color:var(--paper)}
.book-day:focus-visible{outline:2px solid var(--clay-ink);outline-offset:-2px}
.book-cal-prev,.book-cal-next{position:absolute;top:clamp(16px,2.2vw,28px);width:36px;height:36px;border:0;background:none;cursor:pointer;z-index:1}
.book-cal-prev{left:clamp(12px,1.8vw,24px)}.book-cal-next{right:clamp(12px,1.8vw,24px)}
.book-cal-prev::before,.book-cal-next::before{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
.book-cal-prev::before{transform:translateX(2px) rotate(-135deg)}
.book-cal-next::before{transform:translateX(-2px) rotate(45deg)}
.book-cal-prev:disabled{opacity:.25;cursor:default}

.book-lodges{display:grid;gap:18px;margin-top:clamp(28px,4vw,48px)}
.book-lodge{
  display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,34px);padding:clamp(14px,1.8vw,24px);cursor:pointer;
  border:1px solid var(--ink-16);background:var(--paper);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
@media(min-width:820px){ .book-lodge{grid-template-columns:minmax(0,.95fr) minmax(0,1.9fr)} }
.book-lodge:hover{border-color:var(--ink-38)}
.book-lodge.is-chosen{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.book-lodge-shot img{display:block;width:100%;height:100%;min-height:220px;aspect-ratio:4/3;object-fit:cover}
.book-lodge-body{display:flex;flex-direction:column;padding:clamp(4px,1vw,10px) clamp(4px,1vw,12px) 0 0}
.book-lodge-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.book-lodge-name{font-family:var(--display);font-weight:300;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.05;margin:0}
.book-lodge-more{flex:none;font-size:13px;color:var(--ink);border-bottom:1px solid var(--ink-38);padding-bottom:2px}
.book-lodge-more:hover{border-bottom-color:var(--ink)}
@media(max-width:599px){ .book-lodge-top{flex-wrap:wrap;gap:10px 16px} .book-lodge-name{font-size:clamp(2.6rem,12vw,3.2rem);flex:1 1 100%} }
.book-lodge-facts{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(20,20,20,.75)}
.book-lodge-facts span{white-space:nowrap}
.book-lodge-line{margin-top:14px;color:var(--ink-85);max-width:52ch}
.book-lodge-rate{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 30px;
  margin-top:auto;padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--ink-16);
}
.book-lodge-body > .book-lodge-line{margin-bottom:clamp(18px,2.4vw,28px)}
.book-lodge-rate-name{font-family:var(--display);font-size:1.25rem}
.book-lodge-rate-what .small{margin-top:6px;color:rgba(20,20,20,.75);max-width:34ch}
.book-lodge-rate-price{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.book-lodge-price{font-family:var(--display);font-size:1.6rem;line-height:1}
.book-lodge-per{margin-top:6px;font-size:12px;font-style:italic;color:rgba(20,20,20,.75)}
.book-lodge-choose{margin-top:16px}
.book-lodge.is-chosen .book-lodge-choose{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.book-msg-top{margin:0 0 -8px;grid-column:1/-1}
.book-go .tlink{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font:inherit;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.book-msg{margin-top:18px;color:var(--alert);font-size:14px}
.book-go{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(30px,4vw,48px)}
.book-go .btn{min-width:min(100%,340px);justify-content:center}
.book-go .small{color:var(--ink-quiet)}

/* Questions under the practical lists: the site's FAQ, set on the dune band */
.hol-faq{margin-top:clamp(44px,6vw,72px);max-width:760px}
.hol-faq summary{color:var(--ink)}