/* ============================================================
   NOTTAGE PARK LODGES
   Built to nottage-design-system.md (brand-wide, locked).
   Palette, type, behaviours and stop list are not to be varied.
   ============================================================ */

:root{
  /* Palette — locked */
  --ink:#141414;
  --paper:#faf7f0;
  --dune:#e2ddc8;
  --clay:#c99f7a;
  /* Clay on paper is 2.25:1 and on dune 1.77:1, so it fails AA for text at
     any size, and it was carrying 10.5px form labels. This is the same hue
     taken down to 5.89:1 on paper and 4.63:1 on dune. Rules, borders and
     the to-order flag keep --clay. */
  --clay-ink:#85552a;
  --alert:#b3281e;
  --gold:#cf9e25;

  /* Muted values, per design system §2 */
  --ink-85:rgba(20,20,20,.85);
  --ink-60:rgba(20,20,20,.6);
  --ink-38:rgba(20,20,20,.38);
  /* Small text needs 4.5:1. --ink-38 measures 2.41:1 on paper and 2.32:1 on
     dune, so every eyebrow, label and caption set in it failed. .62 is the
     lightest that clears 4.5:1 on both grounds (5.05:1 and 4.62:1), so it is
     the closest this can sit to the intended weight and still be readable.
     --ink-38 stays as it was for rules, borders and decoration. */
  --ink-quiet:rgba(20,20,20,.62);
  --ink-16:rgba(20,20,20,.16);
  --ink-08:rgba(20,20,20,.08);

  --paper-70:rgba(250,247,240,.7);
  --paper-45:rgba(250,247,240,.45);
  /* Text needs more than a hairline border does. Paper at 45% over ink is
     4.3:1, just under the 4.5:1 AA asks for at these sizes, and .small and
     figcaptions are the smallest type on the site. This is the text weight;
     --paper-45 stays where it is for rules and borders. */
  --paper-quiet:rgba(250,247,240,.62);
  --paper-20:rgba(250,247,240,.2);

  --display:'Fraunces',Georgia,serif;
  --body:'Montserrat',sans-serif;

  /* Structural rhythm. Negative space is structural, not leftover. */
  --gut:clamp(20px,5vw,64px);
  --band:clamp(72px,11vw,168px);
  --measure:64ch;

  --line:1px solid var(--ink-16);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}

::selection{background:var(--clay);color:var(--ink)}

/* ── Focus, visible and on-brand ── */
:focus-visible{outline:2px solid var(--clay-ink);outline-offset:3px}
/* Clay reads on ink and disappears on paper; clay-ink does the reverse.
   The form fields already made this choice, so the whole site follows. */
/* The collection panel is paper, not ink, so it keeps the default. */
.ink :focus-visible,.on-ink :focus-visible,.hdr.over :focus-visible,
.ftr :focus-visible,.drawer :focus-visible{
  outline-color:var(--clay)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:14px 22px;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

/* ============================================================
   TYPE
   Display: Fraunces 300 only. Never bold at display scale.
   Body/UI: Montserrat 400 body, 500 labels. Never bold, never italic.
   ============================================================ */

.eyebrow{
  font-family:var(--body);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--ink-60);
  display:block;
}
.on-ink .eyebrow,.ink .eyebrow{color:var(--dune)}

.d1,.d2,.d3,.d4{
  font-family:var(--display);
  font-weight:300;
  font-variation-settings:'opsz' 120,'SOFT' 0,'WONK' 0;
  line-height:1.04;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.d1{font-size:clamp(2.15rem,6.2vw,5.4rem)}
.d2{font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.08}
/* .d3 is set once, for every width, rather than patched per breakpoint.
   'opsz' 48 rather than the 120 the other display sizes use: at the 27 to
   38px this actually renders at, 120 draws hairlines thin enough that the
   16px body sans beside it reads as the louder of the two, and 24 goes too
   wide — the same sentence is 28% wider at 24 than at 120.
   The ramp is 1.2rem + 1.6vw rather than 2.6vw, which sagged to 26.6px at
   1024px: smaller than on a phone, and the weakest heading-to-body ratio
   anywhere on the site. */
.d3{
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);
  font-variation-settings:'opsz' 48;
  font-weight:340;
  line-height:1.16;
}
/* .d4 never renders above 25px at any width, so the shared 'opsz' 120 was
   five to six times too high everywhere, desktop included. One value covers
   its whole range. */
.d4{font-size:clamp(1.25rem,1.7vw,1.55rem);line-height:1.2;letter-spacing:-.005em;
    font-variation-settings:'opsz' 32}

.lede{
  font-size:clamp(1.02rem,1.28vw,1.17rem);
  line-height:1.75;
  color:var(--ink-85);
  max-width:52ch;
}
.body{color:var(--ink-85);max-width:var(--measure)}
.body p+p{margin-top:1.1em}
.small{font-size:13px;line-height:1.7;color:var(--ink-60)}
.on-ink .lede,.ink .lede{color:var(--paper-70)}
.on-ink .body,.ink .body{color:var(--paper-70)}
.on-ink .small,.ink .small{color:var(--paper-quiet)}

/* Clay accent rule — the document signature, §5 */
.rule-clay{width:56px;height:3px;background:var(--clay);border:0;margin:26px 0 0}

/* ============================================================
   LAYOUT
   ============================================================ */

.wrap{width:100%;max-width:1380px;margin:0 auto;padding-inline:var(--gut)}
/* The browser hides [hidden] with display:none, which any explicit display
   in this file beats. .btn is inline-flex and .hero-cta is flex, so the RMS
   booking buttons carried the attribute and showed anyway, live, for a day.
   One global rule, and hidden means hidden. */
[hidden]{display:none!important}
.nowrap{white-space:nowrap}
.narrow{max-width:980px}

section{position:relative}
[id]{scroll-margin-top:104px}
.band{padding-block:var(--band)}
.band-half{padding-block:calc(var(--band)*.62)}

.ink{background:var(--ink);color:var(--paper)}
.dune{background:var(--dune)}
.paper{background:var(--paper)}

/* Editorial column — eyebrow, display heading, short body, ghost button */
.editorial{max-width:60ch}
.editorial .d2,.editorial .d1{margin-top:20px}
.editorial .lede,.editorial .body{margin-top:26px}
.editorial .btn{margin-top:38px}
/* A lone button after editorial text needs that air. A pair inside .hero-cta
   does not: the row already carries its own margin above and a 14px gap
   between, so the button's own margin was doubling the space above the pair
   and, once they stack on a phone, opening a hole between them. One gap. */
.editorial .hero-cta .btn{margin-top:0}

.grid{display:grid;gap:clamp(28px,4vw,64px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{grid-template-columns:1fr 1fr;align-items:center}
.split-wide{grid-template-columns:1.05fr .95fr;align-items:center}
.split-text{grid-template-columns:.85fr 1.15fr;align-items:start}

@media(max-width:900px){
  .g-2,.g-3,.g-4,.split,.split-wide,.split-text{grid-template-columns:1fr}
}

/* Optical size for the two that scale a long way. Desktop is left alone:
   .d1 at 86px against 'opsz' 120 is a sensible ratio and reads as intended.
   It is the small end that was wrong, where the same letterforms are drawn
   for text three and a half times larger and go to hairlines. Stepped rather
   than switched once, so nothing sags between the two. */
@media(max-width:1200px){
  .d2{font-variation-settings:'opsz' 80}
}
@media(max-width:900px){
  .d1{font-variation-settings:'opsz' 64}
  .d2{font-variation-settings:'opsz' 56}
}

/* ============================================================
   BUTTONS — thin outlined ghost only. Radius never above 4px.
   ============================================================ */

.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--body);font-weight:500;
  font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:15px 26px;
  background:none;cursor:pointer;
  border-radius:0;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn .arw{transition:transform .5s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

.on-ink .btn,.ink .btn{color:var(--paper);border-color:var(--paper-45)}
.on-ink .btn:hover,.ink .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.btn-clay{border-color:var(--clay-ink);color:var(--ink)}
.btn-clay:hover{background:var(--clay);color:var(--ink);border-color:var(--clay)}

/* Quiet text link with a rule under it */
.tlink{
  display:inline-block;
  font-weight:500;font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--ink-38);
  transition:border-color .45s var(--ease),color .45s var(--ease);
}
.tlink:hover{border-color:var(--ink)}
.on-ink .tlink,.ink .tlink{border-color:var(--paper-20);color:var(--paper)}
.on-ink .tlink:hover,.ink .tlink:hover{border-color:var(--paper)}

/* ============================================================
   HEADER
   ============================================================ */

.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:20px var(--gut);
  transition:background .55s var(--ease),padding .55s var(--ease),border-color .55s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.over{background:transparent}
.hdr.solid{
  background:rgba(250,247,240,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--ink-08);
  padding-block:13px;
}

.brand{display:flex;align-items:center;flex:none}
/* Scaled, not resized. Animating an image's width re-rasterises it and relayouts
   the header row every frame; a transform is composited and costs nothing. */
.brand img{
  width:clamp(126px,13vw,168px);height:auto;
  transform-origin:left center;
  transition:transform .55s var(--ease);
}
.hdr.solid .brand img{transform:scale(.82)}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
/* The 3px underline gap and its 1px border are bottom-only, which lifts the
   text off centre. 4px on top puts it back, so every header item shares a
   centre line with the button. Measured, not guessed. */
.nav a{
  font-weight:500;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-60);
  padding-top:4px;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .4s var(--ease),border-color .4s var(--ease);
  white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--clay-ink)}
/* Holidays, from every sales page: set apart after a rule, as "Lodges for
   sale" is on the holiday side, so it reads as the other half of the site
   rather than another page of this one (Tom, 28 Sep). */
.own-out{padding-left:clamp(14px,1.6vw,26px);margin-left:clamp(14px,1.6vw,26px);border-left:1px solid var(--ink-16)}
.hdr.over .own-out{border-left-color:var(--paper-20)}
.own-out .arw,.own-drawer-out .arw{margin-left:.45em}
/* Room for it: below 1600 the gaps close up and the number becomes the
   phone icon, as on the holiday side. */
@media(min-width:1201px) and (max-width:1600px){
  .hdr .nav{gap:clamp(14px,1.5vw,24px)}
  .own-out{padding-left:14px;margin-left:14px}
  .hdr:has(.own-out) .tel-num{display:none}
  .hdr:has(.own-out) .tel-icon{display:block}
}
.own-drawer-out{display:flex;flex-direction:column;margin-top:28px;padding-top:22px;border-top:1px solid var(--paper-20)}
.own-drawer-out a{font-size:clamp(1.25rem,3.4vw,1.6rem)}
.own-drawer-out .arw{font-family:var(--body);font-size:.8em}

/* Over a dark hero the header inverts */
.hdr.over .nav a{color:var(--paper-70)}
.hdr.over .nav a:hover,.hdr.over .nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--clay-ink)}
.hdr.over .tel{color:var(--paper)}
.hdr.over .btn{color:var(--paper);border-color:var(--paper-45)}
.hdr.over .btn:hover{background:var(--paper);color:var(--ink)}

