/* One shell width, shared by the header and every page container.
   Two separate values is what caused the trouble: the header used
   clamp(1240px, 94vw, 1600px) while the bodies stayed at 1240, so from ~1400px up the brand sat
   180px left of the heading beneath it. Capping the header to 1240 aligned them and immediately
   broke the other way -- French needs 1404px in that row (brand 257 + nav 675 + toggle 86 +
   theme 83 + CTA 178 + gaps + padding), so the wordmark was clipped to "Jardin RÉSIDE" and
   "Clair de lune" spilled out of its button.
   Sharing ONE value fixes both: the columns line up at every width, and above 1400 there is
   genuinely room for the whole French row. */
:root{--shell:clamp(1240px, 94vw, 1600px);}
:root{
  --cream:#faf4e6;
  --paper:#fffcf3;
  --ink:#1c3a6b;
  --ink-deep:#142c53;
  --river:#2b5ba8;
  --gold:#d9a520;
  --gold-deep:#7c5c0a;
  --rose:#c97f8e;
  --sage:#7d9271;
  --line:rgba(28,58,107,.22);
  --shadow:0 18px 50px -18px rgba(20,44,83,.35);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--ink-deep)}
img{display:block;max-width:100%}
a{color:inherit}
.serif{font-family:"Fraunces",Georgia,serif}

/* canvas grain — fractal noise + a faint linen weave, carried across every section like primed canvas */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:120;opacity:.06;
  background-image:
    repeating-linear-gradient(0deg, rgba(28,58,107,.32) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(28,58,107,.24) 0 1px, transparent 1px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}
