/* ==========================================================================
   THE TYPE SCALE
   Twenty-five distinct sizes were in use across the site and paragraphs alone
   used eight of them — 12, 13, 15, 16, 17, 18, 21 and 38. That is not a scale,
   it is accumulated one-offs, and it is why the sizing read as arbitrary.

   Seven steps. Anything outside them is a mistake:

     12px  micro      uppercase labels only, never running text
     13px  label      eyebrows, keys, table headers — uppercase and tracked
     15px  small      captions, hints, tags, table cells
     16px  body       the default for running text
     18px  body large ledes inside components
     22px  sub-head
     28px  heading    small headings

   Anything larger is fluid: clamp() against the viewport, so it scales rather
   than stepping. Those are left alone.
   ========================================================================== */
:root{
  --t-micro: 12px; --t-label: 13px; --t-small: 15px;
  --t-body: 16px;  --t-large: 18px; --t-sub: 22px; --t-head: 28px;
}

/* ==========================================================================
   THE MEASURE SYSTEM
   The stylesheet carried 101 prose measures across 23 different values —
   20ch, 26rem, 34ch, 38rem, 44ch, 46rem, 52ch, 62ch and fifteen others — each
   chosen for one component in isolation. That is why the pages do not line up
   with each other: nothing shares a width with anything else, so every panel
   starts and stops somewhere different.

   A page needs three, and it already had a --measure token nobody used.

     --m-tight  a caption, a note, a label block
     --m-read   body prose, the default
     --m-wide   a lede, a pull quote, anything set larger

   Changing one of these now changes the whole site, which is the point.
   ========================================================================== */
:root{
  --m-tight: 26rem;   /* ~50 characters at 18px */
  --m-read:  34rem;   /* ~66 characters — the reading default */
  --m-wide:  46rem;   /* ~72 characters at lede size */
}


/* ==========================================================================
   THE TYPE SCALE
   Eighty-eight separate clamp() declarations had accumulated, almost all with
   different values, producing twenty-seven distinct sizes on the page. Each
   was a sensible local decision; together they were not a scale.

   Nine steps, each a fixed ratio apart, each fluid between a phone and a
   desktop. Every component now takes one of these rather than inventing a
   size. Adding a tenth should feel like a decision, not a default.
   ========================================================================== */
:root{
  --t-xs:  12px;                              /* legal, source lines        */
  --t-sm:  13px;                              /* eyebrows, keys, hints      */
  --t-ui:  15px;                              /* interface, labels, buttons */
  --t-base: clamp(16px, 0.5vw + 15px, 18px);  /* body copy                  */
  --t-lede: clamp(19px, 1.1vw + 16px, 23px);  /* opening paragraphs         */
  --t-h3:  clamp(21px, 1.4vw + 17px, 27px);   /* card and panel headings    */
  --t-h2:  clamp(28px, 3.2vw + 16px, 42px);   /* section headings           */
  --t-h1:  clamp(36px, 4.5vw + 18px, 60px);   /* page headings              */
  --t-hero: clamp(42px, 7vw + 14px, 88px);    /* hero titles only           */
  --t-fig: clamp(30px, 3vw + 18px, 46px);     /* figures and numerals       */
}


/* ==========================================================================
   CHÂTEAU DE GUDANES — PUBLIC SITE
   Rewritten from scratch on a single spacing scale and a defined palette.
   No appended overrides: every selector is defined exactly once.
   Scoped under .g so the staff app is untouched.
   ========================================================================== */

.g{
  /* ---- Palette -------------------------------------------------------
     Blue is the house colour: headings, brand, navigation, rules and the
     dark panels. It sits on a warm parchment ground — the warmth is the
     building, the blue is the discipline. Brass is used only for small
     marks: eyebrows, figures, the rule under a heading.                */
  --blue-deep:  #14305F;   /* bleu de Sèvres — royal, not slate. 65% sat */
  --blue:       #14213D;   /* solid Book/Filters buttons                   */
  --blue-mid:   #14213D;   /* room names, accent headings                 */
  --blue-pale:  #F5F5F3;   /* pale panel ground                           */
  --blue-line:  #DEDBD4;   /* hairlines                                    */

  --sand:       #F6F1E7;   /* page ground — warm off-white, paper not screen */
  --sand-2:     #EDE5D6;   /* alternate section — a shade deeper           */
  --sand-3:     #E2D5C2;   /* third step                                 */
  --stone:      #66634F;   /* was #66634F — 3.17:1, failed AA */   /* warm stone — the second colour, from the walls */
  --stone-pale: #E8DFCC;   /* stone at a whisper, for panels                */
  --line:       #D6CBB6;
  --ink-2:           #4A5A6B;   /* secondary text, softer than --ink        */
  --steel:           #4F5F72;   /* was #4F5F72 — 4.12:1, under AA */   /* muted UI text and metadata               */
  --surface:         #FBF7EF;   /* same parchment as --white, aliased       */
  --parchment-line:  #D6CBB6;   /* same hairline as --line, aliased         */
  --success:         #5F7A55;   /* a validated field, muted enough for here */
  --status-warn-bg:  #F6EDD8;   /* a caution panel, warm not yellow         */
   /* hairlines — warm, to match the ground        */
  --white:      #FBF7EF;

  --ink:        #14305F;   /* body text — the same navy, one colour       */
  --ink-soft:   #4A6076;
  --ink-faint:  #4F5F72;   /* tuned against the darkest ground, not parchment */   /* was #4F5F72 — failed AA at 3.05:1 */
  --brass:      #8A8578;   /* whisper only — never a rule or fill */

  /* ---- Spacing scale — every margin and padding comes from here ---- */
  --s1: 4px;   --s2: 8px;    --s3: 12px;   --s4: 16px;
  --s5: 24px;  --s6: 32px;   --s7: 48px;   --s8: 64px;
  --s9: 96px;  --s10: 128px;

  /* ---- Measures ---------------------------------------------------- */
  --wrap: 76rem;
  --wrap-narrow: 54rem;
  --measure: 42rem;   /* ~74 characters at 18px Garamond — top of the comfortable range */

  /* ---- Type -------------------------------------------------------- */
  --serif: 'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ui:    'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  background: var(--sand);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.g *, .g *::before, .g *::after{ box-sizing: border-box; }
.g img{ max-width: 100%; display: block; }
.g a{ color: var(--blue-mid); }

/* ---- Layout ------------------------------------------------------------ */

.g-wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }
.g-wrap--narrow{ max-width: var(--wrap-narrow); }

.g-sec{ padding: clamp(36px, 4vw, 60px) 0; }
.g-sec--sand{ background: var(--sand-2); }
.g-sec--tight{ padding: var(--s6) 0; }
.g-sec--flush{ padding: 0; }

/* ---- Type -------------------------------------------------------------- */

.g-display{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-hero); line-height: 1.06; letter-spacing: .012em;
  color: var(--blue-deep); margin: 0 0 var(--s5); letter-spacing: .012em;
}
.g-display em{ font-style: normal; font-weight: 300; }

.g-h2{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.15;
  color: var(--blue-deep); margin: 0 0 var(--s4);
}
.g-h2 em{ font-style: normal; font-weight: 300; }

.g-h3{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.3;
  color: var(--blue-deep); margin: 0 0 var(--s3);
}

/* Section heading with a hairline beneath — the site's recurring device. */
.g-place{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.2;
  color: var(--blue-deep);
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.g-eyebrow{
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-deep); margin: 0 0 var(--s4); opacity: .7;
}

.g-p{ font-size: 18px; font-weight: 400; line-height: 1.6; max-width: var(--m-wide); margin: 0 0 var(--s4); color: var(--blue-deep); }
.g-p:last-child{ margin-bottom: 0; }
.g-p em{ font-style: normal; font-weight: 500; color: var(--blue-deep); }
.g-lede{ font-size: var(--t-lede); font-weight: 400; line-height: 1.55; max-width: var(--m-read); margin: 0 0 var(--s5); }
.g-fig{ font-family: var(--display); font-weight: 600; color: var(--blue-deep); }
.g-hint{ font-size: 15px; color: var(--ink-faint); margin: var(--s2) 0 0; }
.g-hint.is-warn{ color: #B3261E; }
.g-opt{ text-transform: none; letter-spacing: 0; color: var(--ink-faint); }

.g-rule{
  display: flex; align-items: baseline; gap: var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line);
  margin: 0 0 var(--s7);
}
/* ---- Header ------------------------------------------------------------ */

.g-top{
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: var(--sand); border-bottom: 1px solid var(--line);
}
body.has-hero .g-top{
  background: transparent; border-bottom-color: transparent;
  transition: background .3s ease, border-color .3s ease;
}
body.has-hero .g-top.is-solid{
  background: var(--sand); border-bottom-color: var(--line);
}
main{ padding-top: 84px; }
body.has-hero main{ padding-top: 0; }
.g-top__in{
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s4) var(--s5);
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
}
.g-nav{ display: flex; gap: var(--s6); align-items: center; }
.g-nav a{
  font-family: var(--serif); font-size: 16px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.g-nav a:hover, .g-nav a.is-on{ border-bottom-color: var(--ink); }

/* Over the hero photograph, before the header solidifies: white text. */
body.has-hero .g-top:not(.is-solid) .g-brand,
body.has-hero .g-top:not(.is-solid) .g-brand small,
body.has-hero .g-top:not(.is-solid) .g-nav a{ color: #fff; }
body.has-hero .g-top:not(.is-solid) .g-nav a:hover,
body.has-hero .g-top:not(.is-solid) .g-nav a.is-on{ border-bottom-color: #fff; }



/* ---- Buttons ----------------------------------------------------------- */

/* Ritz Paris pattern: navy solid for the ONE primary action per context
   (Book, Réserver, submit). Everything else is an outline in plain ink. */
.g .g-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--s3) var(--s6);
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.g .g-btn:hover{ background: var(--ink); color: var(--sand); }
.g .g-btn--solid{ background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.g .g-btn--solid:hover{ background: #0F1830; border-color: var(--blue-deep); }
.g .g-btn--off{ background: transparent; color: var(--ink-faint); border-color: var(--line); cursor: default; }
.g .g-btn--off:hover{ background: transparent; color: var(--ink-faint); }

.g .g-reserve{
  min-height: 44px; padding: var(--s3) var(--s5); flex: none;
  background: var(--blue-deep); color: #fff; border: 1px solid var(--blue-deep);
  font-family: var(--serif); font-size: 15px; font-weight: 600;
}
.g .g-reserve:hover{ background: #0F1830; border-color: var(--blue-deep); }

.g .g-hero__in .g-btn{ color: var(--ink); background: var(--sand); border-color: var(--sand); }
.g .g-hero__in .g-btn:hover{ opacity: .85; background: var(--sand); }
.g .g-submit{ width: 100%; background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.g .g-submit:hover{ background: #0F1830; border-color: var(--blue-deep); }
/* ---- Hero -------------------------------------------------------------- */

.g-hero{ position: relative; background: var(--blue-deep); }
/* The photograph fills the hero, as the video does on the homepage. In flow with
   its own clamp() height inside a min-height hero, any difference showed as bare
   navy above and below the picture — 32px on Stay at phone width, 180px on Events. */
.g .g-hero__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-hero__wash{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,41,63,.10) 0%, rgba(20,41,63,.04) 40%, rgba(20,41,63,.62) 100%);
}
.g-hero__in{
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s8) var(--s5);
}
.g-hero__in .g-display{ color: var(--white); max-width: var(--m-tight); margin-bottom: var(--s4); }
.g-hero__in p{ color: #EAE4DC; max-width: var(--m-read); font-size: 18px; margin: 0 0 var(--s5); }
.g-hero__cta{ display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ---- Full-bleed photography -------------------------------------------- */

.g-band{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.g .g-band img{ width: 100%; height: clamp(11rem, 22vw, 20rem); object-fit: cover; }

.g-half{ display: grid; align-items: center; }
.g .g-half__img{ width: 100%; height: clamp(15rem, 34vw, 24rem); object-fit: cover; }
.g-half__text{ padding: var(--s6) var(--s6); max-width: var(--m-read); margin: 0 auto; width: 100%; }

/* ---- Facts ------------------------------------------------------------- */

.g-facts{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.g-facts li{ background: var(--sand); padding: var(--s6) var(--s5); }
.g-facts b{
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: var(--t-h2); color: var(--blue-deep); margin-bottom: var(--s2);
}
.g-facts span{ font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* ---- Panels ------------------------------------------------------------ */

.g-panel{ background: var(--sand-2); padding: var(--s7); }
.g-panel--dark{ background: var(--blue-deep); color: #C9D4DF; }
.g-panel--dark .g-h2, .g-panel--dark .g-display{ color: var(--white); }
.g-panel--dark .g-eyebrow{ color: #D9C79B; }
.g-panel--dark .g-p{ color: #C9D4DF; }
.g-panel--dark .g-btn{ color: var(--white); border-color: rgba(255,255,255,.6); }
.g-panel--dark .g-btn:hover{ background: var(--white); color: var(--blue-deep); }

/* ---- Two-column prose -------------------------------------------------- */

.g-two{
  display: grid; gap: var(--s8); align-items: center;
  /* Used directly inside <section> as a page container, so it needs the
     same measure and gutters as .g-wrap or the text touches the edge. */
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5);
}
/* A raw <img> has no intrinsic size before it loads. .g-band already gets
   one further down this file (grid-auto-flow + .g .g-band img), which is
   why only the workshops intro photo, not the five-photo strip, actually
   went blank. This is the one genuinely missing rule: without it the grid
   track collapses to 0x0, the lazy-load intersection check sees zero area
   to intersect, and the photo never loads at all — not just until
   scrolled into view. */
.g-two img{ width: 100%; height: clamp(16rem, 34vw, 26rem); object-fit: cover; }
.g-split{ display: grid; gap: var(--s7); }
.g-split > *{ min-width: 0; }
.g-split ul{ margin: 0; padding-left: var(--s5); display: grid; gap: var(--s3); font-size: 16px; }
/* ---- Timeline / definition rows --------------------------------------- */

.g-time{ list-style: none; margin: 0; padding: 0; }
.g-time li{
  display: grid; gap: var(--s2) var(--s6);
  padding: var(--s5) 0; border-top: 1px solid var(--line);
}
.g-time b{ font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--blue-deep); }
.g-time span{ font-size: 16px; line-height: 1.62; color: var(--ink-soft); }

/* ---- Cards ------------------------------------------------------------- */

.g-grid{ display: grid; gap: var(--s6); }
.g-card{ background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.g .g-card img{ width: 100%; height: 15rem; object-fit: cover; }
.g-card__b{ padding: var(--s6); flex: 1; display: flex; flex-direction: column; gap: var(--s3); }
.g-card__b .g-btn{ margin-top: auto; align-self: flex-start; }

.g-room__rate .g-fig{ font-size: var(--t-lede); display: block; line-height: 1.1; }
.g-room__meta{ font-family: var(--serif); font-size: 13px; color: var(--ink-faint); margin: 0 0 var(--s4); }
/* ---- Tags & strips ----------------------------------------------------- */

.g-tags{ display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.g-tags li{
  font-size: 15px; color: var(--ink); background: transparent;
  border: none; border-radius: 0; padding: 0; margin-right: var(--s5);
  display: inline-flex; align-items: center; gap: 6px;
}
.g-tags{ gap: var(--s4); }
.g-tags--lg li{ font-size: var(--t-small); padding: var(--s2) var(--s4); }
.g-strip{ display: flex; gap: var(--s2); overflow-x: auto; margin: 0 0 var(--s4); scroll-snap-type: x proximity; }
.g .g-strip img{ width: 150px; height: 106px; object-fit: cover; flex: 0 0 auto; scroll-snap-align: start; }

/* ---- Reservation bar --------------------------------------------------- */

.g-book-bar{
  background: var(--blue-pale);
  border-top: 1px solid var(--blue-line); border-bottom: 1px solid var(--blue-line);
  padding: var(--s6) 0;
}
.g-search{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.g-search__f{ display: flex; flex-direction: column; min-width: 0; }
.g-search label{
  font-family: var(--serif); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s2);
}
.g-search input{
  font-family: var(--serif); font-size: 16px; min-height: 48px; width: 100%;
  padding: var(--s3); color: var(--blue-deep); background: var(--white);
  border: 1px solid var(--blue-line); border-radius: 0;
}
.g-search__go{ grid-column: 1 / -1; }
.g-book-bar__note{ margin: var(--s4) 0 0; font-size: 15px; color: var(--ink-soft); }
.g-book-bar__note a{ color: var(--blue-mid); }
.g-table-cta{ display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }

/* ---- Forms ------------------------------------------------------------- */

.g-cols{ display: grid; gap: var(--s7); }
.g-step{ padding-bottom: var(--s7); }
.g-step + .g-step{ border-top: 1px solid var(--line); padding-top: var(--s7); }
.g-step__h{
  font-family: var(--display); font-weight: 500; font-size: var(--t-lede);
  color: var(--blue-deep); margin: 0 0 var(--s5);
  display: flex; align-items: baseline; gap: var(--s3);
}
.g-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--stone); border-radius: 50%;
  font-family: var(--display); font-weight: 400; font-size: 18px;
  letter-spacing: 0; color: var(--stone); background: transparent;
  margin-right: var(--s4); vertical-align: middle;
}

.g-row{ display: grid; gap: var(--s4); }
.g-field{ display: flex; flex-direction: column; margin: 0 0 var(--s5); }
.g-field--narrow{ max-width: 14rem; }
.g-field label{
  font-family: var(--serif); font-size: 15px; font-weight: 500;
  letter-spacing: .01em; text-transform: none;
  color: var(--ink-soft); margin-bottom: var(--s2);
}
.g-field input, .g-field textarea, .g-field select{
  font-family: var(--serif); font-size: 16px; font-weight: 300; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 0;
  padding: var(--s3) var(--s4); min-height: 52px; width: 100%;
  transition: border-color .18s ease;
}
.g-field input:focus, .g-field textarea:focus, .g-field select:focus{
  outline: none; border-color: var(--blue-deep);
}
/* A native date input does not match :focus-visible on its host while a segment
   holds focus, so it never got the 2px ring every other field has; the only
   indicator was a 1px border turning navy. Give it the ring on plain :focus. */
.g .g-field input[type="date"]:focus{ outline: 2px solid var(--gilt); outline-offset: 3px; }
.g-field textarea{ min-height: 8rem; resize: vertical; line-height: 1.55; }

.g-promo{ display: flex; gap: var(--s2); }
.g-promo input{ text-transform: uppercase; }
.g-promo button{
  flex-shrink: 0; min-height: 52px; padding: 0 var(--s5);
  font-family: var(--serif); font-size: 15px; font-weight: 500; letter-spacing: 0;
  color: var(--blue-deep); background: transparent;
  border: 1px solid var(--blue-deep); cursor: pointer;
}
.g-promo button:hover{ background: var(--blue-deep); color: #fff; }

.g-extras{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.g-check{
  display: flex; align-items: flex-start; gap: var(--s3); min-height: 48px;
  padding: var(--s3) var(--s4); background: var(--white);
  border: 1px solid var(--line); font-size: 16px; cursor: pointer;
}
.g-check input{ width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue-deep); flex: none; }
.g-check__t{ flex: 1; }
.g-check__t b{ display: block; font-weight: 400; color: var(--blue-deep); }
.g-check__t span{ font-size: 13px; color: var(--ink-faint); }

/* ---- Reservation summary ---------------------------------------------- */

.g-dossier{ background: var(--blue-deep); color: #C9D4DF; padding: var(--s6); }
.g-dossier__k{
  font-family: var(--serif); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: #D9C79B; margin: 0 0 var(--s1);
}
.g-dossier__room{ font-family: var(--display); font-size: var(--t-lede); line-height: 1.2; color: var(--white); margin: 0 0 var(--s5); }
.g-dossier__l{ margin: 0 0 var(--s5); padding: 0; }
.g-dossier__l div{
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) 0; border-top: 1px solid rgba(255,255,255,.16);
}
.g-dossier__l dt{ font-family: var(--serif); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #4F5F72; }
.g-dossier__l dd{ margin: 0; font-family: var(--serif); font-size: 13px; color: var(--white); }
.g-terms{ display: flex; gap: var(--s3); align-items: flex-start; font-size: 15px; margin-bottom: var(--s5); cursor: pointer; }
.g-terms input{ width: 18px; height: 18px; margin-top: 3px; accent-color: #D9C79B; flex: none; }
.g-terms a{ color: #D9C79B; }
.g-dossier .g-submit{ background: #D9C79B; color: var(--blue-deep); border-color: #D9C79B; }
.g-dossier .g-submit:hover{ background: var(--white); color: var(--blue-deep); border-color: var(--white); }
.g-foot-note{ font-size: 15px; line-height: 1.55; color: #4F5F72; margin: var(--s4) 0 0; }

/* ---- Footer ------------------------------------------------------------ */

.g-footer{ background: var(--blue-deep); color: #A9B7C4; padding: var(--s7) 0 var(--s6); margin-top: 0; }
.g-footer a{ color: #CBD6E0; text-decoration: none; }
.g-footer a:hover{ color: var(--white); }
.g-footer__grid{ display: grid; gap: var(--s6); }
.g-footer h2, .g-footer h4{
  font-family: var(--serif); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: #D9C79B; margin: 0 0 var(--s4); font-weight: 400;
}
.g-footer ul{ list-style: none; margin: 0; padding: 0; }
.g-footer ul li a{ display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.g-footer__brand{ font-family: var(--display); font-size: var(--t-lede); color: var(--white); margin: 0 0 var(--s4); }
.g-footer__contact{ font-size: 15px; line-height: 1.5; margin: 0; }
.g-footer__contact a{ display: inline-flex; align-items: center; min-height: 44px; }
.g-footer__fine{
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.16); font-size: 13px; color: #9DAEBD;
}

/* Standalone inline links (manage a booking, manage a registration). */
.g-inline-link{ display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
/* Links sitting inside running prose keep a 44px target without breaking the
   line. Applied to any anchor in a .g-p, which is where they occur. */
.g .g-p a{ display: inline-block; padding: 11px 0; }

/* ---- Sticky booking bar -------------------------------------------------
   The one thing the old third-party widget got right: booking always one tap
   away, wherever you have scrolled to. A full-width bar rather than a floating
   circle — quieter, and how serious hotel sites do it. Phones only; the header
   handles desktop. */

.g-stickybar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: var(--blue-deep);
  border-top: 1px solid rgba(255,255,255,.16);
}
.g-stickybar__t{ min-width: 0; }
.g-stickybar__t b{
  display: block; font-family: var(--display); font-size: 16px;
  font-weight: 400; color: #fff; line-height: 1.2;
}
.g-stickybar__t span{
  display: block; font-family: var(--display); font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; color: #A9C8DA; margin-top: 2px;
}
.g .g-stickybar__cta{
  flex: none; min-height: 46px; padding: var(--s3) var(--s5);
  background: var(--white); color: var(--blue-deep); border-color: var(--white);
}
.g .g-stickybar__cta:hover{ background: var(--brass); border-color: var(--brass); color: #fff; }

@media (max-width: 60rem){
  .g-stickybar{ display: flex; }
}

/* NOT WHILE THE MENU IS OPEN.
   The bar is fixed to the bottom of the window at z-index 60 and the nav
   drawer is 59, so the bar sat on top of the drawer's own last inch --
   which is where Terms and Privacy live. On a phone they could be scrolled
   to and not tapped: the guest saw the link, put a finger on it, and
   opened the booking bar instead.
   Same for the room page's own bottom bar, which is the same idea at the
   same height. :has() rather than a body class, because the drawer sets
   is-open on itself and nothing else has to learn about it. */
body:has(.g-navwrap.is-open) .g-stickybar,
body:has(.g-navwrap.is-open) .g-bookbar{ display: none; }

@media (max-width: 60rem){
  /* Keep the footer clear of the bar. */
  .g-footer{ padding-bottom: calc(var(--s7) + 72px); }
}

/* ---- Misc -------------------------------------------------------------- */

.g-empty{ padding: var(--s7); text-align: center; background: var(--blue-pale); color: var(--ink-soft); }
.g details.g-cal{ display: none; }   /* staff grid hidden from guests */
.g-cal__nav{ display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.g a:focus-visible, .g input:focus-visible, .g textarea:focus-visible,
.g select:focus-visible, .g button:focus-visible, .g summary:focus-visible{
  outline: 2px solid var(--blue-mid); outline-offset: 2px;
}

/* ==========================================================================
   RESPONSIVE — one place, ascending. No overrides elsewhere.
   ========================================================================== */

@media (min-width: 34rem){
  .g-row{ grid-template-columns: 1fr 1fr; }
  .g-incs{ grid-template-columns: 1fr 1fr; }
  .g-facts{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 44rem){
  .g-split{ grid-template-columns: 1fr 1fr; }
  /* .g-grid--2 and --3 are not fixed here. They reflow on the space they
     actually have, below, so a card is never narrower than its text needs. */
  .g-reviews{ grid-template-columns: repeat(3, 1fr); }
  .g-time li{ grid-template-columns: 9rem 1fr; }
}

@media (min-width: 50rem){
  .g-search{ grid-template-columns: 1fr 1fr 8rem auto; align-items: end; }
  .g-search__go{ grid-column: auto; }
}

@media (min-width: 52rem){
  .g-two{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g-room{ grid-template-columns: 24rem 1fr; align-items: stretch; }
}

@media (min-width: 60rem){
  .g-half{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g-half--flip .g-half__img{ order: 2; }
  .g .g-half__img{ height: 100%; min-height: clamp(16rem, 22vw, 20rem); max-height: 26rem; }
  .g-half__text{ padding: var(--s7) var(--s7); }
}

@media (min-width: 64rem){
  .g-facts{ grid-template-columns: repeat(5, 1fr); }
  .g-cols{ grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .g-aside{ position: sticky; top: 6rem; }
  .g-incs--3{ grid-template-columns: repeat(3, 1fr); }
  .g-footer__grid{ grid-template-columns: 2fr 1fr 1fr; }
}

/* ---- Mobile: collapsed navigation and a tighter rhythm ----------------- */

@media (max-width: 68rem){
  .g-top__in{ row-gap: 0; }
  .g-reserve{ order: 2; }
.g-navtoggle > summary{
    display: flex; align-items: center; gap: var(--s2);
    list-style: none; cursor: pointer; min-height: 44px;
    font-family: var(--display); font-size: 13px;
    letter-spacing: .16em; text-transform: uppercase; color: #D6E4EC;
  }
.g-navtoggle > summary::after{ content: '+'; font-size: 15px; }
.g-nav{ flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s3); }
  .g-nav a{ width: 100%; min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.18); }
  .g-nav a:last-child{ border-bottom: none; }
}

@media (max-width: 34rem){
  .g-sec{ padding: var(--s7) 0; }
  .g-sec--tight{ padding: var(--s6) 0; }
  .g-wrap{ padding: 0 var(--s4); }
  .g-half__text{ padding: var(--s7) var(--s4); }
.g-hero__in{ padding: var(--s6) var(--s4); }
  .g-panel{ padding: var(--s5); }
  .g-footer{ padding: var(--s7) 0 var(--s6); margin-top: var(--s7); }
  .g-band{ grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; }
  .g .g-band img{ height: 9rem; }
.g-room__rate{ text-align: left; }
}

/* NOTE: this covers transition and animation only. An autoplaying video is
   neither, so the hero loop is handled separately in the page itself. If
   another moving element is added that is not a transition or an animation,
   it needs its own handling; this block will not catch it. */
@media (prefers-reduced-motion: reduce){
  .g *{ transition: none !important; animation: none !important; }
}

/* --- Room / workshop cards, as the Stay Now page arranges them ----------- */
.g-cards{ display: grid; gap: var(--s6); }
@media (min-width: 52rem){ .g-cards{ grid-template-columns: 1fr 1fr; } }
.g-card--room{ background: var(--white); border: 1px solid var(--line); }
.g .g-card--room img{ width: 100%; height: 17rem; object-fit: cover; }
.g-card__name{
  font-family: var(--display); font-weight: 400; font-size: var(--t-lede);
  color: var(--blue-mid); margin: 0 0 var(--s2);
}
.g-card__rate{ margin: 0 0 var(--s4); font-size: 16px; }
.g-card__rate b{ font-weight: 600; color: var(--ink); }
.g-card__rate span{ color: var(--ink-faint); }
.g-card__desc{ font-size: 16px; line-height: 1.72; margin: 0 0 var(--s4); }
.g-card__cta{ width: 100%; margin-top: auto; }

/* Pull quote — gold rule at the left, as on the site. */
.g-quote{
  /* Figures, not prose. The display italic made money read as a pull quote
     and it is used on a navy panel, where blue-mid ink is unreadable. */
  margin: var(--s6) 0 0;
  padding: var(--s3) 0 var(--s3) var(--s5);
  border-left: 2px solid var(--gilt);
  font-family: var(--ui);
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
  color: inherit;
  font-variant-numeric: lining-nums tabular-nums;
}

.g-dates .g-btn{ min-height: 44px; padding: var(--s3) var(--s4); font-size: 13px; }
.g .g-book-bar__note a{ display: inline-block; padding: 12px 0; min-height: 44px; }

/* ==========================================================================
   FUNCTIONAL LAYER — logo, dropdown navigation, currency, filters
   ========================================================================== */

/* ---- Logo -------------------------------------------------------------- */
.g-logo{ display: inline-flex; align-items: center; margin-right: auto; min-height: 44px; }
.g .g-logo img{ height: 52px; width: auto; max-width: min(240px, 45vw); object-fit: contain; }
@media (max-width: 60rem){ .g .g-logo img{ height: 40px; max-width: min(180px, 42vw); } }

.g-approx{ font-family: var(--serif); font-size: 13px; color: var(--ink-faint); display: block; margin-top: 2px; }

@media (min-width: 52rem){ .g-galgrid{ grid-template-columns: repeat(3, 1fr); } }
/* ---- Navigation visibility ---------------------------------------------
   A closed <details> hides its contents whatever CSS says, so the nav is a
   plain wrapper toggled by a button below the breakpoint and always open
   above it. */
/* The menu button stays at every width. The panel is the fuller navigation —
   it carries the journal, the currency control and the secondary links —
   so it should never be desktop-only or mobile-only. */
.g-navbtn{ display: inline-flex; }
.g-nav{ display: flex; }
.g-navwrap{ display: block; }

@media (max-width: 68rem){
  .g-nav{ display: none; }
  .g-navbtn{
    display: inline-flex; align-items: center; gap: var(--s2);
    order: 3; min-height: 44px; padding: 0;
    font-family: var(--serif); font-size: 13px;
    letter-spacing: .16em; text-transform: uppercase;
    color: #D6E4EC; background: none; border: 0; cursor: pointer;
  }
  .g-navbtn::after{ content: '+'; font-size: 15px; }
  .g-navbtn[aria-expanded="true"]::after{ content: '–'; }
  .g-navwrap{ display: none; order: 4; width: 100%; }
  .g-navwrap.is-open{ display: block; }
  .g-nav{ flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s3); }
  .g-nav__item{ width: 100%; }
/* Dropdowns become inline lists on a phone — no hover to rely on. */
.g-drop a{ color: #A9C8DA; padding: var(--s3) 0; min-height: 44px; }
.g-drop__note{ display: none; }
}

.g .g-btn--line{ background:transparent; color:var(--ink); border-color:var(--ink); }

@media(min-width:38rem){ .g-list--2{ grid-template-columns:1fr 1fr; } }

.g-form{ max-width:var(--m-read); }

.g-cal>summary{ font-family:var(--serif); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); cursor:pointer; padding:14px 0; min-height:44px; }

.g-half, .g-band, .g-bleed{
  width:auto;
  margin-left:calc(50% - 50vw + (100vw - 100%) * 0);
  margin-right:calc(50% - 50vw);
  max-width:100vw;
}

@supports (width: 100dvw){
  .g-half, .g-band, .g-bleed{ width:100dvw; margin-left:calc(50% - 50dvw); margin-right:calc(50% - 50dvw); }
}

.g-half, .g-band, .g-bleed{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

@media (max-width:60rem){
  .g .g-manage a, .g .g-book-bar__note a{
    display:inline-block; min-height:44px; padding:11px 0;
  }
}

.g-quote__l{ margin:0 0 .5rem; display:grid; gap:.35rem; }

.g-quote__l div{ display:flex; justify-content:space-between; gap:1rem; font-size:15px; }

.g-quote__l dt{ margin:0; }

.g-quote__l dd{ margin:0; white-space:nowrap; }

.g-quote__total{
  display: flex; justify-content: space-between; gap: 1rem;
  margin: var(--s3) 0 0; padding-top: var(--s3);
  /* currentColor at low alpha, so the rule survives on any ground. */
  border-top: 1px solid currentColor;
  font-size: 16px; font-weight: 600;
}

.g-quote__warn{ margin:0; font-size: 15px; font-weight:600; color:#b3271e; }

/* ==========================================================================
   NAVIGATION PANEL — full Ritz Paris reference match: icon+label primary
   group, a photographic feature item, chevron-marked secondary links, then
   a footer tier with newsletter, socials, a link grid and legal links.
   ========================================================================== */
.g-navbtn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  margin-right: var(--s3); flex: none; z-index: 61; position: relative;
  color: var(--ink);
}
.g-navbtn__bars{ display: flex; flex-direction: column; gap: 5px; width: 20px; }
.g-navbtn__bars span{ display: block; height: 1.5px; background: currentColor; }
body.has-hero .g-top:not(.is-solid) .g-navbtn{ color: #fff; }

.g-panel-overlay{
  position: fixed; inset: 0; z-index: 58;
  background: rgba(20,19,15,.45);
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.g-panel-overlay.is-open{ opacity: 1; visibility: visible; }

.g-navwrap{
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 59;
  width: min(24rem, 88vw); background: var(--sand);
  transform: translateX(-100%); visibility: hidden;
  /* Closed, the drawer is off-screen but was still visibility:visible, so every
     control in it kept its place in the tab order — ten Tab presses through an
     invisible form. hidden takes it out; the delay lets the slide finish first. */
  transition: transform .3s ease, visibility 0s linear .3s;
  overflow-y: auto; box-shadow: 20px 0 50px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
}
.g-navwrap.is-open{ transform: translateX(0); visibility: visible; transition-delay: 0s, 0s; }
.g-navwrap__inner{ padding: var(--s8) var(--s6) var(--s6); flex: 0 0 auto; }
.g-navwrap__close{
  position: absolute; top: var(--s5); right: var(--s5);
  width: 44px; height: 44px; background: none; border: 0;
  font-size: var(--t-lede); line-height: 1; color: var(--ink-faint); cursor: pointer;
}
.g-navwrap__group{
  font-family: var(--serif); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: var(--s7) 0 var(--s3); font-weight: 400;
}
.g-navwrap__group:first-child{ margin-top: 0; }
.g-navwrap__item{
  display: flex; align-items: center; gap: var(--s4);
  min-height: 48px; padding: var(--s2) 0;
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  text-decoration: none;
}
.g-navwrap__item svg{ width: 22px; height: 22px; flex: none; color: var(--blue-deep); }
.g-navwrap__item:hover{ color: var(--blue-deep); }

.g-navwrap__item--sm{
  font-size: 15px; min-height: 44px; justify-content: space-between;
  color: var(--ink-soft);
}
.g-navwrap__chev{ width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.g-navwrap__item--sm:hover{ color: var(--blue-deep); }
.g-navwrap__item--sm:hover .g-navwrap__chev{ color: var(--blue-deep); }

.g-navwrap__item--plain{
  font-family: var(--serif); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); min-height: 44px;
}
.g-navwrap__divider{ border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* The one photographic feature — the château's own symmetrical façade. */
.g-navwrap__feature{
  display: block; text-decoration: none; margin-bottom: var(--s5);
  border: 1px solid var(--line);
}
.g-navwrap__feature img{ width: 100%; height: 8.5rem; object-fit: cover; display: block; }
.g-navwrap__feature span{ display: block; padding: var(--s4); }
.g-navwrap__feature b{
  display: block; font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink);
}
.g-navwrap__feature em{
  display: block; font-style: italic; font-size: 13px; color: var(--ink-faint); margin-top: 2px;
}
.g-navwrap__feature:hover b{ color: var(--blue-deep); }

/* ---- Footer tier: newsletter, social row, link grid, address, legal ---- */
.g-navwrap__foot{
  flex: 1 0 auto; padding: var(--s7) var(--s6) var(--s6); background: var(--sand-2);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-faint); line-height: 1.7;
}
.g-navwrap__foot-h{
  font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink);
  margin: 0 0 var(--s4);
}
.g-navwrap__news{
  display: flex; align-items: center; gap: var(--s3);
  border-bottom: 1px solid var(--line); padding-bottom: var(--s3); margin-bottom: var(--s6);
}
.g-navwrap__news input{
  flex: 1; border: 0; background: none; font-family: var(--serif);
  font-size: 15px; color: var(--ink); min-height: 44px; padding: 0;
}
.g-navwrap__news input::placeholder{ color: var(--ink-faint); }
.g-navwrap__news button{
  background: none; border: 0; color: var(--ink); cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: none;
}

.g-navwrap__social{ display: flex; gap: var(--s4); margin-bottom: var(--s6); }
.g-navwrap__social a{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.g-navwrap__social a:hover{ color: var(--blue-deep); border-color: var(--blue-deep); }
.g-navwrap__social svg{ width: 18px; height: 18px; }

.g-navwrap__linkgrid{
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5);
  margin-bottom: var(--s2);
}
.g-navwrap__linkgrid a{
  color: var(--ink-soft); text-decoration: none; font-size: 15px;
  min-height: 44px; display: flex; align-items: center;
}
.g-navwrap__linkgrid a:hover{ color: var(--blue-deep); }

.g-navwrap__addr{ margin: 0 0 var(--s2); }
.g-navwrap__foot a{ color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 44px; }

.g-navwrap__legal{
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: 13px;
}
.g-navwrap__legal a{ color: var(--ink-faint); min-height: 44px; display: inline-flex; align-items: center; }
.g-navwrap__legal a:hover{ color: var(--blue-deep); }

@media (max-width: 26rem){ .g-navwrap{ width: 100vw; } }

/* ==========================================================================
   HERO VIDEO — full-bleed looping background, pause control.
   ========================================================================== */
/* The video must stay in the layout flow. As position:absolute it was
   removed from flow, .g-hero collapsed to zero height, and the section
   below slid up underneath the video — the text-over-video overlap. */
/* The film is the hero's ground, so it fills the hero rather than being a
   band at the top of it. Sized with its own height, the hero could be taller
   than the film and the content — anchored to the bottom — came to rest on
   bare navy below it. */
.g .g-hero__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.g-hero__pause{
  position: absolute; bottom: var(--s6); right: var(--s6); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.15);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.g-hero__lede{
  color: #EAE4DC; max-width: var(--m-read); font-size: var(--t-lede); font-weight: 300;
  line-height: 1.6; margin: var(--s5) 0 0;
}

/* ---- Availability calendar -------------------------------------------- */
/* Nights already taken are shown struck through and cannot be clicked, so a
   guest never fills in the form only to be refused at the end. The colour is
   not the only signal — a strike-through and a title carry it too, since a
   greyed-out date and a pale one are the same thing to a lot of eyes. */
.g-cal{ margin-top: var(--s4); border: 1px solid var(--line); padding: var(--s4); }
.g-cal__nav{ display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.g-cal__btn{
  font: inherit; line-height: 1; padding: 6px 12px; cursor: pointer;
  color: var(--ink); background: transparent; border: 1px solid var(--ink);
}
.g-cal__btn:hover{ background: var(--ink); color: var(--sand); }
.g-dates__key{ font-size: 13px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.g-cal__swatch{ width: 12px; height: 12px; background: var(--sand-3); border: 1px solid var(--line); display: inline-block; }
.g-dates__months{ display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s4); }
.g-dates__month{ flex: 1 1 240px; min-width: 0; }
.g-cal__title{ margin: 0 0 var(--s2); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.g-dates__grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.g-dates__dow{ font-size: 13px; text-align: center; color: var(--ink-faint); padding-bottom: 4px; }
.g-dates__day{
  font: inherit; font-size: 13px; aspect-ratio: 1; min-height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: transparent; border: 1px solid transparent; cursor: pointer;
}
.g-dates__day:hover:not(:disabled){ border-color: var(--ink); }
.g-dates__day.is-empty{ cursor: default; }
.g-dates__day.is-off{
  color: var(--ink-faint); background: var(--sand-3);
  text-decoration: line-through; cursor: not-allowed;
}
.g-dates__day.is-sel{ background: var(--ink); color: var(--sand); }
.g-dates__day.is-range{ background: var(--sand-2); }
@media (pointer: coarse){
  /* A 34px target is fine with a mouse and not with a thumb. */
  .g-dates__day{ min-height: 44px; }
}

/* A page's opening statement — larger than a section heading, matching the
   page-title scale. Was an inline style on home.html; moved here so the
   scale lives in one place rather than drifting per template. */
.g-h2--lead{ font-size: var(--t-h1); margin-bottom: var(--s5); }


/* Booking form wrapper — was unstyled, so fields ran the full page width.
   A form is easier to complete in a contained column. */
.g-form-full{ max-width: 72rem; }

/* Single-column prose inside a full-width wrap was hanging left with a large
   empty right side. Centring the measure keeps the comfortable line length
   while sitting properly in the page — matching how Ritz sets prose blocks. */
/* Both the heading and its paragraph are centred, but only the heading was
   capped at --measure — so the two centred against different widths and their
   left edges differed by half the difference. On most pages the gap was
   invisible; on a few it read as an 8px misalignment. Cap both. */
.g-wrap > .g-p,
.g-wrap > .g-h2 + .g-p,
.g-sec > .g-wrap > .g-p{ max-width: var(--measure); margin-left: auto; margin-right: auto; }
.g-sec > .g-wrap > .g-h2{ max-width: var(--measure); margin-left: auto; margin-right: auto; }
/* ---- Language switcher ------------------------------------------------- */
/* Plain links, not a dropdown: three options do not need a menu, and a link
   works before any JavaScript has run. The current one is marked by weight and
   an underline as well as colour, so it is not carried by colour alone. */
.g-lang{ display: inline-flex; align-items: center; gap: var(--s2); }
.g-lang__opt{
  font-size: 13px; line-height: 1; padding: 6px 4px; text-decoration: none;
  color: var(--ink-soft); border-bottom: 1px solid transparent; white-space: nowrap;
}
.g-lang__opt:hover{ color: var(--ink); }
.g-lang__opt.is-on{ color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
body.has-hero .g-top:not(.is-solid) .g-lang__opt{ color: rgba(255,255,255,.8); }
body.has-hero .g-top:not(.is-solid) .g-lang__opt.is-on{ color: #fff; border-bottom-color: #fff; }
@media (max-width: 900px){
  /* On a phone the header is already tight; the switcher keeps its own line
     rather than pushing the reserve button off the edge. */
  .g-lang{ order: 10; width: 100%; justify-content: flex-end; }
}
@media (pointer: coarse){
  /* 26px of link is a fine mouse target and a poor thumb one. Stated as a
     minimum height rather than padding, because padding has to be re-derived
     every time the font size moves and this does not. */
  .g-lang__opt{
    min-height: 46px; padding: 0 10px;
    display: inline-flex; align-items: center;
  }
}

/* Panel preferences — language and currency, moved out of the header where
   they were wider than the Book button itself. */
.g-navwrap__prefs{
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s4);
}
.g-navwrap__prefs-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.g-navwrap__prefs-label{
  font-family: var(--serif); font-size: 13px; font-weight: 500; color: var(--ink-faint);
}
.g-navwrap__prefs select{
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  padding: var(--s2) var(--s3); min-height: 44px; cursor: pointer;
}
.g-lang{ display: inline-flex; align-items: center; gap: var(--s3); }
.g-lang__opt{
  font-family: var(--serif); font-size: 15px; color: var(--ink-faint);
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.g-lang__opt.is-on{ color: var(--blue-deep); font-weight: 500; }
.g-lang__opt:hover{ color: var(--blue-deep); }

/* ---- Menu button label -------------------------------------------------
   A bare hamburger asks people to guess. The word costs almost nothing. */
.g-navbtn{ gap: var(--s3); width: auto; padding: 0 var(--s2); }
.g-navbtn__label{
  font-family: var(--serif); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: currentColor;
}
@media (max-width: 26rem){ .g-navbtn__label{ display: none; } }

/* ---- Book chooser ------------------------------------------------------
   A night and a workshop are different products — different dates, different
   length, private vs shared. One button, but the choice is made explicit
   with enough detail to decide from. */
.g-booksel{ position: relative; display: inline-flex; }

.g-bookmenu{
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  width: min(24rem, calc(100vw - 2rem));
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(20,30,45,.16);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  text-align: left;
}
.g-bookmenu.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }

.g-bookmenu__opt{
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s5); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.g-bookmenu__opt:hover{ background: var(--sand-2); }
/* The base .g img/svg sizing was beating this, so the chooser icons expanded
   to fill the panel. Fixed basis plus a .g-prefixed rule to match specificity. */
.g-bookmenu__ico{ flex: 0 0 24px; width: 24px; color: var(--blue-deep); }
.g .g-bookmenu__ico svg{ width: 24px; height: 24px; display: block; }
.g-bookmenu__txt{ display: block; }
.g-bookmenu__txt b{
  display: block; font-family: var(--display); font-size: 16px;
  font-weight: 600; color: var(--blue-deep);
}
.g-bookmenu__txt em{
  display: block; font-style: normal; font-size: 15px;
  color: var(--ink-soft); margin-top: 1px;
}
.g-bookmenu__meta{
  display: block; font-size: 13px; color: var(--ink-faint); margin-top: var(--s2);
}
.g-bookmenu__opt--sm{
  display: block; padding: var(--s4) var(--s5);
  font-size: 15px; color: var(--ink-soft);
}
.g-bookmenu__opt--sm:last-child{ border-bottom: none; }

/* The trigger is a button now, not a link — keep it looking identical. */
.g .g-reserve{ cursor: pointer; font: inherit; }

/* ---- The engraved elevation -------------------------------------------- */
.g-crest{
  background: var(--blue-deep);
  padding: clamp(36px, 4vw, 56px) var(--s5);
  text-align: center;
}
.g-crest img{ width: 100%; max-width: var(--m-tight); min-height: 8rem; height: auto;
  object-fit: contain; display: block; margin: 0 auto; }
.g-crest__note{
  font-family: var(--serif); font-size: 13px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin: var(--s5) 0 0;
}
/* ---- Room page --------------------------------------------------------
   The photo slots were conditional on uploads that do not exist yet, so a
   room selling a night at this price rendered as a bare form. */
.g .g-roomhero{
  width: 100%; height: clamp(16rem, 46vh, 30rem);
  object-fit: cover; display: block;
}
.g-room__note{
  font-size: 15px; color: var(--ink-soft); max-width: var(--m-read);
  margin: var(--s3) 0 0; line-height: 1.6;
}
.g-strip{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr);
  gap: var(--s3); overflow-x: auto; margin: var(--s5) 0 var(--s6);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.g .g-strip img{
  width: 100%; height: 11rem; object-fit: cover;
  scroll-snap-align: start; display: block;
}

/* ---- What's On agenda -------------------------------------------------- */
.g-agenda{ border-top: 1px solid var(--line); }
.g-agenda__row{
  display: grid; gap: var(--s4); align-items: start;
  grid-template-columns: 1fr; position: relative;
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 44rem){
  .g-agenda__row{ grid-template-columns: 11rem 1fr auto; gap: var(--s6); }
}
.g-agenda__when{ display: flex; flex-direction: column; gap: 2px; }
.g-agenda__day{ font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--blue-deep); }
.g-agenda__time{ font-size: 15px; color: var(--ink-faint); }
.g-agenda__title{
  font-family: var(--display); font-size: 18px; font-weight: 400;
  color: var(--blue-deep); margin: 0 0 2px;
}
.g-agenda__loc{ font-size: 15px; color: var(--ink-faint); margin: 0 0 var(--s2); }
.g-agenda__row.is-today{ background: var(--sand-2); }
.g-agenda__row.is-today .g-agenda__when{ padding-left: var(--s4); }
.g-agenda__flag{
  align-self: center; font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--blue-deep); padding: 4px var(--s3);
}
.g-tags--onblue li{ color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.3); }

/* ---- Terms row --------------------------------------------------------
   The last thing between a guest and paying — the checkbox and its link
   were below a comfortable thumb target. */
.g-terms{
  display: flex; gap: var(--s4); align-items: center; font-size: 15px;
  margin-bottom: var(--s5); cursor: pointer; min-height: 44px;
}
.g-terms input{ width: 22px; height: 22px; accent-color: #D9C79B; flex: none; cursor: pointer; }
.g-terms a{ color: #D9C79B; min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   WORKSHOPS — three products of different length and price, shown side by
   side so the choice is legible, then each in full below.
   ========================================================================== */
.g-wscards{
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.g-wscard{
  background: var(--white); border: 1px solid var(--line);
  padding: var(--s6); display: flex; flex-direction: column;
}
.g-wscard__top{ flex: none; }
.g-wscard__len{
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 var(--s3);
}
.g-wscard__name{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.15;
  color: var(--blue-deep); margin: 0 0 var(--s2);
}
.g-wscard__dates{ font-size: 15px; color: var(--ink-soft); margin: 0 0 var(--s4); }
.g-wscard__blurb{ flex: 1; font-size: 15px; }
.g-wscard__foot{ margin-top: var(--s5); }
.g-wscard__price{ margin: 0 0 var(--s4); }
.g-wscard__price .g-fig{ font-size: var(--t-lede); margin-right: var(--s2); }
.g-wscard__price span:last-child{ font-size: 15px; color: var(--ink-faint); }
.g .g-wscard .g-btn{ width: 100%; }

/* A single line of the château's own words, given room to be read. */
.g-quote-band{
  background: var(--blue-deep); color: #fff;
  padding: clamp(40px, 5vw, 60px) var(--s5);
}
.g-quote-band__t{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.35;
  max-width: var(--m-read); margin: 0 auto; text-align: center;
}

.g-sampleday .g-h3{ margin-bottom: var(--s3); }

@media (min-width: 52rem){ .g-incl{ grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s7); } }
/* A field as wide as the page is harder to read than one sized to its content.
   Text inputs cap out; textareas keep the full column since they hold prose. */
.g-field input[type="text"], .g-field input[type="email"],
.g-field input[type="tel"], .g-field select{ max-width: var(--m-tight); }
.g-field input[type="number"], .g-field input[type="date"]{ max-width: 14rem; }
.g-row{ display: grid; gap: var(--s5); }
@media (min-width: 40rem){ .g-row{ grid-template-columns: 1fr 1fr; } }

/* A standing note between fields needs its own air, or it reads as the hint
   belonging to the field below it. */
.g-hint--block{ margin: var(--s5) 0 var(--s6); max-width: var(--m-read); }

/* Footer links are the last thing a thumb reaches on a phone — tightening the
   footer pulled them under a comfortable target, so state a floor explicitly
   rather than relying on line-height. */
.g-footer a{ min-height: 44px; display: inline-flex; align-items: center; }
/* In the footer the crest closes the page rather than interrupting one, and
   the footer is already navy — so no band of its own, just the mark. */
.g-crest--foot{
  background: transparent;
  padding: 0 var(--s5) var(--s7);
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: var(--s7);
}
.g-crest--foot img{ max-width: 18rem; min-height: 0; opacity: .92; }
.g-crest--foot .g-crest__note{
  font-size: 13px; letter-spacing: .16em; color: rgba(255,255,255,.5);
  margin-top: var(--s4);
}

/* ==========================================================================
   ENGRAVED DETAIL
   The visual grammar of a plate in an old book — double rules, a small
   centred motif between sections, and the façade used faintly as ground.
   Nothing decorative for its own sake; each one marks a division that was
   previously a bare hairline.
   ========================================================================== */

/* A double rule reads as older than a single one. Used where a section ends
   rather than where a field does. */
.g-rule--double{
  border: 0; height: 4px; margin: var(--s7) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* A small engraved motif, centred, to break prose without a heading. */
.g-motif{
  display: flex; align-items: center; gap: var(--s5);
  margin: var(--s7) auto; max-width: var(--measure);
  color: var(--line);
}
.g-motif::before, .g-motif::after{
  content: ''; flex: 1; height: 1px; background: currentColor;
}
.g-motif svg{ width: 26px; height: 26px; color: var(--blue-deep); opacity: .55; flex: none; }

/* Section headings sit over a hairline that runs the full measure, with the
   heading knocked out of it — the way a chapter opens on a printed page. */
.g-place{ position: relative; }

/* The façade, very faint, behind a section. Sparingly — one per page at most. */
.g-sec--plate{
  position: relative; overflow: hidden;
}
.g-sec--plate::before{
  content: ''; position: absolute; inset: 0;
  background: url('/static/img/chateau_plate.png') center 55% / min(46rem, 88%) no-repeat;
  opacity: .05; filter: invert(1); pointer-events: none;
}
.g-sec--plate > *{ position: relative; }

/* A quiet corner ornament for cards, so a bordered box reads as engraved
   rather than as a UI panel. */
.g-card, .g-wscard{ position: relative; }
.g-card::after, .g-wscard::after{
  content: ''; position: absolute; top: 0; right: 0;
  width: 10px; height: 10px;
  border-top: 1px solid var(--blue-deep); border-right: 1px solid var(--blue-deep);
  opacity: .35;
}

/* ==========================================================================
   WORKSHOP DATES — a booking table, not an essay. Every sitting across every
   workshop in one scannable list, filterable by workshop.
   ========================================================================== */
.g-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.g-datefilter{ display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
.g-chip{
  font-family: var(--serif); font-size: 15px; font-weight: 500;
  padding: var(--s2) var(--s4); min-height: 44px;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
.g-chip:hover{ border-color: var(--blue-deep); color: var(--blue-deep); }
.g-chip.is-on{ background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

/* The workshop name in a row is a real link people tap — give it a target,
   not just a text baseline. */
.g-dates-table a:not(.g-btn){
  color: var(--blue-deep); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
/* On a phone a six-column table cannot hold — each row becomes a card with
   the column name carried in front of its value. */
@media (max-width: 52rem){
.g-dates-table, .g-dates-table tbody, .g-dates-table tr, .g-dates-table td{ display: block; width: 100%; }
.g-dates-table td{ border: 0; padding: var(--s1) 0; }
.g-dates-table__when::before{ display: none; }
.g .g-dates-table__act .g-btn{ width: 100%; }
}

/* The standing facts, as a definition list rather than paragraphs. */
.g-facts-list{ display: grid; gap: var(--s4); margin: 0; }
@media (min-width: 46rem){ .g-facts-list{ grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s7); } }
.g-facts-list > div{ display: grid; grid-template-columns: 8rem 1fr; gap: var(--s4); align-items: baseline; }
.g-facts-list dt{
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.g-facts-list dd{ margin: 0; font-size: 15px; color: var(--ink); line-height: 1.5; }


/* Bare headings in page content — a heading should look like one whether or
   not the class was remembered. .g-display/.g-h2/.g-h3 still override. */
.g main h1:not([class]), .g main h2:not([class]), .g main h3:not([class]){
  font-family: var(--display); color: var(--blue-deep);
  font-weight: 400; line-height: 1.2; margin: 0 0 var(--s3);
}
.g main h1:not([class]){ font-size: var(--t-h2); }
.g main h2:not([class]){ font-size: var(--t-h2); }
.g main h3:not([class]){ font-size: var(--t-lede); }

/* Contact — the four things a visitor is most likely after, as plain links
   rather than another form to fill in. */
.g-contact-links{ display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 44rem){ .g-contact-links{ grid-template-columns: 1fr 1fr; } }
.g-contact-link{
  display: block; padding: var(--s5); text-decoration: none;
  border: 1px solid var(--line); background: var(--white);
}
.g-contact-link:hover{ border-color: var(--blue-deep); }
.g-contact-link b{
  display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-lede); color: var(--blue-deep);
}
.g-contact-link span{ display: block; font-size: 15px; color: var(--ink-soft); margin-top: 2px; }

/* Email and telephone links in a facts list are things people actually tap. */
.g-facts-list dd a{ display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   HOMEPAGE ROOMS — the actual rooms, named and priced, rather than a tile
   that links to them. A front page should show what is for sale.
   ========================================================================== */
.g-homerooms{
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.g-homeroom{ border: 1px solid var(--line); background: var(--white); display: flex; flex-direction: column; }
.g .g-homeroom__img{ width: 100%; height: 13rem; object-fit: cover; display: block; }
.g-homeroom__b{ padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.g-homeroom__name{
  font-family: var(--display); font-weight: 400; font-size: var(--t-lede);
  color: var(--blue-deep); margin: 0 0 var(--s2);
}
.g-homeroom__b .g-p{ flex: 1; font-size: 15px; }
.g-homeroom__rate{ font-size: 15px; color: var(--ink-soft); margin: 0 0 var(--s4); }
.g-homeroom__rate .g-fig{ font-size: var(--t-lede); }
.g .g-homeroom .g-btn{ width: 100%; }

/* Inclusions as photographic cards. A list of seven bullet points is the
   least persuasive way to sell what a €4,800 price covers. */
.g-incl-cards{
  display: grid; gap: var(--s5); margin-top: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.g-incl-card{ background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.g .g-incl-card img{ width: 100%; height: 12rem; object-fit: cover; display: block; }
.g-incl-card__b{ padding: var(--s5); }
.g-incl-card__t{
  font-family: var(--display); font-weight: 400; font-size: var(--t-lede);
  color: var(--blue-deep); margin: 0 0 var(--s3);
}
.g-incl-card__b p{ font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0; }

/* ==========================================================================
   MOBILE
   12px uppercase with wide tracking is legible on a desktop at arm's length
   and genuinely hard on a phone. Lift the small labels, and let the tall
   stacked sections breathe less — on a phone every section is full-width, so
   desktop padding compounds into a very long scroll.
   ========================================================================== */
@media (max-width: 34rem){
  .g-eyebrow,
  .g-navwrap__group,
  .g-crest__note,
  .g-footer h2, .g-footer h4,
  .g-footer__fine,
  .g-navwrap__item--plain,
  .g-facts-list dt,
  .g-dates-table th,
  .g-dossier__k{ font-size: 13px; }

  .g-facts li span{ font-size: 15px; }

  /* A button is the thing being tapped — it should never be the smallest
     text on the screen. */
  .g .g-btn, .g .g-submit, .g-chip{ font-size: 15px; }
  .g-foot-note, .g-hint, .g-opt{ font-size: 15px; }
  .g-num{ font-size: 13px; }
  .g-facts-list dt, .g-dossier__l dt, dl dt{ font-size: 13px; }
  .g-cal > summary, small{ font-size: 13px; }
  .g-approx, .g-navwrap__legal a{ font-size: 13px; }
  .g-navwrap__feature em, .g-footer__brand + p,
  .g-crest__note, .g-footer span{ font-size: 13px; }

  /* Sections stack full-width on a phone, so the desktop rhythm compounds. */
  .g-sec{ padding: clamp(36px, 9vw, 42px) 0; }
  .g-sec--tight{ padding: var(--s5) 0; }
  .g-half__text{ padding: var(--s5) var(--s4); }
  .g-crest--foot{ padding-bottom: var(--s5); margin-bottom: var(--s5); }
  .g-footer{ padding: var(--s6) 0 var(--s5); }
  .g-footer__grid{ gap: var(--s5); }

  /* A photo band of five images on a phone becomes five full-width blocks —
     scroll it sideways instead. */
  .g-band{
    display: grid; grid-auto-flow: column; grid-auto-columns: 72%;
    gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory;
    max-width: 100%; min-width: 0;
  }
  .g-band > *{ min-width: 0; }
  .g .g-band img{ height: 13rem; scroll-snap-align: start; }
}

/* The scale's smallest step is 12px, which is fine at desktop distance and
   small on a phone. Lift only that step; every larger size is untouched. */
@media (max-width: 34rem){
  .g [class*="eyebrow"], .g [class*="__k"], .g [class*="hint"],
  .g [class*="note"], .g [class*="fine"], .g [class*="meta"],
  .g [class*="label"], .g [class*="__len"], .g [class*="group"],
  .g dt, .g th, .g small, .g figcaption, .g summary,
  .g .g-num, .g .g-opt, .g .g-approx{ font-size: 13px; }
  .g .g-btn, .g .g-submit, .g .g-chip{ font-size: 15px; }
}

/* Press — a list of names that carry their own weight. Set as a plain roll
   rather than logo tiles, since we do not hold the logos. */
.g-press{
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 46rem){ .g-press{ grid-template-columns: 1fr 1fr; column-gap: var(--s7); } }
.g-press li{
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.g-press b{
  font-family: var(--display); font-weight: 400; font-size: var(--t-lede);
  color: var(--blue-deep); flex: 0 0 auto;
}
.g-press span{ font-size: 15px; color: var(--ink-soft); }

/* An email address inside a hint line is still a link people tap. */
.g-hint a{ display: inline-flex; align-items: center; min-height: 44px; }


/* A long email address or an unbroken word must never widen the page. */
.g main, .g footer, .g header{ overflow-x: clip; }
.g-two > *, .g-half > *, .g-cols > *{ min-width: 0; }
.g-p, .g-h2, .g-display, .g-place, .g-eyebrow{ overflow-wrap: anywhere; }

/* ==========================================================================
   WORKSHOP DATES AS CARDS
   A spreadsheet is how an airline sells a seat, not how a house sells a week.
   Each sitting gets its own photograph, the price set large, and one action.
   ========================================================================== */
.g-sittings-grid{
  display: grid; gap: var(--s5); margin-top: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.g-sit{
  background: var(--white); border: 1px solid var(--line);
  display: flex; flex-direction: column; position: relative;
}
.g .g-sit__img{ width: 100%; height: 12rem; object-fit: cover; display: block; }
.g-sit__b{ padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.g-sit__when{
  font-family: var(--display); font-weight: 400; font-size: var(--t-lede);
  line-height: 1.15; color: var(--blue-deep); margin: 0 0 var(--s2);
}
.g-sit__name{
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 var(--s4);
}
.g-sit__meta{ font-size: 15px; color: var(--ink-soft); margin: 0 0 var(--s4); flex: 1; }
.g-sit__rate{ margin: 0 0 var(--s4); }
.g-sit__rate .g-fig{ font-size: var(--t-lede); }
.g-sit__rate span:last-child{ font-size: 15px; color: var(--ink-faint); }
.g .g-sit .g-btn{ width: 100%; }
.g-sit--full{ opacity: .72; }
.g-sit__flag{
  position: absolute; top: 0; left: 0;
  background: var(--blue-deep); color: #fff;
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: var(--s2) var(--s4);
}
.g-sit__flag--few{ background: var(--stone); }

/* ==========================================================================
   HERO SEARCH
   On a booking site the search is the hero, not something below it. Sits on
   the photograph so the first act available is looking for a date.
   ========================================================================== */
.g-herosearch{
  display: grid; gap: 1px; background: rgba(246,241,231,.32);
  border: 1px solid rgba(246,241,231,.46);
  margin-top: var(--s6); max-width: var(--m-read);
}
@media (min-width: 46rem){
  .g-herosearch{ grid-template-columns: 1fr 1fr 7rem auto; align-items: stretch; }
}
.g-herosearch__f{
  background: rgba(246,241,231,.96); padding: var(--s3) var(--s4);
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
.g-herosearch__f label{
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 2px;
}
.g-herosearch__f input{
  border: 0; background: transparent; padding: 0; width: 100%;
  font-family: var(--serif); font-size: 16px; color: var(--blue-deep);
  min-height: 44px; line-height: 44px;
}
/* The field itself is the tap target, not just the text inside it. */
.g-herosearch__f{ min-height: 60px; }
.g-herosearch__f input:focus{ outline: 2px solid var(--blue-deep); outline-offset: 3px; }
.g-herosearch__go{
  background: var(--blue-deep); color: #fff; border: 0; cursor: pointer;
  font-family: var(--serif); font-size: 15px; font-weight: 500;
  letter-spacing: .06em; padding: var(--s4) var(--s6); min-height: 56px;
  white-space: nowrap;
}
.g-herosearch__go:hover{ background: #0D2851; }
@media (max-width: 34rem){
  .g-herosearch{ margin-top: var(--s5); }
  .g-herosearch__go{ width: 100%; }
}

/* Eight hundred years, as a dated list. A year set in the serif against the
   line of text it belongs to — the shape of a chronology in a printed book. */
.g-timeline{ list-style: none; margin: var(--s6) 0 0; padding: 0; }
.g-timeline li{
  display: grid; gap: var(--s3) var(--s6); align-items: baseline;
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem){ .g-timeline li{ grid-template-columns: 7rem 1fr; } }
.g-timeline li:first-child{ border-top: 1px solid var(--line); }
.g-timeline b{
  font-family: var(--display); font-weight: 400; font-size: var(--t-h2);
  color: var(--stone); line-height: 1;
}
.g-timeline span{ font-size: 16px; line-height: 1.6; color: var(--ink); }

/* ==========================================================================
   ENGRAVED ORNAMENT — more of it, used as structure rather than decoration
   ========================================================================== */

/* A section opener with a rule either side of a small mark. */
.g-orn{
  display: flex; align-items: center; gap: var(--s5);
  margin: 0 0 var(--s5); color: var(--line);
}
.g-orn::before, .g-orn::after{ content:''; flex:1; height:1px; background: currentColor; }
.g-orn svg{ width: 22px; height: 22px; flex: none; color: var(--stone); }
/* A drop initial, the way a chapter opens in a printed book. */
.g-drop-cap::first-letter{
  font-family: var(--display); font-weight: 400;
  font-size: 3.4em; line-height: .82; float: left;
  margin: .06em var(--s3) 0 0; color: var(--stone);
}

/* A corner rule on a panel — engraved plate rather than UI box. */
.g-plate-edge{ position: relative; }
.g-plate-edge::before, .g-plate-edge::after{
  content:''; position:absolute; width: 14px; height: 14px; pointer-events:none;
}
.g-plate-edge::before{ top:0; left:0; border-top:1px solid var(--stone); border-left:1px solid var(--stone); }
.g-plate-edge::after{ bottom:0; right:0; border-bottom:1px solid var(--stone); border-right:1px solid var(--stone); }

/* The opening paragraph of a page carries a little more weight than the rest. */
.g-lede-first{ font-size: var(--t-base); line-height: 1.6; max-width: var(--measure); }

/* ==========================================================================
   CONFIRMATION PAGES
   The page a guest lands on straight after committing money. It was styled
   like a back-office screen; it should feel like a letter from the house.
   ========================================================================== */
.g-conf{
  background: var(--white); border: 1px solid var(--line);
  padding: var(--s6); margin: var(--s6) 0;
}
.g-conf .g-facts-list dd{ font-size: 16px; }
.g-conf .g-fig{ font-size: var(--t-lede); }
.g-conf__acts{ display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0; }
@media (max-width: 34rem){ .g .g-conf__acts .g-btn{ width: 100%; } }
.g-sharelink{
  font-family: var(--serif); font-size: 13px; color: var(--ink-soft);
  background: var(--sand-2); border: 1px solid var(--line);
  padding: var(--s4); word-break: break-all; margin: var(--s3) 0 0;
}


/* The wordmark asset is white-on-transparent. The header is cream, so on its
   own it was invisible on every page. Invert it to the brand navy; the only
   place it should stay white is over a dark hero. */
/* The wordmark PNG is white-on-transparent. An invert/hue-rotate chain was
   producing purple rather than navy; a mask uses the file's alpha channel and
   fills it with an exact colour instead. */
/* The wordmark PNG is white-on-transparent. Colouring it by filter produced
   purple; masking the <img> left its own white bitmap painting on top. The
   mask and the colour belong on the LINK, with the image inside it hidden —
   the mask reads from the CSS url, so nothing of the raster shows through. */
.g .g-logo, .g .g-brand{
  display: inline-block;
  width: var(--logo-w, 240px); height: 52px;
  background-color: var(--blue-deep);
  -webkit-mask-image: var(--logo-src); mask-image: var(--logo-src);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: left center; mask-position: left center;
}
.g .g-logo img, .g .g-brand img{ opacity: 0; width: 100%; height: 100%; display: block; }

/* Over a dark hero the white original is correct — drop the mask and colour
   and let the image itself show. */
.g.has-hero.at-top .g-logo, .g.has-hero.at-top .g-brand{
  background-color: transparent;
  -webkit-mask-image: none; mask-image: none;
}
.g.has-hero.at-top .g-logo img, .g.has-hero.at-top .g-brand img{ opacity: 1; }

/* Without mask support, show the untouched white file rather than a wrong
   colour or an invisible one. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .g .g-logo, .g .g-brand{ background-color: transparent; }
  .g .g-logo img, .g .g-brand img{ opacity: 1; }
}
@media (max-width: 60rem){ .g .g-logo, .g .g-brand{ width: var(--logo-w, 180px); height: 40px; } }


/* ==========================================================================
   TESTIMONIALS
   Set as an engraved plate rather than a review widget — a rule above, the
   quote in the display serif, the source small beneath. No stars, no cards
   with drop shadows; this is a house, not a listing.
   ========================================================================== */
.g-says{ background: var(--stone-pale); }
.g-says__grid{
  display: grid; gap: var(--s6); margin-top: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.g-say{
  padding: var(--s6) 0 0; border-top: 2px solid var(--blue-deep);
  display: flex; flex-direction: column;
}
.g-say__q{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-lede); line-height: 1.45;
  color: var(--blue-deep); margin: 0 0 var(--s5); flex: 1;
}
.g-say__q::before{ content: "“"; margin-right: .06em; }
.g-say__q::after{ content: "”"; }
.g-say__by{
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin: 0;
}
.g-say__src{
  display: block;
  font-family: var(--serif); font-size: 13px; color: var(--ink-faint);
  margin: 3px 0 0; letter-spacing: 0; text-transform: none; font-weight: 400;
}

/* The scores, as a row of engraved figures. */
.g-scores{
  display: grid; gap: var(--s5) var(--s6); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  border-top: 1px solid var(--line); padding-top: var(--s6);
}
.g-score{ text-align: center; }
.g-score b{
  display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1; color: var(--blue-deep);
}
.g-score span{
  display: block; font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: var(--s2);
}

.g-fleur{ display: block; margin: var(--s6) auto; color: var(--stone); width: 120px; height: 26px; }
.g-cartouche .g-place{ margin: 0; }

/* Section that reads as a printed plate: hairline frame inset from the edge. */
.g-framed{
  border: 1px solid var(--line); position: relative;
  padding: clamp(28px, 4vw, 48px);
}
.g-framed::before{
  content: ''; position: absolute; inset: 6px;
  border: 1px solid var(--line); pointer-events: none;
}

/* ==========================================================================
   MANAGE A BOOKING
   The most functional guest page — eight forms on one screen: arrival time,
   extend, change dates, transfer, requests, bill, extras, dinner. It was
   built on admin classes. Kept dense and legible rather than decorated.
   ========================================================================== */
.g-mb-card{
  background: var(--white); border: 1px solid var(--line);
  padding: var(--s6); margin-bottom: var(--s5);
}
.g-mb-card h3{
  font-family: var(--display); font-weight: 400; font-size: var(--t-lede);
  color: var(--blue-deep); margin: 0 0 var(--s4);
}
.g-mb-label{
  display: block; font-family: var(--serif); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); margin: var(--s4) 0 var(--s2);
}
.g-mb-card input, .g-mb-card select, .g-mb-card textarea{
  width: 100%; max-width: var(--m-tight); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); background: var(--sand);
  font-family: var(--serif); font-size: 16px; color: var(--blue-deep);
  min-height: 48px;
}
.g-mb-card textarea{ min-height: 6rem; resize: vertical; }
.g-mb-dt{
  display: block; font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.g-mb-note{
  background: var(--sand-2); border-left: 2px solid var(--stone);
  padding: var(--s4) var(--s5); margin: var(--s4) 0;
}
.g-mb-line{
  display: flex; justify-content: space-between; gap: var(--s5);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.g-mb-total{
  display: flex; justify-content: space-between; gap: var(--s5);
  padding: var(--s4) 0 0; margin-top: var(--s3);
  border-top: 2px solid var(--blue-deep);
  font-family: var(--display); font-size: var(--t-lede); color: var(--blue-deep);
}
.g-mb-list{ list-style: none; margin: 0; padding: 0; }
.g-mb-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.g-mb-rowt{ font-family: var(--display); font-size: 18px; color: var(--blue-deep); flex: 1 1 12rem; }
.g-mb-acts{ display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }
.g .g-btn--sm{ padding: var(--s2) var(--s4); font-size: 15px; min-height: 44px; }
@media (max-width: 34rem){
  .g-mb-card input, .g-mb-card select, .g-mb-card textarea{ max-width: 100%; }
  .g .g-mb-acts .g-btn{ width: 100%; }
}

/* The footer sat at 12px on every page — small at desktop reading distance,
   and it is the last thing anyone reads. 13px is still quiet. */
.g-footer h2, .g-footer h4{ font-size: 13px; }
.g-footer__fine{ font-size: 13px; }
.g-crest__note{ font-size: 13px; }


/* The 12px step is used for every uppercase, letter-spaced micro-label —
   eyebrows, dt terms, step numbers, dossier keys, card flags, footer notes.
   Caps at 12px with wide tracking is hard to read at desktop distance, so the
   step becomes 13px everywhere. Larger sizes are untouched. */
.g .g-eyebrow, .g .g-crest__note, .g .g-crest--foot .g-crest__note,
.g .g-num, .g .g-dossier__k, .g .g-dossier__l dt,
.g .g-facts-list dt, .g .g-mb-dt, .g dl dt,
.g .g-wscard__len, .g .g-sit__name, .g .g-sit__flag,
.g .g-press span, .g .g-score span, .g .g-say__by,
.g .g-dates-table th, .g .g-foot-note, .g .g-hint,
.g .g-field label, .g .g-mb-label, .g .g-opt,
.g .g-footer h2, .g-footer h4, .g .g-footer__fine,
.g .g-search label, .g .g-refine label,
.g .g-herosearch__f label, .g .g-incl-card__t + p{
  font-size: 15px;
}

/* A form control that has missed a class should still be usable — a 21px
   input is not tappable. This is a floor, not a style. */
.g main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.g main select,
.g main textarea{
  min-height: 48px;
  font-family: var(--serif); font-size: 16px;
}
.g main textarea{ min-height: 6rem; }

/* ==========================================================================
   SHORT UTILITY PAGES
   Find-a-booking, confirmations, feedback, expired links. Forty words in a
   full section reads as an error page. Tighten the section, cap the measure,
   and let the photograph below carry the weight.
   ========================================================================== */
.g-short{ padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 42px); }
.g-short .g-wrap{ max-width: var(--m-read); }
.g-short .g-display{ font-size: var(--t-h2); }
.g-short .g-framed{ margin-top: var(--s6); }

/* Two classes the guest templates referenced that the stylesheet never
   defined — a page heading block and an empty/neutral state. */
.g .page-head{ margin-bottom: var(--s5); }
.g .page-head h1{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); line-height: 1.1;
  color: var(--blue-deep); margin: 0;
}
.g .empty-state{
  background: var(--sand-2); border: 1px solid var(--line);
  padding: var(--s6); font-size: 16px; line-height: 1.6; color: var(--ink);
}

/* ==========================================================================
   Classes the guest templates referenced that the stylesheet never defined —
   found by diffing every class="" against the sheet. The statement is a
   guest's bill and had no styling at all.
   ========================================================================== */
.g .flash{
  padding: var(--s4) var(--s5); border: 1px solid var(--line);
  background: var(--sand-2); font-size: 16px; margin-bottom: var(--s5);
}
.g .flash-success{ border-color: #7E9B7A; background: #F1F5EF; }

.g .statement{ width: 100%; border-collapse: collapse; margin-top: var(--s5); }
.g .statement-head{
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding: 0 var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.g .statement td{ padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); }
.g .num{ text-align: right; font-family: var(--display); font-size: 18px; white-space: nowrap; }

.g .section-heading{
  font-family: var(--display); font-weight: 400; font-size: var(--t-lede);
  color: var(--blue-deep); margin: var(--s7) 0 var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.g .quote-box{
  background: var(--sand-2); border-left: 2px solid var(--stone);
  padding: var(--s5); margin: var(--s5) 0;
}
.g .small-link{
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s2); font-size: 15px; color: var(--ink-soft);
}

/* Six classes in use with no rule — found by diffing every class attribute in
   the templates against this sheet. .g-formhero and .g-two__media were mine,
   lost in a rewrite; .data-table is the admin table on the guest statement. */
.g .g-formhero{
  width: 100%; height: clamp(12rem, 30vh, 22rem);
  object-fit: cover; display: block;
}
.g .g-two__media{ min-width: 0; }
.g .g-two__media img{ width: 100%; height: 100%; min-height: 18rem; max-height: 30rem; object-fit: cover; display: block; }
.g .g-agenda__what{ min-width: 0; }
.g .g-herosearch__f--n{ }
.g .g-resform{ max-width: var(--m-read); }
.g .data-table{ width: 100%; border-collapse: collapse; font-size: 15px; }
.g .data-table th{
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding: 0 var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line);
}
.g .data-table td{ padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); }

/* Form controls and uppercase micro-labels stay on the sans — a Garamond at
   13px in caps with wide tracking is genuinely hard to read, and an input
   should look like an input. */
.g input, .g select, .g textarea,
.g .g-eyebrow, .g dl dt, .g .g-facts-list dt, .g .g-mb-dt, .g .g-mb-label,
.g .g-field label, .g .g-num, .g .g-dossier__k, .g .g-sit__name,
.g .g-sit__flag, .g .g-wscard__len, .g .g-score span, .g .g-say__by,
.g .g-dates-table th, .g .g-chip, .g .g-footer h2, .g-footer h4, .g .g-navwrap__group,
.g .g-hint, .g .g-opt, .g .g-foot-note, .g .g-herosearch__f label{
  font-family: var(--ui);
}

/* An embedded map, framed like everything else — hairline, square corners,
   and a fixed aspect so it does not jump as it loads. */
.g-map{
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); background: var(--sand-2);
  margin-top: var(--s5);
}
.g-map iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 34rem){ .g-map{ aspect-ratio: 4 / 3; } }

/* Measured on lamaisonbleue-provence.com: their display serif carries +0.03em
   tracking at every size, never negative, and sits in sentence case. On a
   high-contrast Garamond that is what reads as engraved rather than cramped. */
.g .g-h2, .g .g-place, .g .g-h3{ letter-spacing: .012em; }

/* La Maison Bleue sets a single quotation as its own full section, centred,
   in the display serif, with the source small beneath. More confident than a
   grid of review cards, and it lets one line carry the page. */
.g-testament{ background: var(--stone-pale); }
.g-testament__q{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.4;
  letter-spacing: .012em; color: var(--blue-deep);
  max-width: var(--m-read); margin: 0 auto; text-align: center;
}
.g-testament__by{
  display: block; text-align: center; margin-top: var(--s5);
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stone);
}

/* ==========================================================================
   GUEST ACCOUNT
   Everything a returning guest has booked, in one place. Six of its classes
   were never defined anywhere, so the page had no styling at all.
   ========================================================================== */
.g .account-head{ margin-bottom: var(--s6); }
.g .account-head h1{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); letter-spacing: .012em;
  color: var(--blue-deep); margin: 0;
}
.g .account-card{
  background: var(--white); border: 1px solid var(--line);
  padding: var(--s5) var(--s6); margin-bottom: var(--s4);
}
.g .account-card-head{
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s3) var(--s5);
  margin-bottom: var(--s3);
}
.g .account-card-head strong{
  font-family: var(--display); font-weight: 400; font-size: var(--t-lede);
  letter-spacing: .012em; color: var(--blue-deep);
}
.g .account-actions{ display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.g .account-needs, .g .account-extras{
  background: var(--sand-2); border-left: 2px solid var(--stone);
  padding: var(--s3) var(--s4); margin-top: var(--s3); font-size: 15px;
}
@media (max-width: 34rem){
  .g .account-card{ padding: var(--s5) var(--s4); }
  .g .account-actions .g-btn{ width: 100%; }
}

/* The header row, measured against chateaudelacouronne.com: small, letter-
   spaced, quiet until hovered. Sits between the wordmark and the Book button. */
.g .g-nav{
  gap: clamp(10px, 1.1vw, 20px); align-items: center;
  margin-left: auto; margin-right: var(--s4);
  min-width: 0; flex-wrap: nowrap;
}
.g .g-nav a{
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center;
}
.g .g-nav a:hover, .g .g-nav a.is-on{ border-bottom-color: var(--stone); }
.g.has-hero.at-top .g-nav a{ color: #fff; }
@media (max-width: 78rem){ .g .g-nav{ gap: 12px; } .g .g-nav a{ font-size: 13px; letter-spacing: .04em; } }


/* Above 68rem the row carries every destination, so the panel toggle is
   redundant — it was still rendering alongside the full nav. */
/* The row carries the eight most-used destinations; the panel holds all
   sixteen with their groups and icons. Both stay — the row is a shortcut,
   not a replacement, and hiding the toggle made the panel unreachable on
   desktop. */
/* The toggle stays at every width. The panel carries more than the row —
   the journal, the currency control, the secondary links — so hiding it on
   wide screens removed the better navigation, not a duplicate of it. */

/* ==========================================================================
   SKIP LINK & BACK TO TOP
   A keyboard user was tabbing the header and eight nav items on every page
   before reaching content. And the longest pages run past 12,000px on a
   phone, with no way back but scrolling.
   ========================================================================== */
.g-skip{
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--blue-deep); color: #fff; padding: var(--s3) var(--s5);
  font-family: var(--ui); font-size: 15px; text-decoration: none;
  transition: top .15s;
}
.g-skip:focus{ top: var(--s4); }
#main:focus{ outline: none; }

.g-totop{
  position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px);
  z-index: 90; width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-deep); color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 1px 10px rgba(20,48,95,.22);
}
.g-totop[hidden]{ display: none; }
.g-totop svg{ width: 19px; height: 19px; }
.g-totop:hover{ background: #0D2851; }
@media (max-width: 34rem){ .g-totop{ bottom: 78px; } }

/* ==========================================================================
   REASSURANCE ROW
   Immediately above the footer, on every page. SharkNinja and most competent
   commerce sites run one; a site taking €4,800 payments had nothing.
   ========================================================================== */
.g-assure{ background: var(--sand-2); border-top: 1px solid var(--line); padding: var(--s7) 0; }
.g-assure__grid{
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.g-assure__grid li{ display: grid; gap: var(--s2); }
.g-assure__grid svg{ width: 24px; height: 24px; color: var(--stone); }
.g-assure__grid b{
  font-family: var(--display); font-weight: 400; font-size: 18px;
  letter-spacing: .012em; color: var(--blue-deep);
}
.g-assure__grid span{ font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* Card marks in the footer. Set as type rather than logo files — the brand
   images would need licensing and would look wrong on navy anyway. */
.g-pay{ margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.16); }
.g-pay__lbl{
  display: block; font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #9DAEBD; margin-bottom: var(--s3);
}
.g-pay__marks{ list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.g-pay__marks li{
  font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.28);
  padding: 5px 11px;
}
.g-pay__note{ font-family: var(--ui); font-size: 15px; color: #9DAEBD; }

/* Breadcrumbs — quiet, above the content, so a guest deep in a room or a
   workshop page knows where they are and can climb back a level. */
.g-crumbs{ padding: var(--s2) 0 0; }
.g-crumbs ol{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-family: var(--ui); font-size: 13px; color: var(--ink-faint);
}
.g-crumbs li + li::before{ content: '›'; margin-right: var(--s2); color: var(--line); }
.g-crumbs a, .g-crumbs [aria-current]{
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.g-crumbs a:hover{ border-bottom-color: var(--stone); }
.g-crumbs [aria-current]{ color: var(--blue-deep); }
.g.has-hero .g-crumbs{ padding-top: var(--s5); }

/* ==========================================================================
   COMPARE THE CHAMBRES
   SharkNinja's "Compare the Series" pattern. Seven rooms and no way to see
   them side by side — you had to open each in turn. Scrolls horizontally on
   a phone rather than shrinking past legibility.
   ========================================================================== */
.g-compare-wrap{
  overflow-x: auto; margin-top: var(--s6);
  -webkit-overflow-scrolling: touch;
  max-width: 100%; min-width: 0;
}
/* The wrapper's parent must also be allowed to shrink, or 100% resolves
   against the table's content width instead of the viewport. */
.g-compare-wrap, .g-compare-wrap *{ min-width: 0; }
.g-compare{ min-width: 40rem; }
.g-compare{ width: 100%; border-collapse: collapse; min-width: 40rem; }
.g-compare th, .g-compare td{
  text-align: left; padding: var(--s4) var(--s5) var(--s4) 0;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
.g-compare thead th{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--blue-deep); padding-bottom: var(--s3);
}
.g-compare tbody th{
  font-family: var(--display); font-weight: 400; font-size: 18px;
  letter-spacing: .012em; color: var(--blue-deep); white-space: nowrap;
}
.g-compare td{ font-size: 15px; color: var(--ink); }
.g-compare .g-fig{ font-size: 18px; }
.g-compare tbody tr:hover{ background: var(--white); }
/* Visually hidden, still read aloud. */
.g-vh{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   OVERFLOW CONTAINMENT — last line of defence
   Several components set a min-width for good reasons (a comparison table
   needs 40rem to stay legible; a photo strip needs its natural widths). Each
   is contained individually above, but a component added later will not be.
   This clips at the page level so nothing can ever widen the viewport, while
   scrollable children keep scrolling inside themselves.
   ========================================================================== */
html, body{ max-width: 100%; overflow-x: clip; }  /* 4 Oct: clip, not hidden - hidden makes body a scroll box and stops every position:sticky (the booking card) from sticking */
.g main, .g header, .g footer, .g section{ max-width: 100vw; }
.g .g-wrap, .g .g-wrap--narrow{ max-width: min(var(--wrap, 76rem), 100vw); }
@media (max-width: 34rem){
  .g .g-band{ grid-auto-columns: minmax(0, 1fr); }
  .g .g-band img{ max-width: 100%; }
}

/* Inline field errors. Quiet until they matter, then unmissable — but never
   before the guest has tried to submit once. */
.g-err{
  font-family: var(--ui); font-size: 13px; line-height: 1.4;
  color: #8A2B22; margin: var(--s2) 0 0;
}
.g-err[hidden]{ display: none; }
.g [aria-invalid="true"]{
  border-color: #8A2B22;
  box-shadow: inset 0 -2px 0 #8A2B22;
}
.g [aria-busy="true"]{ opacity: .72; cursor: progress; }

/* ==========================================================================
   PRINT
   Guests do print confirmations and statements — to carry, to claim on
   expenses, to hand to whoever is driving. Printed as it stands, a
   confirmation wastes two pages on navigation and a photo band before
   reaching the reference code.
   ========================================================================== */
@media print{
  .g-top, .g-navwrap, .g-panel-overlay, .g-nav, .g-navbtn,
  .g-totop, .g-skip, .g-assure, .g-band, .g-formhero, .g-fleur,
  .g-crumbs, .g-book-bar, .g-stickybar, .g-cta, video,
  .g-footer__grid, .g-crest--foot, .g-pay{ display: none !important; }

  html, body{ background: #fff !important; color: #000 !important; font-size: 12pt; }
  .g-sec{ padding: 0 0 12pt !important; }
  .g-wrap{ max-width: none !important; padding: 0 !important; }

  /* The reference code is the reason the page is being printed. */
  .g-conf, .g-mb-card, .g-framed{
    border: 1px solid #999 !important; padding: 10pt !important;
    background: #fff !important; break-inside: avoid;
  }
  .g-facts-list{ grid-template-columns: 1fr 1fr !important; }
  .g-display, .g-place, .g-h2{ font-size: 20pt !important; color: #000 !important; }

  /* A printed link to a token URL is useless unless the URL is visible. */
  .g-sharelink{ font-size: 9pt; border: 0 !important; padding: 0 !important; }
  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .g-btn::after{ content: none !important; }
  .g-btn{ border: 1px solid #999 !important; color: #000 !important; background: #fff !important; }

  h1, h2, h3{ break-after: avoid; }
  img{ max-width: 100% !important; break-inside: avoid; }
  @page{ margin: 15mm; }
}

/* ==========================================================================
   ENGRAVED DEVICES — second set
   Drawn from what is actually on the building and in the record: the iron
   gates, the fresco medallion, the coat of arms scratched off the beams in
   1793, and the mountain the house looks at. Line only, no fills.
   ========================================================================== */

/* A band of the château's own ironwork, repeated as a rule. */
.g-iron{
  height: 26px; width: 100%; color: var(--stone); opacity: .55;
  /* A single centred motif, not a repeating fence. The lines either side are
     drawn with borders so the ornament reads as a rule with a mark in it. */
  display: flex; align-items: center;
  background-repeat: no-repeat; background-position: center; background-size: auto 26px;
  margin: var(--s7) 0;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='26' fill='none' \
stroke='%238F8C78' stroke-width='1'>\
<path d='M0 13h60'/><path d='M15 13c0-5 4-8 8-8M45 13c0-5-4-8-8-8'/>\
<path d='M15 13c0 5 4 8 8 8M45 13c0 5-4 8-8 8'/><circle cx='30' cy='13' r='3'/>\
<path d='M30 4v4M30 18v4'/></svg>");
}

/* The medallion under the overpaint — used as a section mark. */
.g-medallion{ display:block; margin: var(--s6) auto; width: 46px; height: 46px; color: var(--stone); }

/* The mountain line, as a section foot. */
.g-ridge{ display:block; width: 100%; max-width: var(--m-tight); margin: var(--s6) auto 0; color: var(--line); }

/* An initial set as a printed capital in a ruled box. */
.g-versal::first-letter{
  font-family: var(--display); font-weight: 400; font-size: 3.1em;
  line-height: .78; float: left; margin: .08em var(--s4) 0 0;
  color: var(--blue-deep); border: 1px solid var(--line);
  padding: .12em .16em 0;
}

/* ==========================================================================
   CHAMBRE EMBLEMS
   Domaine des Etangs names its seven rooms after planets so each has an
   identity of its own. Gudanes already names its chambres — des Fleurs,
   Bleue, du Parc, Émeraude — but they were only words. Each now carries a
   drawn mark, matched to its name, engraved rather than illustrated.
   ========================================================================== */
.g-emblem{
  width: 34px; height: 34px; color: var(--stone); flex: none;
  display: block;
}
.g-room__head .g-emblem, .g-homeroom .g-emblem{ margin-bottom: var(--s3); }
/* The slide-out navigation panel was left at 12px throughout — its links,
   group headings, item labels and the feature caption. It is the primary way
   to move around the site on a phone, so it is the last place to be small.
   Only visible once the review harness rendered the real header. */
.g .g-navwrap a,
.g .g-navwrap__item,
.g .g-navwrap__group,
.g .g-navwrap__feature em,
.g .g-navwrap__legal a,
.g .g-navwrap span{
  font-size: 13px;
}
.g .g-navwrap__item{ font-size: 15px; }
.g .g-navwrap__group{ font-size: 13px; }

/* The sticky booking bar's title was 12px — it names the house on a bar that
   follows the guest down every page. */
.g .g-stickybar__t, .g .g-stickybar__t span, .g .g-stickybar__t b{ font-size: 13px; }
.g .g-stickybar__t b{ font-size: 15px; }

/* ==========================================================================
   ENGRAVED DEVICES — third set
   The fleuron was doing too much work. Two more marks so a long page has
   variety rather than the same lozenge four times.
   ========================================================================== */

/* A ruled band with a small centred lozenge — quieter than the fleuron,
   for separating two parts of the same idea. */
.g-hairs{
  display: flex; align-items: center; gap: var(--s5);
  margin: var(--s7) 0; color: var(--line);
}
.g-hairs::before, .g-hairs::after{ content:''; flex:1; height:1px; background: currentColor; }
.g-hairs i{
  width: 7px; height: 7px; flex: none; transform: rotate(45deg);
  border: 1px solid var(--stone); font-style: normal;
}

/* The key motif: the château's own silhouette, very small, as a closing mark. */
.g-house{ display:block; margin: var(--s6) auto 0; width: 64px; height: 30px; color: var(--stone); }

/* After a date search, say plainly what was searched and what came back.
   Previously the only acknowledgement was a raw ISO pair in a small note. */
.g-searched{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s6);
  background: var(--stone-pale); border: 1px solid var(--line);
  padding: var(--s4) var(--s5); margin: var(--s5) 0 0;
}
.g-searched__dates{ margin: 0; font-size: 18px; color: var(--blue-deep); }
.g-searched__dates strong{ font-family: var(--display); font-weight: 400; font-size: var(--t-lede); }
.g-searched__count{
  margin: 0; font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--stone);
}
.g-searched__clear{
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--ui); font-size: 13px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.g-searched__clear:hover{ border-bottom-color: var(--stone); }
@media (max-width: 34rem){ .g-searched__clear{ margin-left: 0; } }


/* ==========================================================================
   HEADER LEGIBILITY
   The header was transparent with white text over a dark hero, and relied on
   a scroll listener to switch. If that listener does not fire — and it did
   not on the live site — the wordmark and nav stay white over cream and the
   page content shows through. Solid by default; transparent only while
   genuinely over the hero.
   ========================================================================== */
.g .g-top{
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, border-color .2s ease;
}
/* Over the hero, at the very top only. */
.g.has-hero .g-top:not(.is-solid){ background: transparent; border-bottom-color: transparent; }

/* Where scroll-driven animations exist, drive it from CSS so no script is
   needed at all. */
/* The scroll-driven version was removed deliberately: it faded the background
   over 0–220px while the text colour only flipped at hero-height, leaving a
   band where white text sat on solid parchment. One class, both properties. */

/* ==========================================================================
   THE ATELIER GLOSS
   A word set as it would be in a printed glossary — the French, a phonetic
   line, the part of speech, and the English beneath a rule. Gives the page a
   moment of stillness and quietly teaches the word the programme uses.
   ========================================================================== */
.g-gloss{
  max-width: var(--m-tight); margin: var(--s7) auto; padding: var(--s6) var(--s5);
  border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone);
  text-align: center; position: relative;
}
.g-gloss__word{
  display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.05;
  letter-spacing: .012em; color: var(--blue-deep); margin: 0;
}
.g-gloss__say{
  display: block; font-family: var(--ui); font-size: 13px;
  letter-spacing: .06em; color: var(--stone); margin-top: var(--s2);
}
.g-gloss__pos{
  display: block; font-family: var(--display); font-style: italic;
  font-size: 15px; color: var(--ink-faint); margin-top: var(--s3);
}
.g-gloss__rule{
  width: 44px; height: 1px; background: var(--stone);
  margin: var(--s4) auto; border: 0;
}
.g-gloss__en{
  display: block; font-size: 18px; line-height: 1.55; color: var(--ink);
  margin: 0 auto; max-width: var(--m-tight);
}
.g-gloss__en b{ font-weight: 500; color: var(--blue-deep); }
/* A small mark in each upper corner, as a printed entry would carry. */
.g-gloss::before, .g-gloss::after{
  content: '·'; position: absolute; top: var(--s3);
  color: var(--stone); font-size: var(--t-lede); line-height: 1;
}
.g-gloss::before{ left: var(--s5); }
.g-gloss::after{ right: var(--s5); }

/* Room card image. Every card had none, because the template only rendered
   one when a photo had been uploaded and none had been. */
.g .g-card__img{
  width: 100%; height: clamp(11rem, 18vw, 15rem);
  object-fit: cover; display: block;
}

/* Workshop card image — one card in five rendered without any picture. */
.g .g-wscard__img{
  width: 100%; height: clamp(10rem, 15vw, 13rem);
  object-fit: cover; display: block;
}

/* ==========================================================================
   WHAT THE PRICE INCLUDES
   The commonest reason a luxury booking is abandoned is uncertainty about
   what the number covers. Set as a ledger — included on the left, not
   included on the right — so nothing is discovered at checkout.
   ========================================================================== */
.g-ledger{
  display: grid; gap: var(--s6); margin-top: var(--s6);
  border-top: 1px solid var(--stone);
}
@media (min-width: 46rem){ .g-ledger{ grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.g-ledger__col{ padding-top: var(--s5); }
.g-ledger__h{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 var(--s4);
  display: flex; align-items: center; gap: var(--s3);
}
.g-ledger__h svg{ width: 15px; height: 15px; flex: none; }
.g-ledger ul{ list-style: none; margin: 0; padding: 0; }
.g-ledger li{
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.5; display: flex; gap: var(--s4);
}
.g-ledger li::before{ content: ''; flex: none; width: 0; }
.g-ledger--in li b{ font-weight: 500; color: var(--blue-deep); }
.g-ledger--out li{ color: var(--ink-soft); }
.g-ledger__note{
  grid-column: 1 / -1; margin: var(--s3) 0 0;
  font-size: 15px; color: var(--ink-soft);
}


/* The step heading sits beside its numeral rather than wrapping under it. */
.g .g-step__h{ display: flex; align-items: center; gap: 0; }
.g .g-step{ position: relative; }
/* A hairline runs from one step to the next, so the sequence reads as a
   sequence rather than three unrelated boxes. */
.g .g-step + .g-step::before{
  content: ''; position: absolute; left: 19px; top: calc(var(--s7) * -1);
  width: 1px; height: var(--s7); background: var(--line);
}


/* The header must never wrap to a second row — the row of eight, the panel
   toggle and Book together were exceeding the width at 1440. */
.g .g-top__in{ flex-wrap: nowrap; min-height: 85px; }
.g .g-logo{ flex: none; }
/* Below 84rem the eight-item row is the first thing to go; the panel keeps
   every destination anyway. */
@media (max-width: 84rem){
  .g .g-nav{ display: none; }
  .g .g-navbtn{ margin-left: auto; }
}

/* ==========================================================================
   THE MONOGRAM AND THE WALLPAPER
   Two things the château already owns and the site was not using: the G in
   its laurel from the crest, and the floral paper on the walls of Chambre
   des Fleurs. Both drawn as line, both kept faint — a ground to read on,
   never a pattern that competes with the words.
   ========================================================================== */

/* The G, in laurel. Drawn rather than the logo file so it scales, takes any
   colour, and never fails to load. */
.g-monogram{ display: block; margin: 0 auto; width: 62px; height: 62px; color: var(--stone); }
/* The wallpaper — a damask repeat taken from the paper in the Chambre des
   Fleurs, at 4% so it reads as texture rather than decoration. */
.g-paper{ position: relative; isolation: isolate; }
.g-paper::before{
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='160' fill='none' stroke='%23183456' stroke-width='1.1'>\
<path d='M60 12c-7 9-11 16-11 23s4 12 11 19c7-7 11-12 11-19s-4-14-11-23z'/>\
<path d='M38 40c8-5 15-7 22-7s14 2 22 7M38 40c8 5 15 7 22 7s14-2 22-7'/>\
<circle cx='60' cy='40' r='3'/>\
<path d='M60 54v26M46 66c5-4 9-6 14-6M74 66c-5-4-9-6-14-6'/>\
<path d='M0 92c7 9 11 16 11 23s-4 12-11 19M120 92c-7 9-11 16-11 23s4 12 11 19'/>\
<path d='M0 120h18M102 120h18'/><circle cx='0' cy='120' r='3'/><circle cx='120' cy='120' r='3'/>\
</svg>");
  background-size: 190px 254px;
}
/* Colour. The palette was navy, stone and parchment and almost nothing else.
   These are drawn from the building: the gilt on the fresco medallion, the
   Virginia creeper on the gates, and the verdigris of the copper. Used for
   accents only — a rule, a mark, a hover — never a surface. */
:root{
  --gilt:      #73562D;   /* clears AA on sand, parchment and card alike */   /* clears AA on sand too — #73562D was 3.96:1 there */   /* gold for text — 4.4:1 on parchment, passes AA */
  --gilt-leaf: #B08D57;   /* the true leaf colour — marks, and text on navy */
  --creeper:   #8C3A2B;   /* the Virginia creeper on the gates    */
  --verdigris: #5F7A6E;   /* aged copper from the kitchen         */
}
/* Every hero now offers the next step. Six pages opened with a heading, a
   sentence and nothing to act on — a guest had to scroll to find out how. */
.g-hero__cta{ margin: var(--s6) 0 0; }
.g.has-hero .g-hero__cta .g-btn--solid{
  background: var(--sand); color: var(--blue-deep); border-color: var(--sand);
}
.g.has-hero .g-hero__cta .g-btn--solid:hover{
  background: var(--gilt); border-color: var(--gilt); color: var(--blue-deep);
}

/* Pages without a hero open straight into content — the action still needs
   to sit with the title rather than below a screen of text. */
.g-roomtop__cta{ margin: var(--s5) 0 var(--s6); }

/* ==========================================================================
   BY THE NUMBERS
   The château's real figures — 94 rooms, five floors, 43,000 sq ft — were
   only ever mentioned in passing prose. Set as engraved figures they carry
   the scale that a photograph cannot.
   ========================================================================== */
.g-figures{
  display: grid; gap: var(--s6) var(--s7); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-top: 1px solid var(--line); padding-top: var(--s6);
}
.g-figure b{
  display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: 1;
  letter-spacing: .012em; color: var(--blue-deep);
}
.g-figure span{
  display: block; margin-top: var(--s3);
  font-family: var(--ui); font-size: 13px; line-height: 1.45;
  letter-spacing: .06em; color: var(--ink-soft);
}

/* ==========================================================================
   THE CLOSE
   Seven pages ran out with nothing to do — a guest reached the bottom and
   had only the footer. Each page now ends by offering the obvious next move,
   set quietly on navy so it reads as a full stop rather than another pitch.
   ========================================================================== */
.g-close{ background: var(--blue-deep); color: #fff; }
.g-close .g-wrap{ text-align: center; }
/* The real wordmark, white on navy — no mask or filter needed here. */
.g-close__mark{
  display: block; margin: 0 auto var(--s6);
  width: auto; height: 62px; opacity: .8;
}
.g-close__h{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); line-height: 1.12;
  letter-spacing: .012em; color: #fff; margin: 0 0 var(--s4);
}
.g-close__p{ font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: var(--m-read); margin: 0 auto var(--s6); }
.g-close__acts{ display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.g .g-close__acts .g-btn{ border-color: rgba(255,255,255,.5); color: #fff; }
.g .g-close__acts .g-btn--solid{ background: var(--sand); color: var(--blue-deep); border-color: var(--sand); }
.g .g-close__acts .g-btn:hover{ background: var(--gilt); border-color: var(--gilt); color: var(--blue-deep); }
@media (max-width: 34rem){ .g .g-close__acts .g-btn{ width: 100%; } }

/* ==========================================================================
   GOLD
   The gilding is on the medallion, the mirror frames and the salon mouldings
   — it belongs on the site too. Used the way a gilder uses it: on the line,
   the mark and the moment of emphasis, never on a surface. A château is
   stone and plaster with gold in the details, not a gold building.
   ========================================================================== */

/* The devices take gilt rather than stone — they are the drawn ornament, and
   ornament in this building is gilded. */
.g .g-fleur, .g .g-medallion, .g .g-monogram,
.g .g-house, .g .g-hairs i, .g .g-orn svg{ color: var(--gilt-leaf); }
.g .g-iron{ color: var(--gilt-leaf); opacity: .42; }

/* A gilt hairline above a section eyebrow — the way a plate is ruled. */
.g-eyebrow{ position: relative; }
.g-sec .g-wrap > .g-eyebrow::before,
.g-sec .g-two > div > .g-eyebrow::before{
  content: ''; display: block; width: 26px; height: 1px;
  background: var(--gilt); margin-bottom: var(--s3);
}

/* Figures — prices, room counts, the scale panel — set in gilt so the number
   carries rather than the label. */
.g .g-fig{ color: var(--gilt); }
.g .g-figure b{ color: var(--gilt); }
.g .g-score b{ color: var(--gilt); }
.g .g-timeline b{ color: var(--gilt); }
.g .g-num{ border-color: var(--gilt); color: var(--gilt); }

/* Rules that separate rather than divide. */
.g .g-rule--double{ border-top-color: var(--gilt); border-bottom-color: var(--gilt); opacity: .55; }
.g .g-gloss{ border-top-color: var(--gilt); border-bottom-color: var(--gilt); }
.g .g-gloss__rule{ background: var(--gilt); }
.g .g-gloss::before, .g .g-gloss::after{ color: var(--gilt); }

/* The engraved corner ticks on cards and plates. */
.g .g-plate-edge::before, .g .g-plate-edge::after,
.g .g-corners::before, .g .g-corners::after{ border-color: var(--gilt); }

/* Interaction: gold is what happens when you touch something. */
.g .g-btn:not(.g-btn--solid):hover{ border-color: var(--gilt); color: var(--gilt); }
.g .g-nav a:hover, .g .g-nav a.is-on{ border-bottom-color: var(--gilt); }
.g .g-crumbs a:hover{ border-bottom-color: var(--gilt); }
.g .g-card:hover, .g .g-sit:hover, .g .g-wscard:hover{ border-color: var(--gilt); }
.g a:focus-visible, .g button:focus-visible,
.g input:focus-visible, .g select:focus-visible, .g textarea:focus-visible{
  outline: 2px solid var(--gilt); outline-offset: 3px;
}

/* On navy the same gold, lifted so it reads against the dark. */

/* On navy the leaf colour reaches 4.08:1 — the readable gold would not. */
.g .g-footer h2, .g-footer h4, .g .g-testament__by{ color: var(--gilt-leaf); }
.g .g-footer h2, .g-footer h4{ color: var(--gilt); }
.g .g-testament__by{ color: var(--gilt); }

/* The drop capital and the versal — a gilded initial is the oldest use of
   gold on a page there is. */
.g .g-drop-cap::first-letter, .g .g-versal::first-letter{ color: var(--gilt); }
.g .g-versal::first-letter{ border-color: var(--gilt); }

/* Prices are set in several different ways across the templates — .g-fig, a
   bare <b> in a rate line, the compare table. All of them are the number a
   guest is deciding on, so all of them take the gilt. */
.g .g-card__rate b,
.g .g-room__rate b,
.g .g-homeroom__rate b,
.g .g-wscard__price b,
.g .g-sit__rate .g-fig,
.g .g-compare .g-fig,
.g .g-ledger .g-fig{ color: var(--gilt); }


/* The hero video was centre-cropped, which put the gates across the frame and
   the château small in the middle. Biasing the crop upward keeps the building
   in view at every aspect ratio. */
.g .g-hero video, .g .g-hero__media video, .g .g-hero img{
  object-position: center 32%;
}
@media (max-width: 34rem){
  .g .g-hero video, .g .g-hero__media video, .g .g-hero img{ object-position: center 28%; }
}

/* ==========================================================================
   THE HERO, REBUILT
   It held a twelve-word headline at 76px, a thirty-four word paragraph and a
   form, all ranged left — busy and plain at the same time. Centred, with the
   name alone as the title, one line beneath it, and the photograph doing the
   work. The type comes down; the composition does more.
   ========================================================================== */
.g .g-hero__in{
  text-align: center;
  max-width: 54rem; margin-inline: auto;
  padding-inline: var(--s5);
}
.g .g-hero__eyebrow{
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.82); margin: 0 0 var(--s5);
}
.g .g-hero__title{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-hero); line-height: 1;
  letter-spacing: .015em; color: #fff; margin: 0;
  text-shadow: 0 1px 30px rgba(12,26,44,.4);
}
/* A gilt rule beneath the name, the way a plate is ruled. */
.g .g-hero__title::after{
  content: ''; display: block; width: 64px; height: 1px;
  background: var(--gilt-leaf); opacity: .85;
  margin: var(--s6) auto 0;
}
.g .g-hero__lede{
  font-size: var(--t-lede); line-height: 1.65;
  color: rgba(255,255,255,.9); max-width: var(--m-tight);
  margin: var(--s5) auto 0; text-shadow: 0 1px 20px rgba(12,26,44,.45);
}
/* The search sits centred beneath, and stops looking like a plain box. */
.g .g-herosearch{
  margin: var(--s7) auto 0; max-width: var(--m-read);
  border: 1px solid rgba(246,241,231,.5);
  box-shadow: 0 18px 50px rgba(12,26,44,.28);
}
@media (max-width: 34rem){
  .g .g-hero__eyebrow{ letter-spacing: .18em; font-size: 13px; }
  .g .g-hero__title::after{ margin-top: var(--s5); }
}

/* ==========================================================================
   ONE CARD FAMILY
   The workshops page carries two card systems — .g-wscard for the ateliers
   and .g-sit for the bookable dates. They do different jobs, but they were
   drawn differently enough to look like a mistake. Same frame, same rhythm,
   same gilt on hover; the difference is the content, not the styling.
   ========================================================================== */
.g .g-wscard, .g .g-sit, .g .g-card{
  background: var(--white);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: border-color .18s ease;
}
.g .g-wscard__img, .g .g-sit__img, .g .g-card__img{
  width: 100%; height: clamp(10rem, 15vw, 13rem);
  object-fit: cover; display: block; flex: none;
}
/* The label above the name: same size, same tracking, same colour. */
.g .g-wscard__len, .g .g-sit__name{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone); margin: 0 0 var(--s3);
}
/* The line that carries the dates. */
.g .g-wscard__name, .g .g-sit__when{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h3); line-height: 1.15;
  letter-spacing: .012em; color: var(--blue-deep); margin: 0 0 var(--s3);
}
/* Prices sit at the same place in both. */
.g .g-wscard__price, .g .g-sit__rate{ margin: auto 0 var(--s5); }
/* The action fills the width in both. */
.g .g-wscard__foot .g-btn, .g .g-sit .g-btn{ width: 100%; }

/* The hero CTA was added before the hero became centred, so it still ranged
   left under centred type. */
.g .g-hero__cta{ text-align: center; }

/* On a hero page main has padding-top:0 so the hero can run under the fixed
   header — which sent the breadcrumb under it too, colliding with the logo.
   The trail is only ever above the hero on pages without one; on hero pages
   it sits below, where it belongs. */
/* main already pads 84px for the fixed header on pages without a hero, so
   the crumb needs no extra clearance there. On hero pages main pads 0 — the
   hero runs under the header — so the crumb must clear it itself. */
.g.has-hero .g-crumbs{ padding-top: calc(86px + 2px); padding-bottom: var(--s2); }
.g:not(.has-hero) .g-crumbs{ padding-top: var(--s3); }


/* The line either side of the single ironwork motif. */
.g-iron::before, .g-iron::after{
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.g-iron::before{ margin-right: 78px; }
.g-iron::after{ margin-left: 78px; }

/* ==========================================================================
   LAYOUT STABILITY
   126 images across the site had no reserved space, so every one shifted the
   page as it loaded — text jumping under the reader's eye on a slow
   connection. Each image class already has a fixed height in CSS; declaring
   an aspect-ratio as well lets the browser reserve the box before the file
   arrives, which is what actually stops the shift.
   ========================================================================== */
.g .g-card__img, .g .g-wscard__img, .g .g-sit__img{ aspect-ratio: 3 / 2; height: auto; }
.g .g-band img{ aspect-ratio: 4 / 3; height: auto; }
.g .g-two__media img{ aspect-ratio: 4 / 3; }
.g .g-half__img{ aspect-ratio: 3 / 2; height: auto; }
.g .g-formhero{ aspect-ratio: 21 / 9; object-fit: cover; }
.g .g-incl-card img{ aspect-ratio: 3 / 2; }
.g .g-gallery img, .g .g-grid img{ aspect-ratio: 3 / 2; }
/* A hero fills its section, so its ratio comes from the section not the file. */
.g .g-hero video, .g .g-hero img{ aspect-ratio: auto; }

/* ==========================================================================
   GOLD, PROPERLY PRESENT
   Gold was defined and used on prices and the drawn marks only — about
   twenty elements on a long page, which is not enough to read as a colour in
   the scheme. It now carries every rule, every eyebrow, the section heads and
   the navy panels, which is where a château actually gilds: the line, the
   capital, the edge. Still never a surface.
   ========================================================================== */

/* Every eyebrow gets its gilt rule, not just those in a .g-wrap. */
.g .g-eyebrow{ color: var(--gilt); }
.g .g-eyebrow::before{
  content: ''; display: block; width: 26px; height: 1px;
  background: var(--gilt); margin-bottom: var(--s3);
}
.g .g-hero__eyebrow{ color: rgba(214,196,164,.95); }
.g .g-hero__eyebrow::before{ display: none; }

/* Section headings sit above a gilt hairline rather than a grey one. */
.g .g-place{ padding-bottom: var(--s4); border-bottom: 1px solid var(--gilt); }
.g .g-place + .g-p{ margin-top: var(--s5); }

/* Every plain rule on the site. */
.g hr, .g .g-rule{ border: 0; border-top: 1px solid var(--gilt); opacity: .55; }
.g .g-facts-list dt{ color: var(--gilt); }
.g .g-compare thead th{ border-bottom-color: var(--gilt); }
.g .g-ledger{ border-top-color: var(--gilt); }
.g .g-ledger__h{ color: var(--gilt); }
.g .g-searched{ border-color: var(--gilt); }

/* On navy, gold is the only other colour — so it does the separating. */
.g .g-close__h::after{
  content: ''; display: block; width: 54px; height: 1px;
  background: var(--gilt-leaf); margin: var(--s5) auto 0;
}
.g .g-footer h2, .g-footer h4{ color: var(--gilt-leaf); }
.g .g-pay__marks li{ border-color: rgba(176,141,87,.55); color: rgba(214,196,164,.95); }
.g .g-panel-quote, .g .g-quote-band__t{ color: rgba(214,196,164,.95); }

/* The solid button takes a gilt edge, so the primary action is gold-framed. */
.g .g-btn--solid{ border-color: var(--gilt); }
.g .g-btn--solid:hover{ background: var(--gilt); border-color: var(--gilt); color: #fff; }

/* The motto. It was never a weak line — it was appended to the château's name
   at 76px and wrapped over two, which is what made it read as filler. On its
   own line beneath the gilt rule, in italic at a quieter size, it becomes a
   statement instead of a suffix. */
.g .g-hero__motto{
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: var(--t-h2); line-height: 1.25;
  letter-spacing: .02em; color: rgba(255,255,255,.95);
  margin: var(--s5) 0 0; text-shadow: 0 1px 24px rgba(10,22,40,.45);
}
/* With the motto present the lede steps back, so the two do not compete. */
.g .g-hero__motto + .g-hero__lede{
  font-size: var(--t-base);
  color: rgba(255,255,255,.82);
  margin-top: var(--s4);
}

/* Room feature tags. The markup existed but never rendered, because the
   amenities column is empty on every room. Set as small ruled pills — the
   facts a guest scans for before reading a word of description. */
.g .g-tags{
  list-style: none; margin: var(--s4) 0 var(--s5); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.g .g-tags li{
  font-family: var(--ui); font-size: var(--t-small); line-height: 1;
  color: var(--blue-deep); background: var(--sand-2);
  border: 1px solid var(--gilt); border-radius: 999px;
  padding: 7px var(--s3);
}


/* A device placed in a bare .g-wrap at the end of a page — the closing ridge
   and hairline — had no section padding to sit inside, so its top margin
   opened a 300px void above the footer. Give the wrapper its own measured
   space and take the margin off the device. */
main > .g-wrap:last-of-type{ padding-block: var(--s6) var(--s7); }
main > .g-wrap > .g-ridge,
main > .g-wrap > .g-hairs{ margin-top: 0; margin-bottom: 0; }

/* ==========================================================================
   FAQ
   The questions a guest asks before booking were scattered through prose or
   absent — is there a lift, can I bring a dog, how do I get there without a
   car. Set as ruled entries that open, so the page stays short and the
   answers are one tap away.
   ========================================================================== */
.g-faq{ margin-top: var(--s6); border-top: 1px solid var(--gilt); }
.g-faq details{ border-bottom: 1px solid var(--line); }
.g-faq summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s4) 0; min-height: 44px;
  font-family: var(--display); font-weight: 400; font-size: 18px;
  letter-spacing: .012em; color: var(--blue-deep);
}
.g-faq summary::-webkit-details-marker{ display: none; }
.g-faq summary::after{
  content: ''; flex: none; width: 11px; height: 11px;
  border-right: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt);
  transform: rotate(45deg) translateY(-3px); transition: transform .18s ease;
}
.g-faq details[open] summary::after{ transform: rotate(225deg) translateY(-3px); }
.g-faq summary:hover{ color: var(--gilt); }
.g-faq__a{ padding: 0 0 var(--s5); margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: var(--m-read); }
.g-faq__a a{ color: var(--blue-deep); border-bottom: 1px solid var(--gilt); }

/* Any <summary> is a control a guest taps, not a line of text. The FAQ ones
   were given height; this catches every other disclosure on the site. */
.g summary{
  min-height: 44px; display: flex; align-items: center;
  cursor: pointer; list-style: none;
}
.g summary::-webkit-details-marker{ display: none; }

/* ==========================================================================
   LINING FIGURES
   Cormorant Garamond defaults to oldstyle figures, where 1 is barely taller
   than x-height and 0 is a small oval — so "10" reads as "IO" and "€450" as
   "€45O". Every number on the site is a fact a guest is deciding on; none of
   them can be ambiguous. Lining figures everywhere numbers appear.
   ========================================================================== */
.g .g-fig, .g .g-figure b, .g .g-score b, .g .g-scores b,
.g .g-num, .g .g-card__rate, .g .g-room__rate, .g .g-homeroom__rate,
.g .g-wscard__price, .g .g-sit__rate, .g .g-compare td, .g .g-compare th,
.g .g-hero__eyebrow, .g .g-facts-list dd, .g .g-tags li,
.g .g-mb-dd, .g .g-timeline b, .g .g-gloss__say,
.g table, .g time, .g .g-sit__when, .g .g-wscard__name{
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
/* Prose keeps oldstyle — a date inside a sentence should sit in the line,
   not stand out of it. Only figures being compared need lining. */

/* ==========================================================================
   MOBILE HERO
   The hero began at -9px — above the viewport, running under the fixed
   header — so the title collided with the logo, the Book button and the menu
   toggle. It needs to clear the header on a short screen rather than centre
   itself in a box taller than the space available.
   ========================================================================== */
@media (max-width: 34rem){
  /* 88svh, not 100 — a full-height hero puts the first button 46px below the
     fold, so a guest sees nothing to act on until they scroll. The gap also
     signals there is more page below. */
  .g .g-hero{ min-height: 88svh; }
  .g .g-hero__in{
    padding-top: var(--s6);
    padding-bottom: var(--s6);
  }
  /* The homepage hero carries a search panel and needs the room for it, but
     it must never start above the header — that was the original mobile bug.
     Give it height instead of pulling the content up. */
  /* A hero must never centre content taller than itself — that pushes the
     title above the viewport and under the fixed header. Let it grow. */
  /* The homepage hero carries a search panel that makes its content taller
     than a small phone screen. .g-hero__in is absolutely centred, so when the
     content overflows, the offset goes negative and the title lands under the
     fixed header. Removing the viewport cap lets the hero grow to fit. */
  /* The homepage hero's content is absolutely centred over the image. When
     the search panel makes that content taller than the image, the centring
     offset goes negative and the title is pushed under the fixed header.
     Anchoring to the top instead of the centre is the whole fix — the image
     grows to match rather than the text escaping. */
  .g .g-hero:has(.g-herosearch) .g-hero__in{
    top: 0; transform: none;
    padding-top: calc(86px + var(--s4)); padding-bottom: var(--s6);
  }
  .g .g-hero:has(.g-herosearch) .g-hero__img{ height: 100%; min-height: 34rem; }
  /* Only the homepage hero must clear the fixed header, because only it
     starts its content at the top rather than centred. */
  .g .g-hero:has(.g-herosearch) .g-hero__in{
    padding-top: calc(86px + var(--s4));
    padding-bottom: var(--s7);
  }
  .g .g-hero__title{ font-size: var(--t-h2); }
  .g .g-hero__motto{ font-size: var(--t-lede); }
  .g .g-hero__lede{ font-size: 15px; }
  .g .g-herosearch{ margin-top: var(--s5); }
}

/* ==========================================================================
   EXTRAS
   These were one-line stubs — "Yoga: on-site sessions" told a guest nothing
   they could decide on. Now full entries with a photograph, so they read as
   things worth doing rather than a list of upsells.
   ========================================================================== */
.g-extras{ display: grid; gap: var(--s6); }
@media (min-width: 52rem){ .g-extras{ grid-template-columns: 1fr 1fr; gap: var(--s7) var(--s6); } }
.g-extra{
  background: var(--white); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: border-color .18s ease;
}
.g-extra:hover{ border-color: var(--gilt); }
.g-extra img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.g-extra__b{ padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.g-extra__k{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gilt); margin: 0 0 var(--s2);
}
.g-extra__t{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h3); line-height: 1.15;
  letter-spacing: .012em; color: var(--blue-deep); margin: 0 0 var(--s3);
}
.g-extra__d{ font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 var(--s4); }
.g-extra__p{
  margin: auto 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-family: var(--ui); font-size: 15px; color: var(--ink-soft);
}


/* ==========================================================================
   SECTION RHYTHM
   Every section padded 84px top and bottom, so two adjacent ones left 168px
   between them — a fifth of a screen of empty space, which is what makes the
   long pages feel loose. Where the ground does not change, the pair share the
   space instead of stacking it.
   ========================================================================== */
/* A plain section on the page ground gives up half its bottom padding; the
   next section's top padding supplies the space. Sections that change ground
   — sand, wallpaper, navy — keep the full measure both sides, because there
   the padding is what separates the colours. */
.g-sec:not(.g-sec--sand):not(.g-paper):not(.g-close):not(.g-sec--flush){
  padding-bottom: clamp(24px, 3vw, 40px);
}
/* The last section before the footer needs its space back. */
main > .g-sec:last-of-type{ padding-bottom: clamp(48px, 6vw, 84px); }
/* A change of ground is a deliberate break, so it keeps the full measure. */
.g-sec + .g-sec--sand,
.g-sec--sand + .g-sec,
.g-sec + .g-paper,
.g-paper + .g-sec,
.g-sec + .g-close,
.g-band + .g-sec{ padding-top: clamp(48px, 6vw, 84px); }
/* And a section that follows a full-bleed image needs its own space back. */
.g-band + .g-sec, .g-formhero + .g-sec{ padding-top: clamp(48px, 6vw, 84px); }

/* ==========================================================================
   THE TYPE SCALE
   Fifteen distinct sizes were in use on one page, with four near-identical
   card titles (22 / 23 / 24 / 26) and two heading sizes (42 / 44) doing the
   same job. Sizes that differ by a point or two do not read as a hierarchy —
   they read as an accident. Collapsed to seven steps.

     13   labels, eyebrows, hints, table heads
     15   buttons, links, secondary detail
     16   card and list body
     18   prose
     24   card titles  ← was 22 / 23 / 24 / 26
     42   section headings  ← was 42 / 44
     88   the page title
   ========================================================================== */
.g .g-incl-card__t,
.g .g-say__q,
.g .g-card__name,
.g .g-extra__t,
.g .g-wscard__name,
.g .g-sit__when,
.g .g-homeroom__name{ font-size: var(--t-h3); line-height: 1.18; }

.g .g-h2, .g .g-place, .g .g-close__h{
  font-size: var(--t-h2); line-height: 1.1;
}
/* Summary sat alone at 19px between the 18 of prose and the 20 of a card
   title, which is a step nobody can perceive. */
.g .g-faq summary{ font-size: 18px; }
/* And the close paragraph at 17 was one point off the 18 of every other
   paragraph on the site. */
.g .g-close__p{ font-size: 18px; }

/* The last strays. The hero keeps its own scale — a title page is allowed to
   be different — but these were components inventing sizes one or two points
   from an existing step, which reads as drift rather than hierarchy. */
.g .g-chip, .g .g-wscard__dates{ font-size: 15px; }   /* was 14 */
.g .g-quote-band__t{ font-size: var(--t-h2); }
.g .g-gloss__word{ font-size: var(--t-h2); }  /* was 44 */

/* The genuine last three. Each was a component setting 14 or 17px where 15
   and 18 already existed for the same job. */
.g .g-sit__meta{ font-size: 15px; }
.g .g-wscard__price span, .g .g-sit__rate span, .g .g-card__rate span,
.g .g-room__rate span, .g .g-homeroom__rate span{ font-size: 15px; }
.g .g-hero__lede b, .g .g-p b{ font-size: inherit; }

/* ==========================================================================
   MEASURE
   Body text ran to 92 characters a line on a desktop screen. Comfortable
   reading is 45–75; past about 80 the eye loses its place coming back to the
   left margin, which is why long-form pages felt like work. 66ch sits in the
   middle and scales with the type rather than being a pixel guess.
   ========================================================================== */
/* 52ch in Garamond measures about 68 real characters — `ch` is the width of
   a zero, which is narrower than the average letter, so the unit understates
   the true line length by roughly a third. */
.g .g-p, .g .g-faq__a, .g .g-extra__d, .g .g-card__desc,
.g .g-close__p, .g .g-ledger li, .g .g-facts-list dd{ max-width: var(--m-wide); }
/* Centred text centres its measure too. */
/* Centre the measure only where the text is itself centred. Left-aligned
   prose starts at the container's edge — a centred 468px column inside a
   1216px wrap reads as a ribbon lost in a field. */
.g .g-hero__lede, .g .g-close__p, .g [style*="text-align:center"] .g-p{ margin-inline: auto; }
.g .g-sec .g-wrap > .g-p,
.g .g-sec .g-wrap > .g-lede{ margin-left: 0; margin-right: 0; }
/* In a two-column layout the column is already the measure. */
/* A grid column is not a measure — at 1440 each column is 600px, which is
   still 87 characters. Cap it, but let it fill a narrow column. */
.g .g-two .g-p, .g .g-half__text .g-p{ max-width: min(100%, 52ch); }

/* The hint and note classes had no measure at all, so a footnote about the
   Monuments Historiques reference ran 180 characters across a desktop screen
   — longer than any body paragraph on the page. */
.g .g-hint, .g .g-ledger__note, .g .g-book-bar__note,
.g .g-foot-note, .g .g-searched__count{ max-width: var(--m-wide); }

/* .g-field and .g-room__note had no measure at all — a form hint ran 100
   characters across a desktop screen. */
.g .g-field, .g .g-room__note, .g .g-lede{ max-width: var(--m-wide); }
.g .g-field input, .g .g-field select, .g .g-field textarea{ max-width: 100%; }

/* The essence block is centred, so its measure is centred too. */
/* The measure belongs to the container, not to a column floating inside it.
   Constraining only the paragraph left 350px of dead space on each side. */
.g .g-wrap--narrow{ max-width: var(--m-read); margin-inline: auto; }
.g .g-wrap--narrow .g-p{ max-width: none; margin-inline: 0; }

/* A figure with its caption. Used where a photograph is making an argument
   rather than decorating — the caption is the point, not an afterthought. */
.g-fig-block{ margin: 0; }
.g-fig-block img{
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  display: block; border: 1px solid var(--line);
}
.g-fig-block figcaption{
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--gilt);
  font-size: 15px; line-height: 1.55; color: var(--ink-soft);
  max-width: var(--m-read);
}

/* ==========================================================================
   PULL QUOTE
   The one device that breaks a long column and carries meaning at the same
   time. Set large, in the display face, with a gilt rule above — the way a
   printed book marks a passage worth stopping at.
   ========================================================================== */
.g-pull{
  margin: var(--s7) 0; padding-top: var(--s5);
  border-top: 1px solid var(--gilt);
  max-width: var(--m-tight);
}
.g-pull p{
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: var(--t-h2); line-height: 1.2;
  letter-spacing: .012em; color: var(--blue-deep); margin: 0;
}
.g-pull cite{
  display: block; margin-top: var(--s4);
  font-family: var(--ui); font-style: normal; font-size: 15px;
  line-height: 1.5; color: var(--ink-soft);
}
@media (min-width: 60rem){
  /* Set into the margin so the column reads around it, as a book would. */
  .g-pull{ float: right; width: 30%; margin: var(--s5) 0 var(--s6) var(--s7); }
}

/* ==========================================================================
   MORE GOLD
   Present but unevenly — 11% of elements on the homepage against 26% on the
   estate page. Gold should read as the house metal on every page, not as
   something that happens where a section was written recently. These are the
   remaining places a gilder would actually work: the frame, the initial, the
   marker, the edge of a plate.
   ========================================================================== */

/* Card and figure frames take a gilt hairline at the top — the way a mounted
   plate is ruled above the image. */
.g .g-card, .g .g-wscard, .g .g-sit, .g .g-extra, .g .g-incl-card{
  border-top: 2px solid var(--gilt);
}
.g .g-band img, .g .g-two__media img, .g .g-fig-block img{ border-color: var(--gilt); }

/* The drop capital and versal, which were only on two pages. */
.g .g-lede-first::first-letter{
  float: left; font-family: var(--display); font-weight: 300;
  font-size: 3.4em; line-height: .82; margin: .06em .1em 0 0;
  color: var(--gilt);
}

/* Numerals in the step sequence, and any ordered list a guest follows. */
.g main ol > li::marker{ color: var(--gilt); font-weight: 600; }
.g .g-num{ background: transparent; }

/* The breadcrumb separator and the current page marker. */
.g .g-crumbs li + li::before{ color: var(--gilt); }

/* Field labels on the booking forms — the one place a guest is working. */
.g .g-field label, .g .g-mb-dt{ color: var(--gilt); }

/* Table rules, so a comparison reads as a printed table rather than a grid. */
.g .g-compare th, .g .g-compare td{ border-bottom-color: rgba(140,106,56,.28); }
.g .g-compare tbody tr:first-child td{ border-top-color: var(--gilt); }

/* The quote mark on a testimonial, and the attribution rule. */
.g .g-say__q::before, .g .g-quote::before{ color: var(--gilt-leaf); }
.g .g-say__by, .g .g-testament__by{ color: var(--gilt); }

/* On navy: the search field edges and the reassurance row dividers. */
.g .g-herosearch{ border-color: rgba(176,141,87,.55); }
.g .g-herosearch__f + .g-herosearch__f{ border-left-color: rgba(140,106,56,.3); }
.g .g-assure__grid li + li{ border-left-color: rgba(176,141,87,.3); }

/* The footer heads and the top rule above it. */
.g .g-footer{ border-top: 2px solid var(--gilt); }

/* ==========================================================================
   INK ON DARK
   --ink-faint and --ink-soft are tuned for parchment. On the navy summary
   panel and the close blocks they land at 2.38:1 — a label nobody can read
   on the one panel a guest checks before paying. Light grounds keep the dark
   inks; dark grounds get their own.
   ========================================================================== */
.g .g-dossier dt, .g .g-dossier__l dt, .g .g-dossier .g-hint,
.g .g-close dt, .g .g-close .g-hint, .g .g-close .g-foot-note{
  color: rgba(214, 196, 164, .95);
}
.g .g-dossier dd, .g .g-dossier__l dd{ color: #fff; }


/* The last of the contrast failures. All at 13px and all narrowly under 4.5,
   which at that size is exactly where it matters most. */
.g .g-hint, .g .g-foot-note, .g .g-ledger__note,
.g .g-card__rate span, .g .g-sit__rate span, .g .g-wscard__price span,
.g .g-room__rate span, .g .g-homeroom__rate span{ color: var(--ink-soft); }
.g .g-faq summary{ color: var(--blue-deep); }
.g .g-testament__by, .g .g-say__by{ color: var(--gilt); }
/* On navy the foot-note takes the light ink, not the dark one. */
.g .g-dossier .g-foot-note, .g .g-close .g-foot-note,
.g .g-sec--navy .g-foot-note{ color: rgba(214,196,164,.95); }

/* The FAQ summary was still on an older grey. */
.g summary, .g .g-faq summary{ color: var(--blue-deep); }


/* An unclassed <summary> was inheriting an old grey at 4.12:1. Every
   disclosure control takes the ink colour, whatever its container. */
.g details > summary{ color: var(--blue-deep); }


/* ==========================================================================
   PRINT, PROPERLY
   The existing rules hid the nav and the hero but not the footer, so a printed
   confirmation carried the whole site footer onto a second sheet. A printed
   page should be the booking and nothing else.
   ========================================================================== */
@media print{
  .g-footer, .g-assure, .g-close, .g-band, .g-extras,
  .g-faq, .g-figures, .g-pull, .g-paper::before,
  .g-fleur, .g-iron, .g-hairs, .g-ridge, .g-house, .g-medallion,
  .g-back-to-top, .g-panel, .g-overlay, .g-crumbs{ display: none !important; }

  /* The reference code is the reason the page is being printed. */
  .g-conf, .g-dossier, .g-mb-card{
    border: 1px solid #000 !important; padding: 12pt !important;
    background: none !important; break-inside: avoid;
  }
  .g-fig, .g-figure b{ color: #000 !important; }

  /* Print the address behind a link, since a printed page cannot be clicked —
     but not for in-page anchors, which would be noise. */
  main a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; }

  /* Photographs cost ink and add nothing to a confirmation. */
  main img{ display: none !important; }

  @page{ margin: 18mm; }
  body{ font-size: 11pt; line-height: 1.45; }
}

/* Small inline links — "Add to calendar", "Share feedback" — were on an old
   grey at 4.12:1. Every link takes an ink that clears AA. */
/* Links on the page ground take the ink; links inside a navy panel take the
   light one. A single blanket rule made the Terms link navy-on-navy. */
/* A broad `main a:not():not()` rule outranked every scoped link rule after it
   and made the Terms link navy-on-navy. Links are coloured by the ground they
   sit on, not by a blanket rule. */
.g main p a, .g main li a, .g main dd a{ color: var(--blue-deep); }
.g main p a:hover, .g main li a:hover, .g main dd a:hover{ color: var(--gilt); }
.g .g-dossier a:not(.g-btn), .g .g-close a:not(.g-btn),
.g .g-sec--navy a:not(.g-btn), .g .g-assure a:not(.g-btn){
  color: rgba(214,196,164,.98);
}
.g .g-dossier a:not(.g-btn):hover, .g .g-close a:not(.g-btn):hover{ color: #fff; }


/* The terms consent sits in a .g-terms label, and that label paints its own
   ground: `background: var(--sand-2)`, a light panel. It is NOT on the navy,
   even inside the dossier — the navy is behind the panel, not behind the
   text.

   This rule previously set cream ink, with a comment saying it was navy on
   navy before. That was true of the dark-panel case and wrong for the
   default one: cream on sand-2 measures 1.15:1 for the link and 1.37:1 for
   the label — the same invisibility the earlier fix set out to remove, moved
   rather than solved, on the consent a guest must read before paying.

   Dark ink for the sand panel. The one width where the panel drops its
   background and does sit on the navy is handled beside the rule that
   removes it, further down, so the two cannot drift apart. */
.g .g-terms span{ color: var(--ink); }
.g .g-terms a{ color: var(--blue-deep); border-bottom: 1px solid var(--gilt); }
.g .g-terms a:hover{ color: var(--gilt); border-bottom-color: var(--gilt); }

/* `.g .g-dossier a:not(.g-btn)` above colours every link in the navy dossier
   cream, which outranks the rule above and is wrong for this one link. */
.g .g-dossier .g-terms a:not(.g-btn),
.g .g-aside .g-terms a:not(.g-btn){
  color: var(--blue-deep); border-bottom: 1px solid var(--gilt);
}

/* Small links inside a hint were on an old grey at 4.12:1. */
.g .g-hint a{ color: var(--blue-deep); border-bottom: 1px solid var(--gilt); }
.g .g-hint a:hover{ color: var(--gilt); }


/* The nav panel's legal links sit on navy and were using a light-ground ink. */
.g .g-navwrap__legal a, .g .g-navwrap__foot a{ color: rgba(214,196,164,.9); }
.g .g-navwrap__legal a:hover, .g .g-navwrap__foot a:hover{ color: #fff; }

/* ==========================================================================
   THE FOOTER
   Every contrast audit I ran scanned `main` only, so the footer was never
   checked — and three of its colours sat just under AA on navy: the gilt
   heads at 4.20:1, the fine print and the payment labels at 4.38:1. On the
   block that carries the address, the legal links and the payment marks.
   ========================================================================== */
.g .g-footer h2, .g-footer h4{ color: #C4A06A; }                    /* 5.31:1, was 4.20 */
.g .g-footer__fine, .g .g-pay__lbl,
.g .g-footer small, .g .g-footer .g-hint{ color: #9DAEBD; }   /* 5.70:1, was 4.38 */
.g .g-footer a{ color: rgba(226,214,192,.95); }
.g .g-footer a:hover{ color: #fff; }


/* Links inside a hint, and the Terms link in the navy dossier. Named rather
   than caught by a blanket rule, which is what caused the earlier faults. */
.g .g-mb-card .g-hint a, .g main .g-hint a{
  color: var(--blue-deep); border-bottom: 1px solid var(--gilt);
}
.g .g-mb-card .g-hint a:hover, .g main .g-hint a:hover{ color: var(--gilt); }
.g .g-dossier .g-terms a, .g .g-aside .g-terms a{
  color: rgba(226,214,192,.98); border-bottom: 1px solid rgba(226,214,192,.55);
}
.g .g-dossier .g-terms a:hover{ color: #fff; }

.g p.g-hint a, .g .g-hint > a{ color: var(--blue-deep); }

/* ==========================================================================
   THE DISCOVERIES GRID
   The restoration page's strongest material is what came out of the walls,
   and it was buried in prose. Set as findings — a period label, what it is,
   and what it means — so the page can be read at a glance or in full.
   ========================================================================== */
.g-finds{
  display: grid; gap: var(--s6) var(--s6); margin-top: var(--s7);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem){ .g-finds{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem){ .g-finds{ grid-template-columns: repeat(3, 1fr); } }
.g-find{
  border-top: 2px solid var(--gilt);
  padding-top: var(--s4);
}
.g-find__k{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gilt); margin: 0 0 var(--s2);
}
.g-find__t{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h3); line-height: 1.18;
  letter-spacing: .012em; color: var(--blue-deep); margin: 0 0 var(--s3);
}
.g-find__d{ font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0; max-width: var(--m-read); }

/* In a two-column layout the pull quote should not float — it belongs in the
   column, under the text it follows. */
@media (min-width: 60rem){
  .g-two .g-pull{ float: none; width: auto; margin: var(--s6) 0 0; }
}

/* ==========================================================================
   THE CREED
   Wabi-sabi is the argument that turns unrestored walls from a limitation
   into a position, and it deserves the most deliberate frame on the site: a
   ruled box on navy, the two words set as a printed glossary would set them.
   ========================================================================== */
.g-creed{ background: var(--blue-deep); color: #fff; }
.g-creed__in{
  border: 1px solid rgba(196,160,106,.55);
  padding: clamp(28px, 5vw, 60px);
  max-width: 60rem; margin-inline: auto; text-align: center;
  position: relative;
}
/* Corner ticks, the way a printed plate is cornered. */
.g-creed__in::before, .g-creed__in::after{
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--gilt-leaf);
}
.g-creed__in::before{ top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.g-creed__in::after{ bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.g-creed .g-eyebrow{ color: var(--gilt-leaf); }
.g-creed .g-eyebrow::before{ background: var(--gilt-leaf); margin-inline: auto; }
.g-creed__h{
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: var(--t-h1); line-height: 1;
  letter-spacing: .015em; color: #fff; margin: var(--s3) 0 0;
}
.g-creed__lede{
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82);
  max-width: var(--m-read); margin: var(--s5) auto 0;
}
.g-creed__pair{
  display: grid; gap: var(--s6); margin-top: var(--s7);
  text-align: left;
}
@media (min-width: 48rem){ .g-creed__pair{ grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.g-creed__half{ border-top: 1px solid var(--gilt-leaf); padding-top: var(--s4); }
.g-creed__word{
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: var(--t-h2); line-height: 1;
  color: var(--gilt-leaf); margin: 0 0 var(--s3);
}
.g-creed__def{ font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.88); margin: 0; }
.g-creed__q{
  margin: var(--s7) auto 0; padding-top: var(--s5);
  border-top: 1px solid rgba(196,160,106,.45); max-width: var(--m-read);
}
.g-creed__q p{
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: var(--t-h3); line-height: 1.3;
  color: #fff; margin: 0;
}
.g-creed__q cite{
  display: block; margin-top: var(--s4); font-style: normal;
  font-family: var(--ui); font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gilt-leaf);
}

/* ==========================================================================
   THE STORY ROWS
   A numbered sequence, ruled like a printed chronology. The numeral sits in
   gilt in its own column so the eye can run down the years.
   ========================================================================== */
.g-story{ margin-top: var(--s7); border-top: 1px solid var(--gilt); }
.g-story__row{
  display: grid; grid-template-columns: 3.4rem 1fr; gap: var(--s5);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem){ .g-story__row{ grid-template-columns: 5rem 1fr; gap: var(--s6); } }
.g-story__n{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); line-height: 1;
  color: var(--gilt); margin: 0;
  font-variant-numeric: lining-nums;
}
.g-story__t{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h3); line-height: 1.18;
  color: var(--blue-deep); margin: 0 0 var(--s3);
}
.g-story__d{ font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0; max-width: var(--m-wide); }
.g-story__d em{ font-style: italic; color: var(--blue-deep); }

/* ==========================================================================
   THE PRESS WALL AND THE MEDAL
   Set as a printed masthead list rather than logos — logos would need
   permissions and would date. The medal gets its own bordered plate.
   ========================================================================== */
.g-masthead{
  display: grid; gap: 1px; margin-top: var(--s7);
  grid-template-columns: repeat(2, 1fr);
  background: var(--gilt);
  border: 1px solid var(--gilt);
}
@media (min-width: 48rem){ .g-masthead{ grid-template-columns: repeat(4, 1fr); } }
.g-masthead__i{
  background: var(--sand); padding: var(--s5) var(--s4);
  text-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s2);
  min-height: 6.5rem;
}
.g-masthead__i b{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-lede); line-height: 1.1;
  letter-spacing: .02em; color: var(--blue-deep);
}
.g-masthead__i span{
  font-family: var(--ui); font-size: 13px; line-height: 1.3;
  color: var(--ink-soft);
}

.g-medal{
  margin-top: var(--s7); padding: var(--s6);
  border: 2px solid var(--gilt); text-align: center;
  max-width: var(--m-tight); margin-inline: auto;
  position: relative; background: var(--white);
}
.g-medal::before{
  content: ''; position: absolute; inset: 5px;
  border: 1px solid var(--gilt); opacity: .45; pointer-events: none;
}
.g-medal__k{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; color: var(--gilt); margin: 0 0 var(--s2);
  font-variant-numeric: lining-nums;
}
.g-medal__t{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); line-height: 1.1;
  color: var(--blue-deep); margin: 0 0 var(--s3);
}
.g-medal__d{ font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 auto; max-width: var(--m-read); }


/* Leaf gold at 4.20:1 is fine for a drawn mark but under AA for small text on
   navy. Text on a dark ground takes the lighter gold the footer already uses. */
.g-creed .g-eyebrow, .g-creed__q cite,
.g-close .g-eyebrow, .g-sec--navy .g-eyebrow,
.g-creed cite, .g-close cite{ color: #C4A06A; }

/* ==========================================================================
   THE PLATE
   A bordered panel for the facts a page is built on — double-ruled in gilt,
   the way a printed plate is mounted. Used where a page needs one place a
   reader can check rather than a paragraph they must parse.
   ========================================================================== */
.g-plate{
  margin-top: var(--s7); padding: clamp(20px, 3vw, 36px);
  border: 2px solid var(--gilt); background: var(--white);
  position: relative;
}
.g-plate::before{
  content: ''; position: absolute; inset: 6px;
  border: 1px solid var(--gilt); opacity: .4; pointer-events: none;
}
.g-plate__row{ min-width: 0; }
.g-plate__l{ display: grid; gap: var(--s4) var(--s7); margin: 0; }
@media (min-width: 48rem){ .g-plate__l{ grid-template-columns: 1fr 1fr; } }
.g-plate__l > div{
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s3);
  align-items: baseline; padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.g-plate__l dt{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gilt); margin: 0;
}
.g-plate__l dd{ margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }


/* ==========================================================================
   ALTERNATING BANDS
   The homepage runs six image-and-text bands in sequence, and every one had
   the photograph on the same side — so the eye stopped distinguishing them.
   Even-numbered bands now flip, which is how a printed feature would set them.
   ========================================================================== */
@media (min-width: 60rem){
  /* .g-half--flip already existed and was never applied to anything. Every
     second band uses it, so the photograph changes side down the page. */
  .g main > .g-sec--flush:nth-of-type(even) .g-half .g-half__img{ order: 2; }
}

/* ==========================================================================
   THE HEADER OVER A BREADCRUMB
   `.at-top` turns the header transparent with white text, on the assumption
   the hero photograph is behind it. On any page with a breadcrumb the hero
   starts 142px down, so the white nav sits over the cream page instead and
   is all but invisible. The white treatment only applies when the photograph
   is genuinely behind the header.
   ========================================================================== */
.g.has-hero.at-top:has(.g-crumbs) .g-top{
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.g.has-hero.at-top:has(.g-crumbs) .g-nav a{ color: var(--blue-deep); }
/* The logo on a light header is simply the dark logo — the mask treatment
   belongs only where the header is transparent over a photograph. */
/* Set the fill transparent expecting a dark logo FILE to show through; the only
   file is the white wordmark, so the header logo was white on cream on every
   page but the homepage. The mask paints the white file navy on ordinary pages;
   do the same here. No dark file is needed. */
.g.has-hero.at-top:has(.g-crumbs) .g-logo,
.g.has-hero.at-top:has(.g-crumbs) .g-brand{
  background-color: var(--blue-deep);
  -webkit-mask-image: var(--logo-src); mask-image: var(--logo-src);
}
.g.has-hero.at-top:has(.g-crumbs) .g-logo img,
.g.has-hero.at-top:has(.g-crumbs) .g-brand img{ opacity: 0; }
.g.has-hero.at-top:has(.g-crumbs) .g-burger span,
.g.has-hero.at-top:has(.g-crumbs) .g-navbtn__bars span{ background: var(--blue-deep); }
.g.has-hero.at-top:has(.g-crumbs) .g-burger__label,
.g.has-hero.at-top:has(.g-crumbs) .g-navbtn__label,
.g.has-hero.at-top:has(.g-crumbs) .g-navbtn{ color: var(--blue-deep); }

/* ==========================================================================
   THE HERO BUTTON
   .g-hero__in centres its text, but a button is an inline-block inside a
   block-level parent — text-align does not move it, so it sat 340px left of
   centre under a centred title. The action on the page is what a guest looks
   for, and it was not where the design pointed.
   ========================================================================== */
.g .g-hero__in > a.g-btn,
.g .g-hero__in > p > a.g-btn,
.g .g-hero__cta{ margin-inline: auto; }
.g .g-hero__in > p{ text-align: center; }


/* ==========================================================================
   THE BREADCRUMB BAND
   The crumb bar must clear the 86px fixed header, and its links are 44px for
   touch — so the band is legitimately 140px tall. The problem was visual: the
   header above it is the same cream, so the two merged into one pale strip
   above the photograph. A rule under the header separates them, and the
   vertical space is centred on the text rather than stacked above it.
   ========================================================================== */
.g.has-hero .g-crumbs{
  padding-top: 86px;          /* exactly the header, no more */
  padding-bottom: 0;
  background: var(--sand);
}
/* One row, 46px tall, with the text centred in it — the link still fills the
   row so the tap target is unchanged. */
.g.has-hero .g-crumbs ol{ min-height: 46px; align-items: center; }
.g.has-hero .g-crumbs li, .g.has-hero .g-crumbs li::before{ min-height: 0; }
.g.has-hero .g-crumbs a{ min-height: 46px; display: inline-flex; align-items: center; }

/* ==========================================================================
   THE JOURNAL
   The newsletter form existed only inside the slide-out menu, which almost
   nobody opens. A reader who has just finished a page about a fifteen-year
   restoration is the most likely subscriber on the site.
   ========================================================================== */
.g-journal__in{
  max-width: var(--m-read); margin-inline: auto; text-align: center;
  border-top: 2px solid var(--gilt); border-bottom: 2px solid var(--gilt);
  padding: var(--s7) var(--s5);
}
.g-journal .g-eyebrow{ justify-content: center; }
.g-journal .g-eyebrow::before{ margin-inline: auto; }
.g-journal__h{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); line-height: 1.1;
  color: var(--blue-deep); margin: var(--s3) 0 var(--s4);
}
.g-journal__p{
  font-size: 16px; line-height: 1.6; color: var(--ink);
  max-width: var(--m-read); margin: 0 auto var(--s6);
}
.g-journal__form{
  display: flex; flex-wrap: wrap; gap: var(--s3);
  /* Never stretch. A single-line field must not take its height from
     whatever else happens to sit in the row — a hidden input, a visually
     hidden label, or a button that has wrapped. */
  justify-content: center; align-items: center;
}
.g-journal__form input[type=email]{
  flex: 1 1 18rem; max-width: 24rem;
  padding: 0 var(--s4);
  /* Height stated both ways so no other stylesheet can inflate it. */
  min-height: 52px; height: 52px; max-height: 52px; align-self: center;
  border: 1px solid var(--gilt); background: var(--white);
  font-family: var(--ui); font-size: 16px; color: var(--blue-deep);
}
.g-journal__form input[type=email]:focus-visible{
  outline: 2px solid var(--gilt); outline-offset: 2px;
}
.g-journal__form .g-btn{ min-height: 52px; flex: 0 0 auto; }
.g-journal__note{
  font-family: var(--ui); font-size: 15px; color: var(--ink-soft);
  margin: var(--s4) 0 0;
}
/* Visually hidden, still read aloud. */
.g-vh{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   SCARCITY, STATED HONESTLY
   Seven bedrooms, one sitting a night, fifteen on an atelier, one event at a
   time. These are facts about what a house under restoration can hold, not
   invented urgency — so they are set plainly, as figures, on navy.
   ========================================================================== */
.g-scarce{ background: var(--blue-deep); color: #fff; }
.g-scarce__in{ max-width: 56rem; margin-inline: auto; text-align: center; }
.g-scarce .g-eyebrow{ color: #C4A06A; }
.g-scarce .g-eyebrow::before{ background: #C4A06A; margin-inline: auto; }
.g-scarce__h{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); line-height: 1.1;
  color: #fff; margin: var(--s3) 0 var(--s4);
}
.g-scarce__p{
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82);
  max-width: var(--m-read); margin: 0 auto;
}
.g-scarce__grid{
  display: grid; gap: var(--s5); margin-top: var(--s7);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem){ .g-scarce__grid{ grid-template-columns: repeat(4, 1fr); } }
.g-scarce__i{ border-top: 1px solid #C4A06A; padding-top: var(--s4); }
.g-scarce__i b, .g-scarce__i b.g-fig{
  display: block; font-family: var(--display); font-weight: 300;
  font-size: var(--t-h1); line-height: 1;
  color: #C4A06A;              /* 5.31:1 on navy — --gilt is for light grounds */
  margin-bottom: var(--s3);
  font-variant-numeric: lining-nums;
}
.g-scarce__i span{
  display: block; font-family: var(--ui); font-size: 15px; line-height: 1.45;
  color: rgba(255,255,255,.88);
}
.g-scarce__note{
  margin: var(--s7) auto 0; padding-top: var(--s5);
  border-top: 1px solid rgba(196,160,106,.4);
  font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.8);
  max-width: var(--m-wide);
}

/* ==========================================================================
   THE CONSTRAINT LINE
   The full scarcity block sits near the foot of a long page, which is too
   late to frame a decision. This is the same fact in one line, directly under
   the hero — ruled in gilt so it reads as a statement of fact rather than a
   banner.
   ========================================================================== */
.g-limit{
  /* A marginal note, not a band. A one-line constraint set between two
     full-width rules reads as something left behind; against a single rule
     on the left it reads as an aside deliberately placed. */
  display: block; max-width: var(--m-read);
  margin: var(--s6) 0 0; padding: 0 0 0 var(--s5);
  border: 0; border-left: 2px solid var(--gilt);
  font-size: 16px; line-height: 1.6; color: var(--ink-soft);
}
.g-limit__k{
  display: block; margin-bottom: 2px;
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}
@media (min-width: 44rem){
  .g-limit{ gap: var(--s5); }
  .g-limit__k{ min-width: 10rem; }
}


/* Restored: the cancel control on the manage pages. My dead-class sweep
   only protected g-* names and swept this live rule. */
.g .btn-text-danger,
.g .g-btn--danger{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--s2) var(--s5);
  font-family: var(--serif); font-size: 15px; font-weight: 500;
  background: transparent; color: #8A2B22;
  border: 1px solid #D9C2BE; cursor: pointer; text-decoration: none;
}



/* ==========================================================================
   THE ESSENCE BLOCK
   A centred heading over left-aligned text in a wide wrap left half the page
   empty and the two elements disagreeing about where the column starts. The
   whole block becomes one narrow centred column, so heading and prose share
   an edge and the section reads as a page rather than a ribbon.
   ========================================================================== */
.g-sec--plate .g-wrap{ max-width: var(--m-read); }
.g-sec--plate .g-h2--lead{ text-align: left; }
.g-sec--plate .g-p{ max-width: none; }
@media (max-width: 34rem){
  .g-sec--plate .g-h2--lead{ text-align: left; }
}


/* ==========================================================================
   HERO TEXT OVER A MOVING IMAGE
   The hero carries video, so the brightness behind the text changes from
   frame to frame — an eyebrow at 82% white vanishes over a bright, misty
   shot. Text over a hero gets its own shadow and a stronger wash beneath it,
   which does not touch the photograph itself.
   ========================================================================== */
.g .g-hero__eyebrow{
  color: #fff;
  text-shadow: 0 1px 12px rgba(10,22,40,.85), 0 0 3px rgba(10,22,40,.7);
}
.g .g-hero__title,
.g .g-hero__motto,
.g .g-hero__lede{
  text-shadow: 0 2px 20px rgba(10,22,40,.7), 0 0 4px rgba(10,22,40,.45);
}
/* Deepen the wash under the lower half, where the words sit. */
.g .g-hero__wash{
  background: linear-gradient(180deg,
    rgba(14,28,48,.28) 0%,
    rgba(14,28,48,.16) 32%,
    rgba(14,28,48,.58) 72%,
    rgba(14,28,48,.78) 100%);
}
/* The gilt rule under the title needs to hold its own against a pale frame. */
.g .g-hero__title::after{ background: #D6BC8E; height: 2px; }


/* ==========================================================================
   PROSE WRAPS
   Capping the text inside a 1216px wrap produced a ribbon; widening the text
   produced long lines. Both were the same error — the container was wrong,
   not the type. A wrap whose direct children are prose narrows to the
   measure; wraps holding cards, grids or figures keep the full width.
   ========================================================================== */
/* Narrow only when the wrap contains nothing but prose. The previous version
   listed grid classes to exclude, which meant any component added later —
   .g-grid among them — was silently squeezed into a 46rem column and its
   cards rendered fourteen characters wide. */
.g-sec .g-wrap:has(> p.g-p):not(:has(div)):not(:has(ul)):not(:has(ol)):not(:has(dl)):not(:has(img)):not(:has(table)):not(:has(form)):not(:has(article)):not(:has(figure)):not(:has(section)):not(:has(> .g-display)){
  max-width: var(--m-read);
}
/* The cap stays as a ceiling. It no longer produces a ribbon because the
   prose-only wraps above are themselves narrow, so text and container agree. */
.g-sec .g-wrap > p.g-p{ max-width: var(--m-wide); }


/* ==========================================================================
   THE JOURNAL FORM
   A flex form must not treat its hidden children as layout. The visually
   hidden label and the CSRF input were taking flex slots, pushing the button
   to a second line where stretch inflated the email field to 288px tall.
   ========================================================================== */
.g-journal__form{ align-items: center; }
.g-journal__form > input[type="hidden"],
.g-journal__form > .g-vh{ position: absolute; }
.g-journal__form input[type="email"]{
  height: 52px; flex: 1 1 18rem; max-width: 24rem;
}
.g-journal__form .g-btn{ height: 52px; flex: 0 0 auto; width: auto; }

/* ==========================================================================
   THE CURRENCY CONTROL
   The switcher lived only in the slide-out menu panel, and no price on the
   site carried data-eur, so it converted nothing. This is the same control,
   placed beside the first price a guest actually reads.
   ========================================================================== */
.g-curbar{
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 0 var(--s5); padding: 0;
  font-family: var(--ui); font-size: 13px; letter-spacing: .04em;
  color: var(--ink-soft);
}
.g-curbar__l{ text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.g-curbar__s{
  min-height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--gilt); background: var(--white);
  font-family: var(--ui); font-size: 15px; color: var(--blue-deep);
}
.g-curbar__s:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
/* The approximate figure sits under the euro price, never replacing it. */
.g-approx{
  display: block; margin-top: 4px;
  font-family: var(--ui); font-size: 13px; font-weight: 400;
  letter-spacing: .02em; color: var(--ink-soft);
  text-transform: none;
}

/* ==========================================================================
   SCROLLING UNDER A FIXED HEADER
   The header is fixed at 86px, but scroll-padding-top was never set — so any
   anchor link, in-page jump or scrollIntoView landed the target beneath it.
   A guest clicking "See what is free" arrived at a heading they could not
   read. One line fixes every anchor on the site.
   ========================================================================== */
html{ scroll-padding-top: 110px; }   /* 86px header + breathing room; --s4 is not in scope on html */
@media (max-width: 34rem){
  html{ scroll-padding-top: 102px; }
}

/* ==========================================================================
   THE INVENTORY OF SURVIVALS
   A single run of named original features, set larger than body text and
   separated by gilt points rather than commas — so it reads as a list of
   things rather than a sentence about them. No praise words: the nouns do it.
   ========================================================================== */
.g-survive{
  margin: var(--s6) 0; padding: var(--s5) 0;
  border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt);
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); line-height: 1.45;
  color: var(--blue-deep); max-width: none;
}
.g-survive span::after{
  content: "·"; color: var(--gilt); margin: 0 .5em 0 .55em;
  font-family: var(--ui);
}
.g-survive span:last-child::after{ content: "."; margin-left: .05em; color: var(--blue-deep); }

/* ==========================================================================
   THE DATE RANGE PICKER
   Two native date fields gave a guest mm/dd/yyyy and no sense of a stay as a
   span. This is a two-month calendar: arrival and departure are marked in
   navy, the nights between are washed in gilt, and the count is stated at the
   top. The native inputs stay beneath it and still carry the values.
   ========================================================================== */
.g-rp__f.is-rp input[type="date"]{
  position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.g-rp__btn{
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; min-height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--display); font-size: var(--t-h3); color: var(--blue-deep);
  font-variant-numeric: lining-nums;
}
.g-rp__btn:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 3px; }
.g-rp__nights{
  font-family: var(--ui); font-size: 13px; letter-spacing: .04em;
  color: var(--gilt);
}

.g-rp{
  position: absolute; z-index: 200;
  width: min(640px, calc(100vw - 24px));
  background: #F6F1E7;              /* literal: the panel sits over a video */
  border: 1px solid #73562D;
  box-shadow: 0 18px 50px rgba(14,28,48,.32);
  padding: 20px;
  color: #14305F;
}
.g-rp__top{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--gilt);
}
.g-rp__count{
  margin: 0; font-family: var(--display); font-size: 18px;
  color: var(--blue-deep); font-variant-numeric: lining-nums;
}
.g-rp__nav{
  min-width: 44px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--gilt); background: transparent;
  color: var(--blue-deep); font-size: 18px; line-height: 1;
}
.g-rp__nav:hover{ background: var(--gilt); color: #fff; }
.g-rp__nav:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }

.g-rp__ms{ display: grid; gap: var(--s5); margin-top: var(--s4); }
@media (min-width: 34rem){ .g-rp__ms{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 26rem){ .g-rp__m:last-child{ display: none; } }

.g-rp__mh{
  margin: 0 0 var(--s3); text-align: center;
  font-family: var(--display); font-size: 16px; color: var(--blue-deep);
  font-variant-numeric: lining-nums;
}
.g-rp__g{ display: grid; grid-template-columns: repeat(7, 1fr); }
.g-rp__dow{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gilt); text-align: center; padding-bottom: var(--s2);
}
.g-rp__pad{ min-height: 40px; }
.g-rp__d{
  min-height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--ui); font-size: 15px; color: var(--blue-deep);
  font-variant-numeric: lining-nums;
}
button.g-rp__d:hover{ box-shadow: inset 0 0 0 1px var(--gilt); }
button.g-rp__d:focus-visible{ outline: 2px solid var(--gilt); outline-offset: -2px; }
.g-rp__d.is-past{ color: var(--ink-faint); opacity: .4; cursor: default; }
/* The nights between, washed in gilt so the stay reads as one span. */
.g-rp__d.is-in{ background: rgba(196,160,106,.22); }
.g-rp__d.is-start,
.g-rp__d.is-end{ background: var(--blue-deep); color: #fff; font-weight: 600; }

.g-rp__foot{
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.g-rp__clear, .g-rp__done{
  min-height: 44px; padding: 0 var(--s5); cursor: pointer;
  font-family: var(--ui); font-size: 15px; letter-spacing: .04em;
}
.g-rp__clear{ border: 0; background: transparent; color: var(--ink-soft); text-decoration: underline; }
.g-rp__done{ border: 1px solid var(--blue-deep); background: var(--blue-deep); color: #fff; }
.g-rp__clear:focus-visible, .g-rp__done:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
/* If the panel has to be capped to fit the screen, it scrolls rather than
   spilling off the bottom. */
.g-rp{ overflow: auto; overscroll-behavior: contain; }

/* ==========================================================================
   THE FOOTER
   815px tall with five horizontal rules and a 64px margin stacking on top of
   a 24px padding before each one — so the copyright line sat alone in a band
   of empty navy. One rule above the fine print, one above payment, and the
   space between them halved.
   ========================================================================== */
.g-footer__fine{ margin-top: 32px; padding-top: 18px; }
.g-pay{ margin-top: 18px; padding-top: 18px; }
.g-pay__note{ margin-top: 10px; }
/* The crest above the footer does not need 133px to itself. */
.g-crest--foot{ padding: 28px 0 4px; }

/* ==========================================================================
   THE HEADER BAR
   The Book button and the Menu toggle sit after the nav in the DOM, so when
   the nav collapses they drift toward the middle instead of holding the right
   edge — and at 1440 the Book button overflowed past the content edge
   entirely. Anchor the logo left, let the nav take the middle, and hold the
   actions together on the right at every width.
   ========================================================================== */
.g .g-top__in{
  display: flex; align-items: center; gap: var(--s4);
  justify-content: space-between;
}
.g .g-top__in > .g-logo,
.g .g-top__in > .g-brand{ margin-right: auto; }
.g .g-top__in > .g-nav{ margin-inline: auto; }
/* The actions ride the right edge, in order, whatever else is showing. */
.g .g-top__in > .g-booksel{ order: 9; margin-left: 0; }
.g .g-top__in > .g-navbtn{ order: 10; margin-left: var(--s3); }
/* The slide-out panel and its overlay are positioned, not laid out. */
.g .g-top__in > .g-navwrap,
.g .g-top__in > .g-panel-overlay{ position: fixed; }
/* The nightly rate, kept under the total when dates are set. */
.g-card__per{
  display: block; margin-top: 2px;
  font-family: var(--ui); font-size: 13px; color: var(--ink-soft);
}

/* ==========================================================================
   PAGE HEAD WITHOUT A HERO
   Some pages open with a title on the page ground rather than over a
   photograph. They must never borrow .g-hero__title, which is white with a
   shadow for use over an image — on cream that renders invisible.
   ========================================================================== */
.g-pagehead{
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h1); line-height: 1.05;
  color: var(--blue-deep); margin: var(--s3) 0 var(--s5);
  text-shadow: none; max-width: var(--m-tight);
}
/* A safety net: hero type used outside a hero falls back to readable ink.
   Scoped by ancestry, not by parent — an earlier version matched
   `.g-wrap > .g-hero__title`, which is also true INSIDE a hero, and turned
   real hero titles navy on a navy ground. */
.g :is(.g-hero__title, .g-hero__eyebrow, .g-hero__lede, .g-hero__motto):not(.g-hero *){
  color: var(--blue-deep); text-shadow: none;
}

/* ==========================================================================
   THE FOOTER BASE
   Copyright and payment were two full-width bands, each with its own rule
   above it — two lines and two rules to carry a dozen words. One row now:
   copyright left, payment right, a single rule above.
   ========================================================================== */
.g-footer__base{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s4);
  margin-top: 32px; padding-top: 18px;
  border-top: 1px solid rgba(196,160,106,.32);
}
.g-footer__base .g-footer__fine{ margin: 0; padding: 0; border: 0; }
.g-footer__base .g-pay{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin: 0; padding: 0; border: 0;
}
.g-footer__base .g-pay__marks{ margin: 0; }
.g-footer__base .g-pay__note{ margin: 0; }
@media (max-width: 34rem){
  .g-footer__base{ justify-content: flex-start; }
}

/* ==========================================================================
   THE WEEKEND PLANNER
   The events page said what was possible but gave a couple nothing to do with
   it. This lets them assemble the shape of their weekend and see what follows
   from it — set on sand, gilt-ruled, with the chosen option in navy.
   ========================================================================== */
.g-plan{
  margin-top: var(--s7);
  border-top: 2px solid var(--gilt); border-bottom: 2px solid var(--gilt);
  padding: var(--s6) 0;
}
.g-plan__cols{ display: grid; gap: var(--s5); }
/* A grid child defaults to min-width:auto, so one long word or a wide table
   inside a column pushes past its track and takes the page with it. Both of
   these are grid children and neither had a rule at all. */
.g-plan__col{ min-width: 0; }
@media (min-width: 46rem){ .g-plan__cols{ grid-template-columns: repeat(3, 1fr); } }
.g-plan__k{
  margin: 0 0 var(--s3); font-family: var(--ui);
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gilt);
}
.g-plan__opts{ display: flex; flex-wrap: wrap; gap: var(--s2); }
.g-plan__o{
  min-height: 44px; padding: 0 var(--s4); cursor: pointer;
  border: 1px solid var(--gilt); background: transparent;
  font-family: var(--ui); font-size: 15px; color: var(--blue-deep);
}
.g-plan__o:hover{ background: var(--white); }
.g-plan__o:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
.g-plan__o.is-on{ background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

.g-plan__out{
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid rgba(115,86,45,.3);
}
.g-plan__line{
  margin: 0 0 var(--s4);
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); line-height: 1.3;
  color: var(--blue-deep);
}
.g-plan__notes{ margin: 0; padding: 0; list-style: none; }
.g-plan__notes li{
  position: relative; padding-left: var(--s5); margin-bottom: var(--s3);
  font-size: 16px; line-height: 1.55; color: var(--ink); max-width: var(--m-wide);
}
.g-plan__notes li::before{
  content: "·"; position: absolute; left: var(--s3);
  color: var(--gilt); font-weight: 700;
}
.g-plan__act{ margin: var(--s6) 0 0; }

/* ==========================================================================
   DRAWN SECTION MARKS
   Line-only figures in the register of the fleuron and the room emblems, each
   referring to something the château actually has — the ridge line, a laid
   setting, the key, the ivy that grew through the windows.
   ========================================================================== */
.g-mark__wrap{ display: flex; justify-content: center; padding: var(--s6) 0 0; }
.g-mark{ width: 120px; height: 34px; color: var(--gilt); opacity: .9; }
@media (max-width: 34rem){ .g-mark{ width: 96px; } }


/* ==========================================================================
   TOO NARROW TO READ
   Two components were rendering text at sixteen characters a line: the facts
   list, splitting a 552px block into two columns, and the pull quote at
   272px. Text below roughly 30 characters a line stops being prose and
   becomes a column of fragments.
   ========================================================================== */
.g-facts-list{ max-width: none; container-type: inline-size; grid-template-columns: 1fr; }
@container (min-width: 44rem){
  .g-facts-list{ grid-template-columns: 1fr 1fr; }
}
/* A definition row splits into two columns only when the row is wide enough
   for both to hold a readable line. Below that it stacks — which is about the
   width of its own container, not the width of the screen. */
.g-facts-list > div,
.g-plate__l > div{ container-type: inline-size; }
.g-facts-list > div, .g-plate__l > div{ grid-template-columns: 1fr; }
@container (min-width: 32rem){
  .g-facts-list > div, .g-plate__l > div{ grid-template-columns: minmax(8rem, 12rem) 1fr; }
}
/* max-width:var(--m-tight) above measures only 272px in the display face — a column of
   fragments rather than a quotation. Set the width in absolute terms and let
   the character cap go. */
.g-pull{ max-width: var(--m-tight); min-width: 0; }
@media (max-width: 52rem){ .g-pull{ float: none; max-width: none; width: auto; } }


/* ==========================================================================
   COLUMNS THAT REFLOW ON THEIR OWN WIDTH
   A three-column grid held its three columns at 768px, giving each card about
   210px and its text fourteen characters a line. Cards should break on the
   space they actually have rather than on a breakpoint chosen in advance.
   ========================================================================== */
/* The track must be wide enough that the text INSIDE the card reads well,
   not merely that the card fits. A padded card loses ~96px to its own
   padding, so the track has to carry that plus a readable measure. */
.g-grid--3, .g-grid--2, .g-finds, .g-incl-cards{
  grid-template-columns: repeat(auto-fit, minmax(min(27rem, 100%), 1fr));
}
/* The quotation needs to hold a readable line in the italic display face. */
.g-pull{ max-width: var(--m-tight); }
.g-pull p{ max-width: none; }
/* Measured in characters, not pixels: at 27px italic a 350px column holds 23
   characters. Widen the column and ease the face so the quote reads as a
   sentence. */
@media (min-width: 60rem){
  .g-pull{ width: 26rem; max-width: var(--m-tight); }
  .g-pull p{ font-size: var(--t-lede); }
}


/* ==========================================================================
   THE ROOM CARDS
   Five rooms in two columns left the fifth alone on a row, and 568px cards
   ran the page to 17,000px. Three columns holds five as 3 + 2 and reads as a
   set. Below that the grid reflows on its own width, as the others do.
   ========================================================================== */
/* Reflow on the space available rather than a fixed two columns, so five
   rooms sit 3 + 2 on a wide screen instead of leaving one stranded. */
.g-cards{ grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }

/* ==========================================================================
   IMAGE BANDS ON A NARROW SCREEN
   grid-auto-flow: column puts every image on one row whatever the width, so
   a five-image band rendered at 74px each on a phone — too small to read as
   photographs. Below tablet the band becomes a horizontal scroller with each
   image at a usable size, which is how a strip of photographs should behave
   on a phone anyway.
   ========================================================================== */
@media (max-width: 60rem){
  .g .g-band{
    max-width: 100vw;
    contain: paint;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 22rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--s3);
    padding-inline: var(--s4);
    scrollbar-width: none;
  }
  .g .g-band::-webkit-scrollbar{ display: none; }
  .g .g-band img{
    scroll-snap-align: center;
    /* Explicit, so a slow or failed image cannot collapse the track. */
    width: min(78vw, 22rem); min-width: min(78vw, 22rem);
    aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  }
}


/* The press grid holds two columns down to a point; on the narrowest phones a
   masthead and its caption need the full width. */
@media (max-width: 24rem){
  .g-masthead{ grid-template-columns: 1fr; }
}


/* The press row puts a masthead and its caption side by side. On the narrowest
   phones there is no room for both, so they stack. */
@media (max-width: 26rem){
  .g-press li{ flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ==========================================================================
   THE COMPARISON TABLE
   A five-column table cannot narrow indefinitely. Rather than let it push the
   whole page sideways, it scrolls within its own bounds — the page stays put
   and the table can be swiped.
   ========================================================================== */
.g-compare-wrap{
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  contain: paint;
}
.g-compare{ min-width: 34rem; }


/* Form rows: let fields shrink and wrap rather than overshoot the container.
   At 834px an enquiry row was running four pixels past the right edge. */
.g-row{ flex-wrap: wrap; }
.g-row > .g-field{ min-width: 0; flex: 1 1 12rem; }


/* A ceiling on every paragraph in the page body, not only the classed ones.
   Unclassed prose had no measure, so at high zoom it ran past 80 characters. */
main p, main li, main dd{ max-width: var(--m-wide); }
main .g-limit, main .g-curbar, main .g-survive, main .g-plan__line,
main .g-hero p, main td p, main th p{ max-width: none; }

/* A three-card row inside a 1216px measure cannot hold three readable
   columns — three tracks would give 35 characters a line. Two columns read
   properly at 58; when that leaves the third card alone on its row, it takes
   the full width rather than sitting stranded beside empty space. */
.g-grid--3 > :nth-child(3):last-child,
.g-grid--2 > :nth-child(3):last-child{ grid-column: 1 / -1; }

/* ==========================================================================
   A READABLE MEASURE INSIDE CARDS AND PANELS
   The audit floor was 26 characters — set at "not catastrophically broken"
   rather than "reads well". Typographic convention is 45-75; below about 40
   a multi-line paragraph reads as a column of fragments. These three
   components were sitting in the low thirties.
   ========================================================================== */

/* Cards: the grid track must carry the card's own padding plus a readable
   line, not merely fit the card on screen. */
.g-cards, .g-cards--rooms{
  grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
}
/* On a tablet the padding is what starves the text, so ease it there. */
@media (max-width: 60rem){
  .g-card__b, .g-panel{ padding-inline: var(--s5); }
}

/* A two-panel row needs each panel wide enough to read. Below 68rem the two
   329px columns give 32 characters, so it becomes one column. */
@media (max-width: 68rem){
  .g-two{ grid-template-columns: 1fr; }
}

/* The creed quotation was 31 characters in the display face. */
.g-creed__q{ max-width: none; }
.g-creed__in{ max-width: var(--m-read); margin-inline: auto; }
/* The last two: a half-width creed panel at 39 characters, and a quote band
   that loses too much to padding on a small phone. */
@media (max-width: 90rem){
  .g-creed__half{ grid-column: 1 / -1; }
}
@media (max-width: 26rem){
  .g-quote-band{ padding-inline: var(--s4); }
}
/* The quote band is set large and italic, so on a 360px phone it holds only
   29 characters. Ease the size there rather than the padding — the display
   face is what is eating the line. */
@media (max-width: 26rem){
  .g-quote-band p, .g-quote-band blockquote{ font-size: var(--t-lede); }
}
/* The half-width creed panel measured 39 characters even at 1920. It is
   prose, not a caption — give it the full row at every width. */
.g-creed__half{ grid-column: 1 / -1; }
/* Two display-face passages still measured 29 characters on a 360px phone.
   Large italic type simply does not fit a narrow screen at that size — ease
   the face and reclaim the padding rather than leave a column of fragments. */
@media (max-width: 26rem){
  .g-quote-band p, .g-quote-band blockquote{ font-size: var(--t-lede); }
  .g-quote-band{ padding-inline: var(--s3); }
  .g-creed__q{ font-size: var(--t-base); padding-inline: 0; }
  .g-creed__in{ padding-inline: var(--s3); }
}

/* ==========================================================================
   THE EVENTS SUBMENU
   Events covers three distinct things — weddings, celebrations, photography
   and film — and the row gave no sign of it. A tiered menu, opening on hover
   and on focus so it works from the keyboard as well as the pointer.
   ========================================================================== */
.g-nav__has-sub{ position: relative; display: inline-flex; align-items: center; }
.g-nav__caret{
  display: inline-block; width: 0; height: 0; margin-left: 6px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; opacity: .75;
  transition: transform .18s ease;
}
.g-nav__has-sub:hover .g-nav__caret,
.g-nav__has-sub:focus-within .g-nav__caret{ transform: rotate(180deg); }

.g-subnav{
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  z-index: 70; margin: 0; padding: var(--s3) 0; list-style: none;
  min-width: 15rem;
  background: #F6F1E7;                    /* literal: sits over a hero video */
  border: 1px solid #73562D;
  box-shadow: 0 14px 36px rgba(14,28,48,.24);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.g-nav__has-sub:hover .g-subnav,
.g-nav__has-sub:focus-within .g-subnav{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* A gap between the link and the panel would drop the hover, so the panel
   reaches up to meet it. */
.g-subnav::before{ content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }

.g .g-subnav a{
  display: flex; align-items: center; min-height: 44px;
  padding: 0 var(--s5); white-space: nowrap;
  font-family: var(--ui); font-size: 15px; letter-spacing: .04em;
  color: var(--blue-deep); text-decoration: none;
}
.g .g-subnav a:hover{ background: rgba(196,160,106,.2); }
.g .g-subnav a:focus-visible{ outline: 2px solid var(--gilt); outline-offset: -2px; }

/* Below the row breakpoint the panel handles navigation, so the submenu is
   not needed and would only overlap. */
@media (max-width: 68rem){
  .g-nav__has-sub{ display: none; }
}

/* ==========================================================================
   ROOM CARDS — ALIGNED ROWS
   Descriptions differ in length, so price, tags and button each started at a
   different height across a row. The card is a column: the description takes
   the slack, and everything below it lines up with its neighbours.
   ========================================================================== */
.g-cards .g-card{ display: flex; flex-direction: column; }
.g-cards .g-card__b{ display: flex; flex-direction: column; flex: 1; }
/* The description absorbs the difference in length. */
.g-cards .g-card__desc{ flex: 1 0 auto; margin-bottom: var(--s5); }
/* Everything below it sits on the same line across the row. */
.g-cards .g-card__rate{ margin-top: 0; }
.g-cards .g-tags{ margin-top: var(--s4); }
.g-cards .g-card__b > .g-btn,
.g-cards .g-card__b > p:last-child{ margin-top: var(--s5); }
/* When one card's tags wrap to an extra line the row loses its alignment.
   Reserve the taller of the two so the buttons and tags stay level. */
.g-cards .g-tags{ align-content: flex-start; }
.g-cards .g-card__b > *:last-child{ margin-top: auto; }

/* The homepage room blocks measured 39 characters — one short of readable.
   Widen the block rather than shrink the type. */
.g-homeroom__b{ padding-inline: var(--s5); }
.g-homerooms{ grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }

/* ==========================================================================
   WAITING LIST — the no-availability state
   A guest who finds nothing available was leaving with nothing, having
   arrived with dates. These are the most qualified people on the site.
   ========================================================================== */
.g-waitlist{
  margin-top: var(--s7); padding: var(--s6);
  border: 2px solid var(--gilt); background: var(--white);
}
.g-waitlist__form{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s5);
}
.g-waitlist__form input[type="email"]{
  flex: 1 1 18rem; max-width: 24rem;
  height: 52px; min-height: 52px; max-height: 52px;
  padding: 0 var(--s4); border: 1px solid var(--gilt);
  background: var(--white); font-family: var(--ui); font-size: 16px;
  color: var(--blue-deep);
}
.g-waitlist__form .g-btn{ height: 52px; flex: 0 0 auto; }
.g-waitlist__form > input[type="hidden"], .g-waitlist__form > .g-vh{ position: absolute; }

/* ==========================================================================
   RETURNING GUEST
   Quiet recognition, not a banner. Silent when the guest is unknown.
   ========================================================================== */
.g-welcome{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  margin: var(--s5) 0 0; padding: var(--s4) var(--s5);
  border-left: 2px solid var(--gilt); background: var(--sand-2);
  font-size: 16px; color: var(--ink);
}
.g-welcome__k{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gilt);
}
.g .g-welcome a{ color: var(--blue-deep); }

/* The figures block already exists; this keeps it legible on the dark ground
   used by the atelier scarcity section. */
.g-sec--dark .g-figs__n{ color: #fff; }
.g-sec--dark .g-figs__l{ color: #C9D4DF; }
/* The children hint carries the minimum age, so it must read. Inside a narrow
   field column it measured 37 characters. Let the row wrap and give the hint
   the full width beneath both fields — never wider than the row itself. */
.g-row{ flex-wrap: wrap; }
.g-row .g-field--narrow{ flex: 1 1 9rem; min-width: 0; }
.g-row .g-field--narrow .g-hint{
  flex: 1 0 100%; width: 100%; max-width: 100%; margin-top: 4px;
}
/* A hint that describes the whole row, not one field. */
.g-hint--row{ max-width: var(--m-read); margin-top: var(--s2); }

/* ==========================================================================
   THE FRENCH LINE
   The house is in the Ariège and the site already names its rooms in French.
   This sets a French phrase above its English, in the display face and in
   gilt, so the two read as one thing rather than a translation bolted on.
   ========================================================================== */
.g-fr{
  display: block; margin: 0 0 var(--s2);
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: var(--t-lede); line-height: 1.25;
  color: var(--gilt); letter-spacing: .01em;
}
.g-fr__en{
  display: block;
  font-family: var(--ui); font-style: normal;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-top: 4px;
}
/* On a dark ground the gilt still carries, but the English needs lifting. */
.g-sec--dark .g-fr__en, .g-panel--dark .g-fr__en{ color: #C9D4DF; }

/* A French motto used as a closing line, centred under a rule. */
.g-devise{
  margin: var(--s7) auto 0; padding-top: var(--s5);
  max-width: var(--m-read); text-align: center;
  border-top: 1px solid var(--gilt);
}
.g-devise__fr{
  display: block; font-family: var(--display); font-style: italic;
  font-weight: 300; font-size: var(--t-h3); line-height: 1.35;
  color: var(--blue-deep);
}
.g-devise__en{
  display: block; margin-top: var(--s3);
  font-family: var(--ui); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gilt);
}

/* ==========================================================================
   SECTION TAB ROW
   A property's sections listed under its title, so a reader comparing one
   against another does not have to go back through the nav.
   ========================================================================== */
.g-tabs{
  display: flex; flex-wrap: wrap; gap: 0;
  margin: var(--s5) 0 0;
  border-bottom: 1px solid var(--gilt);
}
.g .g-tabs a{
  display: flex; align-items: center; min-height: 48px;
  padding: 0 var(--s5); position: relative;
  font-family: var(--ui); font-size: 15px; letter-spacing: .06em;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.g .g-tabs a:hover{ color: var(--blue-deep); }
.g .g-tabs a[aria-current="page"]{ color: var(--blue-deep); font-weight: 600; }
.g .g-tabs a[aria-current="page"]::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--blue-deep);
}
.g .g-tabs a:focus-visible{ outline: 2px solid var(--gilt); outline-offset: -3px; }
@media (max-width: 34rem){
  .g-tabs{ overflow-x: auto; scrollbar-width: none; }
  .g-tabs::-webkit-scrollbar{ display: none; }
  .g .g-tabs a{ padding: 0 var(--s4); }
}

/* ==========================================================================
   FACT STRIP
   Hard figures under a hero, each with its drawn mark. Soho House states 36
   bedrooms and a pool; ours are stranger, so they are worth stating plainly.
   ========================================================================== */
.g-strip{
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  margin: var(--s6) 0 0; padding: var(--s6) 0;
  border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt);
  text-align: center;
}
.g-strip__m{ display: block; color: var(--gilt); }
.g-strip__m .g-mark{ width: 84px; height: 26px; }
.g-strip__n{
  display: block; margin-top: var(--s3);
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); line-height: 1;
  color: var(--blue-deep); font-variant-numeric: lining-nums;
}
.g-strip__l{
  display: block; margin-top: var(--s2);
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}

/* ==========================================================================
   KEY INFORMATION
   Address, arrival, travel, contact and payment in one block rather than
   scattered across the site.
   ========================================================================== */
.g-key{
  display: grid; gap: var(--s6) var(--s7); margin-top: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.g-key__k{
  margin: 0 0 var(--s2); font-family: var(--ui);
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gilt);
}
.g-key__v{ margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); max-width: var(--m-tight); }
.g .g-key__v a{ color: var(--blue-deep); }

/* ==========================================================================
   EXTRAS WITH AND WITHOUT A PHOTOGRAPH
   Not every experience has an image yet. A card without one should not sit
   half the height of its neighbour — it takes a drawn rule in place of the
   picture so the row still reads as a set.
   ========================================================================== */
.g-extra{ display: flex; flex-direction: column; }
.g-extra__b{ display: flex; flex-direction: column; flex: 1; }
.g-extra__d{ flex: 1 0 auto; }
/* A card with no photograph gets a gilt rule where the image would be. */
.g-extra:not(:has(img)) .g-extra__b{ padding-top: var(--s6); position: relative; }
.g-extra:not(:has(img)) .g-extra__b::before{
  content: ""; position: absolute; top: 0; left: var(--s6); right: var(--s6);
  height: 2px; background: var(--gilt);
}
.g-extra__p{ margin-top: var(--s4); }

/* ==========================================================================
   THE FLOWER CALENDAR
   What is in flower decides more wedding dates than anything except price.
   Set on the page ground with a gilt frame, months as a row of buttons.
   ========================================================================== */
.g-bloom{
  margin-top: var(--s7);
  border-top: 2px solid var(--gilt); border-bottom: 2px solid var(--gilt);
  padding: var(--s6) 0;
}
.g-bloom__months{ display: flex; flex-wrap: wrap; gap: var(--s2); }
.g-bloom__m{
  min-height: 44px; padding: 0 var(--s4); cursor: pointer;
  border: 1px solid var(--gilt); background: transparent;
  font-family: var(--ui); font-size: 15px; color: var(--blue-deep);
}
.g-bloom__m:hover{ background: var(--white); }
.g-bloom__m:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
.g-bloom__m.is-on{ background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

.g-bloom__out{ margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgba(115,86,45,.3); }
.g-bloom__lede{
  margin: 0 0 var(--s5); max-width: var(--m-read);
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); line-height: 1.3; color: var(--blue-deep);
}
.g-bloom__list{
  display: grid; gap: var(--s2) var(--s5); margin: 0 0 var(--s5); padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.g-bloom__list li{
  position: relative; padding-left: var(--s5);
  font-size: 16px; line-height: 1.6; color: var(--ink);
}
.g-bloom__list li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border: 1px solid var(--gilt); border-radius: 50%;
}
.g-bloom__note{
  /* In characters, not rem: 46rem measured 102 characters at this size. */
  margin: 0; max-width: var(--m-wide); padding-left: var(--s5);
  border-left: 2px solid var(--gilt);
  font-size: 16px; line-height: 1.6; color: var(--ink-soft);
}

/* ==========================================================================
   THE DRAWN HOUSE MARK
   The logo is a hosted PNG, so it cannot take the ink colour or scale as an
   ornament. This is the same mark drawn: the G under a coronet in laurel,
   in currentColor, for use as a device rather than a masthead.
   ========================================================================== */
.g-monogram{ width: 56px; height: 63px; color: var(--gilt); }
.g-monogram--lg{ width: 88px; height: 99px; }
.g-monogram--sm{ width: 40px; height: 45px; }
.g-sec--dark .g-monogram, .g-panel--dark .g-monogram{ color: #D9C79B; }
.g-mono__wrap{ display: flex; justify-content: center; padding: var(--s6) 0 0; }

/* A section opened by the mark rather than a rule. */
.g-crested{ text-align: center; }
.g-crested .g-monogram{ margin: 0 auto var(--s4); }

/* ==========================================================================
   DEFENCE AGAINST style.css
   style.css line 357 is a bare element selector —
       form { display: flex; flex-direction: column }
   — and it loads before this file, so it applies to EVERY form on the public
   site, not the staff one it was written for. Any form of ours that relies
   on the default row direction inherits a column instead, and `flex: 1 1 Xrem`
   then sets a HEIGHT rather than a width. That is what made the journal
   email field 288px tall.

   Rather than patch each form as it breaks, every form component here states
   its own direction. A bare element selector cannot then reach past it.
   ========================================================================== */
.g-journal__form,
.g-waitlist__form,
.g-navwrap__news,
.g-rp__f,
.g-row{ flex-direction: row; }

/* Forms that are genuinely grids must keep their display too. */
.g-search,
.g-herosearch{ display: grid; }

/* Any other form of ours: row by default, wrapping rather than stacking. */
.g form:not(.g-stack){ flex-direction: row; flex-wrap: wrap; }
.g form.g-stack{ flex-direction: column; }
/* A field inside a form that style.css has flipped to column still gets a
   column-sized width. State the field's own behaviour so it fills the row
   whatever direction the parent ends up in. */
.g form .g-field, .g form .g-field--narrow{ min-width: 0; }
/* Only fields inside a row share a line. A field on its own keeps the
   measure it already had, whatever direction style.css forces on the form. */
.g form .g-row > .g-field{ flex: 1 1 14rem; }
.g form .g-field > label,
.g form .g-field > .g-hint{ max-width: var(--m-wide); }
/* A panel that style.css has turned into a flex container sizes its children
   by content, so a field inside one gets a fraction of the width. A form
   panel stacks its fields and lets each fill the panel. */
.g .g-panel > form,
.g form.g-panel{ display: flex; flex-direction: column; }
.g .g-panel .g-field{ width: 100%; flex: 0 0 auto; }
.g .g-panel .g-row{ display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.g .g-panel .g-row > .g-field{ flex: 1 1 12rem; width: auto; }

/* ==========================================================================
   THE BOOKING TIMELINE
   Dated steps down a single gilt rule. A step already past is filled; a step
   still to come is open, so a guest can see where they are without reading.
   ========================================================================== */
.g-timeline{ margin-top: var(--s6); }
.g-timeline__l{
  list-style: none; margin: var(--s5) 0 var(--s4); padding: 0 0 0 var(--s6);
  border-left: 1px solid var(--gilt);
}
.g-timeline__i{
  position: relative; padding: 0 0 var(--s5) 0;
  display: grid; gap: 2px;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
}
@media (max-width: 34rem){ .g-timeline__i{ grid-template-columns: 1fr; } }
.g-timeline__i::before{
  content: ""; position: absolute; left: calc(var(--s6) * -1 - 1px); top: .45em;
  width: 9px; height: 9px; margin-left: -4px;
  border: 1px solid var(--gilt); border-radius: 50%; background: var(--parchment);
}
.g-timeline__i.is-done::before{ background: var(--gilt); }
.g-timeline__i:last-child{ padding-bottom: 0; }
.g-timeline__k{
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
  padding-top: 2px;
}
.g-timeline__v{ font-size: 16px; line-height: 1.6; color: var(--ink); max-width: var(--m-read); }

/* ==========================================================================
   ADD SOMETHING AFTER BOOKING
   ========================================================================== */
.g-addons{ margin-top: var(--s6); }
.g-addons__l{
  list-style: none; margin: var(--s5) 0; padding: 0;
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: stretch;
  /* Rows sized to their own content rather than the tallest in the grid. */
  grid-auto-rows: min-content;
}
/* The card fills its cell, so a row of cards is one height rather than
   each sitting at its own with a gap beneath. */
.g-addons__i{ display: flex; }
.g-addons__i label{ flex: 1; }
.g-addons__i label{
  display: grid; gap: 2px 10px; align-items: start; cursor: pointer;
  grid-template-columns: auto 1fr auto;
  align-content: start;
  padding: var(--s4); border: 1px solid var(--line); background: var(--white);
  min-height: 44px;
}
.g-addons__i label:hover{ border-color: var(--gilt); }
.g-addons__i input{ margin-top: 4px; width: 18px; height: 18px; }
.g-addons__n{ font-family: var(--display); font-size: 18px; color: var(--blue-deep); }
.g-addons__p{
  font-family: var(--ui); font-size: 15px; color: var(--gilt);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.g-addons__d{
  grid-column: 2 / -1; font-size: 15px; line-height: 1.55; color: var(--ink-soft);
  max-width: var(--m-read);
}
.g-addons__f > .g-btn{ margin-top: var(--s3); }


/* ==========================================================================
   BEFORE AND AFTER
   The range input is the control, so it works from the keyboard and reads
   correctly without anything added. The handle is decoration over it.
   ========================================================================== */
.g-ba{ margin: var(--s6) 0 0; }
.g-ba__f{
  position: relative; overflow: hidden; touch-action: none;
  border: 1px solid var(--gilt); background: var(--sand-2);
  aspect-ratio: 3 / 2;
}
.g-ba__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.g-ba__f{ contain: paint; }
/* The before image stays exactly the size of the figure; the reveal is done
   by clipping the wrapper, not by moving or resizing the image. An earlier
   version sized the image to the viewport, which escaped the container, and
   then to the clip, which squashed it. */
.g-ba__clip{
  position: absolute; inset: 0; width: 100%;
  clip-path: inset(0 50% 0 0);
  border-right: 0;
}
.g-ba__clip .g-ba__img{ width: 100%; height: 100%; object-fit: cover; }

.g-ba__tag{
  position: absolute; top: var(--s3); z-index: 3;
  padding: 4px 10px; background: rgba(14,28,48,.82); color: #fff;
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.g-ba__tag--b{ left: var(--s3); }
.g-ba__tag--a{ right: var(--s3); }

/* The real control, laid over the image and made invisible but operable. */
.g-ba__range{
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.g-ba__range:focus-visible{ opacity: .001; outline: 3px solid var(--gilt); outline-offset: -3px; }
.g-ba__handle{
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3;
  width: 2px; margin-left: -1px; background: var(--parchment);
  pointer-events: none;
}
.g-ba__handle::after{
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 2px solid var(--parchment); border-radius: 50%;
  background: rgba(14,28,48,.55);
}

.g-ba__cap{ display: grid; gap: 4px; margin-top: var(--s4); }
.g-ba__t{
  font-family: var(--display); font-size: var(--t-h3);
  color: var(--blue-deep);
}
.g-ba__n{ font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: var(--m-wide); }
.g-ba__n b{
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
  margin-right: 6px;
}

/* Pre-arrival and share-link blocks. */
.g-prearr__f{ display: flex; flex-direction: column; gap: var(--s4); }
.g-prearr__f textarea{
  width: 100%; padding: var(--s3) var(--s4); min-height: 5rem;
  border: 1px solid var(--gilt); background: var(--white);
  font-family: var(--ui); font-size: 16px; color: var(--blue-deep);
}
.g-share__row{ display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s5); }
.g-share__url{
  flex: 1 1 20rem; min-width: 0;
  height: 52px; min-height: 52px; max-height: 52px;
  padding: 0 var(--s4); border: 1px solid var(--gilt); background: var(--white);
  font-family: var(--ui); font-size: 15px; color: var(--ink-soft);
}
.g-share__row .g-btn{ height: 52px; flex: 0 0 auto; }
.g-say__src{
  display: block; margin-top: 2px;
  font-family: var(--ui); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gilt);
}

/* Guest profile, linked bookings, add-a-room. */
.g-prof__f, .g-addroom__f{ display: flex; flex-direction: column; gap: var(--s4); }
.g-prof__f textarea{
  width: 100%; padding: var(--s3) var(--s4); min-height: 4.5rem;
  border: 1px solid var(--gilt); background: var(--white);
  font-family: var(--ui); font-size: 16px; color: var(--blue-deep);
}
.g-linked__l{ list-style: none; margin: var(--s5) 0 var(--s4); padding: 0; }
.g-linked__i{
  display: grid; gap: 2px var(--s5); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 1fr) auto;
}
@media (max-width: 34rem){ .g-linked__i{ grid-template-columns: 1fr; } }
.g-linked__i.is-this{ border-left: 2px solid var(--gilt); padding-left: var(--s4); }
.g-linked__r{ font-family: var(--display); font-size: 18px; color: var(--blue-deep); }
.g-linked__n{ font-size: 15px; color: var(--ink); }
.g-linked__c{
  font-family: var(--ui); font-size: 13px; letter-spacing: .06em;
  color: var(--gilt); font-variant-numeric: lining-nums;
}

/* ==========================================================================
   THE COST CALCULATOR, NEXT FREE NIGHTS, COMPARISON, TAKEAWAY, SEASON
   ========================================================================== */
.g-cost{ margin-top: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt); }
.g-cost__row{ display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.g-cost__l{ font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); }
.g-cost__b{ width: 44px; height: 44px; cursor: pointer; border: 1px solid var(--gilt); background: transparent; color: var(--blue-deep); font-size: 18px; line-height: 1; }
.g-cost__b:hover{ background: var(--gilt); color: #fff; }
.g-cost__n{ width: 5rem; height: 44px; text-align: center; border: 1px solid var(--gilt); background: var(--white); font-family: var(--ui); font-size: 16px; color: var(--blue-deep); }
.g-cost__out{ display: grid; gap: var(--s4) var(--s6); margin: var(--s5) 0 var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(9rem,100%),1fr)); }
.g-cost__out dt{ font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); }
.g-cost__out dd{ margin: 2px 0 0; font-family: var(--display); font-size: var(--t-h2); color: var(--blue-deep); font-variant-numeric: lining-nums; }

.g-nextf{ list-style: none; margin: var(--s5) 0 var(--s4); padding: 0; }
.g-nextf__i{ display: grid; gap: 2px var(--s5); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(7rem,auto) minmax(9rem,1fr) auto auto auto; }
@media (max-width: 52rem){ .g-nextf__i{ grid-template-columns: 1fr; gap: 4px; } }
.g-nextf__d{ font-family: var(--display); font-size: 18px; color: var(--blue-deep); font-variant-numeric: lining-nums; }
.g-nextf__r{ font-size: 15px; color: var(--ink); }
.g-nextf__n, .g-nextf__p{ font-family: var(--ui); font-size: 15px; letter-spacing: .05em; color: var(--gilt); }

.g-cmp{ margin-top: var(--s6); }
.g-cmp__pick{ display: flex; flex-wrap: wrap; gap: var(--s4); }
.g-cmp__out{ margin-top: var(--s5); overflow-x: auto; }
.g-cmp__t{ width: 100%; min-width: 30rem; border-collapse: collapse; }
.g-cmp__t th, .g-cmp__t td{ padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; }
.g-cmp__t thead th{ font-family: var(--display); font-size: 18px; color: var(--blue-deep); border-bottom: 2px solid var(--gilt); }
.g-cmp__t tbody th{ font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gilt); width: 8rem; }

.g-takeaway__card{ margin: var(--s5) 0; padding: var(--s5); border: 2px solid var(--gilt); background: var(--white); }
.g-takeaway__k{ margin: var(--s4) 0 0; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); }
.g-takeaway__card > .g-takeaway__k:first-child{ margin-top: 0; }
.g-takeaway__v{ margin: 2px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); }

.g-season{ margin-top: var(--s5); }
.g-season__pick{ display: flex; flex-wrap: wrap; gap: 4px; }
.g-season__m{ min-height: 44px; min-width: 3.4rem; cursor: pointer; border: 1px solid var(--gilt); background: transparent; font-family: var(--ui); font-size: 13px; color: var(--blue-deep); }
.g-season__m:hover{ background: var(--white); }
.g-season__m.is-on{ background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.g-season__out{ margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid rgba(115,86,45,.3); }
.g-season__t{ margin: 0 0 var(--s4); max-width: var(--m-read); font-family: var(--display); font-weight: 300; font-size: var(--t-h3); line-height: 1.3; color: var(--blue-deep); }
.g-season__l{ margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%),1fr)); }
.g-season__l li{ position: relative; padding-left: var(--s5); font-size: 16px; line-height: 1.55; color: var(--ink); }
.g-season__l li::before{ content: "·"; position: absolute; left: var(--s3); color: var(--gilt); font-weight: 700; }

/* On a page that HAS a takeaway card, the card is the only thing worth
   printing, so everything else is hidden and the card is promoted.

   Scoped with :has() rather than applied to every page. Unscoped, the
   `body * { visibility: hidden }` below restored only the card — and on any
   page without one, which is nearly all of them, nothing ever became visible
   again and the page printed as blank sheets. The booking confirmation was
   one of them, and it carries its own "Print or save as PDF" button.

   :has() is unsupported in a few older browsers; there the rule simply does
   not apply, which prints the whole page rather than nothing. Failing toward
   too much ink beats failing toward an empty sheet. */
/* This targeted .g-takeaway__card, a class in no template — the card is .g-recap —
   so "Print or save as PDF" printed the whole page: five buttons, the upsell, the
   photo band. On paper a guest needs the reference block and the money recap. */
@media print{
  body:has(.g-recap) .g-conf__acts, body:has(.g-recap) .g-recap__a,
  body:has(.g-recap) .g-sec--sand, body:has(.g-recap) .g-band,
  body:has(.g-recap) .g-cred, body:has(.g-recap) main > .g-wrap:empty{ display: none !important; }
  body:has(.g-recap) .g-recap{ border-top: 1px solid #000; padding: 12pt 0 0; margin: 12pt 0 0; background: none; }
  .g-recap__k, .g-recap__h{ color: #000 !important; }
}

/* ==========================================================================
   LIVE WEATHER
   ========================================================================== */
.g-wx{ margin-top: var(--s4); }
.g-wx__fallback{ margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: var(--m-read); }
.g-wx__live{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.g-wx__k{ font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); }
.g-wx__t{ font-family: var(--display); font-size: var(--t-h2); color: var(--blue-deep); font-variant-numeric: lining-nums; }
.g-wx__d{ font-size: 16px; color: var(--ink); }
.g-wx__n{ flex: 1 0 100%; font-size: 15px; color: var(--ink-soft); }

/* ==========================================================================
   QUICK BOOK, IN THE SIDE PANEL
   ========================================================================== */
.g-qbook{
  display: block; margin: 0 0 var(--s6); padding: var(--s5);
  border: 1px solid rgba(196,160,106,.5); background: rgba(196,160,106,.08);
}
.g-qbook__h{
  margin: 0 0 var(--s4); font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #D9C79B;
}
.g-qbook__row{ display: flex; flex-wrap: wrap; gap: var(--s3); }
.g-qbook__f{ display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.g-qbook__f label{ font-family: var(--ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #A9BCCD; }
.g-qbook__f input{
  height: 46px; min-width: 0; min-height: 46px; max-height: 46px; width: 100%;
  padding: 0 var(--s3); border: 1px solid rgba(196,160,106,.55);
  background: rgba(255,255,255,.06); color: #F3EEE4;
  font-family: var(--ui); font-size: 15px;
}
.g-qbook__f input::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.55); }
.g-qbook__go{ width: 100%; margin-top: var(--s4); }
.g-qbook__n{ margin: var(--s3) 0 0; font-size: 15px; line-height: 1.5; color: #A9BCCD; }

/* ==========================================================================
   THE YEAR SLIDER AND THE SEVEN STEPS
   ========================================================================== */
.g-years{ margin-top: var(--s6); }
.g-years__r{ width: 100%; height: 44px; accent-color: var(--blue-deep); cursor: ew-resize; }
.g-years__scale{ display: flex; justify-content: space-between; margin-top: -6px;
  font-family: var(--ui); font-size: 12px; letter-spacing: .08em; color: var(--gilt); }
.g-years__out{ margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--gilt); }
.g-years__y{ margin: 0 0 var(--s3); font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); }
.g-years__t{ margin: 0 0 var(--s4); max-width: var(--m-read); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); line-height: 1.35; color: var(--blue-deep); }
.g-years__n{ margin: 0; max-width: var(--m-wide); font-size: 16px; line-height: 1.6; color: var(--ink-soft);
  padding-left: var(--s5); border-left: 2px solid var(--gilt); }

.g-steps{ list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s6) 0 0; padding: 0; }
.g-steps__b{ display: flex; align-items: center; gap: var(--s2); min-height: 44px;
  padding: 0 var(--s4); cursor: pointer; border: 1px solid var(--gilt); background: transparent;
  font-family: var(--ui); font-size: 15px; color: var(--blue-deep); }
.g-steps__b:hover{ background: var(--white); }
.g-steps__b.is-on{ background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.g-steps__n{ font-variant-numeric: lining-nums; opacity: .6; }
.g-steps__b.is-on .g-steps__n{ opacity: .8; }
.g-steps__out{ margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgba(115,86,45,.3); }
.g-steps__t{ margin: 0 0 var(--s3); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); color: var(--blue-deep); }
.g-steps__d{ margin: 0 0 var(--s4); max-width: var(--m-wide); font-size: 16px; line-height: 1.6; }
.g-steps__w{ margin: 0; max-width: var(--m-wide); padding-left: var(--s5); border-left: 2px solid var(--gilt);
  font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* ==========================================================================
   THE LIGHT PLANNER
   ========================================================================== */
.g-light{ margin-top: var(--s6); }
.g-light__pick{ display: flex; flex-wrap: wrap; gap: var(--s2); }
.g-light__h{ min-height: 44px; padding: 0 var(--s4); cursor: pointer;
  border: 1px solid var(--gilt); background: transparent;
  font-family: var(--ui); font-size: 15px; color: var(--blue-deep); }
.g-light__h:hover{ background: var(--white); }
.g-light__h.is-on{ background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.g-light__out{ margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid rgba(115,86,45,.3); }
.g-light__t{ margin: 0 0 var(--s4); max-width: var(--m-read); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); line-height: 1.3; color: var(--blue-deep); }
.g-light__l{ margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%),1fr)); }
.g-light__l li{ position: relative; padding-left: var(--s5); font-size: 16px; line-height: 1.55; color: var(--ink); }
.g-light__l li::before{ content: "·"; position: absolute; left: var(--s3); color: var(--gilt); font-weight: 700; }

/* Ticks, and the negative variant. */
.g-ticks{ list-style: none; margin: var(--s4) 0 0; padding: 0; }
.g-ticks li{ position: relative; padding: 0 0 var(--s3) var(--s5); font-size: 16px; line-height: 1.55; }
.g-ticks li::before{ content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 5px;
  border-left: 1.5px solid var(--gilt); border-bottom: 1.5px solid var(--gilt); transform: rotate(-45deg); }
.g-ticks--no li::before{ width: 10px; height: 0; border-left: 0; border-bottom: 1.5px solid var(--ink-soft);
  transform: none; top: .75em; opacity: .6; }

/* The total rule at full currentColor is heavier than the type; soften it
   without picking a colour that only works on one ground. */
.g-quote__total{ border-top-color: color-mix(in srgb, currentColor 35%, transparent); }
/* On a dark panel the whole block takes the panel's own ink. */
.g-panel--dark .g-quote, .g-dossier .g-quote{ color: #EDE4D3; border-left-color: var(--gilt); }
.g-panel--dark .g-quote__warn, .g-dossier .g-quote__warn{ color: #FFB4AC; }

/* ==========================================================================
   RUNNING TEXT NEVER SITS AT THE LABEL SIZE
   13px is the label step: uppercase, tracked, a few words. Eighty-seven
   places were carrying whole sentences at it, which is why so much of the
   site read as small print. Hints and notes belong at the small step.
   ========================================================================== */
.g-hint, .g-foot-note, .g-journal__note, .g-qbook__n, .g-book-bar__note,
.g-pay__note, .g-nextf__n, .g-ba__n{
  font-size: var(--t-small);
  line-height: 1.55;
}
/* Uppercase labels keep the label size — that is what it is for. */
.g-eyebrow, .g-limit__k, .g-key__k, .g-timeline__k, .g-cost__l,
.g-strip__l, .g-fr__en, .g-devise__en, .g-say__src, .g-years__y{
  font-size: var(--t-label);
}
/* ==========================================================================
   THE READING FLOOR
   Chasing this component by component failed twice. The rule is not that
   particular blocks should be larger — it is that running text is never set
   at the label size, anywhere. Stated once, so specificity stops mattering.

   Uppercase is exempt: a tracked uppercase label at 13px is legible and is
   what the step exists for.
   ========================================================================== */
main p, main li, main dd, main dt, main td, main figcaption,
main blockquote, main label,
/* The :not() chain makes this span line more specific than almost any component rule, so
   "anything that sets a larger size keeps it" was untrue for spans: the motto (27px), the
   signature (22px), the booking-bar title (23px), the room price and the comparison-table
   prices were all held at 15px. Measured by rendering every page with and without this
   line's specificity; the six classes it flattened are exempt. None of them was being
   lifted by it, so exempting them cannot make anything smaller. */
main span:not([class*="__k"]):not([class*="__n"]):not([class*="__l"]):not(.g-fig__n):not(.g-opt):not(.g-fig):not(.g-devise__fr):not(.g-bookbar__t):not(.g-took__sigt):not(.g-gloss__en):not(.g-timeline__v){
  /* An absolute floor, not max(…, 1em): 1em is the inherited size, so the
     max() resolved to the very value it was meant to lift. */
  font-size: var(--t-small);
}
/* Anything that deliberately sets a larger size keeps it — those rules come
   later in the file and win on order. */
/* Uppercase labels keep the label step. Note that .g-tags li is NOT here:
   an earlier version put it back to 13px seven lines after setting the floor,
   which defeated the floor entirely. A tag carrying a sentence is not a tag. */
main [class*="__k"], main .g-eyebrow,
main th, main dt.g-lbl{ font-size: var(--t-label); }
/* Short tags — the pill kind — keep the label size. */
.g-tags--short li{ font-size: var(--t-label); }
/* Except where an uppercase class is carrying a sentence — then it is not a
   label, and the floor applies again. */
main .g-facts-list dt, main .g-facts-list dd{ font-size: var(--t-small); }

/* Two found by the stricter checks:
   - .g-journal__note dropped below the floor on phones via a media query
     that predates the scale.
   - .g-figs__l takes a pale ink meant for the dark section, but the block is
     also used on cream, where it reads at about 1.4:1. Scope the pale ink to
     the dark ground and give the default a readable colour. */
.g-journal__note{ font-size: var(--t-small); }
@media (max-width: 34rem){ .g-journal__note{ font-size: var(--t-small); } }

.g-figs__l{ color: var(--ink-soft); }
.g-sec--dark .g-figs__l, .g-panel--dark .g-figs__l{ color: #C9D4DF; }
.g-figs__n{ color: var(--blue-deep); }
.g-sec--dark .g-figs__n, .g-panel--dark .g-figs__n{ color: #fff; }

/* ==========================================================================
   .g-sec--dark HAD NO BACKGROUND
   I invented this class writing the atelier scarcity section and only ever
   wrote colour overrides for it — never the dark ground those colours assume.
   So every "dark" section rendered on cream with pale ink on it, at roughly
   1.4:1. Define the ground, once.
   ========================================================================== */
.g-sec--dark{
  background: var(--blue-deep);
  color: #EDE4D3;
}
.g-sec--dark .g-place,
.g-sec--dark h2, .g-sec--dark h3{ color: #fff; }
.g-sec--dark .g-p, .g-sec--dark p, .g-sec--dark li, .g-sec--dark dd{ color: #EDE4D3; }
.g-sec--dark .g-eyebrow, .g-sec--dark .g-fr{ color: #D9C79B; }
.g-sec--dark .g-limit{ border-left-color: #D9C79B; color: #C9D4DF; }
.g-sec--dark .g-limit__k{ color: #D9C79B; }
.g .g-sec--dark a{ color: #EDE4D3; }
/* AND THE SAME LINK INSIDE A PARAGRAPH, which the rule above lost to.
   `.g main p a` is three elements deep and `.g .g-sec--dark a` is one, so
   body copy won and every link in a dark closing section was painted
   var(--blue-deep) -- navy on navy, measured at 1.00. Not hard to read:
   invisible. "Ask about a month" was a live link nobody could see.
   Matched at the same depth rather than forced with !important. */
.g main .g-sec--dark p a,
.g main .g-sec--dark li a,
.g main .g-sec--dark dd a{ color: #EDE4D3; }
/* AND THE SECONDARY LINK BESIDE A BUTTON, which beat even that.
   `.g main p > .g-btn + a:not(.g-btn)` was written to style the quiet
   link that sits next to a call to action, and it counts three classes to
   the rule above's two. On a dark ground it painted that link navy on
   navy: 1.00, which is not low contrast but no contrast. "Ask about a
   month" was a live link that could not be seen at all. */
.g main .g-sec--dark p > .g-btn + a:not(.g-btn){ color: #EDE4D3; }
.g .g-sec--dark .g-btn{ border-color: #D9C79B; color: #EDE4D3; }
/* --gilt is rgb(115,86,45), a dark bronze. Navy on it measures 1.91,
   so the one button in the section meant to be the loudest thing on it
   was the hardest to read. #D9C79B is the lighter gold this file
   already uses for eyebrows on a dark ground, and navy on it is 7.5. */
.g .g-sec--dark .g-btn--solid{ background: #D9C79B; border-color: #D9C79B; color: var(--blue-deep); }

/* ==========================================================================
   .g-figs — THE LAYOUT WAS NEVER WRITTEN EITHER
   Same fault as .g-sec--dark: I wrote colour overrides for this block and
   never the layout they sit on, so the figures and their labels ran together
   as one line of inline text.
   ========================================================================== */
.g-figs{
  display: grid; gap: var(--s6) var(--s5); margin: var(--s6) 0 var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.g-figs__i{ display: flex; flex-direction: column; gap: 4px; }
.g-figs__n{
  font-family: var(--display); font-weight: 300; line-height: 1;
  font-size: var(--t-h2);
  font-variant-numeric: lining-nums;
}
.g-figs__l{
  font-family: var(--ui); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ==========================================================================
   THE LAST TWO
   .g-journal__note had a phone media query later in the file than my earlier
   fix, so the fix lost on source order. And a bare <p> inside a hero took the
   page ink — navy — on the hero's navy ground, which is invisible rather than
   merely low contrast.
   ========================================================================== */
.g-journal__note,
.g-journal__note *{ font-size: var(--t-small) !important; }

.g-hero p, .g-hero li, .g-hero dd, .g-hero span:not([class*="__k"]){
  color: #EDE4D3;
}
.g-hero .g-btn{ color: #EDE4D3; border-color: #D9C79B; }
.g-hero .g-btn--solid{ background: var(--gilt); border-color: var(--gilt); color: var(--blue-deep); }

/* A heading inside a panel. I used this class across the new guest partials
   and never wrote the rule, so it was rendering at the browser's h2 default —
   24px, which is not a step on the scale and does not match the h3 headings
   beside it. */
.g-panel__h{
  margin: 0 0 var(--s3);
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); line-height: 1.25;
  color: var(--blue-deep);
}

/* Display-face passages — pull quotes, ledes, mottos — take the same scale as
   headings, which is right on a desktop and too large on a phone: at 28px a
   345px column holds twenty-eight characters. Ease them below 30rem so the
   measure recovers, without touching the headings themselves. */
/* Display-face PASSAGES — pull quotes, ledes, mottos, quote bands — take the
   heading scale, which suits three words and not a sentence. At 40px a 704px
   column holds thirty-eight characters. Cap them at the lede step from tablet
   down; true headings are untouched. */
@media (max-width: 52rem){
  .g-pull p, .g-pull, .g-lede, .g-hero__lede, .g-quote-band__t,
  .g-bloom__lede, .g-season__t, .g-light__t, .g-years__t, .g-plan__line{
    font-size: var(--t-lede);
  }
}


/* A quote band is a sentence in the display face, not a heading. Sized by
   measure rather than by breakpoint: chasing it with media queries just moves
   the problem to the next width. */
.g-quote-band__t{
  font-size: min(var(--t-h2), 5.2cqw, 42px);
  max-width: var(--m-tight);
}
.g-quote-band{ container-type: inline-size; }
@supports not (font-size: 1cqw){
  .g-quote-band__t{ font-size: var(--t-lede); }
}

/* ==========================================================================
   THE BOOKING PANEL MUST STAY REACHABLE
   Sticky was not enough. Filling the form scrolls past the panel, so by the
   time a guest has finished typing the button is above the fold and they
   have to scroll back up to find it. Below tablet the panel was not sticky
   at all, so it sat at the very bottom of a long page.

   Two fixes: the panel scrolls within itself when it is taller than the
   screen, and below the two-column breakpoint a compact bar carries the
   total and the button at the foot of the window.
   ========================================================================== */
@media (min-width: 62rem){
  .g-aside{
    position: sticky; top: 96px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* A panel that scrolls internally needs to show it does. */
  .g-aside{ scrollbar-width: thin; }
}

/* Below two columns, a bar at the foot of the window. */
.g-bookbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--blue-deep); border-top: 1px solid var(--gilt);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
}
@media (max-width: 61.99rem){
  .g-bookbar{ display: flex; }
  /* so the bar never covers the last thing on the page */
  main{ padding-bottom: 84px; }
}
.g-bookbar__sum{ flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.g-bookbar__t{
  display: block; font-family: var(--display); font-size: var(--t-lede);
  color: #fff; font-variant-numeric: lining-nums;
}
.g-bookbar__n{
  display: block; font-family: var(--ui); font-size: var(--t-sm);
  letter-spacing: .06em; color: #C9D4DF;
}
.g-bookbar .g-btn{ flex: 0 0 auto; min-height: 48px; }

/* The date-picker button sat immediately against its own label with no gap,
   so "ARRIVAL" and "Add dates" read as one broken string. The label belongs
   above the control, as it does on every other field on the site. */
.g-rp__f, .g-dates__f{
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.g-rp__f > label, .g-dates__f > label{ display: block; }
.g-rp__btn{ width: 100%; text-align: left; }

/* ==========================================================================
   IMAGES MUST NOT SHIFT THE LAYOUT
   No image on the site carried width/height, so every one reflowed the page
   as it arrived — the worst-feeling thing on a slow connection. The source
   dimensions are not known here, so the space is reserved by ratio instead,
   which is reliable regardless of the file.
   ========================================================================== */
main img{ height: auto; }
.g-card__img, .g-homeroom__img, .g-extra img, .g-band img{
  aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--sand-2);
}
.g-hero img, .g-hero video{ aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.g-ba__img{ aspect-ratio: auto; }   /* the slider sets its own */

/* ==========================================================================
   FAQ
   ========================================================================== */
.g-faq2{ margin-top: var(--s6); max-width: var(--m-wide); }
.g-faq2__i{ border-bottom: 1px solid var(--line); }
.g-faq2__i summary{
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 56px; padding: var(--s3) 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: var(--t-h3); color: var(--blue-deep);
}
.g-faq2__i summary::-webkit-details-marker{ display: none; }
.g-faq2__i summary::after{
  content: "+"; flex: 0 0 auto; font-family: var(--ui); font-size: var(--t-lede);
  color: var(--gilt);
}
.g-faq2__i[open] summary::after{ content: "–"; }
.g-faq2__i summary:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
.g-faq2__i p{ margin: 0 0 var(--s5); max-width: var(--m-wide); font-size: var(--t-base); line-height: 1.65; }

/* ==========================================================================
   THE 404 LIST
   ========================================================================== */
.g-lost{ list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem,100%),1fr)); }
.g .g-lost a{
  display: block; padding: var(--s4) var(--s5); min-height: 44px;
  border: 1px solid var(--line); background: var(--white); text-decoration: none;
}
.g .g-lost a:hover{ border-color: var(--gilt); }
.g-lost b{ display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-h3); color: var(--blue-deep); }
.g-lost span{ display: block; margin-top: 2px; font-size: var(--t-ui); color: var(--ink-soft); }

/* ==========================================================================
   THE PRICE, ON THE HOMEPAGE
   ========================================================================== */
.g-pricenote{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  margin: var(--s6) 0 0; padding: var(--s4) 0;
  border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt);
  font-size: var(--t-lede); color: var(--ink);
}
.g-pricenote__k{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}
.g-pricenote b{ font-family: var(--display); font-weight: 400; color: var(--blue-deep);
  font-variant-numeric: lining-nums; }
.g .g-pricenote a{ color: var(--blue-deep); }

/* ==========================================================================
   PRINT
   Confirmations and directions get printed. Everything decorative goes.
   ========================================================================== */
@media print{
  .g-top, .g-navwrap, .g-bookbar, .g-foot, .g-mark__wrap, .g-monogram,
  .g-hero__wash, video, .g-backtotop, .g-skip, .g-bloom, .g-season, .g-ba, .g-years, .g-steps{ display: none !important; }
  body{ background: #fff; color: #000; font-size: 11pt; }
  main{ padding: 0; }
  .g-wrap{ max-width: none; padding: 0; }
  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="#"]::after, a[href^="/"]::after{ content: ""; }
  .g-sec{ padding: 12pt 0; border: 0; }
  h1,h2,h3{ break-after: avoid; color: #000; }
  p, li, dd, tr{ break-inside: avoid; }
  .g-panel, .g-plate{ border: 1px solid #999; }
}

/* ==========================================================================
   THE PHOTOGRAPH SLOTS
   Drag a picture onto a slot. Each shows the ratio it will be cropped to, so
   a portrait dropped into a landscape slot is not a surprise.
   ========================================================================== */
.g-slots{
  display: grid; gap: var(--s5); margin: var(--s5) 0 var(--s7);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.g-slot__drop{
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; overflow: hidden; cursor: pointer;
  border: 2px dashed var(--gilt); background: var(--sand-2);
}
.g-slot__drop:focus-visible{ outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.g-slot__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-slot__empty{
  font-family: var(--ui); font-size: var(--t-sm); letter-spacing: .08em;
  text-transform: uppercase; color: var(--gilt);
}
.g-slot__hint{
  position: absolute; inset: auto 0 0 0; padding: var(--s2) var(--s3);
  background: rgba(14,28,48,.78); color: #fff;
  font-family: var(--ui); font-size: var(--t-sm); text-align: center;
  opacity: 0; transition: opacity .15s ease;
}
.g-slot__drop:hover .g-slot__hint,
.g-slot__drop:focus-visible .g-slot__hint,
.g-slot.is-over .g-slot__hint{ opacity: 1; }
.g-slot.is-over .g-slot__drop{ border-color: var(--blue-deep); border-style: solid; }
.g-slot.is-busy .g-slot__drop{ opacity: .6; }
.g-slot.is-done .g-slot__drop{ border-color: #2E6B4F; border-style: solid; }
.g-slot.is-bad .g-slot__drop{ border-color: #8C2F2F; }

.g-slot__bar{ position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.2); }
.g-slot__bar > span{ display: block; height: 100%; width: 0; background: var(--gilt); transition: width .12s linear; }

.g-slot__l{ margin: var(--s3) 0 0; font-family: var(--display); font-size: var(--t-h3);
  color: var(--blue-deep); line-height: 1.2; }
.g-slot__w{ margin: 2px 0 0; font-family: var(--ui); font-size: var(--t-sm); color: var(--ink-soft); }
.g-slot__err{ margin: var(--s2) 0 0; font-size: var(--t-ui); color: #8C2F2F; }

/* Portrait slots, for the room pictures. */
.g-slot[data-ratio="2/3"] .g-slot__drop{ aspect-ratio: 2 / 3; }
.g-slot[data-ratio="16/9"] .g-slot__drop{ aspect-ratio: 16 / 9; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.g-lb{
  border: 0; padding: 0; max-width: 96vw; max-height: 96vh; width: auto;
  background: transparent; overflow: visible;
}
.g-lb::backdrop{ background: rgba(14,28,48,.92); }
.g-lb__img{ display: block; max-width: 92vw; max-height: 82vh; width: auto; height: auto; }
.g-lb__cap{
  margin: var(--s3) 0 0; text-align: center; color: #E8E2D6;
  font-family: var(--ui); font-size: var(--t-ui); max-width: var(--m-wide);
}
.g-lb__x, .g-lb__nav{
  position: absolute; z-index: 2; cursor: pointer;
  min-width: 48px; min-height: 48px; padding: 0;
  border: 1px solid rgba(232,226,214,.4); background: rgba(14,28,48,.6);
  color: #fff; font-size: 26px; line-height: 1;
}
.g-lb__x{ top: -56px; right: 0; }
.g-lb__nav{ top: 50%; transform: translateY(-50%); }
.g-lb__nav--p{ left: -60px; }
.g-lb__nav--n{ right: -60px; }
@media (max-width: 52rem){
  .g-lb__nav--p{ left: 4px; }
  .g-lb__nav--n{ right: 4px; }
  .g-lb__x{ top: 4px; right: 4px; }
}
.g-lb__x:focus-visible, .g-lb__nav:focus-visible{ outline: 3px solid var(--gilt); }

/* A night already taken. Distinguished from a past date, which is greyed,
   by a rule through it — so the reason differs visibly, not just the state. */
.g-rp__d.is-taken{
  color: var(--ink-soft); opacity: .55; cursor: not-allowed;
  text-decoration: line-through; text-decoration-thickness: 1px;
}

/* A long page that ends in prose asks the reader to scroll back up to act.
   These close the page with the thing it exists to produce. */
.g-backtoform{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
  margin: var(--s7) 0 0; padding: var(--s5) 0;
  border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt);
  font-size: var(--t-base); color: var(--ink);
}
.g-backtoform__k{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}
.g-backtoform .g-btn{ margin-left: auto; }
@media (max-width: 34rem){ .g-backtoform .g-btn{ margin-left: 0; width: 100%; } }

/* ==========================================================================
   THE THREE INTENTS
   Each carries a self-serve path and a way to reach a person. At these prices
   people often want to speak to someone, and offering both without apology
   reads as more confident than either alone.
   ========================================================================== */
.g-three{ padding: var(--s7) 0; border-top: 1px solid var(--gilt); }
.g-three--compact{ padding: var(--s6) 0; }
.g-three__l{ list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(27rem,100%),1fr)); }
.g-three__i{ display: flex; gap: var(--s4); align-items: flex-start; }
.g-three__n{
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--gilt); border-radius: 50%;
  font-family: var(--ui); font-size: var(--t-sm); letter-spacing: .06em;
  color: var(--gilt); font-variant-numeric: lining-nums;
}
.g-three__b{ flex: 1 1 auto; min-width: 0; }
.g-three__t{ margin: 0 0 var(--s2); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); color: var(--blue-deep); }
.g-three__d{ margin: 0 0 var(--s4); font-size: var(--t-base); line-height: 1.6;
  color: var(--ink); max-width: var(--m-read); }
.g-three__a{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: 0; }
.g .g-three__a a:not(.g-btn){ font-family: var(--ui); font-size: var(--t-ui); color: var(--blue-deep); }

/* ==========================================================================
   THE PROGRAMME
   Dated, numbered, with who is leading and how many places are left.
   ========================================================================== */
.g-programme{ list-style: none; margin: var(--s6) 0 var(--s5); padding: 0; }
.g-programme__i{ display: flex; gap: var(--s5); align-items: flex-start;
  padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.g-programme__i.is-full{ opacity: .62; }
.g-programme__n{ flex: 0 0 auto; font-family: var(--display); font-size: var(--t-h3);
  color: var(--gilt); font-variant-numeric: lining-nums; min-width: 2.2rem; }
.g-programme__b{ flex: 1 1 auto; min-width: 0; }
.g-programme__d{ margin: 0 0 2px; font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); }
.g-programme__t{ margin: 0 0 2px; font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); color: var(--blue-deep); }
.g-programme__w{ margin: 0 0 var(--s3); font-size: var(--t-ui); color: var(--ink-soft); }
.g-programme__s{ margin: 0 0 var(--s4); font-size: var(--t-base); line-height: 1.6;
  color: var(--ink); max-width: var(--m-wide); }
.g-programme__a{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: 0; }
.g-programme__left{ font-family: var(--ui); font-size: var(--t-ui); color: var(--gilt); }

/* ==========================================================================
   ROOM TIERS
   ========================================================================== */
.g-tiers{ list-style: none; margin: var(--s6) 0 var(--s5); padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem,100%),1fr)); }
.g-tier{ display: flex; flex-direction: column;
  padding: var(--s5); border: 1px solid var(--line); background: var(--white); }
.g-tier__t{ margin: 0 0 var(--s2); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); line-height: 1.15; color: var(--blue-deep); }
.g-tier__p{ margin: 0 0 var(--s4); font-size: var(--t-base); color: var(--ink-soft); }
.g-tier__p b{ font-family: var(--display); font-weight: 400; font-size: var(--t-lede);
  color: var(--blue-deep); font-variant-numeric: lining-nums; }
.g-tier__f{ margin: 0 0 var(--s4); flex: 1 0 auto; }
.g-tier__f > div{ display: flex; gap: var(--s3); justify-content: space-between;
  padding: 4px 0; border-bottom: 1px solid rgba(115,86,45,.16); }
.g-tier__f dt{ font-family: var(--ui); font-size: var(--t-sm); letter-spacing: .06em;
  text-transform: uppercase; color: var(--gilt); }
.g-tier__f dd{ margin: 0; font-size: var(--t-ui); color: var(--ink); text-align: right; }
.g-tier__a{ margin: 0; }
.g-tier__a .g-btn{ width: 100%; }
/* The English gloss under a French room name. A named room is only an asset
   if the reader knows what they are choosing. */
.g-tier__n{
  margin: 0 0 var(--s3); font-size: var(--t-ui); line-height: 1.5;
  color: var(--ink-soft);
}

/* ==========================================================================
   THE CHEF
   A portrait beside the copy. The photograph is the point — a chef carrying
   two plates down the château steps says more than a paragraph about passion.
   ========================================================================== */
.g-chef{ display: grid; gap: var(--s6); align-items: start; margin-top: var(--s6); }
@media (min-width: 56rem){ .g-chef{ grid-template-columns: minmax(0, 22rem) 1fr; gap: var(--s7); } }
.g-chef__img{ margin: 0; }
.g-chef__img img{
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--sand-2); border: 1px solid var(--gilt);
}
.g-chef__role{
  margin: 0 0 var(--s4); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}
.g-chef__b > .g-p{ max-width: var(--m-wide); }

/* ==========================================================================
   THE BOOKING SUMMARY
   The values were rendering smaller than their own labels — 13px against
   15px — so "Arrival" read louder than the date beside it. In a summary the
   figure is the content and the label is the caption, not the other way
   round.
   ========================================================================== */
.g-aside dl > div{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) 0;
  border-bottom: 1px solid rgba(232,226,214,.18);
}
.g-aside dl > div:last-child{ border-bottom: 0; }
.g-aside dt{
  flex: 0 0 auto;
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #A9BCCD;
}
.g-aside dd{
  margin: 0; flex: 1 1 auto; text-align: right; min-width: 0;
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-lede); line-height: 1.2;
  color: #fff; font-variant-numeric: lining-nums;
}
/* An empty value should read as waiting, not as a figure. */
.g-aside dd:empty::after,
.g-aside dd:has-text("—"){ color: #7C90A6; }

/* The total is the one row that should carry weight. */
.g-aside .g-sum__total dt{ color: var(--gilt); }
.g-aside .g-sum__total dd{ font-size: var(--t-h3); color: #fff; }
/* Required fields were unmarked, so a guest learned a field was required only
   by being refused. The asterisk is aria-hidden — the `required` attribute
   already tells a screen reader — and the key explains it once. */
.g-req{ color: var(--gilt); margin-left: 3px; }
.g-reqkey{
  margin: var(--s2) 0 var(--s5); font-family: var(--ui);
  font-size: var(--t-ui); color: var(--ink-soft);
}
.g-opt{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 400;
  letter-spacing: .04em; text-transform: none; color: var(--ink-soft);
  margin-left: 4px;
}

/* ==========================================================================
   HEADINGS MUST SIT ON THE SAME EDGE AS THEIR TEXT
   Section headings were carrying an 8px left margin from outside this
   stylesheet — the same style.css that sets a bare `form` to column almost
   certainly sets a bare `h2` margin too. The result was a heading standing
   8px proud of the paragraph beneath it, which reads as a mistake rather
   than as an offset, and only on some pages.

   Stated explicitly so nothing outside can move them.
   ========================================================================== */
.g h1, .g h2, .g h3, .g h4, .g h5, .g h6{ margin-left: 0; margin-right: 0; }

/* The actual cause: the browser's default 8px body margin was never reset, so
   the whole page — every section, every heading, main itself — sat 8px right
   of the viewport edge. Centred elements hid it; left-aligned ones did not,
   which is why only some headings looked 8px proud of their own text. */
html, body{ margin: 0; padding: 0; }
.g .g-place, .g .g-h2, .g .g-h3, .g .g-pagehead, .g .g-hero__title{ margin-left: 0; }
.g-table-cta__d{ margin: 0; color: var(--ink-soft); font-size: var(--t-base); }

/* ==========================================================================
   ELEMENTS WITH NOTHING IN THEM
   Several blocks render an empty paragraph when the record they describe has
   no value — a workshop with no length, a session with no meta, a promo hint
   with no code. An empty element still takes its margin, so the page shows a
   gap with nothing in it.

   :empty only matches truly empty nodes, so this also covers the whitespace
   case with :has(). Both are safe: an element that HAS content is untouched.
   ========================================================================== */
.g-p:empty, .g-hint:empty, .g-room__meta:empty, .g-wscard__len:empty,
.g-sit__meta:empty, .g-table-cta__d:empty, .g-programme__s:empty,
.g-tier__n:empty{ display: none; }
/* :empty does not match whitespace, and Jinja leaves a newline behind when a
   conditional produces nothing. A dd or p that renders blank still takes its
   margin, so the page shows a gap with nothing in it. The templates below use
   {%- -%} to close the gap at source; this covers anything missed. */

/* ==========================================================================
   BEFORE YOU SEND THIS
   The room was in the panel, the extras 800px above it, and the total in a
   third place. This restates the whole stay immediately above the button,
   from the form's own values, so it cannot disagree with what is submitted.
   ========================================================================== */
.g-review{
  margin: var(--s5) 0 var(--s4); padding: var(--s5);
  border: 1px solid rgba(232,226,214,.28); background: rgba(255,255,255,.05);
}
.g-review__h{
  margin: 0 0 var(--s3); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}
.g-review__l{ margin: 0; }
.g-review__l > div{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding: var(--s2) 0;
}
.g-review__l dt{
  flex: 0 0 auto; font-family: var(--ui); font-size: var(--t-ui); color: #A9BCCD;
}
.g-review__l dd{
  margin: 0; flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: var(--t-base); color: #fff;
}
.g-review__tot{ margin-top: var(--s2); padding-top: var(--s3) !important;
  border-top: 1px solid rgba(232,226,214,.28); }
.g-review__tot dt{ color: var(--gilt); }
.g-review__tot dd{ font-family: var(--display); font-size: var(--t-h3);
  font-variant-numeric: lining-nums; }
.g-review__n{ margin: var(--s3) 0 0; font-size: var(--t-sm); line-height: 1.5; color: #A9BCCD; }

/* Holding state — a submit with no feedback gets clicked twice. */
.g-holding{ margin: var(--s3) 0 0; text-align: center; }
.g-holding__m{ font-family: var(--ui); font-size: var(--t-ui); color: var(--gilt); }
.g-submit[disabled]{ opacity: .65; cursor: progress; }

/* Notice period, on the extra itself rather than under the list. */
.g-addons__notice{
  grid-column: 2 / -1; margin-top: 2px;
  font-family: var(--ui); font-size: var(--t-sm);
  letter-spacing: .04em; color: var(--gilt);
}
/* `hidden` does nothing when a rule sets display, so the extras row was
   showing with an em dash in it whenever nothing was chosen. */
.g-review__extras[hidden]{ display: none; }

/* ==========================================================================
   FORM RESTORED, CANCELLING, DATED PAYMENTS
   ========================================================================== */
.g-restored{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  margin: 0 0 var(--s5); padding: var(--s3) var(--s4);
  border-left: 2px solid var(--gilt); background: var(--sand-2);
}
.g-restored[hidden]{ display: none; }
.g-restored__k{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gilt);
}
.g-restored__x{
  margin-left: auto; min-height: 44px; padding: 0 var(--s3);
  border: 0; background: none; cursor: pointer;
  font-family: var(--ui); font-size: var(--t-ui); color: var(--blue-deep);
  text-decoration: underline;
}

.g-cancel__terms{ margin: var(--s5) 0; }
.g-cancel__terms > div{ padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.g-cancel__terms dt{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .06em; color: var(--gilt);
}
.g-cancel__terms dd{ margin: 2px 0 0; font-size: var(--t-base); color: var(--ink); }
.g-cancel__d{ margin-top: var(--s5); border-top: 1px solid var(--line); }
.g-cancel__d summary{
  min-height: 48px; display: flex; align-items: center; cursor: pointer;
  font-family: var(--ui); font-size: var(--t-ui); color: var(--ink-soft);
}
.g-cancel__d summary:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
.g-cancel__b{ padding-bottom: var(--s5); }
/* Cancelling is not the primary action and should not look like one. */
.g .g-btn--warn{
  background: transparent; color: #8C2F2F; border: 1px solid #8C2F2F;
}
.g .g-btn--warn:hover{ background: #8C2F2F; color: #fff; }

.g-pay2{ margin-top: var(--s5); }
.g-pay2__h{
  margin: 0 0 var(--s4); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}
.g-pay2__l{ list-style: none; margin: 0; padding: 0 0 0 var(--s6);
  border-left: 1px solid var(--gilt); }
.g-pay2__i{ position: relative; display: grid; gap: 2px;
  grid-template-columns: minmax(8rem, 12rem) 1fr; padding-bottom: var(--s5); }
@media (max-width: 34rem){ .g-pay2__i{ grid-template-columns: 1fr; } }
.g-pay2__i::before{
  content: ""; position: absolute; left: calc(var(--s6) * -1 - 1px); top: .45em;
  width: 9px; height: 9px; margin-left: -4px;
  border: 1px solid var(--gilt); border-radius: 50%; background: var(--parchment);
}
.g-pay2__i.is-done::before{ background: var(--gilt); }
.g-pay2__i:last-child{ padding-bottom: 0; }
.g-pay2__k{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gilt);
}
.g-pay2__v{ font-size: var(--t-base); line-height: 1.6; color: var(--ink); max-width: var(--m-read); }

/* ==========================================================================
   THE TEN
   ========================================================================== */
.g-review__tax dd{ font-size: var(--t-ui) !important; color: #C9D4DF !important; }
.g-review__tax[hidden]{ display: none; }

.g-family, .g-second, .g-overlap, .g-scarcity-line{
  display: grid; gap: var(--s2);
  margin: var(--s5) 0; padding: var(--s4) 0 var(--s4) var(--s5);
  border-left: 2px solid var(--gilt);
  font-size: var(--t-base); line-height: 1.6; color: var(--ink);
}
.g-family__k, .g-second__k, .g-overlap__k{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}
.g-scarcity-line{ margin-top: var(--s3); }

.g-cred{
  /* Was display:flex on a block parent, so it shrank to its content and
     rendered as a dark 492px stub floating above the hero on every page.
     It is a full-width band or it is nothing. */
  /* It is a <p>, so the 62ch prose cap applied and held it at 492px. */
  margin: 0; width: 100%; max-width: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s2) var(--s4);
  padding: var(--s2) var(--s5);
  background: var(--blue-deep); color: #C9D4DF;
  font-family: var(--ui); font-size: var(--t-sm); letter-spacing: .04em;
  text-align: center;
}
/* Over a hero it belongs to the hero, not floating between it and the
   breadcrumb. */
/* The translucent version put the gilt label at 1.61:1 over a photograph —
   unreadable, and unpredictably so, since the contrast depended on whatever
   the image was doing behind it. Solid, as it is everywhere else. */
body.has-hero .g-cred{ background: var(--blue-deep); }
.g-cred__m{
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt);
}
@media print{ .g-cred{ display: none; } }

.g-lb__go{
  display: inline-block; margin-top: var(--s3); padding: var(--s3) var(--s5);
  min-height: 44px; border: 1px solid var(--gilt); color: #fff;
  font-family: var(--ui); font-size: var(--t-ui); text-decoration: none;
}
.g-lb__go:hover{ background: var(--gilt); color: var(--blue-deep); }

.g-nodate{ margin-top: var(--s6); max-width: var(--m-read); }
.g-nodate .g-row{ display: flex; flex-wrap: wrap; gap: var(--s4); }
.g-nodate .g-field--narrow{ flex: 1 1 10rem; min-width: 0; }

.g-news__see{ margin: var(--s3) 0 0; font-family: var(--ui); font-size: var(--t-sm); }
.g-news__see a{ display: inline-block; padding: .85em 0; margin: -.85em 0; min-height: 44px; box-sizing: border-box; }

.g-arrive{ margin: var(--s7) 0; padding: var(--s6); border: 1px solid var(--gilt); background: var(--white); }
.g-arrive__k{
  margin: 0 0 var(--s2); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt);
}
.g-arrive__h{ margin: 0 0 var(--s5); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); color: var(--blue-deep); }
.g-arrive__l{ margin: 0; }
.g-arrive__l > div{ padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.g-arrive__l > div:last-child{ border-bottom: 0; }
.g-arrive__l dt{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gilt);
}
.g-arrive__l dd{ margin: 4px 0 0; font-size: var(--t-base); line-height: 1.6;
  color: var(--ink); max-width: var(--m-wide); }
.g-arrive__map{ display: block; margin-top: 4px; }
.g-arrive__n{ margin: var(--s5) 0 0; font-family: var(--ui);
  font-size: var(--t-sm); color: var(--ink-soft); }
@media print{
  .g-arrive{ border: 1px solid #999; padding: 12pt; }
  .g-arrive__map{ display: none; }
}
.g-arrive__a{ display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3) var(--s5); margin: var(--s5) 0 0; }
@media print{ .g-arrive__a{ display: none; } }

/* ==========================================================================
   WAITING LIST, FLEXIBLE ENQUIRY, CALENDAR, DOWNLOADS, INTERESTS
   ========================================================================== */
.g-wait{ margin-top: var(--s4); border-top: 1px solid var(--line); }
.g-wait summary{
  min-height: 48px; display: flex; align-items: center; cursor: pointer;
  font-family: var(--ui); font-size: var(--t-ui); color: var(--blue-deep);
}
.g-wait summary:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
.g-wait__b{ padding-bottom: var(--s5); }
.g-wait__row{ display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%),1fr)); }

.g-flex{ padding: var(--s7) 0; border-top: 1px solid var(--gilt); }
.g-flex__f{ max-width: var(--m-read); margin-top: var(--s6);
  display: flex; flex-direction: column; gap: var(--s4); }
.g-flex__row{ display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem,100%),1fr)); }
.g-flex__f .g-field{ margin: 0; }

.g-avc{ display: grid; gap: var(--s6); margin: var(--s6) 0 var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem,100%),1fr)); }
.g-avc__mh{
  margin: 0 0 var(--s3); font-family: var(--display); font-size: var(--t-h3);
  color: var(--blue-deep);
}
.g-avc__g{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.g-avc__d, .g-avc__x{
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; font-family: var(--ui); font-size: var(--t-ui);
  font-variant-numeric: lining-nums; border: 1px solid var(--line);
  background: var(--white); color: var(--ink);
}
.g-avc__x{ border: 0; background: none; }
.g-avc__d.is-past{ color: var(--ink-soft); opacity: .4; border-color: transparent; }
.g-avc__d.is-taken{
  color: var(--ink-soft); background: var(--sand-2);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.g-avc__k{ display: flex; flex-wrap: wrap; gap: var(--s5); margin: 0;
  font-family: var(--ui); font-size: var(--t-ui); color: var(--ink-soft); }
.g-avc__ks{ display: inline-flex; align-items: center; gap: var(--s2); }
.g-avc__k i{ width: 16px; height: 16px; border: 1px solid var(--line); background: var(--white); }
.g-avc__k i.g-avc__taken{ background: var(--sand-2); }

.g-dl{ list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem,100%),1fr)); }
.g .g-dl__i a{
  display: grid; gap: 2px; padding: var(--s4) var(--s5); min-height: 44px;
  border: 1px solid var(--line); background: var(--white); text-decoration: none;
}
.g .g-dl__i a:hover{ border-color: var(--gilt); }
.g-dl__i b{ font-family: var(--display); font-weight: 400; font-size: var(--t-h3);
  color: var(--blue-deep); }
.g-dl__i span{ font-size: var(--t-ui); color: var(--ink-soft); }
.g-dl__t{ font-family: var(--ui); font-size: var(--t-sm); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gilt) !important; }

.g-interests{ margin: var(--s4) 0 0; padding: 0; border: 0; }
.g-interests legend{
  padding: 0 0 var(--s2); font-family: var(--ui); font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase; color: var(--gilt);
}
.g-interests label{
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; font-size: var(--t-ui); color: var(--ink); cursor: pointer;
}
/* Every other checkbox on the site sets an accent-colour; this fieldset was
   missed and fell back to the browser's default blue, the one saturated
   colour nowhere else in the palette. */
.g-interests input{
  flex: 0 0 auto; width: 18px; height: 18px;
  accent-color: var(--blue-deep);
}

.g-presskit .g-h3{ margin-top: var(--s6); }

/* The same for any other focusable group added later. */
svg [tabindex]:focus-visible rect,
svg [tabindex]:focus-visible path{ stroke: var(--gilt); stroke-width: 3px; }

/* ==========================================================================
   THE VALLEY — WHAT IS NEARBY
   Drive time first, because that is the question. The honest caveat sits
   under each one rather than being left for the guest to discover.
   ========================================================================== */
.g-near{ list-style: none; margin: var(--s6) 0 var(--s5); padding: 0; }
.g-near__i{
  display: grid; gap: var(--s2) var(--s5); align-items: start;
  grid-template-columns: 5.5rem 1fr;
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 26rem){ .g-near__i{ grid-template-columns: 1fr; } }
.g-near__d{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gilt);
  font-variant-numeric: lining-nums; padding-top: 4px;
}
.g-near__t{ margin: 0 0 var(--s2); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); color: var(--blue-deep); }
.g-near__p{ margin: 0 0 var(--s2); font-size: var(--t-base); line-height: 1.65;
  color: var(--ink); max-width: var(--m-wide); }
.g-near__w{
  margin: 0; font-family: var(--ui); font-size: var(--t-ui); color: var(--ink-soft);
  padding-left: var(--s3); border-left: 2px solid var(--gilt);
}

/* Month by month. Twelve tabs, because "spring" does not help someone
   choosing a week. */
.g-months{ margin-top: var(--s6); }
.g-months__nav{ display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--s5); }
.g-months__b{
  min-height: 44px; padding: 0 var(--s4); cursor: pointer;
  border: 1px solid var(--line); background: var(--white);
  font-family: var(--ui); font-size: var(--t-ui); color: var(--ink);
}
.g-months__b:hover{ border-color: var(--gilt); }
.g-months__b.is-on{ background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.g-months__b:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
.g-months__p{ padding: var(--s5) 0 0; border-top: 1px solid var(--gilt); }
.g-months__t{ margin: 0 0 var(--s3); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h2); color: var(--blue-deep); }
.g-months__d{ margin: 0 0 var(--s4); font-size: var(--t-lede); line-height: 1.6;
  color: var(--ink); max-width: var(--m-wide); }
.g-months__x{
  margin: 0; max-width: var(--m-wide); padding-left: var(--s4);
  border-left: 2px solid var(--gilt);
  font-style: italic; font-size: var(--t-base); color: var(--ink-soft);
}

/* ==========================================================================
   6. THE PRICE ON A ROOM CARD
   Price is the second thing anyone wants after the photograph, and it was
   set at body size in the middle of a paragraph. Now it sits with the name,
   in the display face, at a size that reads before the description does.
   ========================================================================== */
.g-card__head{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2) var(--s4); margin-bottom: var(--s3);
}
.g-card__price, .g-homeroom__price{
  flex: 0 0 auto;
  font-family: var(--display); font-weight: 400; font-size: var(--t-h3);
  color: var(--blue-deep); font-variant-numeric: lining-nums; white-space: nowrap;
}
.g-card__price small, .g-homeroom__price small{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gilt);
  margin-left: 4px;
}

/* ==========================================================================
   7. HEROES SHOULD NOT ALL BE THE SAME SHAPE
   Five bedrooms, an atelier and a wedding were getting an identical band, so
   the pages read as one long page. Height now follows what the page is for:
   the house sells itself on the image, a form does not.
   ========================================================================== */
.g-hero{ min-height: 68vh; }                          /* the default */
body.hero--full .g-hero{ min-height: 88vh; }          /* home, gallery */
body.hero--tall .g-hero{ min-height: 74vh; }          /* the estate, restoration */
body.hero--short .g-hero{ min-height: 46vh; }         /* stay, workshops, la table */
body.hero--band  .g-hero{ min-height: 30vh; }         /* forms, confirmations, admin */
@media (max-width: 34rem){
  .g-hero{ min-height: 58vh; }
  body.hero--full .g-hero{ min-height: 72vh; }
  body.hero--short .g-hero{ min-height: 42vh; }
  body.hero--band .g-hero{ min-height: 26vh; }
}

/* ==========================================================================
   8. A FACT AND A CAVEAT SHOULD NOT LOOK ALIKE
   The one band carried "breakfast included" and "there is no lift" in
   identical styling, so a reader could not tell what was being given from
   what was being warned about.
   ========================================================================== */
.g-limit{ border-left: 2px solid var(--gilt); }              /* neutral note */
.g-limit--good{ border-left-color: #2E6B4F; }                /* what you get */
.g-limit--good .g-limit__k{ color: #2E6B4F; }
.g-limit--warn{ border-left-color: #8C6D2F; }                /* what to know */
.g-limit--warn .g-limit__k{ color: #8C6D2F; }
.g-limit--warn::before{
  content: "Please note"; display: block;
  font-family: var(--ui); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #8C6D2F;
  margin-bottom: 2px;
}
.g-limit--warn .g-limit__k{ display: none; }   /* the label above replaces it */

/* ==========================================================================
   10. THE DARK SECTIONS ALL LOOKED ALIKE
   Panels, closers and the booking aside shared one treatment, so emphasis
   had stopped meaning anything. Three weights now, used for three jobs.
   ========================================================================== */
.g-sec--dark{ background: var(--blue-deep); color: #F3EFE6; }
.g-sec--dark .g-place, .g-sec--dark .g-h3{ color: #fff; }
.g-sec--dark .g-p{ color: #DCD5C8; }

/* the closer: the action at the end of a page. Full bleed, gilt rule above. */
.g-closer{ border-top: 2px solid var(--gilt); }

/* a panel: an aside within a page. Lighter, contained, not full bleed. */
.g-panel{
  background: var(--sand-2); color: var(--ink);
  border: 1px solid var(--line); border-left: 2px solid var(--gilt);
  padding: var(--s5) var(--s6);
}
.g-panel .g-panel__h{ color: var(--blue-deep); }

/* the booking aside stays the deepest, because it is where money is spent. */
.g-aside{ background: var(--blue-deep); }

/* ==========================================================================
   9. THE SIZE OF IT
   Ninety-four squares. Five filled. The paragraph could not do this.
   ========================================================================== */
.g-scale{ margin: var(--s6) 0 var(--s6); }
.g-scale__g{ width: 100%; max-width: var(--m-read); height: auto; display: block; }
.g-scale__r{ fill: none; stroke: var(--line); stroke-width: 1; }
.g-scale__r.is-done{ fill: var(--gilt); stroke: var(--gilt); }
.g-scale__k{ list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  margin: var(--s4) 0 0; padding: 0;
  font-family: var(--ui); font-size: var(--t-ui); color: var(--ink-soft); }
.g-scale__k li{ display: flex; align-items: center; gap: var(--s2); }
.g-scale__k i{ width: 13px; height: 13px; border: 1px solid var(--line); }
.g-scale__k i.is-done{ background: var(--gilt); border-color: var(--gilt); }

/* ==========================================================================
   16. WHAT A WEEK COSTS
   ========================================================================== */
.g-wk{ display: grid; gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 56rem){ .g-wk{ grid-template-columns: 1fr 22rem; gap: var(--s7); } }
.g-wk__in{ display: flex; flex-direction: column; gap: var(--s4); }
.g-wk__in .g-field{ margin: 0; }
.g-wk__in output{ font-family: var(--display); font-size: var(--t-lede);
  color: var(--blue-deep); font-variant-numeric: lining-nums; margin-left: 4px; }
.g-wk__in input[type=range]{ width: 100%; min-height: 44px; accent-color: var(--gilt); }
.g-field--check label{ display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; font-size: var(--t-base); cursor: pointer; }
.g-field--check input{ width: 18px; height: 18px; }

.g-wk__out{ background: var(--blue-deep); color: #F3EFE6; padding: var(--s5); align-self: start; }
.g-wk__l{ margin: 0; }
.g-wk__l > div{ display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid rgba(232,226,214,.16); }
.g-wk__l > div[hidden]{ display: none; }
.g-wk__l dt{ font-family: var(--ui); font-size: var(--t-ui); color: #A9BCCD; }
.g-wk__l dd{ margin: 0; text-align: right; font-size: var(--t-base); color: #fff;
  font-variant-numeric: lining-nums; }
.g-wk__tot{ border-bottom: 0 !important; margin-top: var(--s2); padding-top: var(--s3) !important;
  border-top: 1px solid var(--gilt) !important; }
.g-wk__tot dt{ color: var(--gilt-on-dark) !important; }
.g-wk__tot dd{ font-family: var(--display); font-size: var(--t-h2) !important; }
.g-wk__n{ margin: var(--s4) 0 var(--s4); font-size: var(--t-sm); line-height: 1.55; color: #A9BCCD; }
.g-wk__a{ margin: 0; }
.g-wk__a .g-btn{ width: 100%; }

/* ==========================================================================
   17. WHICH ROOM IS YOURS
   ========================================================================== */
.g-pick{ display: grid; gap: var(--s5); margin-top: var(--s6); }
@media (min-width: 56rem){ .g-pick{ grid-template-columns: repeat(3, 1fr) 20rem; align-items: start; } }
.g-pick__q{ border: 0; margin: 0; padding: 0; }
.g-pick__q legend{ padding: 0 0 var(--s3);
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gilt); }
.g-pick__q label{ display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; font-size: var(--t-base); color: var(--ink); cursor: pointer; }
.g-pick__q input{ width: 18px; height: 18px; accent-color: var(--blue-deep); }
.g-pick__r{ background: var(--sand-2); border-left: 2px solid var(--gilt); padding: var(--s5); }
.g-pick__k{ margin: 0 0 var(--s2); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); }
.g-pick__t{ margin: 0 0 var(--s3); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); color: var(--blue-deep); }
.g-pick__d{ margin: 0 0 var(--s4); font-size: var(--t-base); line-height: 1.6; color: var(--ink); }
.g-pick__a{ margin: 0; }
.g-cur__note{ margin: var(--s2) 0 0; font-family: var(--ui); font-size: var(--t-sm);
  line-height: 1.5; color: var(--ink-soft); max-width: var(--m-tight); }

/* A two-column block with align-items:center floats the shorter column in the
   middle of the taller one, leaving a large empty gutter above and below it.
   Both columns start at the top; the media can still sit lower if it wants to
   by its own margin. */
.g-two{ align-items: start; }
.g-two__media{ position: sticky; top: 96px; }
@media (max-width: 52rem){ .g-two__media{ position: static; } }

/* ==========================================================================
   THE ANIMALS
   Six cats, two dogs and chickens. Warm, and also an allergy fact — so the
   disclaimer sits inside the section rather than in a footnote under it.
   ========================================================================== */
.g-anim{ list-style: none; margin: var(--s6) 0 var(--s5); padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(24rem,100%),1fr)); }
.g-anim__i{ padding: var(--s5); background: var(--white);
  border: 1px solid var(--line); border-top: 2px solid var(--gilt); }
.g-anim__t{ margin: 0 0 2px; font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); color: var(--blue-deep); }
.g-anim__r{ margin: 0 0 var(--s3); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gilt); }
.g-anim__d{ margin: 0; font-size: var(--t-base); line-height: 1.65; color: var(--ink); }

/* ==========================================================================
   NOTHING BUT THE HERO GOES UNDER THE FIXED HEADER
   On a hero page `main` has no top padding, because the hero is meant to run
   full-bleed beneath the header. Anything else at the top of main — the
   breadcrumb, and until now the credential band — lands under an 86px header
   and is half-hidden by it.

   The hero is the only element allowed there. Everything else clears it.
   ========================================================================== */
body.has-hero main > .g-crumbs{ padding-top: 92px; }
@media (max-width: 34rem){ body.has-hero main > .g-crumbs{ padding-top: 78px; } }

/* And when the breadcrumb IS the first thing, the header is over cream rather
   than a photograph, so it needs its own background and dark type. */
body.has-hero:has(main > .g-crumbs:first-child) .g-top{
  background: var(--sand); border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   THE DATE PICKER — TYPE
   The month name was set at a hardcoded 16px in the display face, which made
   it smaller than the panel title above it and no louder than the day
   numbers. The month is the thing you navigate by; it should be the loudest
   thing in the panel after the dates themselves.

   Everything here now takes a step from the scale rather than a magic number.
   ========================================================================== */
.g-rp__mh{
  margin: 0 0 var(--s4);
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3);                    /* was 16px */
  letter-spacing: .01em;
  color: var(--blue-deep);
}

/* The weekday row is a caption for the grid, not data. It was reading as
   loud as the numbers. */
.g-rp__g > abbr, .g-rp__wd, .g-rp__g > span:not([class]){
  font-family: var(--ui); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* A date is a tap target before it is a number. 40px was under the minimum. */
.g-rp__d{
  /* min-width:44px forced 7x44=308px into a 308px column and clipped Sunday.
     The row divides the width it has; the 44px tap target is carried by
     height, and the cell is never narrower than a finger in practice because
     the panel itself has a minimum. */
  min-height: 44px; width: 100%;
  font-family: var(--ui); font-size: var(--t-ui);
  font-variant-numeric: lining-nums tabular-nums;
}
.g-rp__d.is-sel, .g-rp__d.is-in{ font-weight: 600; }

/* The panel title sat above the month and shouted over it. It is a label. */
.g-rp__t{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}

/* The chevrons were small glyphs adrift in 50px boxes. */
.g-rp__nav{
  min-width: 48px; min-height: 48px;
  font-size: var(--t-h3); line-height: 1;
}

/* ==========================================================================
   ROOM CARDS — WHERE THE SLACK GOES
   Cards in a row stretch to the tallest, and `.g-card__desc` had
   `flex: 1 0 auto` — so a short description absorbed every spare pixel and
   left a hole between the prose and the chips. Émeraude has four lines and
   Cerise three; the slack all landed in one place.

   The description takes its natural height. The gap goes below the chips,
   above the button, where it reads as breathing room rather than a hole.
   ========================================================================== */
.g-cards .g-card__desc{ flex: 0 0 auto; margin-bottom: 0; }
.g-card__desc{ flex: 0 0 auto; }
.g-cards .g-card__b > .g-tags{ margin: 0; }
.g-cards .g-card__b > .g-btn{ margin-top: auto; }
.g-card__b > .g-tags{ margin-bottom: 0; }
.g-card__b > .g-tags + .g-btn,
.g-card__b > .g-btn{ margin-top: auto; }

/* Doubling up: the flex gap AND a margin-bottom on every child gave 12px of
   gap plus 8/16/24px of margin, so the spacing was the sum of two systems.
   One system. */
.g-card__b{ gap: var(--s3); }
.g-card__b > *{ margin-bottom: 0; }
.g-card__name{ margin: 0; }
.g-card__rate{ margin: 0; }
.g-card__desc{ margin: 0; }

/* The rate line is the second thing anyone reads. Give it the weight. */
.g-card__rate b{
  font-family: var(--display); font-weight: 400; font-size: var(--t-h3);
  color: var(--blue-deep); font-variant-numeric: lining-nums;
}
.g-card__rate span{
  font-family: var(--ui); font-size: var(--t-ui); color: var(--ink-soft);
}
.g-card__per{
  display: block; margin-top: 2px;
  font-family: var(--ui); font-size: var(--t-sm); color: var(--ink-soft);
}

/* ==========================================================================
   ORPHANS
   Five room cards in a two-column grid gave 2+2+1 — a single card marooned
   beside an empty half. The Estate and Events had 2+1. Three columns takes
   five to 3+2 and three to 3, and the card is narrow enough to read at that
   width because the description is three lines.
   ========================================================================== */
/* A viewport query cannot know how wide the card is — the wrap caps around
   1100px however wide the window. Size on the container instead: three
   columns only when each one still holds a readable line. */
/* An element cannot query its own container, so container-type goes on the
   wrapper and the grid inside reads it. Setting it on .g-cards itself meant
   the query was measuring the page, not the grid. */
.g-sec > .g-wrap, .g-wrap:has(> .g-cards){ container-type: inline-size; }
@container (min-width: 80rem){
  .g-cards{ grid-template-columns: repeat(3, 1fr); }
  /* A lone trailing card spans the empty tracks rather than sitting beside a
     hole. In the same query as the columns, so the two can never disagree. */
  .g-cards > .g-card:last-child:nth-child(3n + 1){ grid-column: span 3; }
  .g-cards > .g-card:last-child:nth-child(3n + 1) .g-card__img{ aspect-ratio: 21 / 9; }
}
/* A lone last card in a two-column grid spans both, rather than sitting
   beside a hole. Unbounded: it is what an odd last child should always do,
   and the three-column query overrides it where three columns apply. */
@media (min-width: 52rem){
  .g-cards > .g-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
  .g-cards > .g-card:last-child:nth-child(odd) .g-card__img{ aspect-ratio: 21 / 9; }
}
@supports not (container-type: inline-size){
  @media (min-width: 100rem){ .g-cards{ grid-template-columns: repeat(3, 1fr); } }
}
/* Where three would be too narrow, the last item spans the empty track rather
   than sitting beside a hole. */
/* A lone item on the last row spans the empty tracks rather than sitting
   beside a hole. Written for both the 2- and 3-column cases. */



/* ==========================================================================
   IMAGES MUST RESERVE THEIR SPACE
   Between one and six images per page had no aspect ratio and no width
   attribute, so each one reflowed the page as it arrived. The ratio is set by
   role rather than per image, so nothing has to be measured.
   ========================================================================== */
main img{ height: auto; background: var(--sand-2); }
main img:not([class]){ aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.g-card__img, .g-homeroom__img, .g-two__media img, .g-anim img,
.g-chef__img img, .g-slot__img{ aspect-ratio: 3 / 2; object-fit: cover; }
.g-hero img, .g-hero video{ aspect-ratio: 16 / 9; object-fit: cover; }
.g-figure img, figure img{ aspect-ratio: 4 / 3; object-fit: cover; }

/* ==========================================================================
   SECTION SEAMS
   Restoration ran ten consecutive sections on the same background and
   La Table eight, so the page read as one undifferentiated column and the
   section headings had nothing to sit against.

   A hairline where two same-coloured sections meet — not a band, not a
   colour change, just enough to say a new thing has started.
   ========================================================================== */
.g-sec + .g-sec:not(.g-sec--sand):not(.g-sec--dark):not(.g-closer){
  border-top: 1px solid var(--line);
}
.g-sec--sand + .g-sec--sand{ border-top: 1px solid rgba(115,86,45,.14); }
/* A dark section is its own seam and needs no rule. */
.g-sec--dark + .g-sec, .g-sec + .g-sec--dark{ border-top: 0; }

/* ==========================================================================
   PROSE LINKS
   A link inside a paragraph carried colour alone on several pages, which
   fails for anyone who cannot separate the two colours, and reads as emphasis
   rather than as a link to everyone else.
   ========================================================================== */
.g .g-p a:not(.g-btn),
.g main p a:not(.g-btn),
.g main li a:not(.g-btn),
.g main dd a:not(.g-btn){
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(115,86,45,.5);
}
.g main p a:not(.g-btn):hover{ text-decoration-color: var(--gilt); }

/* ==========================================================================
   BUTTONS SIDE BY SIDE
   A solid button and a bare link in the same line sat on different baselines
   and different heights, so the pair read as a mistake rather than as a
   primary and a secondary.
   ========================================================================== */
.g-p:has(> .g-btn + a),
.g-p:has(> .g-btn + .g-btn),
.g-three__a, .g-programme__a{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
}
.g main p > .g-btn + a:not(.g-btn){
  min-height: 48px; display: inline-flex; align-items: center;
  font-family: var(--ui); font-size: var(--t-ui); color: var(--blue-deep);
}

/* ==========================================================================
   THE FIGURE CAPTION
   Captions were inheriting body size and sitting flush against the image, so
   they read as the start of the next paragraph rather than as a caption.
   ========================================================================== */
main figcaption{
  margin-top: var(--s3); padding-left: var(--s3);
  border-left: 2px solid var(--gilt);
  font-family: var(--ui); font-size: var(--t-ui); line-height: 1.5;
  color: var(--ink-soft); max-width: var(--m-read);
}

/* ==========================================================================
   TABLES
   The comparison table had no zebra, no sticky header and no minimum column,
   so at width it was a wall of numbers and on a phone it collapsed.
   ========================================================================== */
main table{ border-collapse: collapse; width: 100%; }
main thead th{
  position: sticky; top: 86px; z-index: 1;
  background: var(--sand); border-bottom: 2px solid var(--gilt);
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gilt);
  text-align: left; padding: var(--s3) var(--s4); white-space: nowrap;
}
main tbody th, main tbody td{
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  font-size: var(--t-base); vertical-align: top;
}
main tbody tr:nth-child(even){ background: rgba(115,86,45,.035); }
main tbody th{ font-weight: 400; color: var(--blue-deep); }
main td[data-num], main .g-num-cell{ font-variant-numeric: lining-nums tabular-nums; }

/* A drawn mark or a band between two sections breaks the `+` adjacency, so
   the seam rule missed most of the page. The mark IS the seam where it
   appears; elsewhere the section carries its own top rule and the ones that
   follow a mark or a band suppress it. */
main > .g-sec{ border-top: 1px solid var(--line); }
main > .g-hero + .g-sec,
main > .g-mark__wrap + .g-sec,
main > .g-band + .g-sec,
main > .g-sec--dark + .g-sec,
main > .g-sec--sand + .g-sec--sand,
main > .g-sec:first-child{ border-top: 0; }
main > .g-sec--dark{ border-top: 0; }

/* The hero image already sets an explicit height, which reserves its space
   just as well as a ratio. Nothing to do — noted so the next pass does not
   try to "fix" it again. */

/* ==========================================================================
   THE FACTS LIST ON A TABLET
   Two columns from 46rem, each carrying an 8rem label plus its answer, left
   the answer 128px wide — nineteen characters. The label column only makes
   sense once there is room for both, so the pair stacks until then and the
   two-column split waits for real width.
   ========================================================================== */
@media (max-width: 66rem){
  .g-facts-list{ grid-template-columns: 1fr; }
}
@media (max-width: 52rem){
  .g-facts-list > div{ grid-template-columns: 1fr; gap: 2px; }
}

/* Same fault as the facts list, in the plate: a fixed label column beside a
   two-column split leaves the answer 243px — thirty-four characters. The
   label sits above its answer until there is room for both side by side. */
@media (max-width: 72rem){
  .g-plate__l{ grid-template-columns: 1fr; }
}
@media (max-width: 56rem){
  .g-plate__l > div{ grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   THE CREDENTIAL, AND THE PROOF
   Two claims, kept visually apart on purpose. The credential is about the
   building and is stated by the house. The proof is other people, and looks
   like something quoted rather than something asserted.
   ========================================================================== */
.g-cred2{
  display: grid; gap: var(--s2); margin: var(--s6) 0;
  padding-left: var(--s4); border-left: 2px solid var(--gilt);
  max-width: var(--m-wide);
}
.g-cred2__k{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}
.g-cred2__t{ font-size: var(--t-base); line-height: 1.6; color: var(--ink); }

.g-proof{
  margin: var(--s6) 0; padding: var(--s5) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.g-proof__k{
  margin: 0 0 var(--s4); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gilt);
}
.g-proof__l{
  margin: 0; display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem,100%),1fr));
}
.g-proof__l > div{ display: grid; gap: 2px; }
.g-proof__l dt{
  font-family: var(--display); font-weight: 300; font-size: var(--t-h2);
  color: var(--blue-deep); font-variant-numeric: lining-nums;
}
.g-proof__l dd{
  margin: 0; font-family: var(--ui); font-size: var(--t-ui);
  line-height: 1.45; color: var(--ink-soft);
}

/* ==========================================================================
   1. THE CURRENT PAGE IN THE NAV
   Eight items and nothing said which one you were on.
   ========================================================================== */
.g-nav a.is-here, .g-nav a[aria-current="page"]{
  color: var(--gilt);
  box-shadow: inset 0 -2px 0 var(--gilt);
}
.g-nav__has-sub:has(a[aria-current="page"]) > a{
  color: var(--gilt); box-shadow: inset 0 -2px 0 var(--gilt);
}
/* On a transparent header over a photograph the gilt underline still reads,
   but the text needs to stay white to survive the image behind it. */
body.at-top.has-hero .g-top:not(.is-solid) .g-nav a[aria-current="page"]{
  color: #fff; box-shadow: inset 0 -2px 0 var(--gilt);
}

/* ==========================================================================
   14. PRINT
   Someone will print the confirmation and the arrival details, and until now
   they would have got the navigation, the booking bar and a dark hero eating
   a cartridge of ink.
   ========================================================================== */
@media print{
  .g-top, .g-nav, .g-foot, .g-bookbar, .g-book-bar, .g-cred, .g-crumbs,
  .g-hero, .g-mark__wrap, .g-cur, .g-lb, .g-panel--sticky,
  .g-three, .g-proof, .g-anim, .g-months, .g-avc,
  [data-wk], [data-pick], video, .g-skip{ display: none !important; }

  html, body{ background: #fff !important; color: #000 !important; font-size: 11pt; }
  main{ padding: 0 !important; }
  .g-wrap{ max-width: none; padding: 0; }
  .g-sec{ padding: 0 0 12pt !important; border: 0 !important; }

  h1,h2,h3{ color: #000 !important; page-break-after: avoid; }
  h2{ font-size: 15pt; margin-top: 14pt; }
  p, li, dd{ color: #000 !important; orphans: 3; widows: 3; }

  /* The reference and the dates are what the page is for. */
  .g-ref, .g-conf__ref{ font-size: 16pt !important; font-weight: 700; }

  /* A printed link is useless unless the address is on the paper. */
  main a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; }
  main a[href^="/"]::after{ content: " (chateaugudanes.com" attr(href) ")"; font-size: 9pt; }
  main a[href^="#"]::after, main a.g-btn::after{ content: ""; }
  main a.g-btn{ border: 1px solid #000; color: #000 !important; background: none !important; }

  .g-plate, .g-limit, table{ page-break-inside: avoid; }
  img{ max-width: 100% !important; page-break-inside: avoid; }
}

/* ==========================================================================
   BEFORE YOU BOOK — the terms, arriving, and telling us when
   ========================================================================== */
.g-terms{
  margin: var(--s5) 0; padding: var(--s5);
  background: var(--sand-2); border-left: 2px solid var(--gilt);
}
/* Panel padding inside the wrap's padding left 28 characters on a phone.
   Below 30rem the panel keeps its rule and drops the inset. */
@media (max-width: 26rem){
  .g-terms{ padding: var(--s4) 0 var(--s4) var(--s4); background: none; }
  .g-terms__l{ gap: var(--s3); }
  .g-terms__l > div{ gap: 1px; }

  /* With the background gone the label sits straight on whatever is behind
     it, which inside the booking dossier is navy. This is the only width at
     which the terms text needs the light ink — kept here, beside the rule
     that removes the ground. */
  .g .g-dossier .g-terms span, .g .g-aside .g-terms span{ color: rgba(226,214,192,.98); }
  .g .g-dossier .g-terms a:not(.g-btn), .g .g-aside .g-terms a:not(.g-btn){
    color: rgba(226,214,192,.98); border-bottom: 1px solid rgba(226,214,192,.55);
  }
}
.g-terms__k{
  margin: 0 0 var(--s4); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt);
}
.g-terms__l{ margin: 0; display: grid; gap: var(--s4); }
@media (min-width: 60rem){ .g-terms__l{ grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s6); } }
.g-terms__l > div{ display: grid; gap: 2px; }
.g-terms__l dt{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .06em; color: var(--blue-deep);
}
.g-terms__l dd{ margin: 0; font-size: var(--t-ui); line-height: 1.55; color: var(--ink-soft); }

.g-arrive{ list-style: none; counter-reset: none; margin: var(--s6) 0 var(--s5); padding: 0; }
.g-arrive > li{
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--s4);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 26rem){ .g-arrive > li{ grid-template-columns: 1fr; gap: var(--s2); } }
.g-arrive__n{
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border: 1px solid var(--gilt); border-radius: 50%;
  font-family: var(--ui); font-size: var(--t-sm); color: var(--gilt);
  font-variant-numeric: lining-nums;
}
.g-arrive__t{ margin: 0 0 var(--s2); font-family: var(--display); font-weight: 300;
  font-size: var(--t-h3); color: var(--blue-deep); }
.g-arrive__p{ margin: 0; font-size: var(--t-base); line-height: 1.65; color: var(--ink); max-width: var(--m-wide); }

.g-notify{ margin-top: var(--s5); display: grid; gap: var(--s4); max-width: var(--m-tight); }
.g-notify .g-field{ margin: 0; }
.g-notify__n{ margin: 0; font-family: var(--ui); font-size: var(--t-sm);
  line-height: 1.5; color: var(--ink-soft); }

/* 13 — the old-link list on the 404 */
.g-lost__old{ margin: var(--s6) 0 0; border-top: 1px solid var(--line); padding-top: var(--s5); }
.g-lost__old summary{
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-family: var(--ui); font-size: var(--t-ui); color: var(--blue-deep);
}
.g-lost__old summary:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
.g-lost__l{ margin: var(--s3) 0 0; padding-left: var(--s5); display: grid; gap: var(--s2); }
.g-lost__l li{ font-size: var(--t-ui); color: var(--ink-soft); }
.g-lost__l code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--sand-2); padding: 1px 5px; color: var(--ink);
}

/* 15 — the price on each of the three intents */
.g-three__p{
  margin: var(--s2) 0 0; font-family: var(--ui); font-size: var(--t-ui);
  color: var(--ink-soft);
}
.g-three__p b{
  font-family: var(--display); font-weight: 400; font-size: var(--t-h3);
  color: var(--blue-deep); font-variant-numeric: lining-nums;
}

/* 17 — the link out of a gallery photograph */
.g-gal__go{
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  font-family: var(--ui); font-size: var(--t-ui); color: var(--gilt);
  text-decoration: none;
}
.g-gal__go:hover{ text-decoration: underline; }
.g-gal__go:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }

/* The logo needed no work from me. The wrapper takes a background colour and
   uses the logo file as a CSS mask, so the mark paints in ink on a light
   header and white over a photograph — which is the right technique and was
   already there. My invert filter did the same job worse and fought it.
   Removed. */

/* 2. THE BOOK BUTTON SAT ON TOP OF "CONTACT"
   `.g-booksel` was positioned rather than laid out, so it landed at x1089
   while the nav ran to x1073 — the last nav item disappeared underneath it.
   The header is a flex row; the button takes its place in the row and the nav
   gets the space that is left.                                                */
.g-top__in{ display: flex; align-items: center; gap: var(--s4); }
.g-top__in .g-nav{ flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.g-top__in .g-booksel{
  position: static; flex: 0 0 auto; margin-left: var(--s2); inset: auto;
}
.g-top__in .g-navbtn{ flex: 0 0 auto; }
.g-top__in .g-logo{ flex: 0 0 auto; }

/* Below the width where eight items plus a button genuinely fit, the nav goes
   to the menu rather than shrinking until it collides. */
@media (max-width: 78rem){
  .g-top__in .g-nav{ display: none; }
}

/* ==========================================================================
   THE THREE WAYS IN
   `auto-fit, minmax(27rem, 1fr)` gave two columns in a 1216px wrap, so with
   three items the third was always marooned on its own row with half the
   page empty beside it. Three items want three columns or one — never two.
   ========================================================================== */
.g-three__l{ grid-template-columns: 1fr; gap: var(--s6); }
@media (min-width: 62rem){
  .g-three__l{ grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
}
/* At three across each column is about 22rem, so the number moves above the
   text rather than beside it — a 40px circle plus a 3-word heading does not
   fit on one line at that width. */
@media (min-width: 62rem){
  .g-three__i{ display: block; }
  .g-three__n{ margin-bottom: var(--s4); }
}

/* ==========================================================================
   THE FAMILY NOTE
   612px of text sitting in a 1216px wrap with nothing beside it. It is one
   sentence and a link, so it should sit as a line across the page rather
   than as a column with a hole next to it.
   ========================================================================== */
.g-family{
  display: grid; align-items: baseline; gap: var(--s3) var(--s6);
  padding: var(--s5) 0 var(--s5) var(--s5);
  border-left: 2px solid var(--gilt); max-width: none;
}
@media (min-width: 60rem){
  .g-family{ grid-template-columns: 12rem 1fr auto; }
  .g-family__k{ grid-column: 1; }
  .g-family p{ grid-column: 2; margin: 0; max-width: var(--m-wide); }
  .g-family a{ grid-column: 3; white-space: nowrap; }
}

/* The three columns hold different amounts of description, so the price and
   the buttons landed at three different heights and the row read as ragged.
   Each column is a flex column and the action is pushed to the bottom, so
   the three buttons sit on one line whatever the copy does. */
@media (min-width: 62rem){
  .g-three__l{ align-items: stretch; }
  .g-three__i{ display: flex; flex-direction: column; height: 100%; }
  /* The content is nested in .g-three__b, so the push has to happen there. */
  .g-three__b{ display: flex; flex-direction: column; flex: 1 1 auto; }
  .g-three__d{ flex: 0 0 auto; }
  /* The push was on the price line, so an item with no price had nothing to
     push with and its buttons rode up. It belongs on the last child. */
  .g-three__b > :last-child{ margin-top: auto; }
  /* At three columns a long secondary link ("Ask about a private dinner")
     wrapped under its button on one item only, so that button rode up 60px.
     The pair stacks in every item, so the row stays even whatever the copy. */
  .g-three__a{ flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .g-three__a .g-btn{ width: 100%; text-align: center; }
  .g-three__p{ padding-top: var(--s4); margin-bottom: var(--s3); }
}

/* ==========================================================================
   THE HERO SEARCH BAR
   Three typefaces in one four-cell bar: the labels in Inter, the values in
   EB Garamond, the button in Cormorant Garamond. And the value was 16px
   against a 15px label — so the thing you are entering was the same size as
   the word describing it, which is the wrong way round for the most important
   control on the site.

   The cells were also 97px tall around 48px of content, so the bar carried
   50px of dead height.
   ========================================================================== */

/* One face for the labels, one for the values. The button is an action, so it
   takes the interface face like every other button on the site. */
.g .g-herosearch__f > label,
.g .g-herosearch__f label,
.g .g-herosearch__f .g-herosearch__k{
  font-family: var(--ui); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  display: block; margin-bottom: 2px;
}
.g .g-herosearch__f input,
.g .g-herosearch__f select,
.g .g-herosearch__f .g-rp__btn,
.g .g-herosearch__f .g-rp__btn .g-rp__val,
.g .g-herosearch__f .g-herosearch__v{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h3);            /* was 16px — a pixel above its own label */
  color: var(--blue-deep); line-height: 1.15;
  font-variant-numeric: lining-nums;
}
/* The picker button replaces the input visually, so it carries no chrome of
   its own — it is the value, not a control around the value. */
.g-herosearch__f .g-rp__btn{
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; min-height: 40px; cursor: pointer;
}
.g-herosearch__f .g-rp__btn:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 3px; }
/* Nothing entered yet, so it is a prompt rather than a value. */
.g .g-herosearch__f .g-rp__val:not(.is-set){
  color: var(--ink-soft); opacity: .7; font-style: italic;
}
/* The placeholder was full-strength ink, so an empty field looked filled in.
   It is a prompt, not a value. */
.g-herosearch__f input::placeholder{
  color: var(--ink-soft); opacity: .62; font-style: italic;
}
.g .g-herosearch__go{
  font-family: var(--ui); font-size: var(--t-ui); font-weight: 600;
  letter-spacing: .04em;
}

/* 97px cells around 48px of content. The bar is a row of controls, not a
   panel, so it takes the height its content needs and no more. */
.g .g-herosearch__f{ padding: var(--s3) var(--s5); }
.g-herosearch__f input,
.g-herosearch__f select{ min-height: 40px; padding: 0; border: 0; background: none; }
.g-herosearch__go{ padding: var(--s3) var(--s6); }
.g-herosearch{ align-items: stretch; }

@media (max-width: 34rem){
  .g-herosearch__f{ padding: var(--s3) var(--s4); }
  .g-herosearch__f input,
  .g-herosearch__f select,
  .g-herosearch__f .g-herosearch__v{ font-size: var(--t-lede); }
}

/* The value span inside the picker button computed 15px while the button
   itself was 27px. It is not inheriting and I could not find the rule that
   stops it — an ordinary declaration here has no effect, though other
   properties on the same selector apply normally. Forced, with the cause
   noted so it can be found and this removed. */
.g-herosearch__f .g-rp__btn .g-rp__val,
.g-rp__btn .g-rp__val{
  font-size: var(--t-h3) !important;
  font-family: var(--display) !important;
  color: inherit;
}

/* The guests select sat at label size beside two 27px date values, so the
   row read as two big fields and one small one. Same treatment, same reason. */
.g-herosearch__f select,
.g-herosearch__f input:not([type="date"]){
  font-size: var(--t-h3) !important;
  font-family: var(--display) !important;
  color: var(--blue-deep);
  border: 0; background: none; padding: 0; min-height: 40px;
  font-variant-numeric: lining-nums;
}

/* The optional extras were 4.3 screens of add-ons between the price and the
   reviews — more page than the rooms themselves. Folded, so the people who
   want a private dinner can find it and everyone else scrolls past one line. */
.g-extras-fold > summary{
  cursor: pointer; min-height: 48px; display: flex; align-items: center;
  padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--ui); font-size: var(--t-ui); color: var(--blue-deep);
}
.g-extras-fold > summary:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 2px; }
.g-extras-fold[open] > summary{ border-bottom-color: var(--gilt); }
.g-extras-fold .g-sec{ padding-top: var(--s5); border: 0; }

/* ==========================================================================
   THE PHONE — items 1, 2 and 3
   Every length I measured this session was desktop. On a phone Stay is 42
   screens and Restoration 37, because a two-column block becomes two stacked
   blocks and a wide table becomes a tall one.

   None of this changes the desktop layout. It changes what a phone has to
   scroll past to reach the thing it came for.
   ========================================================================== */
@media (max-width: 34rem){

  /* 2 — the long reference sections fold. Someone on a phone who wants the
     FAQ can open it; everyone else scrolls one line instead of eight screens.
     Desktop keeps them open, because there the length is affordable. */
  .g-faq2, .g-keyinfo, .g-extras-fold, .g-plate--long,
  .g-sec[data-fold] > .g-wrap > :not(h2):not(.g-eyebrow):not(.g-fr){
    display: none;
  }
  .g-sec[data-fold]{ padding-bottom: var(--s5); }
  .g-sec[data-fold] > .g-wrap::after{
    content: "Tap to read"; display: block; margin-top: var(--s3);
    font-family: var(--ui); font-size: var(--t-sm); color: var(--gilt);
  }
  .g-sec[data-fold].is-open > .g-wrap > *{ display: revert; }
  .g-sec[data-fold].is-open > .g-wrap::after{ content: "Tap to close"; }
  .g-sec[data-fold]{ cursor: pointer; }
  .g-sec[data-fold]:focus-visible{ outline: 2px solid var(--gilt); outline-offset: -2px; }

  /* Sections carried desktop padding on a phone, so every one of thirty cost
     an extra third of a screen in whitespace alone. */
  .g-sec{ padding-top: var(--s6); padding-bottom: var(--s6); }
  .g-sec--tight{ padding-top: var(--s5); padding-bottom: var(--s5); }

  /* Marks are a desktop grace note. On a phone thirty of them are thirty
     scroll events for no information. */
  .g-mark__wrap{ display: none; }

  /* A two-column plate stacks to double height. The label goes inline. */
  .g-plate__l > div{ grid-template-columns: 1fr; gap: 1px; }
  .g-plate__l dt{ font-size: var(--t-sm); }

  /* The site's own .g-stickybar already does this, and does it better —
     it changes by page type and stays quiet for a guest who already holds a
     booking. Main only needs clearing of it. */
  main{ padding-bottom: 5.5rem; }
}

/* On a phone the five room cards are 5.3 screens and the numbers table 3.2 —
   more than a fifth of the page between them, and both are lists a phone
   reads badly as a tall column. */
@media (max-width: 34rem){

  /* The cards swipe sideways instead of stacking. Five rooms becomes one
     screen with four more a thumb away, which is how a phone expects a set
     of options to behave. */
  .g-cards{
    display: grid; grid-auto-flow: column;
    grid-auto-columns: min(92%, 22rem);
    gap: var(--s4);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s4);
    margin-inline: calc(-1 * var(--s5));
    padding-inline: var(--s5);
    scrollbar-width: none;
  }
  .g-cards::-webkit-scrollbar{ display: none; }
  .g-cards > .g-card{ scroll-snap-align: start; grid-column: auto !important; }
  .g-cards > .g-card:last-child:nth-child(odd){ grid-column: auto !important; }
  .g-cards__hint{
    display: block; margin-top: var(--s2);
    font-family: var(--ui); font-size: var(--t-sm); color: var(--ink-soft);
  }

  /* The comparison table scrolls rather than wrapping every cell onto four
     lines. The room name stays put so a column still means something. */
  main table{ display: block; overflow-x: auto; white-space: nowrap; }
  main tbody th{ position: sticky; left: 0; background: var(--sand); z-index: 1; white-space: normal; min-width: 9rem; }
  main thead th{ position: static; }
}
@media (min-width: 44.01rem){ .g-cards__hint{ display: none; } }

/* ==========================================================================
   THE LABEL STACK
   A section opens with a French line and its English gloss, then an eyebrow,
   then the heading — 84px of label above an 80px heading, repeated down every
   page. On a phone that is more than half a screen of preamble per section,
   and there are twenty-six of them on Stay.

   The French line is a grace note; it belongs where there is room for it.
   Below 44rem the eyebrow carries the section on its own.
   ========================================================================== */
@media (max-width: 34rem){
  .g-fr{ display: none; }
  .g-eyebrow{ margin-bottom: var(--s2); }
  .g-place, .g-h2{ margin-top: 0; }
}

/* Even on desktop the two sat as separate blocks with a full gap between
   them. They are one label; they read as one line. */
@media (min-width: 44.01rem){
  .g-fr + .g-eyebrow{ margin-top: calc(-1 * var(--s3)); }
}

/* ==========================================================================
   A LIGHT PLATE INSIDE A DARK SECTION
   `.g-sec--dark` recolours its descendants for a navy background, but the
   plate carries its own cream panel — so the dd inherited the pale colour and
   landed cream-on-cream at 1.18:1. Effectively invisible, and it is the block
   listing what an atelier week includes.

   The plate keeps its own colours wherever it appears.
   ========================================================================== */
.g-sec--dark .g-plate{ background: var(--white); border: 1px solid var(--line); }
.g-sec--dark .g-plate dt{ color: var(--gilt); }
.g-sec--dark .g-plate dd,
.g-sec--dark .g-plate .g-p,
.g-sec--dark .g-plate li{ color: var(--ink); }
.g-sec--dark .g-plate a:not(.g-btn){ color: var(--blue-deep); }

/* Same for any light panel dropped into a dark section. */
.g-sec--dark .g-terms{ background: var(--white); }
.g-sec--dark .g-terms dt{ color: var(--blue-deep); }
.g-sec--dark .g-terms dd{ color: var(--ink-soft); }

/* The action after a dark section's plate was gilt-on-navy and squashed
   against the left edge with a stray rule beside it. */
.g-sec--dark .g-plate + p,
.g-sec--dark .g-plate + .g-p{ margin-top: var(--s5); }
.g-sec--dark .g-btn--solid{ background: var(--white); color: var(--blue-deep); border-color: var(--white); }
.g-sec--dark .g-btn--solid:hover{ background: var(--sand); }

/* ==========================================================================
   GILT ON NAVY IS 1.91:1
   The gilt is a beautiful colour on sand — 6.3:1, comfortably legible. On the
   navy it drops to 1.91:1, which is below every accessibility floor and, more
   plainly, hard to read. It appears on every dark section, every dark panel
   and the credential band on all thirteen public pages.

   A lighter gilt keeps the colour and reaches 5.6:1. Same family, readable.
   ========================================================================== */
:root{ --gilt-on-dark: #C6A66E; }

.g-sec--dark .g-eyebrow,
.g-sec--dark .g-fr,
.g-sec--dark .g-limit__k,
.g-cred__m,
.g-aside .g-eyebrow,
.g-wk__out .g-wk__tot dt,
.g-mobar__p,
.g-stickybar .g-eyebrow{
  color: var(--gilt-on-dark);
}
/* Rules and borders in the same position take it too, so a gilt line does not
   vanish next to a label that no longer does. */
.g-sec--dark .g-limit,
.g-sec--dark .g-fr::after{ border-color: var(--gilt-on-dark); }

/* Three more places where gilt or a pale ink sits on a dark ground and my
   first pass did not reach: the cost builder's total row, the pre-submit
   review block, and a dark panel whose own background rule had been
   overridden so pale text was landing on cream. */
.g-wk__out .g-wk__tot dt,
.g-wk__out dt,
.g-review__h,
.g-review dt{ color: var(--gilt-on-dark); }

.g-panel--dark{ background: var(--blue-deep); }
.g-panel--dark .g-p,
.g-panel--dark p,
.g-panel--dark li,
.g-panel--dark dd{ color: #DCD5C8; }
.g-panel--dark .g-eyebrow,
.g-panel--dark dt{ color: var(--gilt-on-dark); }
.g-panel--dark h2, .g-panel--dark h3, .g-panel--dark .g-place{ color: #fff; }

/* ==========================================================================
   PROSE INSIDE A FLEX ROW
   The price note and the family note put a whole sentence as loose text
   between flex children. Each run of text becomes its own anonymous flex
   item, so the line broke at arbitrary points — "Five bedrooms, from €220"
   and then a break before "a night".

   The sentence is now one item and wraps as prose does.
   ========================================================================== */
.g-pricenote__t, .g-family__t{
  flex: 1 1 24rem; min-width: 0;
  font-size: var(--t-lede); line-height: 1.55; color: var(--blue-deep);
  max-width: var(--m-wide);
}
.g-pricenote__t b, .g-family__t b{
  font-family: var(--display); font-weight: 400; font-size: 1.15em;
  font-variant-numeric: lining-nums; white-space: nowrap;
}
/* A price and its unit are one thing and must never be split. */
.g-pricenote__t b + *, .g-pricenote b{ white-space: nowrap; }
.g-welcome__t{ flex: 1 1 22rem; min-width: 0; max-width: var(--m-wide); }
.g-backtoform__t{ flex: 1 1 22rem; min-width: 0; max-width: var(--m-wide); }

/* ==========================================================================
   THE HEADER FADE IS A HOLE
   The header fades between transparent and solid over 300ms. Going out that
   is fine. Coming in it means a third of a second where the hero title is
   sliding underneath a header that is only half there — the logo, the Book
   button and the title all drawn over each other, which is what an iPhone
   screenshot showed.

   Fade out slowly, arrive instantly.
   ========================================================================== */
body.has-hero .g-top{ transition: background .28s ease, border-color .28s ease; }
body.has-hero .g-top.is-solid{
  background: var(--sand); border-bottom-color: var(--line);
  transition: none;
}

/* Belt and braces: while the header is transparent, hero text that reaches it
   is clipped rather than drawn through it. */
body.has-hero:not(.at-top) .g-hero__title,
body.has-hero:not(.at-top) .g-hero__lede,
body.has-hero:not(.at-top) .g-hero__motto{ position: relative; z-index: 1; }
.g-top{ z-index: 40; }

/* ==========================================================================
   THE GAPS
   Measured across the site: the median distance from the last line of one
   section to the first line of the next is 168px, and the worst is 394px —
   nearly half a screen of nothing, twenty-eight times on one page.

   It comes from stacking: 84px of top padding on every section, plus 40–84px
   of bottom padding on the one above, plus each block's own margin. Three
   spacing systems adding up, none of them wrong on its own.

   Sections are separated by a single scale step, not three. The rhythm holds;
   the holes go.
   ========================================================================== */
/* The clamp above is the single source. These only handle the special
   cases — a dark section earns more air, a tight one less. */
main > .g-sec--tight{ padding-top: var(--s5); padding-bottom: var(--s5); }
main > .g-sec--dark{ padding-top: var(--s7); padding-bottom: var(--s7); }

/* A section that follows one with the same background does not need both
   paddings — the seam is a hairline, not a chasm. */
/* A drawn mark or a band sits between sections, so `+` misses most of them.
   Every section after the first takes the smaller top padding. */
main > .g-sec ~ .g-sec{ padding-top: var(--s5); }

/* The last child of a wrap carries a trailing margin that lands on top of the
   section's own padding. */
main > section > .g-wrap > :last-child{ margin-bottom: 0; }
main > section > .g-wrap > :first-child{ margin-top: 0; }

/* The journal block was 789px for six lines and a form. */
.g-journal__in{ padding: 0; }
.g-journal__form{ gap: var(--s3); }
.g-journal__p{ margin-bottom: var(--s4); }

@media (max-width: 34rem){
  main > section,
  main > .g-sec--sand{ padding-top: var(--s6); padding-bottom: var(--s6); }
  main > .g-sec + .g-sec{ padding-top: var(--s5); }
  main > .g-sec--dark{ padding-top: var(--s6); padding-bottom: var(--s6); }
}

/* A .g-wrap with nothing in it still takes its own padding — 80px of nothing
   on The Estate. If there is no content there is no block. */
main > .g-wrap:empty{ display: none; }

/* ==========================================================================
   DINNER NIGHTS ON THE CALENDAR
   La Table does not cook every night, and until now the only way to find out
   was to ask. The calendar already shows which nights are free; a small mark
   says which of those have a dinner.

   Sourced from published menus, so a night opens when the kitchen publishes
   its menu — no second schedule to fall out of step.
   ========================================================================== */
.g-avc__d{ position: relative; }
.g-avc__d.has-dinner::after{
  content: ""; position: absolute; left: 50%; bottom: 4px;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--gilt);
}
/* On a taken or past night the dot is context, not an offer. */
.g-avc__d.is-taken.has-dinner::after,
.g-avc__d.is-past.has-dinner::after{ opacity: .38; }

.g-avc__dot{
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gilt); vertical-align: middle;
}
/* The key wraps to three items on a phone; let it. */
.g-avc__k{ display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }

/* The same mark in the date picker, where someone is actually choosing. */
.g-rp__d{ position: relative; }
.g-rp__d.has-dinner::after{
  content: ""; position: absolute; left: 50%; bottom: 3px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--gilt);
}
.g-rp__d.is-past.has-dinner::after,
.g-rp__d.is-taken.has-dinner::after{ opacity: .35; }
/* On a selected night the gilt would vanish into the navy. */
.g-rp__d.is-start.has-dinner::after,
.g-rp__d.is-end.has-dinner::after{ background: var(--gilt-on-dark); }

/* ==========================================================================
   PROSE STRANDED IN ITS OWN PANEL
   Five blocks set their text far narrower than the box holding it:

       .g-panel--dark   390px of text in a 1168px panel   778px empty
       .g-timeline      510px in 1168px
       .g-story__d      448px in 1056px
       .g-creed__lede   368px in  736px

   Each was presumably given a measure to stop the line running long. But a
   measure is a MAXIMUM, not a target — capping the text without narrowing the
   panel leaves the panel two-thirds empty, which is what "all over the place"
   looks like. Either the text fills its box or the box comes in to meet it.

   The box comes in. The measure is kept, so nothing reads worse.
   ========================================================================== */
.g-panel--dark{ max-width: var(--m-read); }
.g-panel--dark > *:not(p):not(li):not(dd):not(.g-limit){ max-width: none; }

.g-timeline{ max-width: var(--m-read); }
.g-timeline > li{ max-width: none; }

.g-story__d{ max-width: none; }
.g-story__in, .g-story{ max-width: var(--m-read); }

/* The creed panel holds a heading, a lede and a pull-quote, not a single
   paragraph. --m-tight is sized for ~50 characters of 18px body text, and
   squeezed its 27px display-italic quote to 21 characters a line. */
.g-creed__in{ max-width: var(--m-wide); }
.g-creed__lede{ max-width: none; }

/* Where a panel is deliberately wide — because it holds a table, a grid or a
   photograph — the prose inside it stays on a readable measure and the panel
   keeps its width. That is a different case and is left alone. */

/* Same fault in two more panels: the journal block sets its text to 368px
   (40 characters) inside a 704px box, and the steps panel to 448px inside
   1168px. Both cap the text and leave the box wide. */
.g-journal__in{ max-width: var(--m-tight); }
.g-journal__in > *:not(p):not(li):not(dd):not(.g-limit){ max-width: none; }
.g-steps__out{ max-width: var(--m-read); }
.g-steps__out > *:not(p):not(li):not(dd):not(.g-limit){ max-width: none; }

/* Two more of the same: the weather block sets 416px of text across the full
   1440px width, and the scarcity panel 352px inside 896px. */
.g-wx{ max-width: var(--m-read); margin-inline: auto; }
.g-wx > *:not(p):not(li):not(dd):not(.g-limit){ max-width: none; }
.g-scarce__in{ max-width: var(--m-tight); }
.g-scarce__in > *:not(p):not(li):not(dd):not(.g-limit){ max-width: none; }

/* ==========================================================================
   A TWO-COLUMN BLOCK WITH ONE COLUMN
   `.g-two` splits into text and media. Where there is no media the text keeps
   half the width and the other half is empty — 320px of nothing beside a
   paragraph. This is the "empty second column" I flagged several rounds ago
   and never fixed.

   A single child spans both columns.
   ========================================================================== */
.g-two:has(> :only-child) > *,
.g-two > :only-child{ grid-column: 1 / -1; max-width: var(--m-read); }
/* If the media is present but empty — a missing photograph — the text still
   takes the row rather than sitting beside a gap. */
.g-two > div:empty{ display: none; }

/* ==========================================================================
   THE COMPONENTS THAT NEVER HAD A MEASURE
   Collapsing the 23 widths onto three tokens only fixed what already had a
   max-width. These carried none at all, so their prose ran to whatever the
   panel gave it — 162 characters on a limit note, 123 on the booking bar.

   Anything holding a sentence gets a measure. One list, so the next component
   inherits the system instead of inventing a twenty-fourth width.
   ========================================================================== */
.g-faq__a, .g-faq__q,
.g-ledger__note,
.g-limit, .g-limit p,
.g-book-bar__note,
.g-welcome__t, .g-backtoform__t,
.g-hint, .g-note, .g-caption,
.g-arrive__p,
.g-terms__l dd,
.g-plate__l dd,
.g-facts-list dd,
.g-three__d,
.g-card__desc,
.g-journal__p,
.g-notify__n,
.g-avc__k,
main figcaption{
  max-width: var(--m-read);
}

/* Set larger than body, so it earns a longer line. */
.g-lede, .g-lede-first, .g-p--lede,
.g-hero__lede, .g-quote-band__t, .g-pull p{
  max-width: var(--m-wide);
}

/* A label, a figure caption, a short note beside something else. */
.g-eyebrow, .g-fr, .g-foot-note,
.g-score span, .g-proof__l dd{
  max-width: var(--m-tight);
}

/* A measure inside a column that is already narrow does nothing but risk
   making it narrower. Inside a card, a grid cell or a two-column split the
   column IS the measure. */
/* Inside a card or a grid cell the column already IS the measure, so a second
   one only risks making it narrower. The card's own description keeps its
   measure though — it is the one thing in there that is prose. */
.g-card > *, .g-three__i > *, .g-anim__i > *,
.g-two > * > p, .g-cols > * > p{
  max-width: none;
}
.g-card__desc, .g-three__d, .g-anim__d{ max-width: var(--m-read); }

/* ==========================================================================
   THE MEASURE, ENFORCED LAST
   Several components declare a measure early in the sheet and something later
   clears it — I traced one for a long time without finding the rule, and the
   element ends up with `max-width: none` and a 162-character line.

   Rather than keep hunting overrides, the measure is restated at the end of
   the stylesheet where nothing can follow it. If the earlier declaration is
   later found to be sufficient, this block can go.
   ========================================================================== */
main .g-limit,
main .g-faq__a,
main .g-ledger__note,
main .g-book-bar__note,
main .g-welcome__t,
main .g-backtoform__t,
main .g-hint,
main .g-arrive__p,
main .g-journal__p,
main .g-notify__n,
main figcaption{
  max-width: var(--m-read);
}
main .g-lede, main .g-lede-first,
main .g-quote-band__t{
  max-width: var(--m-wide);
}
/* The hero lede is the largest text on the site, so a measure sized for body
   copy leaves it 37 characters. It keeps its own. */
.g-hero__lede{ max-width: 52rem; }

/* ==========================================================================
   A MEASURE IN REM IGNORES THE FONT SIZE
   --m-read at 46rem gives 66 characters at 18px and 96 at 16px, so every
   component set smaller than body ran long even with the token applied. The
   whole point of `ch` is that it scales with the text.

   The tokens stay in rem for layout use — a panel width should not change
   with its contents — but prose measures in characters.
   ========================================================================== */
main .g-limit, main .g-faq__a, main .g-faq__q,
main .g-ledger__note, main .g-book-bar__note,
main .g-welcome__t, main .g-backtoform__t,
main .g-hint, main .g-arrive__p, main .g-journal__p,
main .g-notify__n, main figcaption,
main .g-card__desc, main .g-three__d,
main .g-terms__l dd, main .g-plate__l dd, main .g-facts-list dd{
  max-width: 66ch;
}
main .g-lede, main .g-lede-first, main .g-quote-band__t{ max-width: 60ch; }
.g-hero__lede{ max-width: 46ch; }
main .g-p, main .g-sec > .g-wrap > p{ max-width: 68ch; }

/* ==========================================================================
   THE HERO SEARCH PANEL ON A PHONE
   329px — 39% of an iPhone screen — for three fields and a button, stacked
   full width with 88px per row. The hero it sits in is the photograph people
   came for, and the panel covers most of it.

   Arrival and departure share a row, because a date range is one decision and
   the two halves are read together. Guests and the button share the next.
   Roughly half the height, everything still 48px tall to the thumb.
   ========================================================================== */
@media (max-width: 44rem){
  .g-herosearch{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
  }
  .g .g-herosearch__f{ padding: var(--s3) var(--s4); min-height: 0; }
  .g .g-herosearch__f > label{ margin-bottom: 0; }
  /* The tap target itself must be 44px, not the cell around it. */
  .g .g-herosearch__f .g-rp__btn{ min-height: 44px; }
  .g .g-herosearch__f .g-rp__btn .g-rp__val,
  .g .g-herosearch__f input:not([type="date"]),
  .g .g-herosearch__f select{
    font-size: var(--t-lede) !important;
    min-height: 44px;
  }
  /* guests is a number; it does not need half a row */
  .g-herosearch__f:nth-of-type(3){ grid-column: 1; }
  .g .g-herosearch__go{
    grid-column: 2; margin: 0;
    display: flex; align-items: center; justify-content: center;
    min-height: 56px;
  }
}
/* Below 22rem two columns stop being readable. */
@media (max-width: 22rem){
  .g-herosearch{ grid-template-columns: 1fr; }
  .g-herosearch__f:nth-of-type(3),
  .g .g-herosearch__go{ grid-column: 1; }
}

/* The pause control is pinned to the hero's bottom-right corner. On a desktop
   that is empty sky; on a phone the search panel reaches into it, so the
   button sat on the corner of the Guests field. It moves above the panel,
   where there is nothing to collide with. */
@media (max-width: 44rem){
  /* Top-right put it under the menu button — one collision traded for
     another. Bottom-LEFT is clear: the panel is inset from both edges and
     nothing else in the hero reaches down there. */
  /* Three attempts at placing this as a floating control hit the menu
     button, then the sticky bar, then the search panel. A hero corner on a
     phone has no free space. It goes into the flow instead — below the
     panel, aligned right, where nothing can collide with it. */
  .g-hero__pause{
    position: static;
    display: flex; margin: var(--s3) 0 0 auto;
    width: 44px; height: 44px;
  }
}
/* Never over the search panel, at any width. */
.g-herosearch{ position: relative; z-index: 4; }

/* ==========================================================================
   GOLD, PROPERLY — AND A SECOND COLOUR
   ==========================================================================

   The gilt is #73562D, and it reads brown because it was darkened until it
   passed AA as TEXT on the parchment — 6.02:1. Real leaf gold on cream is
   about 2.1:1, which is unreadable as a word and perfect as a line.

   So the token splits by job rather than by shade:

     --gilt        #73562D   text only. Eyebrows, figures, links. Unchanged.
     --gold        #C5A24A   ormolu — rules, borders, marks, fills, dividers.
                             Never a word on parchment.
     --gold-lit    #DCC077   gold on the navy, where it can be bright: 7.3:1.
     --gold-deep   #9A7B2E   a gold that still carries at small sizes.

   Contrast rules apply to text. A hairline under a heading is not text, and
   holding it to a text ratio is why the gold has been invisible.
   ========================================================================== */
:root{
  --gold:      #C5A24A;
  --gold-lit:  #DCC077;
  --gold-deep: #9A7B2E;
  --gold-wash: rgba(197,162,74,.14);

  /* The second colour, from the building rather than invented: the terracotta
     of the hexagonal floor tiles and the roof. Warm against all that blue. */
  --terre:      #A8603C;
  --terre-pale: #E8CDBE;
  --terre-wash: rgba(168,96,60,.10);
}

/* ---- Every rule and mark that was brown is now gold --------------------- */
.g-eyebrow::before,
.g-fr::after,
.g-place::after,
.g-h2::after,
.g-section-rule,
hr{ background: var(--gold); border-color: var(--gold); }

.g-limit,
.g-cred2,
.g-family,
.g-terms,
.g-pricenote,
.g-welcome,
.g-backtoform{ border-left-color: var(--gold); }

/* The RING is ornament and takes the gold. The numeral inside it is a word
   at 13px, so it keeps the legible gilt — the same split, one level down. */
.g-arrive__n,
.g-three__n{ border-color: var(--gold); color: var(--gilt); }

/* The drawn marks were the same brown as the body rules; they are the one
   piece of ornament on the page and should read as leaf. */
.g-mark{ color: var(--gold); }
.g-mark__wrap svg{ color: var(--gold); }

/* Figures are read, so they keep the legible gilt. What changes is the
   RULE beneath them, which is ornament and can be gold. */
.g-fig, .g-scale__n, .g-proof__l dt, .g-stat__n{ color: var(--gilt); }
.g-fig::after, .g-scale__n::after{ background: var(--gold); }

/* On the navy the gold can be what it actually is. */
.g-sec--dark .g-eyebrow,
.g-sec--dark .g-fr,
.g-sec--dark .g-limit__k,
.g-cred__m,
.g-aside .g-eyebrow,
.g-panel--dark .g-eyebrow,
.g-panel--dark dt,
.g-stickybar .g-eyebrow{ color: var(--gold-lit); }

.g-sec--dark .g-limit{ border-left-color: var(--gold-lit); }
.g-avc__d.has-dinner::after,
.g-rp__d.has-dinner::after,
.g-avc__dot{ background: var(--gold); }

/* The gilt rule beneath a heading was a hairline of brown. */
.g-place::after, .g-h2::after{ height: 2px; }

/* ==========================================================================
   THE SECOND COLOUR, AND A THIRD GROUND
   Fifteen of twenty-nine sections on Restoration sit on plain cream, so the
   page reads as one long sheet. The palette has a stone and a terracotta in
   it that nothing uses.

   Terracotta is not invented: it is the hexagonal floor tile and the roof.
   It gives the blue something to sit against, which cream cannot do.
   ========================================================================== */

/* A ground for the sections that are about the building's own materials —
   the plaster, the stone, the floors. Warmer than the sand, still quiet. */
.g-sec--terre{ background: linear-gradient(180deg, #F4E9E1 0%, #F0E2D8 100%); }
.g-sec--terre .g-eyebrow{ color: #8A4E30; }
.g-sec--terre .g-place::after, .g-sec--terre .g-h2::after{ background: var(--terre); }
.g-sec--terre .g-limit{ border-left-color: var(--terre); }

/* A gold rule to close a run of sections, rather than another hairline. */
.g-rule--gold{
  height: 2px; border: 0; margin: var(--s7) 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--gold) 18%, var(--gold) 82%, transparent 100%);
}

/* The pull quote is the one place a page raises its voice. It was ink on
   cream like everything around it. */
.g-testament__q, .g-quote-band__t, blockquote{
  border-left: 3px solid var(--gold);
  padding-left: var(--s5);
}
.g-testament__q cite, blockquote cite{ color: var(--gold-deep); }

/* A dt is a WORD, so it takes --gilt, not the gold. I applied --gold-deep
   here first and dropped ten pages to 3.75:1 — which is the exact mistake
   the split token exists to prevent. Ornament gets gold; text gets gilt. */
.g-plate__l dt, .g-facts-list dt, .g-terms__l dt{ color: var(--gilt); }

/* The dark sections were flat navy edge to edge. A gold hairline at the top
   makes the change of ground deliberate rather than abrupt. */
.g-sec--dark{ border-top: 2px solid var(--gold); }
.g-sec--dark + .g-sec--dark{ border-top: 0; }

/* Buttons: the solid navy is right for the primary. The secondary was a bare
   underline; a gold one ties it to the rest. */
.g-btn:not(.g-btn--solid){
  border-bottom: 1px solid var(--gold);
  text-decoration: none;
}
.g-btn:not(.g-btn--solid):hover{ border-bottom-color: var(--gold-deep); }

/* The proof figures are the strongest thing on the homepage and were set at
   label size in a quiet brown. They are the numbers other people gave you. */
.g-proof__l dt{
  font-size: var(--t-h1); line-height: 1;
  color: var(--gilt);
}
.g-proof__l > div{ padding-top: var(--s3); border-top: 2px solid var(--gold); }
.g-proof__k{ color: var(--gilt); }

/* The drop cap opening a page is the one initial on the site; it can be leaf. */
.g-lede-first::first-letter,
.g-drop::first-letter{
  color: var(--gold-deep);
}

/* A gold hairline above the closer, so the last section arrives rather than
   simply continuing. */
main > section:last-of-type{ border-top: 2px solid var(--gold); }
main > .g-sec--dark:last-of-type{ border-top: 2px solid var(--gold-lit); }

/* A section that already carries a treatment must not take a second ground.
   Adding the terracotta to .g-creed replaced its dark background and left
   its pale text on a pale ground — invisible. */
.g-sec--dark.g-sec--terre,
.g-creed.g-sec--terre,
.g-testament.g-sec--terre{ background: revert; }

/* The creed words are 42px, so the large-text floor of 3.0:1 applies rather
   than 4.5 — but #B08D57 sits at 2.75:1, just under. The gold-deep clears it
   at 3.9 and is the same family. Pre-existing, not from this round. */
.g-creed__word{ color: var(--gold-deep); }

/* ==========================================================================
   THE DISCLOSURE BUG
   `.g summary{ display: flex }` — written to give every summary a 44px tap
   height — removes the native disclosure behaviour in Chromium. A closed
   <details> then renders its content at full height anyway, so on Workshops
   every FAQ answer was drawn on top of the one below it. Nine overlaps on
   that page alone, and the same on Weddings and Photoshoots.

   A summary can be a flex CONTAINER without being display:flex itself: keep
   `list-item`, which preserves the behaviour, and lay the inside out instead.
   ========================================================================== */
.g summary,
.g-faq summary{
  display: list-item;
  list-style: none;
  min-height: 44px;
  cursor: pointer;
}
.g summary::marker,
.g summary::-webkit-details-marker{ content: ""; display: none; }

/* The row inside the summary does the aligning the flex was there for. */
.g-faq summary{
  padding: var(--s4) 0;
  position: relative;
  padding-right: 2rem;
  display: list-item;
}
.g-faq summary::after{
  position: absolute; right: 2px; top: 50%; margin-top: -8px;
}
/* Belt and braces: a closed disclosure hides its content whatever else
   happens to the summary's display. */
.g details:not([open]) > *:not(summary){ display: none; }

/* ==========================================================================
   HEADINGS OFF THE SPINE
   `.g-sec > .g-wrap > .g-h2` sets `max-width: var(--measure)` with auto side
   margins, so a heading centres itself inside the wrap while the prose below
   it stays left-aligned. On The Estate that put headings at x384 and their
   own paragraphs at x136 — a 248px step, six times down the page.

   Line 5531 already tried to fix this with `margin-left: 0`, but the auto
   right margin still centres what is left. Both margins have to go.
   ========================================================================== */
.g .g-wrap > .g-h2,
.g .g-wrap > .g-place,
.g .g-wrap > .g-h3,
.g-wrap.g > .g-h2,
.g-wrap.g > .g-place,
.g-wrap.g > .g-h3{
  margin-left: 0;
  margin-right: 0;
  max-width: var(--m-wide);
}
/* A section that is deliberately centred keeps its centring. */
.g-sec--centre > .g-wrap > .g-h2,
.g-sec--centre > .g-wrap > .g-place,
.g-hero .g-h2{ margin-left: auto; margin-right: auto; }

/* The same centring fault as the headings, mirrored: a lede paragraph with
   auto side margins centres itself under a left-aligned heading. On Contact
   and Stay the heading sat at x136 and its own first paragraph at x352.
   Prose lines up with the heading it belongs to. */
.g .g-wrap > .g-p,
.g .g-wrap > .g-lede-first,
.g .g-wrap > p,
.g-wrap.g > .g-p,
.g-wrap.g > .g-lede-first,
.g-wrap.g > p{
  margin-left: 0;
  margin-right: 0;
}
.g-sec--centre > .g-wrap > .g-p,
.g-sec--centre > .g-wrap > p{ margin-left: auto; margin-right: auto; }

/* ==========================================================================
   PHOTO INTAKE
   The drop zone is the page. Everything else is secondary to getting the
   photograph in, so it takes the width and the weight.
   ========================================================================== */
.pi-form{ max-width: 46rem; margin-top: var(--s6); }

.pi-drop{
  position: relative; display: grid; place-items: center;
  min-height: 16rem; padding: var(--s6);
  border: 2px dashed var(--gold); border-radius: 2px;
  background: var(--sand-2);
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.pi-drop:hover,
.pi-drop:focus-visible,
.pi-drop.is-over{ background: var(--gold-wash); border-color: var(--gold-deep); }
.pi-drop:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.pi-drop__input{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.pi-drop__idle{ text-align: center; pointer-events: none; }
.pi-drop__mark{ width: 64px; height: 48px; color: var(--gold); margin-bottom: var(--s4); }
.pi-drop__t{
  margin: 0; font-family: var(--display); font-size: var(--t-h3);
  color: var(--blue-deep);
}
.pi-drop__s{ margin: var(--s2) 0 0; font-family: var(--ui);
  font-size: var(--t-ui); color: var(--ink-soft); }

.pi-drop__has{
  display: grid; grid-template-columns: minmax(0,14rem) 1fr;
  gap: var(--s5); align-items: center; width: 100%;
}
@media (max-width: 34rem){ .pi-drop__has{ grid-template-columns: 1fr; } }
.pi-drop__prev{
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  border: 1px solid var(--line); background: var(--sand-3);
}
.pi-drop__name{ margin: 0; font-family: var(--ui); font-size: var(--t-ui);
  color: var(--blue-deep); word-break: break-all; }
.pi-drop__facts{ margin: var(--s2) 0 0; font-family: var(--ui);
  font-size: var(--t-sm); color: var(--ink-soft); }
.pi-drop__clear{
  margin-top: var(--s3); min-height: 44px; padding: 0;
  background: none; border: 0; border-bottom: 1px solid var(--gold);
  font-family: var(--ui); font-size: var(--t-ui);
  color: var(--blue-deep); cursor: pointer;
}

.pi-grid{
  display: grid; gap: var(--s4) var(--s5); margin-top: var(--s6);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 40rem){ .pi-grid{ grid-template-columns: 1fr; } }
.pi-grid .g-field{ margin: 0; }
.pi-caption{ margin-top: var(--s5); }
.pi-caption textarea{ width: 100%; }
.pi-actions{
  display: flex; align-items: center; gap: var(--s5);
  margin-top: var(--s6); flex-wrap: wrap;
}

.pi-recent{
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(11rem,100%),1fr));
}
.pi-recent__i{ margin: 0; }
.pi-recent__i img{
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--line);
}
.pi-recent__i figcaption{
  margin-top: var(--s2); font-family: var(--ui); font-size: var(--t-sm);
  color: var(--ink-soft);
}
.pi-recent__s{ color: var(--gilt); }

/* ==========================================================================
   WALL MODE
   A kitchen screen is read from three metres by someone holding a knife.
   Everything gets bigger, the chrome goes, and the whole thing states how
   fresh it is.
   ========================================================================== */
body:has(.kw-stamp){ background: #0E1C30; color: #F2EDE3; }
body:has(.kw-stamp) .g-top,
body:has(.kw-stamp) .g-foot,
body:has(.kw-stamp) .g-crumbs,
body:has(.kw-stamp) nav,
body:has(.kw-stamp) .g-btn{ display: none !important; }
body:has(.kw-stamp) main{ padding: 2rem 2.5rem 5rem; max-width: none; }

body:has(.kw-stamp) h1,
body:has(.kw-stamp) h2{ color: #fff; font-size: clamp(30px, 3.4vw, 54px); }
body:has(.kw-stamp) h3{ color: var(--gold-lit); font-size: clamp(22px, 2.2vw, 34px); }
body:has(.kw-stamp) p,
body:has(.kw-stamp) li,
body:has(.kw-stamp) td,
body:has(.kw-stamp) dd{ font-size: clamp(19px, 1.7vw, 28px); line-height: 1.45; color: #E4DDD0; }
body:has(.kw-stamp) th,
body:has(.kw-stamp) dt{ font-size: clamp(15px, 1.2vw, 20px); color: var(--gold-lit); }
body:has(.kw-stamp) tr{ border-bottom: 1px solid rgba(255,255,255,.14); }
body:has(.kw-stamp) td{ padding: .55em .7em; }

/* A dietary line is the one thing on this screen that must not be missed. */
body:has(.kw-stamp) [class*="allerg"],
body:has(.kw-stamp) [class*="dietary"],
body:has(.kw-stamp) .g-limit--warn{
  background: #6E2414; color: #fff; padding: .5em .7em; border: 0;
  font-weight: 600;
}

.kw-stamp{
  position: fixed; right: 0; bottom: 0; left: 0; z-index: 90;
  display: flex; align-items: baseline; gap: 1rem;
  padding: .7rem 2.5rem;
  background: #0A1626; border-top: 2px solid var(--gold);
  font-family: var(--ui);
}
.kw-stamp__t{ font-size: 1.5rem; color: #fff; font-variant-numeric: tabular-nums; }
.kw-stamp__s{ font-size: 1rem; color: var(--gold-lit); }
body.kw-stale .kw-stamp{ background: #6E2414; border-top-color: #E8A33D; }
body.kw-stale .kw-stamp__s{ color: #fff; }

/* ---- the darkroom ------------------------------------------------------ */
.pi-edit{
  display: grid; grid-template-columns: 1fr minmax(16rem, 20rem);
  gap: var(--s5); margin-top: var(--s5);
  padding: var(--s5); background: var(--sand-2); border: 1px solid var(--line);
}
@media (max-width: 46rem){ .pi-edit{ grid-template-columns: 1fr; } }
.pi-edit__stage{
  display: grid; place-items: center; min-height: 14rem;
  background: #1A2233; padding: var(--s4);
}
.pi-edit__stage canvas{ max-width: 100%; max-height: 26rem; display: block; }
.pi-edit__k{
  margin: 0 0 var(--s3); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gilt);
}
.pi-edit__k + .pi-slider{ margin-top: 0; }
.pi-slider{
  display: grid; grid-template-columns: 5.5rem 1fr 2.2rem;
  align-items: center; gap: var(--s3); margin: 0 0 var(--s3);
}
.pi-slider label{ font-family: var(--ui); font-size: var(--t-ui); color: var(--ink); }
.pi-slider input[type=range]{ width: 100%; min-height: 44px; accent-color: var(--gold-deep); }
.pi-slider output{
  font-family: var(--ui); font-size: var(--t-sm); color: var(--ink-soft);
  text-align: right; font-variant-numeric: tabular-nums;
}
.pi-edit__row{
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin: var(--s4) 0 var(--s5);
}
.pi-crop{
  min-height: 44px; padding: 0 var(--s4);
  background: none; border: 1px solid var(--line);
  font-family: var(--ui); font-size: var(--t-sm);
  color: var(--ink); cursor: pointer;
}
.pi-crop.is-on{ border-color: var(--gold-deep); color: var(--gilt); background: var(--gold-wash); }
.pi-crop:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ==========================================================================
   THE PASS
   A fixed iPad in a working kitchen. Everything is bigger than the site,
   nothing depends on hover, no target is under 44px, and the allergy line is
   the loudest thing on the screen.
   ========================================================================== */
.pass{ padding: 0 0 4rem; }

.pass__bar{
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--blue-deep); color: #fff;
  border-bottom: 2px solid var(--gold);
  flex-wrap: wrap;
}
.pass__k{
  margin: 0; font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lit);
}
.pass__cover{
  margin: 2px 0 0; font-family: var(--display); font-size: 30px;
  line-height: 1; color: #fff; font-variant-numeric: lining-nums;
}
.pass__cover b{ font-weight: 400; }
.pass__now--warn .pass__k{ color: #F2B8A2; }
.pass__now--warn .pass__cover{ color: #FFD9CB; }

.pass__tabs{ margin-left: auto; display: flex; gap: 2px; }
.pass__tab{
  min-height: 52px; padding: 0 var(--s5);
  background: rgba(255,255,255,.08); border: 0; color: #C9D4DF;
  font-family: var(--ui); font-size: 17px; cursor: pointer;
}
.pass__tab.is-on{ background: #fff; color: var(--blue-deep); font-weight: 600; }
.pass__tab:focus-visible{ outline: 2px solid var(--gold-lit); outline-offset: -3px; }

.pass__panel{ padding: var(--s5); }
.pass__empty{
  padding: var(--s7) 0; text-align: center;
  font-family: var(--display); font-size: 26px; color: var(--ink-soft);
}

/* ---- guests ---- */
.pass__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.pass__g{ border: 1px solid var(--line); background: var(--white); }
.pass__g.is-vip{ border-left: 4px solid var(--gold); }
.pass__g.has-allergy{ border-left: 4px solid #A8341A; }

.pass__g__hit{
  width: 100%; min-height: 76px; padding: var(--s4) var(--s5);
  display: grid; gap: var(--s2); text-align: left;
  background: none; border: 0; cursor: pointer;
}
.pass__g__hit:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: -3px; }
.pass__g__main{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s4); }
.pass__g__name{
  font-family: var(--display); font-size: 27px; color: var(--blue-deep);
}
.pass__g__tags{ display: flex; flex-wrap: wrap; gap: 6px; }
.pass__tag{
  padding: 3px 9px; border: 1px solid var(--line);
  font-family: var(--ui); font-size: 14px; color: var(--ink-soft);
  white-space: nowrap;
}
.pass__tag--rep{ border-color: var(--gold); color: var(--gilt); }
.pass__tag--vip{ background: var(--gold-wash); border-color: var(--gold); color: var(--gilt); }
.pass__tag--out{ border-style: dashed; }

/* The one line on this screen that must never be missed. */
.pass__g__eat{
  display: block; padding: var(--s3) var(--s4);
  background: #A8341A; color: #fff;
  font-family: var(--ui); font-size: 19px; font-weight: 600; line-height: 1.35;
}

.pass__prof{ padding: 0 var(--s5) var(--s5); border-top: 1px solid var(--line); }
.pass__prof__l{ margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
@media (min-width: 46rem){ .pass__prof__l{ grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s6); } }
.pass__prof__l > div{ display: grid; gap: 2px; }
.pass__prof__l dt{
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gilt);
}
.pass__prof__l dd{ margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
.pass__prof__eat{ grid-column: 1 / -1; }
.pass__prof__eat dd{ color: #A8341A; font-weight: 600; }

.pass__prof__k{
  margin: var(--s5) 0 var(--s3); font-family: var(--ui); font-size: 13px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gilt);
}
.pass__prof__h{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pass__prof__h li{ font-size: 17px; color: var(--ink-soft); }
.pass__prof__h span{ color: var(--gilt); margin-right: var(--s3); }

.pass__prof__note{ margin-top: var(--s5); display: grid; gap: var(--s3); max-width: 40rem; }
.pass__prof__note label{ font-family: var(--ui); font-size: 15px; color: var(--ink-soft); }
.pass__prof__note textarea{ width: 100%; font-size: 18px; }
.pass__prof__note .g-btn{ justify-self: start; min-height: 48px; }

/* ---- store ---- */
.pass__filters{ display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s5); }
.pass__f{
  min-height: 48px; padding: 0 var(--s5);
  background: none; border: 1px solid var(--line);
  font-family: var(--ui); font-size: 17px; color: var(--ink); cursor: pointer;
}
.pass__f.is-on{ background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

.pass__stock{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
}
.pass__s{
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4); background: var(--white);
  border: 1px solid var(--line);
}
.pass__s.is-low{ border-left: 4px solid #A8341A; background: #FCF3F0; }
.pass__s__n{ font-size: 20px; color: var(--blue-deep); }
.pass__s__q{ font-family: var(--display); font-size: 22px; color: var(--blue-deep);
  font-variant-numeric: lining-nums; white-space: nowrap; }
.pass__s__q em{ font-style: normal; font-size: 14px; color: var(--ink-soft); }
.pass__s__low{
  padding: 3px 10px; background: #A8341A; color: #fff;
  font-family: var(--ui); font-size: 14px; font-weight: 600;
}
.pass__s__w{ font-family: var(--ui); font-size: 14px; color: var(--ink-soft); }

.pass__ask{ margin-top: var(--s6); display: grid; gap: var(--s3); max-width: 44rem; }
.pass__ask label{ font-family: var(--ui); font-size: 15px; color: var(--ink-soft); }
.pass__ask input{ font-size: 19px; min-height: 52px; }
.pass__ask .g-btn{ justify-self: start; min-height: 48px; }

/* ---- word ---- */
.pass__say{ max-width: 44rem; display: grid; gap: var(--s4); }
.pass__say textarea, .pass__say select{ width: 100%; font-size: 19px; }
.pass__say select{ min-height: 52px; }
.pass__msgs{ list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s3); }
.pass__m{ padding: var(--s4); background: var(--white); border: 1px solid var(--line); }
.pass__m.is-urgent{ border-left: 4px solid #A8341A; }
.pass__m__who{ font-family: var(--ui); font-size: 15px; font-weight: 600; color: var(--blue-deep); }
.pass__m__when{ font-family: var(--ui); font-size: 14px; color: var(--ink-soft); margin-left: var(--s3); }
.pass__m__b{ margin: var(--s2) 0 0; font-size: 18px; line-height: 1.5; }

/* On the iPad it will actually live on. */
@media (min-width: 46rem){
  .pass__panel{ padding: var(--s5) var(--s6); }
}

/* ==========================================================================
   STEPPERS INSTEAD OF SLIDERS
   The cost builder used 450px range sliders to choose numbers between one
   and five. A slider is for a value you feel your way to; a count of adults
   is a value you know. The number is now the large thing, the buttons are
   48px, and a button that can do nothing is visibly dead.
   ========================================================================== */
.wk-step{ display: grid; gap: var(--s2); }
.wk-step label{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gilt);
}
.wk-step__row{
  display: inline-grid; grid-template-columns: 48px 5rem 48px;
  align-items: stretch; border: 1px solid var(--line); background: var(--white);
}
.wk-step__b{
  min-height: 48px; background: none; border: 0;
  font-family: var(--ui); font-size: 22px; line-height: 1;
  color: var(--blue-deep); cursor: pointer;
}
.wk-step__b:hover:not(:disabled){ background: var(--gold-wash); }
.wk-step__b:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.wk-step__b:disabled{ color: var(--line); cursor: default; }
.wk-step__n{
  min-height: 48px; width: 100%; border: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; background: none;
  font-family: var(--display); font-size: 26px; color: var(--blue-deep);
  font-variant-numeric: lining-nums;
  -moz-appearance: textfield;
}
.wk-step__n::-webkit-outer-spin-button,
.wk-step__n::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.wk-step__n:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: -2px; }

/* The room select was the one browser-default control left in the panel. */
.g-wk select{
  min-height: 48px; padding: 0 var(--s4);
  border: 1px solid var(--line); background: var(--white);
  font-family: var(--display); font-size: 19px; color: var(--blue-deep);
}

/* The stepper sits in a grid cell, so inline-grid still stretched it across
   the full column — a 450px box around a two-digit number, which is the
   problem the sliders had. It stays its own width. */
.wk-step__row{ justify-self: start; }

/* The room label was the one left in sentence case among uppercase siblings. */
.g-wk label{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gilt);
}
/* The checkbox line is a sentence, not a label. */
.g-wk .g-field--check label,
.g-wk label:has(input[type="checkbox"]){
  font-family: var(--body); font-size: var(--t-base); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}

/* On the room page the booking form is a bare .g-wrap outside any section —
   3.6 screens of it — so it takes none of the section rhythm and ends with
   no bottom padding at all, butting straight into the next heading. */
main > .g-wrap{ padding-bottom: var(--s6); }
main > .g-wrap + .g-sec{ padding-top: var(--s6); }

/* ==========================================================================
   THE HEADER RAN OFF THE EDGE OF A PHONE
   Logo 180 + Book 85 + Menu 113 = 378px of content in a 390px bar carrying
   48px of padding. The row does not wrap, so "MENU" was clipped to "ME" on
   every page at 390px — and worse on a 360px Android.

   The logo is the flexible one: it is a wordmark that reads at any size, and
   the two controls are targets that must not shrink.
   ========================================================================== */
@media (max-width: 30rem){
  .g-top__in{ padding-left: var(--s4); padding-right: var(--s4); gap: var(--s3); }
  .g .g-top__in .g-logo,
  .g-top__in .g-logo,
  .g-logo{ flex: 0 1 auto; min-width: 118px; max-width: 45vw; }
  .g-logo img, .g-logo svg{ max-width: 100%; height: auto; }
  .g-navbtn, .g-booksel{ flex: 0 0 auto; }
  /* The word "Menu" beside a burger is decoration; the burger is the control.
     Below 24rem it goes, and the button keeps its label for screen readers. */
}
/* Below 26rem the word gives way before the wordmark does. */
@media (max-width: 26rem){
  .g-navbtn__label{ position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
  .g-navbtn{ gap: 0; }
}

/* ==========================================================================
   THE BACK-TO-TOP SAT ON THE BOOK BUTTON
   `.g-totop` is pinned bottom-right, which is exactly where the booking bar
   puts its button. On a phone the arrow covered "Book" — the one control on
   the page that has to work.
   ========================================================================== */
@media (max-width: 44rem){
  /* Moving it left kept it off the Book button and put it on the text instead;
     the reading column runs the full screen here and a fixed bar owns the bottom.
     The offset rule also keyed on .g-stickybar, which the room page does not use
     (.g-bookbar), so where it mattered most it never applied. A phone has a
     sticky header and a native scroll-to-top gesture. */
  .g-totop{ display: none; }
}

/* AND FOR AS LONG AS A BOOK BAR IS ON SCREEN, which is wider than 44rem.
   The rule above hides the arrow up to 704px. But the bottom bar is drawn up
   to 60rem (.g-stickybar) and 61.99rem (.g-bookbar, the room page), so in
   the band between, the arrow came back pinned bottom-right and sat squarely
   on Book -- measured at 820px on What's On and on the room page, both
   covered. Tablets, small laptops and phones held sideways all live in that
   band. The same reasoning as the rule above, carried to the width the bar
   actually reaches, and tied to a bar being on the page, so a page without
   one keeps its arrow at every width. */
@media (max-width: 61.99rem){
  body:has(.g-stickybar) .g-totop,
  body:has(.g-bookbar) .g-totop{ display: none; }
}

/* ==========================================================================
   iOS ZOOMS THE PAGE WHEN A FIELD IS UNDER 16px
   Several fields render at 13.3px, so tapping one on an iPhone zooms the
   whole page in and leaves the guest scrolled sideways in the middle of a
   booking form. It is the single most common mobile form fault and it is
   invisible on a desktop.

   16px on every real input, on touch screens only, so the desktop keeps its
   proportions.
   ========================================================================== */
@media (max-width: 44rem){
  .g input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .g select,
  .g textarea{
    font-size: 16px;
  }
}

/* The checkbox itself is a target, not text — 13px there is fine, but the
   box was small enough to miss. */
@media (pointer: coarse){
  .g input[type="checkbox"],
  .g input[type="radio"]{ width: 22px; height: 22px; }
  .g .g-field--check label,
  .g label:has(> input[type="checkbox"]){
    display: flex; align-items: flex-start; gap: var(--s3);
    min-height: 44px; padding: var(--s2) 0;
  }
}

/* ==========================================================================
   TWO REAL FAULTS, FOUND BY MEASURING RATHER THAN BY EYE
   ==========================================================================

   1. A doubled hairline. `.g-facts` ends with a 1px bottom border and the
      section beneath it starts with a 1px top border of the SAME colour, so
      the seam draws at 2px — twice the weight of every other rule on the
      page, and read as a mistake rather than a division.
*/
main > *:not(.g-sec--dark) + .g-sec{ border-top: 0; }
main > .g-facts{ border-bottom: 1px solid var(--line); }

/*
   2. On The Estate a `.g-cards` grid holds three cards, and the third spans
      `1 / -1` — so two are 568px and the last is 1168px with an image
      stretched to a 5.2:1 letterbox beside two at 2.5:1. A full-width card
      is a deliberate device; a full-width card that is simply the leftover
      third of a row is not.

      The span holds where it is chosen. Where a card is last and alone on
      its row, it takes a normal column and the row centres.
*/
.g-cards > .g-card:last-child:nth-child(odd):not([data-span]){
  grid-column: auto;
}
.g-cards:has(> .g-card:last-child:nth-child(odd)){
  justify-content: center;
}
/* If a card IS meant to run full width, it says so and keeps a sane crop. */
.g-cards > .g-card[data-span="full"]{
  grid-column: 1 / -1;
}
.g-cards > .g-card[data-span="full"] img{
  aspect-ratio: 21 / 9; object-fit: cover; width: 100%; height: auto;
}

/* In the dossier list each row carries a bottom border AND the next row a
   top border, both translucent white — so every divider draws at 2px while
   the first and last draw at 1px. The list reads as unevenly ruled.
   One border per seam: the row owns its top edge, and the first has none. */
.g-dossier__l div{ border-bottom: 0; }
.g-dossier__l div + div{ border-top: 1px solid rgba(255,255,255,.16); }
.g-dossier__l div:first-child{ border-top: 0; }

/* Stacked buttons on a narrow screen met edge to edge, so the solid one's
   border and the quiet one's ran together into a 2px line between them. */
.g-btn + .g-btn{ margin-top: var(--s3); }
/* That margin is for STACKED buttons. Unscoped, it also fired on pairs side by side
   in a flex row — the closing call-to-action on fourteen pages — pushing the second
   button 12px lower than the first. Rows already space with gap. */
.g-close__acts > .g-btn + .g-btn, .g-conf__acts > .g-btn + .g-btn, .g-approach__btns > .g-btn + .g-btn,
.g-took__a > .g-btn + .g-btn, .g-three__a > .g-btn + .g-btn, .g-programme__a > .g-btn + .g-btn,
.g-p:has(> .g-btn + .g-btn) > .g-btn + .g-btn, .g-hero__cta > .g-btn + .g-btn{ margin-top: 0; }

/* The dossier list sits inside a .g-aside, so it picks up BOTH
   `.g-aside dl > div` (a bottom border) and `.g-dossier__l div` (a top one).
   Every divider drew at 2px while the first and last drew at 1px.

   I spent three attempts writing .g-dossier__l rules that could never win,
   because the bottom border comes from a different component's selector.
   One seam, owned by the top edge. */
.g-aside .g-dossier__l div,
.g-aside dl.g-dossier__l > div{ border-bottom: 0; }

/* ==========================================================================
   THE HOMEPAGE STRIP ROWS AND THE THREE WAYS IN

   Three things wrong, and they compound:

   1. `label | prose | link` stretched across the full 1216px is a SPREADSHEET
      ROW, not editorial. A 192px column holding two words, prose in the
      middle, and a link stranded at the far right with nothing binding it to
      the sentence it belongs to.

   2. It is used twice in a row — the price note and "Whose house it is" —
      so two consecutive bands read as a table with two entries. The content
      is good (a woman bought a château she had barely seen and lives in it);
      the layout makes it look like a spec sheet.

   3. `01 02 03` numbers three things that are not sequential. Stay, learn a
      craft, eat — those are three alternatives. Numbering them tells the
      reader there is an order, and there isn't one.
   ========================================================================== */

/* The row becomes a line of writing: label above, sentence and its link on
   one measure, the link immediately after the words it follows from. */
.g-family,
.g-pricenote,
.g-welcome,
.g-backtoform{
  display: block;
  max-width: 52rem;
  padding-left: var(--s5);
  border-left: 2px solid var(--gold);
}
.g-family__k,
.g-pricenote__k,
.g-welcome__k{
  display: block; margin: 0 0 var(--s2);
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gilt);
}
.g-family__t,
.g-pricenote__t,
.g-welcome__t{
  display: block; margin: 0 0 var(--s3);
  font-family: var(--display); font-size: var(--t-h3); line-height: 1.4;
  color: var(--blue-deep);
}
/* The link sits under its own sentence, not a thousand pixels away. */
.g-family > a,
.g-pricenote > a,
.g-welcome > a{
  display: inline-block;
  font-family: var(--ui); font-size: var(--t-ui);
  border-bottom: 1px solid var(--gold);
  text-decoration: none;
}

/* The numbers go. Three alternatives are not three steps, and a circled
   numeral is the single most decorative thing on this page. What replaces
   it is the thing that actually distinguishes them: the price. */
.g-three__n{ display: none; }
.g-three__i{ border-top: 2px solid var(--gold); padding-top: var(--s4); }
.g-three__t{ margin-top: 0; }

/* The three columns have descriptions of different lengths, so the prices
   landed at three different heights while the buttons aligned — the one
   line a reader compares across the three was the one line that did not
   line up. The column becomes a flex stack: description takes the slack,
   price and action sit on a shared baseline. */
.g-three__b{ display: flex; flex-direction: column; height: 100%; }
.g-three__d{ flex: 1 0 auto; margin-bottom: var(--s4); }
.g-three__p{ margin: 0 0 var(--s4); }
.g-three__a{ margin-top: auto; }

/* ==========================================================================
   THE ARMORIAL INTRODUCTION
   Royal blue ground, solid gold — gold as a FILL, not the hairlines it has
   been so far. The arms are the château's own crown-and-laurel mark drawn
   properly, between two hanging banners.

   The gold on navy is the one place real leaf gold works: #DCC077 reads at
   7.3:1 on this blue, so it can be bright without being unreadable. That is
   the whole reason the site's gold has looked brown — it was being held to a
   contrast ratio it only needs on the cream.
   ========================================================================== */
.g-armorial{
  background-color: #14305F;   /* under the gradient: a fallback, and a
                                  colour a contrast checker can actually read */
  background-image:
    radial-gradient(120% 90% at 50% 0%, #1B3D74 0%, #14305F 55%, #0E2247 100%);
  color: #F2EDE3;
  padding: clamp(48px, 7vw, 96px) var(--s5);
  text-align: center;
  border-bottom: 3px solid var(--gold);
  position: relative;
  overflow: hidden;
}
/* A faint damask of the device, so the ground is not flat navy. */
.g-armorial::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(220,192,119,.09) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 22%, rgba(220,192,119,.09) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 78%, rgba(220,192,119,.07) 0 2px, transparent 3px);
  background-size: 180px 180px;
}
.g-armorial__in{ position: relative; max-width: 46rem; margin: 0 auto; }

.g-armorial__crest{
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 3vw, 44px);
  margin: 0 0 var(--s5);
}
.g-arms{
  width: clamp(120px, 17vw, 190px); height: auto;
  color: var(--gold-lit);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
.g-arms--blue{ color: var(--blue-deep); }
.g-banner{
  width: clamp(34px, 5vw, 58px); height: auto;
  color: var(--gold-lit); opacity: .8;
  align-self: flex-start;
  margin-top: clamp(4px, 1.5vw, 18px);
}
/* Two banners and a shield is a lot for a 360px phone. */
@media (max-width: 34rem){ .g-banner{ display: none; } }

.g-armorial__fr{
  margin: 0 0 var(--s3);
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold-lit);
}
.g-armorial__t{
  margin: 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(34px, 5.6vw, 66px); line-height: 1.06;
  letter-spacing: .01em; color: #FFFFFF;
}
/* A solid gold rule, not a hairline. */
.g-armorial__r{
  width: 96px; height: 3px; margin: var(--s5) auto;
  background: linear-gradient(90deg,
    rgba(220,192,119,0) 0%, var(--gold-lit) 22%, #F0DFAE 50%,
    var(--gold-lit) 78%, rgba(220,192,119,0) 100%);
}
.g-armorial__d{
  margin: 0 auto; max-width: 34rem;
  font-family: var(--display); font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.7; color: #DCD6C9;
}

/* ---- solid gold where it was a hairline ------------------------------- */
/* The eyebrow rule, the section marks and the pull-quote bar were all 1px
   of brown. On the blue and at the top of a section they can carry weight. */
.g-sec--dark .g-eyebrow::before,
.g-armorial .g-eyebrow::before{ height: 3px; background: var(--gold-lit); }
.g-btn--solid{
  background: var(--blue-deep); border: 1px solid var(--gold);
}
.g-armorial .g-btn--solid{
  background: var(--gold); border-color: var(--gold);
  color: var(--blue-deep); font-weight: 600;
}

/* The second line of the armorial heading is the English, set apart. */
.g-armorial__t em{
  font-style: italic; font-weight: 300;
  color: var(--gold-lit);
}

/* ==========================================================================
   THE APPROACH MAP
   Drawn in the site's own colours. A map tile shows every road equally;
   what a guest needs before setting off is the one route, the turn that
   catches people out, and the fact that the last stretch is unlit.
   ========================================================================== */
.g-approach{
  margin: 0; display: grid; gap: var(--s6);
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr);
  align-items: center;
  background-color: #12294D;   /* under the gradient, for the same reason as
                                  the armorial block above */
  background-image: linear-gradient(180deg, #16345F 0%, #0F2648 100%);
  border-top: 3px solid var(--gold);
  padding: clamp(28px, 4vw, 52px);
}
@media (max-width: 52rem){ .g-approach{ grid-template-columns: 1fr; } }

.g-approach__svg{ width: 100%; height: auto; display: block; }

.g-approach__hills path{ fill: rgba(255,255,255,.055); }

.g-approach__road{
  fill: none; stroke: var(--gold-lit); stroke-width: 3;
  stroke-linecap: round;
}
/* The last stretch is the one being warned about, so it is drawn as one. */
.g-approach__road--last{
  stroke-dasharray: 7 6; stroke-width: 3.4; stroke: #E8B45C;
}

.g-approach__stop circle{ fill: var(--gold-lit); }
.g-approach__stop text,
.g-approach__endt{
  fill: #F2EDE3; font-family: var(--ui); font-size: 15px;
  text-anchor: middle;
}
.g-approach__endt{ font-size: 17px; }
.g-approach__sub{
  fill: var(--gold-lit); font-family: var(--ui); font-size: 12px;
  letter-spacing: .08em; text-anchor: middle;
}
.g-approach__warn{
  fill: #E8B45C; font-family: var(--ui); font-size: 13px;
  letter-spacing: .06em;
}
.g-approach__end path{ fill: var(--gold-lit); }
.g-approach__ring{ stroke: var(--gold-lit); stroke-width: 1.4; opacity: .55; }

.g-approach__cap{ color: #E4DDD0; }
.g-approach__k{
  margin: 0 0 var(--s2); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-lit);
}
.g-approach__p{
  margin: 0 0 var(--s5); font-family: var(--display);
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: #E4DDD0;
}
.g-approach__p strong{ color: #fff; font-weight: 400; }
.g-approach__btns{
  display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s4);
}
.g-approach__btns .g-btn--solid{
  background: var(--gold); border-color: var(--gold); color: var(--blue-deep);
}
.g-approach__btns .g-btn:not(.g-btn--solid){
  color: #F2EDE3; border-bottom-color: var(--gold-lit);
}
.g-approach__note{
  margin: 0; font-family: var(--ui); font-size: var(--t-sm);
  line-height: 1.6; color: #A9B8C8;
}

/* ==========================================================================
   WHAT IT TOOK
   The section under the hero was a label-prose-link row where the strongest
   moment on the page should be. This is dramatic on purpose: a heading that
   fills the width, four facts set like an inscription, and a turn.
   ========================================================================== */
.g-took{
  background-color: var(--sand);
  background-image:
    linear-gradient(180deg, #FBF7EF 0%, var(--sand) 42%, #EFE7D7 100%);
  padding: clamp(56px, 8vw, 120px) var(--s5);
  /* No bottom border: the section beneath already draws its own top edge,
     and two of them make a 2px seam. Same fault as .g-facts, made again. */
}
.g-took__in{ max-width: 62rem; margin: 0 auto; }

.g-took__fr{
  margin: 0 0 var(--s4);
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gilt);
}
/* The line that does the work. It is the largest type on the page after the
   hero, because it is the sentence the whole site rests on. */
.g-took__h{
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-family: var(--display); font-weight: 300;
  font-size: clamp(30px, 4.6vw, 58px); line-height: 1.12;
  letter-spacing: -.005em; color: var(--blue-deep);
  max-width: 34ch;
}
.g-took__h em{
  display: block; font-style: italic; color: var(--gilt);
  margin-top: .12em;
}

/* The prose keeps a reading measure, but the SECTION uses the width — the
   facts run the full span beneath it, which is what makes it feel like an
   inscription rather than a column of text. */
.g-took__body{ display: grid; gap: var(--s6); }
.g-took__lede,
.g-took__close,
.g-took__turn,
.g-took__sig{ max-width: 40rem; }
.g-took__lede{
  margin: 0; font-family: var(--display);
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.65; color: var(--ink);
}

/* The facts are set like an inscription — figure above, plain sentence
   below, a gold rule over each. Not a stat card. */
.g-took__facts{
  margin: 0; display: grid; gap: var(--s5) var(--s6);
  grid-template-columns: 1fr;
}
/* Two by two, then four across when there is genuinely room. Never three
   with one orphaned underneath. */
@media (min-width: 40rem){ .g-took__facts{ grid-template-columns: 1fr 1fr; } }
/* Four facts. Three across left the fourth alone underneath - centred, but an
   orphan all the same, and the first thing the eye lands on. Two by two at
   every width above phone gives each fact ~60 characters and no odd one out. */
.g-took__facts > div{ border-top: 2px solid var(--gold); padding-top: var(--s3); }
.g-took__facts dt{
  font-family: var(--display); font-size: clamp(21px, 2vw, 27px);
  line-height: 1.15; color: var(--blue-deep);
  font-variant-numeric: lining-nums;
}
.g-took__facts dd{
  margin: var(--s2) 0 0; font-family: var(--ui);
  font-size: var(--t-ui); line-height: 1.6; color: var(--ink-soft);
}

/* The turn. One short line, alone, doing the pivot from what it cost to
   why any of it concerns the reader. */
.g-took__turn{
  margin: var(--s3) 0; padding-left: var(--s5);
  border-left: 3px solid var(--gold);
  font-family: var(--display); font-style: italic;
  font-size: clamp(22px, 2.4vw, 31px); line-height: 1.3;
  color: var(--gilt);
}
.g-took__close{
  margin: 0; font-family: var(--display);
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.7; color: var(--ink);
}

.g-took__sig{ margin: 0; display: grid; gap: 2px; }
.g-took__sigt{
  font-family: var(--display); font-size: clamp(18px, 1.7vw, 22px);
  color: var(--blue-deep);
}
.g-took__sigs{
  font-family: var(--ui); font-size: var(--t-sm); color: var(--gilt);
  letter-spacing: .04em;
}
.g-took__a{ display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s3) 0 0; }

/* ==========================================================================
   THE SEARCH PANEL
   Four cream boxes butted together with hairlines between them — it reads as
   a form bolted onto a photograph, and it is the one ordinary thing in an
   otherwise handsome hero.

   Made of the same materials as the rest: the deep blue, gold rules, the
   display face for values. It sits ON the photograph rather than covering a
   rectangle of it, and the labels are gold rather than grey.
   ========================================================================== */
.g-herosearch{
  background: rgba(14, 28, 48, .82);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(220,192,119,.42);
  border-top: 2px solid var(--gold);
  box-shadow: 0 18px 44px rgba(8,18,34,.34);
  padding: 0;
  gap: 0;
}
/* A hairline between cells, in gold at low opacity rather than a grey rule. */
.g .g-herosearch__f + .g-herosearch__f{
  border-left: 1px solid rgba(220,192,119,.26);
}
.g .g-herosearch__f{
  background: none;
  padding: var(--s4) var(--s5);
}
.g .g-herosearch__f > label{
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-lit);
}
.g .g-herosearch__f .g-rp__btn,
.g .g-herosearch__f input,
.g .g-herosearch__f select{
  background: none; border: 0; color: #FFFFFF;
  font-family: var(--display); font-weight: 300;
}
.g .g-herosearch__f .g-rp__val{ color: #FFFFFF; }
/* "Add dates" is a prompt, not a value. */
.g .g-herosearch__f .g-rp__val:empty::before,
.g .g-herosearch__f .is-empty{
  color: rgba(255,255,255,.62); font-style: italic;
}
.g .g-herosearch__f:focus-within{ background: rgba(220,192,119,.10); }

/* The action is solid gold on the navy — the one place on the site where
   gold can be a fill behind dark text and still clear AA. */
.g .g-herosearch__go{
  background: var(--gold); border: 0;
  color: var(--blue-deep); font-family: var(--ui);
  font-weight: 600; letter-spacing: .04em;
}
.g .g-herosearch__go:hover{ background: #D8B667; }

@media (max-width: 44rem){
  /* Two columns already; the divider has to follow the grid, not the source
     order, or the second row gets a stray line down its left. */
  .g .g-herosearch__f + .g-herosearch__f{ border-left: 0; }
  .g .g-herosearch__f{ border-top: 1px solid rgba(220,192,119,.26); }
  .g .g-herosearch__f:nth-of-type(2){ border-left: 1px solid rgba(220,192,119,.26); }
}

/* "Add dates" was breaking across two lines, which makes the panel look
   broken rather than roomy. It is two words and should stay two words. */
.g .g-herosearch__f .g-rp__val,
.g .g-herosearch__f .g-rp__btn{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g .g-herosearch__f{ min-width: 0; }

/* A card grid that leaves ONE item alone on its last row reads as a mistake —
   2+2+1 on Stay, 2+1 twice on The Estate. My earlier rule only caught the
   odd-last-child case at three columns; this catches the two-column one.
   Centring the last row is the least destructive fix: nothing is stretched,
   nothing is cropped, the lone card just stops sitting hard left. */
.g-cards{ justify-content: center; }
.g-cards > .g-card{ width: 100%; }

/* Matched to the CONTAINER query the grid already uses, not the viewport —
   the grid is two columns at 1440px because it measures its wrapper, and my
   viewport rules were reverting the fix before three columns ever applied. */
@container (min-width: 56rem) and (max-width: 79.99rem){
  .g-cards:has(> .g-card:last-child:nth-child(odd)) > .g-card:last-child{
    grid-column: 1 / -1;
    max-width: calc(50% - var(--s4));
    justify-self: center;
  }
}

/* My new panel padding left the date buttons at 40px on a tablet — under the
   minimum, and the panel is the first thing a guest touches. The cell can be
   as roomy as it likes; the control inside it holds 44. */
.g .g-herosearch__f .g-rp__btn,
.g .g-herosearch__f select,
.g .g-herosearch__f input:not([type="checkbox"]){
  min-height: 44px;
}

/* ==========================================================================
   HOW YOU ARE LOOKED AFTER
   The service had no section at all, and it is what guests at this level
   actually judge. Set on the navy so it reads as the confident part of the
   page rather than more parchment.
   ========================================================================== */
.g-care{
  background-color: #14305F;
  background-image:
    radial-gradient(120% 100% at 20% 0%, #1B3D74 0%, #14305F 58%, #0E2247 100%);
  color: #E7E1D5;
  padding: clamp(56px, 8vw, 108px) var(--s5);
  border-top: 3px solid var(--gold);
}
.g-care__in{ max-width: 68rem; margin: 0 auto; }

.g-care__fr{
  margin: 0 0 var(--s3);
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold-lit);
}
.g-care__h{
  margin: 0 0 clamp(34px, 4vw, 60px);
  font-family: var(--display); font-weight: 300;
  font-size: clamp(28px, 4vw, 50px); line-height: 1.14;
  color: #FFFFFF; max-width: 24ch;
}

.g-care__grid{
  display: grid; gap: var(--s6) var(--s7);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem){ .g-care__grid{ grid-template-columns: 1fr 1fr; } }

.g-care__i{ border-top: 2px solid var(--gold); padding-top: var(--s4); }
.g-care__k{
  margin: 0 0 var(--s3);
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lit);
}
.g-care__t{
  margin: 0; font-family: var(--display);
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; color: #E7E1D5;
}

.g-care__note{
  margin: clamp(34px, 4vw, 56px) 0 0; padding-top: var(--s5);
  border-top: 1px solid rgba(220,192,119,.3);
  font-family: var(--ui); font-size: var(--t-ui); line-height: 1.65;
  color: #B9C6D4; max-width: 46rem;
}

/* --------------------------------------------------------------------------
   THE APPROACH MAP — phone variant
   The landscape drawing is 720 units wide. In a 334px phone column that is a
   46% scale, which renders the 15px stop labels at 7px and the sub-labels at
   5.6px. Neither is readable. The portrait drawing is 340 units wide, so it
   renders at roughly 1:1 and the type stays at its intended size.
   -------------------------------------------------------------------------- */
.g-approach__svg--tall{ display: none; }
@media (max-width: 52rem){
  .g-approach__svg--wide{ display: none; }
  .g-approach__svg--tall{ display: block; margin-inline: auto; max-width: 340px; }
}


/* ==========================================================================
   THE NINETY-FOUR
   "Five of ninety-four" as a thing you can count rather than read. The five
   finished rooms are gold; everything else recedes, so the ratio is the
   first thing the eye gets.
   ========================================================================== */
.g-94{
  background-color: #14305F;
  background-image:
    radial-gradient(130% 100% at 50% 0%, #1B3D74 0%, #14305F 55%, #0D2044 100%);
  color: #E7E1D5;
  padding: clamp(48px, 7vw, 96px) var(--s5);
  border-top: 3px solid var(--gold);
}
.g-94__in{ max-width: 60rem; margin: 0 auto; }
.g-94__fr{
  margin: 0 0 var(--s3); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-lit);
}
.g-94__h{
  margin: 0 0 var(--s4); font-family: var(--display); font-weight: 300;
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.15; color: #fff;
  max-width: 26ch;
}
.g-94__lede{
  margin: 0 0 var(--s6); font-family: var(--display);
  font-size: clamp(16px, 1.4vw, 19px); color: #C6D0DC;
}

.g-94__grid{
  display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  margin: 0 0 var(--s5);
}
/* On a phone, 94 targets at the 44px minimum would be 4,136px of row. They
   cannot all be tappable, so below 44rem they are not buttons at all — the
   grid is a picture of the ratio and the counts are read from the key. */
/* The threshold is the CELL size, not the viewport. Sixteen columns only
   reach a 44px cell above about 52rem, and a tablet sat at 39px — over the
   phone breakpoint and still under the minimum. */
@media (max-width: 52rem){
  .g-94__c{ pointer-events: none; }
  .g-94__out{ display: none; }
  .g-94__lede{ display: none; }
}
@media (min-width: 44rem){
  .g-94__grid{ grid-template-columns: repeat(16, 1fr); gap: 6px; }
}
/* The tappable cell states its own minimum rather than depending on a
   breakpoint landing exactly right — sixteen columns of 1fr divided out to
   43.5px on an iPad, half a pixel under. */
@media (min-width: 52rem){
  .g-94__grid{ grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
  .g-94__c{ min-height: 46px; }
}
.g-94__c{
  aspect-ratio: 1; min-height: 0; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  display: grid; place-items: center;
  transition: transform .1s ease, background .12s ease;
}
.g-94__n{
  font-family: var(--ui); font-size: 9px; color: rgba(255,255,255,.28);
}
@media (max-width: 44rem){ .g-94__n{ display: none; } }

.g-94__c.is-untouched{ background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
.g-94__c.is-cleared{
  background: rgba(220,192,119,.3); border-color: rgba(220,192,119,.55);
}
.g-94__c.is-works{
  background: rgba(232,180,92,.5); border-color: #E8B45C;
}
/* The five. Solid gold, and they should be the first thing seen. */
.g-94__c.is-done{
  background: var(--gold); border-color: #F0DFAE;
  box-shadow: 0 0 14px rgba(220,192,119,.4);
}
.g-94__c.is-done .g-94__n{ color: rgba(20,48,95,.55); }

.g-94__c:hover{ transform: scale(1.16); z-index: 2; }
.g-94__c.is-on{
  outline: 2px solid #fff; outline-offset: 1px; transform: scale(1.16); z-index: 3;
}
.g-94__c:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* Holds its height so the grid never jumps as you move across it. */
.g-94__out{
  margin: 0 0 var(--s5); min-height: 3.4em;
  display: grid; gap: 2px; align-content: start;
  border-top: 1px solid rgba(220,192,119,.28); padding-top: var(--s3);
}
.g-94__outn{
  font-family: var(--display); font-size: clamp(19px, 1.8vw, 24px);
  color: var(--gold-lit);
}
.g-94__outl{ font-family: var(--ui); font-size: var(--t-ui); color: #C6D0DC; }

.g-94__key{
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  font-family: var(--ui); font-size: var(--t-sm); color: #A9B8C8;
}
.g-94__ki{ display: inline-flex; align-items: center; gap: 8px; }
.g-94__ki i{
  width: 12px; height: 12px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.045); flex: none;
}
.g-94__ki i.is-cleared{ background: rgba(220,192,119,.3); border-color: rgba(220,192,119,.55); }
.g-94__ki i.is-works{ background: rgba(232,180,92,.5); border-color: #E8B45C; }
.g-94__ki i.is-done{ background: var(--gold); border-color: #F0DFAE; }

/* ==========================================================================
   THE REVEAL
   ========================================================================== */
.g-reveal{ padding: clamp(48px, 7vw, 96px) var(--s5); background: var(--sand-2); }
.g-reveal__in{ max-width: 62rem; margin: 0 auto; }
.g-reveal__fr{
  margin: 0 0 var(--s3); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gilt);
}
.g-reveal__h{
  margin: 0 0 var(--s6); font-family: var(--display); font-weight: 300;
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.15; color: var(--blue-deep);
}
.g-reveal__f{ margin: 0 0 var(--s6); }
.g-reveal__stage{
  position: relative; overflow: hidden; background: var(--sand-3);
  border: 1px solid var(--line); aspect-ratio: 3 / 2;
}
.g-reveal__stage img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.g-reveal__clip{
  position: absolute; inset: 0 auto 0 0; width: 50%;
  overflow: hidden; border-right: 2px solid var(--gold);
}
.g-reveal__clip img{ width: auto; min-width: 100%; }
.g-reveal__bar{
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; pointer-events: none;
  background: var(--gold);
}
.g-reveal__bar i{
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 2px 12px rgba(8,18,34,.4);
}
.g-reveal__bar i::before,
.g-reveal__bar i::after{
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  margin-top: -4px; border-top: 2px solid var(--blue-deep);
  border-right: 2px solid var(--blue-deep);
}
.g-reveal__bar i::before{ left: 11px; transform: rotate(-135deg); }
.g-reveal__bar i::after{ right: 11px; transform: rotate(45deg); }

/* The range input covers the image and is invisible — the drawn handle is
   what you see, the real control is what you touch. */
.g-reveal__r{
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: none;
}
.g-reveal__r::-webkit-slider-thumb{
  -webkit-appearance: none; width: 56px; height: 100%; cursor: ew-resize;
}
.g-reveal__r::-moz-range-thumb{ width: 56px; height: 100%; border: 0; cursor: ew-resize; }
.g-reveal__r:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.g-reveal__f figcaption{
  margin-top: var(--s3); font-family: var(--ui); font-size: var(--t-sm);
  color: var(--ink-soft);
}

.g-94__always{
  margin: 0 0 var(--s2); font-family: var(--display);
  font-size: clamp(16px, 1.4vw, 19px); color: #C6D0DC;
}

/* ==========================================================================
   THE RESTORATION EXPLORER
   ========================================================================== */
.g-rex{
  background-color: #0F2648;
  background-image:
    radial-gradient(130% 100% at 50% -10%, #1D4079 0%, #14305F 48%, #0B1C3C 100%);
  color: #E7E1D5;
  padding: clamp(48px, 7vw, 100px) var(--s5);
  border-top: 3px solid var(--gold);
}
.g-rex__in{ max-width: 66rem; margin: 0 auto; }
.g-rex__fr{
  margin: 0 0 var(--s3); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-lit);
}
.g-rex__h{
  margin: 0 0 var(--s3); font-family: var(--display); font-weight: 300;
  font-size: clamp(27px, 3.8vw, 46px); line-height: 1.14; color: #fff;
}
.g-rex__lede{
  margin: 0 0 clamp(30px, 4vw, 48px); font-family: var(--display);
  font-size: clamp(16px, 1.4vw, 19px); color: #C6D0DC; max-width: 40rem;
}

/* ---- the scrubber ---- */
.g-rex__scrub{ position: relative; margin: 0 0 clamp(34px, 4vw, 52px); }
.g-rex__r{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; margin: 0; background: none; cursor: pointer;
  position: relative; z-index: 2; display: block;
}
.g-rex__r::-webkit-slider-runnable-track{
  height: 3px; background: rgba(220,192,119,.3);
}
.g-rex__r::-moz-range-track{ height: 3px; background: rgba(220,192,119,.3); }
.g-rex__r::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 26px; height: 26px; margin-top: -11px; border-radius: 50%;
  background: var(--gold); border: 3px solid #0F2648;
  box-shadow: 0 0 0 1px var(--gold-lit), 0 2px 10px rgba(0,0,0,.4);
  cursor: grab;
}
.g-rex__r::-moz-range-thumb{
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); border: 3px solid #0F2648; cursor: grab;
}
.g-rex__r:focus-visible{ outline: 2px solid var(--gold-lit); outline-offset: 4px; }

/* Below the input, not under it. At top:26px the input's own box covered
   these and ate every tap — the labels looked interactive and were not. */
.g-rex__ticks{
  display: flex; justify-content: space-between;
  margin-top: 2px;
}
.g-rex__tick{
  background: none; border: 0; padding: var(--s2) var(--s2);
  min-height: 44px; cursor: pointer;
  font-family: var(--ui); font-size: var(--t-sm); letter-spacing: .06em;
  color: #8FA2B8; white-space: nowrap;
}
.g-rex__tick.is-on{ color: var(--gold-lit); font-weight: 600; }
/* The first and last labels would hang off the ends. */
.g-rex__ticks .g-rex__tick:first-child{ text-align: left; }
.g-rex__ticks .g-rex__tick:last-child{ text-align: right; }

.g-rex__body{
  display: grid; gap: clamp(26px, 3.4vw, 46px);
  grid-template-columns: 1fr;
}
@media (min-width: 58rem){
  .g-rex__body{ grid-template-columns: minmax(0,1fr) minmax(15rem, 20rem); }
  .g-rex__counts{ grid-column: 1 / -1; }
}

/* ---- the counts ---- */
.g-rex__counts{
  margin: 0; display: grid; gap: var(--s4) var(--s6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 44rem){ .g-rex__counts{ grid-template-columns: repeat(4, 1fr); } }
.g-rex__counts > div{ border-top: 2px solid var(--gold); padding-top: var(--s3); }
.g-rex__counts dt{
  font-family: var(--display); font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1; color: var(--gold-lit);
  font-variant-numeric: lining-nums tabular-nums;
}
.g-rex__counts dd{
  margin: var(--s2) 0 0; font-family: var(--ui);
  font-size: var(--t-sm); line-height: 1.5; color: #A9B8C8;
}

/* ---- the grid ---- */
.g-rex__grid{
  display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
  align-content: start;
}
@media (min-width: 44rem){ .g-rex__grid{ gap: 5px; } }
.g-rex__c{
  aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.g-rex__c.is-left{ background: rgba(255,255,255,.03); }
.g-rex__c.is-cleared{ background: rgba(220,192,119,.3); border-color: rgba(220,192,119,.55); }
.g-rex__c.is-works{ background: rgba(232,180,92,.55); border-color: #E8B45C; }
.g-rex__c.is-done{
  background: var(--gold); border-color: #F0DFAE;
  box-shadow: 0 0 12px rgba(220,192,119,.45);
}
@media (prefers-reduced-motion: reduce){
  .g-rex__c{ transition: none; }
}

/* ---- what was happening ---- */
.g-rex__say{ border-left: 3px solid var(--gold); padding-left: var(--s5); }
.g-rex__year{
  margin: 0; font-family: var(--display); font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1; color: #fff; font-variant-numeric: lining-nums;
}
.g-rex__label{
  margin: var(--s2) 0 var(--s4); font-family: var(--ui);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-lit);
}
.g-rex__note{
  margin: 0; font-family: var(--display);
  font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: #D7D1C4;
  min-height: 8em;   /* holds height so the grid does not jump as you drag */
}
@media (max-width: 58rem){ .g-rex__note{ min-height: 0; } }

.g-rex__caveat{
  margin: clamp(34px, 4vw, 54px) 0 0; padding-top: var(--s5);
  border-top: 1px solid rgba(220,192,119,.28);
  font-family: var(--ui); font-size: var(--t-sm); line-height: 1.65;
  color: #8FA2B8; max-width: 48rem;
}
.g-rex__caveat strong{ color: #C6D0DC; font-weight: 400; }

/* On a small phone the hero's text block sits over the pause control, so it
   cannot be pressed at all — `.g-hero__in` wins on stacking and swallows the
   tap. It was moved into the flow below the search panel several rounds ago
   for exactly this family of reasons; it also needs to be ABOVE the text.

   Found by a new check that asks whether every control is actually reachable
   with elementFromPoint, rather than only whether it overlaps something. */
/* Both take z-index only, deliberately without `position`.
   Adding `position: relative` lifts them above the wash as intended, and
   also overrides the `position: absolute` each already has further up —
   which anchors the pause button to the bottom-right of the hero and holds
   the hero content OVER the film. With it, the content fell below the video
   onto roughly 640px of bare navy, the wash gradient and the title's
   text-shadow had nothing to sit on, and the pause button dropped into
   normal flow at the top of the hero, on top of the MENU button and
   unclickable. Both elements are already positioned, so z-index is enough. */
.g-hero__pause{ z-index: 6; }
.g-hero__in{ z-index: 2; }

/* `.g-hero__wash` is the gradient over the hero photograph, and on the events
   pages it sits ON TOP of the hero's own primary button — so "Make an enquiry"
   was unclickable at every width, on two pages, live.

   The wash is decoration. It should never have been able to take a click. */
.g-hero__wash{ pointer-events: none; }

/* ==========================================================================
   WHAT IT COMES TO
   The confirmation had the reference and the dates and no money at all. This
   is set like an invoice rather than a card: figures right-aligned on one
   column so the eye can add them up, and the total on a gold rule.
   ========================================================================== */
.g-recap{
  padding: clamp(40px, 5vw, 72px) var(--s5);
  background: var(--sand-2);
  border-top: 3px solid var(--gold);
}
.g-recap__in{ max-width: 40rem; margin: 0 auto; }
.g-recap__fr{
  margin: 0 0 var(--s2); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gilt);
}
.g-recap__h{
  margin: 0 0 var(--s5); font-family: var(--display); font-weight: 300;
  font-size: clamp(25px, 3vw, 36px); color: var(--blue-deep);
}

.g-recap__l, .g-recap__pay{ margin: 0; }
.g-recap__l > div,
.g-recap__pay > div{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) 0;
  border-top: 1px solid var(--line);
}
.g-recap__l > div:first-child{ border-top: 0; }
.g-recap__l dt, .g-recap__pay dt{
  font-family: var(--ui); font-size: var(--t-ui); color: var(--ink);
}
.g-recap__l dd, .g-recap__pay dd{
  margin: 0; font-family: var(--display); font-size: 19px;
  color: var(--blue-deep); white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.g-recap__q{
  display: block; font-family: var(--ui); font-size: var(--t-sm);
  color: var(--ink-soft); margin-top: 2px;
}

.g-recap__tot{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin: var(--s2) 0 0;
  padding-top: var(--s4); border-top: 2px solid var(--gold);
}
.g-recap__totk{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gilt);
}
.g-recap__totv{
  font-family: var(--display); font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1; color: var(--blue-deep);
  font-variant-numeric: lining-nums tabular-nums;
}

.g-recap__pay{ margin-top: var(--s4); }
.g-recap__pay > div:first-child{ border-top: 1px solid var(--line); }
.g-recap__due dt{ color: var(--blue-deep); font-weight: 600; }
.g-recap__due dd{ color: var(--gilt); }

.g-recap__terms{
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.g-recap__k{
  margin: 0 0 var(--s2); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gilt);
}
.g-recap__t{
  margin: 0 0 var(--s4); font-family: var(--display);
  font-size: var(--t-base); line-height: 1.65; color: var(--ink);
}
.g-recap__t strong{ font-weight: 400; color: var(--blue-deep); }
.g-recap__a{ display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s5) 0 0; }
.g-recap__a .g-btn{ min-height: 48px; }

/* Printing this is the point of the Print button, so the page has to print
   like a document rather than a web page. */
@media print{
  .g-recap{ background: none; border-top: 2px solid #000; padding: 0; }
  .g-recap__a{ display: none; }
  .g-recap__totv{ font-size: 24pt; }
}

/* The total was rendering at 15px — inherited, not from any rule I could
   find. Braces balance, the selector matches, `clamp` alone resolves to
   40px, and an inline style works. Something in a 407,000-character
   stylesheet is reaching it that I could not name in a reasonable number of
   probes, so the rule states itself unambiguously rather than relying on
   winning a cascade I do not fully understand.

   The total must be the largest figure in the panel. It was smaller than the
   balance below it, which reads as a mistake. */
.g .g-recap .g-recap__tot .g-recap__totv,
.g-recap__tot > .g-recap__totv{
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1;
}

/* A .g-wrap constrained to --m-tight (26rem = 544px) was holding a
   .g-display heading, so "Most châteaux this size are museums, or closed."
   broke at two and three words a line — 496px of type in a 1440px viewport.

   A reading measure is right for prose and wrong for display type: the whole
   point of a large face is that it carries a long line. Display type takes
   the wide measure regardless of the wrap it sits in. */
.g .g-wrap > .g-display,
.g-wrap > .g-display{
  max-width: var(--m-wide);
  width: 100%;
}
/* Where a wrap is deliberately tight, the heading may exceed it. */
.g-wrap:has(> .g-display){ max-width: var(--m-wide); }
/* The hero keeps its own tighter measure — a hero line is meant to stack. */
.g-hero__in .g-display{ max-width: var(--m-tight); }

/* A wrap holding a .g-display heading is not a prose wrap.

   The prose-measure rule above carries NINE :not() clauses, and each one adds
   specificity — (0,3,10) against the (0,3,0) of anything sane written to
   override it. I wrote two later rules that matched the element and still
   lost, which is why the exclusion belongs in that selector rather than in a
   rule fighting it.

   The paragraphs inside keep their own reading measure. */
.g-sec .g-wrap:has(> .g-display) > p:not(.g-display){
  max-width: var(--m-read);
}

/* ==========================================================================
   ROYAL GREEN AND BURGUNDY

   The palette already had navy, two golds, gilt and terracotta. Two more
   colours sprinkled about would be confetti, so each gets ONE JOB and a
   short list of sections — the same discipline that fixed the gold, where
   splitting it into ornament and text is what stopped it reading brown.

     --vert   the grounds, the gardens, the valley, the outdoors
     --bord   the table, the cellar, the fire, the dining room

   That is not decoration: it is what those colours mean in a French house.
   Vert empire on the garden rooms, bordeaux where the wine is.

   Contrast, measured rather than assumed:
     white on vert 13.30   ·  gold-lit on vert 7.50
     white on bord 12.28   ·  gold-lit on bord 6.93
     vert as text on parchment 11.71  ·  bord 10.81
   All clear AA comfortably, which is why these two shades and not the
   lighter ones I tried first.
   ========================================================================== */
:root{
  --vert:       #17352A;   /* ground, and text on parchment */
  --vert-lit:   #2E5C48;   /* the lighter step, for rules on the dark ground */
  --vert-wash:  rgba(23,53,42,.08);

  --bord:       #5E1F2D;   /* ground, and text on parchment */
  --bord-lit:   #8C3A4C;
  --bord-wash:  rgba(94,31,45,.08);
}

/* ---- as text, on the parchment ---------------------------------------- */
/* Sparing: a figure or an eyebrow, where the subject is the gardens or the
   table. Never body prose — the site has one ink colour and it stays. */
.g-fig--vert, .g-eyebrow--vert{ color: var(--vert); }
.g-fig--bord, .g-eyebrow--bord{ color: var(--bord); }

/* ---- the rule that keeps it from becoming confetti -------------------- */
/* A section may carry ONE ground. Two is a fault and the audit checks it. */
.g-sec--vert.g-sec--bord,
.g-sec--vert.g-sec--terre,
.g-sec--bord.g-sec--terre,
.g-sec--vert.g-sec--dark,
.g-sec--bord.g-sec--dark{ outline: 3px dashed red; }

/* ==========================================================================
   GREEN AND BURGUNDY AS ACCENTS

   Not grounds. A whole burgundy section is a statement; a burgundy
   pull-quote is a grace note, and the grace note is what was asked for.

   Both are dark enough to be TEXT on the parchment, which is the whole
   reason these two shades and not the lighter ones I measured first:
     vert #17352A on parchment  11.71:1
     bord #5E1F2D on parchment  10.81:1
   Compare the gold, which reads brown as text precisely because it does not
   have that headroom.

   One job each:
     burgundy — the voice. Pull-quotes, what guests said, the table.
     green    — the outdoors. Gardens, the valley, the grounds, the walks.
   ========================================================================== */

/* ---- burgundy: the voice ---------------------------------------------- */
.g-quote--bord,
blockquote.g-quote--bord p,
.g-pull--bord{
  color: var(--bord);
}
/* The bar beside a pull-quote takes the colour too, so the accent reads as
   deliberate rather than as one odd sentence. */
.g-quote--bord,
.g-pull--bord{ border-left-color: var(--bord); }
.g-quote--bord cite,
.g-pull--bord cite{ color: var(--bord-lit); }

/* ---- green: the outdoors ---------------------------------------------- */
.g-h2--vert,
h2.g-h2--vert,
.g-display--vert{ color: var(--vert); }
/* A heading's own rule follows its heading. */
.g-h2--vert::before{ background: var(--vert-lit); }
.g-eyebrow--vert{ color: var(--vert); }

/* ---- and the figures, where the subject fits -------------------------- */
.g-fig--vert b, .g-fig--vert dt{ color: var(--vert); }
.g-fig--bord b, .g-fig--bord dt{ color: var(--bord); }

/* On the dark grounds neither colour is legible, so they step aside rather
   than being applied and hoped for. */
.g-sec--dark .g-h2--vert,
.g-armorial .g-h2--vert,
.g-care .g-h2--vert,
.g-rex .g-h2--vert{ color: #9FCBB4; }
.g-sec--dark .g-quote--bord,
.g-sec--dark .g-pull--bord{ color: #E5A9B6; border-left-color: #E5A9B6; }

/* A 416px pull-quote floated right inside a 544px wrap leaves the paragraph
   beside it 128 pixels — the prose came out at two characters a line, running
   vertically down the page. Live, and my own audit missed it because the
   text-measure check exempts anything near a float.

   A float only works where there is room for BOTH. Below a wide enough
   container the quote stops floating and becomes a block, which is what it
   should have been at that width all along. */
.g-pull, .g-quote{ max-width: 100%; }

@container (max-width: 46rem){
  .g-pull, .g-quote{ float: none; width: 100%; margin-left: 0; margin-right: 0; }
}
/* Container queries need a container; a bare .g-wrap may not be one, so the
   viewport rule is the belt to that braces. */
@media (max-width: 62rem){
  .g-wrap .g-pull, .g-wrap .g-quote{
    float: none; width: 100%; margin-left: 0; margin-right: 0;
  }
}
/* The cap applies only while it is actually floating beside text. Once it
   has become a block it takes the full measure — capping a block at 50% just
   moved the crush from the paragraph to the quote. */
/* A float needs room for BOTH halves. Anything under 640px of wrap cannot
   give the quote 300px and still leave the prose a readable line, so it does
   not float at all — regardless of how wide the WINDOW is. The wrap is the
   thing that matters, and on this site a .g-wrap is often 544px inside a
   1440px window, which is exactly how the two-characters-a-line bug hid. */
.g-wrap > .g-pull, .g-wrap > .g-quote{ float: none; width: 100%; max-width: 100%; }

/* 780px, not 640px: the quote is set at 42px, so it needs about 400px to
   hold a line, and the prose beside it needs 340px. A percentage cap cannot
   know the type size — 45% of an 834px wrap was 354px, which came out at
   eighteen characters of 42px type. Absolute floors on both halves. */
@container (min-width: 780px){
  .g-wrap > .g-pull, .g-wrap > .g-quote{
    float: right; width: auto;
    max-width: 416px; min-width: 400px;
    margin-left: var(--s6);
  }
}

/* I chased the float's WIDTH three times and it was never the width. A
   pull-quote set at 42px needs about 520px to hold twenty-four characters —
   so at 416px it reads twenty-one however wide I let it be. The type has to
   suit the column it is in.

   The quote's size now scales with its own container rather than the window,
   which is the same lesson as the card grid: on this site the wrap is the
   measure that matters, not the viewport. */
.g-pull p, .g-quote p,
.g-pull, .g-quote{ text-wrap: pretty; }

@container (max-width: 779px){
  /* Full width, so it can afford to stay large. */
  .g-wrap > .g-pull p, .g-wrap > .g-quote p,
  .g-wrap > .g-pull > *, .g-wrap > .g-quote > *{
    font-size: clamp(21px, 4.4cqi, 34px);
  }
}
@container (min-width: 780px){
  /* Floated into ~416px, so it comes down to a size that column can hold. */
  .g-wrap > .g-pull p, .g-wrap > .g-quote p,
  .g-wrap > .g-pull > *, .g-wrap > .g-quote > *{
    font-size: clamp(20px, 2.6cqi, 29px);
  }
}

/* ==========================================================================
   THE ATELIER, AT A GLANCE
   Twenty-three screens with no price on any of them. This is the answer to
   "should I do this", placed before the prose that assumes you already said
   yes.
   ========================================================================== */
.g-gl{
  background-color: #14305F;
  background-image: radial-gradient(130% 100% at 50% 0%, #1D4079 0%, #14305F 55%, #0D2044 100%);
  color: #E7E1D5;
  padding: clamp(44px, 6vw, 88px) var(--s5);
  border-top: 3px solid var(--gold);
}
.g-gl__in{ max-width: 64rem; margin: 0 auto; }
.g-gl__fr{
  margin: 0 0 var(--s3); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-lit);
}
.g-gl__h{
  margin: 0 0 clamp(28px, 3.4vw, 46px); font-family: var(--display);
  font-weight: 300; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.14;
  color: #fff;
}

.g-gl__grid{
  margin: 0 0 clamp(30px, 4vw, 52px);
  display: grid; gap: var(--s5) var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem){ .g-gl__grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem){ .g-gl__grid{ grid-template-columns: repeat(3, 1fr); } }

.g-gl__i{ border-top: 2px solid var(--gold); padding-top: var(--s3); }
.g-gl__i dt{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lit);
}
.g-gl__i dd{
  margin: var(--s2) 0 0; font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px); line-height: 1.2; color: #fff;
}
/* The price is the fact that was missing, so it is the one that carries. */
.g-gl__big{
  font-size: clamp(38px, 5vw, 60px) !important; line-height: 1 !important;
  color: var(--gold-lit) !important;
  font-variant-numeric: lining-nums tabular-nums;
}
.g-gl__n{
  margin: var(--s2) 0 0; font-family: var(--ui); font-size: var(--t-sm);
  line-height: 1.55; color: #A9B8C8;
}

.g-gl__day{
  border-top: 1px solid rgba(220,192,119,.3);
  padding-top: var(--s5);
}
.g-gl__k{
  margin: 0 0 var(--s4); font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-lit);
}
.g-gl__ol{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--s3);
}
@media (min-width: 52rem){
  .g-gl__ol{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;          /* down, then across — it is a clock */
    gap: var(--s3) var(--s6);
  }
}
.g-gl__ol li{
  display: grid; grid-template-columns: 4.2rem 1fr; gap: var(--s3);
  align-items: baseline;
  font-family: var(--display); font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5; color: #DAD4C7;
  padding-bottom: var(--s3); border-bottom: 1px solid rgba(255,255,255,.09);
}
.g-gl__ol b{
  font-family: var(--ui); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .08em; color: var(--gold-lit);
  font-variant-numeric: lining-nums tabular-nums;
}
.g-gl__a{ display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s6) 0 0; }
.g-gl__a .g-btn--solid{
  background: var(--gold); border-color: var(--gold); color: var(--blue-deep);
  font-weight: 600;
}
.g-gl__a .g-btn:not(.g-btn--solid){ color: #F2EDE3; border-bottom-color: var(--gold-lit); }

/* Two buttons in a row at 61px and 49px. One is a solid block and the other
   an underlined link, and their padding was never reconciled — they sit side
   by side and read as a mistake. Buttons on one row share a height. */
.g-gl__a{ align-items: stretch; }   /* stretch, so both take the row height */
.g-gl__a .g-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding-top: var(--s2); padding-bottom: var(--s2);
  text-align: center;
}
/* And keep the labels on one line where there is room, so neither wraps in
   the first place. */
@media (min-width: 40rem){
  .g-gl__a .g-btn{ white-space: nowrap; }
}

/* Still 64 vs 52 with align-items:stretch active on a flex row and both
   buttons single-line — the solid one carries a border and a heavier face
   the quiet one does not, and `stretch` was not resolving it. Rather than a
   fifth guess at the cascade, both buttons are given the same box directly:
   same height, same border box, same face. */
.g-gl__a .g-btn,
.g-gl__a .g-btn--solid{
  height: 56px; min-height: 56px; line-height: 1;
  padding: 0 var(--s5);
  border-width: 1px; border-style: solid;
  font-size: var(--t-ui);
  box-sizing: border-box;
}
.g-gl__a .g-btn:not(.g-btn--solid){ border-color: var(--gold-lit); background: none; }

/* ==========================================================================
   PULLING THE GOLD BACK

   On a real screen the solid-gold button is a slab of highlighter, not gilt.
   That is my error: "solid gold in places" was the brief and I read it as
   "gold as a FILL on the biggest control on the page". Gold at that size
   stops being a precious metal and becomes yellow.

   Gold works as an EDGE and as small marks. The moment it fills a 300px
   rectangle it is a warning label.

   Navy with a gold rule also measures better: 7.32:1 against 5.34:1.
   ========================================================================== */
.g .g-herosearch__go,
.g-armorial .g-btn--solid,
.g-gl__a .g-btn--solid,
.g-approach__btns .g-btn--solid,
.g-sec--vert .g-btn--solid,
.g-sec--bord .g-btn--solid,
.g-care .g-btn--solid,
.g-94 .g-btn--solid,
.g-rex .g-btn--solid{
  background: var(--blue-deep);
  border: 1px solid var(--gold);
  color: #FFFFFF;
}
.g .g-herosearch__go:hover,
.g-armorial .g-btn--solid:hover,
.g-gl__a .g-btn--solid:hover{
  background: #1B3D74; border-color: var(--gold-lit);
}

/* ---- the search panel: smaller and quieter ---------------------------- */
/* It was the loudest thing in the hero and it is a form. Tighter padding,
   smaller labels, and it no longer runs the width of the photograph. */
.g-herosearch{
  max-width: 46rem; margin-left: auto; margin-right: auto;
  background: rgba(12, 24, 42, .72);
  border: 1px solid rgba(220,192,119,.3);
  border-top: 1px solid rgba(220,192,119,.5);
  box-shadow: 0 10px 30px rgba(6,14,28,.3);
}
.g .g-herosearch__f{ padding: var(--s3) var(--s4); }
.g .g-herosearch__f > label{
  font-size: 10px; letter-spacing: .16em; color: rgba(220,192,119,.85);
}
.g .g-herosearch__f .g-rp__btn,
.g .g-herosearch__f input,
.g .g-herosearch__f select{ font-size: 17px; }
.g .g-herosearch__go{ font-size: var(--t-sm); letter-spacing: .06em; }

/* ---- the armorial ground: deeper, less electric ----------------------- */
/* #1B3D74 at the top read as a bright royal blue band on a real monitor —
   nearer a flag than a wall. Dropped two steps, which also lifts the gold
   from 6.03 to 8.17. */
.g-armorial{
  background-color: #12294D;
  background-image:
    radial-gradient(120% 90% at 50% 0%, #16325C 0%, #12294D 55%, #0B1C38 100%);
}
/* And the device comes down in size. At 190px the crown and banners were
   reading as clip art rather than as a mark. */
.g-arms{ width: clamp(96px, 11vw, 132px); }
.g-banner{ width: clamp(26px, 3.4vw, 40px); opacity: .6; }

/* Shrinking the panel made the date cells too narrow for "Add dates", so it
   truncated to "Add d…" — my own regression from the size reduction.
   And my max-width was never the constraint: the panel sits in a .g-wrap
   that is itself 544px. Third time this session the wrap has been the real
   limit and I reached for the child first. */
.g-hero .g-wrap:has(> .g-herosearch),
.g-hero__in:has(> .g-herosearch){ max-width: 48rem; }
.g-herosearch{ max-width: 48rem; width: 100%; }
.g .g-herosearch__f:nth-of-type(1),
.g .g-herosearch__f:nth-of-type(2){ flex: 1 1 auto; min-width: 8.5rem; }
.g .g-herosearch__f:nth-of-type(3){ flex: 0 0 auto; min-width: 5.5rem; }
.g .g-herosearch__f .g-rp__val,
.g .g-herosearch__f .g-rp__btn{ text-overflow: clip; }

/* An earlier rule caps the panel at --m-read (34rem = 544px) with higher
   specificity than a bare .g-herosearch, so my 48rem never applied — which
   is why "Add dates" kept truncating however many times I raised the number.
   Matching the specificity rather than guessing at it again. */
.g .g-hero .g-hero__in .g-herosearch,
.g-hero .g-hero__in .g-herosearch,
.g-hero__in > .g-herosearch{
  max-width: 46rem;
}


/* ==========================================================================
   WHAT THE ROAD IS DOING
   Above the page, not inside it. The guest this is for is reading the
   directions on the morning they set off, and a notice below the fold is the
   same as no notice. Two levels only: a scale of five gets used as a scale of
   one and everything ends up amber.
   ========================================================================== */
.g-roadnote{
  padding: 12px 0; font-family: var(--ui); font-size: var(--t-sm);
  line-height: 1.5; border-bottom: 1px solid rgba(0,0,0,.08);
}
.g-roadnote strong{ font-weight: 600; margin-right: .5em; }
.g-roadnote--note{ background: #FBF3DE; color: #4A3B12; }
.g-roadnote--serious{ background: #7A1F1F; color: #FBF1F1; }
.g-roadnote--serious strong{ color: #fff; }

/* ==========================================================================
   THE CANCEL DISCLOSURE
   Cancelling is not free and not automatic, so it is not a standing button.
   It sits behind a summary with the terms stated above the action. Quiet by
   design — findable by someone who needs it, not inviting to someone idly
   reading their booking.
   ========================================================================== */
.g-cancel-fold{ border-top: 1px solid var(--line); padding-top: var(--s4); }
.g-cancel-fold > summary{
  cursor: pointer; list-style: none;
  font-family: var(--ui); font-size: var(--t-sm); color: var(--ink-faint);
  padding: var(--s2) 0; min-height: 44px; display: flex; align-items: center;
}
.g-cancel-fold > summary::-webkit-details-marker{ display: none; }
.g-cancel-fold > summary::after{ content: " ›"; color: var(--gilt); }
.g-cancel-fold[open] > summary::after{ content: " ⌄"; }
.g-cancel-fold > summary:hover{ color: var(--ink); }
.g-cancel-fold .btn-text-danger{ margin-top: var(--s3); }

/* ==========================================================================
   SMALL TEXT WAS RUNNING TO 100–123 CHARACTERS A LINE
   Notes, hints and caveats are set at 13–15px but sat in the 46rem container
   meant for 18px body prose. The measure scale at the top of this file already
   has the right token; these classes simply were not using it. */
.g .g-hint, .g .g-room__note, .g .g-care__note, .g .g-rex__caveat,
.g .g-backtoform, .g .g-foot-note, .g .g-review__n{ max-width: var(--m-read); }
.g .g-terms{ max-width: none; }

/* Headings that wrapped left a single short word on the last line. balance
   redistributes the words across the lines already taken. Current browsers
   only; older ones wrap as before. */
.g h1, .g h2, .g h3, .g .g-display, .g .g-h2, .g .g-place, .g .g-step__h, .g .g-close__h{ text-wrap: balance; }
.g .g-lede, .g .g-hero__lede, .g .g-p.g-lede-first{ text-wrap: pretty; }

/* When an image fails or has not arrived, the browser paints its alt text into
   the box as a caption — on a hero it reads as a stray label in the top-left
   corner. color:transparent hides the painted fallback while the alt stays in
   the accessibility tree; the box keeps its sand fill, which is the intended
   placeholder. Relevant during the image swap, and for any slow connection. */
.g img{ color: transparent; }

/* Footer: the two addresses carry a quiet label saying which is for what. */
.g-footer__k{ font-size: .8em; opacity: .7; margin-left: .35em; }

/* At tablet width these cards run the full column before their grid kicks in, so
   their 15px body text reached ~90 characters a line. Cap the text, not the card. */
.g .g-incl-card__b, .g .g-homeroom__b p{ max-width: var(--m-read); }

/* Status on the guest pages (portal, manage) used .mini-status / .status-*, classes
   with no rules in this sheet — so every status rendered as plain text. A quiet
   pill, coloured by state. The markup is already on every page; CSS only. */
.g .mini-status{ display: inline-block; font-family: var(--ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: .2em .65em; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-soft); vertical-align: middle; }
.g .mini-status.status-confirmed, .g .mini-status.status-paid, .g .mini-status.status-registered{ color: var(--blue-deep); border-color: var(--gilt); }
.g .mini-status.status-pending, .g .mini-status.status-requested, .g .mini-status.status-waitlist{ color: var(--ink); }
.g .mini-status.status-cancelled, .g .mini-status.status-declined, .g .mini-status.status-expired{ color: var(--ink-faint); text-decoration: line-through; }

/* The bottom edge has the same problem the top had: on pages with a fixed
   booking bar, a field the browser scrolls "into view" for validation lands
   at the bottom of the viewport, under the bar. The Terms checkbox — the last
   required field — is exactly the one this hit: a guest who forgot it pressed
   Pay & book and was scrolled to a problem hidden behind that very button. */
body:has(.g-bookbar) { scroll-padding-bottom: 112px; }
body:has(.g-stickybar){ scroll-padding-bottom: 112px; }
html:has(.g-bookbar), html:has(.g-stickybar){ scroll-padding-bottom: 112px; }

/* The route flashes error, info and success, but only success had a variant, so
   an error looked identical to a neutral notice. Error gets a bronze edge and
   the ink colour of a warning; info stays quiet. */
.g .flash-error, .g .flash-danger, .g .flash-warning{ border-color: var(--gilt); border-left: 4px solid var(--gilt); background: #FBF3E6; color: var(--ink); }
.g .flash-info{ border-color: var(--line); }

/* ==========================================================================
   THE HERO MUST BE AT LEAST AS TALL AS WHAT IS IN IT
   .g-hero__in was position:absolute; bottom:0 - pinned to the hero's bottom. The
   hero height is a fraction of the viewport, but the content is a fixed ~670px
   on the homepage (title on two lines, rule, motto, lede, search bar). On a
   1440x900 laptop the hero was 612px; at 1366x768, 522px. The content had
   nowhere to go but up: the title sat behind the header, and at 1366x768 began
   43px above the top of the page. Only 1920x1080 fitted.
   Now the hero is a column flex box: at least its vh height, but it GROWS to
   fit the content, which sits in flow at the bottom (where it was) with the
   fixed header's height held clear at the top. Backgrounds (image, video,
   wash) stay absolute and still fill it. */
.g .g-hero{ display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(86px + var(--s5)); box-sizing: border-box; }
.g .g-hero__in{ position: static; width: 100%; }
.g .g-hero__img, .g .g-hero__video, .g .g-hero__wash{ position: absolute; inset: 0; }
.g .g-hero__pause{ position: absolute; }

/* main img:not([class]) is full-width 3:2 with no cap, so at 1440px the picture in
   the "ninety-four rooms" section was 873px tall on a 900px screen - a whole
   viewport of one image in the middle of a text section. Cap unclassed images
   and the took/story figures at 68vh; object-fit: cover keeps them composed. */
/* Scoped to the two figures that needed it. It also listed main img:not([class]),
   which matches every unclassed image on the site and outranks the rules sizing
   them, so while it was in place all of them took this 60vh height. Never shipped. */
.g .g-took__media img, .g .g-story__media img{ aspect-ratio: auto; width: 100%; height: clamp(20rem, 60vh, 40rem); object-fit: cover; }
@media (max-width: 44rem){
  /* On a phone the column is narrow; a 60vh height would crop a landscape
     photograph into a tall sliver. Let the 3:2 ratio govern again. */
  .g .g-took__media img, .g .g-story__media img{ aspect-ratio: 3 / 2; height: auto; }
}

/* A grid item with min-width:auto can grow past its track when a child has a
   large intrinsic size - a not-yet-loaded or failed image does exactly that,
   and on a phone the took section then ran to 1098px inside a 342px column,
   clipped by main so nothing flagged it. Items may never exceed their track. */
/* min-width:0 on the body's children (so the grid cannot push them wide); the
   100% cap only on the grid and its items. Capping every body child overrode the
   lede and close's own 40rem measure, which then ran to 992px. */
.g .g-took__body > *{ min-width: 0; }
.g .g-took__grid, .g .g-took__grid > *, .g .g-took__media{ min-width: 0; max-width: 100%; }
/* The browser gives <figure> a default 40px side margin; it was never reset here,
   so the photograph sat 40px narrower than the facts below it - two left edges. */
.g .g-took__media, .g .g-say{ margin: 0; }

/* ==========================================================================
   THE FRENCH PAIR AND THE EYEBROW WERE READING AS ONE GARBLED LABEL
   Nineteen headings open with a French line, its English gloss, then an
   eyebrow. The gloss and the eyebrow were both small tracked capitals, one
   directly on the other, and the eyebrow started 4px above the gloss's
   baseline, so its 26px bar cut across the gloss's first letters like a
   broken underline ("WRite to us", "SINce 1741").
   The gloss is a translation, not a label: sentence case, plain, tucked
   under the French. The eyebrow gets clear space and drops its bar, since
   the French line already opens the stack. */
.g .g-fr__en{ text-transform: none; letter-spacing: .01em; font-weight: 400; font-size: 13px; line-height: 1.45; margin-top: 3px; }
.g .g-fr + .g-eyebrow{ margin-top: var(--s4); }
.g .g-fr + .g-eyebrow::before{ display: none; }

/* ==========================================================================
   THE ROOM CARDS: THE PHOTOGRAPH IS THE PRODUCT
   .g-homeroom__img had height: 13rem, which overrides its 3:2 aspect ratio,
   so at desktop the room photograph was a 570x208 letterbox strip - shorter
   than the text under it. Let the ratio govern.
   Five rooms in a two-column grid left the fifth alone with half a row of
   nothing beside it. When the last card is odd it spans the row and lays
   out sideways - photograph left, text right - so it reads as a feature,
   not a leftover. */
.g .g-homeroom__img{ height: auto; aspect-ratio: 3 / 2; }
@media (min-width: 60rem){
  .g .g-homerooms > .g-homeroom:last-child:nth-child(odd){ grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .g .g-homerooms > .g-homeroom:last-child:nth-child(odd) .g-homeroom__img{ aspect-ratio: auto; height: 100%; min-height: 20rem; }
  .g .g-homerooms > .g-homeroom:last-child:nth-child(odd) .g-homeroom__b{ justify-content: center; }
}

/* The pills are spaced by the list's gap (8px); a general list rule also gave
   each one a 24px right margin, so pills sat 32px apart - further than their
   own padding - and read as unrelated. */
.g .g-tags li{ margin: 0; }

/* The facts band runs full-bleed, but its figures started 24px from the
   viewport edge while every other element aligns to the content column
   (136px at 1440). Keep the ruled band edge to edge; inset the row of five so
   the first figure sits on the column. Separators move from the grid gap to
   cell borders, so the inset is sand rather than a stripe of rule colour. */
@media (min-width: 64rem){
  .g main > .g-facts{ background: var(--sand); gap: 0; padding-inline: max(0px, calc((100% - var(--wrap)) / 2)); }
  .g main > .g-facts li + li{ border-left: 1px solid var(--line); }
}

/* The three-up guest quotes carried four line devices at once: the heading
   rule, a navy rule over each column, a gold bar beside each quote and a
   second bar beside each name - indented 12px against the quote's 24px, so
   quote and name did not share a left edge. In the grid the column rule is
   enough (the device the "took" facts use); quote and name sit flush under it. */
.g .g-says__grid .g-say__q, .g .g-says__grid .g-say__by{ border-left: 0; padding-left: 0; }

/* ==========================================================================
   ON A PHONE, TWO ROOMS AND THE POOL COULD NOT BE REACHED
   Below 34rem .g-cards becomes a sideways carousel. A later rule set
   justify-content: center on .g-cards, to centre a short last row on
   desktop. In a scroll container whose tracks are wider than itself,
   centring pushes half the overflow off the LEFT edge, and a browser cannot
   scroll into negative space. On Stay the first two cards - Chambre
   Emeraude and Chambre du Levant - sat at x = -647 and could never be
   swiped to; on The Estate, La Piscine. Confirmed by scrolling end to end.
   "safe" keeps the desktop centring and falls back to start the moment the
   row would overflow; the carousel itself starts at the start explicitly.
   Its bleed also assumed the 24px column padding, but at this width the
   column pads 16px, so the carousel overshot the screen by 8px each side. */
/* The culprit is the odd-count rule, .g-cards:has(> .g-card:last-child:nth-child(2n+1)):
   its :has() argument makes it four classes specific, so it is matched here. */
.g .g-cards, .g .g-cards:has(> .g-card:last-child:nth-child(2n+1)){ justify-content: safe center; }
@media (max-width: 34rem){
  .g .g-cards, .g .g-cards:has(> .g-card:last-child:nth-child(2n+1)){ justify-content: start; margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); scroll-padding-inline: var(--s4);
    /* Each card filled the screen exactly, so the next room never showed and the carousel read as a single room. At 84% the next card shows at the edge. */
    grid-template-columns: none; grid-auto-columns: 84%; }
}

/* The hero title draws its short gold rule inside its own box, at the bottom,
   and had no bottom margin - so on Stay, Workshops and Restoration the next
   element (the button, the lede) started exactly on the rule and covered it.
   The homepage escaped only because its motto brings a top margin. Sibling
   margins collapse here, so pages that already had a gap keep it. */
.g .g-hero__title{ margin-bottom: var(--s5); }

/* Five height rules competed for the Stay page's room photo; the last,
   .g-card--room img{ height: 17rem }, fixed it at 272px whatever the width, so
   at desktop the rooms were a 2:1 strip - smaller than the same rooms on the
   homepage, on the page whose job is selling them. 3:2, as on the homepage. */
.g .g-card--room .g-card__img{ height: auto; aspect-ratio: 3 / 2; }

/* The ledger rows were flex containers holding an empty ::before, the label and
   the rest of the text; the flex gap applied between all three, so every row was
   indented by a gap before a zero-width pseudo-element, and each label sat a gap
   plus a literal space away from its dash. Plain text reads as written. The note
   is a grid item, so it also inherited the 64px row gap. */
.g .g-ledger li{ display: block; }
.g .g-ledger li::before{ content: none; }
.g .g-ledger li b{ display: inline; }
@media (min-width: 46rem){ .g .g-ledger{ row-gap: var(--s4); } }

/* The note spans both ledger columns; at its small size that ran past 100 characters a line. */
.g .g-ledger__note{ max-width: var(--m-read); }

/* "All Five, In Numbers": the note under each name is one line in some cards and two
   in others (du Levant), which dropped that card's price and table 15px below its
   neighbours', so the rows the section exists to compare did not line up. Reserve
   two lines. */
@media (min-width: 46rem){ .g .g-tier__n{ min-height: 3em; min-height: 2lh; } }

/* `.g .g-wrap > p { margin-left: 0; margin-right: 0 }` pins prose to the column's
   left edge, and it is more specific than the auto margins that centre these, so it
   pinned them too: the closing lede on eleven pages (a centred line under a centred
   heading, sitting left), both mottos, the gallery empty state, and the Events
   enquiry button. They were meant to be centred; their own rules say so. */
.g .g-wrap > .g-close__p, .g .g-wrap > .g-devise, .g .g-wrap > .g-empty,
.g .g-wrap > p[style*="text-align:center"]{ margin-inline: auto; }

/* Each assurance item is a grid (icon, heading, text) stretched to its row's height;
   grid's default align-content stretches the rows into the spare space, so items with
   less text pushed their heading 8px lower than their neighbours'. */
.g .g-assure__grid li{ align-content: start; }

/* The hero lede had no bottom margin either, so on Workshops the button sat on its
   last line. The button row takes its own space from whatever precedes it (margins
   collapse, so heroes that already had a gap keep it). */
.g .g-hero__in > * + .g-hero__cta{ margin-top: var(--s5); }

/* Atelier cards: an auto-fit grid cannot centre a short last row, so five ateliers
   in three columns left a hole beside the last two. A wrapping flex row at the same
   widths (three across, two on a tablet, one on a phone) centres whatever remains.
   The name also sat directly on the photograph's bottom edge. */
@media (min-width: 40rem){
  .g .g-wscards{ display: flex; flex-wrap: wrap; justify-content: center; }
  .g .g-wscards > .g-wscard{ flex: 0 0 calc((100% - var(--s5)) / 2); max-width: calc((100% - var(--s5)) / 2); }
}
@media (min-width: 64rem){
  .g .g-wscards > .g-wscard{ flex-basis: calc((100% - 2 * var(--s5)) / 3); max-width: calc((100% - 2 * var(--s5)) / 3); }
}
.g .g-wscard__img{ margin-bottom: var(--s4); }

/* On a phone each dated sitting was a full-width card with the atelier's photo
   taking half of it - the same photo on every sitting of that atelier - so eleven
   sittings ran to about 5,000px of scrolling. The dates are what is being chosen:
   the photo becomes a thumbnail beside them, and the places-left flag moves into
   the text column rather than trying to fit on a small image. */
@media (max-width: 34rem){
  .g .g-sit{ display: grid; grid-template-columns: 6.5rem 1fr; }
  .g .g-sit__img{ grid-column: 1; grid-row: 1 / span 2; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .g .g-sit__flag{ position: static; grid-column: 2; grid-row: 1; justify-self: start; margin: var(--s4) var(--s4) 0; }
  .g .g-sit__b{ grid-column: 2; grid-row: 2; padding: var(--s3) var(--s4) var(--s4); }
}

/* The day timeline's dots were placed at top: 6.75px, sized for a row without
   padding; the rows have 24px of top padding, so each dot sat ~30px above the time
   it marks, on the rule above. Centred on the time's line (37px into the row). */
.g .g-timeline__i::before{ top: calc(var(--s5) + 8px); }

/* The timeline label column computed at 112px, so two-word labels ("From Toulouse",
   "From Barcelona", "Last three minutes") broke onto two lines at desktop width. */
@media (min-width: 34.01rem){ .g .g-timeline__i{ grid-template-columns: minmax(9.5rem, 11rem) 1fr; } }

/* The Journal box draws a 2px rule on top and had no top padding, so the eyebrow's
   own bar sat directly against it - a lump in the middle of the line, on every page
   that carries the Journal. The rule does the bar's job; the eyebrow gets room. */
.g .g-journal__in{ padding-top: var(--s5); }
.g .g-journal .g-eyebrow::before{ display: none; }

/* .g-two pads 24px each side, and it sits inside .g-wrap, which already pads 24px -
   so every two-column section (18 of them) started its text 24px right of the column
   the headings above and below it use. Inside a wrap the wrap's padding is enough. */
.g .g-wrap > .g-two{ padding-inline: 0; }

/* .g-h3 was set to var(--t-h2), the section-heading size, so all 22 card and panel
   headings on the site (14 on panels, 6 on cards) were as large as the section
   headings above them. --t-h3 is the token the scale defines for exactly these:
   "card and panel headings". Pre-existing in fdd551d. */
.g .g-h3{ font-size: var(--t-h3); }

/* Two figure components were designed with display-serif dt figures, and a generic
   ".g dl dt" rule (UI face, 15px) outranked both: the homepage "took" facts
   ("500 tonnes", "Five of ninety-four") and the Restoration room counters (0 / 0 /
   0 / 94) rendered as small body text. Their own rules, restored. */
.g .g-took__facts dt{ font-family: var(--display); font-size: clamp(21px, 2vw, 27px); }
.g .g-rex__counts dt{ font-family: var(--display); font-size: clamp(30px, 3.4vw, 46px); }

/* Room page: the price was 13px body text under the button. Set as a figure, with the
   room's facts as pills beneath it, then the button. */
.g .g-room__meta .g-fig{ font-family: var(--display); font-size: var(--t-h3); font-weight: 400; }
.g .g-roomtop__facts{ margin: var(--s3) 0 var(--s4); }
.g .g-roomtop__cta{ margin: var(--s4) 0 var(--s5); }

/* THE DRAWER ON A CREAM GROUND. Its date search and its foot (links, phone, email, terms,
   privacy) were coloured for a dark drawer - pale gold and pale blue - while the drawer is
   cream: thirteen items at 1.2-1.7:1 against a 4.5 minimum, close to invisible. The page
   audit only reads <main>, which is why it never flagged them. Pre-existing in fdd551d. */
.g #g-mainnav .g-qbook__h{ color: #73562D; }
.g #g-mainnav .g-qbook label, .g #g-mainnav .g-qbook__n{ color: var(--ink-soft); }
.g #g-mainnav .g-navwrap__foot, .g #g-mainnav .g-navwrap__foot a, .g #g-mainnav .g-navwrap__foot p{ color: var(--ink-soft); }

/* With the drawer open its close button sits over the header menu button, whose bars are wider
   and showed around the X. Faded while expanded; the button stays focusable for the focus return. */
.g .g-navbtn[aria-expanded="true"] .g-navbtn__bars{ opacity: 0; }

/* The fold heading is now a real button (see public_base). It keeps the heading's look. */
.g .g-fold__btn{ font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; background: none; border: 0; padding: 0; margin: 0; width: 100%; cursor: pointer;
  /* A single-line heading was 31px tall: short of the 44px tap target the section used to provide. */
  display: flex; align-items: center; min-height: 44px; }
.g .g-fold__btn:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 4px; }

/* PARTIAL LAST ROWS, CENTRED. The room comparison (five rooms, three across) and the included-
   feature cards (odd counts, two across) left their last row pinned left with an empty slot
   beside it. Each track is split into two half-columns and the leftover items sit on the centre
   ones. Thresholds match the grids' own auto-fit minimums (19rem and 27rem, gap 1.5rem), read
   from the wrapper's real width, so the column counts are exactly what they were. */
.g .g-wrap:has(> .g-tiers), .g .g-wrap:has(> .g-incl-cards){ container-type: inline-size; }
@container (min-width: 60rem){
  .g .g-tiers{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .g .g-tiers > *{ grid-column: span 2; }
  .g .g-tiers > :last-child:nth-child(3n+1){ grid-column: 3 / span 2; }
  .g .g-tiers > :nth-last-child(2):nth-child(3n+1){ grid-column: 2 / span 2; }
  .g .g-tiers > :last-child:nth-child(3n+2){ grid-column: 4 / span 2; }
}
@container (min-width: 39.5rem) and (max-width: 59.99rem){
  .g .g-tiers{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g .g-tiers > *{ grid-column: span 2; }
  .g .g-tiers > :last-child:nth-child(2n+1){ grid-column: 2 / span 2; }
}
@container (min-width: 55.5rem){
  .g .g-incl-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g .g-incl-cards > *{ grid-column: span 2; }
  .g .g-incl-cards > :last-child:nth-child(2n+1){ grid-column: 2 / span 2; }
}

/* WORKSHOP DATES. auto-fit collapsed the empty tracks, so one date (a single atelier chosen in
   the filter, or a thin season) stretched across the whole row: 1168px wide with a 778px photo.
   A centred flex row at the same column counts the grid had (17rem minimum, 1.5rem gap):
   cards keep one width whatever the count, and a partial row sits in the middle. */
.g .g-wrap:has(> .g-sittings-grid){ container-type: inline-size; }
.g .g-sittings-grid{ display: flex; flex-wrap: wrap; justify-content: center; }
.g .g-sittings-grid > .g-sit{ flex: 0 0 100%; min-width: 0; }
@container (min-width: 35.5rem){ .g .g-sittings-grid > .g-sit{ flex-basis: calc((100% - 1.5rem) / 2); } }
@container (min-width: 54rem){ .g .g-sittings-grid > .g-sit{ flex-basis: calc((100% - 3rem) / 3); } }
@container (min-width: 72.5rem){ .g .g-sittings-grid > .g-sit{ flex-basis: calc((100% - 4.5rem) / 4); } }

/* FACTS BAND, THREE ACROSS (34-64rem): five figures left an empty tinted cell at the end of
   the second row. The last row now shares the full width - two figures at half each, or one
   across the whole row. Six half-columns, each figure spanning two. */
@media (min-width: 34rem) and (max-width: 63.99rem){
  .g .g-facts{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .g .g-facts > *{ grid-column: span 2; }
  .g .g-facts > :nth-last-child(2):nth-child(3n+1), .g .g-facts > :last-child:nth-child(3n+2){ grid-column: span 3; }
  .g .g-facts > :last-child:nth-child(3n+1){ grid-column: 1 / -1; }
}

/* FONTS AND IMAGE SPACE (speed pass).
   - Bold asked for weight 700, which is not loaded for EB Garamond or Inter, so the browser
     synthesised it. 600 is loaded. :where() keeps this below every component rule.
   - The homepage's fifth room card (spanning the row, 60rem up) sized its photo from the photo
     itself, so the page moved 69px when it arrived. 3:2 is the height it lands at anyway. */
:where(.g) b, :where(.g) strong{ font-weight: 600; }
@media (min-width: 60rem){
  .g .g-homerooms > .g-homeroom:last-child:nth-child(odd) .g-homeroom__img{ aspect-ratio: 3 / 2; height: auto; min-height: 20rem; }
}

/* ==========================================================================
   CARRIED OVER FROM style.css, WHICH PUBLIC PAGES NO LONGER LOAD
   public_base linked the admin stylesheet (153 KB, 1,187 rules) on every public page,
   ahead of this file. 38 of its rules styled public markup that this file does not:
   the status pills, the "empty" notes, checkbox rows, the table wrapper, two small
   buttons on the guest pages, and the print mode behind the stay takeaway. They are
   here verbatim (with the variables they use), and the link is gone.
   ========================================================================== */
:root{ --danger: #a33; --gold-on-warn: #7B6238; --paper: #F6F2E8; --shadow: 0 2px 10px rgba(42,26,18,0.10); --status-danger-bg: #EFE3E3; --status-info-bg: #DCE8F0; --status-neutral-bg: #EEE8DA; --status-success-bg: #DCEBDC; --steel-deep: #2C4F66; }
.btn-text-danger{ background: none; border: none; color: var(--danger); font-size: 12.5px; cursor: pointer; padding: 0px; }
.mini-status{ font-family: "IBM Plex Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 10px; }
.status-active{ background: var(--status-success-bg); color: var(--success); }
.status-inactive{ background: var(--status-danger-bg); color: var(--danger); }
.status-onshift{ background: var(--status-warn-bg); color: var(--gold-on-warn); }
.status-current{ background: var(--status-warn-bg); color: var(--gold-on-warn); }
.status-upcoming{ background: var(--status-info-bg); color: var(--steel-deep); }
.status-past{ background: var(--status-neutral-bg); color: var(--ink-soft); }
.status-pending{ background: var(--status-warn-bg); color: var(--gold-on-warn); }
.status-approved, .status-confirmed{ background: var(--status-success-bg); color: var(--success); }
.status-rejected, .status-declined{ background: var(--status-danger-bg); color: var(--danger); }
.status-paid{ background: var(--status-success-bg); color: var(--success); }
.status-unpaid{ background: var(--status-neutral-bg); color: var(--ink-soft); }
.status-refunded{ background: var(--status-info-bg); color: var(--steel-deep); }
.status-cancelled{ background: var(--status-neutral-bg); color: var(--ink-soft); }
.status-available{ background: var(--status-success-bg); color: var(--success); }
.status-unavailable{ background: var(--status-danger-bg); color: var(--danger); }
.status-new{ background: var(--status-info-bg); color: var(--steel-deep); }
.status-contacted, .status-quoted{ background: var(--status-warn-bg); color: var(--gold-on-warn); }
.task-check{ width: 30px; height: 30px; border-radius: 7px; border: 1.5px solid var(--parchment-line); background: var(--surface); color: var(--success); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0px; transition: border-color 0.15s, transform 0.1s; }
.task-check:hover{ border-color: var(--success); transform: scale(1.05); }
.task-row.task-done .task-check{ background: var(--status-success-bg); border-color: var(--success); }
.task-row.task-in-progress .task-check{ background: var(--status-warn-bg); border-color: var(--gold); }
.empty-state, .empty-inline{ color: var(--ink-soft); font-size: 13.5px; font-style: italic; }
.empty-state{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 34px 20px; border-radius: 12px; background: var(--paper); border: 1px solid var(--parchment-line); color: var(--ink-soft); font-size: 13.5px; }
.empty-state svg{ opacity: 0.4; width: 26px; height: 26px; margin: 0px; }
.doc-delete{ background: none; border: none; color: var(--danger); cursor: pointer; font-size: 14px; }
.checkbox-row{ display: flex; align-items: center; gap: 8px; }
.table-wrap{ overflow-x: auto; border: 1px solid var(--parchment-line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); margin-bottom: 18px; }
.access-grid .checkbox-row{ align-items: flex-start; }
@media (pointer: coarse){
  .task-check{ min-width: 32px; min-height: 32px; }
  .doc-delete, .task-check, .btn-text-danger{ min-height: 38px; min-width: 38px; }
}
@media print{
  .g-top, .page-head, .receipt-print, nav, header, footer{ display: none !important; }
  body.g-print-stay *{ visibility: hidden; }
  body.g-print-stay .g-takeaway, body.g-print-stay .g-takeaway *{ visibility: visible; }
  body.g-print-stay .g-takeaway{ position: absolute; left: 0px; top: 0px; width: 100%; margin: 0px; padding: 0px; }
  body.g-print-stay .g-takeaway .no-print, body.g-print-stay .g-takeaway .no-print *{ visibility: hidden; }
  body.g-print-stay .g-takeaway__card{ border: 1px solid rgb(0, 0, 0); }
}

/* ROOM PAGE EXTRAS (the list items; Stay's .g-extras holds <article>s and is untouched).
   - The label was a flex row, so the notice ("3 days' notice"), written as grid-column 2 / -1,
     became a third column beside the price and squeezed the description to a few words a line.
     The label is now the grid that rule expected: box, text, price; the notice under the text.
   - The card moves from the label to the list item, so "Too soon for these dates" and the
     "When would you like it?" fields sit inside it, and a row's cards stretch to one height.
   - An extra that is too soon now looks unavailable, not just its checkbox. */
.g .g-extras > li{ display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--white); border: 1px solid var(--line); }
.g .g-extras > li > .g-check{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s3); align-items: start; padding: 0; background: none; border: 0; min-height: 44px; }
.g .g-extras > li > .g-hint, .g .g-extras > li > .g-extra-when{ margin: 0; padding-left: calc(18px + var(--s3)); }
.g .g-extras > li:has(> .g-check input:disabled) > .g-check{ opacity: .55; cursor: not-allowed; }

/* The browser's default checkbox side margin put the card text a few pixels right of the notes under it. */
.g .g-extras > li > .g-check > input{ margin: 3px 0 0; }

/* MANAGE BOOKING: ADD TO YOUR STAY. Each extra is a small form that was one flex row - name,
   description, quantity, day, note and button all on a line, so the name and description were
   squeezed to a narrow column of small text and, on a phone, the quantity box stretched to the
   description's height. Now: what it is on its own line; the controls in a row beneath (on a
   phone, day and note full width with quantity and Add sharing the last row); a hairline
   between extras. Matched by its add_extra action, so the page's other forms are untouched. */
.g .g-mb-acts:has(> input[name="action"][value="add_extra"]){ display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.4fr) auto; column-gap: var(--s3); row-gap: var(--s2); align-items: center; }
.g .g-mb-acts:has(> input[name="action"][value="add_extra"]) > span:first-of-type{ grid-column: 1 / -1; }
.g .g-mb-acts:has(> input[name="action"][value="add_extra"]) > span:first-of-type > .g-hint{ display: block; margin-top: 2px; }
.g .g-mb-acts:has(> input[name="action"][value="add_extra"]) > input[type="number"]{ width: 100% !important; }
.g .g-mb-acts:has(> input[name="action"][value="add_extra"]) > button{ grid-column: -2 / -1; justify-self: start; }
.g .g-mb-acts:has(> input[name="action"][value="add_extra"]) + .g-mb-acts:has(> input[name="action"][value="add_extra"]){ border-top: 1px solid var(--line); padding-top: var(--s3); }
@media (max-width: 44rem){
  .g .g-mb-acts:has(> input[name="action"][value="add_extra"]){ grid-template-columns: 4.5rem minmax(0, 1fr); }
  .g .g-mb-acts:has(> input[name="action"][value="add_extra"]) > select, .g .g-mb-acts:has(> input[name="action"][value="add_extra"]) > input[type="text"]{ grid-column: 1 / -1; order: 1; }
  .g .g-mb-acts:has(> input[name="action"][value="add_extra"]) > input[type="number"]{ order: 2; }
  .g .g-mb-acts:has(> input[name="action"][value="add_extra"]) > button{ order: 3; grid-column: 2 / -1; }
}

/* TWO LIGHT-GROUND COLOURS ON DARK GROUNDS (found when the contrast check was widened from
   p/li/dd/h1/h2/a to every element holding text - it had never looked at spans).
   - The price total above Pay & book was --gilt bronze on the navy panel: 1.9:1, on the most
     important number on the page. White, and set as large as the nights line above it.
   - "Add dates" in the homepage hero search was --ink-soft on the dark glass: 1.9:1. */
.g .g-dossier .g-quote__total, .g .g-dossier .g-quote__total .g-fig{ color: #fff; }
.g .g-dossier .g-quote__total .g-fig{ font-size: var(--t-h3); }
/* The unfilled state ("Add dates") had its own rule, .g-rp__val:not(.is-set), in --ink-soft - a
   light-field colour - and it won; the field is transparent over the dark glass at every width. */
.g .g-herosearch__f .g-rp__val, .g .g-herosearch__f .g-rp__val:not(.is-set){ color: rgba(255, 255, 255, .8); }

/* The bill: "Total" and "Still to pay" were set exactly like the lines above them. */
.g .g-mb-total{ font-weight: 600; }
.g .g-mb-total > span:last-child{ font-family: var(--display); font-size: 20px; font-weight: 500; }

/* GUEST ACCOUNT. "Book another stay" sat flush against the heading above it (0px); and the card's
   action row stretched its items to the tallest, so Manage and the two text links stood 56px
   beside a 44px Pay button. */
.g .account-head > .g-btn{ margin-top: var(--s3); }
.g .account-actions{ align-items: center; }

/* CHECKBOXES AND RADIOS KEEP THEIR SIZE. A general "inputs fill their width" rule caught them too: the
   feedback forms' publish-consent box stood 238px wide in its row, and the atelier auto-charge opt-out
   416px. Measured sitewide; these were the only ones. */
.g input[type="checkbox"], .g input[type="radio"]{ width: 18px; height: 18px; min-height: 0; flex: none; }

/* "Welcome back" for a returning guest: 832px wide at desktop, wider than the reading measure the
   text around it keeps. Capped to it. */
.g .g-welcome{ max-width: var(--m-read); }

/* THE GUEST STATEMENT (the bill business guests forward).
   - main thead th is sticky (for the Stay comparison table). Inside the statement's scrolling
     table wrappers that offset the headings 86px down, painted over the rows beneath - the
     column heads appeared below the first line, and the second VAT rate was hidden under them.
   - Row labels and the taxe de séjour explanation (inside a th) took the headings' tracked capitals.
   - The château's details were capped at the reading measure, so the right-aligned block sat
     towards the middle. */
.g .statement thead th{ position: static; }
.g .statement tbody th, .g .statement tbody th .g-hint{ text-transform: none; letter-spacing: normal; }
.g .statement tbody th{ font-weight: 400; }
.g .statement th, .g .statement td{ vertical-align: baseline; }
/* Figure columns: their headings sat left-aligned over right-aligned numbers. */
.g .statement thead th:not(:first-child){ text-align: right; }
.g .statement-head .g-hint{ max-width: none; }
.g .statement-to{ margin: 0 0 var(--s3); }

/* Statement, continued: row labels at the size of the rows (Total, Received and Balance due were
   the headings' small size beside larger amounts); its tables fill the width on a phone rather than
   shrink to their content under the site-wide scrolling-table rule - a bill has no wide columns; and
   the ornament sits over the left-aligned title rather than the middle of the page. */
.g .statement tbody th{ font-size: var(--t-base); }
.g .statement table{ display: table; width: 100%; white-space: normal; }
.g .statement-head .g-fleur{ margin-left: 0; margin-right: 0; display: block; }

/* Manage-page cards: a textarea is inline and was not full width, so "Request a table" sat beside
   the dietary-notes box instead of under it. Full-width blocks, as the page's other fields are. */
.g .g-mb-card textarea{ display: block; width: 100%; }

/* ATELIERS PAGE (workshops presentation pass, 24 Sept).
   - Who Else Is Here: five cards in a grid of two or three left the last row part-filled from the left.
     A centred flex row with the same column counts.
   - A day in the atelier: the timeline beside a photograph of the work, rather than a third of the
     width beside nothing. The figure sits at the top of its column.
   - Taking a Session Outright: the enquiry button sat against the box above it. */
.g .g-finds{ display: flex; flex-wrap: wrap; justify-content: center; }
.g .g-finds > .g-find{ flex: 0 1 100%; min-width: 0; }
@media (min-width: 44rem){ .g .g-finds > .g-find{ flex-basis: calc((100% - var(--s6)) / 2); } }
@media (min-width: 68rem){ .g .g-finds > .g-find{ flex-basis: calc((100% - 2 * var(--s6)) / 3); } }
.g .g-day{ align-items: start; }
.g .g-day__fig{ margin: 0; }
.g .g-plate + .g-p{ margin-top: var(--s6); }

/* The day timeline needs its width: side by side with the photograph from 60rem, stacked below. */
@media (max-width: 60rem){ .g .g-day{ grid-template-columns: 1fr; } }

/* The currency control, inside a centred hero (the atelier page), sat at the left edge under a centred title. */
.g .g-hero .g-curbar{ justify-content: center; margin-left: auto; margin-right: auto; text-align: center; }

/* The atelier filter on a phone: five chips wrapped to five rows and pushed the dates ~200px down.
   One row that scrolls sideways, bleeding to the screen edge like the carousels. */
@media (max-width: 44rem){
  .g .g-datefilter{ display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); padding-bottom: 2px; }
  .g .g-datefilter::-webkit-scrollbar{ display: none; }
  .g .g-datefilter > .g-chip{ flex: none; white-space: nowrap; }
}

/* The stay takeaway (print_stay(), manage page): on screen its directions ran 736px wide. Reading measure. */
.g .g-takeaway__v{ max-width: var(--m-read); }

/* PRINTING THE STAY (manage page, body.g-print-stay). Printed blank: the general print rule hides every
   .g-panel with !important, and the takeaway card is one; and everything else was only made invisible,
   so it kept its height and printed as five more empty sheets. Now the card shows, in normal flow, and
   everything that neither is it, holds it, nor sits inside it is removed rather than hidden. */
@media print{
  body.g-print-stay .g-takeaway{ display: block !important; position: static !important; }
  body.g-print-stay > *:not(:has(.g-takeaway)),
  body.g-print-stay main *:not(:has(.g-takeaway)):not(.g-takeaway):not(.g-takeaway *){ display: none !important; }
}

/* Solid buttons in a hero without body.has-hero (the short heroes: Photoshoots, Private hire) took
   .g-hero .g-btn--solid - a gilt fill - with navy text: 1.9:1 on the call to act. White on the gilt. The
   full heroes keep their own, more specific .g.has-hero .g-hero__cta .g-btn--solid. */
.g .g-hero .g-btn--solid{ color: #fff; }

/* The bathrooms, as facts (Stay, beside the photograph): one column in the half-width text, and room
   between the facts and the paragraph under them. The room page's own note keeps the note style. */
.g .g-half__text .g-facts-list{ grid-template-columns: 1fr; margin: var(--s5) 0; }
.g .g-half__text .g-facts-list > div{ grid-template-columns: 9rem 1fr; }
.g .g-room__bath{ margin-top: var(--s3); }

/* Phone: two button rows on the event pages ended in a short, left-aligned line. The six light hours
   (Photoshoots) as two rows of three; the seven wedding months centred, as the site's partial rows are. */
@media (max-width: 44rem){
  .g .g-light__pick{ display: grid; grid-template-columns: repeat(3, 1fr); }
  .g .g-bloom__months{ justify-content: center; }
}

/* The atelier summary (_glance) has five facts now the untrue take-home one is gone: with the price, its lead,
   spanning two columns, every row is full - 2+3 on desktop, 1+2+2 on tablet. */
@media (min-width: 40rem){ .g .g-gl__i--lead{ grid-column: span 2; } }

/* ...and its note keeps a reading measure across the two columns. */
.g .g-gl__i--lead .g-gl__n{ max-width: 30rem; }

/* Two sand sections in a row merged into one long band: the earlier seam, .g-sec--sand + .g-sec--sand, is
   cancelled by main > :not(.g-sec--dark) + .g-sec { border-top: 0 }. Restored for that case only, as it was drawn. */
.g main > .g-sec--sand + .g-sec--sand,
.g main > .g-sec--sand + .g-wrap + .g-sec--sand,
.g main > .g-sec--sand + .g-wrap + .g-wrap + .g-sec--sand{ border-top: 1px solid rgba(115,86,45,.14); }
/* (a hidden divider wrapper between the two - display: none, no height - still breaks a plain + ) */

/* No stranded last word in body text either: the ledes were pretty-wrapped, the paragraphs, closes, quote bands and
   card text were not ("...before we book it.", "...a copy of it." alone on a line). Ignored where unsupported. */
.g main p, .g main li, .g main dd, .g main figcaption, .g main blockquote{ text-wrap: pretty; }

/* A NIGHT, OR THE FULL EXPERIENCE (_stay_or_workshop.html): the stay beside the workshop, the same on Stay,
   Workshops and the homepage. Two columns from tablet up; the workshop side carries the gilt rule. */
.g .g-sow__grid{ display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 46rem){ .g .g-sow__grid{ grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.g .g-sow__col{ display: flex; flex-direction: column; background: var(--sand, #ede5d6); border: 1px solid rgba(115,86,45,.18); padding: var(--s6) var(--s5); }
.g .g-sow__col--full{ background: #fff; border-top: 3px solid var(--gilt, #73562d); }
.g .g-sow__k{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-deep, #73562d); margin: 0 0 var(--s2); }
.g .g-sow__t{ font-size: 1.5rem; line-height: 1.2; margin: 0 0 var(--s4); color: var(--blue-deep, #14305f); }
.g .g-sow__list{ list-style: none; margin: 0 0 var(--s4); padding: 0; }
.g .g-sow__list li{ position: relative; padding-left: 1.4em; margin: 0 0 var(--s2); line-height: 1.5; color: var(--ink); }
.g .g-sow__list li::before{ content: ''; position: absolute; left: 0; top: .55em; width: .55em; height: .3em; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); color: var(--gilt, #73562d); }
.g .g-sow__foot{ margin: auto 0 var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(115,86,45,.18); font-size: 15px; color: var(--ink); }
.g .g-sow__cta{ margin: 0; }
.g .g-sow__col.is-here{ outline: 2px solid var(--gilt, #73562d); outline-offset: -2px; }

/* The full comparison (_stay_or_workshop.html, stay_vs_workshop): a table, the workshop column white with the gilt rule.
   Scrolls inside its own box if a phone is narrower than it. */
.g .g-sow__more{ margin: var(--s4) 0 0; text-align: center; }
.g .g-vs__wrap{ overflow-x: auto; margin-top: var(--s5); }
.g .g-vs{ width: 100%; border-collapse: collapse; font-size: 15px; }
.g .g-vs th, .g .g-vs td{ padding: var(--s3) var(--s3); border-bottom: 1px solid rgba(115,86,45,.16); text-align: left; vertical-align: top; line-height: 1.45; color: var(--ink); }
.g .g-vs tbody th{ font-weight: 400; width: 44%; }
.g .g-vs thead th{ vertical-align: bottom; border-bottom: 1px solid rgba(115,86,45,.35); }
.g .g-vs .g-vs__full{ background: #fff; }
.g .g-vs thead .g-vs__full{ border-top: 3px solid var(--gilt, #73562d); }
.g .g-vs__k{ display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #73562d; margin-bottom: 4px; }
.g .g-vs__t{ display: block; font-size: 1.15rem; line-height: 1.2; color: var(--blue-deep, #14305f); font-weight: 600; }
.g .g-vs__y{ display: inline-block; width: .6em; height: .32em; border-left: 2px solid #73562d; border-bottom: 2px solid #73562d; transform: rotate(-45deg) translateY(-.15em); margin-right: .35em; }
.g .g-vs__n{ color: rgba(28,28,28,.45); }
.g .g-vs__sum th, .g .g-vs__sum td{ font-weight: 600; }
.g .g-vs tfoot td{ border-bottom: 0; padding-top: var(--s4); }
.g .g-vh{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 44rem){ .g .g-vs{ font-size: 14px; } .g .g-vs th, .g .g-vs td{ padding: var(--s2) var(--s2); } .g .g-vs tfoot .g-btn{ padding-left: .8em; padding-right: .8em; } }

/* The comparison's heads are not the room table's: main thead th (sticky, uppercase, tracked, nowrap, sand) forced
   each column to ~500px and the table scrolled sideways at tablet and small-phone widths. Its own look instead. */
.g main .g-vs thead th{ position: static; white-space: normal; text-transform: none; letter-spacing: normal; font-family: inherit; font-size: inherit; font-weight: 400; color: inherit; background: transparent; border-bottom: 1px solid rgba(115,86,45,.35); padding: var(--s3); }
.g main .g-vs thead th.g-vs__full{ background: #fff; }
@media (max-width: 44rem){ .g main .g-vs thead th{ padding: var(--s2); } }
.g .g-sow__more a{ display: inline-flex; align-items: center; min-height: 44px; }

/* ...and on a phone main table { display: block; overflow-x: auto; white-space: nowrap } made it scroll sideways rather
   than wrap. This one is written to wrap. */
.g main table.g-vs{ display: table; white-space: normal; overflow: visible; }

@media (max-width: 44rem){ .g main table.g-vs tbody th{ position: static; min-width: 0; background: transparent; width: 40%; } }

/* One size for the labels and the values (main tbody td took --t-base; the row heads stayed at the table size). */
.g main .g-vs tbody th, .g main .g-vs tbody td{ font-size: inherit; }

/* Before you book a night (night_notice): a plain, firm note - a night is a room and breakfast; the full experience is
   the workshops. White, with the gilt rule on the left, at reading width. */
.g .g-night{ background: #fff; border: 1px solid rgba(115,86,45,.18); border-left: 3px solid var(--gilt, #73562d); padding: var(--s5) var(--s5); margin: var(--s5) 0 var(--s6); max-width: 44rem; }
.g .g-night__k{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #73562d; margin: 0 0 var(--s2); }
.g .g-night__t{ font-size: 1.35rem; line-height: 1.25; color: var(--blue-deep, #14305f); margin: 0 0 var(--s3); }
.g .g-night__p{ margin: 0 0 var(--s4); line-height: 1.55; color: var(--ink); }
.g .g-night__cta{ margin: 0; }

.g .g-night__p{ max-width: 36rem; }

/* The hero's second way in: the workshops, under the room search. */
.g .g-hero__alt{ margin: var(--s3) 0 0; }
.g .g-hero__alt a{ display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: 15px; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.g .g-hero__alt a:hover, .g .g-hero__alt a:focus-visible{ text-decoration-thickness: 2px; }

/* What a workshop includes beyond the house, on its card (transfers and excursions, or spent at the house). */
.g .g-wscard__inc{ margin: var(--s2) 0 0; font-size: 13px; letter-spacing: .04em; color: #73562d; }

/* In-text links: inline, not inline-block (1 Oct). The 11px padding above still widens the tap area - on an inline
   element it does not move the line - but as inline-block every paragraph with a link had one line pushed apart, and a
   link could not wrap ("terms and conditions" jumped to a line of its own on phones). Buttons keep their own rules. */
.g .g-p a:not(.g-btn){ display: inline; }

/* A button inside a paragraph is still a button: .g .g-p a (above) set its padding to 11px 0 and its display to
   inline-block, so "Before and after", "The restoration, year by year" and the like had their text against the border. */
.g .g-p a.g-btn{ display: inline-flex; padding: var(--s3) var(--s6); }

/* Tablet widths (40-64rem): blocks that sit in narrow columns on desktop ran the full 720px column here, about 100
   characters a line - the Getting here details, the animals, the cost calculator note, Restoration's room note.
   Capped at a reading measure. */
@media (min-width: 40rem) and (max-width: 64rem){
  .g main dd, .g main .g-anim__i, .g .g-wk__n, .g .g-rex__note, .g main .g-wrap > p:not([class]){ max-width: 68ch; }
}

/* Long documents (the terms): a slightly wider column than the reading measure, about seventy characters a line. */
.g .g-wrap--doc{ max-width: 48rem; }

/* 1 Oct: "By booking, you agree to the terms" - one quiet line, as wide as the button it sits over. */
.g .g-terms-line{ max-width: none; font-size: .85rem; line-height: 1.5; margin: 0 0 var(--s3); }
.g .g-terms-line a{ display: inline; padding: 0; }

/* =====================================================================
   1 Oct - LE DÉROULÉ: a workshop's days, as a journey down a gilt rule.
   Roman numerals in a leaf-gilt ring, the French day and title with the
   English beside it, and matin / après-midi / soir beneath.
   ===================================================================== */
.g .g-journey{ list-style: none; margin: var(--s7) 0 0; padding: 0; position: relative; max-width: 54rem; }
.g .g-journey::before{ content: ""; position: absolute; left: 3.25rem; top: 1.6rem; bottom: 2.5rem; width: 1px; background: var(--gilt-leaf); opacity: .7; }
.g .g-journey__d{ display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s5); padding: 0 0 var(--s7); position: relative; }
.g .g-journey__d:last-child{ padding-bottom: 0; }
.g .g-journey__n{ text-align: center; position: relative; z-index: 1; }
.g .g-journey__r{ display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--gilt-leaf); border-radius: 50%; background: var(--sand); font-family: var(--display); font-size: 22px; letter-spacing: .02em; color: var(--blue-deep); box-shadow: 0 0 0 6px var(--sand); }
.g .g-sec--sand .g-journey__r{ background: var(--sand-2); box-shadow: 0 0 0 6px var(--sand-2); }
.g .g-journey__l{ display: block; margin-top: var(--s3); font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); line-height: 1.4; }
.g .g-journey__t{ font-family: var(--display); font-size: var(--t-h3); font-weight: 400; line-height: 1.2; margin: .55rem 0 var(--s3); color: var(--blue-deep); }
.g .g-journey__t em{ font-style: italic; color: var(--stone); font-size: .72em; margin-left: .45em; white-space: nowrap; }
.g .g-journey__p{ font-family: var(--serif); font-size: var(--t-base); line-height: 1.7; max-width: var(--m-read); margin: 0; color: var(--ink); }
.g .g-journey__m{ list-style: none; padding: var(--s4) 0 0; margin: var(--s4) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3) var(--s5); max-width: var(--m-wide); }
.g .g-journey__m li{ font-family: var(--serif); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.g .g-journey__m b{ display: block; font-family: var(--ui); font-weight: 600; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); margin-bottom: .2rem; }
.g .g-journey__note{ margin: var(--s7) 0 0; padding-left: calc(6.5rem + var(--s5)); font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: var(--stone); max-width: 54rem; }
@media (max-width: 40rem){
  .g .g-journey::before{ left: 1.6rem; }
  .g .g-journey__d{ grid-template-columns: 3.2rem 1fr; gap: var(--s4); padding-bottom: var(--s6); }
  .g .g-journey__r{ width: 2.6rem; height: 2.6rem; font-size: 18px; }
  .g .g-journey__l{ display: none; }
  .g .g-journey__t em{ display: block; margin: .2rem 0 0; white-space: normal; }
  .g .g-journey__note{ padding-left: 0; }
}

/* LES TROIS FILS - the three threads of every workshop, as three gilt-ruled columns. */
.g .g-threads{ display: grid; gap: var(--s6); margin: var(--s7) 0 0; padding: 0; list-style: none; }
@media (min-width: 52rem){ .g .g-threads{ grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.g .g-threads__i{ border-top: 1px solid var(--gilt-leaf); padding-top: var(--s5); }
.g .g-threads__fr{ font-family: var(--display); font-style: italic; font-size: var(--t-h3); color: var(--blue-deep); margin: 0; line-height: 1.15; }
.g .g-threads__en{ font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); margin: var(--s2) 0 var(--s4); }
.g .g-threads__p{ font-family: var(--serif); font-size: var(--t-base); line-height: 1.7; margin: 0; color: var(--ink); }
/* the day's column may shrink below its content (a long word or the moments row pushed it off a phone) */
.g .g-journey__b{ min-width: 0; }
.g .g-journey__m{ grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
/* the day label sits on the gilt rule: give it the ground, so the line breaks around it */
.g .g-journey__l{ position: relative; background: var(--sand); padding: .2rem 0; }
.g .g-sec--sand .g-journey__l{ background: var(--sand-2); }
@media (max-width: 40rem){ .g .g-journey__m{ grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); } }
/* 1 Oct - the homepage's second way in: "Or come for [The Full Experience]", an invitation, not a footnote. */
.g .g-hero__alt{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s5) 0 0;
  font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1vw + 13px, 20px); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.g .g-hero__alt a{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s5); border: 1px solid var(--gilt-on-dark, #C6A66E);
  background: rgba(20,48,95,.38); color: #fff; font-family: var(--ui); font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; text-shadow: none; transition: background .2s, color .2s; }
.g .g-hero__alt a:hover, .g .g-hero__alt a:focus-visible{ background: var(--gilt-on-dark, #C6A66E); color: var(--blue-deep); }
.g .g-hero__alt a.g-hero__altbtn, .g .g-hero__alt a.g-hero__altbtn:hover, .g .g-hero__alt a.g-hero__altbtn:focus-visible{ text-decoration: none !important; border-bottom: 1px solid var(--gilt-on-dark, #C6A66E); background-image: none; }
/* On a phone the eyebrow breaks into two clean lines - the experience, then the place - with no dot left at a line's end. */
@media (max-width: 40rem){ .g .g-hero__eyeplace{ display: block; margin-top: .35em; } .g .g-hero__eyeplace > span{ display: none; } }
/* the place half of the eyebrow is the same type as the rest of it - an older eyebrow-span style was catching it */
.g .g-hero__eyebrow .g-hero__eyeplace, .g .g-hero__eyebrow .g-hero__eyeplace > span{ font: inherit; letter-spacing: inherit; color: inherit; text-transform: inherit; opacity: 1; }
.g .g-hero .g-hero__eyebrow .g-hero__eyeplace{ font-size: inherit !important; font-weight: inherit !important; }

/* =====================================================================
   2 Oct - LA PLEINE EXPÉRIENCE: straight under the homepage calendar.
   The château in full - its history, the workshops, and the next dates
   (from the live sessions) - on navy, between two gilt hairlines.
   ===================================================================== */
.g .g-full{ background: var(--blue-deep); color: #fff; padding: clamp(52px, 7vw, 104px) 0; border-top: 1px solid var(--gilt-leaf); border-bottom: 1px solid var(--gilt-leaf); }
.g .g-full__in{ display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 60rem){ .g .g-full__in{ grid-template-columns: 1.1fr .9fr; gap: clamp(48px, 6vw, 104px); } }
.g .g-full__fr{ font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.2; color: var(--gilt-on-dark, #C6A66E); margin: 0; }
.g .g-full__fren{ display: block; margin-top: .35rem; font-family: var(--ui); font-style: normal; font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.g .g-full__h{ font-family: var(--display); font-weight: 400; font-size: clamp(34px, 2.4vw + 20px, 54px); line-height: 1.06; color: #fff; margin: var(--s4) 0 var(--s5); }
.g .g-full__p{ font-family: var(--serif); font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.7; color: rgba(255,255,255,.9); max-width: 38rem; margin: 0; }
.g .g-full__btns{ margin: var(--s6) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }
.g .g-full .g-full__cta{ display: inline-flex; align-items: center; min-height: 50px; padding: 0 var(--s6); background: var(--gilt-on-dark, #C6A66E); border: 1px solid var(--gilt-on-dark, #C6A66E);
  color: var(--blue-deep); font-family: var(--ui); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none !important; transition: background .2s, color .2s; }
.g .g-full .g-full__cta:hover, .g .g-full .g-full__cta:focus-visible{ background: transparent; color: #fff; }
.g .g-full .g-full__link{ color: #fff; font-family: var(--serif); font-style: italic; font-size: 18px; text-decoration: underline; text-decoration-color: var(--gilt-on-dark, #C6A66E); text-underline-offset: 5px; }
.g .g-full__k{ font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-on-dark, #C6A66E); margin: 0 0 var(--s3); }
.g .g-full__list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(198,166,110,.5); }
.g .g-full__row{ border-bottom: 1px solid rgba(198,166,110,.5); }
.g .g-full .g-full__row a{ display: grid; grid-template-columns: 1fr auto; column-gap: var(--s4); row-gap: .2rem; padding: var(--s4) 0; color: #fff; text-decoration: none !important; }
.g .g-full__t{ grid-column: 1; font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.g .g-full__d{ grid-column: 1; font-family: var(--display); font-size: clamp(22px, 1vw + 16px, 27px); line-height: 1.2; color: #fff; transition: color .2s; }
.g .g-full__m{ grid-column: 1; font-family: var(--serif); font-size: 15px; color: rgba(255,255,255,.78); }
.g .g-full__go{ grid-column: 2; grid-row: 1 / span 3; align-self: center; font-family: var(--display); font-size: 26px; color: var(--gilt-on-dark, #C6A66E); transition: transform .2s; }
.g .g-full .g-full__row a:hover .g-full__d, .g .g-full .g-full__row a:focus-visible .g-full__d{ color: var(--gilt-on-dark, #C6A66E); }
.g .g-full .g-full__row a:hover .g-full__go{ transform: translateX(4px); }
.g .g-full__note{ margin: var(--s4) 0 0; font-family: var(--serif); font-style: italic; font-size: 15px; color: rgba(255,255,255,.78); }
.g .g-full__threads{ list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(198,166,110,.5); }
.g .g-full__threads li{ padding: var(--s4) 0; border-bottom: 1px solid rgba(198,166,110,.5); font-family: var(--display); font-style: italic; font-size: 26px; color: #fff; }
.g .g-full__threads li span{ display: block; font-family: var(--ui); font-style: normal; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-top: .25rem; }
/* the band's dates and arrows: its own sizes win over the general link and span rules */
.g .g-full .g-full__row a .g-full__d{ font-family: var(--display); font-size: clamp(22px, 1vw + 16px, 27px); line-height: 1.2; }
.g .g-full .g-full__row a .g-full__go{ font-family: var(--display); font-size: 26px; line-height: 1; }
.g .g-full .g-full__row a .g-full__t{ font-size: var(--t-xs); }
.g .g-full .g-full__row a .g-full__m{ font-size: 15px; }
/* main span:not(...)x10 sets every span to small text and outweighs ordinary rules - the band's spans keep their own sizes */
.g .g-full .g-full__d{ font-size: clamp(22px, 1vw + 16px, 27px) !important; }
.g .g-full .g-full__go{ font-size: 26px !important; }
.g .g-full .g-full__t, .g .g-full .g-full__fren{ font-size: var(--t-xs) !important; }
.g .g-full .g-full__m{ font-size: 15px !important; }
.g .g-full .g-full__threads li span{ font-size: var(--t-xs) !important; }

/* =====================================================================
   2 Oct - LE DÉROULÉ, illustrated. Each day a card with its vignette in the
   margin; matin / après-midi / soir with their icons; a faint château behind
   the heading and a laurel by the closing note.
   ===================================================================== */
.g .g-illus{ display: block; width: 100%; height: auto; }
.g .g-micon{ display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: .4rem; color: var(--gilt); }
.g .g-journey-sec{ position: relative; overflow: hidden; }
.g .g-journey-sec > .g-wrap{ position: relative; }
.g .g-journey-sec__art{ position: absolute; top: -12px; right: 0; width: min(34vw, 380px); color: var(--gilt-leaf); opacity: .22; pointer-events: none; }
.g .g-journey{ max-width: 64rem; }
.g .g-journey::before{ left: 3.25rem; }
.g .g-journey__card{ position: relative; display: grid; grid-template-columns: 1fr 9rem; gap: var(--s5); align-items: center;
  background: #FBF8F1; border: 1px solid var(--line); border-top: 2px solid var(--gilt-leaf); padding: var(--s5) var(--s6);
  box-shadow: 0 1px 0 rgba(115,86,45,.05), 0 14px 32px -22px rgba(20,48,95,.35); }
.g .g-journey__b{ min-width: 0; }
.g .g-journey__t{ margin-top: 0; }
.g .g-journey__ill{ color: var(--gilt); opacity: .95; }
.g .g-journey__ill svg{ width: 100%; height: auto; }
.g .g-journey__m{ max-width: none; }
.g .g-journey__m b{ display: flex; align-items: center; }
.g .g-journey__end{ display: flex; align-items: center; gap: var(--s5); margin: var(--s7) 0 0; padding-left: calc(6.5rem + var(--s5)); max-width: 64rem; }
.g .g-journey__laurel{ flex: none; width: 3.5rem; color: var(--gilt-leaf); }
.g .g-journey__end .g-journey__note{ margin: 0; padding: 0; }
@media (max-width: 40rem){
  .g .g-journey-sec__art{ width: 46vw; opacity: .16; top: 0; }
  .g .g-journey__card{ grid-template-columns: 1fr; padding: var(--s4); }
  .g .g-journey__ill{ position: absolute; top: var(--s3); right: var(--s3); width: 3.4rem; }
  .g .g-journey__t{ padding-right: 3.6rem; }
  .g .g-journey__end{ padding-left: 0; }
  .g .g-journey__laurel{ width: 2.6rem; }
}
/* each day is an <li>, and "main li" caps list items at the reading width - the days use the itinerary's full width */
.g .g-journey > .g-journey__d{ max-width: none; }

/* 2 Oct - vignettes around the site: one drawing at the head of a section, in the gilt. */
.g .g-vignette{ width: 88px; color: var(--gilt); margin: 0 0 var(--s4); }
.g .g-sec--navy .g-vignette, .g .g-full .g-vignette{ color: var(--gilt-on-dark, #C6A66E); }
.g .g-threads__ill{ width: 76px; color: var(--gilt); margin: 0 0 var(--s4); }
@media (max-width: 40rem){ .g .g-vignette{ width: 72px; } .g .g-threads__ill{ width: 64px; } }
.g .g-journey__end .g-journey__note{ max-width: 40rem; }
.g .g-journey__end .g-journey__note{ max-width: 34rem; }

/* 2 Oct - "Le temps libre" (3, 5, 7 nights) and Noël's "En option": a framed card in the itinerary, drawing at left. */
.g .g-journey__free{ display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s5); align-items: center; max-width: 64rem; margin: var(--s6) 0 0;
  padding: var(--s5) var(--s6); background: #FBF8F1; border: 1px solid var(--gilt-leaf); outline: 1px solid var(--gilt-leaf); outline-offset: -6px; }
.g .g-journey__free-ill{ color: var(--gilt); }
.g .g-journey__free-fr{ margin: 0 0 var(--s2); font-family: var(--display); font-style: italic; font-size: var(--t-h3); line-height: 1.2; color: var(--blue-deep); }
.g .g-journey__free-fr span{ margin-left: .6em; font-family: var(--ui); font-style: normal; font-size: var(--t-xs) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); }
.g .g-journey__free-p{ margin: 0; font-family: var(--serif); font-size: var(--t-base); line-height: 1.7; color: var(--ink); max-width: 46rem; }
.g .g-journey__opt{ margin-top: var(--s7); }
@media (max-width: 40rem){ .g .g-journey__free{ grid-template-columns: 3.6rem 1fr; gap: var(--s4); padding: var(--s4); } .g .g-journey__free-fr span{ display: block; margin: .2rem 0 0; } }

/* 2 Oct - LES ÉQUIPEMENTS: the facilities as tiles, each with its gilt drawing. */
.g .g-facil{ list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem){ .g .g-facil{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g .g-facil > .g-facil__i{ max-width: none; text-align: center; padding: var(--s5) var(--s3) var(--s4); border-top: 1px solid var(--gilt-leaf); }
.g .g-facil__ill{ width: 72px; margin: 0 auto var(--s3); color: var(--gilt); }
.g .g-facil__fr{ margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(19px, .6vw + 15px, 23px); line-height: 1.2; color: var(--blue-deep); }
.g .g-facil__en{ margin: .3rem 0 var(--s2); font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); }
.g .g-facil__d{ margin: 0 auto; max-width: 15rem; font-family: var(--serif); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.g .g-facil__note{ margin: var(--s7) auto 0; max-width: 46rem; text-align: center; font-family: var(--serif); font-style: italic; font-size: var(--t-small); line-height: 1.6; color: var(--stone); }
@media (max-width: 40rem){ .g .g-facil__ill{ width: 56px; } }
.g .g-facil-sec .g-facil__note{ margin-left: auto !important; margin-right: auto !important; }

/* =====================================================================
   2 Oct - ORNAMENT. Flourished gilt corners around the site's boxes (one
   background layer per corner, so no markup changes and the box keeps its
   own colour), and the facilities in an ornamental frame.
   ===================================================================== */
.g .g-journey__card, .g .g-journey__free, .g .g-wscard, .g .g-three__i, .g .g-mb-card, .g .g-conf, .g .g-sit,
.g .g-sow__grid > *, .g .g-facil > .g-facil__i{
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg %3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(34 0) scale(-1 1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 34) scale(1 -1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
  background-size: 30px 30px; }
.g .g-facil > .g-facil__i{ background-size: 18px 18px; background-position: 5px 5px, calc(100% - 5px) 5px, 5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px); }
.g .g-journey__free{ background-color: #FBF8F1; }

/* the facilities: an ornamental frame, the title set into its top rule like a cartouche */
.g .g-facil-frame{ position: relative; margin: var(--s7) 0 0; padding: clamp(36px, 5vw, 64px) clamp(16px, 4vw, 56px) clamp(28px, 4vw, 48px);
  border: 1px solid var(--gilt-leaf); outline: 1px solid var(--gilt-leaf); outline-offset: -8px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg %3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(34 0) scale(-1 1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 34) scale(1 -1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 48px 48px;
  background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px); }
.g .g-facil-frame__cart{ position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .9rem;
  padding: .35rem 1.4rem; background: var(--sand); white-space: nowrap; }
.g .g-facil-frame__cart svg{ width: 26px; height: 26px; color: var(--gilt-leaf); flex: none; }
.g .g-facil-frame__cart b{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(20px, .8vw + 16px, 26px); color: var(--blue-deep); }
.g .g-facil-frame .g-facil{ margin-top: 0; gap: var(--s5); }
@media (min-width: 48rem){ .g .g-facil-frame .g-facil{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 64rem){ .g .g-facil-frame .g-facil{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.g .g-facil-frame .g-facil > .g-facil__i{ border: 1px solid var(--line); border-top: 1px solid var(--line); background-color: #FBF8F1; padding: var(--s5) var(--s3) var(--s5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.g .g-facil-frame .g-facil > .g-facil__i:hover{ transform: translateY(-3px); border-color: var(--gilt-leaf); box-shadow: 0 16px 30px -22px rgba(20,48,95,.45); }
.g .g-facil-frame .g-facil__ill{ width: 78px; }
.g .g-facil-frame .g-facil__note{ margin-top: var(--s6); }
@media (max-width: 40rem){ .g .g-facil-frame{ padding: 40px 12px 24px; outline-offset: -6px; background-size: 30px 30px; } .g .g-facil-frame .g-facil__ill{ width: 58px; } .g .g-facil-frame__cart{ padding: .3rem .8rem; } }
.g .g-sec--sand .g-facil-frame__cart{ background: var(--sand-2); }
/* the cartouche's laurels lie on their sides, framing the title */
.g .g-facil-frame__cart svg{ width: 34px; height: 34px; }
.g .g-facil-frame__cart svg:first-child{ transform: rotate(-90deg); }
.g .g-facil-frame__cart svg:last-child{ transform: rotate(90deg); }

/* =====================================================================
   2 Oct - L'ESSENTIEL, rebuilt: three even facts with drawings, the
   activities as illustrated tiles, the day in three panels, buttons in line.
   On the existing navy .g-gl band.
   ===================================================================== */
.g .g-gl2 .g-gl__in{ max-width: 76rem; }
.g .g-gl2__fr{ margin: 0; font-family: var(--display); font-style: italic; font-size: 22px; color: var(--gilt-on-dark, #C6A66E); }
.g .g-gl2__fr span, .g .g-gl2__sub span{ display: block; margin-top: .3rem; font-family: var(--ui); font-style: normal; font-size: var(--t-xs) !important; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.g .g-gl2__h{ margin: var(--s4) 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 2.2vw + 18px, 50px); line-height: 1.08; color: #fff; }
.g .g-gl2__facts{ display: grid; gap: var(--s6); margin: var(--s7) 0 0; }
@media (min-width: 52rem){ .g .g-gl2__facts{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s6) clamp(28px, 3vw, 56px); } }
.g .g-gl2__f{ border-top: 1px solid var(--gilt-on-dark, #C6A66E); padding-top: var(--s5); }
.g .g-gl2__fill{ width: 64px; color: var(--gilt-on-dark, #C6A66E); margin-bottom: var(--s3); }
.g .g-gl2__k{ margin: 0; font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-on-dark, #C6A66E); }
.g .g-gl2__v{ margin: var(--s2) 0 var(--s3); font-family: var(--display); font-size: clamp(24px, 1vw + 18px, 30px); line-height: 1.15; color: #fff; }
.g .g-gl2__n{ margin: 0; font-family: var(--serif); font-size: var(--t-base); line-height: 1.65; color: rgba(255,255,255,.86); max-width: 26rem; }
.g .g-gl2__acts{ margin: clamp(48px, 6vw, 80px) 0 0; }
.g .g-gl2__sub{ margin: 0 0 var(--s5); font-family: var(--display); font-style: italic; font-size: clamp(22px, .8vw + 18px, 28px); color: #fff; }
.g .g-gl2__grid{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 52rem){ .g .g-gl2__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.g .g-gl2__grid > .g-gl2__a1{ max-width: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s5) var(--s3);
  border: 1px solid rgba(198,166,110,.45); background-color: rgba(255,255,255,.03);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23C6A66E' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23C6A66E' stroke-width='1.1' stroke-linecap='round'%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px 18px; background-position: 5px 5px, calc(100% - 5px) calc(100% - 5px); transition: border-color .25s, background-color .25s; }
.g .g-gl2__grid > .g-gl2__a1:hover{ border-color: var(--gilt-on-dark, #C6A66E); background-color: rgba(255,255,255,.06); }
.g .g-gl2__ill{ display: block; width: 64px; color: var(--gilt-on-dark, #C6A66E); }
.g .g-gl2 .g-gl2__lbl{ font-family: var(--serif); font-size: var(--t-base) !important; line-height: 1.4; color: #fff; }
.g .g-gl2__note{ margin: var(--s4) 0 0; font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: rgba(255,255,255,.8); }
.g .g-gl2__day{ margin: clamp(48px, 6vw, 80px) 0 0; }
.g .g-gl2__ol{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 52rem){ .g .g-gl2__ol{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.g .g-gl2__ol > li{ max-width: none; padding: var(--s5); border-top: 1px solid var(--gilt-on-dark, #C6A66E); background: rgba(255,255,255,.04); }
.g .g-gl2__ol b{ display: flex; align-items: center; margin-bottom: var(--s2); font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-on-dark, #C6A66E); }
.g .g-gl2__ol .g-micon{ color: var(--gilt-on-dark, #C6A66E); width: 18px; height: 18px; }
.g .g-gl2 .g-gl2__ol span{ display: block; font-family: var(--serif); font-size: var(--t-base) !important; line-height: 1.6; color: rgba(255,255,255,.92); }
.g .g-gl2__price{ margin: clamp(40px, 5vw, 64px) 0 0; font-family: var(--serif); font-style: italic; font-size: var(--t-base); color: rgba(255,255,255,.86); }
.g .g-gl2__btns{ margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.g .g-gl2 .g-gl2__cta, .g .g-gl2 .g-gl2__ghost{ display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin: 0; padding: 0 var(--s6);
  font-family: var(--ui); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none !important; transition: background .2s, color .2s; }
.g .g-gl2 .g-gl2__cta{ background: var(--gilt-on-dark, #C6A66E); border: 1px solid var(--gilt-on-dark, #C6A66E); color: var(--blue-deep); }
.g .g-gl2 .g-gl2__cta:hover{ background: transparent; color: #fff; }
.g .g-gl2 .g-gl2__ghost{ background: transparent; border: 1px solid rgba(255,255,255,.7); color: #fff; }
.g .g-gl2 .g-gl2__ghost:hover{ border-color: var(--gilt-on-dark, #C6A66E); color: var(--gilt-on-dark, #C6A66E); }
@media (max-width: 40rem){ .g .g-gl2__ill{ width: 52px; } .g .g-gl2__btns a{ flex: 1 1 100%; } }

/* =====================================================================
   2 Oct - ONE LEFT EDGE, ONE RHYTHM (owner: "still a lot of spacing issues").
   1. Text-only sections were squeezed to the reading width AND centred (the
      ".g-wrap:has(> p.g-p):not(...)" rule), so 33 sections sat in a column
      in the middle while the rest started at the left. Every section now
      starts at the same edge; text keeps its measure.
   2. Sections after the first had 24px above the heading and 40-84px below.
      Now the same generous space above and below.
   3. A text-only section with a drawing puts it in the right-hand column, in
      a gilt medallion, filling the space the alignment opens.
   ===================================================================== */
.g .g-sec .g-wrap:has(> p.g-p), .g .g-sec .g-wrap--narrow{ max-width: min(var(--wrap, 76rem), 100vw) !important; margin-left: auto; margin-right: auto; }
.g .g-sec .g-wrap--narrow > :not(.g-vignette){ max-width: 46rem; }
.g .g-sec .g-wrap > p.g-p{ max-width: 46rem; }
.g main > .g-sec, .g main > .g-sec ~ .g-sec{ padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.g .g-gl2 .g-gl__in{ max-width: min(var(--wrap, 76rem), 100vw); margin-left: auto; margin-right: auto; padding-left: var(--s5); padding-right: var(--s5); box-sizing: border-box; }
@media (min-width: 64rem){
  .g .g-sec .g-wrap:has(> .g-vignette):not(:has(> ul, > ol, > dl, > form, > table, > div:not(.g-vignette))){
    display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 120px); align-items: start; }
  .g .g-sec .g-wrap:has(> .g-vignette):not(:has(> ul, > ol, > dl, > form, > table, > div:not(.g-vignette))) > *{ grid-column: 1; }
  .g .g-sec .g-wrap:has(> .g-vignette):not(:has(> ul, > ol, > dl, > form, > table, > div:not(.g-vignette))) > .g-vignette{
    grid-column: 2; grid-row: 1 / span 40; align-self: center; justify-self: center; box-sizing: border-box;
    width: clamp(190px, 16vw, 250px); aspect-ratio: 1; margin: 0; padding: clamp(34px, 3vw, 48px); display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--gilt-leaf); border-radius: 50%; outline: 1px solid var(--gilt-leaf); outline-offset: 7px; background: #FBF8F1; }
  .g .g-sec .g-wrap:has(> .g-vignette):not(:has(> ul, > ol, > dl, > form, > table, > div:not(.g-vignette))) > .g-vignette svg{ width: 100%; height: auto; }
}
.g main > .g-sec, .g main > .g-sec ~ .g-sec{ padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px); }

/* 2 Oct - CHOOSE YOUR EXPERIENCE: four illustrated cards in one row (it was three text columns with "Four nights"
   stranded on a second row). Ordered by length; gilt corners; each links to the dates. */
.g .g-choose{ list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 40rem){ .g .g-choose{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem){ .g .g-choose{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.g .g-choose > .g-choose__i{ max-width: none; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s6) var(--s5) var(--s5);
  background-color: #FBF8F1; border: 1px solid var(--line); border-top: 2px solid var(--gilt-leaf);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg %3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(34 0) scale(-1 1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 34) scale(1 -1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23B08D57' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cpath d='M2 32V10q0-8 8-8h22'/%3E%3Cpath d='M7 32V13q0-6 6-6h19' opacity='.5'/%3E%3Cpath d='M12 12q5 .5 6 6q-5-.5-6-6z'/%3E%3Ccircle cx='22' cy='12' r='1.1'/%3E%3Ccircle cx='12' cy='22' r='1.1'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 22px 22px;
  background-position: 6px 8px, calc(100% - 6px) 8px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
  box-shadow: 0 14px 30px -24px rgba(20,48,95,.4); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.g .g-choose > .g-choose__i:hover{ transform: translateY(-3px); border-color: var(--gilt-leaf); box-shadow: 0 20px 36px -24px rgba(20,48,95,.5); }
.g .g-choose__ill{ width: 92px; color: var(--gilt); margin-bottom: var(--s4); }
.g .g-choose__n{ margin: 0; font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gilt); }
.g .g-choose__t{ margin: var(--s2) 0 var(--s3); font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(24px, .8vw + 18px, 30px); line-height: 1.15; color: var(--blue-deep); }
.g .g-choose__d{ margin: 0 0 var(--s5); font-family: var(--serif); font-size: var(--t-base); line-height: 1.6; color: var(--ink-2); max-width: 17rem; flex: 1; }
.g .g-choose .g-choose__a{ font-family: var(--ui); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); text-decoration: none !important;
  border-bottom: 1px solid var(--gilt-leaf); padding-bottom: 3px; }
.g .g-choose .g-choose__a:hover{ color: var(--gilt); }

/* 2 Oct - "A Small Group, the Whole House": Who Comes and The House to Yourselves side by side (they were two
   look-alike sections in a row, with a third between them). */
.g .g-pair{ display: grid; gap: var(--s6); margin: var(--s6) 0 0; }
@media (min-width: 52rem){ .g .g-pair{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(32px, 4vw, 72px); } }
.g .g-pair__i{ display: grid; grid-template-columns: 88px 1fr; column-gap: var(--s5); align-items: start; padding-top: var(--s5); border-top: 1px solid var(--gilt-leaf); }
.g .g-pair__ill{ grid-row: 1 / span 2; width: 88px; aspect-ratio: 1; box-sizing: border-box; padding: 16px; border: 1px solid var(--gilt-leaf); border-radius: 50%; outline: 1px solid var(--gilt-leaf); outline-offset: 4px; color: var(--gilt); background: #FBF8F1; }
.g .g-pair__t{ margin: 0 0 var(--s2); font-family: var(--display); font-weight: 400; font-size: clamp(22px, .8vw + 17px, 28px); line-height: 1.2; color: var(--blue-deep); }
.g .g-pair__p{ margin: 0; font-family: var(--serif); font-size: var(--t-base); line-height: 1.65; color: var(--ink); max-width: 32rem; }
@media (max-width: 40rem){ .g .g-pair__i{ grid-template-columns: 64px 1fr; } .g .g-pair__ill{ width: 64px; padding: 11px; } }

/* =====================================================================
   2 Oct - TIDYING (owner: "a lot of the spacing/design is off").
   1. Empty containers (a wrapper left after a cut) took 30-80px of blank space on nine pages - hidden.
   2. A section holding a single introductory paragraph read as forgotten - it now reads as a deliberate statement:
      larger italic display type, centred under a small gilt flourish.
   ===================================================================== */
.g main > .g-wrap:not(:has(*)){ display: none; }
.g main > .g-sec:has(> .g-wrap > p.g-lede-first:only-child){ text-align: center; }
.g main > .g-sec:has(> .g-wrap > p.g-lede-first:only-child) .g-wrap{ display: flex; flex-direction: column; align-items: center; }
.g main > .g-sec:has(> .g-wrap > p.g-lede-first:only-child) .g-wrap::before{ content: ""; display: block; width: 120px; height: 18px; margin: 0 auto var(--s4);
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' fill='none' stroke='%23B08D57' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M4 9h40M76 9h40'/%3E%3Cpath d='M60 3l6 6-6 6-6-6z'/%3E%3Ccircle cx='48' cy='9' r='1.4'/%3E%3Ccircle cx='72' cy='9' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat; }
.g main > .g-sec:has(> .g-wrap > p.g-lede-first:only-child) p.g-lede-first{ max-width: 40rem; margin: 0 auto; font-family: var(--display); font-style: italic;
  font-size: clamp(22px, 1vw + 17px, 30px); line-height: 1.45; color: var(--blue-deep); }
.g main > .g-sec:has(> .g-wrap > p.g-lede-first:only-child) p.g-lede-first::first-letter{ float: none; font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: inherit; font-family: inherit; }
/* a small divider directly above the motto doubles its own rule - one ornament, not two */
.g main > .g-mark__wrap:has(+ .g-wrap > .g-devise){ display: none; }
/* the live-weather fallback line showed huge and unstyled against the screen edge */
.g main > .g-wx{ max-width: min(var(--wrap, 76rem), 100vw); margin: 0 auto; padding: var(--s4) var(--s5); box-sizing: border-box; }
.g .g-wx__fallback{ margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--t-small) !important; line-height: 1.5; color: var(--stone); }
/* workshop page: a stray hairline ornament under the hero */
.g main > .g-wrap:has(> .g-hairs){ display: none; }
/* a single date reads as a wide card on the left edge, not a small card in the middle */
@media (min-width: 48rem){
  .g .g-sittings-grid:has(> .g-sit:only-child){ display: block; }
  .g .g-sittings-grid > .g-sit:only-child{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 48rem; margin: 0; }
  .g .g-sittings-grid > .g-sit:only-child .g-sit__img{ height: 100%; min-height: 16rem; aspect-ratio: auto; object-fit: cover; }
  .g .g-sittings-grid > .g-sit:only-child .g-sit__b{ display: flex; flex-direction: column; justify-content: center; padding: var(--s6); }
}
/* a divider next to a photo strip is one ornament too many */
.g main > .g-mark__wrap:has(+ .g-band), .g main > .g-band + .g-mark__wrap{ display: none; }
/* two ornaments side by side: keep the more meaningful one (the motto over the monogram, the monogram over a divider) */
.g main > .g-mark__wrap:has(+ .g-mono__wrap), .g main > .g-mark__wrap + .g-mark__wrap{ display: none; }
.g main > .g-mono__wrap:has(+ .g-wrap > .g-devise), .g main > .g-wrap:has(> .g-devise) + .g-mono__wrap{ display: none; }

/* 2 Oct - ADD TO YOUR STAY as illustrated cards (it was two plain lines). From admin's extras when the route passes them. */
.g .g-addon{ list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 40rem){ .g .g-addon{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem){ .g .g-addon{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.g .g-addon > .g-addon__i{ max-width: none; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s6) var(--s5) var(--s5);
  background-color: #FBF8F1; border: 1px solid var(--line); border-top: 2px solid var(--gilt-leaf); box-shadow: 0 14px 30px -24px rgba(20,48,95,.4); }
.g .g-addon__ill{ width: 80px; color: var(--gilt); margin-bottom: var(--s4); }
.g .g-addon__t{ margin: 0 0 var(--s3); font-family: var(--display); font-weight: 400; font-size: clamp(21px, .6vw + 17px, 26px); line-height: 1.2; color: var(--blue-deep); }
.g .g-addon__d{ margin: 0 0 var(--s4); font-family: var(--serif); font-size: var(--t-base); line-height: 1.6; color: var(--ink-2); max-width: 17rem; flex: 1; }
.g .g-addon__p{ margin: 0; font-family: var(--ui); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); }
.g .g-addon .g-addon__a{ font-family: var(--ui); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); text-decoration: none !important; border-bottom: 1px solid var(--gilt-leaf); padding-bottom: 3px; }
/* the comparison table on a phone: each row's label across the full width, the two answers side by side beneath it */
@media (max-width: 40rem){
  .g table.g-vs, .g table.g-vs thead, .g table.g-vs tbody, .g table.g-vs tfoot{ display: block; width: 100%; }
  .g table.g-vs tr{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .g table.g-vs thead td:first-child, .g table.g-vs tfoot td:first-child{ display: none; }
  .g table.g-vs tbody th{ grid-column: 1 / -1; padding: var(--s3) var(--s3) 2px; border-bottom: 0; font-weight: 600; }
  .g table.g-vs tbody td{ padding: 2px var(--s3) var(--s3); }
  .g table.g-vs tfoot td{ padding: var(--s3); }
  .g table.g-vs tfoot .g-btn{ display: flex; width: 100%; justify-content: center; white-space: nowrap; }
}
@media (max-width: 40rem){ .g table.g-vs tbody th, .g table.g-vs thead th{ width: auto !important; max-width: none !important; min-width: 0 !important; } }
/* a short opening line: no drop cap (it needs several lines beside it), a touch larger instead */
.g .g-p.g-intro{ font-size: clamp(18px, .4vw + 16px, 21px); line-height: 1.6; color: var(--ink); max-width: 46rem; }
/* 2 Oct - the facilities as a compact strip (room page) */
.g .g-fstrip{ list-style: none; margin: var(--s6) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--gilt-leaf); display: grid; gap: var(--s4) var(--s3);
  grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (min-width: 48rem){ .g .g-fstrip{ grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width: 72rem){ .g .g-fstrip{ grid-template-columns: repeat(9, minmax(0,1fr)); } }
.g .g-fstrip > .g-fstrip__i{ max-width: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); }
.g .g-fstrip__ill{ display: block; width: 52px; color: var(--gilt); }
.g .g-fstrip .g-fstrip__l{ font-family: var(--serif); font-size: var(--t-small) !important; line-height: 1.35; color: var(--ink-2); }

/* 2 Oct - two short sections side by side (Weddings, Private, Photoshoots, The Family), each with a small medallion */
.g .g-duo{ display: grid; gap: var(--s7); }
@media (min-width: 56rem){ .g .g-duo{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(40px, 5vw, 96px); } }
.g .g-duo__i{ border-top: 1px solid var(--gilt-leaf); padding-top: var(--s5); min-width: 0; }
.g .g-duo__ill{ width: 92px; aspect-ratio: 1; box-sizing: border-box; padding: 17px; margin: 0 0 var(--s4); border: 1px solid var(--gilt-leaf); border-radius: 50%;
  outline: 1px solid var(--gilt-leaf); outline-offset: 5px; background: #FBF8F1; color: var(--gilt); }
.g .g-duo__ill svg{ width: 100%; height: auto; }
.g .g-duo .g-place{ font-size: clamp(28px, 1.3vw + 18px, 38px); }
.g .g-duo .g-p{ max-width: none; }
@media (max-width: 40rem){ .g .g-duo__ill{ width: 72px; padding: 13px; } }

/* =====================================================================
   2 Oct - ON A PHONE, CARD RUNS SWIPE. The room cards, the retreats, the
   four lengths, the dates and the extras were each a stack of full-screen
   cards (the homepage rooms alone ran ~3000px). Each is now a row you swipe,
   one card at a time with the next peeking in. Desktop is unchanged.
   ===================================================================== */
@media (max-width: 40rem){
  .g .g-homerooms, .g .g-cards, .g .g-wscards, .g .g-choose, .g .g-sittings-grid, .g .g-addon{
    display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: var(--s4); margin-left: calc(-1 * var(--s5)); margin-right: calc(-1 * var(--s5)); padding: 6px var(--s5) var(--s5); scroll-padding-left: var(--s5); }
  .g .g-homerooms::-webkit-scrollbar, .g .g-cards::-webkit-scrollbar, .g .g-wscards::-webkit-scrollbar, .g .g-choose::-webkit-scrollbar,
  .g .g-sittings-grid::-webkit-scrollbar, .g .g-addon::-webkit-scrollbar{ display: none; }
  .g .g-homerooms > *, .g .g-cards > *, .g .g-wscards > *, .g .g-choose > *, .g .g-sittings-grid > *, .g .g-addon > *{
    flex: 0 0 84%; max-width: none !important; scroll-snap-align: start; grid-column: auto !important; }
  /* the wide last-room layout is a desktop idea */
  .g .g-homerooms > .g-homeroom:last-child:nth-child(odd){ display: block; }
  .g .g-homerooms > .g-homeroom:last-child:nth-child(odd) .g-homeroom__img{ height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .g .g-sittings-grid > .g-sit:only-child{ flex-basis: 100%; }
}

@media (max-width: 40rem){ .g .g-sittings-grid > .g-sit{ flex: 0 0 84%; } .g .g-sittings-grid > .g-sit:only-child{ flex-basis: 100%; } }
/* the facilities frame on a phone: three compact tiles to a row (it ran ~2000px as two full cards a row) */
@media (max-width: 40rem){
  .g .g-facil-frame .g-facil{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s2); }
  .g .g-facil-frame .g-facil > .g-facil__i{ padding: var(--s3) 4px var(--s3); background-size: 12px 12px; }
  .g .g-facil-frame .g-facil__ill{ width: 40px; margin-bottom: var(--s2); }
  .g .g-facil-frame .g-facil__fr{ font-size: 14px; line-height: 1.2; }
  .g .g-facil-frame .g-facil__en{ font-size: 9.5px !important; letter-spacing: .1em; margin: .2rem 0 0; }
  .g .g-facil-frame .g-facil__d{ display: none; }
}
@media (max-width: 40rem){ .g .g-facil-frame .g-facil__en{ font-size: 10px !important; } }
/* an introductory line on a dark band reads light (it took the navy text colour and vanished on In the Valley's navy band) */
.g .g-sec--navy .g-p.g-intro, .g .g-sec--dark .g-p.g-intro, .g .g-gl .g-p.g-intro, .g .g-full .g-p.g-intro, .g .g-close .g-p.g-intro{ color: rgba(255,255,255,.92); }

/* 2 Oct - the Workshops page lists every workshop twice with the same photograph (The Retreats cards, then the date
   cards). The date cards there drop the photo and read as a compact list of dates; a workshop's own page keeps it. */
.g #dates .g-sit__img{ display: none; }
.g #dates .g-sit{ border-top: 2px solid var(--gilt-leaf); }
@media (min-width: 64rem){ .g #dates .g-sittings-grid{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); justify-content: start; gap: var(--s4); }
  .g #dates .g-sittings-grid > .g-sit{ width: auto; max-width: none; margin: 0; } }
@media (min-width: 64rem){
  .g #dates .g-sit__when{ font-size: clamp(19px, .6vw + 13px, 22px) !important; line-height: 1.25; }
  .g #dates .g-sit .g-btn{ display: flex; width: 100%; justify-content: center; text-align: center; white-space: nowrap; padding-left: .75rem; padding-right: .75rem; }
}

/* 2 Oct - HERO LAYERING. The wash (absolute) painted over hero text in an unpositioned container, greying out the title,
   lede and button (the event pages, where the text sits in a plain .g-wrap). Hero content now sits above the wash. */
.g .g-hero > .g-wrap, .g .g-hero > .g-hero__in{ position: relative; z-index: 2; }
/* a hero with no photograph carries its drawing, large and faint, on the right of the navy */
.g .g-hero--art{ overflow: hidden; }
.g .g-hero__art{ position: absolute; z-index: 1; right: clamp(16px, 6vw, 120px); top: 50%; transform: translateY(-50%); width: clamp(180px, 26vw, 400px);
  color: var(--gilt-on-dark, #C6A66E); opacity: .32; pointer-events: none; }
.g .g-hero__art svg{ width: 100%; height: auto; }
@media (max-width: 40rem){ .g .g-hero__art{ width: 48vw; right: -6vw; opacity: .16; } }
.g .g-hero__art{ color: #C6A66E !important; opacity: .5; width: clamp(150px, 15vw, 280px); right: clamp(16px, 3vw, 64px); }
@media (max-width: 40rem){ .g .g-hero__art{ width: 40vw; right: -4vw; opacity: .22; } }

/* 2 Oct - OPENING HOURS, a day to a line (the Dining page, under The Evening). From the restaurant settings. */
.g .g-hours{ margin: var(--s7) 0 0; max-width: 30rem; padding: var(--s5) var(--s5) var(--s4); background: #FBF8F1; border: 1px solid var(--line); border-top: 2px solid var(--gilt-leaf); }
.g .g-hours__fr{ margin: 0; font-family: var(--display); font-style: italic; font-size: 17px; color: var(--gilt); }
.g .g-hours__h{ margin: 0 0 var(--s3); font-family: var(--display); font-weight: 400; font-size: clamp(22px, .6vw + 18px, 26px); color: var(--blue-deep); }
.g .g-hours__t{ width: 100%; border-collapse: collapse; font-family: var(--serif); font-size: var(--t-base); }
.g .g-hours__cap{ caption-side: top; text-align: left; margin: 0 0 var(--s3); font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); }
.g .g-hours__t th, .g .g-hours__t td{ padding: .45rem 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; }
.g .g-hours__t td{ text-align: right; }
.g .g-hours__t tr.is-open th, .g .g-hours__t tr.is-open td{ color: var(--blue-deep); }
.g .g-hours__t tr.is-closed th, .g .g-hours__t tr.is-closed td{ color: var(--stone); font-style: italic; }

/* 2 Oct - keyboard focus was invisible on the search bars' date fields (homepage hero, Stay) and the flexible-dates
   month field (Contact): the gilt ring every other control has. */
.g .g-search input:focus-visible, .g .g-herosearch input:focus-visible, .g .g-flex__f input:focus-visible,
.g .g-search select:focus-visible, .g .g-herosearch select:focus-visible{ outline: 2px solid var(--gilt, #A8823F) !important; outline-offset: 2px; }
/* (a date or month input does not match :focus-visible while a segment holds focus - use plain :focus for them) */
.g .g-search input[type="date"]:focus, .g .g-herosearch input[type="date"]:focus, .g .g-flex__f input[type="month"]:focus,
.g .g-search input[type="date"]:focus-within, .g .g-herosearch input[type="date"]:focus-within, .g .g-flex__f input[type="month"]:focus-within{ outline: 2px solid var(--gilt, #A8823F) !important; outline-offset: 2px; }
.g main input[type="date"]:focus, .g main input[type="month"]:focus{ outline: 2px solid var(--gilt, #A8823F) !important; outline-offset: 2px; }

/* 2 Oct - BEFORE THE WORK (Restoration): the kitchen before and now, side by side, then a grid of before/during. */
.g .g-ba{ display: grid; gap: var(--s4); margin: var(--s6) 0 var(--s5); grid-template-columns: 1fr; }
@media (min-width: 48rem){ .g .g-ba{ grid-template-columns: 1fr 1fr; } }
.g .g-ba__i{ margin: 0; }
.g .g-ba__i img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g .g-ba__i figcaption{ margin-top: var(--s2); font-family: var(--serif); font-size: var(--t-small); color: var(--ink-2); }
.g .g-ba__k{ display: inline-block; margin-right: .5em; font-family: var(--ui); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); }
.g .g-befgrid{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 64rem){ .g .g-befgrid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.g .g-befgrid li{ max-width: none; margin: 0; }
.g .g-befgrid figure{ margin: 0; }
.g .g-befgrid img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g .g-befgrid figcaption{ margin-top: var(--s2); font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: var(--ink-2); }

/* 2 Oct - KARINA (The Family): a portrait beside a short introduction */
.g .g-person{ display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 52rem){ .g .g-person{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); } }
.g .g-person__fig{ margin: 0; }
.g .g-person__fig img{ display: block; width: 100%; max-width: 30rem; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid var(--gilt-leaf); outline: 1px solid var(--gilt-leaf); outline-offset: 6px; }
.g .g-person__t .g-p{ max-width: 34rem; }

/* 4 Oct (owner: "the spacing is all really bad, the pay and book doesn't scroll with it") - THE ROOM BOOKING PAGE.
   1. The summary card follows the page (sticky now works - see html, body overflow-x: clip) and has no inner scroll,
      so Pay & book is never hidden inside it. */
@media (min-width: 62rem){
  .g .g-aside{ max-height: none; overflow: visible; top: 96px; }
}
/* 2. The price lines wrapped off the card's edge ("€760.", "€0.80 × 2 adults × 2 n..."): label wraps, figure stays whole. */
.g .g-quote__l div{ align-items: baseline; }
.g .g-quote__l dt{ flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.g .g-quote__l dd{ flex: 0 0 auto; }
/* 3. One even space between the four steps (was 96-138px, different each time). */
.g .g-cols > div > .g-step{ padding-bottom: 0; margin: 0; }
.g .g-cols > div > * + *{ margin-top: clamp(40px, 4vw, 56px) !important; }
.g .g-cols > div > .g-wrap:has(.g-fleur){ margin-top: clamp(32px, 3vw, 44px) !important; }
.g .g-cols > div > .g-wrap:has(.g-fleur) + *{ margin-top: clamp(32px, 3vw, 44px) !important; }
.g .g-step__h{ margin-top: 0; }
/* 4. The calendar: days were 96px squares (two months stacked = 1,271px). Cap the day height; two months side by side
      from 64rem. The gap under it no longer touches "Adults". */
.g .g-dates__day{ aspect-ratio: auto; height: 2.75rem; }
@media (min-width: 64rem){ .g .g-cal__months{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); } .g .g-dates__day{ height: 2.5rem; } }
.g .g-cal{ margin-bottom: var(--s5); }
/* 5. "Anything you tick here..." sat on the cards. */
.g .g-step .g-addons + .g-hint, .g .g-step .g-extras + .g-hint{ margin-top: var(--s3); }
/* (steps that touch got a rule + 82px padding + a hairline; the first pair got an ornament instead - one rhythm now:
   the numbered circles carry the sequence, the same gap between all four) */
.g .g-cols > div > .g-step + .g-step{ padding-top: 0; border-top: 0; }
.g .g-cols > div > .g-step + .g-step::before{ display: none; }
.g .g-cols > div > .g-wrap:has(.g-fleur){ display: none; }
.g .g-cols > div > * + *{ margin-top: clamp(48px, 4.5vw, 64px) !important; }
.g .g-cols > div > svg{ display: none; }   /* the swirl between steps 2-3 and 3-4 - one rhythm, no ornaments between steps */
.g .g-cols > div > .g-wrap:has(.g-hairs){ display: none; }   /* the hairline ornament between steps 1-2 */

/* 4 Oct - TELEPHONE: country code, then the number (owner). Mandatory on the room, workshop and table forms. */
.g .g-phone__row{ display: flex; gap: var(--s2); align-items: stretch; }
.g .g-phone__cc{ flex: 0 0 auto; width: 11.5rem; max-width: 46%; }
.g .g-phone__row input{ flex: 1 1 auto; min-width: 0; }
@media (max-width: 30rem){ .g .g-phone__cc{ width: 9.5rem; } }
/* the telephone row needs the width: email and telephone each take a full row where they shared one */
.g .g-row:has(.g-phone){ grid-template-columns: 1fr !important; }
.g .g-phone{ max-width: 34rem; }

/* 5 Oct - ROOM PAGE, BELOW THE FORM (owner: "lots of spacing and design issues").
   The closing logo sat on a grey box: every image gets a sand background while it loads, and the logo is transparent. */
.g .g-close__mark{ background: none !important; }
/* "This Room Was a Ruin" was one line under a drop cap; now a photograph beside it. */
.g .g-ruin{ display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 52rem){ .g .g-ruin{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); } }
.g .g-ruin__fig{ margin: 0; }
.g .g-ruin__fig img{ display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.g .g-ruin__fig figcaption{ margin-top: var(--s2); font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: var(--ink-2); }
.g .g-ruin__t .g-p{ max-width: 32rem; }
/* The end of the booking area: the form's last step, then straight into "With the Room" - no stacked padding. */
.g main > .g-wrap:has(.g-form-full){ padding-bottom: 0; }
.g main > .g-wrap:has(.g-form-full) + .g-sec{ padding-top: clamp(48px, 5vw, 72px); }
/* The private bathroom line in the night card reads as part of the promise, not small print. */
.g .g-night__bath{ color: var(--ink); }

/* 5 Oct - ROOM AT A GLANCE (owner: tidy how the bathroom and the room are shown). One table under the title, in place of
   tags, a second price calculator and three bathroom sentences. */
.g .g-glance{ margin: var(--s5) 0 var(--s4); display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--gilt-leaf); max-width: 46rem; }
@media (min-width: 48rem){ .g .g-glance{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.g .g-glance > div{ padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); }
.g .g-glance__wide{ grid-column: 1 / -1; }
.g .g-glance dt{ font-family: var(--ui); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); margin: 0 0 .25rem; }
.g .g-glance dd{ margin: 0; font-family: var(--serif); font-size: var(--t-base); line-height: 1.45; color: var(--blue-deep); }
.g .g-glance__sub{ display: block; font-size: var(--t-small); font-style: italic; color: var(--ink-2); }
.g .g-room__meta{ margin-bottom: var(--s2); }
.g .g-roomtop__cta{ margin: var(--s5) 0 0; }
/* (lines under each item stopped short on part-filled rows - a rule above and below the table instead) */
.g .g-glance{ border-bottom: 1px solid var(--gilt-leaf); padding: var(--s2) 0; row-gap: var(--s1); }
.g .g-glance > div{ border-bottom: 0; padding: var(--s2) var(--s4) var(--s2) 0; }

/* 5 Oct - THE BOOKING CARD, REDESIGNED (owner: "the design is not nice and text isn't fitting"). One card, no box inside
   it; stay details compact; price lines in sentence case, the tax detail legible; a clear total; then Pay & book. */
.g .g-dossier{ padding: var(--s5) var(--s5) var(--s5); }
.g .g-dossier__k{ margin: 0 0 .15rem; }
.g .g-dossier__room{ margin: 0 0 var(--s3); font-size: clamp(22px, 1vw + 14px, 26px); line-height: 1.15; }
.g .g-dossier .g-dossier__l > div{ padding: .55rem 0; }
.g .g-dossier .g-dossier__l dt{ font-size: 12px; letter-spacing: .14em; }
.g .g-dossier .g-dossier__l dd{ font-size: 18px; line-height: 1.3; }
.g .g-dossier .g-quote{ margin: var(--s4) 0 0; padding: var(--s3) 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
.g .g-dossier .g-quote__l{ gap: .5rem; margin: 0 0 .75rem; }
.g .g-dossier .g-quote__l > div{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0; border: 0; }
.g .g-dossier .g-quote__l dt{ flex: 1 1 auto; min-width: 0; text-transform: none; letter-spacing: 0; font-family: var(--serif);
  font-size: 16px; font-weight: 400; line-height: 1.35; color: #EFE7D8; }
.g .g-dossier .g-quote__l dt .g-opt{ display: block; margin: .1rem 0 0; font-family: var(--serif); font-size: 13.5px; font-style: italic;
  letter-spacing: 0; text-transform: none; color: rgba(239,231,216,.82); }
.g .g-dossier .g-quote__l dd{ flex: 0 0 auto; text-align: right; font-family: var(--serif); font-size: 16px; font-weight: 400; color: #fff; white-space: nowrap; }
.g .g-dossier .g-quote__total{ display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: .7rem 0 0;
  border-top: 1px solid rgba(255,255,255,.3); }
.g .g-dossier .g-quote__total > span:first-child{ font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #D9C79B; }
.g .g-dossier .g-quote__total .g-fig{ font-family: var(--display); font-size: clamp(28px, 1.2vw + 18px, 32px); color: #fff; }
.g .g-dossier #quote_note{ margin: .2rem 0 0; font-size: 13.5px; text-align: right; color: rgba(239,231,216,.8); }
.g .g-dossier .g-terms-line{ margin: var(--s4) 0 var(--s3) !important; font-size: 13.5px; }
.g .g-dossier .g-submit{ width: 100%; padding-top: .95rem; padding-bottom: .95rem; font-size: 17px; }
.g .g-dossier .g-foot-note{ margin: var(--s3) 0 0; font-size: 13.5px; line-height: 1.55; }

/* 5 Oct - ROOM PAGE DESIGN REVIEW. No rules round the photo strip (the table above has its own); the strip sits close
   under the button; the night card opens the form column; email and telephone no longer have an extra gap between. */
.g main > .g-wrap > .g-strip{ border-top: 0 !important; border-bottom: 0 !important; padding-top: 0; padding-bottom: 0;
  margin-top: var(--s6); margin-bottom: 0; }
.g .g-cols > div > .g-night{ margin: 0 0 clamp(40px, 4vw, 56px); max-width: none; }
.g .g-cols > div > .g-night + .g-step{ margin-top: 0 !important; }
.g .g-step .g-row:has(.g-phone){ margin-top: 0; row-gap: var(--s4); }
.g .g-step .g-field + .g-row, .g .g-step .g-row + .g-row{ margin-top: var(--s4); }
.g .g-row:has(.g-phone) > *{ margin-top: 0; margin-bottom: 0; }
/* the telephone row now sits the same 24px under email as email under name */
.g .g-step .g-row:has(.g-phone){ margin-top: var(--s5) !important; }
.g .g-eta{ margin-top: var(--s5); max-width: 34rem; }
.g .g-row:has(.g-phone){ row-gap: var(--s5) !important; }   /* email, telephone, arrival: the same 24px as name to email */
.g .g-row:has(.g-phone) > .g-eta{ margin-top: 0; }

/* 5 Oct - ONE LABEL ABOVE A HEADING (design review: ~35 headings stacked a French line, its English translation and a
   capitals eyebrow - "Votre chambre / Your room / Ariège"; "Avant les travaux / Before the work / HOW IT WAS / Before
   the Work"). Now the French line, then the heading. The translation stays for screen readers. */
.g .g-fr .g-fr__en{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g .g-fr + .g-eyebrow{ display: none; }
.g .g-fr{ margin-bottom: .35rem; }

/* 5 Oct - NO DROP CAPS (design review). All 31 opening paragraphs carrying one were two or three lines long - too short
   for a drop cap - and those beginning "A" read as one word ("Afew days", "Anight here", "Achâteau"); the owner's
   screenshot showed "E very room". Opening paragraphs are set in normal type. */
.g .g-lede-first::first-letter, .g .g-drop::first-letter, .g .g-drop-cap::first-letter, .g .g-versal::first-letter{
  float: none !important; font-size: inherit !important; line-height: inherit !important; margin: 0 !important;
  padding: 0 !important; border: 0 !important; color: inherit !important; font-family: inherit !important; font-weight: inherit !important; }

/* 5 Oct - GALLERY: grids of 5 and 3 photographs in two columns ended on a lone photo beside an empty space. A lone last
   photograph spans the row, in a wider shape. */
.g .g-grid--gal > :last-child:nth-child(odd){ grid-column: 1 / -1; }
.g .g-grid--gal > :last-child:nth-child(odd) img{ aspect-ratio: 21 / 9; width: 100%; height: auto; object-fit: cover; }

/* 5 Oct - PHONES (design review, part 3). Nothing under 12px; sentences at least 14-15px; anything tapped on its own
   line at least 44px tall (calendar arrows, "See the other four", "Open in maps", "See the dates", "The house and its
   history"). */
.g .g-facil__en{ font-size: 12px; }
.g .g-hero label, .g .g-book-bar label, .g .g-hero__bar label{ font-size: 12px; }
@media (max-width: 48rem){
  .g .g-room__note, .g .g-book-bar__note, .g .g-room__meta{ font-size: 15px; }
  .g .g-cred{ font-size: 14px; }
  .g .g-full__link, .g .g-choose__a, .g .g-arrive__map, .g .g-second a, .g main .g-find a:not(.g-btn), .g main p > a:only-child:not(.g-btn){
    display: inline-flex; align-items: center; min-height: 44px; }
  .g .g-cal__btn{ min-height: 44px; min-width: 44px; }
}
.g .g-facil .g-facil__en, .g p.g-facil__en{ font-size: 12px !important; }
.g .g-vs__k{ font-size: 12px !important; }
@media (max-width: 48rem){ .g .g-extra a:not(.g-btn), .g [class*=g-extra] a:not(.g-btn), .g .g-addon a:not(.g-btn){ display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 48rem){
  .g .g-facil-frame .g-facil__en, .g .g-facil__en{ letter-spacing: .05em !important; line-height: 1.3; }
  .g .g-facil-frame{ padding-bottom: 3.25rem !important; }
}
/* the full-experience band's translation, like every other heading's (one label above a heading) */
.g .g-full__fren{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 5 Oct - RANDOM TEXT (design review, inventory of 281 small texts): English subtitles under French subheads in the
   workshop glance and the free-time panel (kept for screen readers); the second hero eyebrow on the homepage; the
   "See what it looks like first" link under every newsletter button. */
.g .g-gl2__fr span[lang=en], .g .g-gl2__sub span[lang=en], .g .g-journey__free-fr span[lang=en]{
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g .g-hero__eyeplace{ display: none; }
.g .g-news__see{ display: none; }

/* 5 Oct - ONE RHYTHM INSIDE SECTIONS (design review). In grid-laid sections (those with a medallion) the heading's 24px
   bottom margin and the next block's 24px top margin did not merge - 48px under some headings, 24px under others.
   Text-to-button gaps ran 16-48px. Now: 24px under every heading; 24px between text and its buttons. */
.g main h2.g-place + *{ margin-top: 0 !important; }
.g main :is(p, ul, dl, div):not(:has(.g-btn)) + :is(p, div):has(> .g-btn:first-child){ margin-top: 24px !important; }
.g main :is(p, ul, dl):not(:has(.g-btn)):has(+ :is(p, div):has(> .g-btn:first-child)){ margin-bottom: 0 !important; }
.g .g-gl2__h + .g-gl2__facts{ margin-top: 24px !important; }

/* 5 Oct - MANAGE / CHECK-IN PAGE (owner, screenshot after the test payment: "design needs work here"). Its cards had no
   container and stretched edge to edge on a wide screen (2,500px boxes; Name far left, Mobile far right). Now one centred
   reading column; the ornament aligns with the text under it. */
.g main:has(> .g-mb-card){ max-width: 60rem; margin-left: auto; margin-right: auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.g main > .g-mb-card:first-child > .g-fleur{ margin-left: 0; margin-right: auto; display: block; }
.g main:has(> .g-mb-card) > .g-mb-card{ max-width: 100%; }
/* the first card holds the whole page - frames inside a frame; the page itself is the frame now */
.g main > .g-mb-card:first-child{ border: 0 !important; background: none !important; box-shadow: none !important; padding-left: 0; padding-right: 0; }
.g main > .g-mb-card:first-child::before, .g main > .g-mb-card:first-child::after{ display: none !important; }
.g main .g-hint + .g-mb-card{ margin-top: var(--s4) !important; }

/* 5 Oct - MANAGE PAGE, second pass (owner: "it's not very good ... all a bit weird"). Extras: name and price, the
   description beneath, then the controls together on one row (they were scattered across the width). */
.g .g-mb-extra{ display: grid !important; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s2) var(--s3);
  align-items: center; padding: var(--s4) 0; border-top: 1px solid var(--line); margin: 0 !important; }
.g .g-mb-extra:first-of-type{ border-top: 0; }
.g .g-mb-extra__t{ grid-column: 1 / -1; display: block; }
.g .g-mb-extra__n{ font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--blue-deep); }
.g .g-mb-extra__p{ font-family: var(--serif); font-size: 18px; color: var(--gilt); margin-left: .35rem; }
.g .g-mb-extra__d{ display: block; margin-top: .25rem; max-width: 40rem; }
.g .g-mb-extra__q{ width: 4.5rem; }
.g .g-mb-extra > input[type=hidden] + select, .g .g-mb-extra select{ min-width: 0; }
.g .g-mb-extra > .g-btn{ justify-self: start; }
.g .g-mb-extra:not(:has(select)):not(:has(.g-mb-extra__q)) > .g-btn{ grid-column: 1; }
@media (max-width: 40rem){ .g .g-mb-extra{ grid-template-columns: 1fr 1fr; } .g .g-mb-extra > .g-btn{ grid-column: 1 / -1; } }
/* "Ask for this room" was stretched to the height of the whole form row */
.g .g-mb-card form .g-btn{ align-self: end; height: auto; min-height: 44px; }

/* 5 Oct - LAYOUT REVIEW. Story's two side-by-side columns: the buttons sat ~100px apart (one column's text is longer) -
   they now meet the foot of both columns. */
.g .g-duo__i{ display: flex; flex-direction: column; }
.g .g-duo__i > p:has(> .g-btn), .g .g-duo__i > div:has(> .g-btn){ margin-top: auto !important; padding-top: 24px; }
.g main .g-duo > .g-duo__i > p:has(> .g-btn):last-child, .g main .g-duo > .g-duo__i > div:has(> .g-btn):last-child{ margin-top: auto !important; }
/* two sand sections running together on the workshop page (112px of unbroken blank): a hairline, and a tighter join */
.g main > .g-sec--sand + .g-sec--sand{ border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent); padding-top: clamp(40px, 4vw, 56px); }
@media (max-width: 52rem){ .g main .g-duo > .g-duo__i > p:has(> .g-btn):last-child, .g main .g-duo > .g-duo__i > div:has(> .g-btn):last-child{ margin-top: 24px !important; padding-top: 0; } }
@media (max-width: 52rem){ .g main .g-duo > .g-duo__i > p:has(> .g-btn):last-child, .g main .g-duo > .g-duo__i > div:has(> .g-btn):last-child{ margin-top: 8px !important; } }
/* the note under the facilities grid ran ~98 characters a line */
.g .g-facil__note{ max-width: 62ch; margin-left: auto; margin-right: auto; }

/* 5 Oct - HERO HEIGHTS (layout review): the inner pages' heroes sized to their own text (Contact 56% of the window,
   workshop pages 62%, Stay 67%, the Estate 74%). One height for every inner page; the homepage keeps its full screen. */
body.hero--short .g-hero, body.hero--tall .g-hero{ min-height: clamp(560px, 72vh, 720px); }
@media (max-width: 48rem){ .g .g-hero--art .g-hero__art{ height: 88px; max-height: 88px; overflow: hidden; } .g .g-hero--art .g-hero__art svg{ height: 88px; width: auto; } }

/* 5 Oct - HOW WE TAKE PAYMENT (anti-scam notice) on the confirmations, the manage pages and the booking cards */
.g .g-paysafe{ margin: var(--s5) 0; padding: var(--s4) var(--s5); border: 1px solid color-mix(in srgb, var(--gilt) 45%, transparent);
  border-left: 3px solid var(--gilt); background: color-mix(in srgb, var(--gilt) 6%, transparent); }
.g .g-paysafe__k{ margin: 0 0 .35rem; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); }
.g .g-paysafe__t{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 44rem; }
.g .g-dossier .g-paysafe--compact{ margin: var(--s3) 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(239,231,216,.82); }
.g .g-paysafe--compact{ font-size: 13px; }
.g .g-address-row{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s4); }
@media (max-width: 30rem){ .g .g-address-row{ grid-template-columns: 1fr; } }
/* first and last name side by side, as on Booking.com */
.g .g-namerow{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.g .g-namerow > .g-field{ margin: 0; }
@media (max-width: 30rem){ .g .g-namerow{ grid-template-columns: 1fr; } }

/* 5 Oct - THE DETAILS STEP, one rhythm (design check after the Booking.com order): every field 24px below the last, all
   full width (the telephone and arrival time were narrower), the town/postcode row and name row inside the same rhythm. */
.g .g-stack{ display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.g .g-stack > *, .g .g-stack .g-field, .g .g-stack .g-row{ margin: 0 !important; }
.g .g-stack .g-phone, .g .g-stack .g-eta{ max-width: none; }
.g .g-stack .g-address-row{ gap: var(--s4); }
.g .g-stack .g-address-row > .g-field{ margin: 0 !important; }
.g .g-stack--arrive{ padding-top: 24px; border-top: 1px solid var(--line); }
.g .g-namerow{ margin-top: 24px !important; }
/* the name/email pair on the workshop form, inside the same rhythm on phones */
.g .g-step .g-row:has(#guest_name){ row-gap: 24px; }
@media (max-width: 30rem){ .g .g-step .g-row:has(#guest_name) > .g-field{ margin: 0 !important; } .g .g-address-row{ row-gap: 24px; } .g .g-address-row > .g-field{ margin: 0 !important; } }
.g .g-step .g-row:has(#guest_name) + .g-stack{ margin-top: 0; }
.g .g-namerow, .g .g-address-row{ row-gap: 24px; }
.g .g-stack .g-address-row{ row-gap: 24px; }
@media (max-width: 52rem){ .g .g-step .g-row:has(#guest_name){ display: grid; grid-template-columns: 1fr; row-gap: 24px; } }

/* 5 Oct - FULL REVIEW (owner: "run a full review again").
   Form rows: fields kept their own 24px foot inside rows that already space them 24px apart, so wherever a row stacked
   (dates and guests on the booking form, the events enquiry, Add another room) fields sat 48px apart; the contact form's
   rows used 16px. One rule: 24px between fields, in a row or stacked, and 24px below the row. */
.g main form .g-row{ row-gap: 24px; margin-bottom: 24px; }
.g main form .g-row > .g-field{ margin-bottom: 0 !important; margin-top: 0 !important; }
.g main form .g-flex__row{ row-gap: 24px; }
.g main .g-stack .g-row{ margin-bottom: 0; }
/* the gallery's section headings sat 48px above their text (24px everywhere else) */
.g main h2.g-h2.g-rule{ margin-bottom: 24px; }
.g main .g-flex__row{ row-gap: 24px !important; }
.g main .g-flex__f{ row-gap: 24px !important; }
/* "Not sure of the dates" (contact page): a wrapping row put the fields in whatever width was left and the button beside
   the message box, stretched square. Now a two-column grid - dates/nights/guests above, flexibility, name and email, the
   message and the button on full rows, the button at its own height. */
.g main .g-flex__f{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px !important; max-width: 44rem; }
.g main .g-flex__f > .g-flex__row, .g main .g-flex__f > .g-field:has(textarea), .g main .g-flex__f > .g-field:has(#fx_flex),
.g main .g-flex__f > button, .g main .g-flex__f > .g-hint{ grid-column: 1 / -1; }
.g main .g-flex__f > .g-field{ margin: 0 !important; }
.g main .g-flex__f > .g-field input, .g main .g-flex__f > .g-field select, .g main .g-flex__f > .g-field textarea{ width: 100%; }
.g main .g-flex__f > button{ justify-self: start; height: auto; margin: 0; }
.g main .g-flex__f > .g-hint{ margin: 0; }
.g main .g-flex__row{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px !important; margin: 0 !important; }
.g main .g-flex__row > .g-field{ margin: 0 !important; } .g main .g-flex__row input, .g main .g-flex__row select{ width: 100%; }
@media (max-width: 40rem){ .g main .g-flex__f, .g main .g-flex__row{ grid-template-columns: 1fr; } }
/* Add another room: the button on its own row under the fields, at its own height */
.g .g-addroom__f > .g-btn{ display: inline-flex; margin-top: 0; align-self: flex-start; height: auto; }
.g .g-addroom__f > .g-row{ margin-bottom: 24px; }
.g .g-addroom__f{ display: block !important; }
.g .g-addroom__f > .g-btn{ margin: 0 0 16px; }
/* Stay's add-on cards share the row however many there are (two or three once the tour is no longer featured) */
.g .g-addon{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; gap: var(--s4); }

/* 5 Oct - THE CURRENT PAGE IN THE HEADER, at the top of every photo-header page: it turned white (left from when the
   header sat transparent over the photo), but the header is solid sand there now - "The Estate", "Stay" and the rest
   vanished until the page was scrolled. Gold with its underline, the same as after scrolling. */
body.at-top.has-hero .g-top .g-nav a.is-here, body.at-top.has-hero .g-top .g-nav a[aria-current="page"],
.g.has-hero.at-top .g-nav a.is-here, .g.has-hero.at-top .g-nav a[aria-current="page"]{ color: var(--gilt) !important; }

/* 5 Oct - ONE PAGE-HEADING SIZE for pages without a photo header. The confirmations ("Thank you, Olivia"), the find-a-
   booking pages, the shared stay and privacy used the 88px display size meant for titles over a photograph; terms and the
   legal notice used 42px. Now all match Press, Story, Gallery and the 404 (60px desktop, 36px phone). The room and workshop
   booking pages keep their large titles. */
.g main h1.g-display--page{ font-size: var(--g-pagehead-size, clamp(36px, 4.2vw, 60px)) !important; line-height: 1.1; }

/* 6 Oct - PHOTOGRAPH GALLERIES (Stay, Workshops, the Estate): the restoration page's captioned grid, nine to a section -
   three across on desktop, two on a phone; the intro sits 24px above it. Before/after pairs stack with a gap. */
.g .g-gallery-sec .g-intro{ margin-bottom: 24px; }
.g .g-gallery{ margin-top: 0; }
.g .g-gallery img{ border: 1px solid color-mix(in srgb, var(--gilt) 35%, transparent); }
.g .g-ba + .g-ba{ margin-top: var(--s5); }
/* two across (below 64rem), an odd count leaves one photograph alone: the last one runs the full width instead */
@media (max-width: 63.99rem){ .g .g-gallery li:last-child:nth-child(odd){ grid-column: 1 / -1; } }

/* 6 Oct - THE GALLERY reads like a contact sheet: three across on desktop, two on a phone, every photograph 4:3 (it was
   two across with a fixed 16rem height, one across on a phone - 69 photographs made a page of endless scrolling). Each
   section holds a multiple of six, so neither width leaves one alone on its last row. */
.g .g-grid--gal{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
@media (min-width: 48rem){ .g .g-grid--gal{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; } }
.g .g-grid--gal > figure img{ height: auto !important; aspect-ratio: 4 / 3; }
.g .g-grid--gal > :last-child:nth-child(odd){ grid-column: auto; }
.g .g-grid--gal > :last-child:nth-child(odd) img{ aspect-ratio: 4 / 3; }
.g .g-grid--gal figcaption{ margin-top: 6px; }

/* 6 Oct - THE ROOM PAGE GALLERY: every photograph of the room in a grid, three or two across by count, 4:3 */
.g .g-strip.g-roomgal{ display: grid !important; gap: 12px !important; grid-auto-flow: row !important; overflow: visible !important; }
.g .g-strip.g-roomgal--c3{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.g .g-strip.g-roomgal--c2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.g .g-strip.g-roomgal img{ width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 47.99rem){ .g .g-strip.g-roomgal--c3, .g .g-strip.g-roomgal--c2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .g .g-strip.g-roomgal--c3 > img:last-child:nth-child(odd){ grid-column: 1 / -1; } }

/* 6 Oct - PHOTOGRAPH CREDITS (Wikimedia Commons photographs on In the Ariège): small, under the caption, linked; the
   licences require the credit - never hide it. */
.g .g-gallery figcaption .g-credit{ display: block; margin-top: 2px; font-style: normal; font-family: var(--sans, inherit); font-size: 11px; letter-spacing: .01em; color: var(--ink-2); opacity: .85; }
.g .g-gallery figcaption .g-credit a{ color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* 8 Oct (owner: "I didn't want it so prominent") - the payment note is one quiet line, no box, only on the
   confirmation and booking pages; not on the booking cards. */
.g .g-paysafe-line{ margin: var(--s5) 0 0; max-width: 44rem; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.g .g-paysafe-line a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* 8 Oct - TYPICAL WEATHER for the chosen dates (Stay's search bar and the room page): one quiet line, not a widget. */
.g .g-typwx{ margin: var(--s3) 0 0; max-width: 46rem; font-size: 14px; line-height: 1.6; color: inherit; }
.g .g-typwx__k{ font-weight: 600; }
.g .g-typwx__src{ display: block; margin-top: 2px; font-size: 12px; opacity: .75; }
.g .g-book-bar .g-typwx{ color: inherit; }

/* 9 Oct - THEN AND NOW (the restoration page): three large matched pairs, each labelled on the photograph. Side by side,
   not a slider - none of the pairs was taken from the same spot. */
.g .g-tn{ display: grid; gap: var(--s7, 56px); margin-top: var(--s6); }
.g .g-tn__pair{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.g .g-tn__pair figure{ margin: 0; position: relative; overflow: hidden; background: var(--sand, #EDE4D3); }
.g .g-tn__pair img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.g .g-tn__pair--tall{ max-width: 880px; margin-inline: auto; width: 100%; }
.g .g-tn__pair--tall img{ aspect-ratio: 3 / 4; }
.g .g-tn__tag{ position: absolute; top: 14px; left: 14px; padding: 7px 11px; background: rgba(20, 48, 95, .86); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.g .g-tn__tag--now{ background: rgba(122, 90, 48, .9); }
.g .g-tn__cap{ grid-column: 1 / -1; margin: var(--s2) 0 0; font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--ink); }
@media (max-width: 600px){
  .g .g-tn{ gap: var(--s6); }
  .g .g-tn__pair{ gap: 6px; }
  .g .g-tn__tag{ top: 8px; left: 8px; padding: 5px 7px; font-size: 10px; }
  .g .g-tn__cap{ font-size: 18px; }
}
.g .g-closer__cta{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }

/* 9 Oct (owner: "some of the text is too small"): the Monument Historique strip's sentence was 13px - 15px, and the
   gilt label 13px with its spacing. */
.g .g-cred, .g-cred{ font-size: 15px; line-height: 1.5; }
.g .g-cred__m, .g-cred__m{ font-size: 14px; }
@media (max-width: 600px){ .g .g-cred, .g-cred{ font-size: 15px; } }

/* 9 Oct - ARRANGED FOR YOU (the Estate): the extras on request - yoga, riding, a guided hike, skiing - as four tiles in the
   facilities' own manner (gilt drawing, French name, English, one line). */
.g .g-extras{ list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem){ .g .g-extras{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g .g-extras__i{ text-align: center; padding: var(--s5) var(--s3); border: 1px solid var(--line); background: #FBF8F1; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.g .g-extras__i:hover{ transform: translateY(-3px); border-color: var(--gilt-leaf); box-shadow: 0 16px 30px -22px rgba(20,48,95,.45); }
.g .g-extras__ill{ width: 78px; margin: 0 auto var(--s3); color: var(--gilt); }
.g .g-extras__fr{ margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(19px, .6vw + 15px, 23px); line-height: 1.2; color: var(--blue-deep); }
.g .g-extras__en{ margin: .3rem 0 var(--s2); font-family: var(--ui); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt); }
.g .g-extras__d{ margin: 0 auto; max-width: 15rem; font-family: var(--serif); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 40rem){ .g .g-extras__ill{ width: 58px; } .g .g-extras__i{ padding: var(--s4) var(--s2); } }
@media (prefers-reduced-motion: reduce){ .g .g-extras__i, .g .g-extras__i:hover{ transition: none; transform: none; } }

/* 9 Oct - the monument's rules as four tiles, inside its section */
.g .g-rules{ margin-top: var(--s6); }

/* 9 Oct - THE DINING ROOMS (two before, one now) and AS IT WAS (two early images) on the restoration page */
.g .g-tn__trio{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.g .g-tn__trio figure{ margin: 0; position: relative; overflow: hidden; background: var(--sand, #EDE4D3); }
.g .g-tn__trio img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.g .g-tn__trio .g-tn__now{ grid-column: 1 / -1; }
.g .g-tn__trio .g-tn__now img{ aspect-ratio: 3 / 2; }
.g .g-tn__trio .g-tn__cap{ grid-column: 1 / -1; }
.g .g-old{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s5); align-items: start; }
.g .g-old figure{ margin: 0; }
.g .g-old img{ width: 100%; height: auto; display: block; border: 1px solid var(--line); box-shadow: 0 18px 34px -26px rgba(20,48,95,.5); }
.g .g-old figcaption{ margin-top: var(--s2); font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-2); }
@media (max-width: 600px){ .g .g-tn__trio{ gap: 6px; } .g .g-old{ grid-template-columns: 1fr; gap: var(--s4); } }
@media (min-width: 900px){ .g .g-old--3{ grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }

/* 9 Oct audit (owner: "some of the text is too small"): the notes beside Book (13.5px) and the line on each workshop card
   (13px) were the smallest running text left on a phone - 15px and 14px. */
.g .g-terms-line, .g .g-foot-note, .g-terms-line, .g-foot-note{ font-size: 15px; line-height: 1.55; }
.g .g-wscard__inc{ font-size: 14px; }
.g .g-dossier .g-terms-line, .g .g-dossier .g-foot-note{ font-size: 15px; }
.g .g-dossier #quote_note, .g .g-dossier .g-quote__l dt .g-opt{ font-size: 14px; }

/* 9 Oct - HOW THE HOUSE CAME BACK (restoration): six illustrated steps, two across on wide screens */
.g .g-how{ list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s6) var(--s7, 56px); }
@media (min-width: 900px){ .g .g-how{ grid-template-columns: 1fr 1fr; } }
.g .g-how__i{ display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); align-items: start; }
.g .g-how__ill{ width: 72px; color: var(--gilt); }
.g .g-how__t{ margin: .2rem 0 var(--s2); font-family: var(--display); font-weight: 400; font-size: clamp(21px, .5vw + 17px, 25px); line-height: 1.2; color: var(--blue-deep); }
.g .g-how__d{ margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 600px){ .g .g-how__i{ grid-template-columns: 52px 1fr; gap: var(--s3); } .g .g-how__ill{ width: 52px; } .g .g-how__d{ font-size: 16px; } }
.g .g-how__lead{ margin-top: var(--s4); font-style: italic; color: var(--ink-2); }

/* 10 Oct - HOMEPAGE: the restoration band (a before/now of the dining room, on navy), aligned like every other section */
.g .g-homeresto__pair{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s6); }
.g .g-homeresto__pair figure{ margin: 0; position: relative; overflow: hidden; }
.g .g-homeresto__pair img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.g .g-homeresto__cap{ margin: var(--s3) 0 0; font-family: var(--serif); font-style: italic; font-size: 17px; opacity: .85; }
.g .g-homeresto__p{ max-width: 40rem; margin-top: var(--s5); }
.g .g-homeresto__cta{ margin-top: var(--s5); }
@media (max-width: 600px){ .g .g-homeresto__pair{ gap: 6px; } }

/* 10 Oct - BOOKING PAGE, ADD TO YOUR STAY: a gilt drawing beside each extra; rows with no quantity get proper columns */
.g .g-mb-extra{ position: relative; padding-left: 84px; }
.g .g-mb-extra__ill{ position: absolute; left: 0; top: 2px; width: 64px; color: var(--gilt); }
.g .g-mb-extra__ill svg{ width: 100%; height: auto; display: block; }
.g .g-mb-acts.g-mb-extra--noqty:has(> input[name="action"][value="add_extra"]){ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; }
.g .g-mb-acts.g-mb-extra:has(> input[name="action"][value="add_extra"]) + .g-mb-acts.g-mb-extra:has(> input[name="action"][value="add_extra"]) .g-mb-extra__ill{ top: calc(var(--s3) + 2px); }
@media (max-width: 600px){
  .g .g-mb-extra{ padding-left: 56px; }
  .g .g-mb-extra__ill{ width: 42px; }
  .g .g-mb-acts.g-mb-extra--noqty:has(> input[name="action"][value="add_extra"]){ grid-template-columns: minmax(0, 1fr); }
  .g .g-mb-acts.g-mb-extra--noqty:has(> input[name="action"][value="add_extra"]) > button{ grid-column: 1 / -1; }
}

/* 10 Oct - BOOKING PAGE, the end: cancelling (the advice once, the fold as a real link) and the bill with everything else */
.g .g-mb-cancel{ margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.g .g-mb-cancel .g-cancel-fold{ border-top: 0; padding-top: 0; }
.g .g-cancel-fold > summary{ display: inline-flex; gap: .45rem; font-size: 16px; color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; min-height: 44px; }
.g .g-cancel-fold > summary::after{ content: "›"; display: inline-block; color: var(--gilt); transition: transform .2s ease; }
.g .g-cancel-fold[open] > summary::after{ content: "›"; transform: rotate(90deg); }
.g .g-cancel-fold .btn-text-danger{ font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.g .g-mb-end{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s6); }
.g .g-mb-end .g-link{ font-size: 16px; }
.g .g-mb-end{ margin-top: var(--s4); }
.g .g-night--next{ max-width: none; width: 100%; box-sizing: border-box; }

/* 10 Oct - HOME HERO, the second way in: the full sentence on wider screens, a shorter one on a phone, each on one line */
.g .g-hero__alttext{ white-space: nowrap; }
.g .g-hero__altshort{ display: none; }
@media (max-width: 40rem){ .g .g-hero__altlong{ display: none; } .g .g-hero__altshort{ display: inline; } }

/* 10 Oct - STAY, DINNER NEARBY (only when the château's dining is not open): restaurants with a drawing each */
.g .g-eat{ list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s5) var(--s7, 56px); }
@media (min-width: 900px){ .g .g-eat{ grid-template-columns: 1fr 1fr; } }
.g .g-eat__i{ display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); align-items: start; }
.g .g-eat__ill{ width: 72px; color: var(--gilt); }
.g .g-eat__t{ margin: .2rem 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(21px, .5vw + 17px, 25px); line-height: 1.2; color: var(--blue-deep); }
.g .g-eat__where{ margin: var(--s1, 4px) 0 var(--s2); font-family: var(--ui); font-size: 14px; letter-spacing: .02em; color: var(--ink-2); }
.g .g-eat__d{ margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 600px){ .g .g-eat__i{ grid-template-columns: 52px 1fr; gap: var(--s3); } .g .g-eat__ill{ width: 52px; } .g .g-eat__d{ font-size: 16px; } }
.g .g-eat__also{ margin-top: var(--s5); font-style: italic; color: var(--ink-2); }

/* 10 Oct - DESIGN REVIEW: the booking form's "Add to your stay" (book_room.html, inside .g-step) shared the class .g-extras
   with Stay's tile grid, whose later rule forced 2-4 narrow columns - cards ~155px wide, the text one word to a line. The
   booking list gets its own columns; Stay's tiles (not in .g-step) are untouched. */
.g .g-step .g-extras{ grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 60rem){ .g .g-step .g-extras{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g .g-step .g-extras > li > .g-check > .g-addons__notice{ grid-column: 2 / -1; margin-top: var(--s1, 4px); }
.g .g-step .g-extras .g-check__t > span{ display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.g .g-step .g-extras .g-check > .g-fig{ white-space: nowrap; }
/* DESIGN REVIEW (10 Oct) - two more shared-class collisions, and narrow tiles on a phone:
   1. the arrival card's "Save this page" note used .g-arrive__n, the class of the numbered circles - it was drawn in a
      42px circle. Now .g-arrive__note, with the small-print style it was written for.
   2. Privacy put whole paragraphs in .g-facts-list (two pairs across, an 8rem label column) - each explanation in a 136px
      sliver. The prose version: one per row, the label above, the paragraph at full width.
   3. Restoration's and the Estate page's tiles carry sentences; on a phone, one tile per row instead of two at 133px. */
.g .g-arrive__note{ margin: var(--s5) 0 0; font-family: var(--ui); font-size: 15px; color: var(--ink-2); }
.g .g-facts-list.g-facts-list--prose{ grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.g .g-facts-list.g-facts-list--prose > div{ grid-template-columns: minmax(0, 1fr); gap: var(--s1, 4px); }
.g .g-facts-list.g-facts-list--prose dd{ font-size: 16px; line-height: 1.65; }
@media (max-width: 30rem){ .g .g-extras:has(.g-extras__d){ grid-template-columns: minmax(0, 1fr); } }
/* DESIGN REVIEW (10 Oct) - the bills (guest, workshop), the event quote and the shared payment page sit in a bare
   div.statement: centred at 760px on a desktop, but with no side margin below that - text and tables ran to the screen's
   edges. And the charge/payment tables right-aligned every heading but the first, so "Description" and "Method" sat right
   over left-aligned text. */
@media (max-width: 50rem){ .g div.statement{ padding-left: var(--s4); padding-right: var(--s4); box-sizing: border-box; } }
.g .statement .statement-lines thead th:not(:last-child){ text-align: left; }
.g .statement .statement-lines thead th:last-child{ text-align: right; }
.g .statement .table-wrap th:first-child, .g .statement .table-wrap td:first-child{ padding-left: var(--s3); }
.g .statement .table-wrap th:last-child, .g .statement .table-wrap td:last-child{ padding-right: var(--s3); }
@media (max-width: 40rem){ .g .statement-head > div:last-child{ text-align: left !important; margin-top: var(--s3); } }

/* 10 Oct - ROOM PAGE: the chosen dates, under the price (they were 2,300px down the page) */
.g .g-roomtop__dates{ margin: var(--s4) 0 var(--s5); padding: var(--s4) var(--s5); background: var(--paper, #fbf7ef); border: 1px solid rgba(115,86,45,.2); border-left: 3px solid var(--gilt); max-width: 44rem; }
.g .g-roomtop__dk{ margin: 0; font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-deep, #73562d); }
.g .g-roomtop__dv{ margin: 4px 0 var(--s3); font-family: var(--display); font-size: clamp(22px, 1vw + 17px, 28px); line-height: 1.2; color: var(--blue-deep); }
.g .g-roomtop__da{ margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.g .g-roomtop__da .g-link{ font-size: 16px; }

/* 10 Oct - PRICES (owner: "the pricing design is not nice on the rooms and workshops"). One look everywhere a price is
   quoted: FROM in small capitals, the figure in the display serif, the unit beneath. Homepage cards use .g-price; the
   Stay cards (.g-card__rate), workshop cards (.g-wscard__price) and workshop dates (.g-sit__rate) take the same rules. */
.g .g-price, .g .g-card__rate, .g .g-wscard__price, .g .g-sit__rate{
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55rem; row-gap: 2px;
  margin: var(--s3) 0 var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(115,86,45,.18);
}
.g .g-price__k{ flex-basis: 100%; font-family: var(--ui); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-deep, #73562d); }
.g .g-price__n, .g .g-card__rate b, .g .g-wscard__price .g-fig, .g .g-sit__rate .g-fig{
  font-family: var(--display); font-weight: 400; font-size: clamp(27px, .6vw + 22px, 32px); line-height: 1.1; color: var(--blue-deep); margin: 0;
}
.g .g-price__u, .g .g-card__rate span:not(.g-price__k), .g .g-wscard__price span:last-child, .g .g-sit__rate span:last-child{
  font-family: var(--ui); font-size: 14.5px; line-height: 1.4; color: var(--ink-2);
}
.g .g-card__rate .g-card__per{ flex-basis: 100%; font-size: 14px; color: var(--ink-faint); }
.g .g-homeroom__rate{ display: none; }
/* Icon chips on room cards */
.g .g-tags--icons li{ display: inline-flex; align-items: center; gap: 6px; }
.g .g-tags--icons .g-ci{ flex: none; color: var(--gilt-deep, #73562d); }

/* 10 Oct - WHAT YOU CAN DO HERE (owner: "needs formatting"): the cards had no inner padding, so the corner flourishes sat
   under the headings and links; two cards (dining off) sat in two thirds of a three-column grid. */
.g .g-three__i{ padding: var(--s5); background: var(--paper, #fbf7ef); border: 1px solid rgba(115,86,45,.16); border-top: 2px solid var(--gold); }
@media (min-width: 62rem){ .g .g-three__l:not(:has(> li:nth-child(3))){ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
.g .g-three__b > .g-price{ margin-top: auto; }
.g .g-three__b > .g-price, .g .g-three__b > .g-three__a{ max-width: none; }
.g .g-three__i{ align-items: stretch; }
.g .g-three__b{ width: 100%; }

/* 10 Oct - WEATHER (owner: "the weather where we have that is not designed properly at all"; "no average temperature when
   selecting dates"). Typical weather (Stay page and the room page's dates strip): the month in small capitals, day and
   night as two figures with a sun and a moon, then any note. The live reading (.g-wx, Code's markup) gets the same
   treatment from here - its parts sat together as "13°Covercast". */
.g .g-typwx{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: var(--s4) 0 0; padding: 12px 16px;
  background: #fff; border: 1px solid rgba(115,86,45,.2); border-left: 3px solid var(--gilt); width: fit-content; max-width: 100%;
  font-family: var(--ui); font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.g .g-typwx[hidden]{ display: none; }
.g .g-typwx__k{ flex-basis: 100%; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-deep, #73562d); }
.g .g-typwx__v{ display: inline-flex; align-items: center; gap: 8px; }
.g .g-typwx__v svg{ flex: none; color: var(--gilt-deep, #73562d); }
.g .g-typwx__v b{ font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--blue-deep); }
.g .g-typwx__n{ flex-basis: 100%; font-size: 14.5px; font-style: italic; color: var(--ink-2); }
.g .g-roomtop__dates .g-typwx{ margin: 0 0 var(--s4); background: transparent; border: 0; padding: 0; }
.g .g-wx__live{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-family: var(--ui); font-size: 15px; color: var(--ink-2); }
.g .g-wx__k{ font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-deep, #73562d); }
.g .g-wx__t{ font-family: var(--display); font-size: 21px; color: var(--blue-deep); }
.g .g-wx__n{ flex-basis: 100%; font-style: italic; }
/* The room page's price, in the same voice as the cards */
.g .g-room__meta{ font-family: var(--ui); font-size: 14.5px; color: var(--ink-2); }
.g .g-room__meta .g-fig{ font-family: var(--display); font-weight: 400; font-size: clamp(27px, .6vw + 22px, 32px); color: var(--blue-deep); margin-right: .35rem; }
/* The emblem at the foot of the page had no reserved size, so it could push the footer down as it loaded. */
.g .g-close__mark{ width: 62px; height: 62px; object-fit: contain; }
@media (min-width: 30.01rem) and (max-width: 62rem){ .g .g-extras:has(.g-extras__d){ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 12 Oct - ROOM CARD SLIDESHOWS (owner: "not just one photo for each room - multiple") */
.g .g-slides{ position: relative; }
.g .g-slides__track{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.g .g-slides__track::-webkit-scrollbar{ display: none; }
.g .g-slides__track > img{ flex: 0 0 100%; width: 100%; scroll-snap-align: start; user-select: none; }
.g .g-slides__track:focus-visible{ outline: 2px solid var(--gilt); outline-offset: -2px; }
.g .g-slides__btn{ position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(251,247,239,.92); color: var(--blue-deep); font-size: 26px; line-height: 38px; text-align: center; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,.18); opacity: 0; transition: opacity .2s ease; }
.g .g-slides__prev{ left: 10px; } .g .g-slides__next{ right: 10px; }
.g .g-slides:hover .g-slides__btn, .g .g-slides__btn:focus-visible{ opacity: 1; }
@media (hover: none){ .g .g-slides__btn{ display: none; } }
.g .g-slides__dots{ position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.g .g-slides__dots span{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 2px rgba(0,0,0,.4); }
.g .g-slides__dots span.is-on{ background: #fff; }

/* 12 Oct - WORKSHOP ITINERARY (owner: "needs improving"): on a phone the numbered rail gave up a column, the morning /
   afternoon / evening sat two to a row in a narrow card, and the drawing crowded the heading. */
.g .g-journey__k{ display: none; }
@media (max-width: 600px){
  .g .g-journey__n{ display: none; }
  .g .g-journey__d{ grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .g .g-journey__k{ display: block; margin: 0 0 4px; font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-deep, #73562d); }
  .g .g-journey__card{ position: relative; }
  .g .g-journey__ill{ position: absolute; top: 14px; right: 14px; width: 40px; opacity: .9; }
  .g .g-journey__t{ padding-right: 48px; }
  .g .g-journey__m{ display: block; }
  .g .g-journey__m li{ display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid rgba(115,86,45,.15); }
  .g .g-journey__m li b{ display: inline-flex; align-items: center; gap: 6px; }
}
@media (max-width: 600px){
  .g .g-journey__card{ padding: 26px 22px 22px; }
  .g .g-journey__m li{ grid-template-columns: 8.8rem minmax(0, 1fr); }
  .g .g-journey__m li b{ white-space: nowrap; }
}

/* 12 Oct - THEN AND NOW as a drag slider (progressive: without the script the pairs stay side by side) */
.g .g-tn__pair--slide{ display: block; }
.g .g-tn__frame{ --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand, #EDE4D3); user-select: none; }
.g .g-tn__pair--tall .g-tn__frame{ aspect-ratio: 3 / 4; max-width: 600px; margin-inline: auto; }
.g .g-tn__frame figure{ position: absolute; inset: 0; margin: 0; }
.g .g-tn__frame img{ width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.g .g-tn__a{ clip-path: inset(0 0 0 var(--pos)); }
.g .g-tn__a .g-tn__tag{ left: auto; right: 14px; }
.g .g-tn__range{ position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.g .g-tn__handle{ position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,.35); pointer-events: none; }
.g .g-tn__handle::after{ content: "\2039\00a0\203A"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: rgba(251,247,239,.96); color: var(--blue-deep);
  display: grid; place-items: center; font: 20px/1 var(--serif); box-shadow: 0 1px 8px rgba(0,0,0,.28); }
.g .g-tn__range:focus-visible ~ .g-tn__handle::after{ outline: 3px solid var(--gilt); outline-offset: 2px; }
.g .g-tn__pair--slide .g-tn__cap{ margin-top: var(--s3); }
@media (max-width: 600px){ .g .g-tn__a .g-tn__tag{ right: 8px; } .g .g-tn__handle::after{ width: 40px; height: 40px; } }
.g .g-tn__pair--slide:not(.g-tn__pair--tall) .g-tn__frame{ max-width: 900px; margin-inline: auto; }
.g .g-tn__pair--slide .g-tn__cap{ max-width: 900px; margin-inline: auto; }
/* 13 Oct - the homepage's full-experience band: a framed photograph of the dining room above the next dates */
.g .g-full__fig{ margin: 0 0 var(--s5); }
.g .g-full__fig img{ display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--gilt-leaf, rgba(198,166,110,.5)); }
.g .g-full__fig figcaption{ margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 15px; color: rgba(255,255,255,.82); }

/* 13 Oct - WAYS TO SPEND THE DAYS (homepage): the château's pleasures in five tabs on deep blue, with our drawings */
.g .g-plaisirs{ background: var(--blue-deep); color: #fff; padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--gilt-leaf, rgba(198,166,110,.5)); border-bottom: 1px solid var(--gilt-leaf, rgba(198,166,110,.5)); }
.g .g-plaisirs__fr{ margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gilt-on-dark, #C6A66E); }
.g .g-plaisirs__fr span{ margin-left: .5rem; font-family: var(--ui); font-style: normal; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.g .g-plaisirs__h{ margin: 6px 0 var(--s6); font-family: var(--display); font-weight: 400; font-size: clamp(32px, 2.4vw + 18px, 48px); line-height: 1.1; color: #fff; }
.g .g-plaisirs__tabs{ display: none; }
.g .g-plaisirs.is-tabbed .g-plaisirs__tabs{ display: flex; gap: var(--s2); margin: 0 0 var(--s6); border-bottom: 1px solid rgba(198,166,110,.35);
  overflow-x: auto; scrollbar-width: none; }
.g .g-plaisirs__tabs::-webkit-scrollbar{ display: none; }
.g .g-plaisirs__tab{ flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 16px 14px; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent; color: rgba(255,255,255,.75); cursor: pointer;
  font-family: var(--serif); font-size: 17px; white-space: nowrap; }
.g .g-plaisirs__tab:hover{ color: #fff; }
.g .g-plaisirs__tab[aria-selected="true"]{ color: #fff; border-bottom-color: var(--gilt-on-dark, #C6A66E); }
.g .g-plaisirs__tab:focus-visible{ outline: 2px solid var(--gilt-on-dark, #C6A66E); outline-offset: 2px; }
.g .g-plaisirs__ill{ width: 52px; height: 52px; color: var(--gilt-on-dark, #C6A66E); }
.g .g-plaisirs__ill svg{ width: 100%; height: 100%; }
.g .g-plaisirs__ill svg *{ stroke: currentColor; }
.g .g-plaisirs__panel{ display: grid; gap: var(--s5); align-items: center; margin-bottom: var(--s6); }
.g .g-plaisirs.is-tabbed .g-plaisirs__panel{ margin-bottom: 0; }
.g .g-plaisirs__panel[hidden]{ display: none; }
@media (min-width: 52rem){ .g .g-plaisirs__panel{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); } }
.g .g-plaisirs__img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border: 1px solid rgba(198,166,110,.45); background: rgba(255,255,255,.06); }
@media (max-width: 52rem){ .g .g-plaisirs__img{ aspect-ratio: 3 / 2; } }
.g .g-plaisirs__k{ margin: 0 0 var(--s2); font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-on-dark, #C6A66E); }
.g .g-plaisirs__p{ margin: 0 0 var(--s5); font-family: var(--display); font-size: clamp(22px, .8vw + 17px, 30px); line-height: 1.35; color: #fff; max-width: 32ch; }
.g .g-plaisirs__cta{ font-family: var(--serif); font-style: italic; font-size: 19px; color: #fff; text-decoration: underline; text-decoration-color: var(--gilt-on-dark, #C6A66E); text-underline-offset: 5px; }
.g .g-plaisirs__cta:hover{ color: var(--gilt-on-dark, #C6A66E); }
@media (max-width: 600px){ .g .g-plaisirs__tab{ font-size: 15px; padding: 8px 12px 12px; } .g .g-plaisirs__ill{ width: 40px; height: 40px; } }

/* 13 Oct - a little more blue, and more drawings (owner) */
:root{ --sky: #E8EEF6; }
.g .g-journal, .g .g-faq-sec{ background: var(--sky); }
.g .g-journal__h{ position: relative; padding-left: 64px; }
.g .g-journal__h::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%237A5A30' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='12' width='36' height='24' rx='1.5'/%3E%3Cpath d='M6 13l18 13 18-13M6 36l13-12M42 36L29 24'/%3E%3Ccircle cx='35' cy='29' r='4.5'/%3E%3Cpath d='M33.2 29h3.6M35 27.2v3.6'/%3E%3C/svg%3E"); }
@media (max-width: 600px){ .g .g-journal__h{ padding-left: 52px; } .g .g-journal__h::before{ width: 40px; height: 40px; } }
.g .g-three__ill{ display: block; width: 56px; height: 56px; margin: 0 0 var(--s3); color: var(--gilt-deep, #73562d); }
.g .g-three__ill svg{ width: 100%; height: 100%; }
.g .g-journal__h{ padding-left: 0; padding-top: 60px; }
.g .g-journal__h::before{ left: 50%; top: 0; transform: translateX(-50%); }
@media (max-width: 600px){ .g .g-journal__h{ padding-left: 0; padding-top: 52px; } }
/* 13 Oct - more drawings: a small gilt drawing above key section headings (owner) */
.g .g-hill{ display: block; width: 56px; height: 56px; margin: 0 0 var(--s2); color: var(--gilt-deep, #73562d); }
.g .g-hill svg{ width: 100%; height: 100%; }
.g .g-sec--dark .g-hill, .g .g-sec--blue .g-hill{ color: var(--gilt-on-dark, #C6A66E); }
@media (max-width: 600px){ .g .g-hill{ width: 46px; height: 46px; } }
/* 13 Oct - faint background drawings behind text-heavy sections (an idea from The Pig, in our own line drawings) */
.g .g-wm-host{ position: relative; overflow: hidden; }
.g .g-wm-host > .g-wrap{ position: relative; }
.g .g-wm{ position: absolute; right: -2%; top: 50%; transform: translateY(-50%); width: clamp(220px, 28vw, 380px); height: clamp(220px, 28vw, 380px);
  color: var(--gilt-deep, #73562d); opacity: .08; pointer-events: none; z-index: 0; }
.g .g-wm svg{ width: 100%; height: 100%; }
.g .g-wm-host > .g-wrap > :not(.g-wm){ position: relative; z-index: 1; }
@media (max-width: 600px){ .g .g-wm{ width: 200px; height: 200px; right: -40px; top: 30%; opacity: .06; } }
.g .g-wm--left{ right: auto; left: -60px; top: auto; bottom: -20px; transform: none; }

/* 13 Oct - AS IT WAS as prints laid on a table (an idea from The Pig's scrapbook, kept to this one section) */
.g #as-it-was .g-old figure{ position: relative; background: #fffdf8; padding: 12px 12px 14px; box-shadow: 0 14px 28px -16px rgba(20,48,95,.45), 0 1px 2px rgba(0,0,0,.08);
  transform: rotate(var(--tilt, 0deg)); transition: transform .35s ease, box-shadow .35s ease; }
.g #as-it-was .g-old img{ border: 0; box-shadow: none; }
.g #as-it-was .g-old figcaption{ margin-top: 10px; font-size: 15px; line-height: 1.35; color: #5b4a33; }
.g #as-it-was .g-old figure:nth-child(1){ --tilt: -2.2deg; }
.g #as-it-was .g-old figure:nth-child(2){ --tilt: 1.6deg; }
.g #as-it-was .g-old figure:nth-child(3){ --tilt: -1deg; }
@media (min-width: 900px){
  .g #as-it-was .g-old--3{ gap: 0; padding: 12px 8px; }
  .g #as-it-was .g-old figure:nth-child(2){ margin: 34px -14px 0; z-index: 1; }
  .g #as-it-was .g-old figure:hover{ transform: rotate(0deg) translateY(-4px); box-shadow: 0 22px 36px -18px rgba(20,48,95,.5); z-index: 2; }
}
@media (max-width: 899px){ .g #as-it-was .g-old figure:nth-child(n){ --tilt: 0deg; } .g #as-it-was .g-old figure:nth-child(odd){ --tilt: -1deg; } .g #as-it-was .g-old figure:nth-child(even){ --tilt: 1deg; } }
@media (prefers-reduced-motion: reduce){ .g #as-it-was .g-old figure{ transition: none; } .g #as-it-was .g-old figure:hover{ transform: rotate(var(--tilt, 0deg)); } }
.g .g-hill--dark{ color: var(--gilt-on-dark, #C6A66E); }
.g .g-plaisirs__cta{ display: inline-flex; align-items: center; min-height: 44px; }

/* 13 Oct - WEDDINGS: how many and where; flowers, food and drink from us; where everyone else stays (also Photoshoots) */
.g .g-wednum{ display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 52rem){ .g .g-wednum{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g .g-wednum__i{ background: #fffdf8; border: 1px solid var(--line); padding: var(--s5); text-align: center; }
.g .g-wednum__ill{ display: block; width: 76px; height: 76px; margin: 0 auto var(--s3); color: var(--gilt-deep, #73562d); }
.g .g-wednum__ill svg{ width: 100%; height: 100%; }
.g .g-wednum__n{ margin: 0; font-family: var(--display); font-size: clamp(28px, 1.2vw + 20px, 38px); line-height: 1.1; color: var(--blue-deep); }
.g .g-wednum__t{ margin: 6px 0 var(--s3); font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-deep, #73562d); font-weight: 600; }
.g .g-wednum__i .g-p{ margin: 0; text-align: center; }
.g .g-wed-gold__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 40rem){ .g .g-wed-gold__grid{ grid-template-columns: minmax(0, 1fr); } }
.g .g-wedus{ display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 52rem){ .g .g-wedus{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g .g-wedus__i{ margin: 0; }
.g .g-wedus__i img{ display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand, #EDE4D3); }
.g .g-wedus__i figcaption{ margin-top: var(--s3); font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink); }
.g .g-wedus__i figcaption b{ display: block; margin-bottom: 2px; font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-deep, #73562d); font-weight: 600; }
.g .g-nearby__grid{ display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 46rem){ .g .g-nearby__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g .g-nearby__i{ background: #fffdf8; border: 1px solid var(--line); border-top: 3px solid var(--gilt, #C6A66E); padding: var(--s5); }
.g .g-nearby__far{ margin: 0 0 var(--s2); font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-deep, #73562d); }
.g .g-nearby__far span{ font-weight: 700; margin-right: .4em; }
.g .g-nearby__t{ margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, .8vw + 18px, 30px); color: var(--blue-deep); }
.g .g-nearby__where{ margin: 4px 0 var(--s3); font-family: var(--serif); font-style: italic; color: var(--ink-soft, #5b4a33); }
.g .g-nearby__note{ margin-top: var(--s4); font-style: italic; }

/* 13 Oct - WEDDINGS, made more elegant (owner): no boxed cards - gilt hairlines between columns, centred, italic figures,
   photographs as framed prints, the places to stay as two facing columns. */
.g .g-wednum{ gap: 0; margin-top: var(--s6); }
.g .g-wednum__i{ background: none; border: 0; padding: var(--s4) clamp(16px, 3vw, 40px); }
@media (min-width: 52rem){ .g .g-wednum__i + .g-wednum__i{ border-left: 1px solid rgba(198,166,110,.55); } }
@media (max-width: 51.99rem){ .g .g-wednum__i + .g-wednum__i{ border-top: 1px solid rgba(198,166,110,.55); } }
.g .g-wednum__ill{ width: 64px; height: 64px; }
.g .g-wednum__n{ font-style: italic; font-size: clamp(30px, 1.4vw + 20px, 42px); }
.g .g-wednum__t{ margin: 8px 0 var(--s3); }
.g .g-wednum__i .g-p{ max-width: 28ch; margin-inline: auto; font-size: 17px; line-height: 1.6; }

.g .g-wedus{ gap: clamp(20px, 3vw, 44px); }
.g .g-wedus__i{ text-align: center; }
.g .g-wedus__i img, .g .g-wed-gold__grid img{ padding: 8px; background: #fffdf8; border: 1px solid rgba(198,166,110,.7); box-shadow: 0 10px 24px -18px rgba(20,48,95,.45); }
.g .g-wedus__i figcaption{ max-width: 30ch; margin: var(--s4) auto 0; font-size: 17px; line-height: 1.55; }
.g .g-wedus__i figcaption b{ margin-bottom: 6px; }
.g .g-wed-gold__grid figure{ border: 0; }

.g .g-nearby{ text-align: center; }
.g .g-nearby .g-hill, .g .g-nearby .g-place, .g .g-nearby .g-fr{ margin-inline: auto; }
.g .g-nearby .g-place::after{ margin-inline: auto; }
.g .g-nearby .g-intro{ max-width: 46ch; margin-inline: auto; }
.g .g-nearby__grid{ gap: 0; margin-top: var(--s6); }
.g .g-nearby__i{ background: none; border: 0; border-top: 0; padding: var(--s3) clamp(20px, 4vw, 56px); }
@media (min-width: 46rem){ .g .g-nearby__i + .g-nearby__i{ border-left: 1px solid rgba(198,166,110,.55); } }
@media (max-width: 45.99rem){ .g .g-nearby__i + .g-nearby__i{ border-top: 1px solid rgba(198,166,110,.55); margin-top: var(--s4); padding-top: var(--s5); } }
.g .g-nearby__far{ letter-spacing: .18em; }
.g .g-nearby__far span{ font-weight: 600; }
.g .g-nearby__t{ font-size: clamp(26px, 1vw + 19px, 34px); }
.g .g-nearby__i .g-p{ max-width: 34ch; margin-inline: auto; font-size: 17px; line-height: 1.6; }
.g .g-nearby__note{ max-width: 44ch; margin: var(--s6) auto 0; color: var(--ink-soft, #5b4a33); }
.g .g-nearby__note::before{ content: "\2766"; display: block; margin-bottom: var(--s3); font-style: normal; font-size: 20px; color: var(--gilt, #C6A66E); }
.g .g-wedus__i figcaption{ border-left: 0 !important; padding-left: 0 !important; }
.g .g-nearby p.g-intro, .g .g-nearby p.g-nearby__note{ margin-left: auto; margin-right: auto; text-align: center; }
.g .g-nearby p.g-intro, .g .g-nearby p.g-nearby__note{ margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 60rem){ .g .g-nearby__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 46rem) and (max-width: 59.99rem){ .g .g-nearby__grid{ grid-template-columns: minmax(0, 1fr); } .g .g-nearby__i + .g-nearby__i{ border-left: 0; border-top: 1px solid rgba(198,166,110,.55); margin-top: var(--s4); padding-top: var(--s5); } }
.g .g-nearby__img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 var(--s4); padding: 6px; background: #fffdf8; border: 1px solid rgba(198,166,110,.7); }
.g .g-nearby__far span{ display: block; margin: 0 0 3px; font-size: 13px; }
.g .g-nearby__far{ font-size: 11px; }
.g .g-homewed__cta{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s6); }
.g .g-homewed__alt{ font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--gilt, #C6A66E); text-underline-offset: 5px; }

/* 13 Oct - phones: the figures strip scrolled sideways, hiding all but the first figure; now all three side by side */
@media (max-width: 600px){
  .g .g-strip:has(.g-strip__i){ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; overflow: visible; gap: 6px; }
  .g .g-strip__i{ min-width: 0; padding-inline: 4px; }
  .g .g-strip__n{ font-size: 22px; }
  .g .g-strip__l{ font-size: 10px; letter-spacing: .1em; line-height: 1.35; }
  .g .g-strip__m{ transform: scale(.85); }
  /* the Gold Suite: one large photograph, then two side by side */
  .g .g-wed-gold__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .g .g-wed-gold__grid li:first-child{ grid-column: 1 / -1; }
  /* What We Look After: landscape on a phone, so the three are not a long climb */
  .g .g-wedus__i img{ aspect-ratio: 4 / 3; }
}
@media (max-width: 600px){ .g .g-wed-gold__grid li:not(:first-child){ grid-column: auto !important; } }
/* 13 Oct - Events overview: each of the three ways has its drawing and leads to its own page */
.g .g-way{ display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 2px solid var(--gilt, #C6A66E); }
.g .g-way__ill{ display: block; width: 64px; height: 64px; margin-bottom: var(--s3); color: var(--gilt-deep, #73562d); }
.g .g-way__ill svg{ width: 100%; height: 100%; }
.g .g-way .g-p{ max-width: 30ch; }
.g .g-way__cta{ margin-top: auto; padding-top: var(--s4); font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--gilt, #C6A66E); text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 60rem){
  .g .g-grid--3:has(.g-way){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g .g-grid--3:has(.g-way) > :nth-child(3):last-child{ grid-column: auto; }
}
.g .g-way{ border-left: 0 !important; }
/* 13 Oct design check: nothing below the site's 12px floor */
.g .g-nearby__far{ font-size: 12px; letter-spacing: .14em; }
.g .g-nearby__far span{ font-size: 13px; }
@media (max-width: 600px){ .g .g-strip__l{ font-size: 12px; letter-spacing: .06em; } }

/* 13 Oct - RESTORATION "As We Found It": the family's own photographs of the ruin, framed like prints */
.g .g-found__lead{ margin: var(--s5) 0 var(--s5); }
.g .g-found__lead img{ display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; padding: 10px; background: #fffdf8; border: 1px solid rgba(198,166,110,.7); box-shadow: 0 14px 30px -20px rgba(20,48,95,.5); }
.g .g-found__lead figcaption{ margin-top: var(--s3); text-align: center; font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.g .g-found__grid img{ padding: 6px; background: #fffdf8; border: 1px solid rgba(198,166,110,.6); }
.g .g-found__more{ margin-top: var(--s5); text-align: center; }
.g .g-found__more a{ font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--gilt, #C6A66E); text-underline-offset: 5px; }
.g .g-found__lead figcaption{ border-left: 0 !important; padding-left: 0 !important; }

/* 14 Oct - WEDDINGS: a pair of tall photographs, framed like prints */
.g .g-wedpair{ display: grid; gap: clamp(20px, 3vw, 44px); }
@media (min-width: 52rem){ .g .g-wedpair{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g .g-wedpair figure{ margin: 0; }
.g .g-wedpair img{ display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; padding: 10px; background: #fffdf8; border: 1px solid rgba(198,166,110,.7); box-shadow: 0 14px 30px -20px rgba(20,48,95,.5); }
.g .g-wedpair figcaption{ margin-top: var(--s3); text-align: center; font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.g .g-wedpair figcaption{ border-left: 0 !important; padding-left: 0 !important; }
.g .g-wed-church .g-wedus__i figcaption{ font-style: italic; }

/* 14 Oct - HOMEPAGE "The Estate from Above": the aerials, one large and two beside it, framed like prints */
.g .g-aerial__grid{ display: grid; gap: clamp(14px, 2vw, 24px); margin-top: var(--s5); }
@media (min-width: 60rem){ .g .g-aerial__grid{ grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .g .g-aerial__main{ grid-row: 1 / 3; } }
.g .g-aerial__grid figure{ margin: 0; display: flex; flex-direction: column; min-height: 0; }
.g .g-aerial__grid img{ display: block; width: 100%; height: 100%; min-height: 0; flex: 1; object-fit: cover; aspect-ratio: 3 / 2; padding: 8px; background: #fffdf8; border: 1px solid rgba(198,166,110,.7); box-shadow: 0 14px 30px -20px rgba(20,48,95,.5); }
@media (min-width: 60rem){ .g .g-aerial__grid img{ aspect-ratio: auto; } }
.g .g-aerial__grid figcaption{ margin-top: var(--s2); text-align: center; font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: var(--ink-2); }
.g .g-aerial__more{ margin-top: var(--s5); text-align: center; }
.g .g-aerial__more a{ font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--gilt, #C6A66E); text-underline-offset: 5px; }
/* 14 Oct - aerials: the main one full width in its own landscape shape (the pool must stay in frame), two beneath */
@media (min-width: 60rem){
  .g .g-aerial__grid{ grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .g .g-aerial__main{ grid-row: auto; grid-column: 1 / -1; }
  .g .g-aerial__grid img{ aspect-ratio: 3 / 2; height: auto; flex: none; }
}
.g .g-aerial__grid figcaption{ border-left: 0 !important; padding-left: 0 !important; }
.g .g-aerial .g-aerial__more{ margin-left: auto !important; margin-right: auto !important; max-width: none; text-align: center; }
.g .g-aerial__grid figcaption{ align-self: stretch; text-align: center !important; }
.g .g-aerial__grid figcaption{ max-width: none !important; width: 100%; }
.g .g-nearby__site{ margin-top: var(--s3); }
.g .g-nearby__site a{ font-family: var(--serif); font-style: italic; color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--gilt, #C6A66E); text-underline-offset: 4px; }
/* 15 Oct - keep the château (top left of the photo) in frame on the Les Gîtes de Beille card */
.g .g-nearby__img[src*="gites-de-beille"]{ object-position: 18% 40%; }
/* 15 Oct - nearby cards: the photo opens that place's own set */
.g .g-nearby__shots{ margin: 0 0 var(--s4); }
.g .g-nearby__shots .g-nearby__img{ margin-bottom: var(--s2); cursor: zoom-in; }
.g .g-nearby__more{ display: block; margin: 0 auto; background: none; border: 0; padding: 4px 6px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--gilt, #C6A66E); text-underline-offset: 4px; cursor: pointer; }
.g .g-nearby__more:focus-visible{ outline: 2px solid var(--blue-deep); outline-offset: 3px; }

/* 15 Oct (owner) - PHOTO DESCRIPTIONS REMOVED: captions under photographs are hidden everywhere (the alt text stays for
   screen readers and search). Kept: the labelled captions of "What We Look After" (The flowers / The meals / The drinks). */
.g main figure figcaption{ display: none !important; }
.g main .g-wed-us:not(.g-wed-church) .g-wedus__i figcaption{ display: block !important; }
.g .g-lb__cap{ display: none !important; }
/* Photoshoots: the thirteenth photograph closes the grid at full width */
@media (min-width: 48rem){ .g .g-gallery > li.g-shot-wide{ grid-column: 1 / -1; } .g .g-gallery > li.g-shot-wide img{ aspect-ratio: 21 / 8 !important; height: auto !important; object-fit: cover; } }
/* Family Suite: its photographs are upright - a taller header and portrait-shaped grid photographs on its room page */
.g .g-room--family .g-roomhero{ height: clamp(22rem, 72vh, 46rem); object-position: center 40%; }
.g .g-room--family .g-strip.g-roomgal img{ aspect-ratio: 4 / 5 !important; }