.hdr-r{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
/* Sits in the same row as the nav links, so it needs their box model too:
   they carry a 3px underline gap and without it the number reads 3px low. */
.tel{
  font-weight:500;font-size:10.5px;letter-spacing:2.2px;color:var(--ink);white-space:nowrap;
  padding-top:4px;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.tel:hover{border-bottom-color:var(--clay-ink)}
.tel:hover{color:var(--clay-ink)}

.burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer;position:relative}
.burger span{
  position:absolute;left:8px;right:8px;height:1px;background:var(--ink);
  transition:transform .45s var(--ease),opacity .3s var(--ease),background .4s var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:23px}
.hdr.over .burger span{background:var(--paper)}
body.menu-open .burger span{background:var(--paper)}
body.menu-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:1200px){
  .nav,.hdr-r .btn{display:none}
  .burger{display:block}
}
.hdr:has(.own-out) .hdr-r .btn{white-space:nowrap;flex:none}
/* With Holidays in the sales header, the row needs about 180px more before it fits. */
@media(max-width:1380px){
  .hdr:has(.own-out) .nav,.hdr:has(.own-out) .hdr-r .btn{display:none}
  .hdr:has(.own-out) .burger{display:block}
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,9vw,80px);
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s;
}
body.menu-open .drawer{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.drawer a{
  font-family:var(--display);font-weight:300;
  /* 7vw with a 3rem ceiling reached 48px on a tablet and filled the screen
     with six words. Smaller ceiling, gentler slope, tighter leading. */
  font-size:clamp(1.6rem,4.4vw,2.05rem);line-height:1.38;
  color:var(--paper);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .4s var(--ease);
}
.drawer a:hover{color:var(--clay-ink)}
body.menu-open .drawer a{opacity:1;transform:none}
.drawer a:nth-child(1){transition-delay:.10s}
.drawer a:nth-child(2){transition-delay:.16s}
.drawer a:nth-child(3){transition-delay:.22s}
.drawer a:nth-child(4){transition-delay:.28s}
.drawer a:nth-child(5){transition-delay:.34s}
.drawer-foot{margin-top:44px;padding-top:26px;border-top:1px solid var(--paper-20)}

/* ============================================================
   HERO
   ============================================================ */

/* The film runs full strength, full bleed, and the type has its own ground
   beneath it. No veil over the picture: the film cuts to a white kitchen at
   eight seconds and no honest amount of gradient keeps paper type legible
   over that. A panel does. */
.hero{position:relative;background:var(--ink);overflow:hidden}
.hero-media{position:relative;height:72vh;height:72svh;background:var(--ink) url(../video/nottage-film-poster.jpg) center/cover no-repeat}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
/* Invisible until the 'playing' event: a refused autoplay otherwise shows the
   film's first frame, which is black, instead of the poster behind it. */
.hero-media video{opacity:0;transition:opacity .9s var(--ease)}
.hero-media video.is-playing{opacity:1}
/* No scrim. The film is dark enough where the type sits (measured 27 to 105
   of 255 across its length), and CLAUDE.md is explicit: photographs run at
   full strength. If the type ever needs help, give it a ground, not a veil. */
.hero-inner{position:relative;width:100%;background:var(--ink);padding-block:clamp(44px,6vw,80px) clamp(40px,5vw,64px)}
.hero .d1{color:var(--paper);max-width:19ch}
.hero .eyebrow{color:var(--dune)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
/* On a phone only the headline sits on the film. The buttons and the facts
   drop below it onto Paper, so the picture is not carrying a page of text. */
@media(max-width:900px){
  .hero{background:var(--paper);overflow:visible}
  .hero-media{height:64vh;height:64svh}
  .hero-inner{background:none;padding-block:0}

  /* The type gets its own ground: a full-bleed ink panel beneath the film,
     not a veil laid over it. The film runs at full strength above. */
  .hero-head{
    background:var(--ink);
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
    padding-block:clamp(30px,8vw,48px) clamp(28px,7vw,44px);
  }
  .hero .d1{max-width:none}

  .hero-below{padding-block:clamp(26px,6vw,40px) clamp(34px,9vw,56px)}
  /* .hero .btn is declared later in the file, so these need the extra class
     to win rather than relying on source order. */
  .hero .hero-below .btn{color:var(--ink);border-color:var(--ink)}
  .hero .hero-below .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .hero-cta{margin-top:0}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero .hero-below .hero-foot{border-top-color:var(--ink-16);color:var(--ink-quiet);margin-top:clamp(26px,6vw,38px)}
}
.hero .btn{border-color:rgba(250,247,240,.78);color:var(--paper)}
.hero .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.hero-foot{
  margin-top:clamp(38px,5vw,60px);padding-top:22px;
  border-top:1px solid var(--paper-20);
  display:flex;flex-wrap:wrap;gap:10px 38px;
  font-size:10.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:var(--paper-45);
}

/* Sound-free film control */
.film-note{
  position:absolute;right:var(--gut);top:calc(72vh - 58px);top:calc(72svh - 58px);
  display:flex;align-items:center;gap:10px;
  font-size:9.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--paper-45);
  background:none;border:0;cursor:pointer;
  transition:color .4s var(--ease);
}
.film-note:hover{color:var(--paper)}
.film-note .dot{width:6px;height:6px;background:var(--clay);border-radius:50%}
@media(max-width:900px){.film-note{display:none}}

/* ============================================================
   FIGURES + THE LAYERED-IMAGE PAIR (signature device)
   No frames. No drop shadows.
   ============================================================ */

figure{margin:0}
.fig img{width:100%;object-fit:cover}
figcaption{
  margin-top:14px;font-size:10.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:var(--ink-quiet);
}
.on-ink figcaption,.ink figcaption{color:var(--paper-quiet)}

/* The overlaid texture hangs below the main picture, and now carries a caption
   under it, so the well it hangs into has to be deep enough for both. Without
   the caption the two photographs ran together and the texture read as part of
   the room rather than a detail of it. */
.pair{position:relative;padding-bottom:clamp(76px,8vw,138px)}
.pair-b figcaption{margin-top:10px}
.pair-a img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pair-b{
  position:absolute;right:0;bottom:0;
  width:clamp(150px,42%,340px);
}
.pair-b img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pair.flip .pair-b{right:auto;left:0}

/* Home page, after the full-width dawn picture: the pair is larger than the
   old half-and-half split, and the section tighter, but it stays inside the
   page margins. Only full-width pictures touch the edge (Tom, 28 Sep). */
.edge{display:grid;align-items:center}
@media(min-width:901px){
  .edge{--edge-pad:max(var(--gut),calc((100% - 1380px)/2 + var(--gut)));
    padding:clamp(56px,7vw,110px) var(--edge-pad);
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:clamp(40px,5vw,90px)}
  .edge-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
  .edge .pair-b{width:clamp(200px,36%,400px)}
}
/* Phones keep the layout they had inside the margins (Tom: "they look great
   on mobile"). */
@media(max-width:900px){
  .edge{padding:var(--band) var(--gut);gap:clamp(34px,5vw,80px)}
}

/* The ordering page is not a stock page and should not read like one. One
   picture leads and two overlap the foot of it. This is .pair extended to
   three rather than a new idea, so it still looks like the same hand drew it.
   On a narrow screen they stack: a small picture overlapping a small picture
   is only a mess. */
/* A mood board, not a hero with two thumbnails pinned to it. One image the
   full width of the column, two large ones beneath it. */
.trio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.trio-a{grid-column:1 / -1}
.trio-a img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.trio-b img,.trio-c img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(max-width:680px){
  .trio{grid-template-columns:1fr;gap:clamp(12px,3vw,18px)}
  .trio-a img{aspect-ratio:3/2}
}

.ratio-3-2 img{aspect-ratio:3/2;object-fit:cover;width:100%}
.ratio-4-3 img{aspect-ratio:4/3;object-fit:cover;width:100%}
.ratio-1-1 img{aspect-ratio:1/1;object-fit:cover;width:100%}
.ratio-4-5 img{aspect-ratio:4/5;object-fit:cover;width:100%}

/* Full-bleed band image */
.bleed{width:100%;height:clamp(320px,58vh,660px);object-fit:cover}

/* ============================================================
   TREE WATERMARK — Placement A, §5
   ============================================================ */

.tree-zone{position:relative;overflow:hidden}

/* Placement B, adapted for the web. The printed letterhead runs the trunk down
   the far-left edge with the canopy spreading up and across. The artwork fills
   its viewBox edge to edge and the trunk base sits on the bottom edge, so
   height:100% puts the trunk base on the section floor and the canopy on the
   section ceiling. The trunk centre sits at 42% across the artwork, so the
   translate pulls it back to the left margin. */
.tree-mark{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:auto;
  aspect-ratio:353.45/322.49;
  transform:translateX(-26%);
  background-color:var(--ink);
  -webkit-mask:url(../svg/nottage-tree.svg) no-repeat left bottom/contain;
  mask:url(../svg/nottage-tree.svg) no-repeat left bottom/contain;
  opacity:.06;
  pointer-events:none;user-select:none;
}
.ink .tree-mark{background-color:var(--paper);opacity:.05}

/* Kept so existing markup does not break. */
.tree-left{}

/* Mirrored, so a page carrying the tree more than once does not repeat the
   same silhouette in the same corner. Flipped rather than re-drawn. */
.tree-right .tree-mark{
  left:auto;right:0;
  transform:translateX(26%) scaleX(-1);
}
@media(max-width:900px){
  .tree-right .tree-mark{transform:translateX(40%) scaleX(-1)}
}

@media(max-width:900px){
  .tree-mark{transform:translateX(-40%);opacity:.05}
}

/* ============================================================
   STAT / FACT ROW
   ============================================================ */

.facts{border-top:var(--line);display:grid;gap:0}
.facts.g-4{grid-template-columns:repeat(4,1fr)}
/* Text sat hard against the divider it followed, because the padding was
   right-only. Symmetric now, so every rule has air on both sides, with the
   outer edges staying flush to the container. */
.fact{
  padding-block:34px;
  padding-inline:clamp(20px,2.2vw,38px);
  border-right:var(--line);
}
.fact:first-child{padding-left:0}
.fact:last-child{border-right:0;padding-right:0}

/* Two-column blocks wrap, so first and last are not the only edge cases:
   every odd item is in the left column and every even one is on the right.
   Without this, row two pads left against nothing and row one rules right
   against the block edge. */
.facts.g-2 .fact:nth-child(odd){padding-left:0}
.facts.g-2 .fact:nth-child(even){border-right:0;padding-right:0}
/* A rule under every row but the last, so the pairs read as a set */
.facts.g-2 .fact:nth-last-child(n+3){border-bottom:var(--line)}
.fact dt{font-size:10.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink-quiet)}
.fact dd{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.15;margin-top:12px}
.ink .facts,.ink .fact{border-color:var(--paper-20)}
.ink .fact dt{color:var(--paper-45)}
@media(max-width:900px){
  .facts.g-4{grid-template-columns:1fr 1fr}
  .fact:nth-child(2n+1){padding-left:0}
  .fact:nth-child(2n){border-right:0;padding-right:0}
}
@media(max-width:520px){
  .facts.g-4{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:var(--line);padding-inline:0}
  .fact:last-child{border-bottom:0}
}

