/* ==========================================================================
   Inner pages — Ranthambore Aangan
   --------------------------------------------------------------------------
   Loaded AFTER style.css and only by inner pages. The homepage is frozen, so
   nothing here may change how index.html renders: every selector below is
   either a new class or is scoped under .page-inner.

   Scale and rhythm follow the homepage rather than the raw numbers in
   COMMON-GUIDELINES.md, because the homepage cannot be moved to meet them and
   §2 of that document requires the two to agree. See §11.1 there.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   The bar is fixed and opaque on an inner page - there is no banner behind it
   for it to go transparent over - so the page starts below its full height.
   -------------------------------------------------------------------------- */
.page-inner{padding-top:var(--inner-nav-h)}
/* Body copy at 16, down from the utility's 18. Scoped to .page-inner rather
   than set on .text-size-medium itself, because the frozen homepage uses that
   same class and must not move. */
.page-inner .text-size-medium{font-size:1rem}
:root{
  /* Exactly the fixed bar's height, measured, not rounded up: 6rem of logo,
     .75rem of padding each side, and its 1px rule. Any slack here is added to
     the breadcrumb's own 24px top padding, and the pair then reads as 47px
     against a spec of 24. Keep this tracking the bar. */
  --inner-nav-h: 7.5625rem;     /* 121 */
  /* COMMON-GUIDELINES §: section → section is 100 on desktop, 60 on a phone.
     This sat at 50 for a while, which is why several joins below were written
     as literal 100s to work around it; they take the token again now. */
  --inner-section-y: 6.25rem;   /* 100 — section to section */
  /* Widget → widget: half of section → section. Two blocks that belong to the
     same part of the page sit closer than two parts of the page do. The
     guidelines' table stops at Content → Content 40 and jumps to Section →
     Section 100, so this fills the step between them. */
  --inner-widget-y: 3.125rem;   /* 50 — widget to widget */
  /* Last content → footer, on every inner page. Opened out from 120/100:
     160 on a desktop, 120 on a phone, ramping between rather than jumping at
     one breakpoint — 12.5vw passes through 160 at 1280 and through 120 at 960,
     so the clamp holds 120 below that and 160 above 1280. */
  --inner-foot-gap: clamp(7.5rem, 12.5vw, 10rem);   /* 120 → 160 */
  /* Square. Every card and picture box reads var(--radius-card, .75rem), so
     defining the token here squares the lot; the fallback keeps the rounded
     value for anything that does not load this file. */
  --radius-card: 0;
  --inner-gap-24: 1.5rem;
  --inner-gap-32: 2rem;
  --inner-gap-40: 2.5rem;
}

/* --------------------------------------------------------------------------
   2. Breadcrumb
   First component the site has had; every inner page uses this one.
   Navbar → breadcrumb 24, breadcrumb → heading 16, straight off the spec.
   -------------------------------------------------------------------------- */
.breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  padding-top:var(--inner-gap-24);
  font-size:.875rem;line-height:1.43;          /* 14 / 20 */
  color:var(--earth);
}
.breadcrumb a{color:var(--earth);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px;transition:color var(--dur) var(--ease)}
.breadcrumb a:hover{color:var(--green)}
.breadcrumb .sep{opacity:.5;line-height:1}
.breadcrumb [aria-current]{opacity:.65}

/* --------------------------------------------------------------------------
   3. Page head — heading and its standfirst, centred
   -------------------------------------------------------------------------- */
.page-head{margin-top:1rem;text-align:center}          /* breadcrumb → heading 16 */
.page-head h1{margin:0}
.page-head .page-lede{
  max-width:46rem;margin:1rem auto 0;                  /* heading → paragraph 16 */
}
.page-head .page-lede p{margin:0}
.page-head .page-lede p + p{margin-top:.75rem}         /* paragraph → paragraph 12 */

/* --------------------------------------------------------------------------
   4. Sections
   100px between sections, as specified. Applied as one margin rather than
   padding on both sides so two adjacent sections cannot add up to 200.
   -------------------------------------------------------------------------- */
.section-inner + .section-inner{margin-top:var(--inner-section-y)}
/* ...unless the two are widgets within one part of the page rather than two
   parts of it, in which case they close to half that. */
.section-inner + .section-inner.is-widget{margin-top:var(--inner-widget-y)}
/* Same gap again for the nested case. On the location page the CTA sits INSIDE
   the attractions section rather than after it, so its previous sibling is the
   slider and the adjacent rule above never matches it — measured, the button
   was landing 0px under the slider's rail, touching the arrows. This gives the
   nested one the same 50 the sibling case already gets. */
.section-inner > .page-cta.is-widget{margin-top:var(--inner-widget-y)}
/* Whatever a page ends on, it ends the same distance above the footer. */
.page-inner .section-inner:last-of-type{margin-bottom:var(--inner-foot-gap)}
/* The head is not a .section-inner, so without this the first section butts
   straight against the standfirst - measured at 0px. Content → content. */
.page-head + .section-inner{margin-top:var(--inner-gap-40)}
/* Same trap on the room pages: .room-hero is a plain div, so the section after
   it matched no adjacent-sibling rule and sat at 0 — the Amenities heading
   landed directly on the slider's thumbnails. */
.room-hero + .section-inner{margin-top:var(--inner-section-y)}
/* A head that ends in a picture reads as a section of its own, so what follows
   it needs a section-sized gap rather than a content-to-content one. */
.page-head.has-gallery + .section-inner{margin-top:var(--inner-section-y)}

/* --------------------------------------------------------------------------
   5. Mission / Vision / Values
   Three equal boxes: icon, heading, paragraph. Ruled rather than filled, so
   they sit on the ivory the way the reference's do, and every box is the same
   height whatever its copy runs to.
   -------------------------------------------------------------------------- */
.mvv{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;                                         /* card → card 20 */
}
.mvv_card{
  display:flex;flex-direction:column;align-items:flex-start;
  /* 28/24, down from 40/32. The cards carry an icon, a short heading and two
     lines of type — at the old padding the box was mostly air. */
  padding:1.75rem 1.5rem;
  background-color:var(--bg);
  border:1px solid var(--nav--border);
  border-radius:var(--radius-card, .75rem);
}
/* The mark sits in its own ring so the three read as a set even though the
   drawings inside them are different shapes. */