body.night::after{
  opacity:.05;
  background-image:
    repeating-linear-gradient(0deg, rgba(231,237,251,.28) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(231,237,251,.2) 0 1px, transparent 1px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

/* clear focus states everywhere */
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- header ---------- */
.topbar{
  background:var(--ink-deep);color:#fbf6ea;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  padding:.55rem 1.5rem;display:flex;justify-content:center;gap:.6ch;text-align:center;flex-wrap:wrap;
}
.topbar a{color:#f4d47c;text-decoration:none;font-weight:600}
.topbar a:hover{text-decoration:underline}
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(250,244,230,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-inner{
  /* Grows with the viewport instead of sitting in a fixed 1240px column with empty margins
     either side on a wide monitor. clamp's FLOOR is the old value on purpose: plain 94vw would
     be NARROWER than today between 1160 and 1320px, and the full nav only exists above 1160px
     (below that it is a burger), so that band is exactly where it would have overflowed.
       1160px -> 1240 floor, capped by the viewport = unchanged
       1440px -> 1353
       1920px -> 1600 ceiling
     The ceiling matters as much as the growth: without it, a 2560px monitor would fling the
     brand and the nav to opposite edges. */
  /* Capped to match the CONTENT column. The clamp let the header grow to 1600px while every
     page body stays at 1240px, so from about 1400px up the brand sat as much as 180px left of the
     page heading beneath it -- two columns that should share an edge, visibly not sharing it.
     The room the clamp was buying is no longer needed: the header CTA now stands down below
     1360 and the theme toggle below 1400, which frees more width than the extra 360px ever did. */
  max-width:var(--shell);margin:0 auto;padding:.8rem 1.5rem;
  display:flex;align-items:center;gap:1.2rem;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;line-height:1.05;min-width:0}
.brand svg{flex:0 0 auto}
.brand .b1{font-family:"Fraunces",serif;font-style:italic;font-weight:600;font-size:1.32rem;color:var(--ink);white-space:nowrap}
.brand .b2{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
nav.main{margin-left:auto;display:flex;gap:1.7rem;align-items:center}
nav.main a{
  text-decoration:none;font-size:.92rem;font-weight:600;letter-spacing:.02em;position:relative;padding:.2rem 0;
}
nav.main a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--gold);transition:right .35s var(--ease);
}
nav.main a:hover::after,nav.main a:focus-visible::after{right:0}
.lang-toggle{
  display:flex;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden;font-size:.78rem;font-weight:700;letter-spacing:.06em;
}
.lang-toggle button{
  appearance:none;border:0;background:transparent;color:var(--ink);
  padding:.34rem .8rem;cursor:pointer;font:inherit;font-weight:700;
}
.lang-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.cta-pill{
  display:inline-block;background:var(--gold);color:var(--ink-deep);text-decoration:none;
  font-weight:700;font-size:.9rem;letter-spacing:.03em;
  padding:.62rem 1.25rem;border-radius:99px;border:1.5px solid var(--ink-deep);
  box-shadow:3px 3px 0 var(--ink-deep);transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  white-space:nowrap;
}
.cta-pill:hover,.cta-pill:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink-deep)}
.burger{
  display:none;margin-left:auto;appearance:none;background:none;border:1.5px solid var(--ink);border-radius:10px;
  width:44px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.mobile-menu{
  position:fixed;inset:0;z-index:200;background:var(--cream);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease),visibility .35s var(--ease);
}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu a{color:var(--ink);text-decoration:none;font-family:"Fraunces",serif;font-size:1.9rem;font-style:italic}
.mobile-menu a:hover{color:var(--gold)}
.mobile-menu .close-m{
  position:absolute;top:1.2rem;right:1.4rem;background:none;border:1.5px solid var(--ink);color:var(--ink);
  border-radius:99px;width:44px;height:44px;font-size:1.2rem;cursor:pointer;
}
.mobile-menu .m-call{margin-top:1rem;background:var(--gold);color:var(--ink-deep);font-family:"Instrument Sans",sans-serif;font-size:1rem;font-style:normal;font-weight:700;padding:.8rem 1.6rem;border-radius:99px;text-decoration:none}

/* ---------- hero ---------- */
.hero{position:relative;max-width:var(--shell);margin:0 auto;padding:3.5rem 1.5rem 4.5rem;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);
  margin-bottom:1.3rem;
}
.kicker::before{content:"";width:34px;height:1.5px;background:var(--gold)}
.hero h1{
  font-family:"Fraunces",serif;font-weight:400;
  font-size:clamp(2.05rem,5.4vw,4.4rem);line-height:1.06;letter-spacing:-.01em;color:var(--ink-deep);
}
.hero h1 em{font-style:italic;color:var(--river)}
.hero p.lead{margin:1.6rem 0 2.2rem;font-size:1.08rem;max-width:34rem;color:#2c4470}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.cta-ghost{
  display:inline-block;text-decoration:none;font-weight:700;font-size:.95rem;
  padding:.62rem 1.3rem;border-radius:99px;border:1.5px solid var(--ink);color:var(--ink);
  transition:background .2s,color .2s;
}
.cta-ghost:hover,.cta-ghost:focus-visible{background:var(--ink);color:var(--cream)}
.hero-note{margin-top:1.4rem;font-size:.85rem;color:#4a5f89;display:flex;align-items:center;gap:.5rem}
.hero-art{position:relative}
.arch{
  position:relative;
  border-radius:260px 260px 18px 18px;overflow:hidden;
  border:2px solid var(--ink);box-shadow:var(--shadow);
  background:var(--paper);
}
/* images fill the arch absolutely — the arch's aspect-ratio alone defines its height,
   so the photo can never collapse to a blank frame at any viewport width */
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-art .arch{aspect-ratio:4/5}
.arch .night-art{opacity:0;transition:opacity 1.6s var(--ease)}
body.night .arch .night-art{opacity:1}
/* hero painting: crop biased right so the heron keeps clear air inside the arch mask */
.parallax-paint{position:absolute;inset:0;transform:scale(1.06);will-change:transform}
.parallax-paint img{object-position:64% 50%}
.parallax-paint img.night-art{object-position:80% 50%}
/* a second, distant heron drifting across the painted sky (scroll-linked) */
.arch-heron{
  position:absolute;top:16%;left:14%;width:62px;height:auto;z-index:2;
  color:rgba(28,58,107,.72);opacity:.9;pointer-events:none;will-change:transform;
  transition:color .9s var(--ease);
}
body.night .arch-heron{color:rgba(7,12,27,.9)}
.hero-art figcaption{
  margin-top:.9rem;font-size:.82rem;font-style:italic;color:#4a5f89;text-align:center;font-family:"Fraunces",serif;
}
.sky-btn{
  position:absolute;bottom:14px;right:14px;z-index:5;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .95rem;border-radius:99px;border:1.5px solid var(--ink);
  background:rgba(250,244,230,.94);cursor:pointer;
  font:600 .8rem/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.05em;color:#142c53;
  box-shadow:0 8px 22px -10px rgba(20,44,83,.5);
  transition:transform .25s var(--ease),background-color .9s var(--ease),border-color .9s var(--ease),color .9s var(--ease);
}
.sky-btn:hover{transform:translateY(-2px)}
.sky-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:99px}
.sky-btn svg{width:18px;height:18px}
.sky-btn .ic-sun{display:none}
body.night .sky-btn .ic-moon{display:none}
body.night .sky-btn .ic-sun{display:block}
body.night .sky-btn{background:rgba(13,20,41,.92);border-color:#cfdaf2;color:#e7edfb}
/* wave divider */
.wave{display:block;width:100%;height:70px;color:var(--ink)}
.wave.gold{color:var(--gold)}
.wave-band{line-height:0;background:transparent}

/* ---------- river band ---------- */
.river-band{background:var(--ink);color:var(--cream);position:relative}
.river-inner{max-width:var(--shell);margin:0 auto;padding:4.5rem 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.river-inner h2{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.12}
.river-inner h2 em{color:#f4d47c}
.river-inner p{margin-top:1.2rem;color:#ccd8ee;max-width:32rem}
.river-photo{border-radius:16px;overflow:hidden;border:2px solid rgba(250,244,230,.5);box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.river-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.river-stats{display:flex;gap:2.4rem;margin-top:2rem;flex-wrap:wrap}
.river-stats .stat .n{font-family:"Fraunces",serif;font-size:1.6rem;color:#f4d47c;font-style:italic}
.river-stats .stat .l{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#9db2d8;margin-top:.2rem}

/* ---------- chapters ---------- */
.chapters{max-width:var(--shell);margin:0 auto;padding:5rem 1.5rem 2rem}
.section-head{max-width:46rem;margin-bottom:3.5rem}
.section-head h2{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(2rem,4vw,3.1rem);line-height:1.08;color:var(--ink-deep)}
.section-head h2 em{font-style:italic;color:var(--river)}
.section-head p{margin-top:1rem;color:#2c4470}
.chapter{
  /* Back to align-items:center, which is index.html's value and was the original design.
     I switched this to `start` this morning to fix the rooms page reading as three unaligned
     edges -- but index.html carries its own inline copy of this rule and never received the
     change, so the edit quietly split the pages: home centred, About and Services top-aligned.
     The rooms problem is now solved horizontally (the copy column centres on its own axis), so
     the reason for `start` is gone and consistency is worth more. */
  display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;
  padding:3.2rem 0;border-top:1px solid var(--line);
}
.chapter:first-of-type{border-top:0;padding-top:0}
.chapter .num{
  font-family:"Fraunces",serif;font-style:italic;font-size:.95rem;color:var(--gold-deep);
  display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;
}
.chapter .num::after{content:"";flex:0 0 40px;height:1px;background:var(--gold)}
.chapter h3{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.15;color:var(--ink-deep)}
.chapter p{margin-top:1rem;color:#2c4470;max-width:32rem}
.chapter .link-more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;text-decoration:none;font-weight:700;font-size:.92rem;color:var(--ink);
}
.chapter .link-more .arr{transition:transform .25s var(--ease)}
.chapter .link-more:hover .arr{transform:translateX(5px)}
.chapter .link-more span:first-child{border-bottom:2px solid var(--gold)}
/* Privacy / policy pages.
   Deliberately NOT .chapter — that is the homepage's image-and-copy component, which expects
   .chapter-copy + .chapter-art children inside a .chapters wrapper. A policy section has a
   number, a heading and a paragraph, and borrowing the class dropped all three into a 1fr 1fr
   grid with no max-width: the number landed in column one, the heading in column two, and the
   prose ran the full width of the viewport with nothing holding it off the left edge. */
.policy{max-width:var(--shell);margin:0 auto;padding:4.5rem 1.5rem 3rem}
.policy-block{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,44rem);grid-template-rows:auto 1fr;
  gap:.9rem 3.5rem;align-items:start;
  padding:2.8rem 0;border-top:1px solid var(--line);
}
.policy-block:first-child{border-top:0;padding-top:0}
.policy-block .c-num{
  grid-column:1;grid-row:1;
  font-family:"Fraunces",serif;font-style:italic;font-size:.95rem;color:var(--gold-deep);
  display:flex;align-items:center;gap:.7rem;
}
.policy-block .c-num::after{content:"";flex:0 0 40px;height:1px;background:var(--gold)}
.policy-block h2{
  grid-column:1;grid-row:2;
  font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.35rem,2.1vw,1.85rem);
  line-height:1.15;color:var(--ink-deep);
}
.policy-block p{grid-column:2;grid-row:1/span 2;margin:0;color:#2c4470;line-height:1.75}
.chapter-art{position:relative}
.chapter-art .arch{aspect-ratio:5/4}
.chapter:nth-child(even) .chapter-copy{order:2}
.chapter:nth-child(even) .chapter-art{order:1}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}

/* ROOMS PAGE ONLY: the row shrinks to its pills and centres, so it and the floor plan below share
   one centre line. Measuring the row's CONTAINER hid the problem it solves -- the container spans
   the whole column, so a plan centred on it drifted right of the visible tags, 41px at 1280 and
   131px at 1920. Pill widths change per room and per language, so it has to come from the layout
   rather than a fixed number, and justify-content keeps wrapped lines centred too.
   Scoped: this was global at first, which centred the tags on Services, About and the homepage,
   where the body copy beside them is left-aligned. Tags there must line up with the text. */
#roomlist .tag-row{justify-content:center;width:fit-content;max-width:100%;
  margin-left:auto;margin-right:auto}
.tag{
  font-size:.76rem;font-weight:600;letter-spacing:.05em;color:var(--ink);
  border:1px solid var(--line);border-radius:99px;padding:.32rem .8rem;background:var(--paper);
}
.polaroid{
  position:absolute;bottom:-26px;background:var(--paper);border:1.5px solid var(--ink);
  padding:.5rem .5rem .7rem;border-radius:8px;box-shadow:var(--shadow);width:170px;
}
.polaroid img{border-radius:4px;aspect-ratio:4/3;object-fit:cover}
.polaroid .cap{font-family:"Fraunces",serif;font-style:italic;font-size:.72rem;text-align:center;margin-top:.4rem;color:#4a5f89}
.polaroid.pl{left:-26px;transform:rotate(-4deg)}
.polaroid.pr{right:-16px;transform:rotate(3deg)}

/* ---------- hall ---------- */
.hall{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.hall-inner{max-width:var(--shell);margin:0 auto;padding:5rem 1.5rem;display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:center}
.hall .arch{border-color:rgba(250,244,230,.6);aspect-ratio:5/4}
.hall h2{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1}
.hall h2 em{color:#f4d47c}
.hall p{margin-top:1.2rem;color:#ccd8ee;max-width:30rem}
.hall .cta-pill{margin-top:1.8rem}
.hall .link-more{
  display:inline-flex;align-items:baseline;gap:.55rem;margin-top:2.2rem;text-decoration:none;font-weight:700;font-size:.92rem;color:inherit;
}
.hall .link-more .arr{transition:transform .25s var(--ease)}
.hall .link-more:hover .arr{transform:translateX(5px)}
.hall .link-more span:first-child{border-bottom:2px solid #f4d47c;padding-bottom:.3rem}

/* ---------- inquiry forms ---------- */
.inquiry-form{margin-top:1.6rem;display:grid;gap:1.05rem;max-width:34rem}
.inquiry-form .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.inquiry-form label{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);margin-bottom:.4rem}
.inquiry-form input,.inquiry-form select,.inquiry-form textarea{
  width:100%;background:var(--cream);border:1.5px solid var(--ink);border-radius:12px;
  padding:.6rem .85rem;font:inherit;font-size:.95rem;color:var(--ink);
}
.inquiry-form input:focus-visible,.inquiry-form select:focus-visible,.inquiry-form textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.inquiry-form textarea{min-height:110px;resize:vertical}
.inquiry-form label.f-check{display:flex;align-items:center;gap:.6rem;margin:0;font-size:.92rem;font-weight:600;letter-spacing:0;text-transform:none;color:inherit;cursor:pointer}
.inquiry-form label.f-check input{width:auto;accent-color:var(--gold)}
.inquiry-form .cta-pill{margin-top:.2rem;justify-self:start;cursor:pointer;font:inherit;font-weight:700;font-size:.9rem}
.form-note{font-size:.8rem;color:#4a5f89;max-width:30rem}
body.night .form-note{color:#aebbdd}
.hall .inquiry-form{max-width:none}
.hall .inquiry-form label{color:#f4d47c}
/* The hall form used to pin its field background, border and text to fixed values, so it looked
   the same in both themes while the home page's form flipped properly -- near-white blobs with a
   barely-there border, instead of the themed cream-and-navy fields everywhere else. Removing the
   pins lets it inherit the same rules as every other form on the site.

   The LABEL colour stays overridden below: this form sits on a navy section in both themes, and
   the site's dark-gold label (#7c5c0a) is unreadable on navy. That override exists because the
   background differs, which is a real reason; the field pins had none. */
.hall .form-note,body.night .hall .form-note{color:#ccd8ee}
.hall .inquiry-form .cta-pill{margin-top:.2rem}
@media (max-width:640px){.inquiry-form .f-row{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.gallery{padding:5rem 0 4rem}
.gallery .section-head{max-width:var(--shell);margin-left:auto;margin-right:auto;padding:0 1.5rem;margin-bottom:2.2rem}
.strip{
  display:flex;gap:1.2rem;overflow-x:auto;padding:1.2rem 1.5rem 1.6rem;
  scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;
}
/* centre the postcards on wide screens when they all fit; the auto margins
   collapse to 0 once the strip overflows, so it stays left-aligned & scrollable */
.strip figure:first-child{margin-left:auto}
.strip figure:last-child{margin-right:auto}
/* vintage "chrome era" postcards, c. 1950s–60s — the kind our residents grew up sending:
   aged white border, warm Kodachrome tint, printed caption, Rockland postmark & 5¢ stamp */
.strip figure{
  position:relative;flex:0 0 min(430px,78vw);scroll-snap-align:center;
  background:
    radial-gradient(120% 90% at 85% 6%, rgba(151,108,34,.07), transparent 55%),
    radial-gradient(130% 100% at 6% 96%, rgba(151,108,34,.06), transparent 55%),
    var(--paper);
  border:1.5px solid var(--ink);border-radius:5px;padding:.75rem .75rem .85rem;
  box-shadow:0 12px 30px -14px rgba(20,44,83,.3);
  transition:transform .3s var(--ease),background-color .9s var(--ease),border-color .9s var(--ease);
}
.strip figure:nth-child(odd){transform:rotate(-.8deg)}
.strip figure:nth-child(even){transform:rotate(.8deg)}
.strip figure:hover{transform:rotate(0) translateY(-4px)}
.strip img{
  border-radius:2px;aspect-ratio:3/2;object-fit:cover;width:100%;
  filter:sepia(.32) saturate(1.35) contrast(1.06) brightness(1.04);
}
/* faded-print vignette over the photo */
.strip figure::before{
  content:"";position:absolute;left:.75rem;right:.75rem;top:.75rem;aspect-ratio:3/2;
  border-radius:2px;pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,244,214,.14), rgba(90,60,20,.05) 60%),
    radial-gradient(115% 90% at 50% 42%, transparent 58%, rgba(64,42,10,.26) 100%);
}
/* postmark & stamp tucked over the corner */
.strip figure::after{
  content:"";position:absolute;top:-14px;right:-10px;width:158px;height:66px;
  pointer-events:none;transform:rotate(-5deg);opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 74'%3E%3Cg fill='none' stroke='%231c3a6b' stroke-linecap='round' opacity='.6'%3E%3Ccircle cx='38' cy='38' r='28' stroke-width='1.6'/%3E%3Ccircle cx='38' cy='38' r='21' stroke-width='1'/%3E%3Cpath d='M70 26c15-7 30-7 45 0' stroke-width='1.5'/%3E%3Cpath d='M72 38c15-7 30-7 45 0' stroke-width='1.5'/%3E%3Cpath d='M70 50c15-7 30-7 45 0' stroke-width='1.5'/%3E%3C/g%3E%3Cg fill='%231c3a6b' opacity='.72' font-family='Georgia,serif' text-anchor='middle'%3E%3Ctext x='38' y='29' font-size='6'%3EROCKLAND%3C/text%3E%3Ctext x='38' y='39' font-size='6.5'%3EJUIL 6%3C/text%3E%3Ctext x='38' y='47' font-size='6.5'%3E1962%3C/text%3E%3Ctext x='38' y='56' font-size='6'%3EONT.%3C/text%3E%3C/g%3E%3Cg transform='rotate(5 150 37)'%3E%3Crect x='128' y='8' width='44' height='58' fill='%23f7eed6' stroke='%23faf4e6' stroke-width='3.5' stroke-dasharray='.1 4.4' stroke-linecap='round'/%3E%3Crect x='132.5' y='12.5' width='35' height='49' fill='none' stroke='%231c3a6b' stroke-width='1' opacity='.6'/%3E%3Ctext x='150' y='23' font-size='6.2' text-anchor='middle' fill='%231c3a6b' font-family='Georgia,serif' textLength='30' lengthAdjust='spacingAndGlyphs'%3ECANADA%3C/text%3E%3Ccircle cx='150' cy='33' r='6' fill='none' stroke='%23d9a520' stroke-width='1.5'/%3E%3Cpath d='M136 43c4.5-5 9.5-5 14 0s9.5 5 14 0' fill='none' stroke='%232b5ba8' stroke-width='1.5'/%3E%3Cpath d='M136 49c4.5-5 9.5-5 14 0s9.5 5 14 0' fill='none' stroke='%232b5ba8' stroke-width='1.5'/%3E%3Ctext x='150' y='60' font-size='7' text-anchor='middle' fill='%231c3a6b' font-family='Georgia,serif'%3E5%3C/text%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.strip figure:nth-child(even)::after{transform:rotate(4deg)}
.strip figcaption{
  font-family:"Fraunces",serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:#4a5f89;margin-top:.55rem;text-align:center;
}
.strip-hint{max-width:var(--shell);margin:0 auto;padding:0 1.5rem;font-size:.8rem;color:#4a5f89;display:flex;align-items:center;gap:.5rem}

/* ---------- contact ---------- */
.contact{max-width:var(--shell);margin:0 auto;padding:5rem 1.5rem}
.contact-card{
  background:var(--paper);border:2px solid var(--ink);border-radius:26px;
  box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;
  position:relative;
}
.contact-copy{padding:3.2rem 3rem}
.contact-copy h2{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.08;color:var(--ink-deep)}
.contact-copy h2 em{font-style:italic;color:var(--river)}
.contact-copy>p{margin-top:1rem;color:#2c4470;max-width:28rem}
.contact-list{list-style:none;margin-top:2rem;display:grid;gap:1.1rem}
.contact-list li{display:flex;gap:1rem;align-items:flex-start}
.ci{
  flex:0 0 42px;height:42px;border-radius:50%;border:1.5px solid var(--ink);
  display:grid;place-items:center;background:var(--cream);
}
.contact-list .lbl{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.contact-list .val{font-weight:600;font-size:1.05rem}
.contact-list a{text-decoration:none;border-bottom:2px solid var(--gold)}
.contact-list a:hover{color:var(--river)}
.socials{display:flex;gap:.8rem;margin-top:2rem}
.socials a{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;
  transition:background .2s,transform .2s;
}
.socials a:hover{background:var(--gold);transform:translateY(-3px)}
.contact-art{position:relative;background:var(--ink);min-height:420px}
.contact-art img.painting{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.contact-art .veil{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,44,83,.15),rgba(20,44,83,.55));
}
.contact-art .tour{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  background:var(--cream);border:1.5px solid var(--ink);border-radius:16px;
  padding:1.2rem 1.5rem;text-align:center;width:min(320px,85%);
  box-shadow:0 16px 40px -10px rgba(0,0,0,.45);
}
.contact-art .tour .t{font-family:"Fraunces",serif;font-style:italic;font-size:1.15rem;color:var(--ink-deep)}
.contact-art .tour .cta-pill{margin-top:.8rem;display:inline-block}

/* ---------- footer ---------- */
footer.site{background:var(--ink-deep);color:#ccd8ee}
/* line-art nocturne — the river, the reeds and the heron carry the painted motif to the very end */
.foot-flourish{max-width:var(--shell);margin:0 auto;padding:3rem 1.5rem 0}
.foot-flourish svg{display:block;width:100%;height:auto;opacity:.95}
.foot-inner{max-width:var(--shell);margin:0 auto;padding:2.4rem 1.5rem 2.8rem;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.6rem}
.foot-logo{display:block;width:fit-content;text-decoration:none;margin-top:-.75rem}/* lifted so the mark sits evenly between the night scene and the text below */
.foot-logo .logo-duotone{
  width:min(264px,100%);height:auto;display:block;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.55));
}
.foot-inner p{font-size:.9rem;margin-top:1.4rem;max-width:26rem}
footer h4{
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:#f4d47c;margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem;
}
footer h4::before{content:"";flex:0 0 26px;height:1.5px;background:#f4d47c}
footer ul{list-style:none;display:grid;gap:.55rem;font-size:.92rem}
footer ul a{
  color:#dbe4f5;text-decoration:none;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
footer ul a:hover{color:#fff;border-color:#f4d47c}
.foot-bottom{
  border-top:1px solid rgba(204,216,238,.2);max-width:var(--shell);margin:0 auto;
  padding:1.3rem 1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:#8fa4cd;
}
.foot-bottom .fable{font-style:italic}
.foot-bottom .fable button{
  appearance:none;background:none;border:none;color:#f4d47c;font:inherit;font-style:italic;cursor:pointer;padding:0;
  border-bottom:1px dotted #f4d47c;
}

/* heron flight */
#heron-flyer{
  position:fixed;top:22vh;left:-220px;z-index:300;pointer-events:none;
  width:180px;opacity:0;
}
#heron-flyer svg{overflow:visible}
#heron-flyer.fly{animation:flyAcross 7s cubic-bezier(.45,.05,.55,.95) forwards}
@keyframes flyAcross{
  0%{transform:translate(0,3vh) rotate(4deg);opacity:0}
  8%{opacity:1}
  30%{transform:translate(34vw,-8vh) rotate(-5deg)}
  55%{transform:translate(60vw,-2vh) rotate(3deg)}
  80%{transform:translate(85vw,-10vh) rotate(-4deg)}
  93%{opacity:1}
  100%{transform:translate(calc(100vw + 260px),-6vh) rotate(1deg);opacity:0}
}
/* both wings hinge at the shoulder (95,51 in viewBox units): a quick downstroke,
   a slower recovery, the near wing trailing a beat behind the far one */
#heron-flyer .wing{transform-box:view-box;transform-origin:95px 51px}
@keyframes wingflap{0%,100%{transform:rotate(21deg)}44%{transform:rotate(-23deg)}}
#heron-flyer.fly .wing{animation:wingflap .9s cubic-bezier(.45,.05,.55,.95) infinite}
#heron-flyer.fly .wing-near{animation-delay:-.07s}
/* the body rides the beat: lowest as the wings top out, lifting through the downstroke */
@keyframes heronBob{0%,100%{transform:translateY(2.6px)}55%{transform:translateY(-3.4px)}}
#heron-flyer.fly svg{animation:heronBob .9s cubic-bezier(.45,.05,.55,.95) infinite}
.toast{
  position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--cream);padding:.7rem 1.3rem;border-radius:99px;
  font-size:.9rem;opacity:0;transition:.4s var(--ease);z-index:300;pointer-events:none;
  border:1px solid rgba(250,244,230,.4);white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* scroll flourish — html.rv-armed is set by JS only when the reveal observer is
   running: not-yet-revealed sections wait hidden, then .in rises them into view.
   Without JS (or with reduced motion) nothing is ever hidden, and a section that is
   already visible can never blink out and fade back in. */
html.rv-armed .rv:not(.in){opacity:0;transform:translateY(26px)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.rv.in{animation:rise .8s var(--ease) backwards}
@media (prefers-reduced-motion: reduce){
  html.rv-armed .rv:not(.in){opacity:1;transform:none}
  .rv.in{animation:none}
}

/* ---------- night at the river (day/night toggle) ---------- */
body{transition:background-color .9s var(--ease),color .9s var(--ease)}
/* The 900ms cross-fade is the point of the day/night toggle -- and a bug on first paint. Restoring
   a saved night theme applies the dark TEXT colours instantly while the background fades from
   cream, so every page load and every navigation began with roughly a second of body copy at
   2.16:1. `.sky-instant` is set before the class is applied and removed on the next frame, so the
   restore is instantaneous and only a real toggle animates. */
html.sky-instant body,html.sky-instant body *{transition:none!important}
.topbar,header.site,.river-band,.hall,footer.site,.contact-art,.arch,.contact-card,.polaroid,.contact-art .tour,.ci,.tag{
  transition:background-color .9s var(--ease),border-color .9s var(--ease),color .9s var(--ease);
}
.wave path{transition:fill .9s var(--ease)}
body.night{
  --cream:#111a31;--paper:#182545;--ink:#e7edfb;--ink-deep:#f4f7ff;
  --river:#a9c4f2;--gold:#e3b64a;--gold-deep:#ecd08a;
  --line:rgba(231,237,251,.24);--shadow:0 18px 50px -18px rgba(0,0,0,.65);
}
body.night ::selection{background:var(--gold);color:#142c53}
body.night .topbar{background:#0a1226;color:#dfe7f8}
body.night header.site{background:rgba(17,26,49,.93)}
body.night .brand svg [stroke="#1c3a6b"]{stroke:#e7edfb}
body.night .brand svg [stroke="#2b5ba8"]{stroke:#a9c4f2}
body.night .cta-pill{color:#142c53;border-color:#060c1c;box-shadow:3px 3px 0 #060c1c}
body.night .cta-pill:hover,body.night .cta-pill:focus-visible{box-shadow:5px 5px 0 #060c1c}
body.night .hero p.lead,body.night .section-head p,body.night .chapter p,body.night .policy-block p,body.night .contact-copy>p{color:#c6d2ec}
body.night .hero-note,body.night .hero-art figcaption,body.night .strip figcaption,body.night .polaroid .cap,body.night .strip-hint{color:#aebbdd}
body.night .strip figure::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 74'%3E%3Cg fill='none' stroke='%23b9cbee' stroke-linecap='round' opacity='.6'%3E%3Ccircle cx='38' cy='38' r='28' stroke-width='1.6'/%3E%3Ccircle cx='38' cy='38' r='21' stroke-width='1'/%3E%3Cpath d='M70 26c15-7 30-7 45 0' stroke-width='1.5'/%3E%3Cpath d='M72 38c15-7 30-7 45 0' stroke-width='1.5'/%3E%3Cpath d='M70 50c15-7 30-7 45 0' stroke-width='1.5'/%3E%3C/g%3E%3Cg fill='%23b9cbee' opacity='.72' font-family='Georgia,serif' text-anchor='middle'%3E%3Ctext x='38' y='29' font-size='6'%3EROCKLAND%3C/text%3E%3Ctext x='38' y='39' font-size='6.5'%3EJUIL 6%3C/text%3E%3Ctext x='38' y='47' font-size='6.5'%3E1962%3C/text%3E%3Ctext x='38' y='56' font-size='6'%3EONT.%3C/text%3E%3C/g%3E%3Cg transform='rotate(5 150 37)'%3E%3Crect x='128' y='8' width='44' height='58' fill='%23f7eed6' stroke='%23111a31' stroke-width='3.5' stroke-dasharray='.1 4.4' stroke-linecap='round'/%3E%3Crect x='132.5' y='12.5' width='35' height='49' fill='none' stroke='%231c3a6b' stroke-width='1' opacity='.6'/%3E%3Ctext x='150' y='23' font-size='6.2' text-anchor='middle' fill='%231c3a6b' font-family='Georgia,serif' textLength='30' lengthAdjust='spacingAndGlyphs'%3ECANADA%3C/text%3E%3Ccircle cx='150' cy='33' r='6' fill='none' stroke='%23d9a520' stroke-width='1.5'/%3E%3Cpath d='M136 43c4.5-5 9.5-5 14 0s9.5 5 14 0' fill='none' stroke='%232b5ba8' stroke-width='1.5'/%3E%3Cpath d='M136 49c4.5-5 9.5-5 14 0s9.5 5 14 0' fill='none' stroke='%232b5ba8' stroke-width='1.5'/%3E%3Ctext x='150' y='60' font-size='7' text-anchor='middle' fill='%231c3a6b' font-family='Georgia,serif'%3E5%3C/text%3E%3C/g%3E%3C/svg%3E")
}
body.night .hero-note svg [stroke="#7c5c0a"]{stroke:#ecd08a}
body.night .river-band,body.night .hall{background:#0a1226;color:#f4f7ff}
body.night .wave path{fill:#0a1226}
/* At night the two sides of a wave are only 11 points apart (they are 222 apart by day), so
   the silhouette that carries the whole daylight layout degrades into a faint smudge -- the
   shape is still doing its job, there is just nothing left to see it against. A hairline along
   the crest turns it back into deliberate ornament, in the same stroked language as
   .river-rule. Daylight needs nothing: there the cream/navy edge speaks for itself, and a line
   on it would only fur up a clean boundary. */
body.night .wave{filter:drop-shadow(0 -1.4px 0 rgba(169,196,242,.5)) drop-shadow(0 -2.8px 0 rgba(217,165,32,.16))}
body.night footer.site{background:#080f22}
body.night .ci{background:#0e1730}
body.night .ci svg *{stroke:#e7edfb}
body.night .socials svg{fill:#e7edfb}
body.night .socials a:hover svg{fill:#142c53}
body.night .contact-art{background:#0a1226}
body.night #heron-flyer [fill="#1c3a6b"]{fill:#cfdaf2}
body.night #heron-flyer [fill="#2b5ba8"]{fill:#a9c4f2}
body.night .mobile-menu .m-call{color:#142c53}
body.night .skip{color:#142c53}

/* skip link */
.skip{
  position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink-deep);padding:.6rem 1rem;z-index:500;font-weight:700;
}
.skip:focus{left:0}

/* ---------- responsive ---------- */
@media (max-width:1160px){
  nav.main{display:none}
  .burger{display:flex}
  .lang-toggle{margin-left:auto}
  .hero-grid{grid-template-columns:1fr;gap:2.6rem}
  .hero-art{max-width:520px;margin:0 auto}
  .river-inner,.hall-inner,.contact-card{grid-template-columns:1fr}
  .chapter{grid-template-columns:1fr;gap:2.2rem;padding:2.6rem 0}
  /* Centre the BLOCK, left-align everything inside it.
     Once the chapter collapses to one column that column runs to 1112px, while the photo caps at
     560 and the plan at 400 -- so both hugged the left of a very wide column and the whole section
     read as pushed to one side. Constraining the column to a readable measure and centring it
     means the title, the tags, the plan and the photo all still share a left edge, and the block
     as a whole sits in the middle of the page. Centred content with left-aligned text, rather than
     centred text, which is where this went wrong the first time. */
  .chapter-copy,.chapter-art{max-width:620px;margin-left:auto;margin-right:auto;width:100%}
  .policy{padding:2.5rem 1.25rem 2rem}
  .policy-block{grid-template-columns:1fr;gap:.8rem;padding:2.2rem 0}
  .policy-block .c-num,.policy-block h2,.policy-block p{grid-column:1;grid-row:auto}
  .chapter:nth-child(even) .chapter-copy{order:1}
  .chapter:nth-child(even) .chapter-art{order:2}
  /* Match the block, so the photo starts on the same left edge as the title, the tags and the
     plan. At 560 inside a 620 block it centred itself and sat 30px right of everything else --
     close enough to look like a mistake rather than a margin. The room photos are 1020px wide,
     so 620 costs no sharpness. */
  .chapter-art{max-width:620px}
  .contact-art{min-height:380px}
  .foot-inner{grid-template-columns:1fr;gap:2.2rem}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:2.4rem 1.2rem 3.4rem}
  .site-inner{padding:.7rem 1rem}
  .brand .b1{font-size:1.12rem}
  .brand .b2{letter-spacing:.18em;font-size:.62rem}
  .site-inner>.cta-pill{display:none}
  .polaroid{width:130px}
  .polaroid.pl{left:-6px}
  .polaroid.pr{right:-6px}
  .contact-copy{padding:2.2rem 1.4rem}
  .chapters{padding:3.5rem 1.2rem 1.5rem}
  .river-inner,.hall-inner{padding:3.4rem 1.2rem}
  .contact{padding:3.4rem 1.2rem}
}
@media (max-width:560px){
  .site-inner{gap:.7rem;padding:.7rem .9rem}
  .brand .b2{display:none}
  .brand .b1{font-size:1.05rem}
  .lang-toggle{font-size:.72rem}
  .lang-toggle button{padding:.3rem .6rem}
}

/* ---------- sub-page additions (rooms / services / hall rental) ---------- */
.sky-btn.sky-inline{position:static;box-shadow:none;padding:.34rem .8rem}
/* The theme toggle's label changes length with its state -- "Daylight" vs "By moonlight" -- and
   the longer one pushed the nav past its width, so the links wrapped onto two lines and the
   button wrapped inside itself. Pinning a min-width to the longer label means switching theme
   no longer reflows the header at all, and nowrap keeps each link on one line. */
nav.main a{white-space:nowrap}
/* Sized by .b1 above it, so the longer subtitle wrapped inside the brand box. There is ~125px
   of slack in the header at desktop width, so it simply needs permission not to break. */
.brand .b2{white-space:nowrap}

/* The header is a flex row: brand, nav, language toggle, theme toggle.
   `min-width:9.5rem` reserved 152px for the theme toggle at EVERY width -- it existed so the
   button would not jump when its label swaps between "By moonlight" and "Daylight". Flex paid for
   that reservation out of the two neighbours that CAN shrink: .brand (min-width:0) and
   .lang-toggle. At 1280 in French the toggle was squeezed to 29px against the 84px it needs, and
   `elementFromPoint` on the centre of #btn-fr returned #skyBtn -- the FR button was not clickable.
   The brand, whose spans are nowrap, simply overflowed and printed under the controls.

   Rockland is majority francophone and 1280/1366/1440 are the commonest laptop widths, so this
   locked a large share of the audience out of their own language on every sub-page. */
.sky-inline{white-space:nowrap;justify-content:center}

/* The language toggle is the one control that must never shrink: it is how half this town reads
   the site. Everything else yields to it. */
.lang-toggle{flex:0 0 auto}
.site-inner>.sky-btn.sky-inline{flex:0 1 auto;min-width:0}
/* The wordmark may shrink, but it must not paint outside its box and over the controls. */
.brand{overflow:hidden}
.brand .b1,.brand .b2{overflow:hidden;text-overflow:ellipsis}

/* Below this the header simply cannot hold four groups. The theme toggle is the least essential
   -- it is a flourish -- so it stands down rather than crowding out navigation and language. */
/* 1400, not 1160. Below this the four groups genuinely do not fit: in French the nav alone is
   675px, plus 211px of wordmark, 86px of language toggle, the CTA and five 19px gaps -- already
   at the 1240px container before the theme toggle's 152px is counted. Hiding it earlier is what
   lets the wordmark keep its full width instead of being truncated to an ellipsis at 1280.
   The theme choice itself is not lost: it persists in localStorage and the home page carries its
   own toggle in the hero. */
/* 1500, arrived at by arithmetic rather than by eye. The French row needs 1404px; the shell is
   clamp(1240, 94vw, 1600), so 94vw only reaches 1404 at a 1494px viewport. Showing the theme
   toggle any earlier clipped the wordmark by 72px at 1440. */
@media (max-width:1500px){.sky-btn.sky-inline{display:none}}
/* Icon-only until there is room for the words.
   Chasing breakpoints for this was fragile -- 1500 still clipped the wordmark by 19px at 1520.
   The label is what costs the row 43px, and the button already had an icon-only mode for phones.
   Reusing it means the header degrades by DROPPING DETAIL in order of importance -- wordmark,
   then language, then navigation, then CTA, then the theme label -- instead of clipping the one
   thing that identifies the residence. */
@media (max-width:1600px){.sky-btn.sky-inline .sky-txt{display:none}}
.page-hero{max-width:var(--shell);margin:0 auto;padding:3.2rem 1.5rem 3.6rem}
.page-hero h1{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.01em;color:var(--ink-deep)}
.page-hero h1 em{font-style:italic;color:var(--river)}
.page-hero p.lead{margin:1.4rem 0 0;font-size:1.06rem;max-width:38rem;color:#2c4470}
body.night .page-hero p.lead{color:#c6d2ec}
.back-home{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.6rem;text-decoration:none;
  font-weight:700;font-size:.92rem;color:var(--ink);
}
.back-home .arr{transition:transform .25s var(--ease)}
.back-home:hover .arr{transform:translateX(-5px)}
.back-home span:last-child{border-bottom:2px solid var(--gold)}
.chapter .cta-pill{margin-top:1.6rem;display:inline-block}
.plan-frame{
  margin-top:1.6rem;background:#fff;border:1.5px solid var(--ink);border-radius:10px;
    /* 400px, centred on the content block -- the same box the tag row occupies.
     Filling the column made it as wide as the photo, which was not what was wanted: the card
     should stay its own size and sit in the MIDDLE of the block, not span it and not hug the
     title's left edge. margin:auto against a max-width does exactly that, and the tag row above
     defines the same box, so the two share a centre line. */
  padding:.6rem;max-width:min(400px,100%);margin-left:auto;margin-right:auto;
  box-shadow:0 12px 30px -14px rgba(20,44,83,.3);
  transition:border-color .9s var(--ease);
}
.plan-frame img{width:100%;border-radius:5px;background:#fff}
.plan-frame .cap{font-family:"Fraunces",serif;font-style:italic;font-size:.78rem;text-align:center;margin-top:.45rem;color:#4a5f89}
body.night .plan-frame{background:#f4f7ff}
body.night .plan-frame .cap{color:#39528a}
.fineprint{max-width:var(--shell);margin:0 auto;padding:0 1.5rem 4rem;font-size:.9rem;font-style:italic;font-family:"Fraunces",serif;color:#4a5f89}
body.night .fineprint{color:#aebbdd}
.svc-list{list-style:none;display:grid;gap:.7rem;margin-top:1.4rem;max-width:32rem}
.svc-list li{display:flex;gap:.8rem;align-items:flex-start;font-weight:600}
.svc-list .dot{
  flex:0 0 26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);
  display:grid;place-items:center;font-size:.8rem;color:var(--gold-deep);margin-top:.1rem;
  transition:background-color .9s var(--ease),border-color .9s var(--ease);
}
body.night .svc-list .dot{color:#ecd08a}
.banner-stack{display:grid;gap:1rem}
.banner-stack img{width:100%;border-radius:10px;border:1.5px solid var(--ink);box-shadow:0 12px 30px -14px rgba(20,44,83,.3)}
.hall-cards{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.6rem}
.hall-card{
  background:var(--paper);border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);
  transition:background-color .9s var(--ease),border-color .9s var(--ease);
}
.hall-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1.5px solid var(--ink)}
.hall-card .hc-body{padding:1.6rem 1.5rem 1.8rem}
.hall-card h3{font-family:"Fraunces",serif;font-weight:500;font-size:1.5rem;color:var(--ink-deep)}
.hall-card .hc-note{font-family:"Fraunces",serif;font-style:italic;color:#4a5f89;margin-top:.2rem}
body.night .hall-card .hc-note{color:#aebbdd}
.hall-card .hc-stats{display:flex;gap:2rem;margin-top:1.2rem;flex-wrap:wrap}
.hall-card .hc-stats .n{font-family:"Fraunces",serif;font-style:italic;font-size:1.35rem;color:var(--river)}
.hall-card .hc-stats .l{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-top:.15rem}
.hall-card .tag-row{margin-top:1.2rem}
@media (max-width:900px){.hall-cards{grid-template-columns:1fr}}


/* ---------- capacity mismatch: draw the eye to the hall selector ---------- */
/* Two pulses, then stop. An indicator that keeps moving becomes wallpaper, and this appears
   beside a validation message that is already asking for attention. */
@keyframes jbr-attn{
  0%,100%{box-shadow:0 0 0 0 rgba(217,165,32,0)}
  45%{box-shadow:0 0 0 7px rgba(217,165,32,.45)}
}
.jbr-attn{animation:jbr-attn 1s ease-in-out 2}
@media (prefers-reduced-motion: reduce){
  /* Still mark the field, just without motion. Dropping the cue entirely would leave someone
     who needs reduced motion with less information, not less distraction. */
  .jbr-attn{animation:none;box-shadow:0 0 0 4px rgba(217,165,32,.5)}
}


/* The themed select ships its own styles from inquiry-form.js -- index.html does not load this
   stylesheet, so rules kept here reached the sub-pages and silently missed the home page. */

/* ---------- themed field message ---------- */
/* The browser's own validation bubble is unstyleable too -- a white box with an orange icon,
   drawn by the OS. This replaces it for the capacity rule, so the explanation looks like it
   belongs to the site rather than to Chrome. */
.jbr-msg{display:none;margin-top:.45rem;padding:.6rem .8rem;border-radius:10px;
  background:rgba(217,165,32,.14);border:1.5px solid var(--gold);
  color:var(--ink);font-size:.85rem;line-height:1.45}
.jbr-msg[data-show="true"]{display:block}
.hall .jbr-msg{color:#fdf7e8;background:rgba(217,165,32,.18)}
@media (prefers-reduced-motion: no-preference){
  .jbr-msg[data-show="true"]{animation:jbr-msg-in .22s ease-out}
}
@keyframes jbr-msg-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}




/* French runs ~25px longer than English, and .cta-pill is nowrap: at 375px
   "Réservez une visite pour les voir en personne" measured 362px inside a 337px container and
   painted out to 381. body{overflow-x:hidden} meant the page did not pan -- the button's rounded
   right end and its offset shadow were simply sliced off, with 19px of margin on the left and
   none on the right. Allowed to wrap on narrow screens; a two-line button is not a defect, a
   guillotined one is. */
@media (max-width:520px){
  .cta-pill{white-space:normal;max-width:100%;text-align:center;line-height:1.25}
}


/* Touch targets for the language switch.
   EN/FR measured 35x29 on a phone -- under the 44px both Apple and Google give as the floor, on
   the one control a francophone visitor needs before anything else. The visual pill is unchanged;
   the tappable area is padded out to meet the guidance. */
/* Width, not `pointer: coarse`. The pointer query is the semantically right one, but it cannot be
   exercised in a headless browser -- and a fix nobody can verify is a fix nobody should ship. This
   threshold matches where the burger takes over, so every phone and tablet gets it. */
@media (max-width:1160px){
  .lang-toggle button{min-height:44px;min-width:44px;padding:.55rem .8rem}
}

/* The header "Book a tour" duplicates the hero button directly below it, so it is the cheapest
   thing to drop when the row is tight. In French the nav alone is 675px; with a 211px wordmark,
   an 82px language toggle and five gaps, adding a 178px CTA overflows the 1240px container at
   1180-1360 and the wordmark gets truncated to an ellipsis. Hidden until there is room. */
@media (max-width:1360px){
  .site-inner>.cta-pill{display:none}
}



/* Centre the floor plans once the chapter stacks.
   .plan-frame is max-width:300px with no horizontal margin, which is right in the two-column
   desktop layout -- the plan aligns with the body text beside it. Once .chapter collapses to one
   column at 1160 the parent is full width, so the plan hugged the left edge with all the slack
   piled on the right: 19px one side, 71px the other at 390px. That reads as a mistake rather than
   a choice, and the caption underneath is already centred. */
/* No centring rule needed any more: the frame fills its column at every width, so its left edge
   meets the title and its centre is the column's centre by construction. */


/* The privacy page's Questions block.
   It was one run-on line -- email, phone and address packed between thin middots -- so the number
   ran straight into the address with nothing to separate them for someone scanning. Three labelled
   lines instead, and the email and phone are the first mailto: and tel: links on the site: the
   number had appeared nowhere a visitor could actually tap it. */
.contact-lines{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.contact-lines li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.2rem 1rem;align-items:baseline}
.contact-lines .cl-k{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep)}
.contact-lines a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:1px}
.contact-lines a:hover{border-bottom-color:currentColor}
.contact-lines a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:3px}
@media (max-width:520px){
  /* The label sits above its value once there is no room for a column. */
  .contact-lines li{grid-template-columns:1fr}
}


/* Rooms page only: centre the number and heading so the whole section is symmetrical.
   Scoped to #roomlist, which exists on rooms.html and nowhere else -- the homepage, About and
   Services reuse .chapter for text-heavy blocks, and centring body copy there would be a
   readability regression, not a tidy-up.
   The number's gold rule is mirrored to the other side: a single trailing line reads as a stray
   mark once the label is no longer flush left. */
#roomlist .chapter .num{justify-content:center}
#roomlist .chapter .num::before{content:"";flex:0 0 40px;height:1px;background:var(--gold)}
#roomlist .chapter h3{text-align:center}




/* Rooms page: bottom-align the two columns.
   The global .chapter stays centred -- that is right for the homepage, About and Services, where
   a paragraph and its art are similar heights. A room section is a different shape: a short
   heading and tag row sitting on top of a tall floor-plan card, roughly 590px against a 454px
   photo. Centred, the photo floated with slack above and below and nothing lined up. Bottom-
   aligned, the photo and the plan card finish on the same line, which is the edge the eye
   actually follows across.
   Scoped to #roomlist, which exists only on rooms.html -- and unlike .chapter itself, that page
   loads site.css, so there is no inline copy to keep in step. */
#roomlist .chapter{align-items:end}


/* River rule -- the decorative divider on the sub-pages.
   It replaces a pair of back-to-back filled waves that sat between two areas of the SAME
   background: on the night theme that fill (#0a1226 against a #111a31 page) read as a smudge
   rather than ornament, and in daylight it was a flat navy band doing no work. The homepage and
   the hall page keep their filled waves, where the shape genuinely transitions INTO a coloured
   band.
   Stroked, layered and themed through the existing tokens, so it matches the footer flourish --
   the only other place on the site that draws the river. Masked to fade at both ends rather than
   stopping dead at the container edge. */
.river-rule{max-width:var(--shell);margin:0 auto;padding:2.6rem 1.5rem;line-height:0}
.river-rule svg{display:block;width:100%;height:auto}
@media (max-width:820px){ .river-rule{padding:1.8rem 1.25rem} }