/* ============================================================
   THE COLLECTION — cards + explorer
   ============================================================ */

.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-block:22px;border-top:var(--line);border-bottom:var(--line);
}
.filters-label{
  font-size:10.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink-quiet);
  margin-right:8px;
}
.chip{
  font-family:var(--body);font-weight:500;
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  padding:10px 17px;border:1px solid var(--ink-16);background:none;color:var(--ink-60);
  cursor:pointer;border-radius:0;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.chip:hover{border-color:var(--ink-38);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter-count{margin-left:auto;font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--ink-quiet)}

.card{display:flex;flex-direction:column;background:none}
.card-media{position:relative;overflow:hidden;background:var(--dune)}
.card-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.5s var(--ease)}
.card:hover .card-media img{transform:scale(1.035)}
.card-flag{
  position:absolute;left:0;top:0;
  background:var(--clay);color:var(--ink);
  font-size:9.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;
  padding:8px 13px;
}
.card-body{padding-top:22px;display:flex;flex-direction:column;flex:1}
.card-maker{font-size:10px;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:var(--ink-quiet)}
.card h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.1vw,1.95rem);line-height:1.1;margin-top:10px}
.card-line{font-size:14.5px;color:var(--ink-60);margin-top:8px;font-style:normal}
.card-spec{
  display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:20px;padding-top:16px;border-top:var(--line);
  font-size:10.5px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-60);
}
.card-foot{margin-top:auto;padding-top:22px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.price{font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.01em}
.price .poa{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--ink-60)}

.card.is-out{display:none}

/* ============================================================
   DETAIL LISTS (specification)
   ============================================================ */

.spec-cols{columns:2;column-gap:clamp(30px,4vw,62px)}
@media(max-width:760px){.spec-cols{columns:1}}
.spec-group{break-inside:avoid;margin-bottom:34px}
.spec-group h4{
  font-size:10.5px;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:var(--clay-ink);
  padding-bottom:11px;border-bottom:var(--line);margin-bottom:14px;
}
.spec-group ul{list-style:none}
.spec-group li{
  font-size:14.5px;line-height:1.6;color:var(--ink-85);
  padding-left:17px;position:relative;margin-bottom:8px;
}
.spec-group li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--clay)}

/* ============================================================
   FAQ
   ============================================================ */

.faq{border-top:var(--line)}
.faq details{border-bottom:var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:26px 44px 26px 0;position:relative;
  font-family:var(--display);font-weight:300;font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:1px;background:var(--ink);
  transition:transform .45s var(--ease);
}
.faq summary::before{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:1px;background:var(--ink);
  transform:rotate(90deg);transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.faq details[open] summary::before{transform:rotate(0);opacity:0}
.faq-a{padding:0 0 28px;max-width:64ch;color:var(--ink-85);font-size:15px}

/* ============================================================
   QUOTE
   ============================================================ */

.quote blockquote{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,3.1vw,2.6rem);line-height:1.3;
  max-width:22ch;
}
/* The ground and the quote share one element, so this must be a compound
   selector, not a descendant one. On Dune the attribution needs ink. */
.quote.dune cite{color:var(--ink-60)}
.quote.dune blockquote{color:var(--ink)}
.quote cite{
  display:block;margin-top:32px;font-style:normal;
  font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--dune);
}

/* ============================================================
   FORM
   ============================================================ */

.form{display:grid;gap:26px}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:10.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--clay-ink)}
.field input,.field textarea,.field select{
  font-family:var(--body);font-weight:400;font-size:15px;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--ink-16);
  padding:11px 0;border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical;min-height:104px}
/* Safari on iOS zooms the page into any focused field under 16px. */
@media(max-width:900px){
  .field input,.field textarea,.field select{font-size:16px}
}
/* A clay underline at 2.25:1 is not a focus indicator anybody can see.
   Keep the underline as the brand cue and give it a real outline too. */
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--clay-ink);outline-offset:3px;
  border-bottom-color:var(--clay-ink)}
.field select{cursor:pointer}
/* The enquiry form's consent row. Named apart from the cookie bar below,
   which is also built with a .consent class: the bar's position:fixed and
   translateY(101%) were landing on this row and parking it permanently off
   the bottom of the viewport, so the required box could never be ticked and
   the form could never be sent. */
.consent-field{display:flex;flex-wrap:wrap;gap:13px;align-items:flex-start}
.consent-field input{width:16px;height:16px;margin-top:3px;accent-color:var(--clay-ink);flex:none}
/* The label takes the rest of the row, so a long one wraps beside its box
   instead of dropping underneath it (Tom, 27 Sep). */
.consent-field label{
  flex:1 1 0;min-width:0;
  font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-60);line-height:1.6;
}
.consent-field label a{border-bottom:1px solid var(--ink-38)}
.form-note{font-size:12px;color:var(--ink-quiet);line-height:1.6}
.err{color:var(--alert);font-size:12px;display:none}
.field.invalid input,.field.invalid textarea{border-bottom-color:var(--alert)}
.consent-field.invalid label{color:var(--alert)}
.consent-field.invalid input{outline:1px solid var(--alert);outline-offset:2px}
.field.invalid .err,.consent-field.invalid .err{display:block}
.consent-field .err{flex:0 0 100%;margin-top:6px;margin-left:29px}

/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   FOOTER
   ============================================================ */

.ftr{background:var(--ink);color:var(--paper);padding-block:clamp(60px,8vw,104px) 40px}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px)}
@media(max-width:960px){.ftr-grid{grid-template-columns:1fr 1fr}}
/* One column ran the footer past a whole phone screen. Two columns for the
   short lists, with the brand and the contact block spanning — the latter
   because the email address will not sit on one line in half a column. */
@media(max-width:560px){
  .ftr-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  .ftr-grid > :first-child,
  .ftr-grid > :last-child{grid-column:1 / -1}
  .ftr img.mark{width:132px;margin-bottom:16px}
  .ftr{padding-block:44px 32px}
  .ftr ul{gap:9px}
  .ftr h5{margin-bottom:13px}
  .ftr-base{margin-top:34px}
}
.ftr img.mark{width:172px;margin-bottom:24px}
.ftr h5{font-size:10.5px;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:var(--dune);margin-bottom:18px}
.ftr ul{list-style:none;display:grid;gap:11px}
/* li included: plain list items with no anchor were inheriting the 16px body
   size and sitting larger than the links beside them. */
.ftr a,.ftr p,.ftr li{color:var(--paper-70);font-size:14px;line-height:1.65}
.ftr a{transition:color .4s var(--ease)}
.ftr a:hover{color:var(--paper)}
/* Three sizes in the whole footer and no more: 10.5 for tracked labels,
   14 for content, 11.5 for the legal fine print. Links inherit rather than
   setting their own, so nothing jumps size mid-line. */
.ftr-base{
  margin-top:clamp(44px,6vw,76px);padding-top:26px;border-top:1px solid var(--paper-20);
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;
  font-size:11.5px;line-height:1.7;color:var(--paper-quiet);
}
.ftr-base a{font-size:inherit;line-height:inherit;color:var(--paper-70)}
.ftr-base a:hover{color:var(--paper)}
.ftr-base a+a{margin-left:14px}

/* The footer's one label-styled link sits in a list of plain ones, so let it
   match its neighbours instead of shouting in tracked capitals. */
.ftr .tlink{
  font-size:11.5px;letter-spacing:1.8px;
  border-bottom-color:var(--paper-20);color:var(--paper);
}

/* ============================================================
   MOTION — one orchestrated reveal, staggered. Restrained.
   ============================================================ */

.rv{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.40s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .card-media img{transition:none}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .hdr,.drawer,.film-note,.hero-media,.btn,.filters{display:none!important}
  body{background:var(--paper);color:var(--ink);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .band{padding-block:24px}
}

/* ============================================================
   CAL.EU BOOKING EMBED
   Framed to sit inside the page rather than float on it.
   ============================================================ */
.cal-frame{
  width:100%;
  min-height:640px;
  border:var(--line);
  background:var(--paper);
  overflow:hidden;
}
.cal-frame iframe{border:0!important}
@media(max-width:700px){ .cal-frame{min-height:560px} }

/* ============================================================
   THE RANGE — tier headers
   ============================================================ */
.tier-head{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3vw,54px);
  align-items:end;
  padding-bottom:26px;border-bottom:1px solid var(--ink);
}
.ink .tier-head{border-bottom-color:var(--paper-45)}
.tier-index{
  font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,5vw,4.2rem);
  line-height:.9;color:var(--clay-ink);
}
@media(max-width:900px){.tier-head{grid-template-columns:1fr;align-items:start}}

/* ============================================================
   FLOORPLAN EXPLORER
   ============================================================ */
.plan-row{
  display:grid;grid-template-columns:1.35fr .65fr;
  gap:clamp(24px,4vw,60px);align-items:center;
  padding:clamp(30px,4vw,54px) 0;border-top:var(--line);
}
.plan-row:last-child{border-bottom:var(--line)}
.plan-figure{background:var(--paper);padding:clamp(10px,1.6vw,24px)}
.plan-figure img{width:100%;height:auto;object-fit:contain}
.plan-meta dt{font-size:10px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink-quiet)}
.plan-meta dd{font-size:15px;margin-top:5px;margin-bottom:16px;color:var(--ink-85)}
.plan-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.plan-actions .btn{padding:12px 20px;font-size:9.5px}
.plan-row.is-out{display:none}
@media(max-width:820px){.plan-row{grid-template-columns:1fr}}

/* ============================================================
   LOCALITY MAP
   Real OpenStreetMap geometry, drawn in the Nottage palette.
   Pins are HTML so they use the page fonts and stay readable.
   ============================================================ */
.map-wrap{display:grid;grid-template-columns:.68fr 1.32fr;gap:clamp(26px,4vw,64px);align-items:start}
@media(max-width:900px){.map-wrap{grid-template-columns:1fr}}

.map-figure{position:relative;border:var(--line);background:var(--paper)}
.map-figure > img{width:100%;height:auto;display:block}

.pin{position:absolute;transform:translate(-50%,-50%);z-index:2}
.pin i{
  display:flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  font-family:var(--body);font-style:normal;font-weight:500;font-size:10px;letter-spacing:0;
  box-shadow:0 0 0 3px var(--paper);
}
.pin b{
  position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);
  font-family:var(--body);font-weight:500;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-60);white-space:nowrap;
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none;
}
/* A long label near the right edge opens leftwards from its pin, so it
   cannot run off a phone screen. */