.mvv_icon{
  display:flex;align-items:center;justify-content:center;
  /* 44 with a 20 mark, down from 56 with a 26 — the ring was competing with
     the heading under it rather than introducing it */
  width:2.75rem;height:2.75rem;flex:none;margin-bottom:.875rem;
  border:1px solid var(--green);border-radius:50%;
  color:var(--green);
}
.mvv_icon svg{width:1.25rem;height:1.25rem;display:block}
.mvv_card h2{margin:0 0 .625rem}                       /* heading → paragraph 10 */
.mvv_card p{margin:0}

/* --------------------------------------------------------------------------
   6. Picture mosaic
   Three columns; the middle one starts lower and runs taller, so the block is
   not a plain grid. Ratios are fixed per cell, so a replacement photograph
   drops in without moving anything.
   -------------------------------------------------------------------------- */
.mosaic{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--inner-gap-24);align-items:stretch;
  /* Taken in at once: the collage is held to what is left of the screen under
     the bar, so it never runs past the fold and ask to be scrolled through.
     It was 870 tall regardless of the window, which fitted a 1080 screen and
     overflowed a 900 one by 59. Capped at that 870 as well, so a very tall
     monitor does not stretch it into a wall.
     svh, not vh: on a phone vh is the viewport with the browser chrome
     retracted, which is taller than what you can actually see. */
  height:min(54.375rem, calc(100svh - var(--inner-nav-h) - 3rem));
}
.mosaic_col{display:flex;flex-direction:column;gap:var(--inner-gap-24);height:100%}
.mosaic figure{margin:0;overflow:hidden;background-color:rgba(61,52,40,.06)}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block}
/* Chosen so the three columns finish level: two-item columns come to
   1.34 + .72 = 2.06 of a column width, and the three-item column to
   .66 × 3 = 1.98 plus its extra gap. Left unbalanced the third column ran
   166px past the others and the block read as a mistake rather than a mosaic. */
/* The same proportions, but shared out of a fixed column height rather than
   grown from the column width. As flex shares they also settle the balancing
   problem the comment above describes on their own: whatever the numbers, each
   column fills its height exactly, so the three always finish level. */
.mosaic .is-tall  {flex:1.34 1 0;min-height:0}
.mosaic .is-short {flex:.72 1 0;min-height:0}
.mosaic .is-flat  {flex:.66 1 0;min-height:0}

/* --------------------------------------------------------------------------
   6b. Room cards — the Rooms summary
   Two room types, so two to a row, per §7 of the guidelines. One card design:
   picture on a fixed 4:3 plate, then a body of fixed padding, with the way in
   pinned to the foot so it sits on one line whatever the copy runs to.
   -------------------------------------------------------------------------- */
/* 50 between the rows, 24 between the columns. A row break is a break between
   groups of cards and wants more air than the gap inside a row. */
.card-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:50px var(--inner-gap-24);
}
.card-grid.is-3up{grid-template-columns:repeat(3,minmax(0,1fr))}

.room-card{
  display:flex;flex-direction:column;
  background-color:var(--bg);
  border:1px solid var(--nav--border);
  border-radius:var(--radius-card, .75rem);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.room-card:hover{border-color:var(--green);box-shadow:0 .75rem 2rem rgba(61,52,40,.10)}
/* A 4:3 plate made the card 714px tall, and the pair then ran 165px past the
   foot of a 900px window before either heading was reached. Held to 16:10 and
   capped against the viewport, so the plate shrinks with the screen rather
   than only with the column. The crop sits above centre because the room
   photographs are portrait — centred, a short window shows only bedding. */
.room-card_media{
  margin:0;aspect-ratio:16/10;max-height:34vh;
  overflow:hidden;background-color:rgba(61,52,40,.06);
}
.room-card_media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block;
  transition:transform var(--dur-image, .6s) var(--ease);
}
.room-card:hover .room-card_media img{transform:scale(1.04)}
.room-card_body{
  display:flex;flex-direction:column;align-items:flex-start;
  flex:1;padding:1.75rem;
}
.room-card_body h2,.room-card_body h3{margin:0 0 1.25rem}   /* heading → paragraph 20, was 12 */
.room-card_body p{margin:0}
.room-card_body p + p{margin-top:.75rem}
/* pushed to the foot so both cards' links sit on one line */
.room-card_link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.25rem;
  font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);
  border-bottom:1px solid currentColor;
  transition:color var(--dur) var(--ease),gap var(--dur) var(--ease);
}
.room-card_link svg{width:.875rem;height:.875rem;flex:none}
.room-card:hover .room-card_link{gap:.85rem}

/* --------------------------------------------------------------------------
   6c. Room inner page
   -------------------------------------------------------------------------- */
/* the strip of sibling rooms, directly under the bar */
/* The closing rule stays. It was taken out once on the theory that the bar's
   own hairline directly above made it a redundant second line; removing it was
   worse — with nothing under it the strip has no floor, and it reads as loose
   type drifting between the bar and the breadcrumb rather than as a band. Two
   lines close together is the better of the two. */
.roomnav{
  border-bottom:1px solid var(--nav--border);
  background-color:var(--bg);
}
.roomnav_list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;
  padding:.875rem 0;
}
.roomnav_list a{
  font-size:.875rem;color:var(--earth);opacity:.72;
  padding-bottom:.25rem;border-bottom:1px solid transparent;
  transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.roomnav_list a:hover{opacity:1}
.roomnav_list a[aria-current]{opacity:1;border-bottom-color:var(--green);color:var(--green)}

/* the one-line facts, set as a row of marks rather than a sentence */
.room-specs{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem 2.25rem;margin-top:var(--inner-gap-24);
}
.room-spec{display:inline-flex;align-items:center;gap:.55rem;
  font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--earth)}
.room-spec svg{width:1.125rem;height:1.125rem;flex:none;color:var(--green)}

.room-book{margin-top:var(--inner-gap-24);text-align:center}
.room-book .button{margin:0 auto}

/* --------------------------------------------------------------------------
   Room hero — pictures and details side by side
   A full-width slider was capped by height, and with a fixed ratio that took
   its width down with it: a 783px picture in a 1280px row, left-aligned, with
   500px of nothing beside it and the copy stranded above. Two columns instead.
   The pictures take the wider half, the room's facts the narrower, and the
   whole fold is held to what is left of the screen under the bar.
   -------------------------------------------------------------------------- */
/* One column, not two. The reference runs the pictures the full width of the
   container with the room's facts underneath, rather than standing them in a
   half-width column beside the copy — which is what kept the picture small. */