.pin-end b{left:auto;right:-4px;transform:none}
.pin:hover{z-index:5}
.pin:hover i{background:var(--clay)}
.pin:hover b{opacity:1}

/* The park itself: a clay diamond, the single accent */
.pin-park{z-index:4}
.pin-park i{
  width:19px;height:19px;border-radius:0;transform:rotate(45deg);
  background:var(--clay);box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px var(--clay);
}
.pin-park b{
  opacity:1;color:var(--ink);font-size:10px;letter-spacing:1.8px;
  left:calc(50% + 15px);top:50%;transform:translateY(-50%);
  background:var(--paper);padding:4px 8px;
}
.pin-park:hover i{background:var(--ink)}

.map-legend{padding-top:4px}
.leg-group{margin-bottom:26px}
.leg-group h4{
  font-size:10px;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:var(--clay-ink);
  padding-bottom:9px;border-bottom:var(--line);margin-bottom:11px;
}
.leg-group ol{list-style:none}
.leg-group li{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--ink-85);margin-bottom:6px}
.leg-group .num{
  flex:none;width:19px;height:19px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink-16);font-size:9.5px;font-weight:500;color:var(--ink-60);
}

@media(max-width:900px){
  .pin i{width:17px;height:17px;font-size:8.5px;box-shadow:0 0 0 2px var(--paper)}
  .pin-park i{width:14px;height:14px;box-shadow:0 0 0 2px var(--paper),0 0 0 3.2px var(--clay)}
  .pin-park b{font-size:7.5px;letter-spacing:.8px;padding:3px 5px;left:calc(50% + 11px)}
  .pin b{font-size:8px}
}

/* Map labels: places, sea, road and the two M4 directions */
.map-label{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--body);font-weight:500;
  font-size:9.5px;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--ink-60);white-space:nowrap;pointer-events:none;z-index:1;
}
.map-place{color:var(--ink-60)}
.map-sea{color:var(--ink-quiet);letter-spacing:3.4px;font-size:9px}
.map-road{
  color:var(--ink-85);background:var(--paper);
  padding:2px 6px;letter-spacing:1.4px;
}
.map-dir{color:var(--ink-85);background:var(--paper);padding:4px 8px;letter-spacing:1.5px}
.map-dir-up{transform:translate(-50%,0)}
.map-dir-right{transform:translate(-100%,-50%)}
@media(max-width:900px){
  .map-label{font-size:7.5px;letter-spacing:1px}
  .map-sea{font-size:7px;letter-spacing:2px}
  .map-dir{font-size:7px;padding:3px 5px}
}

/* ============================================================
   CONSENT
   Accept and Decline are deliberately identical in weight.
   Nudging people toward Accept is a dark pattern and the ICO
   treats it as invalid consent.
   ============================================================ */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--ink);color:var(--paper);
  border-top:1px solid var(--paper-20);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.consent.in{transform:none}
.consent-in{
  max-width:1380px;margin:0 auto;padding:22px var(--gut) 24px;
  display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,54px);align-items:center;
}
.consent-txt p{
  margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--paper-70);max-width:64ch;
}
.consent-txt .eyebrow{color:var(--dune)}
.consent-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.consent-btns .btn{
  color:var(--paper);border-color:var(--paper-45);
  padding:13px 26px;min-width:132px;justify-content:center;
}
.consent-btns .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.consent-more{border-color:var(--paper-20);color:var(--paper-70)}  /* same 10.5px as every other tlink */
.consent-more:hover{border-color:var(--paper);color:var(--paper)}
@media(max-width:820px){
  /* Under 180px on a phone: the two buttons share a row with the link
     beside them, and nothing hugs the bottom edge. */
  .consent-in{grid-template-columns:1fr;gap:8px;padding:14px var(--gut) 14px}
  .consent-txt p{margin-top:6px;font-size:13px;line-height:1.5}
  .consent-btns{gap:10px;flex-wrap:nowrap}
  .consent-btns .btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 12px}  /* a thumb's 44px */
  .consent-more{flex:none;margin-left:4px}
  .consent-btns .btn{flex:1 1 auto}
}

/* ============================================================
   MEGA-NAV — the Bentley Models panel, in Nottage terms.
   Cream ground, editorial columns, thumbnails. Click, not hover,
   so it works on a trackpad and for keyboard users.
   ============================================================ */
.mn-trigger{
  font-family:var(--body);font-weight:500;
  font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-60);background:none;border:0;cursor:pointer;
  padding:4px 0 3px;border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.mn-trigger:hover,.mn-trigger[aria-expanded="true"],.mn-trigger[data-current]{
  color:var(--ink);border-bottom-color:var(--clay);
}
.mn-caret{
  width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .4s var(--ease);
}
.mn-trigger[aria-expanded="true"] .mn-caret{transform:rotate(-135deg) translateY(-2px)}
.hdr.over .mn-trigger{color:var(--paper-70)}
.hdr.over .mn-trigger:hover,.hdr.over .mn-trigger[aria-expanded="true"]{color:var(--paper);border-bottom-color:var(--clay)}

.meganav{
  position:fixed;left:0;right:0;top:0;z-index:98;
  background:var(--paper);
  border-bottom:1px solid var(--ink-08);
  padding-top:92px;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  /* Slow on the way in, so the reveal is something you watch. Closing stays
     brisk: nobody wants to wait to dismiss a menu. Visibility waits out the fade. */
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s;
  max-height:100vh;max-height:100svh;overflow-y:auto;
}
body.mn-open .meganav{
  opacity:1;visibility:visible;transform:none;
  transition:opacity 1.7s var(--ease),transform 1.7s var(--ease),visibility 0s linear 0s;
}

/* One at a time, in reading order. Every heading and lodge carries its own
   index, stamped into the markup, so the cascade runs item by item rather
   than four blocks arriving at once. */
.mn-head,.mn-line,.mn-card,.mn-foot{
  opacity:0;transform:translateY(16px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
body.mn-open .mn-head,
body.mn-open .mn-line,
body.mn-open .mn-card,
body.mn-open .mn-foot{
  opacity:1;transform:none;
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  transition-delay:calc(.18s + (var(--i,0) - 1) * .058s);
}
body.mn-open .mn-foot{--i:23}
.meganav-in{padding-block:clamp(26px,3vw,44px) clamp(24px,3vw,40px)}

.mn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,46px)}
.mn-col{min-width:0}
.mn-head{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(1.05rem,1.3vw,1.28rem);line-height:1.15;
  padding-bottom:10px;border-bottom:1px solid var(--ink);
}
.mn-head:hover{color:var(--clay-ink)}
.mn-line{font-size:11.5px;line-height:1.5;color:var(--ink-quiet);margin-top:9px}
.mn-cards{margin-top:14px;display:grid;gap:2px}

.mn-card{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:7px 6px 7px 0;transition:background .35s var(--ease)}
.mn-card:hover{background:var(--dune)}
.mn-thumb{display:block;overflow:hidden;background:var(--dune)}
.mn-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.mn-card:hover .mn-thumb img{transform:scale(1.06)}
.mn-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mn-name{font-family:var(--display);font-weight:300;font-size:15px;line-height:1.2}
.mn-sub{font-size:9px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-quiet)}
.mn-price{font-size:11.5px;color:var(--ink-60);margin-top:2px}
.mn-price .poa{font-size:9px;letter-spacing:1.4px}

.mn-foot{
  margin-top:clamp(22px,2.6vw,38px);padding-top:20px;border-top:var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
/* Two text links against the one button. Grouped so space-between still puts
   the button at one end and the links at the other, rather than stranding one
   of them in the middle. */
.mn-foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px);margin-left:auto}

.mn-scrim{
  position:fixed;inset:0;z-index:97;background:rgba(20,20,20,.34);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s;
}
body.mn-open .mn-scrim{opacity:1;visibility:visible;transition:opacity 1.7s var(--ease),visibility 0s linear 0s}

/* Bentley keep Models in the header on a phone, outside the burger, so the panel
   is still reachable. The other links collapse into the drawer as usual. */
.hdr-models{display:flex;align-items:center;flex:none;margin-right:auto;margin-left:clamp(16px,2.4vw,38px)}

@media(max-width:1200px){
  .hdr-models{margin-left:clamp(12px,3vw,22px)}
  .mn-trigger{font-size:10px;letter-spacing:1.6px}
}

/* A tablet has the room for the dropdown, so it gets the desktop behaviour
   rather than the phone's full-screen takeover: two columns instead of four,
   which is what actually fails on a narrower screen. The close button and the
   scrim stay on, because a touch user has no cursor to click away with. */
@media(min-width:768px) and (max-width:1199px){
  .mn-grid{grid-template-columns:repeat(2,1fr);row-gap:clamp(22px,3vw,34px)}
}

@media(max-width:767px){
  /* Full screen on a phone rather than a dropdown */
  .meganav{
    position:fixed;inset:0;top:0;
    padding-top:clamp(72px,14vw,96px);
    max-height:100vh;max-height:100svh;overflow-y:auto;
    border-bottom:0;transform:translateY(0);
  }
  body.mn-open .meganav{transform:none}
  body.mn-open{overflow:hidden}
  .meganav-in{padding-bottom:40px}
  .mn-grid{grid-template-columns:1fr;gap:clamp(16px,3.6vw,24px)}
  .mn-card{grid-template-columns:66px 1fr;padding:9px 6px 9px 0}
  .mn-name{font-size:16px}
  .mn-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .mn-foot-links{margin-left:0}
  .mn-scrim{display:none}
}

/* Keep the phone number: it is the thing people actually use. Room is made by
   dropping "The" from the trigger, easing the logo down and tightening gaps. */
@media(max-width:560px){
  .hdr{gap:10px}
  .hdr-r{gap:10px}
  .hdr-models{margin-left:10px}
  .brand img{width:106px}
  .hdr.solid .brand img{transform:scale(.88)}
  .hdr .tel{font-size:10px;letter-spacing:.8px}
  .mn-trigger{font-size:9.5px;letter-spacing:1.3px}
}

/* ============================================================
   LODGE GALLERY — definitive, not a collage.
   An earlier version staggered the drops and used six different
   ratios. It read as a mood board. Hierarchy does the work now:
   one image at full width, the rest paired on a strict grid,
   every ratio the same, every top edge aligned.
   ============================================================ */
.gal{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(22px,2.8vw,48px);
  margin-top:clamp(26px,3vw,44px);
}
.gal figure{margin:0;min-width:0}
.gal img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.gal figcaption{margin-top:13px}

/* The lead image carries the room that sells the lodge, at full width. */
.gal figure:first-child:not(.fig-quiet):not(.fig-tall){grid-column:1 / -1}
.gal figure:first-child:not(.fig-quiet):not(.fig-tall) img{aspect-ratio:16/9}

/* An odd one at the end would sit alone beside a hole, so it spans too.
   With the first spanning, a trailing orphan is always at an even index.
   A bathroom is excluded: this rule was handing it the largest plate on
   the page, which is the last thing a bathroom should be given. */