.room-hero{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--inner-gap-40);align-items:start;
  margin-top:var(--inner-gap-24);
}
/* Centred, like every other page's head. It was left-aligned for the old
   two-column row, where it stood beside the pictures; now it sits above them
   and reads as the page's opening rather than as a caption. */
.room-hero .page-head{margin-top:0;text-align:center}
.room-hero .page-head .page-lede{max-width:46rem;margin:1rem auto 0}
.room-hero .room-specs{justify-content:center;gap:.75rem 1.75rem}
.room-hero .room-book{text-align:center}
.room-hero .room-book .button{margin:0 auto}

/* --- the slider ---------------------------------------------------------- */
/* The picture and its thumbnails are one object with one height budget: the
   slider is given what is left of the screen under the bar, the thumbnails
   take their fixed strip off the bottom, and the picture takes the rest. That
   way the pair always lands inside one viewport rather than the picture being
   sized on its own and the thumbnails pushing the total past the fold.

   9rem is what sits above it — the breadcrumb, the room-type nav and the
   hero's own top margin — plus a little air beneath. */
.slider{
  position:relative;min-width:0;
  display:flex;flex-direction:column;
  height:min(46rem, calc(100svh - var(--inner-nav-h) - 9rem));
}
.slider_frame{
  position:relative;overflow:hidden;
  flex:1;min-height:0;                 /* takes whatever the thumbnails leave */
  border-radius:var(--radius-card, .75rem);
  background-color:rgba(61,52,40,.06);
}
/* Every slide in one grid cell, so the frame is the height of the tallest and
   nothing shifts as the pictures change. */
.slider_track{display:grid;width:100%;height:100%}
/* One row the height of the frame. Left to size itself, the row grew to the tallest photograph (a portrait bathroom shot), and every landscape slide was then cropped to its ceiling. */
.slider_track{grid-template-rows:minmax(0,1fr)}
.slider_slide{min-height:0}
.slider_slide{
  grid-area:1/1;width:100%;height:100%;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s linear .45s;
}
.slider_slide.is-active{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.slider_slide img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.slider.is-instant .slider_slide{transition:none}

.slider_arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;padding:0;
  background-color:rgba(245,239,227,.92);color:var(--earth);
  border:0;border-radius:50%;cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.slider_arrow:hover{background-color:var(--green);color:var(--ivory)}
.slider_arrow svg{width:1rem;height:1rem}
.slider_arrow.is-prev{left:.875rem}
.slider_arrow.is-next{right:.875rem}

.slider_count{
  position:absolute;right:.875rem;bottom:.875rem;z-index:2;
  padding:.3rem .6rem;
  background-color:rgba(61,52,40,.72);color:var(--ivory);
  font-size:.6875rem;letter-spacing:.12em;
}

/* A fixed strip rather than a ratio: the frame above is sized by what this
   leaves, so this has to be a known number, not something the thumbnails'
   own width decides. */
.slider_thumbs{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:.625rem;margin-top:.625rem;
  flex:none;height:clamp(4rem,7vw,6.5rem);
}
.slider_thumb{
  margin:0;padding:0;border:0;background:none;cursor:pointer;
  height:100%;overflow:hidden;
  border-radius:var(--radius-card, .75rem);
  opacity:.5;transition:opacity var(--dur) var(--ease),outline-color var(--dur) var(--ease);
  outline:2px solid transparent;outline-offset:2px;
}
.slider_thumb img{width:100%;height:100%;object-fit:cover;display:block}
.slider_thumb:hover{opacity:.8}
.slider_thumb[aria-current="true"]{opacity:1;outline-color:var(--green)}

/* Without script every slide is visible and stacks, so the photographs are
   all still reachable rather than one shown and the rest hidden. */
.no-js .slider_slide{opacity:1;visibility:visible}
.no-js .slider_track{display:block}
.no-js .slider_arrow,.no-js .slider_count{display:none}
/* --------------------------------------------------------------------------
   6d. In this room — the amenity grid
   Six to a row on desktop. Every tile is the same height whatever its label
   runs to, so the grid reads as a table of one thing rather than a ragged set.
   -------------------------------------------------------------------------- */
.amenities{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--inner-gap-24);margin-top:var(--inner-gap-32);
}
.amenity{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;min-height:8.5rem;padding:1.25rem .75rem;text-align:center;
  background-color:var(--bg);
  border:1px solid var(--nav--border);
  border-radius:var(--radius-card, .75rem);
}
.amenity svg{width:1.5rem;height:1.5rem;color:var(--green);flex:none}
.amenity_name{font-size:.875rem;line-height:1.35;color:var(--earth)}
.amenity_note{font-size:.75rem;line-height:1.3;color:var(--ochre)}

/* --------------------------------------------------------------------------
   6e. Previous / next room
   -------------------------------------------------------------------------- */
.pager{
  display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;
  padding-top:var(--inner-gap-32);border-top:1px solid var(--nav--border);
}
.pager a{display:flex;flex-direction:column;gap:.5rem;max-width:22rem}
/* Two rooms means previous and next are the same page, so only one link is
   printed. Pushed right by the two-link rule it left an empty half; centred,
   it reads as one deliberate way onward. */
.pager.is-single{justify-content:center}
.pager.is-single .is-next{margin-left:0;align-items:center;text-align:center}
.pager .is-next{align-items:flex-end;text-align:right;margin-left:auto}
.pager_label{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--earth);opacity:.6}
.pager_name{font-family:var(--font-display);font-size:2rem;line-height:1.15;color:var(--earth);
  transition:color var(--dur) var(--ease)}
.pager a:hover .pager_name{color:var(--green)}

/* --------------------------------------------------------------------------
   6f. FAQs
   Built on <details>, so the answers open, take the keyboard and read
   correctly with no script at all. One rule between rows rather than a border
   round each, so a long list reads as one document instead of a stack of cards.
   -------------------------------------------------------------------------- */
.faq{max-width:56rem;margin-inline:auto;border-top:1px solid var(--nav--border)}
.faq_item{border-bottom:1px solid var(--nav--border)}
.faq_q{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.25rem 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:1.25rem;line-height:1.35;
  color:var(--earth);
  transition:color var(--dur) var(--ease);
}
.faq_q::-webkit-details-marker{display:none}   /* Safari's own triangle */
.faq_q:hover{color:var(--green)}
.faq_chevron{
  width:1.25rem;height:1.25rem;flex:none;color:var(--green);
  transition:transform var(--dur) var(--ease);
}
.faq_item[open] .faq_q{color:var(--green)}
.faq_item[open] .faq_chevron{transform:rotate(180deg)}
/* the answer is indented from the question's own line, and stops short of the
   chevron so the two columns of the row still line up */
.faq_a{padding:0 3rem 1.5rem 0}
.faq_a p{margin:0}

/* --------------------------------------------------------------------------
   6g. Contact — the picture, the details card, and the message form
   -------------------------------------------------------------------------- */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--inner-gap-32);
  /* Stretch, so the two columns end level. This was start for a while, back
     when the card ran 300px short of the photograph and stretching left a void
     under Reception; the card has grown since and the gap is now 69px, which
     reads as one column falling over rather than as breathing room. */
  align-items:stretch;
}
/* the picture is given the ratio rather than left to be sized by the row —
   otherwise the two columns each wait for the other to settle on a height */
.contact-media{margin:0;overflow:hidden;aspect-ratio:4/3;background-color:rgba(36,51,31,.06)}
.contact-media img{width:100%;height:100%;object-fit:cover;display:block}

.contact-card{
  display:flex;flex-direction:column;
  /* Centred against the photograph beside it. The block is shorter than the
     picture, and top-aligned it left a run of empty card under Reception. */
  justify-content:center;
  padding:2.25rem 2rem;
  background-color:var(--bg);
  border:1px solid var(--nav--border);
  border-radius:var(--radius-card, .75rem);
}
/* h2 or h3 — the markup has used both, and naming only one left the property's
   name with no rule under it and sitting hard against the address. */
.contact-card h2,
.contact-card h3{margin:0}
/* Sits directly under the property's name, in place of the rule that used to
   divide them — it says what the block is for, which a line could not. */
.contact-kicker{
  margin:.35rem 0 1.5rem;
  font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);
}
.contact-block + .contact-block{margin-top:1.25rem}
/* Inline with its value and the only bold thing in the line — not a small
   uppercase caption stacked above it. 500 rather than 700: the body is set at
   300, so 500 already reads as bold against it and DM Sans has a real cut at
   that weight, where 700 would be synthesised. */
.contact-label{
  display:inline;margin:0;
  font-size:inherit;letter-spacing:normal;text-transform:none;
  font-weight:500;color:var(--earth);opacity:1;
}
.contact-sep{margin:0 .15rem;opacity:.45}
.contact-card p{margin:0}
.contact-card a{color:var(--earth);transition:color var(--dur) var(--ease)}
.contact-card a:hover{color:var(--green)}
/* the map sits on the address line rather than under it, as on the reference */
.contact-map{
  white-space:nowrap;
  border-bottom:1px solid currentColor;color:var(--green);
}