.gal figure:last-child:nth-child(even):not(.fig-quiet):not(.fig-tall){grid-column:1 / -1}
.gal figure:last-child:nth-child(even):not(.fig-quiet):not(.fig-tall) img{aspect-ratio:16/9}

/* A portrait photograph cannot fill a 16:9 plate. object-fit would take a
   thin band out of the middle of it, and on a wide screen it is asked for
   more width than it has, so it goes soft as well. Portrait figures keep a
   normal half-width cell. */
.gal figure.fig-tall img{aspect-ratio:3/4}

/* A bathroom is a fact to confirm, not a room that sells a lodge, so it never
   leads the gallery and never closes it: the :not(.fig-quiet) in the two rules
   above is what does that work. It used to be shrunk to 66% as well, which did
   not read as a decision. It read as a broken image beside a full one. The
   plate it sits in is the ordinary one; the hierarchy is in where it sits. */
.gal figure.fig-quiet{align-self:end}

@media(max-width:820px){
  .gal{grid-template-columns:1fr;gap:clamp(22px,5vw,34px)}
  .gal figure,.gal figure:first-child,.gal figure:last-child:nth-child(even){grid-column:1 / -1}
  .gal img,.gal figure:first-child img,.gal figure:last-child:nth-child(even) img{aspect-ratio:4/3}
  .gal figure.fig-quiet img{width:78%}
}

/* ============================================================
   SPECIFICATION — responsive column count
   Three columns on a wide screen, two on a tablet, one on a phone.
   A spec list at 1-2 words per line is not a spec list.
   ============================================================ */
.spec-3{columns:3}
@media(max-width:1100px){ .spec-3{columns:2} }
@media(max-width:820px){
  .spec-cols,.spec-3{columns:1}
  .spec-group{margin-bottom:30px}
  .spec-group li{font-size:15px;line-height:1.65}
}

/* The watermark stands down behind dense text on small screens, where it
   sits directly under the type instead of well away from it. */
@media(max-width:900px){
  .tree-quiet .tree-mark{display:none}
}

/* ============================================================
   MEGA-NAV ON A PHONE
   Bentley give each model a large picture and set the name hard
   right, with generous rows. Same here, with the ranges kept.
   ============================================================ */
.mn-close{
  position:absolute;top:clamp(18px,4vw,26px);right:var(--gut);
  width:40px;height:40px;display:none;
  align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;
  font-family:var(--body);font-weight:400;font-size:30px;line-height:1;
  color:var(--ink);
}

@media(max-width:1199px){
  /* Sits in its own row below the fixed header, as Bentley's does.
     Shown wherever the burger is: a touch user has no cursor to click away. */
  .mn-close{display:flex;top:clamp(66px,13.5vw,88px);right:calc(var(--gut) - 10px)}
}

@media(max-width:767px){
  .meganav-in{padding-top:clamp(48px,11vw,62px)}

  .mn-head{font-size:clamp(1.15rem,4.6vw,1.45rem);padding-bottom:9px}
  .mn-line{font-size:11.5px;margin-top:7px}
  .mn-cards{margin-top:2px;gap:0}

  .mn-card{
    grid-template-columns:29% 1fr;
    gap:clamp(13px,3vw,20px);
    align-items:center;
    padding:clamp(9px,2.2vw,14px) 0;
    border-bottom:1px solid var(--ink-08);
  }
  .mn-card:last-child{border-bottom:0}
  .mn-card:hover{background:none}
  .mn-thumb img{aspect-ratio:4/3}

  .mn-txt{text-align:right;align-items:flex-end;gap:2px}
  .mn-name{font-size:clamp(1.1rem,4.4vw,1.35rem);line-height:1.12}
  .mn-sub{font-size:9px;letter-spacing:1.5px}
  /* The flag is a heavy pill. Beside the price it shoves the price into the
     middle of the row and breaks the right edge the names line up on, so on
     mobile it drops to its own line underneath. */
  .mn-price{font-size:12px;margin-top:2px;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .mn-price .mn-flag{margin-left:0}
}

/* ============================================================
   TELEPHONE — number on a wide screen, handset on a phone.
   The tap target and the tel: link are identical either way.
   ============================================================ */
/* inline-block, not inline-flex: a flex box takes its baseline from its first
   item and the number then sits 3px below the nav links beside it. Measured. */
.tel{display:inline-block}
.tel-icon{display:none;width:19px;height:19px;flex:none}

@media(max-width:560px){
  .tel-num{display:none}
  .tel-icon{display:block}
  /* icon only, so flex centring is right here and there is no text to align */
  .tel{display:inline-flex;align-items:center;padding:6px 2px;border-bottom:0}
  /* the row is no longer crowded, so the mark can go back up */
  .brand img{width:124px}
  .hdr.solid .brand img{transform:scale(.84)}
  .mn-trigger{font-size:10px;letter-spacing:1.6px}
}

/* ============================================================
   THE MOMENT
   One per page, from the six in the writing system. A specific
   time, one concrete detail, and nothing after it. No button,
   no image, no explanation of the payoff. The pause on the page.
   ============================================================ */
.moment{position:relative;overflow:hidden}
.moment .wrap{position:relative;z-index:1}
.moment-time{
  font-family:var(--body);font-weight:500;
  font-size:10.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--clay-ink);
}
/* The moment blocks are the emotional beats, and they were laid out like
   every other band: a label, a line, a rule, all hard left, using about
   forty per cent of the width with the rest left empty.

   They read as a diary entry now. The time hangs in its own column across
   a gutter, the way a marginal note sits against a page of set text, and
   the line runs against it. That uses the width, gives these eight blocks
   a shape nothing else on the site has, and needs no ornament to do it. */
.moment .wrap{
  display:grid;
  grid-template-columns:minmax(7rem,11rem) 1fr;
  column-gap:clamp(22px,3.4vw,58px);
  align-items:start;
}
.moment-time{
  grid-column:1;grid-row:1;
  text-align:right;padding-top:.55em;
  border-top:1px solid var(--clay);
  margin:0;
}
.moment-line{
  grid-column:2;grid-row:1;
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,3.5vw,2.9rem);
  line-height:1.24;letter-spacing:-.01em;
  max-width:30ch;margin:0;
  text-wrap:balance;
}
.moment .rule-clay{grid-column:2;grid-row:2}

/* No room for a gutter on a phone, so it stacks and the rule above the
   time does the job the column edge was doing. */
@media(max-width:720px){
  .moment .wrap{grid-template-columns:1fr}
  .moment-time{grid-column:1;text-align:left;padding-top:.7em}
  .moment-line{grid-column:1;grid-row:auto;margin-top:18px;max-width:22ch}
  .moment .rule-clay{grid-column:1;grid-row:auto}
}
.ink .moment-line{color:var(--paper)}
.moment .rule-clay{margin-top:34px}
@media(max-width:700px){
  .moment-line{max-width:none;font-size:clamp(1.35rem,6vw,1.9rem)}
}

/* ============================================================
   STEP NAVIGATION — the price ladder at the foot of a lodge page.
   Left is one below, right is one above. The Glendale has nothing
   above it, so its right slot offers to source one instead.
   ============================================================ */
.step-nav{gap:clamp(20px,3vw,40px)}
.step{
  display:flex;flex-direction:column;
  border-top:1px solid var(--ink);
  padding-top:20px;
  transition:border-color .45s var(--ease);
}
.step:hover{border-top-color:var(--clay)}
.step .d4{display:block;margin-top:12px;transition:color .45s var(--ease)}
.step:hover .d4{color:var(--clay-ink)}
.step .arw{display:inline-block;transition:transform .5s var(--ease)}
.step:hover .arw{transform:translateX(6px)}
.step-sub{
  margin-top:7px;font-size:12.5px;letter-spacing:.2px;color:var(--ink-quiet);
}
.step-up{text-align:right}
@media(max-width:900px){
  .step-up{text-align:left}
}

/* ============================================================
   NAMED THINGS
   Perigon name a restaurant and label it beneath. Same device:
   the thing, what it is, and which lodge it is actually in.
   Nothing here is generic to the range unless it says so.
   ============================================================ */
.named-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:clamp(34px,4vw,56px);
  border-top:var(--line);
}
.named{
  display:flex;flex-direction:column;
  padding:26px clamp(20px,2.2vw,34px) 30px;
  border-bottom:var(--line);border-right:var(--line);
  transition:background .5s var(--ease);
}
.named:hover{background:rgba(20,20,20,.025)}
.named:nth-child(3n){border-right:0;padding-right:0}
.named:nth-child(3n+1){padding-left:0}
.named-name{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.2;
}
.named-detail{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--ink-60)}
.named-where{
  margin-top:16px;font-size:10px;font-weight:500;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--clay-ink);
}
@media(max-width:900px){
  .named-grid{grid-template-columns:1fr 1fr}
  .named:nth-child(3n){border-right:var(--line);padding-right:clamp(20px,2.2vw,34px)}
  .named:nth-child(3n+1){padding-left:clamp(20px,2.2vw,34px)}
  .named:nth-child(2n){border-right:0;padding-right:0}
  .named:nth-child(2n+1){padding-left:0}
}
@media(max-width:560px){
  .named-grid{grid-template-columns:1fr}
  .named,.named:nth-child(n){border-right:0;padding-inline:0}
}

/* ============================================================
   COURSES — the shortlist. Rank sits above the name, distance
   below it, so the eye gets the credential before the drive.
   ============================================================ */
.course-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:var(--line);
}
.course{
  padding:30px clamp(20px,2.2vw,38px) 34px;
  border-right:var(--line);
}
.course:nth-child(3n){border-right:0;padding-right:0}
.course:nth-child(3n+1){padding-left:0}
.course-rank{
  display:block;font-size:10px;font-weight:500;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--clay-ink);
}
.course-name{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.4rem,2vw,1.85rem);line-height:1.15;margin-top:12px;
}
.course-dist{
  display:block;margin-top:9px;font-size:11px;font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--ink-quiet);
}
.course-body{margin-top:18px;font-size:14.5px;line-height:1.65;color:var(--ink-85)}
@media(max-width:900px){
  .course-grid{grid-template-columns:1fr}
  .course,.course:nth-child(n){border-right:0;padding-inline:0;border-bottom:var(--line)}
  .course:last-child{border-bottom:0}
}

/* Worth the drive: a compact ruled list, not another card grid */
.far-list{border-top:1px solid rgba(20,20,20,.18)}
.far-row{
  display:grid;
  grid-template-columns:minmax(140px,1.1fr) minmax(90px,.7fr) minmax(120px,.9fr) 2.2fr;
  gap:clamp(10px,1.6vw,28px);align-items:baseline;
  padding:18px 0;border-bottom:1px solid rgba(20,20,20,.18);
}
.far-name{font-family:var(--display);font-weight:300;font-size:clamp(1.05rem,1.3vw,1.2rem)}
.far-dist{font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--ink-60)}
.far-rank{font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--clay-ink)}
.far-body{font-size:13.5px;line-height:1.6;color:var(--ink-85)}
@media(max-width:820px){
  .far-row{grid-template-columns:1fr;gap:5px;padding:20px 0}
  .far-body{margin-top:5px}
}

/* ============================================================
   BLEED FADE
   Where the top of a photograph is close in tone to the ground
   above it, the edge reads as an accidental line. This dissolves
   the image into the page instead. Opt-in, not the default:
   most photographs want their edge.
   ============================================================ */
/* The sky itself is corrected to meet Paper at the top edge, so this only
   has to absorb the last few levels. A long fade here would read as a wash
   over the photograph, which is the opposite of seamless. */
.bleed-fade{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 6%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 6%);
}

/* A closing photograph, given a little more height than a mid-page bleed
   since nothing follows it but the footer. */
.bleed-tall{height:clamp(340px,64vh,720px)}

/* ============================================================
   SOLO TIER
   The Pinnacle holds one lodge, so the usual heading-and-lede
   pair left a hole beside the single card. The heading takes the
   full width, and the description drops below the rule to sit
   alongside the photograph, at reading size rather than caption size.
   ============================================================ */
.tier-head-solo{grid-template-columns:1fr}
.solo-note{
  grid-column:2 / -1;
  align-self:center;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.25rem,2.1vw,1.75rem);
  line-height:1.34;
  letter-spacing:-.005em;
  max-width:26ch;
  color:var(--paper);
}
@media(max-width:900px){
  .solo-note{grid-column:1 / -1;max-width:none;font-size:clamp(1.15rem,4.4vw,1.4rem)}
}

/* ============================================================
   CARDS ON A DARK GROUND
   The card was built for Paper and its muted tints are all ink
   based, so on Ink the maker, the tagline and the spec row render
   at contrast 1.0 and vanish. The Pinnacle is the only dark tier,
   which is why it went unnoticed.
   ============================================================ */
/* paper-45 measures 4.3:1 on Ink, just under AA for text this small */
.ink .card-maker{color:rgba(250,247,240,.55)}
.ink .card-line{color:var(--paper-70)}
.ink .card-spec{color:var(--paper-70);border-top-color:var(--paper-20)}
.ink .card-media{background:rgba(250,247,240,.06)}
.ink .price .poa{color:var(--paper-70)}

/* ============================================================
   INK GRAIN
   A flat #141414 over a tall section reads as screen black. This
   is print tooth, not an effect: one tiled turbulence pattern at
   very low opacity. It sits behind everything, takes no clicks,
   and is dropped for anyone who has asked for reduced motion or
   is printing.
   ============================================================ */
.ink{position:relative;isolation:isolate}
.ink::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E");
  background-size:140px 140px;
  opacity:.035;
  pointer-events:none;
  z-index:0;
}
.ink > *{position:relative;z-index:1}
@media print{ .ink::before{display:none} }

/* ============================================================
   LODGE HEADER
   On a phone the title, the tagline and a two-by-two facts block
   pushed the photograph 584px down an 812px screen, so a visitor
   arrived at a lodge and saw no lodge. The picture now sits between
   the title and the facts in the DOM, which is the right order on
   a phone, and is placed back below both on a wide screen.
   ============================================================ */
.lodge-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:end;
}
.lodge-lead{
  grid-column:1 / -1;
  grid-row:2;
  width:calc(100vw - var(--sb, 0px));
  max-width:none;          /* the base img rule caps at 100% of the container */
  margin-left:calc(50% - 50vw + var(--sb, 0px) / 2);
  margin-right:calc(50% - 50vw + var(--sb, 0px) / 2);
  height:clamp(320px,58vh,660px);
  object-fit:cover;
  margin-top:clamp(34px,5vw,64px);
}
.lodge-head > .editorial{grid-column:1;grid-row:1}
.lodge-head > .rv:has(.facts){grid-column:2;grid-row:1}

/* The intro heading on a lodge page. A short measure is what makes it read
   as a statement rather than a paragraph — but only where there is width
   to spare. See the phone override below. */
.lodge-intro{max-width:16ch}

@media(max-width:900px){
  .lodge-head{grid-template-columns:1fr;gap:clamp(22px,5vw,34px)}
  .lodge-head > .editorial,
  .lodge-head > .rv:has(.facts),
  .lodge-lead{grid-column:1;grid-row:auto}
  .lodge-lead{height:clamp(240px,42vh,340px);margin-top:clamp(20px,5vw,30px)}
  /* tighter, so the picture is on screen without scrolling */
  .lodge-head .d1{font-size:clamp(2rem,9vw,2.6rem)}
  .lodge-head .lede{margin-top:12px}
  .lodge-head .rule-clay{margin-top:18px}
  .lodge-head .fact{padding-block:20px}

  /* 16ch of Fraunces is roughly 224px. On the ~350px column a phone
     actually has, that left a wide rag down the right while the body text
     beside it ran full width. Let the heading use the measure it has. */
  .lodge-intro{max-width:none}
}

/* ============================================================
   CARD RAIL
   Swipe through a lodge's photographs without leaving the page.
   Native scroll-snap: real momentum on touch, no library, and a
   swipe never fires the link the way a drag-scroll script would.
   Arrows appear on pointer devices, where there is nothing to swipe.
   ============================================================ */
.card-media{position:relative;overflow:hidden;background:var(--dune)}

.card-rail{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.card-rail::-webkit-scrollbar{display:none}
.card-rail:focus-visible{outline:2px solid var(--clay-ink);outline-offset:-2px}

.rail-shot{flex:0 0 100%;scroll-snap-align:center;display:block}
.rail-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* The whole-card zoom fought the scroll, so it goes here */
.card:hover .card-rail img{transform:none}

/* Arrows: pointer only, and only once the card is hovered */
.rail-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;
  border:1px solid var(--paper-45);
  background:rgba(20,20,20,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:0;cursor:pointer;
  opacity:0;transition:opacity .35s var(--ease),background .35s var(--ease);
  z-index:2;
}
.rail-nav::before{
  content:"";position:absolute;inset:0;margin:auto;
  width:8px;height:8px;
  border-top:1px solid var(--paper);border-right:1px solid var(--paper);
}
.rail-prev{left:10px}
.rail-prev::before{transform:rotate(-135deg);margin-left:13px}
.rail-next{right:10px}
.rail-next::before{transform:rotate(45deg);margin-right:13px}
.card:hover .rail-nav,.rail-nav:focus-visible{opacity:1}
.rail-nav:hover{background:rgba(20,20,20,.72)}
.rail-nav[disabled]{opacity:0!important;pointer-events:none}

/* Position, as a row of hairlines rather than dots. Round dots are the
   generic carousel tell, and the design system caps radius at 4px for
   the same reason. This is the same line language as the clay rule.
   Left-aligned with the text below it, not floated in the middle. */
.rail-steps{
  position:absolute;left:0;bottom:0;
  display:flex;gap:4px;
  padding:0 0 12px clamp(12px,2vw,16px);
  pointer-events:none;z-index:2;
}
.rail-steps span{
  width:16px;height:2px;
  background:var(--paper);
  opacity:.35;
  transition:opacity .4s var(--ease),background .4s var(--ease),width .4s var(--ease);
}
.rail-steps span.on{opacity:1;background:var(--clay);width:24px}

@media(hover:none){
  .rail-nav{display:none}      /* a finger does not need arrows */
  /* But it does need to see there is more. The next photograph shows an
     edge, and the position marks are big enough to read over a picture;
     at 16 by 2 at 35% they were invisible on a phone. */
  .card-rail{gap:6px}
  .rail-shot{flex:0 0 86%;scroll-snap-align:start}
  .rail-steps span{width:18px;height:3px;opacity:.6}
  .rail-steps span.on{width:28px}
}
@media(prefers-reduced-motion:reduce){
  .card-rail{scroll-behavior:auto}
}

/* ============================================================
   ANNOUNCEMENT
   For a dated thing: an open weekend, an arrival. A panel rather
   than a takeover, and it never stacks on the consent bar.
   ============================================================ */
.ann{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:var(--gut)}
.ann-scrim{
  position:absolute;inset:0;background:rgba(20,20,20,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .5s var(--ease);
}
.ann.in .ann-scrim{opacity:1}

.ann-panel{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  width:min(880px,100%);max-height:88vh;max-height:88svh;
  background:var(--paper);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  overflow:hidden;
}
.ann.in .ann-panel{opacity:1;transform:none}

.ann-media{position:relative;overflow:hidden}
.ann-media img{width:100%;height:100%;object-fit:cover;display:block}

.ann-body{padding:clamp(28px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center}
.ann-body h2{margin-top:14px}
.ann-body p{margin-top:18px;font-size:14.5px;line-height:1.7;color:var(--ink-85);max-width:42ch}
.ann-body p a{white-space:nowrap;border-bottom:1px solid var(--ink-38);transition:border-color .4s var(--ease)}
.ann-body p a:hover{border-bottom-color:var(--ink)}
.ann-facts{grid-template-columns:auto 1fr;border-bottom:var(--line);margin-top:24px}
.ann-facts .fact{padding-block:16px;padding-inline:0 18px}
.ann-facts .fact + .fact{padding-inline:18px 0}
/* The site's narrow-screen facts rule stacks cells and rules under each one.
   This row stays side by side, so keep its divider and its single rule. */
.ann-facts .fact{border-bottom:0}
.ann-facts .fact:first-child{border-right:var(--line)}
.ann-facts .fact dd{font-size:clamp(1.05rem,1.6vw,1.35rem);margin-top:8px;white-space:nowrap}
.ann-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
.ann-later{
  font-family:var(--body);font-weight:500;
  font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--ink-60);background:none;border:0;cursor:pointer;
  padding:0 0 4px;border-bottom:1px solid var(--ink-16);
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.ann-later:hover{color:var(--ink);border-bottom-color:var(--ink)}

.ann-x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:34px;height:34px;border:0;background:none;cursor:pointer;
}
.ann-x::before,.ann-x::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:13px;height:1px;background:var(--ink);
}
.ann-x::before{transform:rotate(45deg)}
.ann-x::after{transform:rotate(-45deg)}
.ann-x:hover::before,.ann-x:hover::after{background:var(--clay)}

@media(max-width:760px){
  .ann-panel{grid-template-columns:1fr;max-height:90vh;max-height:90svh;overflow-y:auto}
  .ann-media{height:min(34vh,220px);height:min(34svh,220px)}
  .ann-x::before,.ann-x::after{background:var(--paper)}
  /* On a phone the cross sits over the photograph, and a light one loses it */
  .ann-x{top:8px;right:8px;border-radius:50%;background:rgba(20,20,20,.42)}
}
@media(prefers-reduced-motion:reduce){
  .ann-scrim,.ann-panel{transition:none}
}

/* ── The Cal.eu placeholder ──────────────────────────────────
   Stands in the calendar's place until someone allows cookies or
   asks for it directly. Sized to sit in the same well, so the page
   does not jump when the real thing arrives. */
.cal-hold{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:14px;min-height:420px;padding:40px clamp(22px,4vw,52px)}
.cal-hold-t{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.25;max-width:22ch}
.cal-hold-b{font-size:.95rem;line-height:1.65;max-width:46ch;color:var(--ink-85)}
.cal-hold .btn{margin-top:6px}

/* ── The call to action under the specification ────────────────
   A lodge page is four hundred words of selling with a full gallery,
   and until now the only way to act on it was at the very bottom.
   This sits where interest actually peaks, at the end of the spec.
   Deliberately quieter than the band below it: a rule and a line,
   not a second full-width pitch competing with the first. */
.spec-act{margin-top:clamp(30px,4vw,46px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--ink-16);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:18px 32px}
.spec-act-t{font-family:var(--display);font-weight:300;
  font-size:clamp(1.15rem,1rem + .55vw,1.4rem);line-height:1.25;
  max-width:26ch;margin:0}
.spec-act .hero-cta{margin-top:0;margin-left:auto}
@media(max-width:620px){
  .spec-act{flex-direction:column;align-items:flex-start}
  .spec-act .hero-cta{width:100%;margin-left:0}
}

/* ── The two quieter asks on the enquiry form ────────────────
   Somebody six months from deciding will not book a viewing, and
   until now the form had nothing else for them. */
.field-ask{display:grid;gap:12px;margin-top:6px;padding-top:18px;border-top:1px solid var(--ink-16)}
.field-post{margin-top:2px}
label .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-quiet)}