/* --- the message form ----------------------------------------------------- */
.cform{max-width:36rem;margin-inline:auto}
.cform_field + .cform_field{margin-top:1.25rem}
.cform label{
  display:block;margin-bottom:.5rem;
  font-size:.875rem;color:var(--earth);
}
.cform .req{color:var(--ochre)}
.cform input,.cform textarea{
  display:block;width:100%;
  padding:.85rem 1rem;
  font-family:inherit;font-size:1rem;line-height:1.4;color:var(--earth);
  background-color:var(--bg);
  border:1px solid var(--nav--border);
  border-radius:var(--radius-card, .75rem);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.cform textarea{min-height:9rem;resize:vertical}
.cform input::placeholder,.cform textarea::placeholder{color:var(--earth);opacity:.45}
.cform input:focus,.cform textarea:focus{
  outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(85,122,75,.14);
}
/* :user-invalid, not :invalid — an empty required field is invalid from the
   moment it renders, and colouring it red before anyone has typed is a scold */
.cform input:user-invalid,.cform textarea:user-invalid{border-color:#c2603a}
.cform_actions{margin-top:1.75rem;text-align:center}
.cform_actions .button{margin-inline:auto}
.cform_note{
  margin-top:1rem;text-align:center;
  font-size:.8125rem;color:var(--earth);opacity:.7;
}
/* --------------------------------------------------------------------------
   6h. Terms — a long read, set left and measured
   Ranged left, not centred: this is a document to be read line by line, and a
   centred column of clauses is hard to track back to. Capped at the reading
   measure so no line runs past what the eye can follow.
   -------------------------------------------------------------------------- */
.terms{max-width:52rem;margin-inline:auto}
.terms_block + .terms_block{margin-top:2.5rem}
.terms_block h2{margin:0 0 1rem}
.terms_list{margin:0;padding-left:1.25rem;list-style:disc}
.terms_list li{margin:0}
.terms_list li + li{margin-top:.625rem}
.terms_block p{margin:0}
.terms_block p + p{margin-top:.75rem}
.terms_block a{color:var(--green);border-bottom:1px solid currentColor}
/* --------------------------------------------------------------------------
   6i. Blog post
   -------------------------------------------------------------------------- */
.post{max-width:56rem;margin-inline:auto}
.post_media{margin:0 0 var(--inner-gap-32);aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-card, .75rem);background-color:rgba(36,51,31,.06)}
.post_media img{width:100%;height:100%;object-fit:cover;display:block}
.post_body{max-width:46rem;margin-inline:auto}
.post_body p{margin:0}
.post_body p + p{margin-top:1rem}
/* Copy that is not the property's own words, marked so it cannot be mistaken
   for finished text on a review pass. */
.is-placeholder{
  padding:1rem 1.25rem;
  color:var(--earth);opacity:.72;font-style:italic;
  border-left:2px solid var(--ochre);
}

/* --------------------------------------------------------------------------
   6j. Card titles as links
   The whole card points at one page, so the picture and the heading are
   targets too, not just the few words at the foot. The picture and the foot
   link are hidden from assistive tech and taken out of the tab order, leaving
   the heading as the single announced link — otherwise every card is read out
   three times over.
   -------------------------------------------------------------------------- */
/* card picture + heading links are styled at .room-card_media-link and
   .room-card_body h2 a, further down — one convention, not two */

/* --------------------------------------------------------------------------
   6k. A section that leads with a heading and a standfirst
   A .section-inner is not the .page-head, so none of the head rules reach it:
   its paragraph sat directly on the grid below at 0px and the two overlapped.
   -------------------------------------------------------------------------- */
.section-inner > .section-heading + p{margin:1rem 0 0}     /* heading → para 16 */
.section-inner > p + p{margin-top:.75rem}                  /* para → para 12 */
/* Whatever the section leads into — a grid, a collage or a slider — the copy
   above it clears by the same 50. Listing only .card-grid here is what let the
   standfirst sit back down on the tiles the moment that grid became a slider. */
.section-inner > p + .card-grid,
.section-inner > p + .tile-grid,
.section-inner > p + .mosaic,
.section-inner > p + .slider{margin-top:3.125rem}          /* para → cards 50 */

/* --------------------------------------------------------------------------
   7. Closing call to action
   -------------------------------------------------------------------------- */
/* The way out of the page takes the section rhythm above it and opens out
   below, where the ridge and its tiger stand in the gap. The gap
   below is not set here: it is --inner-foot-gap on the last section, so every
   inner page ends the same way whether it finishes on a button or not. */
.page-cta{text-align:center}
/* The last section's bottom margin cannot set this gap on its own: the footer
   carries its own top margin, and with no padding or border between them the
   two collapse to whichever is larger — so the footer's would win. Both are
   given the same value instead. pages.css is linked only by the inner pages
   and loads after style.css, so the homepage's footer is untouched. */
.footer{margin-top:var(--inner-foot-gap)}
.page-cta .button{margin:0 auto}

/* --------------------------------------------------------------------------
   8. Tablet
   -------------------------------------------------------------------------- */
@media screen and (max-width:991px){
  :root{--inner-nav-h:6.5625rem}   /* 105 - the bar is shorter here */
  /* Three ruled boxes at this width leave about 210px of measure each, which
     breaks the copy to three or four words a line. Two up, then one. */
  .mvv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mvv_card{padding:2rem 1.75rem}
  .card-grid.is-3up{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-card_body{padding:1.75rem}
  /* six across leaves each tile about 100px, too narrow for "Complimentary
     Breakfast" to set on two lines */
  .amenities{grid-template-columns:repeat(4,minmax(0,1fr))}
  .roomnav_list{gap:1.25rem}
  .pager_name{font-size:1.5rem}
}

/* --------------------------------------------------------------------------
   9. Mobile
   -------------------------------------------------------------------------- */
@media screen and (max-width:767px){
  /* ---- Tap targets -------------------------------------------------------
     Measured on a 390px phone: the footer sitemap links rendered 43x18, the
     gallery filters 26x30 and the slider arrows 32x24. A finger needs about
     44px square, so each gets there through padding rather than by growing
     its type — the row still looks the same, it is just reachable.
     pages.css is not loaded by index.html, so none of this reaches the
     frozen homepage. */
  .footer_sitemap{gap:0 .5rem}
  .footer_sitemap a{
    display:inline-flex;align-items:center;
    min-height:2.75rem;padding:0 .5rem;      /* 44 tall */
  }
  .footer_legal a{
    display:inline-flex;align-items:center;
    min-height:2.75rem;padding:0 .25rem;
  }
  .gallery-filter{
    min-height:2.75rem;min-width:2.75rem;
    padding-left:.5rem;padding-right:.5rem;
  }
  .slider_step{min-width:2.75rem;min-height:2.75rem}
  .slider_arrow{width:2.75rem;height:2.75rem}
  .slider_thumb{min-height:2.75rem}
  .testimonials_dot{width:2.75rem;height:2.75rem}
  /* 11px was below the readable floor; 12 is the smallest that still reads */
  .slider_count{font-size:.75rem}

  /* the details card goes under the picture rather than beside it */
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-media{aspect-ratio:4/3}
  .contact-card{padding:1.5rem 1.25rem}
  .cform input,.cform textarea{padding:.75rem .875rem}
  .terms_block + .terms_block{margin-top:2rem}

  /* Two columns here leave the copy about 144px — four words to a line, and a
     column 816px tall beside a 168px picture. The pictures go on top, the
     room's facts underneath, both centred as on every other page. */
  .room-hero{grid-template-columns:minmax(0,1fr);gap:var(--inner-gap-24)}
  .room-hero .page-head{text-align:center}
  .room-hero .page-head .page-lede{margin-inline:auto}
  .room-hero .room-specs{justify-content:center}
  .room-hero .room-book{text-align:center}
  .room-hero .room-book .button{margin-inline:auto}

  :root{
    --inner-nav-h:5.8125rem;   /* 93 */
    --inner-section-y:3.75rem;   /* 60 — section to section on mobile */
    --inner-widget-y:1.875rem;   /* 30 — widget to widget on mobile */
    --inner-gap-24:1rem;         /* card → card 16 */
    --inner-gap-32:1.5rem;
    --inner-gap-40:1.5rem;
  }
  /* the question sets to two or three lines on a phone, so it needs the room */
  .faq_q{font-size:1.0625rem;padding:1rem 0;gap:1rem}
  .faq_a{padding:0 2rem 1.25rem 0}

  .breadcrumb{padding-top:1rem;font-size:.8125rem}      /* 16 above, 13px type */
  .page-head{margin-top:.75rem}                          /* breadcrumb → heading 12 */
  /* heading → paragraph 20 on a phone, per COMMON-GUIDELINES §4 (was 12) */
  .page-head .page-lede{margin-top:1.25rem}
  .mvv{grid-template-columns:minmax(0,1fr)}
  .mvv_card{padding:1.75rem 1.5rem}
  .mvv_card h2{margin-bottom:.75rem}
  /* The mosaic's three columns become one run in source order, and the fixed
     ratios come off so a single column of photographs is not a mile long.
     The height cap comes off with them: eight photographs stacked one-up
     cannot be squeezed into a phone screen, and trying would leave eight
     letterbox slivers. On a phone this block is scrolled, by design. */
  .mosaic{grid-template-columns:minmax(0,1fr);height:auto}
  .mosaic_col{height:auto}
  .mosaic .is-tall,.mosaic .is-short,.mosaic .is-flat{flex:none;aspect-ratio:1/.68}

  /* rooms */
  .card-grid,.card-grid.is-3up{grid-template-columns:minmax(0,1fr)}
  .room-card_body{padding:1.5rem}
  .room-card_link{padding-top:1.25rem}
  /* Two across rather than one: these tiles are a label and a mark, so a single
     column would run the section to twice the height for no gain in legibility. */
  .amenities{grid-template-columns:repeat(2,minmax(0,1fr))}
  .amenity{min-height:7.25rem;padding:1rem .5rem}
  /* the sibling-room strip scrolls sideways instead of wrapping to four lines */
  .roomnav_list{
    flex-wrap:nowrap;justify-content:flex-start;gap:1.5rem;
    overflow-x:auto;scrollbar-width:none;
    padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile);
  }
  .roomnav_list::-webkit-scrollbar{display:none}
  .roomnav_list a{white-space:nowrap}
  .room-specs{gap:.75rem 1.25rem}
  .room-gallery_thumbs{gap:.5rem}
  .pager{gap:1.5rem}
  .pager_name{font-size:1.25rem}
}

/* The whole card is a way in, not just the KNOW MORE line: the picture and the
   heading carry the same link. The picture is aria-hidden and out of the tab
   order, so the heading is the one stop and the room name is announced once. */
.room-card_media-link{display:block;width:100%;height:100%}
/* The fort stands at the foot of its plate with a lot of sky above it, so the
   card's default crop framed the sky. Held low enough to show the building. */
.room-card_media img[src*="fort"]{object-position:50% 82%}
.room-card_body h2 a{color:inherit;transition:color var(--dur) var(--ease)}
.room-card_body h2 a:hover{color:var(--green)}


/* ==========================================================================
   FACILITY TILES  — facilities.html
   The same plate-then-body card as .room-card, but the body is one centred
   line rather than a heading and a paragraph, so the tiles read as a list of
   what the house has rather than as a set of articles.

   COMMON-GUIDELINES §1: where no photograph exists for a facility, the plate
   is a flat sage panel carrying the house's leaf mark. That is the rule's own
   fallback — solid colour, never a stock photograph standing in.
   ========================================================================== */
.tile{
  display:flex;flex-direction:column;
  background-color:var(--bg);
  border:1px solid var(--nav--border);
  border-radius:var(--radius-card,.75rem);
  overflow:hidden;
}
.tile_media{
  margin:0;aspect-ratio:16/10;overflow:hidden;
  background-color:var(--sage,#D8E0CE);
}
.tile_media img{width:100%;height:100%;object-fit:cover;display:block}
/* the blank plate: mark centred on the flat panel */
.tile_media.is-blank{display:flex;align-items:center;justify-content:center}
.tile_media.is-blank svg{width:3.25rem;height:auto;color:var(--leaf,#9CB27A);opacity:.9}
.tile_body{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;flex:1;padding:1.125rem 1rem;text-align:center;
}
/* The caption is an <h2> with no heading-style class on it, so left alone it
   fell through to the browser's own bold at the body face — heavy DM Sans in a
   panel where everything else is the display serif. Set explicitly: the same
   Cormorant the rest of the page's headings use, at a normal weight, which is
   what the reference's captions are. */
.tile_name{
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:500;line-height:1.35;
  color:var(--text);
}

/* ==========================================================================
   GALLERY  — gallery.html
   Every frame the same 4:3 plate. The reference runs a masonry of mixed
   heights, which leaves the three columns ending at three different depths;
   one ratio for every frame is what makes the foot of the grid a straight
   line instead, in every filter state and at every width — which is what was
   asked for. Filtering hides whole frames, so the rows stay full.
   ========================================================================== */
/* A row of tabs, not a row of buttons. The page already has one filled green
   pill in the bar and another at the foot, and those are the things that take
   you somewhere; a third set of pills here competed with them and read as the
   most pressable thing on the page, which is not what a view switch is.

   So: bare text, and the view you are in is marked by colour and a hairline
   under it. The rule is on every tab as transparent, not added on the live one,
   so nothing shifts by a pixel when the selection moves. */
.gallery-filters{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 1.75rem;margin-top:var(--inner-gap-32);
}
.gallery-filter{
  padding:.35rem 0;cursor:pointer;
  font-family:inherit;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  /* The row was --text-muted throughout, which left it so faint it read as a
     caption. Full earth held back by opacity instead: the set is legible, and
     the live one still separates from it cleanly. */
  /* Measured: .55 rendered 2.64:1 against the ivory. WCAG AA wants 4.5:1 and
     at 12px it was simply hard to read. .78 measures about 5.6:1 and still
     sits back from the live tab. Weight 400 rather than the body's 300 for the
     same reason — it is set uniformly on every tab, so nothing jogs. */
  color:var(--earth);opacity:.78;font-weight:400;
  background:none;
  border:0;
  /* 2px, and carried by every tab as transparent so the selection moving
     cannot shift the row by a pixel. */
  border-bottom:2px solid transparent;
  border-radius:0;
  transition:color var(--dur) var(--ease),opacity var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.gallery-filter:hover{opacity:1}
.gallery-filter:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* Colour is what marks the live view — green text over a green rule, at full
   strength against the row's 55%. The weight is deliberately left alone:
   bolding it would change the tab's width and jog the whole row on every
   click. */
/* --green itself measured 4.37:1 here, just under the bar; --green-dark is the
   same hue at 6.17:1. Weight still left alone, for the reason above. */
.gallery-filter[aria-selected="true"]{
  color:var(--green-dark);opacity:1;border-bottom-color:var(--green-dark);
}

.gallery-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--inner-gap-24);margin-top:var(--inner-gap-32);
}
.gallery-item{
  margin:0;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius-card,.75rem);
  background-color:rgba(36,51,31,.06);
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-image,1.2s) var(--ease);
}
/* house rule: no hover effect on items that are not clickable (gallery photos open nothing) */

/* ==========================================================================
   EMPTY STATE — used where the Information Sheet carries no content yet
   ========================================================================== */
.empty-note{
  padding:var(--inner-gap-32);text-align:center;
  background-color:var(--bg);
  border:1px dashed var(--nav--border);
  border-radius:var(--radius-card,.75rem);
}

@media screen and (max-width:991px){
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:767px){
  .gallery-grid{grid-template-columns:1fr;gap:1rem}
  .gallery-filters{gap:.5rem 1.25rem}
}

/* --------------------------------------------------------------------------
   Offer inner page
   Picture, then the offer in prose, then its terms as a ruled list — label on
   the left and value on the right, as the reference sets them out.
   -------------------------------------------------------------------------- */
/* Wider and shorter than it was, and held against what is left of the screen
   so the whole offer — heading, prose, picture, button — lands inside one
   viewport rather than asking to be scrolled through. 26rem is the rest of the
   page: the offer nav, breadcrumb, heading, three lines of prose, the button
   and the gaps between them. */
/* Taller, and the same height on every screen.

   Two things were flattening this. The ratio was 16/6, which is already a
   letterbox; and on top of it a max-height of the fold less 26rem, which on a
   900-tall laptop resolved to 243px against a 1024 width — an actual 4.2:1
   crop, not the 2.67 the ratio asked for. The picture only reached its
   intended shape on a screen 1080 or taller.

   The cap was there to keep picture, copy and button inside one fold. That is
   what cost the height, so it is gone: 16/9 now, and the figure is the same
   crop at every viewport height instead of a different one per laptop. */
.offer-figure{
  margin:0 auto;width:100%;max-width:64rem;
  aspect-ratio:16/9;
  overflow:hidden;
}
.offer-figure img{width:100%;height:100%;object-fit:cover;display:block}
.offer-figure + .room-book{margin-top:var(--inner-gap-32)}

/* --------------------------------------------------------------------------
   Duo slider — two pictures at a time
   The room slider stacks its slides in one grid cell and cross-fades. This one
   is a track that travels, because two are on screen at once and the eye needs
   to see the pair move. Progress rule and counter below, as the reference has.
   -------------------------------------------------------------------------- */
.slider.is-duo{height:auto;display:block}
.slider.is-duo .slider_frame{overflow:hidden;background:none;flex:none}
.slider.is-duo .slider_track{
  display:flex;gap:var(--inner-gap-24);
  transition:transform .5s var(--ease);will-change:transform;
}
.slider.is-duo .slider_slide{
  /* two to a view, so each takes half the frame less half the gap */
  flex:0 0 calc((100% - var(--inner-gap-24)) / 2);
  margin:0;opacity:1;visibility:visible;transition:none;
  aspect-ratio:4/3;overflow:hidden;
}
.slider.is-duo .slider_slide img{width:100%;height:100%;object-fit:cover;display:block}

/* Three to a view rather than two. The slide carries a whole tile here, not a
   bare photograph, so the fixed 4:3 comes off and the tile sets its own height. */
.slider.is-trio .slider_slide{
  flex:0 0 calc((100% - 2 * var(--inner-gap-24)) / 3);
  aspect-ratio:auto;
}
.slider.is-trio .slider_slide .tile{height:100%}

/* A section whose heading and standfirst are centred over what follows, the
   way the page head is. The copy is held to the reading measure and centred in
   the column rather than left ragged under a centred heading. */
.section-inner.is-centred > .section-heading{text-align:center}
.section-inner.is-centred > p{
  max-width:46rem;margin-inline:auto;text-align:center;
}

.slider_rail{
  display:flex;align-items:center;gap:var(--inner-gap-32);
  margin-top:var(--inner-gap-24);
}
.slider_progress{
  position:relative;flex:1;height:2px;background-color:var(--nav--border);
}
.slider_progress i{
  position:absolute;left:0;top:0;bottom:0;display:block;
  background-color:var(--green);transition:width .5s var(--ease);
}
.slider_nav{display:flex;align-items:center;gap:1.25rem;flex:none}
.slider_step{
  display:flex;align-items:center;justify-content:center;
  width:2rem;height:1.5rem;padding:0;border:0;background:none;
  color:var(--earth);cursor:pointer;
  transition:color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.slider_step svg{width:1.5rem;height:.875rem}
.slider_step:hover{color:var(--green)}
.slider_step[disabled]{opacity:.3;cursor:default}
.slider.is-duo .slider_count{
  position:static;padding:0;background:none;color:var(--earth);
  font-size:.8125rem;letter-spacing:.08em;
}

/* Without script the track is a plain row of everything, so no photograph is
   unreachable; the furniture is hidden because nothing drives it. */
.no-js .slider.is-duo .slider_track{transform:none;flex-wrap:wrap}
.no-js .slider.is-duo .slider_rail{display:none}

@media screen and (max-width:767px){
  /* one at a time on a phone — two would be stamps */
  .slider.is-duo .slider_slide{flex:0 0 100%}
  .slider_rail{gap:var(--inner-gap-24)}
}


/* ==========================================================================
   LOCATION  — location.html
   Map plate, the link above it, and the "getting here" cards. The attraction
   grid reuses .tile from the facilities page: the Information Sheet gives
   attraction names and nothing else, so a caption is all there is to show.
   ========================================================================== */
/* Centred, and set as a link rather than a button — it leaves the site, and
   the page already has the booking pill for the thing you press. */
.map-link{
  display:block;margin-top:var(--inner-gap-24);text-align:center;
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--earth);
  text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px;
  transition:color var(--dur) var(--ease);
}
.map-link:hover{color:var(--green)}

.map-frame{
  margin-top:var(--inner-gap-32);
  aspect-ratio:16/6;
  border:1px solid var(--nav--border);
  border-radius:var(--radius-card,.75rem);
  overflow:hidden;
  background-color:var(--sage,#D8E0CE);
}
.map-frame iframe{width:100%;height:100%;border:0;display:block}

/* Air, rail and road. One row of three, the same card as everywhere else. */
.getting{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--inner-gap-24);margin-top:var(--inner-gap-32);
}
.getting_card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;min-height:9rem;padding:1.75rem 1.25rem;text-align:center;
  background-color:var(--bg);
  border:1px solid var(--nav--border);
  border-radius:var(--radius-card,.75rem);
}
.getting_card svg{width:1.75rem;height:1.75rem;color:var(--green)}
.getting_name{font-family:var(--font-display);font-size:1.125rem;font-weight:500;line-height:1.35;color:var(--text)}
.getting_dist{font-size:.8125rem;color:var(--text-muted)}

/* the section heading, centred like the reference's */
.section-heading{text-align:center}
.section-heading + .page-lede,
.section-heading + p{max-width:46rem;margin:1rem auto 0;text-align:center}

@media screen and (max-width:991px){
  .map-frame{aspect-ratio:16/9}
}
@media screen and (max-width:767px){
  .getting{grid-template-columns:1fr;gap:1rem}
  .map-frame{aspect-ratio:4/3}
}

/* --------------------------------------------------------------------------
   The bar's current page
   Same treatment as the room/offer sub-nav below it: the green, and a rule
   under the word. The bar already draws that rule on hover via ::after and
   animates its width, so the active state just holds it open rather than
   introducing a second underline that would sit at a different height.
   Scoped to pages.css, so the frozen homepage is untouched.
   -------------------------------------------------------------------------- */
.nav_menu_link[aria-current]{color:var(--green)}
.nav_menu_link[aria-current]::after{width:100%;background-color:var(--green)}
/* the bar goes ivory over a banner; there is no banner on an inner page, but
   guard it anyway so the active item never turns green on a photograph */
.nav_component.is-over-banner .nav_menu_link[aria-current]{color:var(--ivory)}
.nav_component.is-over-banner .nav_menu_link[aria-current]::after{background-color:var(--ivory)}
/* and again on the scrolled bar, which is green glass — a green marker on a
   green ground is no marker at all */