/* ── Floor plan viewer ───────────────────────────────────────────────
   A plan is drawn to be read large. In the collection grid it is about
   430px across, where a room label is four pixels tall. The drawing does
   not change; it opens instead. */
.planview-open{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;position:relative;color:inherit;font:inherit;text-align:left}
.planview-open img{display:block;width:100%;height:auto}
.planview-hint{
  position:absolute;right:12px;bottom:12px;
  font-family:var(--body);font-size:.62rem;font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--ink-quiet);
  background:var(--paper-70);padding:7px 12px;
  opacity:0;transition:opacity .28s var(--ease)}
.planview-open:hover .planview-hint,
.planview-open:focus-visible .planview-hint{opacity:1}
/* Touch has no hover to reveal it, so it simply stays. */
@media (hover:none){.planview-hint{opacity:1}}

.planview{
  position:fixed;inset:0;z-index:120;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:clamp(14px,3vw,34px);
  background:var(--dune);
  visibility:hidden;opacity:0;
  transition:opacity .3s var(--ease),visibility .3s var(--ease)}
body.plan-open .planview{visibility:visible;opacity:1}
body.plan-open{overflow:hidden}

.planview-scroll{
  flex:1 1 auto;width:100%;min-height:0;
  display:flex;align-items:center;justify-content:center;
  overflow:auto;-webkit-overflow-scrolling:touch}
.planview-scroll img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  margin:auto;cursor:zoom-out}

/* Portrait cannot show a two-to-one drawing across the width and leave
   anything readable, so fill the height and let the plan be swiped. */
@media (orientation:portrait) and (max-width:760px){
  .planview-scroll{display:block}
  .planview-scroll img{max-width:none;height:100%;max-height:none}
}

.planview-cap{
  flex:0 0 auto;margin:0;text-align:center;
  font-family:var(--body);font-size:.78rem;color:var(--ink-quiet)}
.planview-close{
  flex:0 0 auto;
  font-family:var(--body);font-size:.68rem;font-weight:500;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--ink);background:none;
  border:1px solid var(--ink-38);border-radius:0;
  padding:14px 30px;cursor:pointer;
  transition:border-color .28s var(--ease),background .28s var(--ease)}
.planview-close:hover{border-color:var(--ink);background:var(--paper-45)}

@media (prefers-reduced-motion:reduce){
  .planview,.planview-hint{transition:none}
}

/* ── Scheme description ──────────────────────────────────────────────
   A scheme is one model in a different set of materials, so the card and
   the page read model identity, then scheme, then specification. The
   identity keeps the weight it has on every other card; the scheme sits
   under it, quieter, because it is the answer to a second question. */
/* Where a scheme line follows, size and colour already rank the two lines;
   extra weight made scheme cards look bolder than their neighbours. */
.card-scheme{
  font-size:12.5px;color:var(--ink-quiet);margin-top:7px;line-height:1.55}
.lede:has(+ .lede-scheme){color:var(--ink)}
.lede-scheme{
  font-size:clamp(.9rem,1vw,.97rem);line-height:1.7;
  color:var(--ink-quiet);max-width:52ch;margin-top:12px}
.on-ink .lede-scheme,.ink .lede-scheme{color:var(--paper-45)}

/* ── Scheme sibling cards ────────────────────────────────────────────
   A card that says "have you seen the Country scheme" should show it.
   The step card gets a photograph above its rule. */
.step-shot{
  display:block;width:100%;aspect-ratio:4/3;overflow:hidden;margin-bottom:16px}
.step-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.step:hover .step-shot img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.step-shot img{transition:none}
  .step:hover .step-shot img{transform:none}}

/* ── To order ────────────────────────────────────────────────────────
   One mark for one meaning. If a lodge is built to order rather than
   standing on the park, it carries the clay flag, in the mega nav and on
   the collection card as well as on its own page. */
.flag-order{
  display:inline-block;background:var(--clay);color:var(--ink);
  font-family:var(--body);font-size:9px;font-weight:500;
  letter-spacing:1.8px;text-transform:uppercase;
  padding:3px 7px;line-height:1.3;white-space:nowrap}
.mn-flag{margin-left:8px;vertical-align:2px}
/* mn-txt is a flex column, so a stray flag stretches the full width. */
.mn-txt > .flag-order{align-self:flex-start;margin-left:0;margin-top:5px}
.card-order{position:absolute;left:0;top:0;z-index:2;font-size:9.5px;letter-spacing:2.4px;padding:7px 12px}

/* ── Bleed images on a phone ─────────────────────────────────────────
   The band height is set in vh, which on a tall narrow screen turns a
   sixteen by nine photograph into a portrait crop showing about a third
   of the frame. On a phone the height comes from the picture instead, so
   the composition survives and there is no column of tarmac under it. */
@media (max-width:640px){
  .bleed{height:auto;aspect-ratio:4/3;max-height:76vh}
  .bleed-tall{height:auto;aspect-ratio:5/4;max-height:80vh}
}
@media (max-width:420px){
  .bleed{aspect-ratio:3/2}
  .bleed-tall{aspect-ratio:4/3}
}

/* ── Replay a lodge walkthrough ──────────────────────────────────────
   The lead film plays once and holds on its last frame, so the frame has
   to carry a way back to the start. Same control as the homepage film,
   sitting on the image rather than under it. */
.lead-replay{
  position:absolute;right:var(--gut);bottom:clamp(16px,3vw,26px);
  display:flex;align-items:center;gap:10px;
  font-family:var(--body);font-size:9.5px;font-weight:500;
  letter-spacing:2.4px;text-transform:uppercase;
  color:var(--paper);background:rgba(20,20,20,.55);
  border:0;padding:10px 14px;cursor:pointer;
  transition:background .3s var(--ease)}
.lead-replay:hover{background:rgba(20,20,20,.78)}
.lead-replay .dot{width:6px;height:6px;background:var(--clay);border-radius:50%;flex:none}
.lead-replay[hidden]{display:none}
/* The lead spans the full width. The button is anchored to the picture's own
   frame, not to .lodge-head: on a phone the head's grid reflows so the facts
   sit below the picture, and a button pinned to the section bottom landed on
   the price. nottage.js builds the frame when it builds the button. */
.lodge-head{position:relative}
.lead-frame{
  grid-column:1 / -1;
  grid-row:2;
  position:relative;
  display:block;
  line-height:0;
  width:calc(100vw - var(--sb, 0px));
  margin-left:calc(50% - 50vw + var(--sb, 0px) / 2);
  margin-right:calc(50% - 50vw + var(--sb, 0px) / 2);
  margin-top:clamp(34px,5vw,64px);
}
.lead-frame .lodge-lead{
  width:100%;
  max-width:none;
  margin:0;
  height:clamp(320px,58vh,660px);
  object-fit:cover;
  display:block;
}
@media(max-width:900px){
  .lead-frame{grid-column:1;grid-row:auto;margin-top:clamp(20px,5vw,30px)}
  .lead-frame .lodge-lead{height:clamp(240px,42vh,340px)}
}
@media print{.lead-replay{display:none!important}}
/* The Collection page opens on a film the full width of the page, straight
   under the header, rather than inside a lodge page's grid. */
main > .lead-frame{width:100%;margin:var(--hdr-h,92px) 0 0}

/* At 375px the row was 341px in a 335px slot and the burger sat off the edge.
   Ninety-two pixels of brand and tighter gaps bring it back inside.
   Sits last in the file so it out-orders the wider brand rules above. */
@media(max-width:400px){
  .hdr{gap:6px}
  .hdr-r{gap:6px}
  .hdr-models{margin-left:4px}
  .brand img{width:92px}
}

/* ============================================================
   PHONE FLOOR
   Design v2 section 3: readability wins, particularly on mobile.
   On a phone nothing that is read goes under 11px and nothing that
   is pressed goes under 12px. The maps keep their own scale and the
   collection panel opens from the header on a phone, so its labels are
   in. Last in the file so it out-orders the
   header squeeze at 560px above.
   ============================================================ */
@media(max-width:560px){
  .eyebrow,.tlink,.hero-foot,figcaption,.fact dt,.filters-label,.filter-count,
  .card-maker,.card-spec,.spec-group h4,.quote cite,.field label,.ftr h5,
  .plan-meta dt,.moment-time,.named-where,.course-rank,.far-dist,.far-rank,
  .ann-later,.mn-trigger,.mn-sub,.mn-price .poa{font-size:11px}
  .flag-order,.card-order,.planview-hint{font-size:11px;letter-spacing:1.6px}
  .btn,.chip,.lead-replay,.plan-actions .btn{font-size:12px}
}

/* Tap targets on touch. Nothing visible moves; the hit area grows around
   it. Links inside running text are left alone, as the guideline allows. */
@media(hover:none){
  .tlink,.eyebrow a{position:relative}
  .tlink::after,.eyebrow a::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  .eyebrow a::after{top:-14px;bottom:-14px}
  .chip{display:inline-flex;align-items:center;min-height:44px}
  .lead-replay{min-height:44px}
  .drawer a{min-height:44px;display:flex;align-items:center}
  .consent-field input{width:22px;height:22px;margin-top:0}
  .consent-field .err{margin-left:35px}
}

/* On a phone the fixed header sat on the first line of every inner page:
   the eyebrow, or the breadcrumb, under 67 to 81px of header while the
   section gave it 61px. The script publishes the header's real height; the
   fallback covers the tallest phone header if the script has not run.
   !important because the pages carry their desktop padding inline. */
@media(max-width:900px){
  main > .band-half:first-child{padding-top:calc(var(--hdr-h,92px) + 30px)!important}
}