.nav_component.is-scrolled .nav_menu_link[aria-current]{color:var(--ivory)}
.nav_component.is-scrolled .nav_menu_link[aria-current]::after{background-color:var(--ivory)}

/* In the dropdown the items are a vertical list, so a rule under each would
   read as a divider. Colour alone marks the current one. */
/* The page you are on keeps the underline permanently. Same text-decoration as
   the hover state, so the rule is the width of the word rather than the width
   of the link. */
.nav_more-link[aria-current]{
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:.35em;
  text-decoration-thickness:1px;
}


/* ==========================================================================
   ROUND 6 (client, 2026-10-30) - mobile reading and scroll length
   ========================================================================== */
/* The drawer is ivory whatever the bar is doing. The bar's over-banner and
   scrolled states turn the current item ivory for a photograph or the green
   glass, and that colour followed the item into the drawer: ivory on ivory,
   so About Us, Rooms, and Offers vanished from their own menus. */
@media screen and (max-width:991px){
  .nav_component .nav_menu-content .nav_menu_link[aria-current]{color:var(--green)}
  .nav_component .nav_menu-content .nav_menu_link[aria-current]::after{background-color:var(--green)}
}
@media screen and (max-width:767px){
  /* Reading blocks start at the gutter on a phone. Centred lines of six or
     seven words leave every line starting somewhere new; a left edge is what
     the eye returns to. Short labels inside cards stay centred. */
  .page-head,.room-hero .page-head{text-align:left}
  .page-head .page-lede,.room-hero .page-head .page-lede{margin-inline:0;max-width:none}
  .section-heading,.section-inner.is-centred > .section-heading{text-align:left}
  .section-heading + .page-lede,.section-heading + p{margin-inline:0;text-align:left}
  .page-inner .text-align-center{text-align:left}
  /* the room's facts as a two-column list under the copy, then the button */
  .room-hero .room-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem}
  .room-hero .room-book{text-align:left}
  .room-hero .room-book .button{margin-inline:0}
  /* the sibling-room strip and the breadcrumb were 16px apart; more air */
  .roomnav + .padding-global .breadcrumb{padding-top:1.25rem}
  /* Amenities: nineteen 116px cards ran to about 1,300px. As icon-and-label
     rows two across, the list is about half that and still scans as a table. */
  .amenities{gap:.5rem}
  .amenity{
    display:grid;grid-template-columns:1.25rem minmax(0,1fr);column-gap:.625rem;row-gap:0;
    align-items:center;justify-items:start;text-align:left;
    min-height:3.25rem;padding:.625rem .75rem;
  }
  .amenity svg{width:1.25rem;height:1.25rem;grid-column:1;grid-row:1 / span 2}
  .amenity_name{font-size:.8125rem;line-height:1.3}
  .amenity_note{grid-column:2;font-size:.6875rem}
  /* a label with no note under it takes both rows, so it centres on the mark */
  .amenity_name:last-child{grid-column:2;grid-row:1 / span 2}
  /* Facility tiles two across and 16px apart rather than one across and 50px
     apart: sixteen tiles were about 5,000px of scrolling. */
  .card-grid:has(> .tile){grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .75rem}
  .card-grid:has(> .tile) .tile_body{padding:.75rem .5rem}
  .card-grid:has(> .tile) .tile_name{font-size:1.0625rem;line-height:1.25}
}


/* Round 7 (client, 2026-10-30): the fort photograph is a tall frame that is
   mostly sky; anchor it to the building so every crop shows the gateway. */
img[src$="fort.webp"]{object-position:50% 92%}


/* Round 7 (client, 2026-10-30): FAQ groups. A group title is a small caps
   label over its own ruled list, so the page reads as five short lists. */
.faq_group{
  max-width:56rem;margin:3rem auto 1rem;
  font-family:var(--font-body,inherit);font-size:.8125rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--earth);
}
.faq_group:first-child{margin-top:0}


/* Round 7b (client, 2026-10-30): the contact form cleared its heading by 0px. */
.section-inner > .text-align-center + .cform,
.section-inner > .text-align-center ~ .cform{margin-top:var(--inner-gap-32)}


/* Round 7c (client, 2026-10-30): one link style for links inside running
   text, the one the breadcrumb already uses - earth, a fine underline, green
   on hover. The contact card had no underline, the terms page was green with
   no hover change, and the sitemap list did not respond to hover at all.
   The sitemap is a list of nothing but links, so it keeps a plain rest state
   and takes the same hover. */
.contact-card a,.terms_block a,.faq_a a,.page-lede a{
  color:var(--earth);border-bottom:0;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
  transition:color var(--dur) var(--ease);
}
.contact-card a:hover,.terms_block a:hover,.faq_a a:hover,.page-lede a:hover,
.sitemap_list a:hover{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.sitemap_list a{transition:color var(--dur) var(--ease)}


/* ==========================================================================
   ROUND 16 (2026-11-03) - ported blog posts: headings and lists in the body
   ========================================================================== */
.post_body h2{margin:2.5rem 0 .75rem}
.post_body h3{margin:1.75rem 0 .5rem;color:var(--ochre)}
.post_body h2:first-child{margin-top:0}
.post_body .terms_list{margin:1rem 0}
.post_body strong{font-weight:500}

/* ROUND 18 (2026-11-03) - privacy policy: space between lists, paragraphs, and sub-headings in a terms block */
.terms_block p + .terms_list,.terms_block .terms_list + p{margin-top:.75rem}
.terms_block h3{margin:1.5rem 0 .5rem}

/* 404 (2026-11-03) - the one inner page with no breadcrumb, so its heading
   takes the breadcrumb's place below the bar (24 + 20 line + 16), and the
   button sits paragraph → button 24 below the standfirst. */
.page-head.is-404{margin-top:3.75rem}
.page-head_cta{margin-top:1.5rem}
@media screen and (max-width:767px){
  .page-head.is-404{margin-top:3rem}                   /* 16 + 20 line + 12 */
  .page-head_cta{margin-top:1.25rem}                   /* paragraph → button 20 */
}