/* ============================================================
   DESKTOP MEASURE
   Tom, 9 September: "why do we wrap everything so much on desktop".
   Because the headings carried caps of 12 to 24 characters, set inline
   on forty-eight of them and at 19ch on the hero, and because the
   text-and-picture layouts gave the words the narrower side. At 1440
   the hero ran to four lines and the park heading to four. Caps relaxed
   to a measure the page width itself bounds (three lines on the hero at
   86px), and the words take the wider side. !important because the caps
   are inline; the phone is untouched. What remains is the length of the
   sentences, which is a copy decision.
   ============================================================ */
@media(min-width:900px){
  .d1{max-width:min(30ch,100%)!important}
  .d2,.d3{max-width:min(34ch,100%)!important}
  .split-text{grid-template-columns:1.15fr .85fr}
}

/* A hero headline set to the body's 60ch measure breaks where the column
   runs out rather than where the sentence does: "Six lodges to / stay in,
   two miles / from the sand." on a 1440 screen with the other half of it
   empty. Shrinking the type to fit would be the wrong way round. The
   headline gets a display measure and its own break; the lede keeps its
   reading measure, and the phone is untouched. */
.hero-wide{max-width:min(92ch,100%)}
@media(min-width:900px){
  .hero-wide .d1{max-width:none!important}
}
.d-br{display:none}
@media(min-width:900px){ .d-br{display:inline} }

/* ============================================================
   STAY ROWS
   The four lets are a choice, not a catalogue. A two by two grid of
   small cards made a holidaymaker scan; each lodge now takes a full
   row with the photograph large and the words beside it, alternating
   side so the eye travels down the page. Bentley, not a brochure.
   Only the layout changes: the rails, their marks and their arrows
   are the same markup, so swiping still works.
   ============================================================ */
.stay-rows{display:grid;gap:clamp(56px,8vw,120px)}
@media(min-width:901px){
  .stay-rows .card{
    display:grid;grid-template-columns:1.22fr .78fr;
    gap:clamp(34px,4.5vw,72px);align-items:center;
  }
  /* Alternate the side. The photograph leads on the odd rows. */
  .stay-rows .card:nth-child(even) .card-media{order:2}
  .stay-rows .card-body{padding-top:0}
  .stay-rows .card h3{font-size:clamp(2rem,3.4vw,3.1rem);margin-top:0}
  .stay-rows .card-line{font-size:17px;line-height:1.75;margin-top:16px;max-width:32ch;color:var(--ink-70)}
  .stay-rows .card-spec{margin-top:26px}
  .stay-rows .rail-shot img{aspect-ratio:3/2}
}
@media(max-width:900px){
  .stay-rows{gap:clamp(40px,9vw,64px)}
  .stay-rows .card h3{font-size:clamp(1.7rem,6vw,2.1rem)}
  .stay-rows .card-line{font-size:15.5px;line-height:1.7;margin-top:12px}
}

/* The two actions on a stay row: the booking button and, beside it, the way
   to see more. Rosewood pairs a filled Reserve with an outlined Details on
   every room; this is the same pair in this site's language. While the
   booking button is hidden the link stands on its own, so the row is never
   an action short. */
.stay-rows .hero-cta{align-items:center;gap:clamp(18px,2vw,28px);margin-top:22px}


/* ============================================================
   THE CONTACT BAR
   Below 1200 the header drops the nav and "Come and visit", and below
   about 560 the telephone number shrinks to a bare icon, so on a phone
   there was no visible way to make contact without opening the drawer.
   Measured on lodges-for-sale at 1024 and at 375. The holiday pages
   solved this already; this is the same answer for the rest of the site.
   The button comes back between 901 and 1200, where there is room for it
   once the nav has gone, and below 901 a bar carries it instead.
   ============================================================ */
@media(min-width:901px){
  .hdr-r .btn{display:inline-flex}
}
.site-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);
}
.site-bar .btn{flex:1 1 auto;justify-content:center;margin:0;white-space:nowrap;
  padding-inline:16px;font-size:12px}
.site-bar .btn-clay{flex:0 0 auto}
@media(max-width:900px){
  .site-bar{display:flex}
  body.has-bar{padding-bottom:74px}
}
@media print{ .site-bar{display:none!important} }

/* ============================================================
   OPEN WEEKEND — our own times, with Cal behind them
   ============================================================ */
/* Side by side on a wide screen. On a phone "Saturday and Sunday" wrapped
   and set the two dates at different heights, with the rule under only the
   left one, so they stack. */
.ow-facts{grid-template-columns:1fr 1fr}
@media(max-width:520px){
  .ow-facts{grid-template-columns:1fr}
  .ow-facts .fact{padding-block:22px}
}
.ow-hero{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ow-grid{align-items:start;gap:clamp(34px,5vw,78px)}
.ow-day{border:0;margin:0;padding:0}
.ow-day + .ow-day{margin-top:30px}
.ow-day legend{
  padding:0;margin-bottom:14px;
  font-size:10.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--clay-ink);
}
.ow-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.ow-slot{position:relative;display:block;cursor:pointer}
.ow-slot input{position:absolute;opacity:0;width:1px;height:1px}
.ow-slot span{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 12px;
  border:1px solid var(--ink-16);background:var(--paper);
  font-size:14px;color:var(--ink);white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.ow-slot small{font-size:9.5px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--clay-ink)}
.ow-slot:hover span{border-color:var(--ink)}
.ow-slot input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ow-slot input:checked + span small{color:var(--clay)}
.ow-slot input:focus-visible + span{outline:2px solid var(--clay);outline-offset:2px}
.ow-dusk{margin-top:18px;color:var(--ink-quiet)}
.ow-full{grid-column:1/-1;color:var(--ink-quiet)}
.ow-slot-err{margin-top:14px}
.ow-when.invalid .ow-slot-err{display:block}
.ow-when.invalid .ow-slot span{border-color:var(--alert)}
.ow-fields{display:grid;gap:26px}
.ow-status{font-size:13.5px;line-height:1.6;color:var(--alert)}
.ow-form .field input{background:transparent}
@media(max-width:900px){ .ow-grid{grid-template-columns:1fr} }

/* ============================================================
   A YEAR HERE — the rows
   Six photographs held inside the 1380px column came out a third of
   a wide screen each, with empty margins round them: a page of
   thumbnails (Tom, 27 Sep). Each now runs to its own edge of the
   screen and takes the larger share of the row; the words keep to
   the site's column on the other side.
   ============================================================ */
.yr-row > .wrap{max-width:none;padding-inline:0}
.yr-row .fig img{aspect-ratio:3/2;height:auto;max-height:88vh}
.yr-row .editorial{padding-inline:var(--gut);max-width:none}
.yr-row figcaption{padding-inline:var(--gut)}
@media(min-width:901px){
  /* The words get a fixed, readable measure, lined up with the site's
     column; the photograph takes everything else, however wide the
     screen. Sharing the row by fractions squeezed the words to one per
     line on a wide or zoomed-out screen (Tom, 27 Sep). */
  .yr-row{
    --yr-edge:max(var(--gut),calc((100vw - var(--sb,0px) - 1380px)/2 + var(--gut)));
    --yr-text:clamp(300px,34vw,480px);
  }
  .yr-row .split-wide{gap:clamp(40px,5vw,96px)}
  .yr-l .split-wide{grid-template-columns:minmax(0,1fr) calc(var(--yr-edge) + var(--yr-text))}
  .yr-r .split-wide{grid-template-columns:calc(var(--yr-edge) + var(--yr-text)) minmax(0,1fr)}
  .yr-l .editorial{padding-inline:0 var(--yr-edge)}
  .yr-r .editorial{padding-inline:var(--yr-edge) 0}
  .yr-l figcaption{padding-inline:var(--gut) 0}
  .yr-r figcaption{padding-inline:0 var(--gut);text-align:right}
}

/* Floor plans at their real relative size: each is as wide as the lodge is
   long, against the longest on the page (42ft). A 40ft Edmonton and a 40ft
   Morlaix now take the same width, and the 35ft Salisbury less (Tom, 28 Sep).
   The images are trimmed to the drawing so the width is the lodge. */
.plan-figure img{width:calc(var(--len,42) / 42 * 100%)}
/* the one plan supplied on white: the paper shows through it */
.plan-figure .plan-paper{mix-blend-mode:multiply}
/* the to-order plans carry the same clay flag as their range cards */
.plan-figure{position:relative}

/* The lodge's name first, the maker quietly under it, as the brochure has
   it: The Glendale, by Pemberton Leisure Homes (Tom, 28 Sep). */
.card-by{display:block;margin-top:8px}
.lodge-by{
  margin-top:12px;font-size:10.5px;font-weight:500;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--ink-quiet);
}

/* A label above a two-column block sits over both columns, so the heading
   and the text beside it start level (Tom, 28 Sep: the text was lining up
   with the label instead of the heading). */
.split-label{display:block;margin-bottom:22px}
.split-under .editorial > :first-child{margin-top:0}

/* ============================================================
   VISIT — choosing a day and a time, optional
   ============================================================ */
.tour-pick{border:0;margin:0;padding:0;display:grid;gap:14px}
.tour-pick legend{
  padding:0;margin-bottom:14px;
  font-size:10.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--clay-ink);
}
.tour-pick legend .opt{letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-quiet);margin-left:6px}
.tour-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.tour-day{
  display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px;padding:8px 4px;
  border:1px solid var(--ink-16);background:var(--paper);cursor:pointer;
  font-family:var(--body);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-60);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.tour-day b{font-family:var(--display);font-weight:300;font-size:1.35rem;letter-spacing:0;color:var(--ink);text-transform:none}
.tour-day:hover{border-color:var(--ink)}
.tour-day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper-quiet,var(--paper))}
.tour-day[aria-pressed="true"] b{color:var(--paper)}
.tour-day:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.tour-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.tour-times:empty{display:none}
.tour-pick.invalid .tour-err{display:block}
.form-note a{border-bottom:1px solid var(--ink-38)}
.tour-other{color:var(--ink-quiet)}
.tour-other a{border-bottom:1px solid var(--ink-38);color:var(--ink)}

/* Holidays: the booking row that hands over to RMS at the prices step */
.rms-row{display:grid;gap:18px 22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rms-row .field:last-child{grid-column:1/-1}
@media(min-width:900px){
  .rms-row{grid-template-columns:1.2fr 1.2fr .7fr .7fr 1.4fr}
  .rms-row .field:last-child{grid-column:auto}
}
.rms-msg{margin-top:14px;font-size:13.5px;color:var(--alert)}
.rms-or{margin-top:18px;color:var(--ink-quiet)}

/* "Come and walk through them" broke onto two lines in a full-width button on
   a 375px phone. Slightly tighter tracking and padding keeps every button on
   one line at phone width. */
@media(max-width:420px){
  .btn{letter-spacing:1.8px;padding-inline:18px}
}
@media(max-width:380px){
  .btn{letter-spacing:1.2px;padding-inline:14px}
}