/*
Theme Name: ibis Styles
Theme URI: https://thewebsitejob.com.au/themes/ibis-styles
Author: The Websitejob
Author URI: https://thewebsitejob.com.au
Description: Locked block theme for ibis Styles hotel websites, built to the ibis Styles Graphic Charter 2023. The design is fixed in code (client-approved, July 2026); the hotel edits CONTENT ONLY via content-locked patterns. No colour, font or layout controls are exposed in the admin. The hotel name, contact details and page content are site configuration, not theme code.
Version: 0.90.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: ibis-styles-east-perth
Tags: full-site-editing, one-column, custom-logo, custom-menu
Update URI: https://thewebsitejob.com.au/themes/ibis-styles-east-perth
*/

/* =====================================================================
   The block below this line is the VERBATIM approved design CSS from
   the POC (/index.html <style>). index.html remains the reference design:
   if the design changes there, re-sync this block (see CONVERSION-PLAN.md).
   Do NOT hand-edit rules in this block for WP quirks - WP-specific fixes
   belong in the "WORDPRESS SHIMS" section at the very end of this file.
   ===================================================================== */

/* =====================================================================
   ibis Styles East Perth - Proof-of-concept homepage
   STRUCTURE: borrowed from the client's reference (tribehotels.com) - a calm,
   modular vertical stack: bold masthead + headline → framed hero → booking →
   card rail w/ filter tabs → colour band → "who we are" w/ graphic square →
   image triptych + columns → newsletter band → footer + floating popup.
   SKIN: ibis Styles Graphic Charter 2023 - exact palette, UPRIGHT condensed-caps
   headlines, charter colour-on-colour pairings, solid-colour BOXES, real brand
   TEXTURES (cropped from charter p.15), real ibis logo & hotel photography.
   Bold & square - deliberately not a safe, generic website.
   ===================================================================== */

:root{
  /* Brand green + charter palette (exact charter values) */
  --green:#008132; --green-logo:#6AB023; --green-deep:#006b29; --green-ink:#06250F;
  --yellow:#FFE000; --orange:#E84619; --pink:#E83C75; --purple:#7D00B2;
  --turq:#2DB5B3; --emerald:#003D48; --black:#000;
  --yellow-pale:#F3EAA0;   /* soft pale yellow - charter emerald-panel type (p.20) */
  --pink-pale:#F8D2DE;     /* light pink - combo text on green/purple grounds */
  --blue-pale:#D6EEF2;     /* light blue - combo light-ground tint */

  /* Calm neutral structure (the Tribe-borrowed canvas) */
  --paper:#ffffff; --cream:#F7F5F2; --cream-2:#EFEAE1; --line:#E7E1D6;
  --ink:#003D48; --ink-soft:#5B6B6E;   /* body text = charter Emerald (the workhorse dark) */

  --display:"Barlow Condensed","Saira Condensed","Oswald","Arial Narrow",sans-serif;
  --body:"Barlow","Inter","Helvetica Neue","Arial",system-ui,sans-serif;

  --s--1:clamp(.8rem,.76rem + .14vw,.88rem);
  --s-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --s-1:clamp(1.2rem,1.05rem + .5vw,1.5rem);
  --s-2:clamp(2rem,1.4rem + 2.2vw,3.2rem);
  --s-3:clamp(2.6rem,1.7rem + 4vw,5rem);
  --s-mast:clamp(3.2rem,.6rem + 12.5vw,11rem);   /* giant masthead headline */

  --container:1320px;
  --pad:clamp(1.1rem,4.5vw,3.2rem);
  --gap:clamp(.9rem,2vw,1.4rem);
  --section:clamp(3.5rem,7vw,6.5rem);
  /* The brand is SQUARE & BOLD - boxes have hard corners (charter pp.20,21,85) */
  --radius:0; --radius-lg:0;
  --ease:cubic-bezier(.22,.7,.25,1);
  --shadow:0 26px 64px -34px rgba(0,40,40,.45);
  --shadow-sm:0 12px 30px -20px rgba(0,40,40,.34);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:var(--s-0);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}

h1,h2,h3,.display{font-family:var(--display);font-weight:700;font-style:normal;
  text-transform:uppercase;line-height:.88;letter-spacing:.01em;margin:0;text-align:left}
/* Boxed label - the brand's solid-colour box device (charter pp.21,85) */
.kicker{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.7rem;display:inline-block;background:var(--yellow);color:var(--purple);padding:.5em .85em}
.kicker.on-dark{background:#fff;color:var(--emerald)}
.kicker.is-purple{background:var(--purple);color:var(--pink-pale)}

.container{width:min(100% - 2*var(--pad),var(--container));margin-inline:auto}
.section{padding-block:var(--section)}
.lead{font-size:var(--s-1);line-height:1.45;max-width:48ch}
.muted{color:var(--ink-soft)}

:where(a,button,input,select,summary):focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--emerald);color:#fff;padding:.7em 1.1em;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- Buttons / links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:var(--s--1);letter-spacing:.08em;text-transform:uppercase;
  padding:.95em 1.8em;border-radius:0;border:2px solid transparent;white-space:nowrap;
  transition:transform .18s var(--ease),background .2s,box-shadow .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-deep);box-shadow:0 12px 26px -12px rgba(0,129,50,.8)}
.btn--dark{background:var(--emerald);color:#fff}
.btn--dark:hover{box-shadow:0 12px 26px -12px rgba(0,61,72,.7)}
/* Brand booking CTA - purple with pink text + condensed display type (charter pairing) */
.btn--book{background:var(--purple);color:var(--yellow);font-family:var(--display);font-weight:700;
  letter-spacing:.03em;font-size:clamp(1.1rem,1.5vw,1.45rem);gap:.5em}
.btn--book .arrow{font-size:.9em;font-family:var(--body)}
.btn--book:hover{background:var(--purple);color:#fff}
.btn--light{background:#fff;color:var(--emerald)}
.btn--ghost{background:transparent;color:currentColor;border-color:currentColor}
.btn--ghost:hover{background:currentColor}
.btn--lg{font-size:var(--s-0);padding:1.05em 2.1em}
.arrow{transition:transform .2s var(--ease)}.btn:hover .arrow,.link:hover .arrow{transform:translateX(4px)}
.link{display:inline-flex;align-items:center;gap:.5em;font-weight:700;letter-spacing:.05em;font-size:var(--s--1);
  text-transform:uppercase;padding-bottom:3px;border-bottom:2px solid var(--green);width:max-content;color:var(--emerald)}
.link.on-dark{color:#fff;border-color:var(--yellow)}

/* =====================================================================
   MASTHEAD - solid YELLOW band (the Tribe "yellow block" device), with a
   PURPLE condensed headline + EMERALD nav. This is the charter's signature
   purple-on-yellow title treatment (typeface page, p.20). Purple on yellow ≈ 7:1.
   ===================================================================== */
.masthead{background:var(--yellow);color:var(--emerald);position:relative;z-index:20}
/* Top bar (logo + nav + book) sticks to the top of the viewport on scroll */
.topbar{position:sticky;top:0;z-index:50;background:var(--yellow);color:var(--emerald)}
.masthead__top{display:flex;align-items:center;gap:1.5rem;min-height:84px;
  width:min(100% - 2*var(--pad),var(--container));margin-inline:auto}
.brand{display:inline-flex;align-items:center;flex:none}   /* the logo keeps its size; the nav gives way */
.brand img{height:60px;width:auto;display:block}
.nav{display:flex;gap:.2rem;margin-inline:auto}
.nav a{position:relative;padding:.5em .85em;font-weight:700;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--purple)}
.nav a::after{content:"";position:absolute;left:.85em;right:.85em;bottom:.25em;height:3px;background:var(--emerald);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a.is-book::after{transform:scaleX(1)}
.nav a.is-book{font-weight:700}
.mast__cta{display:flex;align-items:center;gap:.7rem;margin-left:auto}
/* The header Book button: the booking CTA (.btn--book: purple ground, yellow condensed type, combo 8) at header size.
   An emerald underlined text link until client feedback #314 (Claus's pick, 2026-10-01). */
.booklink{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--purple);color:var(--yellow);
  font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1;letter-spacing:.03em;text-transform:uppercase;
  padding:calc(.7em - 2px) calc(1.2em - 2px);border:2px solid var(--purple);cursor:pointer;position:relative;isolation:isolate;overflow:hidden;white-space:nowrap;
  transition:transform .18s var(--ease),color .2s var(--ease)}
/* WP-113 (Claus, 2026-10-11, design-motion.html M6, matched to its .btn--book on 2026-10-11): the header Book button is
   the proposal's Book button. On hover or focus it lifts 2px, a yellow block sweeps in from the left behind the word,
   the word turns purple (combo 8 to combo 1), the 2px purple border stays as a keyline and the arrow nudges 4px.
   The box keeps its original height (1.35rem type, .7em padding; the border is taken out of the padding), Claus
   2026-10-11. Was: the word went white in place. */
.booklink .arrow{font-family:var(--body);font-size:.9em;transition:transform .2s var(--ease)}
.booklink::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);transform:scaleX(0);transform-origin:left center;transition:transform .32s var(--ease)}
.booklink:hover,.booklink:focus-visible{color:var(--purple);transform:translateY(-2px)}
.booklink:hover::before,.booklink:focus-visible::before{transform:scaleX(1)}
.booklink:hover .arrow,.booklink:focus-visible .arrow{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.booklink,.booklink::before,.booklink .arrow{transition:none}.booklink:hover,.booklink:focus-visible{transform:none}.booklink:hover .arrow{transform:none}}
.burger{display:none;width:46px;height:46px;border:0;background:none;cursor:pointer;border-radius:10px}
.burger:hover{background:rgba(0,61,72,.1)}
.burger span{display:block;width:24px;height:3px;background:var(--emerald);margin:5px auto;border-radius:2px;transition:.25s var(--ease)}
.masthead__title{width:min(100% - 2*var(--pad),var(--container));margin:0 auto;
  padding-block:clamp(.2rem,1vw,1rem) clamp(1.2rem,3vw,2.4rem)}
.masthead__title h1{font-size:var(--s-mast);color:var(--purple);line-height:.82;letter-spacing:.005em}

/* =====================================================================
   HERO - full-bleed framed photo, cream margin = the page canvas (Tribe device)
   ===================================================================== */
.hero{background:var(--cream);padding:0 var(--pad) clamp(1rem,2vw,1.6rem)}
.hero__frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:clamp(420px,60vh,680px);display:flex;align-items:flex-end;isolation:isolate;box-shadow:var(--shadow)}
.hero__frame img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,28,32,.5),transparent 42%)}
.hero__caption{margin:1rem clamp(1.2rem,3vw,2rem);color:#fff;font-weight:600;letter-spacing:.04em;
  font-size:var(--s--1);text-shadow:0 1px 12px rgba(0,28,32,.7)}
.hero__note{position:absolute;right:12px;bottom:9px;z-index:2;color:rgba(255,255,255,.6);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase}

/* HERO PHOTO SEQUENCE - homepage only (Claus, 2026-10-01; record: design-hero.html, C + B's timer).
   The family shows first; after five seconds the hotel fades in over it and stays. EVERY photo arrives
   6% larger and eases back to its normal size over seven seconds, so each one settles into the frame
   and the hero rests on a photo at its true size (the second photo joined in the same day: Claus). One figure per photo: its image, its crop and its caption (the scrim sits on the slide, so
   a caption is always on its own photo's scrim). A photo's crop is the photo's own: data-focus = top /
   upper / middle / lower (20 / 35 / 50 / 65 %); the tower keeps the 35% it had as `.hero--home`.
   A slide that is not showing is display:none, so its lazy image is not fetched until the script asks
   for it: the first photo never waits for the second. Later slides lie above earlier ones; going
   forward the next photo fades in over the current one, which stays put underneath until the fade ends.
   One control, the carousel's square emerald button: pause while a photo waits (its lower edge fills
   as a timer), "show the photos again" once the sequence rests. */
.hero__slide{position:absolute;inset:0;margin:0;display:none;align-items:flex-end;isolation:isolate;
  opacity:0;transition:opacity 1.2s ease}
.hero__slide:is(.is-on,.is-leaving,.is-ready){display:flex}
.hero__slide.is-on{opacity:1}
.hero__slide.is-leaving{opacity:1;transition:none}     /* waits under the incoming photo */
.hero__slide.is-snap{transition:none}                  /* already underneath: shown at once */
.hero__slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,28,32,.5),transparent 42%)}
.hero__slide[data-focus="top"] img{object-position:center 20%}
.hero__slide[data-focus="upper"] img{object-position:center 35%}
.hero__slide[data-focus="lower"] img{object-position:center 65%}
.hero__slide:is(.is-on,.is-leaving,.is-ready) img{animation:hero-drift 7s cubic-bezier(.2,.6,.3,1) both}
@keyframes hero-drift{from{transform:scale(1.06)}to{transform:none}}
.hero__slide .hero__caption{opacity:0;transition:opacity .3s ease}
.hero__slide.is-on .hero__caption{opacity:1;animation:hero-cap .7s var(--ease) .6s both}
@keyframes hero-cap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero__play{position:absolute;right:12px;bottom:34px;z-index:3;width:44px;height:44px;display:grid;place-items:center;
  border:0;padding:0;cursor:pointer;background:var(--emerald);color:#fff;box-shadow:var(--shadow-sm);transition:background .2s var(--ease)}
.hero__play[hidden]{display:none}
.hero__play svg{width:44%;height:44%;display:none}
.hero__frame[data-state="pause"] .ico-pause,.hero__frame[data-state="play"] .ico-play,
.hero__frame[data-state="again"] .ico-again,.hero__frame[data-state="next"] .ico-again{display:block}
@media (hover:hover){.hero__play:hover{background:var(--green)}}
.hero__play::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#fff;transform:scaleX(0);transform-origin:left}
.hero__frame.is-counting .hero__play::after{animation:hero-count var(--hero-hold,5s) linear forwards}
.hero__frame.is-paused .hero__play::after{animation-play-state:paused}
@keyframes hero-count{to{transform:scaleX(1)}}
.hero__frame.is-instant .hero__slide,.hero__frame.is-instant .hero__slide .hero__caption{transition:none;animation:none}
/* Less motion asked for: no fade, no timer, nothing enlarges. The hero opens on the LAST photo (where
   the sequence ends for everyone else) before any script runs; the button then swaps photos by hand. */
@media (prefers-reduced-motion:reduce){
  .hero__slide,.hero__slide .hero__caption,.hero__slide.is-on .hero__caption{transition:none;animation:none}
  .hero__slide:is(.is-on,.is-leaving,.is-ready) img{animation:none}
  .hero__play::after{display:none}
  .hero__frame:not(.is-live) .hero__slide{display:none;opacity:0}
  .hero__frame:not(.is-live) .hero__slide:last-of-type{display:flex;opacity:1}
  .hero__frame:not(.is-live) .hero__slide:last-of-type .hero__caption{opacity:1}
}

/* =====================================================================
   BOOKING - thin inline bar (Tribe), segmented, dark action + "edit"
   Fields since 2026-09-21 = the live site's bar: stay dates, guests, loyalty
   number, promo code (no destination). The script's "Booking bar -> Accor"
   block turns them into the hotel's Accor booking link.
   ===================================================================== */
.booking{background:var(--cream);padding:0 var(--pad)}
.booking__bar{position:relative;z-index:6;width:min(100%,var(--container));margin:-34px auto 0;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.booking form{display:grid;grid-template-columns:minmax(20rem,1.75fr) minmax(13.5rem,1.3fr) minmax(8.75rem,1fr) minmax(8.75rem,1fr) auto;align-items:stretch}
.field{position:relative;display:flex;flex-direction:column;justify-content:center;gap:.15rem;padding:.85rem 1.2rem;
  border-left:1px solid var(--line);min-width:0}
.field:first-child{border-left:0}
.field label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select{font-family:inherit;font-size:var(--s-0);color:var(--ink);background:transparent;
  border:0;padding:.1em 0;width:100%;font-weight:600}
.field input:focus,.field select:focus{outline:0}
/* the enquiry forms' field idiom: focus marker + placeholder colour */
.booking .field:focus-within{box-shadow:inset 4px 0 0 var(--green)}
.booking .field input::placeholder{color:#9AA5A7;font-weight:500;opacity:1}
/* check in → check out: two native date pickers share the first segment */
.booking__stay{display:flex;align-items:center;gap:.4em}
.booking__stay input[type="date"]{flex:0 1 auto;width:auto;min-width:0;cursor:pointer;color-scheme:light;font-variant-numeric:tabular-nums}
.booking__stay input::-webkit-calendar-picker-indicator{margin-left:.2em;cursor:pointer;opacity:.6}
.booking__stay input::-webkit-date-and-time-value{text-align:left}   /* iOS Safari centres it */
.booking__stay span{color:var(--ink-soft)}
.booking__edit{position:absolute;top:.6rem;right:1rem;font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:underline}
.booking__go{display:flex}
.booking__go .btn{border-radius:0;width:100%;height:100%;padding-inline:clamp(1.2rem,2.4vw,2.6rem)}

/* =====================================================================
   Section heading
   ===================================================================== */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
/* Section heading - charter condensed ITALIC caps in brand purple. */
.head h2{font-size:var(--s-3);max-width:18ch;color:var(--purple);font-style:italic}
.head p{max-width:40ch;margin:0;color:var(--ink-soft)}

/* =====================================================================
   ROOMS - filter tabs + static 4-up grid of solid-colour boxed cards (no scroll)
   ===================================================================== */
.tabs{display:flex;gap:1.6rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:clamp(1.4rem,3vw,2.2rem);padding-bottom:.2rem}
.tab{background:none;border:0;cursor:pointer;font-family:var(--body);font-weight:700;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:0 0 .9rem;position:relative}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--green);transform:scaleX(0);transition:transform .25s var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--emerald)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}

/* 3-up CAROUSEL - square cards in a horizontal scroll-snap track; the rooms past the
   third sit off-view and the ◄ ► buttons slide through them. Charter "boxed card" set
   (PPT p.85), kept square & bold. Aligned to the rest of the site 2026-09-20: the track
   runs on the standard container (the 1560px override put this section 120px outside
   every other edge on a wide screen), and the cards are the Rooms page's five. */
.rooms-wrap{position:relative}
.rooms{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rooms::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.rooms{scroll-behavior:auto}}
.room{flex:0 0 calc((100% - 2*var(--gap)) / 3);scroll-snap-align:start;
  display:flex;flex-direction:column;transition:transform .3s var(--ease)}
.room:hover{transform:translateY(-5px)}
.room__media{position:relative;aspect-ratio:1/1;overflow:hidden}
/* Slide controls - square brand buttons centred on the square photos */
.rooms__nav{position:absolute;top:38%;transform:translateY(-50%);z-index:6;
  width:clamp(40px,3.2vw,52px);aspect-ratio:1;display:grid;place-items:center;border:0;cursor:pointer;
  background:var(--emerald);color:#fff;box-shadow:var(--shadow);transition:background .2s var(--ease),opacity .25s,visibility .25s}
.rooms__nav:hover{background:var(--green)}
.rooms__nav svg{width:46%;height:46%}
.rooms__nav--prev{left:clamp(2px,.4vw,10px)}
.rooms__nav--next{right:clamp(2px,.4vw,10px)}
.rooms__nav[disabled]{opacity:0;visibility:hidden;pointer-events:none}
.room__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.room:hover .room__media img{transform:scale(1.05)}
.room__box{flex:1;display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem 1.15rem;
  background:var(--paper);color:var(--ink);
  transition:background .3s var(--ease),color .3s var(--ease)}
.room__tag{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85;
  transition:opacity .3s var(--ease)}
.room__name{display:flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.45rem,2.1vw,2rem);line-height:.9;color:inherit}
.room__name .arrow{font-size:.8em;transition:transform .2s var(--ease)}
.room:hover .room__name .arrow{transform:translateX(4px)}
.room__meta{margin-top:auto;padding-top:.5rem;font-size:.82rem;font-weight:500}
.room__meta b{font-family:var(--display);font-weight:700;font-size:1.15em;letter-spacing:.01em}
/* Calm neutral cards (white ground, emerald ink) - simple at rest. Each room still
   carries its own charter colour, revealed only as a full brand block on hover/focus.
   --accent = ground, --accent-ink = its approved combo partner. */
.room__box--turq   {--accent:var(--turq);    --accent-ink:var(--purple)}    /* combo 5 */
.room__box--purple {--accent:var(--purple);  --accent-ink:var(--yellow)}    /* combo 8 */
.room__box--emerald{--accent:var(--emerald); --accent-ink:var(--orange)}    /* combo 7 */
.room__box--green  {--accent:var(--green);   --accent-ink:var(--pink-pale)} /* combo 3 */
.room:hover .room__box,.room:focus-visible .room__box{background:var(--accent);color:var(--accent-ink)}
.room:hover .room__tag,.room:focus-visible .room__tag{opacity:1}

/* =====================================================================
   SOCIAL BAND. The `.socialband` rules below are the pale-blue band (pattern E,
   combo 4) that was the homepage's band until WP-111; they stay for the
   "Home - Current Content" review page's location variant (`.locinfo`, WP-24).
   Since WP-111 (Claus, 2026-10-11) the homepage band is PATTERN H on PINK
   GLITTER: see "WP-111" further down.
   ===================================================================== */
.socialband{background:var(--blue-pale);color:var(--purple)}
.socialband .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-block:clamp(2rem,4vw,3rem)}
.socialband h2{font-size:var(--s-3);color:var(--purple);max-width:20ch}
.socialband .socials{display:flex;gap:.8rem}
.socialband .socials a{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:2px solid var(--purple);color:var(--purple);transition:background .2s,color .2s}
.socialband .socials a:hover{background:var(--purple);color:var(--blue-pale)}
/* "See what's on" beside the icons (feedback #315): the .band grammar, link in the band's own ink */
.socialband__side{display:flex;align-items:center;gap:1rem 2rem;flex-wrap:wrap}
.socialband__side .link{color:inherit;border-color:currentColor}

/* --- WP-111 (Claus, 2026-10-11): the homepage social band is pattern H, the texture
       band with a white card (`.news.texband.news--glitter`, the Special Offers family's
       band, its rules further down), with the band's link and icon row inside the card.
       Claus asked for "the texture banners same as we have on other pages" and picked the
       glitter card from six (assets/shots/social-band-options/sheet-textures-1440.png).
       On a desktop the card is the offers band's 1000px card with the row at its right
       edge; from 1024px down it takes the container's width and the row drops under the line. One ink in
       the card: emerald, like every pattern H card. */
.news__card--social{grid-template-columns:1fr auto}
.news__card--social h2{max-width:20ch}
.news__card--social .socialband__side{color:var(--emerald);justify-self:end}
.news__card--social .socials{display:flex;gap:.8rem}
.news__card--social .socials a{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  border:2px solid var(--emerald);color:var(--emerald);transition:background .2s,color .2s}
.news__card--social .socials a:hover{background:var(--emerald);color:#fff}
@media (max-width:1024px){
  /* the container's width, not the 480px card of the offers band (`.news .news__card` outranks
     the `.news__card` rule further down, which is what sets 480px there) */
  .news .news__card--social{grid-template-columns:1fr;max-width:none}
  .news__card--social .socialband__side{justify-self:start}
}

/* =====================================================================
   WHO WE ARE - text + bold purple graphic square (Tribe "blue square" device)
   ===================================================================== */
.who{background:var(--cream)}
/* Charter "OUR IDENTITY." divider, rebuilt as a two-panel device (PPT identity page):
   LEFT  = purple panel, giant orange condensed statement + sign-off caption.
   RIGHT = yellow panel, purple copy - heading, bold lead, body, diamond bullets. */
.who .container{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  box-shadow:var(--shadow)}

/* LEFT - purple identity panel */
.who__art{background:var(--purple);display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(2rem,5vw,4rem);padding:clamp(1.9rem,3.6vw,3.2rem);position:relative;overflow:hidden;
  min-height:clamp(340px,42vw,560px)}
.who__art h2{font-size:clamp(3.2rem,8.5vw,7.4rem);color:var(--yellow);line-height:.82;letter-spacing:.004em}
.who__art .cap{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--yellow);
  font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.04;letter-spacing:.02em;max-width:16ch}

/* RIGHT - yellow content panel (purple copy, ≈6.3:1 on yellow) */
.who__panel{background:var(--yellow);color:var(--purple);display:flex;flex-direction:column;
  padding:clamp(1.9rem,3.6vw,3.2rem)}
.who__panel h3{font-size:clamp(1.7rem,3.2vw,2.7rem);color:var(--purple);letter-spacing:.012em;margin-bottom:1.05rem}
.who__lead{font-weight:700;font-size:var(--s-1);line-height:1.3;color:var(--purple);max-width:34ch;margin-bottom:1rem}
.who__body{font-weight:600;color:var(--purple);max-width:42ch;margin-bottom:1.2rem}
.who__list{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.who__list li{font-weight:700;color:var(--purple);padding-left:1.65em;position:relative;line-height:1.25;max-width:40ch}
.who__list li::before{content:"\25C6";position:absolute;left:0;top:.02em;font-size:.82em}
.who__sig{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--purple);
  font-size:var(--s-1);letter-spacing:.012em;line-height:1.04;margin-top:auto}

/* =====================================================================
   TRIPTYCH - three full-bleed images + three text columns
   ===================================================================== */
/* TRIPTYCH - three photos, each carrying a SOLID-COLOUR content box anchored at
   the bottom (the charter "box on a photo" device, PPT p.85). The text lives
   INSIDE the boxes - never loose under the image. Boxes form a tricolour band. */
.triptych{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr auto;min-height:clamp(640px,82vh,940px);background:var(--emerald)}
.tri{position:relative;grid-row:1 / span 2;display:grid;grid-template-rows:subgrid;overflow:hidden;isolation:isolate;text-decoration:none;color:inherit}
.tri img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tri:hover img{transform:scale(1.04)}
/* Square colour block on the lower-left of a tall image, framed by it (charter banner layout) */
.tri__box{container-type:inline-size;position:relative;grid-row:2;justify-self:center;align-self:end;width:min(78%,380px);aspect-ratio:1;margin:0 0 clamp(1.2rem,2vh,2.2rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;color:#fff;padding:clamp(1.4rem,2.1vw,2.1rem);transition:color .3s var(--ease)}
.tri__box h3{font-family:var(--display);font-weight:400;font-style:italic;text-transform:uppercase;font-size:min(90px,29cqw);line-height:.82;letter-spacing:.005em}
.tri__box p{font-size:clamp(.78rem,.72rem + .2vw,.92rem);font-weight:600;line-height:1.3;margin:0;color:inherit}
/* Bottom-left cluster: caption + the underlined CTA (a span - the whole card is the link) */
.tri__foot{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;width:100%}
.tri__cta{align-self:flex-end;display:inline-flex;align-items:center;gap:.45em;font-family:var(--body);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.72rem,.68rem + .15vw,.82rem);line-height:1.05;
  color:inherit;border-bottom:3px solid currentColor;padding-bottom:.32em}
.tri:hover .tri__cta .arrow,.tri:focus-within .tri__cta .arrow{transform:translateX(4px)}
/* Charter colour-on-colour ink at rest, calming to white on hover/focus. */
.tri__box--turq{background:var(--turq);color:var(--purple)}
.tri__box--purple{background:var(--purple);color:var(--yellow)}
.tri__box--green{background:var(--green);color:var(--pink-pale)}
.tri:hover .tri__box,.tri:focus-within .tri__box{color:#fff}

/* =====================================================================
   NEWSLETTER - full-bleed REAL brand TEXTURE band (replaces Tribe checkerboard)
   ===================================================================== */
.news{position:relative;background:#0a1230 url("assets/brand/textures/night-sky.jpg") center/cover;isolation:isolate}
.news::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(4,10,30,.42)}
.news .container{display:flex;justify-content:center;padding-block:clamp(3rem,6vw,5.5rem)}
.news__card{background:#fff;padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1.6rem,3vw,2.6rem);
  max-width:1000px;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.2rem,3vw,2.6rem);align-items:center;box-shadow:var(--shadow)}
.news__card h2{font-size:var(--s-2);color:var(--emerald);line-height:.85}
.news__card p{margin:0;color:var(--ink-soft);font-size:.92rem;max-width:34ch}

/* =====================================================================
   FOOTER - cream anchor (matches site canvas), sign-off, link columns,
   legal bar, back-to-top. Emerald ink + deep-green accents for AA contrast.
   ===================================================================== */
.footer{background:var(--cream);color:var(--ink);padding-top:clamp(3rem,6vw,5rem)}
.footer .signoff{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(1.9rem,5vw,3.6rem);line-height:.92;margin-bottom:1.3rem;padding-bottom:clamp(1.2rem,3vw,2.4rem);color:var(--purple)}
.footer .signoff em{color:inherit}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(0,61,72,.16)}
.footer__about .flogo{display:inline-block;margin-bottom:1.1rem}
.footer__about .flogo img{height:56px;width:auto;display:block}
.footer__about p{color:var(--ink-soft);font-size:.9rem;margin:0 0 .5rem;max-width:30ch}
.footer h4{font-family:var(--body);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--green);margin:0 0 1rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer a{color:var(--ink);opacity:.9;font-size:.9rem}.footer a:hover{opacity:1;color:var(--green)}
.footer .socials{display:flex;gap:.6rem;margin-top:1rem}
.footer .socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(0,61,72,.08);color:var(--emerald);opacity:1}
.footer .socials a:hover{background:var(--green);color:#fff}
.footer__bar{display:flex;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;align-items:center;padding:1.5rem 0;font-size:.74rem;color:var(--ink-soft);border-top:1px solid rgba(0,61,72,.1)}
.footer__bar .links{display:flex;gap:1.2rem;flex-wrap:wrap}
.footer__bar .links a{color:var(--ink-soft);opacity:1}.footer__bar .links a:hover{color:var(--green)}
/* WP-61 (feedback #241): the liquor licence notice under the legal bar, printed from the
   "Liquor licence" field on Hotel details. Same ink and scale as the bar. */
.footer__licence{padding:0 0 1.5rem;font-size:.7rem;line-height:1.55;color:var(--ink-soft)}.footer__licence p{margin:0 0 .45em}
.footer__bar .ecobadge{background:#fff;border-radius:6px;padding:.25em .5em}.footer__bar .ecobadge img{height:24px}
.totop{display:grid;place-items:center;width:46px;height:46px;margin:.4rem auto 1.8rem;border-radius:50%;border:1px solid rgba(0,61,72,.3);color:var(--emerald);transition:background .2s,color .2s,border-color .2s}
.totop:hover{background:var(--green);color:#fff;border-color:var(--green)}

/* =====================================================================
   FLOATING POPUP - small newsletter card w/ REAL texture border (Tribe device)
   ===================================================================== */
.popup{position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:200;width:min(330px,calc(100vw - 24px));
  background:#fff;box-shadow:0 30px 70px -24px rgba(0,40,40,.55);
  border:15px solid transparent;border-image:url("assets/brand/textures/glitter-pink.jpg") 30 round;
  padding:1.2rem 1.3rem 1.4rem;transform:translateY(140%);transition:transform .5s var(--ease)}
.popup.show{transform:none}
.popup h3{font-size:1.5rem;color:var(--emerald);margin-bottom:.4rem}
.popup p{font-size:.84rem;color:var(--ink-soft);margin:0 0 .9rem}
.popup form{display:flex;gap:.5rem}
.popup input{flex:1;min-width:0;border:2px solid var(--line);padding:.6em .9em;font-family:inherit;font-size:var(--s-0)} /* 16px or more: iPhone Safari zooms the page into any smaller field */
.popup input:focus{outline:0;border-color:var(--green)}
.popup__x{position:absolute;top:-12px;right:-12px;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:var(--emerald);color:#fff;font-size:1rem;line-height:1;box-shadow:var(--shadow-sm)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media print{.js .reveal{opacity:1;transform:none}}   /* paper does not scroll: every block prints */
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn:hover,.room:hover{transform:none}}

/* responsive */
/* The booking bar goes 2 x 2 before the other blocks do: four fields and the
   button need about 1200px to sit on one row without clipping the dates. */
@media (max-width:1200px){
  .booking form{grid-template-columns:1fr 1fr}
  .booking .field:nth-child(3){border-left:0}
  .booking .field:nth-child(n+3){border-top:1px solid var(--line)}
  .booking__go{grid-column:1/-1;border-top:1px solid var(--line)}
}
@media (max-width:1024px){
  .room{flex-basis:calc((100% - var(--gap)) / 2)}   /* 2-up carousel ≤1024 */
  .who .container,.news__card{grid-template-columns:1fr}
  .news__card{max-width:480px}
  .footer__grid{grid-template-columns:1fr 1fr}
}
/* The burger menu runs up to 1024px: below that the link row does not fit beside the logo and
   the Book button (at tablet width the logo was squeezed to nothing and Book left the screen). */
@media (max-width:1024px){
  .nav{display:none}.burger{display:block}
  /* The open menu is a full-screen sheet. It scrolls inside itself when the links run past the
     screen, the page behind is held still, and the bar rises above the popup (z 200) while it is
     open: the menu's own z-index only counts inside the bar's layer. */
  .topbar.open{z-index:210}
  body:has(.topbar.open){overflow:hidden}   /* on body: set on html it makes body the scroll box and the sticky bar scrolls away with the page */
  .topbar.open .nav{display:flex;flex-direction:column;position:fixed;inset:84px 0 0;background:var(--yellow);padding:1.4rem var(--pad);gap:.1rem;z-index:99;margin:0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .topbar.open .nav a{font-family:var(--display);font-style:normal;font-size:1.9rem;color:var(--emerald);padding:.4em 0;border-bottom:2px solid rgba(0,61,72,.2)}
  .topbar.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .topbar.open .burger span:nth-child(2){opacity:0}
  .topbar.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:760px){
  .hero--show .hero__caption{margin-right:4.4rem;margin-bottom:2rem}   /* clear of the hero button, and of the booking bar over the hero's foot */
  .booking form{grid-template-columns:1fr}
  .room{flex-basis:78%}   /* one card and a peek of the next: the full room names need the width */
  .field{border-left:0;border-top:1px solid var(--line)}.field:first-child{border-top:0}
  .triptych{grid-template-columns:1fr;grid-template-rows:none;min-height:0}
  .tri{grid-row:auto;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(560px,115vw,820px)}
  .tri__box{grid-row:auto;align-self:center}
  .cols .container{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .head{flex-direction:column;align-items:flex-start}
}

/* =====================================================================
   WORDPRESS SHIMS - the only WP-specific rules in the theme.
   Each rule exists because core block markup differs slightly from the
   hand-written POC markup. Keep this list tiny; document every rule.
   ===================================================================== */
/* POC <span>s that had to become <p> blocks in WP (RichText renders p):
   kill the base `p{margin:0 0 1em}` they inherited. */
p.cap{margin:0}
p.who__sig{margin-bottom:0}
/* A2: the roadsign kicker is a <span> in the POC - as a paragraph block it
   inherits the base bottom margin and pushes the sign's text off centre. */
p.roadsign__kicker{margin:0}
/* A1/A2/A3: same story for the section kicker. In the POC it is a <span> inside
   a margin-0 paragraph; as a paragraph block it carries the base 1em bottom
   margin and pushes the section heading 11px down. The modifier is only on the
   subpages whose spacing is measured against an approved POC page. */
p.kicker--flush{margin-bottom:0}
/* WP-2 hero: core/image wraps the photo in a <figure> the POC markup lacked.
   Keep that figure invisible to the .hero__frame flex layout like the bare <img>
   was - no margin, and position:static so the img's `inset:0` keeps resolving
   against .hero__frame (positioned ancestor), letting it fill the frame. */
.hero__frame figure{margin:0;position:static}
/* WP-83 hero photo sequence: a slide IS a figure and must stay the positioned layer it is in the POC
   (the rule above would make it static). Specificity (0,2,1) tops (0,1,1). */
.hero__frame figure.hero__slide{position:absolute}
/* The sticky top bar. WordPress wraps the bar in the header template part, a box exactly
   as tall as the bar, so the bar's own `position:sticky` had no room to travel and the bar
   scrolled away with the page (the POC bar is a child of <body> and sticks). The wrapper
   sticks instead. Sticky makes it a stacking layer, so it takes the bar's z-index (50), and
   the open phone menu's 210, which keeps the menu above the popup (z 200). */
header.wp-block-template-part{position:sticky;top:0;z-index:50}
header.wp-block-template-part:has(.topbar.open){z-index:210}
/* Logged-in admin bar overlaps the sticky bar - offset it. Under 600px the admin bar
   scrolls away with the page, so the bar sticks to the top edge again. */
body.admin-bar header.wp-block-template-part{top:32px}
@media (max-width:782px){body.admin-bar header.wp-block-template-part{top:46px}}
@media (max-width:600px){body.admin-bar header.wp-block-template-part{top:0}}

/* =====================================================================
   HEADER NAV DROPDOWNS (WP-15, redesigned WP-55) - WordPress-only chrome
   extension. The POC nav has no submenu concept; when a Primary menu item
   has child items, blocks/header-topbar renders them in a .nav__item >
   .nav__sub wrapper styled here. CSS-only (hover + :focus-within -
   keyboard works, main.js stays verbatim POC).
   WP-55 "THE BAND" (Claus's pick, 2026-09-20, option C on the decision
   record /design-nav-dropdown.html): a full-width purple band on the page
   grid hanging from the bar - the parent's label as an italic poster word,
   an optional short line and a link to the parent page on the left, the
   child links large in two columns on the right. Locked combo 8 (purple /
   yellow, ~6.3:1, AA); the hovered row flips to combo 1. Purple, because
   the masthead band under the bar is yellow and a yellow panel disappears
   into it. Sizes stepped down 2026-09-20 (theme 0.34.2): at 28 px the links
   read as three steps above the 13 px bar, so links and button sit at 20 px
   and the poster word at about 58 px. No markup change and no visual change when a menu has no
   children.
   The band is the desktop device and starts where the burger menu stops (1024px, see the
   burger block above): keep the two breakpoints in this section in step with it.
   ===================================================================== */
@media (min-width:1025px){
  /* nav + items stretch to the bar's full height, so the pointer travels
     from the word into the band without leaving the item. The item is NOT
     positioned: the band positions against .topbar (sticky) and spans it. */
  .nav{align-self:stretch;align-items:center}
  .nav__item{display:flex;align-items:center;align-self:stretch}
  .nav__toggle{display:none}   /* the phone menu's open/close button */
  /* room + caret (small emerald triangle, matching the underline accent) */
  .nav__item>a{padding-right:1.9em}
  .nav__item>a::before{content:"";position:absolute;right:.8em;top:50%;margin-top:-2px;
    border:4px solid transparent;border-top:5px solid var(--emerald);
    transform-origin:50% 25%;transition:transform .2s var(--ease)}
  .nav__item:hover>a::before,.nav__item:focus-within>a::before{transform:rotate(180deg)}
  /* the parent keeps its underline while its band is open */
  .nav__item:hover>a::after,.nav__item:focus-within>a::after{transform:scaleX(1)}
  /* the band. A short open delay, so a pointer crossing the bar does not
     flash a full-width panel. */
  .nav__sub{position:absolute;top:100%;left:0;right:0;z-index:1;
    background:var(--purple);color:var(--yellow);box-shadow:var(--shadow);
    visibility:hidden;opacity:0;transition:opacity .15s var(--ease),visibility 0s .15s}
  .nav__item:hover .nav__sub{visibility:visible;opacity:1;
    transition:opacity .2s var(--ease) .12s,visibility 0s .12s}
  /* focus opens the band at once: with the pointer's delay its links were still hidden when a fast
     Tab arrived, so the Tab skipped them (WP-106, bug audit V3) */
  .nav__item:focus-within .nav__sub{visibility:visible;opacity:1;transition:opacity .2s var(--ease)}
  /* Esc shuts an open band: .is-shut, set by the inline script in functions.php, holds it closed while
     the pointer or the focus is still on the item, and the caret turns back (WP-106, bug audit V2) */
  .nav__item.is-shut .nav__sub{visibility:hidden;opacity:0;transition:none}
  .nav__item.is-shut>a::before{transform:none}
  .nav__band{width:min(100% - 2*var(--pad),var(--container));margin-inline:auto;
    display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:clamp(1.5rem,3.5vw,3.5rem);
    padding-block:1.6rem 1.8rem;align-items:stretch;min-height:var(--band-min,0px)}
  /* The band always covers the yellow masthead behind it: --band-min is measured by
     the inline script in functions.php (the homepage poster headline is far taller
     than a subpage's). On a tall band the intro column is a poster composition, word
     at the top and the button on the bottom edge, so the extra height reads as
     layout, not padding. On a band at its natural height nothing moves. */
  .nav__intro{display:flex;flex-direction:column;align-items:flex-start}
  .nav__intro>:nth-last-child(2){margin-bottom:1.3rem}
  .nav__links{align-content:start}
  .nav__word{display:block;font-family:var(--display);font-weight:700;font-style:italic;
    text-transform:uppercase;font-size:clamp(2.4rem,1.6rem + 2.4vw,3.6rem);line-height:.82;
    letter-spacing:.01em;color:var(--yellow)}
  .nav__lede{font-size:.95rem;line-height:1.5;max-width:28ch;margin:.9rem 0 0;color:var(--yellow)}
  .nav__sub a:focus-visible{outline-color:var(--yellow)}
  /* the link to the parent page is a solid yellow button in the display face
     (combo 1 on the combo 8 band): hovering the word opens the band, so this is
     how a visitor finds the parent page and it must not be missed (Claus 2026-09-20) */
  .nav__sub a.nav__all{display:inline-flex;align-items:center;gap:.55em;margin-top:auto;
    padding:.6em 1.1em;background:var(--yellow);color:var(--purple);
    font-family:var(--display);font-weight:700;font-size:1.25rem;
    letter-spacing:.03em;line-height:1.05;transition:background .18s}
  .nav__sub a.nav__all span{font-family:var(--body);font-size:.75em;transition:transform .18s var(--ease)}
  .nav__sub a.nav__all::after{display:none}
  .nav__sub a.nav__all:hover,.nav__sub a.nav__all:focus-visible{background:#fff}
  .nav__sub a.nav__all:hover span,.nav__sub a.nav__all:focus-visible span{transform:translateX(4px)}
  /* the links sit close to the word, not spread across the grid: a fixed intro
     column and a capped links block, the spare width stays on the right (Claus 2026-09-20) */
  .nav__links{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1rem,3vw,3rem);max-width:52rem}
  .nav__links a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    font-family:var(--display);font-weight:700;font-size:1.25rem;
    letter-spacing:.02em;line-height:1.05;color:var(--yellow);padding:.62em .6rem;
    border-bottom:1px solid rgba(255,224,0,.25);transition:background .18s,color .18s}
  /* the top-level underline accent becomes the row's arrow */
  .nav__sub .nav__links a::after{content:"\2192";position:static;height:auto;background:none;
    transform:none;font-family:var(--body);font-size:.75em;opacity:.55;
    transition:opacity .18s,transform .18s var(--ease)}
  .nav__links a:hover,.nav__links a:focus-visible{background:var(--yellow);color:var(--purple)}
  .nav__sub .nav__links a:hover::after,.nav__sub .nav__links a:focus-visible::after{opacity:1;transform:translateX(3px)}
  /* the page the visitor is on: a yellow bar on the row's left edge */
  .nav__links a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--yellow)}
  .nav__sub .nav__links a[aria-current="page"]::after{opacity:1}
}
@media (min-width:1025px) and (prefers-reduced-motion:reduce){
  .nav__sub,.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{transition:none}
}
@media (max-width:1024px){
  /* burger panel: a parent's children are COLLAPSED until its chevron button
     opens them (Claus 2026-09-20; the click is wired by the inline script in
     functions.php, the parent word itself stays a link to its page; a parent
     with no page, .nav__opener, works the button instead, #312). Open,
     they sit indented under their parent. Anchors inside the wrappers are
     no longer flex children of .nav - stack them explicitly. The band's
     poster word, short line and "all" link are desktop devices: the parent
     link above already leads to the same page. */
  .nav__item{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .nav__toggle{position:relative;width:3.4rem;padding:0;border:0;background:none;cursor:pointer;
    border-bottom:2px solid rgba(0,61,72,.2);-webkit-tap-highlight-color:transparent}
  .nav__toggle::before{content:"";position:absolute;left:50%;top:50%;width:.75rem;height:.75rem;
    margin:-.6rem 0 0 -.375rem;border-right:3px solid var(--emerald);border-bottom:3px solid var(--emerald);
    transform:rotate(45deg);transition:transform .2s var(--ease),margin .2s var(--ease)}
  .nav__item.is-expanded>.nav__toggle::before{transform:rotate(-135deg);margin-top:-.2rem}
  .nav__sub{grid-column:1/-1;display:none}
  .nav__item.is-expanded>.nav__sub{display:block}
  .nav__word,.nav__lede,.topbar.open .nav__sub a.nav__all{display:none}
  .topbar.open .nav__item>a,.topbar.open .nav__sub a{display:block}
  .topbar.open .nav__sub{margin-left:1.15rem}
  .topbar.open .nav__sub a{font-size:1.25rem;padding:.35em 0;
    border-bottom-color:rgba(0,61,72,.12)}
  .topbar.open .nav__item>a{border-bottom-color:rgba(0,61,72,.2)}
}

/* =====================================================================
   SUBPAGE DEVICES (WP-16, 2026-07-18) - the inner-page design system.
   Every rule here is a DERIVATIVE of a client-approved homepage device
   (ibis-site-styleguide §6) recomposed for the inner pages; none of these
   classes appear in the homepage markup, so the approved homepage rendering
   cannot change. /index.html remains the homepage reference design.
   Colours: strictly the 8 locked combos (ibis-color-pairings).
   ===================================================================== */

/* --- Slim page header photo - the approved framed hero (§6-A) at banner
       height. Same markup/classes as .hero, plus the --slim modifier. */
.hero--slim .hero__frame{min-height:clamp(230px,36vh,420px)}

/* --- Statement band - the colour-band device family (socialband geometry,
       §6-E) generalised: solid combo ground, upright condensed heading left,
       optional short copy + underline CTA right. One ink per block. */
.band{padding-block:clamp(2.6rem,5.5vw,4.2rem)}
.band .container{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem 3rem;flex-wrap:wrap}
.band h2{font-size:var(--s-3);max-width:16ch;color:inherit;line-height:.85}
.band__side{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;max-width:44ch}
.band__side p{margin:0;font-weight:600;color:inherit}
.band .link{color:inherit;border-color:currentColor}
.band--yellow{background:var(--yellow);color:var(--purple)}        /* combo 1 */
.band--pinkpale{background:var(--pink-pale);color:var(--emerald)}  /* combo 2 */
.band--green{background:var(--green);color:var(--pink-pale)}       /* combo 3 - display + CTA only */
.band--bluepale{background:var(--blue-pale);color:var(--purple)}   /* combo 4 */
.band--turq{background:var(--turq);color:var(--purple)}            /* combo 5 - display + CTA only */
.band--emerald{background:var(--emerald);color:var(--orange)}      /* combo 7 - display + CTA only */
.band--purple{background:var(--purple);color:var(--yellow)}        /* combo 8 */

/* --- Location variant of the socialband (WP-24) - same combo-4 ground
       (pale-blue → purple); the .socials cluster swaps for the old-site
       "Hotel address / Reservations" facts. One ink: purple. Copied verbatim
       from home-current-content.html; used by the /home-current-content/
       review page. Additive: .locinfo is absent from homepage markup. */
.locinfo{display:flex;gap:clamp(1.8rem,5vw,4.5rem);flex-wrap:wrap}
.locinfo h3{font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--purple);margin:0 0 .5rem}
.locinfo p{margin:0;font-weight:600;color:var(--purple);line-height:1.55}
.locinfo a{border-bottom:2px solid currentColor;padding-bottom:1px}
.locinfo a:hover{color:var(--emerald)}

/* --- Facts list - the who__list ◆ device (§6-F) on the calm cream canvas:
       emerald copy, purple diamonds. */
.facts{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.6rem 2.4rem}
.facts li{font-weight:600;padding-left:1.65em;position:relative;line-height:1.4;max-width:52ch}
.facts li::before{content:"\25C6";position:absolute;left:0;top:.18em;font-size:.82em;color:var(--purple)}
.facts--2col{grid-template-columns:1fr 1fr}

/* --- Card grid - the room-card idiom (§6-D) as a static grid: calm white
       boxes on cream, square-edged media, condensed names, tiny tracked tags.
       Link cards (a.card) lift and zoom like room cards. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);color:var(--ink);display:flex;flex-direction:column;transition:transform .3s var(--ease)}
.card__media{overflow:hidden}
/* aspect on the img itself (not the box): survives core/image's <figure> wrapper
   and the editor's extra block wrappers */
.card__media img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s var(--ease)}
.card__media figure{margin:0}
.card__box{flex:1;display:flex;flex-direction:column;gap:.45rem;padding:1.15rem 1.2rem 1.3rem;
  transition:background .3s var(--ease),color .3s var(--ease)}
.card__box .link{margin-top:auto;padding-top:.7rem} /* pin CTAs to the card foot so rows align */
.card__box .kicker{align-self:flex-start;margin:0 0 .2rem}
.card__tag{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.card__name{font-size:clamp(1.45rem,2.1vw,2rem);line-height:.9;color:var(--emerald);
  display:flex;align-items:center;gap:.45rem}
.card__name .arrow{font-size:.8em}
.card__box p:not(.kicker):not(.card__tag){margin:0;font-size:.92rem;color:var(--ink-soft)}
/* tag/meta also arrive as <p> blocks in WP - outrank the generic p rule above */
.card__meta,.card__box p.card__meta{margin-top:auto;padding-top:.6rem;font-size:.82rem;font-weight:500;color:var(--ink)}
.card__box p.card__tag{margin:0;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.card__meta b{font-family:var(--display);font-weight:700;font-size:1.15em;letter-spacing:.01em}
/* THE SITE CARD (Claus's pick 2026-09-19, design-cards.html option A "Flood"): every card grid
   behaves like the homepage room card. Calm white at rest, square photo; on hover or focus the card
   lifts, the photo zooms and the whole text box floods with ONE locked combo in one ink. A text card
   only takes a combo whose small text stays readable, set by position: 8, then 1, then 4. */
.card{--accent:var(--purple);--accent-ink:var(--yellow)}                         /* combo 8 */
.card:nth-child(3n+2){--accent:var(--yellow);--accent-ink:var(--purple)}         /* combo 1 */
.card:nth-child(3n){--accent:var(--blue-pale);--accent-ink:var(--purple)}        /* combo 4 */
.card:hover,.card:focus-within,a.card:focus-visible{transform:translateY(-5px)}
.card:hover .card__media img,.card:focus-within .card__media img{transform:scale(1.05)}
.card:hover .arrow,.card:focus-within .arrow{transform:translateX(4px)}
.card:hover .card__box,.card:focus-within .card__box{background:var(--accent);color:var(--accent-ink)}
.card:hover .card__box :is(.card__tag,.card__name,.card__meta,p,a),
.card:focus-within .card__box :is(.card__tag,.card__name,.card__meta,p,a){color:inherit}
.card:hover .card__box :is(.link,a),.card:focus-within .card__box :is(.link,a){border-color:currentColor}
.card:hover .facts li::before,.card:focus-within .facts li::before{color:inherit}
/* The whole card is the link (Claus, 2026-09-21, feedback #199): a card's one `.link` stretches over
   the card, so the photo and the copy open it too, which matters most on a phone. A card without a
   link is unchanged. Any other link in a card sits above the stretched one and stays clickable. */
.card{position:relative}
.card a.link::after{content:"";position:absolute;inset:0;z-index:1}
.card a:not(.link){position:relative;z-index:2}

/* --- Two-column split - details beside a form/panel (contact, meetings).
       A6 (2026-09-07): resynced to the approved POC - brand gap, equal-height
       columns, so the form/panel/map fill the row. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}

/* --- Enquiry form panel - the booking-bar field idiom (§6-B) as a boxed
       white form. Functional widget: markup stays locked wp:html.
       A6 (2026-09-07): resynced verbatim to contact-us.html / meeting-rooms.html.
       The legacy :nth-child border rules are gone - the POC marks the right-hand
       column with .field--r, which the two forms' differing row counts need. */
.enquiry{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column}
.enquiry form{display:grid;grid-template-columns:1fr 1fr;flex:1}
.enquiry__intro{grid-column:1/-1;padding:clamp(1.3rem,2.2vw,1.9rem) 1.3rem 1.2rem}
.enquiry__intro h3{font-size:clamp(1.7rem,2.4vw,2.4rem);color:var(--emerald);margin-bottom:.4rem}
.enquiry__intro p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:46ch}
.enquiry .field{border-left:0;border-top:1px solid var(--line);padding:1rem 1.3rem}
.enquiry .field--r{border-left:1px solid var(--line)}
.enquiry .field--full{grid-column:1/-1}
.enquiry .field--msg{justify-content:flex-start}
.enquiry .field--msg textarea{flex:1}
.enquiry .field:focus-within{box-shadow:inset 4px 0 0 var(--green)}
.enquiry__go{grid-column:1/-1;border-top:1px solid var(--line);padding:1rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.4rem;flex-wrap:wrap}
.enquiry__go p{margin:0;font-size:.8rem;line-height:1.45;color:var(--ink-soft);max-width:34ch}
.enquiry__go p a{font-weight:700;color:var(--emerald);border-bottom:2px solid var(--green)}
/* Per-page row template: the message row takes the slack so the form matches the
   height of the panel beside it. The two live forms have different row counts, so
   the template is carried by a page modifier instead of the shared rule (A1/A3). */
.enquiry--contact form{grid-template-rows:auto auto auto auto 1fr auto}
.enquiry--meetings form{grid-template-rows:auto auto auto auto auto auto 1fr auto}
.enquiry--meetings .field--msg textarea{max-height:15em}

/* --- Blog: the index cards, the post column and their type live in the BLOG block at
       the end of this file. Only the article measure stays here. */
.singlepost .wp-block-post-content{max-width:70ch}

/* --- Core gallery (Gallery page) - square crops on the brand gap. */
.gallerygrid .wp-block-gallery{--wp--style--unstable-gallery-gap:var(--gap);gap:var(--gap)}
.gallerygrid .wp-block-gallery figure{margin:0}

/* subpage devices - responsive */
@media (max-width:1024px){
  .cards{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cards,.cards--2,.facts--2col{grid-template-columns:1fr}
  /* A6: one column, and the row template drops with it. */
  .enquiry form,.enquiry--contact form,.enquiry--meetings form{grid-template-columns:1fr;grid-template-rows:none}
  .enquiry .field,.enquiry .field--r{border-left:0}
  .hero__caption{margin-bottom:2rem}
}

/* =====================================================================
   SEARCH, ARCHIVES & NAV STATE (WP-17).
   - Current page in the header nav: the existing emerald underline accent
     simply stays on (aria-current="page" set by blocks/header-topbar;
     .is-current marks a dropdown parent whose child is the current page -
     sub-panel links reuse their yellow underline variant automatically).
   - The search form on templates/search.html (core wp:search), styled as
     the brand's boxed input + green primary button (white-text CTA
     exception, same as .btn--primary).
   ===================================================================== */
.nav a[aria-current="page"]::after,.nav__item.is-current>a::after{transform:scaleX(1)}
@media (max-width:760px){
  .topbar.open .nav a[aria-current="page"]{color:var(--purple)}
}
.ibis-search{margin:0 0 2.4rem}
.ibis-search .wp-block-search__inside-wrapper{display:flex;max-width:520px}
.ibis-search .wp-block-search__input{flex:1;min-width:0;border:2px solid var(--emerald);border-right:0;
  background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;padding:.8em 1em;border-radius:0}
.ibis-search .wp-block-search__button{border:0;border-radius:0;cursor:pointer;background:var(--green);color:#fff;
  font-family:var(--body);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:.8em 1.6em}
.ibis-search .wp-block-search__button:hover{background:var(--green-deep)}

/* =====================================================================
   BLOG POST DEVICES (WP-18, 2026-07-18) - article scaffolds for posts.
   Two starter patterns (blog-post-styleguide, blog-post-charter) drop into
   a post's core/post-content; the front end renders them inside
   templates/single.html (.singlepost > .container > .wp-block-post-content,
   capped at 70ch). Every class here is a DERIVATIVE of an approved device
   (ibis-site-styleguide §6: the statement band, the who ◆ list, the kicker,
   the keyline/quote/claim charter devices) sized for the article column.
   None appear in homepage markup - the approved homepage cannot change.
   Colours: strictly the 8 locked combos (ibis-color-pairings); decorative
   pattern accents carry NO text and use only exact palette tokens.
   ===================================================================== */

/* --- Lead / intro paragraph opening an article. Styleguide = Barlow;
       the charter variant is the charter "claim body" (condensed italic). */
.postlead{font-size:var(--s-1);line-height:1.5;color:var(--ink);margin:0 0 1.6rem;max-width:54ch}
.postlead--charter{font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem);line-height:1.2;color:var(--purple);letter-spacing:.005em}

/* --- Statement callout - the §6-E band device recomposed for the article
       column: a solid combo block, one ink, condensed display "title" (a <p>,
       NOT a heading, so it never collides with the purple article-heading
       rule) + a short line. combo 1 (yellow→purple) / combo 8 (purple→yellow). */
.callout{padding:clamp(1.5rem,3.5vw,2.3rem);margin:2.6rem 0;display:flex;flex-direction:column;
  align-items:flex-start;gap:.7rem}
.callout p{margin:0;color:inherit}
.callout .callout__title{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:var(--s-2);line-height:.9;letter-spacing:.01em}
.callout .callout__lead{font-weight:600}
.callout--yellow{background:var(--yellow);color:var(--purple)}   /* combo 1-6.33 AA */
.callout--purple{background:var(--purple);color:var(--yellow)}   /* combo 8-6.33 AA */
.callout--claim .callout__title{font-style:italic}              /* charter claim-card voice */

/* --- Keyline box - the charter keyline device (p45/77/85): a thin 2px
       purple rule framing an aside/tip on the cream canvas. Border + text
       only (purple label, emerald body) - neutral, off-system, no ground. */
.postkeyline{border:2px solid var(--purple);padding:clamp(1.2rem,3vw,1.7rem);margin:2.6rem 0}
.postkeyline>*{margin:0}
.postkeyline .postkeyline__label{font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.66rem;color:var(--purple);margin:0 0 .55rem}
.postkeyline p{color:var(--ink)}

/* --- Quote frame - the charter quote device (p85) without texture (small
       text stays legible): huge purple italic quote in an emerald keyline
       box on cream, big opening quote mark. All neutral colours. */
.postquote{border:2px solid var(--emerald);padding:clamp(1.6rem,3.5vw,2.4rem) clamp(1.6rem,3.5vw,2.4rem) clamp(1.3rem,3vw,1.9rem);
  margin:2.8rem 0;position:relative}
.postquote p{margin:0}
.postquote .postquote__text{font-family:var(--display);font-weight:600;font-style:italic;
  text-transform:none;font-size:clamp(1.5rem,1rem + 2vw,2.4rem);line-height:1.02;color:var(--purple)}
.postquote .postquote__text::before{content:"\201C";font-size:1.1em;line-height:0;vertical-align:-.15em;margin-right:.05em}
.postquote .postquote__cite{margin-top:.9rem;font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.68rem;color:var(--emerald)}

/* --- Article media: on-brand image + tracked-caps caption inside the post. */
.singlepost .wp-block-post-content figure.wp-block-image{margin:2.4rem 0}
.singlepost .wp-block-post-content figure.wp-block-image img{width:100%;height:auto}
.singlepost .wp-block-post-content figure.wp-block-image figcaption{margin-top:.7rem;text-align:left;
  font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.7rem;color:var(--ink-soft)}
.singlepost .wp-block-post-content .facts{margin:1.8rem 0 2rem}

/* --- WP-20 (2026-07-22): five article FORMAT scaffolds (blog-post-listicle,
       -itinerary, -interview, -photo-essay, -roundup) extend the WP-18 pair.
       Same rules: every device is a derivative of an approved device sized
       for the 70ch article column; solid grounds use combo 1 (yellow→purple)
       ONLY; everything else is neutral border+text on the cream canvas. */

/* Listicle - numbered entries: a CSS counter renders a yellow number chip
   (combo 1) on every h2 inside the .listicle wrapper. The numbers are
   generated content - un-editable, re-order-proof, can never drift. */
.listicle{counter-reset:listicle}
.listicle h2{counter-increment:listicle;display:flex;align-items:baseline;gap:.5em}
.listicle h2::before{content:counter(listicle,decimal-leading-zero);flex:none;
  background:var(--yellow);color:var(--purple);font-size:.6em;line-height:1;
  padding:.34em .4em .27em;letter-spacing:.03em}

/* Itinerary - hour-by-hour rows ruled like the price-list: condensed italic
   purple time label + prose. Neutral (text + hairlines on cream). */
.postagenda{margin:1.6rem 0 2.2rem;border-top:2px solid var(--emerald)}
.postagenda__row{display:grid;grid-template-columns:6.5rem 1fr;gap:.3rem 1.4rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line)}
.postagenda__row p{margin:0}
.postagenda__time{font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;color:var(--purple);font-size:1.15rem;line-height:1.1}

/* Interview - a question is the article h3 switched to the charter's spoken
   voice: condensed italic, sentence case. Answers stay body prose. */
.singlepost .wp-block-post-content h3.qa__q{font-style:italic;text-transform:none;
  font-size:1.45rem;letter-spacing:.005em;line-height:1.05;margin:1.9em 0 .45em}

/* Photo essay - two-up image row on the brand gap; captions inherit the
   tracked-caps figcaption style above. */
.postduo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:2.4rem 0}
.singlepost .wp-block-post-content .postduo figure.wp-block-image{margin:0}

/* Roundup - event rows: a yellow date square (combo 1) beside an emerald
   condensed event name + one soft line of detail. */
.postevents{margin:1.6rem 0 2.2rem;border-top:2px solid var(--emerald)}
.postevent{display:grid;grid-template-columns:4.6rem 1fr;gap:.15rem 1.3rem;
  padding:1.15rem 0;border-bottom:1px solid var(--line)}
.postevent p{margin:0}
.postevent__date{grid-row:1/span 2;align-self:start;background:var(--yellow);color:var(--purple);
  font-family:var(--display);font-weight:700;text-transform:uppercase;text-align:center;
  font-size:1.05rem;line-height:.95;padding:.55rem .3rem .5rem;letter-spacing:.02em}
.singlepost .wp-block-post-content h3.postevent__name{color:var(--emerald);margin:0;
  font-size:clamp(1.35rem,2vw,1.7rem)}
.postevent p:not(.postevent__date){color:var(--ink-soft);font-size:.95rem}

/* WP-20 format devices - responsive */
@media (max-width:600px){
  .postduo{grid-template-columns:1fr}
  .postagenda__row{grid-template-columns:5.4rem 1fr}
  .postevent{grid-template-columns:4rem 1fr;gap:.15rem 1rem}
}

/* --- WP-21 (2026-07-22): single-post right rail. The 70ch article column
       left dead space at desktop; templates/single.html now grids the
       article beside a sticky aside of design-locked chrome (template-only -
       the client never edits it): a purple booking card (combo 8; its CTA is
       a yellow→purple button, combo 1) and the "In this story" contents list
       (BLOG block below). The latest-posts loop and the what's-on keyline left
       the rail 2026-09-19: related stories now run as photo cards under the article.
       Rail collapses under the article below 1024px. */
.postgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(2.2rem,4.5vw,4.2rem);align-items:start}
.postaside{position:sticky;top:6.2rem;display:flex;flex-direction:column;gap:var(--gap)}
.asidelabel{font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.66rem;color:var(--purple);margin:0 0 .3rem}
/* booking card - combo 8 ground, combo 1 CTA */
.asidebook{background:var(--purple);color:var(--yellow);
  padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
.asidebook p{margin:0;color:inherit}
.asidebook__title{font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:clamp(1.8rem,1.5rem + 1vw,2.3rem);line-height:.88}
.asidebook__lead{font-weight:600;font-size:.92rem;line-height:1.45}
.btn--onpurple{background:var(--yellow);color:var(--purple)}   /* combo 1 */
.btn--onpurple:hover{background:#fff;color:var(--purple)}
@media (max-width:1024px){
  .postgrid{grid-template-columns:1fr;gap:3rem}
  .postaside{position:static}
}

/* --- WP-22 (2026-07-22), widened 2026-09-08 (client call): masthead step-down
       for EVERY page except the homepage. The poster size (--s-mast, ≤176px)
       is the homepage's signature; on a subpage it overpowers the page and
       post titles, being sentences, wrap 3+ lines at that size.
       Design principle applied: never truncate an h1 - size display type by
       the length class of what it carries (editorial headline tiers). Posts
       step down one tier so a typical 40-60-char title resolves in ≤2 lines
       at desktop, and text-wrap:balance evens the break (no orphan word).
       Scoped to body:not(.home) - ONLY the homepage keeps the poster size, plus
       .is-home-mirror (the "Home - Current Content" review page, which mirrors it).
       Mirrored in the reference HTML subpages (contact-us, getting-here,
       meeting-rooms, design-blocks*), which hard-code the same clamp. */
body:not(.home):not(.is-home-mirror) .masthead__title h1{
  font-size:clamp(2.6rem,1.2rem + 6.5vw,6.5rem);
  text-wrap:balance}

/* --- WP-23 second pass (2026-07-22, colour-budget call): posts open CALM.
       Article scaffolds use .postkicker - the kicker's tracked caps WITHOUT
       the solid ground (boxed .kicker stays a page/section device). The
       masthead + date + plain kicker now form a quiet opening; the article's
       colour arrives later, balanced by imagery. */
.postkicker{font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.7rem;color:var(--purple);margin:0 0 1.1rem}


/* =====================================================================
   CHARTER DESIGN BLOCKS (WP-19) - additive; classes appear only in charter
   block patterns (patterns/charter-*.php), never in homepage/subpage markup,
   so the approved homepage + WP-16/17/18 pages are unchanged.
   Ported VERBATIM from the charter-direct exploration pages
   (design-blocks-charter{,-2,-3}.html). These are PROPOSAL blocks: several
   colour pairings are CHARTER EXTENSIONS beyond the locked 8 combos BY DESIGN
 - the 8-combo verifier applies to the HOMEPAGE only, not to these classes.
   Shell CSS (:root, body, .kicker, .container, .section, .head, .btn, .link,
   .reveal, masthead/footer) is NOT re-ported - the theme already carries it
   identically; only block-specific rules + the tint tokens below are added.
   ===================================================================== */

/* Charter tint-scale tokens NOT already in the theme :root (every other charter
   token - --pink #E83C75 vivid, --green-deep, --pink-pale, --blue-pale, --cream-2,
   --s-mast … - is byte-identical in the theme root, so it is REUSED, not redefined). */
:root{
  --yellow-t20:color-mix(in srgb,var(--yellow) 20%,white);  /* qframe cream quote ink */
  --turq-t20:color-mix(in srgb,var(--turq) 20%,white);      /* mosaic row3 / roadsign ground */
  --turq-t60:color-mix(in srgb,var(--turq) 60%,white);      /* gallery diamond tone-on-tone */
  --green-t60:color-mix(in srgb,var(--green) 60%,white);    /* CTA stripes tone-on-tone */
  --rose-deep:#902549;                                      /* business-card tone-on-tone plate */
}


/* ---------- charter file A (design-blocks-charter.html) - block devices ---------- */

/* Texture band inside the shell's white FRAME LINER (charter p22-25) */
.texband{border:clamp(12px,2vw,26px) solid #fff}
/* WP-112 (Claus, 2026-10-11): on a page with a form the band's texture is a FIELD. The section
   module prints the chosen one as an inline background-image on the section (the brand's set, or
   any Media Library image), which outranks the image in the `.news`, `.notepad` and modifier rules
   below; their background-color stays the fallback while it loads, and `center/cover` still applies.
   An empty field leaves the class's texture in charge. The record pages' bands are not fields. */

/* =====================================================================
   CHARTER 01 · QUOTE FRAME (p85) - jam-red texture full-bleed, huge
   condensed BOLD ITALIC caps quote in yellow-20 "cream" inside a thin
   white keyline, oversized „ marks. Texture + coloured type only -
   one background ingredient, no second inset (layering law p18).
   ===================================================================== */
.qframe{background:#5d0f13 url("assets/brand/textures/jam-red.jpg") center/cover no-repeat;
  min-height:clamp(480px,60vh,560px);display:flex;align-items:center}
.qframe .container{padding-block:clamp(2.4rem,5vw,4rem)}
.qframe__box{border:2px solid #fff;max-width:900px;
  padding:clamp(1.5rem,3.6vw,3rem) clamp(1.4rem,3.6vw,3rem);margin:0}
.qframe__mark{display:block;font-family:var(--display);font-weight:700;font-style:italic;
  font-size:clamp(4.4rem,9vw,7.5rem);line-height:.55;color:var(--yellow-t20);
  height:.5em;transform:translateY(-.28em);user-select:none}
.qframe blockquote{margin:0;font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:.92;
  letter-spacing:.01em;color:var(--yellow-t20);max-width:18ch}
.qframe figcaption{margin-top:clamp(1.1rem,2.4vw,1.8rem);color:#fff;font-family:var(--display);
  font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(.9rem,1.2vw,1.05rem);
  letter-spacing:.05em;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}

/* =====================================================================
   CHARTER 02 · MOSAIC FAQ (p85 agenda grid + p21 ◆) - each summary bar
   a different mosaic cell; houndstooth toggle tile (pattern p17,
   yellow-on-purple recolour); native details/summary, CSS-only.
   ===================================================================== */
.mosaic{display:grid;gap:.7rem;max-width:920px}
.mosaic details{background:var(--paper);border:1px solid var(--line)}
.mosaic summary{list-style:none;display:flex;align-items:center;gap:1rem;cursor:pointer;
  padding:.9rem 1.1rem;font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:clamp(1.25rem,1.8vw,1.7rem);line-height:1;letter-spacing:.01em}
.mosaic summary::-webkit-details-marker{display:none}
.mosaic summary .dia{font-size:.6em;transform:translateY(-.15em);flex:0 0 auto}
.mosaic summary .q{flex:1;min-width:0}
.mosaic .row1 summary{background:var(--yellow);color:var(--purple)}
.mosaic .row2 summary{background:var(--pink-pale);color:var(--emerald)}
.mosaic .row3 summary{background:var(--turq-t20);color:var(--purple)}
.mosaic .row4 summary{background:var(--purple);color:var(--yellow)}
/* Houndstooth toggle tile - inline SVG tile, yellow-on-purple */
.mosaic .hound{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  color:#fff;font-family:var(--body);font-weight:700;font-style:normal;font-size:1.8rem;line-height:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='22' height='22' fill='%237D00B2'/%3E%3Cpath d='M0 0h11v11H0zM11 11h11v11H11z' fill='%23FFE000'/%3E%3Cpath d='M11 0l11 11V0zM0 11l11 11H0z' fill='%23FFE000'/%3E%3C/svg%3E") 0 0/22px 22px}
.mosaic .hound::before{content:"+";display:block;transition:transform .25s var(--ease);
  text-shadow:0 0 4px rgba(0,0,0,.85),0 0 9px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.7)}
.mosaic details[open] .hound::before{transform:rotate(45deg)}   /* + becomes × - only the glyph turns */
@media (prefers-reduced-motion:reduce){.mosaic .hound::before{transition:none}}
.mosaic .faq__a{padding:1rem 1.2rem 1.2rem;max-width:72ch;background:var(--paper)}
.mosaic .faq__a p{margin:0;color:var(--purple)}
.mosaic .faq__a a{text-decoration:underline}

/* =====================================================================
   CHARTER 03 · WAYFINDING B/W stats (p97-108) - yellow ground, white
   square cards, giant BLACK condensed bold-italic values, thin rule,
   caps label, black chevron ➤. The charter's only B/W device.
   ===================================================================== */
.wayfind{background:var(--yellow)}
.wayfind .container{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.4rem);
  padding-block:clamp(2.2rem,4.8vw,4rem)}
.wf{background:#fff;color:#000;aspect-ratio:1;padding:clamp(1rem,1.7vw,1.6rem);
  display:flex;flex-direction:column}
.wf b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(2.9rem,5.4vw,5.4rem);line-height:.85;letter-spacing:.01em}
.wf .wf__rule{height:2px;background:#000;margin-top:auto;margin-bottom:.7rem}
.wf .wf__foot{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.wf .wf__foot span{font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.wf .wf__chev{font-size:.85rem;line-height:1;flex:0 0 auto}

/* =====================================================================
   CHARTER 04 · PRICE LIST (p55) - purple panel, yellow condensed bold
   italic heading, white bold-italic items with dotted leaders, yellow
   sub-notes, ◆ "always included" strip, pale footnote. All small text
   white/yellow on purple = AA.
   ===================================================================== */
.pricelist{background:var(--purple);color:#fff;max-width:920px;
  padding:clamp(1.7rem,3.4vw,3rem);box-shadow:var(--shadow-sm)}
.pricelist h3{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--yellow);font-size:clamp(2rem,3.4vw,3rem);line-height:.88;margin:0 0 1.5rem}
.pl__row{display:flex;align-items:baseline;gap:.9rem}
.pl__row + .pl__row,.pl__note + .pl__row{margin-top:.85rem}
.pl__item{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1;letter-spacing:.02em;white-space:nowrap}
.pl__dots{flex:1;border-bottom:2px dotted rgba(255,255,255,.45);transform:translateY(-.28em);min-width:2rem}
.pl__val{font-weight:700;text-align:right;white-space:nowrap}
.pl__note{display:block;margin:.2rem 0 0;font-size:.8rem;font-weight:600;color:var(--yellow)}
.pl__inc{margin-top:1.7rem;padding-top:1.3rem;border-top:2px solid rgba(255,255,255,.35)}
.pl__inc h4{margin:0 0 .7rem;font-family:var(--body);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff}
.pl__inc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.pl__inc li{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:1.05rem;line-height:1}
.pl__inc li .dia{color:var(--yellow);font-size:.7em;margin-right:.45em;vertical-align:.12em}
.pl__fine{margin:1.3rem 0 0;font-size:.78rem;color:rgba(255,255,255,.78)}

/* =====================================================================
   CHARTER 05 · HERO CLAIM CARD (p41 + p22 lockup) - toast texture
   full-bleed in the white frame, VIVID-PINK claim block bottom-left
   (CHARTER EXTENSION ground), yellow condensed bold italic claim +
   price lockup, white terms, ghost white-keyline CTA with green ➤,
   LOGO NOTCH: white square cut into the block's bottom-right corner.
   Photo/texture background + ONE colour inset = layering-law compliant.
   ===================================================================== */
.offerhero{position:relative;background:#8a5a2b url("assets/brand/textures/toast.jpg") center/cover no-repeat;
  min-height:clamp(500px,64vh,640px);display:flex;align-items:flex-end}
.offerhero .claim{position:relative;background:var(--pink);color:var(--yellow);
  width:min(480px,calc(100% - 2*var(--pad)));margin:clamp(4rem,8vw,6rem) 0 clamp(2.8rem,5vw,3.8rem) var(--pad);
  padding:clamp(1.5rem,2.8vw,2.3rem);padding-bottom:clamp(4.8rem,7vw,5.4rem)}
.claim h3{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--yellow);font-size:clamp(2.7rem,4.8vw,4.2rem);line-height:.85;margin:0 0 .8rem}
.claim .lockup{display:flex;align-items:baseline;gap:.55rem;color:var(--yellow);
  font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;line-height:1}
.claim .lockup small{font-size:1.05rem;letter-spacing:.03em}
.claim .lockup b{font-size:clamp(1.9rem,2.8vw,2.6rem)}
.claim .terms{color:#fff;font-weight:600;font-size:.95rem;line-height:1.4;margin:.8rem 0 1.2rem;max-width:36ch}
.claim .btn--ghostwhite{background:transparent;border:2px solid #fff;color:#fff}
.claim .btn--ghostwhite:hover{background:#fff;color:var(--pink)}
.claim .btn--ghostwhite .chev{color:var(--green-logo);font-size:.9em}
.claim__notch{position:absolute;right:0;bottom:0;background:#fff;
  padding:.6rem .7rem .55rem .95rem}                    /* the white notch, flush to the corner */
.claim__notch img{height:44px;width:auto;display:block}
.offerhero .photocap{position:absolute;left:var(--pad);bottom:.9rem;margin:0;color:#fff;
  font-family:var(--display);font-weight:700;font-style:italic;font-size:1.05rem;letter-spacing:.03em;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* =====================================================================
   CHARTER 06 · COLOUR-PANEL SEQUENCE (p50) - one flush zero-gap strip:
   purple cover with huge ORANGE title (CHARTER EXTENSION, display only)
   + three panels (combos 1 / 4 / 3), each number + title + ◆ bullets.
   ===================================================================== */
.panelseq{display:grid;grid-template-columns:repeat(4,1fr);gap:0;box-shadow:var(--shadow-sm)}
.panel{min-height:clamp(280px,26vw,380px);padding:clamp(1.3rem,2vw,1.9rem);
  display:flex;flex-direction:column}
.panel--cover{background:var(--purple)}
.panel--cover h3{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--orange);font-size:clamp(2.7rem,3.8vw,3.8rem);line-height:.85;margin:0}
.panel--cover p{color:var(--pink-pale);font-weight:600;font-size:.9rem;line-height:1.45;margin:auto 0 0;max-width:24ch}
.panel--1{background:var(--yellow);color:var(--purple)}
.panel--2{background:var(--blue-pale);color:var(--purple)}
.panel--3{background:var(--green);color:var(--pink-pale)}
.panel .n{font-family:var(--display);font-weight:700;font-style:italic;
  font-size:clamp(2.6rem,3.4vw,3.4rem);line-height:.8}
.panel h4{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.45rem,2vw,1.9rem);line-height:.92;letter-spacing:.01em;margin:.55rem 0 1rem;text-align:left}
.panel ul{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:.5rem;
  font-weight:600;font-size:.88rem;line-height:1.35}
.panel li{padding-left:1.1em;text-indent:-1.1em}
.panel li .dia{font-size:.7em;margin-right:.5em;vertical-align:.12em}

/* =====================================================================
   CHARTER 07 · STAFF-BADGE amenity tiles (p47) - texture border frame
   (cover, never tiled) + solid colour inner plate + condensed bold
   italic name + tiny meta + tiny logo. Texture + ONE colour inset each.
   ===================================================================== */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.badge{aspect-ratio:1;padding:clamp(16px,1.7vw,22px);background-size:cover;background-position:center}
.badge--leopard{background-color:#a97b3e;background-image:url("assets/brand/textures/leopard.jpg")}
.badge--glitter{background-color:#c2456f;background-image:url("assets/brand/textures/glitter-pink.jpg")}
.badge--zebra{background-color:#d8d4cd;background-image:url("assets/brand/textures/zebra.jpg")}
.badge--fish{background-color:#3e6e77;background-image:url("assets/brand/textures/fish-scales.jpg")}
.badge--night{background-color:#0c1030;background-image:url("assets/brand/textures/night-sky.jpg")}
.badge--irid{background-color:#7a86b8;background-image:url("assets/brand/textures/iridescent.jpg")}
.badge__plate{position:relative;height:100%;padding:clamp(1rem,1.8vw,1.5rem);
  display:flex;flex-direction:column}
.badge__plate h4{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:.88;letter-spacing:.01em;margin:0;text-align:left;max-width:8ch}
.badge__meta{margin-top:auto;font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding-right:3.2rem}
.badge__logo{position:absolute;right:clamp(.8rem,1.4vw,1.2rem);bottom:clamp(.7rem,1.3vw,1.1rem);
  height:26px;width:auto;opacity:.95}
.plate--purple{background:var(--purple);color:var(--orange)}
.plate--green{background:var(--green);color:var(--yellow)}
.plate--pink{background:var(--pink);color:var(--purple)}
.plate--emerald{background:var(--emerald);color:var(--turq)}
.plate--turq{background:var(--turq);color:var(--purple)}
.plate--orange{background:var(--orange);color:var(--emerald)}

/* =====================================================================
   CHARTER 08 · POSTCARDS + STICKER device (p88/95) - v1 postcards with
   a rotated colour sticker (claim + #hashtag) on each photo corner.
   One photo + one colour inset per card = layering-law compliant.
   ===================================================================== */
.postcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.postcard{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  padding:clamp(.8rem,1.4vw,1.1rem);margin:0}
.postcard .pc__media{position:relative}
.postcard img{width:100%;aspect-ratio:1/1;object-fit:cover}
.sticker{position:absolute;top:.9rem;right:.9rem;transform:rotate(-3deg);
  padding:.6rem .85rem .65rem;box-shadow:0 8px 22px -8px rgba(0,0,0,.45);
  font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;line-height:.95}
.sticker b{display:block;font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:.01em}
.sticker span{display:block;font-size:.7rem;letter-spacing:.08em;margin-top:.3rem}
.sticker--orange{background:var(--orange);color:#fff}
.sticker--turq{background:var(--turq);color:var(--purple)}
.sticker--purple{background:var(--purple);color:var(--yellow)}
.postcard figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.9rem .15rem .25rem}
.postcard .pc__title{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.25rem,1.7vw,1.55rem);line-height:.9;color:var(--emerald)}
.postcard .pc__title .dia{font-size:.62em;vertical-align:.18em;margin-left:.3em}
.postcard .pc__title .dia--orange{color:var(--orange)}
.postcard .pc__title .dia--turq{color:var(--turq)}
.postcard .pc__title .dia--purple{color:var(--purple)}
.postcard .pc__note{font-size:.78rem;color:var(--ink-soft);font-weight:600;white-space:nowrap}

/* =====================================================================
   CHARTER 09 · ROADSIDE SIGN (p27) - pale-turquoise tint ground
   (charter tint scale - CHARTER EXTENSION ground), white sign card:
   green ➤, green condensed kicker, black condensed bold italic message.
   Green #008132 on white = 5.0:1 (AA); logo-green kept for the big
   decorative chevron only.
   ===================================================================== */
.roadsign{background:var(--turq-t20);padding-block:clamp(1.4rem,3vw,2.2rem)}
.roadsign__card{background:#fff;display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;
  padding:1rem clamp(1rem,2.4vw,1.8rem);box-shadow:var(--shadow-sm)}
.roadsign__chev{color:var(--green-logo);font-size:2.1rem;line-height:1;flex:0 0 auto}
.roadsign__kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;
  color:var(--green);font-size:1.25rem;line-height:1;letter-spacing:.03em;white-space:nowrap}
.roadsign__msg{margin:0;font-family:var(--display);font-weight:700;font-style:italic;color:#000;
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.2;flex:1;min-width:min(100%,34ch)}
.roadsign__link{color:var(--green);font-weight:700;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;border-bottom:2px solid var(--green);padding-bottom:2px;white-space:nowrap}
.roadsign__link:hover{color:var(--emerald);border-color:var(--emerald)}

/* =====================================================================
   CHARTER 10 · FILL-IN FORM (p77) - white band, vivid-pink 2px keyline
   box, purple condensed bold italic heading, pink caps labels
   (AA-LARGE only - 3.9:1), underline-only input, square pink-keyline
   checkbox with purple ✓, standard green primary submit with ➤.
   ===================================================================== */
.soulband{background:var(--paper)}
.soulform{border:2px solid var(--pink);max-width:780px;padding:clamp(1.8rem,3.4vw,3rem)}
.soulform h3{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--purple);font-size:clamp(2rem,3.2vw,2.9rem);line-height:.88;margin:0 0 .6rem}
.soulform .sub{color:var(--purple);font-weight:600;margin:0 0 1.8rem;max-width:44ch}
.sf__row{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.sf__label{font-weight:700;color:var(--pink);font-size:1.02rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.sf__input{flex:1;min-width:min(100%,240px);border:0;border-bottom:2px solid var(--purple);
  background:transparent;font-family:inherit;font-size:1.05rem;font-weight:600;
  padding:.35em .1em;color:var(--ink);border-radius:0}
.sf__input::placeholder{color:var(--ink-soft)}
.sf__input:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.sf__check{display:flex;align-items:center;gap:.7rem;margin:1.5rem 0 1.6rem;
  color:var(--purple);font-weight:600;cursor:pointer}
.sf__check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex:0 0 auto;
  border:2px solid var(--pink);background:#fff;display:grid;place-items:center;cursor:pointer;border-radius:0}
.sf__check input:checked::before{content:"\2713";color:var(--purple);font-weight:800;font-size:.95rem;line-height:1}
.sf__fine{margin:1.3rem 0 0;font-size:.78rem;color:color-mix(in srgb,var(--purple) 50%,var(--ink-soft))}


/* ---------- charter file B (design-blocks-charter-2.html) - block devices ---------- */

/* =====================================================================
   CHARTER-2 01 · SITE INDEX (p85 agenda mosaic + p6 ingredient grid) -
   eight numbered colour cells, ◆ bullets, each cell a real link.
   Combos 1/2/3/4/5/8/7 + one black→vivid-pink cell (p14 black-card
   labelling - CHARTER EXTENSION, kept to display + short bullets).
   ===================================================================== */
.idx{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.idx a{display:flex;flex-direction:column;min-height:clamp(180px,16vw,230px);
  padding:clamp(1rem,1.6vw,1.4rem);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.idx a:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.idx .n{font-family:var(--display);font-weight:700;font-style:italic;
  font-size:clamp(1.5rem,2vw,1.9rem);line-height:.8}
.idx h3{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.55rem,2.1vw,2rem);line-height:.9;letter-spacing:.01em;margin:.3rem 0 .9rem}
.idx ul{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:.34rem;
  font-weight:600;font-size:.82rem;line-height:1.32}
.idx li{padding-left:1em;text-indent:-1em}
.idx li .dia{font-size:.68em;margin-right:.45em;vertical-align:.1em}
.idx--1{background:var(--yellow);color:var(--purple)}
.idx--2{background:var(--pink-pale);color:var(--emerald)}
.idx--3{background:var(--green);color:var(--pink-pale)}
.idx--4{background:var(--blue-pale);color:var(--purple)}
.idx--5{background:var(--turq);color:var(--purple)}
.idx--6{background:var(--purple);color:var(--yellow)}
.idx--7{background:var(--emerald);color:var(--orange)}
.idx--8{background:var(--black);color:var(--pink)}

/* =====================================================================
   CHARTER-2 02 · GATEFOLD SECTION INTRO (p50 fold-out cover) - left:
   emerald cover, huge TURQUOISE title (p14 emerald-card labelling -
   CHARTER EXTENSION, display; 4.7:1 so even the meta line passes AA).
   Right: the opened inside - vertical purple/emerald stripes (p17
   charter-shown recolour) + ONE pale-pink inset plate (combo 2 text) =
   pattern + colour inset, layering-law compliant. Centre fold shadow.
   ===================================================================== */
.gatefold{display:grid;grid-template-columns:1fr 1fr;background:var(--emerald)}
.gf__cover{position:relative;background:var(--emerald);min-height:clamp(380px,42vw,500px);
  padding:clamp(1.8rem,3.4vw,3.2rem);display:flex;flex-direction:column;
  box-shadow:inset -26px 0 30px -20px rgba(0,0,0,.55)}
.gf__cover h3{color:var(--turq);font-style:italic;font-size:clamp(3.6rem,7vw,6.6rem);line-height:.8}
.gf__meta{margin-top:auto;color:var(--turq);font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:.04em}
.gf__inside{position:relative;display:grid;place-items:center;padding:clamp(1.8rem,3vw,2.8rem);
  background:repeating-linear-gradient(90deg,var(--purple) 0 22px,var(--emerald) 22px 44px);
  box-shadow:inset 26px 0 30px -20px rgba(0,0,0,.55)}
.gf__plate{background:var(--pink-pale);color:var(--emerald);max-width:400px;
  padding:clamp(1.4rem,2.4vw,2.1rem)}
.gf__plate h4{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:.88;margin:0 0 .9rem;text-align:left}
.gf__plate ul{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.45rem;
  font-weight:600;font-size:.9rem;line-height:1.35}
.gf__plate li{padding-left:1.05em;text-indent:-1.05em}
.gf__plate li .dia{color:var(--green);font-size:.7em;margin-right:.45em;vertical-align:.1em}

/* =====================================================================
   CHARTER-2 03 · COMPARISON DUO (p50 panel logic + p55 price rows) -
   two flush boxed columns in MIRRORED locked combos (1 ↔ 8), dotted
   price leaders, ghost keyline CTAs, white rotated-square "or" diamond
   (the brand ◆) on the seam. Fully inside the locked 8 - no extension.
   ===================================================================== */
.duo{position:relative;display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow-sm)}
.duo__col{padding:clamp(1.7rem,3vw,2.7rem);display:flex;flex-direction:column;min-height:clamp(380px,34vw,460px)}
.duo--a{background:var(--yellow);color:var(--purple)}
.duo--b{background:var(--purple);color:var(--yellow)}
.duo__col h3{font-style:italic;font-size:clamp(2.1rem,3.4vw,3.1rem);line-height:.85;margin:0 0 .5rem}
.duo__tag{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.03em}
.duo__col ul{list-style:none;margin:1.3rem 0 1.6rem;padding:0;display:grid;gap:.55rem;
  font-weight:600;font-size:.92rem;line-height:1.35}
.duo__col li{padding-left:1.05em;text-indent:-1.05em}
.duo__col li .dia{font-size:.7em;margin-right:.45em;vertical-align:.1em}
.duo__price{margin-top:auto;display:flex;align-items:baseline;gap:.9rem;
  font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;line-height:1}
.duo__price small{font-size:1rem;letter-spacing:.03em}
.duo__price .pl__dots{flex:1;border-bottom:2px dotted currentColor;opacity:.5;transform:translateY(-.28em);min-width:2rem}
.duo__price b{font-size:clamp(1.9rem,2.8vw,2.5rem)}
.duo__cta{margin-top:1.4rem}
.duo--a .btn{border-color:var(--purple);color:var(--purple)}
.duo--a .btn:hover{background:var(--purple);color:var(--yellow)}
.duo--b .btn{border-color:var(--yellow);color:var(--yellow)}
.duo--b .btn:hover{background:var(--yellow);color:var(--purple)}
.duo__or{position:absolute;left:50%;top:50%;width:58px;height:58px;background:#fff;z-index:2;
  transform:translate(-50%,-50%) rotate(45deg);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.duo__or span{transform:rotate(-45deg);font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;color:var(--green);font-size:1.1rem;letter-spacing:.04em}

/* =====================================================================
   CHARTER-2 04 · TEAM BADGES (p47 staff badge, the canonical use) -
   texture border (cover, never tiled) + solid colour plate + NAME +
   pronouns + role + "ask me about" + tiny logo. Plates: combos 8/3/5 +
   one vivid-pink→yellow plate (p6/p41 - CHARTER EXTENSION, display).
   ===================================================================== */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.tb{aspect-ratio:3/4;padding:clamp(13px,1.3vw,19px);background-size:cover;background-position:center}
.tb--satin{background-color:#15090c;background-image:url("assets/brand/textures/satin-black.jpg")}
.tb--toast{background-color:#8a5a2b;background-image:url("assets/brand/textures/toast.jpg")}
.tb--glitter{background-color:#c2456f;background-image:url("assets/brand/textures/glitter-pink.jpg")}
.tb--leopard{background-color:#a97b3e;background-image:url("assets/brand/textures/leopard-wide.jpg")}
.tb__plate{position:relative;height:100%;padding:clamp(1rem,1.5vw,1.4rem);display:flex;flex-direction:column}
.tb__plate h4{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.8rem,2.3vw,2.4rem);line-height:.86;letter-spacing:.01em;margin:0;text-align:left}
.tb__pro{margin-top:.45rem;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.tb__role{margin-top:auto;font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1;letter-spacing:.02em}
.tb__ask{margin-top:.4rem;font-weight:600;font-size:.74rem;line-height:1.35;padding-right:2.4rem}
.tb__logo{position:absolute;right:clamp(.7rem,1.2vw,1rem);bottom:clamp(.65rem,1.1vw,.9rem);height:24px;width:auto;opacity:.95}
.tbp--purple{background:var(--purple);color:var(--yellow)}
.tbp--green{background:var(--green);color:var(--pink-pale)}
.tbp--pink{background:var(--pink);color:var(--yellow)}
.tbp--turq{background:var(--turq);color:var(--purple)}

/* =====================================================================
   CHARTER-2 05 · REVIEW-SCORE LOCKUP (p14 black-card labelling) -
   flat BLACK ground, giant VIVID-PINK score + claim (CHARTER EXTENSION,
   display only, 5.3:1), ◆ diamonds as stars, white per-source rows
   (AAA) with thin pink rules. Flat colour ground - no texture, so no
   plate needed under the small text (layering law p18 respected).
   ===================================================================== */
.review{background:var(--black);color:#fff}
.review .container{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.8rem,4vw,3.8rem);
  align-items:center;padding-block:clamp(2.8rem,5.6vw,4.8rem)}
.rv__claim{color:var(--pink);font-style:italic;font-size:clamp(2.3rem,4.2vw,3.8rem);line-height:.86;max-width:12ch}
.rv__score{display:flex;align-items:baseline;gap:1rem;margin-top:1.4rem;color:var(--pink);
  font-family:var(--display);font-weight:700;font-style:italic;line-height:1}
.rv__score b{font-size:clamp(4.6rem,8.4vw,7.4rem);line-height:.78;letter-spacing:.01em}
.rv__score .of{font-size:clamp(1.3rem,2vw,1.7rem)}
.rv__dias{margin-top:.9rem;color:var(--pink);letter-spacing:.22em;font-size:1.15rem}
.rv__dias .dim{opacity:.3}
.rv__rows{display:block}
.rv__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.95rem 0;border-top:1px solid color-mix(in srgb,var(--pink) 45%,transparent)}
.rv__row:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--pink) 45%,transparent)}
.rv__src{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1}
.rv__val{text-align:right;white-space:nowrap}
.rv__val b{font-weight:700;font-size:1.05rem}
.rv__val span{display:block;font-size:.74rem;color:rgba(255,255,255,.72)}
.rv__fine{margin:.9rem 0 0;font-size:.76rem;color:rgba(255,255,255,.6)}

/* =====================================================================
   CHARTER-2 06 · NUMBERED INTERSTITIAL (p85 "5. TITLE GOES HERE") -
   slim turquoise band, purple number + condensed italic title + ➤.
   Combo 5, display size only - fully locked, no extension.
   ===================================================================== */
.inter{background:var(--turq);color:var(--purple)}
.inter .container{display:flex;align-items:baseline;gap:.4rem 1.4rem;flex-wrap:wrap;
  padding-block:clamp(1.9rem,3.8vw,3.2rem)}
.inter .n{font-family:var(--display);font-weight:700;font-style:italic;
  font-size:clamp(3rem,6vw,5.2rem);line-height:.78}
.inter h2{font-style:italic;font-size:clamp(2.3rem,4.6vw,4rem);line-height:.82;color:var(--purple)}
.inter .chev{margin-left:auto;align-self:center;font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1}

/* =====================================================================
   CHARTER-2 07 · HOTEL MAP (charter hotel-map template,
   assets/Client Provided Material/brand/reference/hotel-map-principles.pdf)
 - the official one-palette map, turquoise variant: ONE colour at two
   tints (roads = turq 100%, blocks = turq 60%), pale-blue for the river,
   street names in WHITE condensed bold italic running ALONG each
   road, the hotel marked by the ibis Styles cushion drawn as a WHITE
   OUTLINE ONLY (the road runs through it), and a pale-blue title card
   inset bottom-left. Geometry = the real East Perth grid, rotated 45°
   so the terraces run on the template's diagonal.
   Turquoise ground + white street names and pale-blue → turquoise claim
   are the template's own pairings - CHARTER EXTENSION. The card's
   address and list revert to emerald so small type stays legible.
   ===================================================================== */
.mapband{background:var(--turq-t60)}
.mapwrap{position:relative}
.mapwrap svg{display:block;width:100%;height:auto}
.mp-pale{fill:var(--blue-pale)}
.mp-road{fill:none;stroke:var(--turq);stroke-linecap:butt;stroke-linejoin:round}
.mp-name{fill:#fff;font-family:var(--display);font-weight:700;font-style:italic;
  font-size:15px;letter-spacing:.005em;dominant-baseline:central}
.mp-name--sm{font-size:13px}
.mp-pillow{fill:none;stroke:#fff;stroke-width:9;stroke-linejoin:round}
.map__card{position:absolute;left:clamp(.9rem,2.4vw,2rem);bottom:clamp(.9rem,2.4vw,2rem);
  background:var(--blue-pale);max-width:322px;padding:clamp(1.1rem,2vw,1.6rem);box-shadow:var(--shadow-sm)}
.map__card h3{color:var(--turq);font-style:italic;text-transform:uppercase;
  font-size:clamp(1.9rem,2.7vw,2.6rem);line-height:.84;margin:0 0 .7rem}
.map__card address{font-style:italic;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.15;
  font-size:clamp(1rem,1.3vw,1.15rem);color:var(--ink);margin:0 0 .9rem}
.map__card ul{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.34rem;
  font-size:.8rem;font-weight:600;color:var(--ink)}
.map__card li{padding-left:1em;text-indent:-1em}
.map__card .dia{color:var(--turq);font-size:.7em;margin-right:.45em}
.map__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.map__logo{width:62px;height:auto;flex:none}
/* Narrow screens: crop the map instead of shrinking it, so the street
   names stay readable (preserveAspectRatio=slice does the cropping). */
@media (max-width:820px){
  .mapwrap svg{height:clamp(380px,118vw,560px)}
  .mp-name{font-size:17px}.mp-name--sm{font-size:15px}
  .mp-pillow{stroke-width:10}
}

/* =====================================================================
   CHARTER-2 08 · MULTI-CROP GALLERY (p19 framing + p6 ingredient
   mosaic + p17 pattern) - one mosaic, every photo a different crop
   ratio (2×2, 1×2, 2×1, 1×1), white gaps as the frame, plus ONE yellow
   claim cell (combo 1) and ONE diamond pattern cell in turquoise
   tone-on-tone (p17 charter-shown; tint ground = CHARTER EXTENSION).
   Cells sit side by side - nothing is layered, so the p18 law holds.
   ===================================================================== */
.crops{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,205px);gap:.55rem}
.crops figure{margin:0;position:relative;overflow:hidden}
.crops img{width:100%;height:100%;object-fit:cover}
.cr--big{grid-column:span 2;grid-row:span 2}
.cr--tall{grid-row:span 2}
.cr--wide{grid-column:span 2}
.crops figcaption{position:absolute;left:.7rem;bottom:.55rem;color:#fff;
  font-family:var(--display);font-weight:700;font-style:italic;font-size:1rem;letter-spacing:.03em;
  text-shadow:0 1px 4px rgba(0,0,0,.8),0 2px 14px rgba(0,0,0,.55)}
.cr--claim{background:var(--yellow);color:var(--purple);display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(.9rem,1.5vw,1.2rem)}
.cr--claim b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.6rem,2.3vw,2.2rem);line-height:.86;display:block}
.cr--claim span{margin-top:.5rem;font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.cr--pat{background:var(--turq-t60) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' fill='%2381D3D1'/%3E%3Cpath d='M22 0L44 22L22 44L0 22Z' fill='%232DB5B3'/%3E%3C/svg%3E") 0 0/44px 44px}

/* =====================================================================
   CHARTER-2 09 · PHOTOSPOT CARD (p88) - the white square card on the
   purple wall: claim + #hashtag in the SAME colour (the sanctioned
   microcopy device), green logo on white (p12). Colour ground + one
   white inset = layering-law compliant. No extension needed.
   ===================================================================== */
.photospot{background:var(--purple);padding-block:clamp(3rem,6vw,5rem)}
.spot__card{background:#fff;max-width:600px;padding:clamp(1.6rem,3vw,2.6rem);box-shadow:var(--shadow)}
.spot__card .kicker{margin-bottom:1.1rem}
.spot__card h3{color:var(--purple);font-style:italic;font-size:clamp(2.6rem,4.6vw,4rem);line-height:.84;margin:0 0 .5rem}
.spot__tag{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--purple);font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:.05em;margin:0 0 1rem}
.spot__note{color:var(--ink-soft);font-size:.92rem;max-width:44ch;margin:0}
.spot__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:1.4rem}
.spot__loc{font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)}
.spot__foot img{height:40px;width:auto}

/* =====================================================================
   CHARTER-2 10 · "STOLEN FROM IBIS STYLES" TAGS (p90) - the woven
   merch label as a perks shelf: orange swing-tags, purple type
   (p90-observed pairing - CHARTER EXTENSION, orange ground, display
   sizes), punched hole, slight rotations that straighten on hover.
   ===================================================================== */
.tags{display:flex;flex-wrap:wrap;gap:clamp(1.1rem,2.6vw,2rem)}
.tags .tag{position:relative;background:var(--orange);color:var(--purple);width:212px;
  padding:2.3rem 1.15rem 1.2rem;box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease)}
.tags .tag:nth-child(1){transform:rotate(-2deg)}
.tags .tag:nth-child(2){transform:rotate(1.6deg)}
.tags .tag:nth-child(3){transform:rotate(-1.2deg)}
.tags .tag:nth-child(4){transform:rotate(2.2deg)}
.tags .tag:hover{transform:rotate(0)}
@media (prefers-reduced-motion:reduce){.tag,.tag:hover{transform:none}}
.tags .tag::before{content:"";position:absolute;top:.65rem;left:50%;transform:translateX(-50%);
  width:15px;height:15px;background:var(--cream);border-radius:50%;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.tags .tag small{display:block;font-weight:700;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;border-top:2px solid var(--purple);border-bottom:2px solid var(--purple);
  padding:.32em 0;margin-bottom:.8rem}
.tags .tag b{display:block;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:1.5rem;line-height:.88;letter-spacing:.01em;min-height:2.7em}
.tag__price{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-top:.9rem;
  font-family:var(--display);font-weight:700;font-style:italic;font-size:1.35rem;line-height:1}
.tag__price small{all:unset;font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.tag__note{display:block;margin-top:.45rem;font-weight:600;font-size:.72rem;line-height:1.3}
.tags__fine{margin:1.6rem 0 0;font-size:.85rem;color:var(--ink-soft);max-width:52ch}

/* =====================================================================
   CHARTER-2 11 · FLOOR FINDER (p97-108 internal signage, literal) -
   BLACK ON WHITE ONLY: giant condensed bold-italic level numerals,
   thin rules, room ranges "000 TO 000 ◀" with the black chevron.
   The charter's sanctioned B/W exception - no colour allowed inside.
   ===================================================================== */
.floors{background:var(--paper)}
.floors .container{padding-block:clamp(2.6rem,5.4vw,4.4rem)}
.fl__row{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:.6rem 2.2rem;
  align-items:center;padding:1.15rem 0;border-top:2px solid #000;color:#000}
.fl__row:last-of-type{border-bottom:2px solid #000}
.fl__num{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(2.7rem,5.2vw,4.8rem);line-height:.78;letter-spacing:.01em}
.fl__what{font-weight:600;font-size:.95rem;line-height:1.45;max-width:56ch;margin:0}
.fl__range{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.15rem,1.8vw,1.55rem);line-height:1;white-space:nowrap;letter-spacing:.02em}
.fl__range .chev{margin-left:.45em}

/* =====================================================================
   CHARTER-2 12 · CTA BANNER TRIO (p27 chevron + p17 stripes + p22
   claim discipline) - three slim booking banners, each claim LED by
   the brand ➤: (a) combo 8 + standard green primary; (b) combo 5 +
   keyline ghost; (c) green tone-on-tone stripes (tint ground -
   CHARTER EXTENSION) with a white claim plate = pattern + one inset.
   ===================================================================== */
.cta{padding-block:clamp(1.7rem,3.2vw,2.6rem)}
.cta + .cta{margin-top:.55rem}
.cta .container{display:flex;align-items:center;gap:1.1rem 2.2rem;flex-wrap:wrap}
.cta__claim{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  line-height:.86;font-size:clamp(1.9rem,3.4vw,3rem);letter-spacing:.01em;flex:1;min-width:min(100%,18ch)}
.cta__claim .chev{font-size:.7em;margin-right:.4em;vertical-align:.08em}
.cta--a{background:var(--purple);color:var(--yellow)}
.cta--b{background:var(--turq);color:var(--purple)}
.cta--b .btn{border-color:var(--purple);color:var(--purple)}
.cta--b .btn:hover{background:var(--purple);color:#fff}
.cta--c{background:repeating-linear-gradient(90deg,var(--green) 0 16px,var(--green-t60) 16px 32px);padding-block:clamp(2rem,3.6vw,3rem)}
.cta__plate{background:#fff;color:var(--emerald);display:flex;align-items:center;gap:1.1rem 2.2rem;
  flex-wrap:wrap;width:100%;padding:clamp(1.1rem,2vw,1.5rem) clamp(1.2rem,2.2vw,1.8rem)}
.cta__plate .cta__claim{font-size:clamp(1.7rem,3vw,2.6rem)}


/* ---------- charter file C (design-blocks-charter-3.html) - block devices ---------- */

/* =====================================================================
   CHARTER-3 01 · MEETINGS TITLE BAND (p38 poster title block) - the one
   texture the libraries haven't shown: FISH SCALES as the title-block
   ground with a yellow condensed-italic claim (p38-observed pairing,
   display only). Small meta line sits on a white plate (p18: texture
   never carries small text directly).
   ===================================================================== */
.fishband{background:#33424e url("assets/brand/textures/fish-scales.jpg") center/cover}
.fishband .container{padding-block:clamp(3.4rem,7.4vw,6.4rem);display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(1.4rem,2.6vw,2.2rem)}
.fish__claim{color:var(--yellow);font-style:italic;font-size:clamp(3rem,7vw,6.4rem);line-height:.8;max-width:12ch}
.fish__plate{background:#fff;color:var(--emerald);padding:.75em 1.1em;font-weight:600;
  font-size:.92rem;line-height:1.4;max-width:52ch}
.fish__plate b{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--green)}

/* =====================================================================
   CHARTER-3 02 · INVITATION FACE (p77) - the event invitation: photo
   (the real meeting space) + PALE-PINK block with a TURQUOISE claim
   (p77-observed tint pairing - CHARTER EXTENSION, 1.8:1, huge display
   only). All functional copy = combo 2 emerald (8.7:1). Photo bg +
   one colour inset = layering law p18 respected.
   ===================================================================== */
.invite{display:grid;grid-template-columns:1.05fr 1fr;background:var(--pink-pale)}
.inv__photo{position:relative;min-height:clamp(300px,36vw,480px)}
.inv__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inv__photo figcaption{position:absolute;left:.8rem;bottom:.6rem;color:#fff;
  font-family:var(--display);font-weight:700;font-style:italic;font-size:1rem;letter-spacing:.03em;
  text-shadow:0 1px 4px rgba(0,0,0,.8),0 2px 14px rgba(0,0,0,.55)}
.inv__panel{padding:clamp(1.8rem,3.4vw,3.2rem);display:flex;flex-direction:column}
.inv__kick{font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);margin:0 0 .9rem}
.inv__claim{color:var(--turq);font-style:italic;font-size:clamp(2.7rem,5vw,4.6rem);line-height:.8;margin:0 0 1rem}
.inv__body{color:var(--emerald);max-width:46ch;margin:0 0 1.2rem}
.inv__meta{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.45rem;
  color:var(--emerald);font-weight:600;font-size:.92rem}
.inv__meta li{padding-left:1.05em;text-indent:-1.05em}
.inv__meta .dia{color:var(--green);font-size:.7em;margin-right:.45em;vertical-align:.1em}
.inv__cta{margin-top:auto}

/* =====================================================================
   CHARTER-3 03 · CAPACITY MATRIX (invented from p55 price-list rows +
   p85 mosaic cells) - the three real meeting rooms × five set-ups.
   Header = combo 8, room cells = combo 1, values black-on-white with
   hairlines (p97 discipline). Locked combos only - no extension.
   ===================================================================== */
.mxwrap{overflow-x:auto;box-shadow:var(--shadow-sm)}
.mx{display:grid;grid-template-columns:minmax(190px,1.35fr) repeat(5,minmax(88px,1fr));
  gap:2px;background:#fff;min-width:660px;border:2px solid #fff}
.mx>div{padding:.85rem .9rem}
.mx__h{background:var(--purple);color:var(--yellow);font-family:var(--display);font-weight:700;
  font-style:italic;text-transform:uppercase;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:.95;
  display:flex;align-items:flex-end}
.mx__h small{font-family:var(--body);font-style:normal;font-weight:700;font-size:.62rem;
  letter-spacing:.12em;align-self:flex-end}
.mx__room{background:var(--yellow);color:var(--purple)}
.mx__room b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.35rem,1.8vw,1.7rem);line-height:.9;display:block}
.mx__room span{display:block;margin-top:.35rem;font-weight:600;font-size:.74rem;line-height:1.35}
.mx__v{background:#fff;color:#000;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-style:italic;font-size:clamp(1.4rem,1.9vw,1.8rem);line-height:1}
.mx__v small{font-family:var(--body);font-style:normal;font-weight:600;font-size:.68rem;color:var(--ink-soft)}
.mx__fine{margin:1rem 0 0;font-size:.8rem;color:var(--ink-soft);max-width:70ch}

/* =====================================================================
   CHARTER-3 04 · DAY-DELEGATE PANELS (p55 menus) - the charter's
   alternating GREEN / PALE-BLUE menu panels as delegate packages, plus
   the p55 purple panel (yellow headings, pale-pink items) as extras.
   Price rows with dotted leaders, ◆ bullets. Combos 3 / 4 / 8+6 -
   locked only, no extension (combo-3 small lines kept bold ≥.9rem).
   ===================================================================== */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.pkg{padding:clamp(1.6rem,2.6vw,2.4rem);display:flex;flex-direction:column;min-height:clamp(360px,30vw,430px)}
.pkg h3{font-style:italic;font-size:clamp(1.9rem,2.6vw,2.5rem);line-height:.85;margin:0 0 .35rem}
.pkg__tag{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:1rem;letter-spacing:.03em;margin:0 0 1.1rem}
.pkg ul{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.5rem;font-weight:600;font-size:.92rem;line-height:1.35}
.pkg li{padding-left:1.05em;text-indent:-1.05em}
.pkg li .dia{font-size:.7em;margin-right:.45em;vertical-align:.1em}
.pkg__row{display:flex;align-items:baseline;gap:.7rem;font-family:var(--display);font-weight:700;
  font-style:italic;text-transform:uppercase;font-size:1.05rem;line-height:1.2;margin:0 0 .55rem}
.pkg__row .pl__dots{flex:1;border-bottom:2px dotted currentColor;opacity:.5;transform:translateY(-.28em);min-width:1.6rem}
.pkg__price{margin-top:auto;display:flex;align-items:baseline;gap:.9rem;
  font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;line-height:1}
.pkg__price small{font-size:.95rem;letter-spacing:.03em}
.pkg__price .pl__dots{flex:1;border-bottom:2px dotted currentColor;opacity:.5;transform:translateY(-.28em);min-width:2rem}
.pkg__price b{font-size:clamp(1.9rem,2.6vw,2.4rem)}
.pkg--green{background:var(--green);color:var(--pink-pale)}
.pkg--blue{background:var(--blue-pale);color:var(--purple)}
.pkg--purple{background:var(--purple);color:var(--pink-pale)}
.pkg--purple h3,.pkg--purple .pkg__tag,.pkg--purple .pkg__row b{color:var(--yellow)}
.pkgs__fine{margin:1.2rem 0 0;font-size:.8rem;color:var(--ink-soft);max-width:70ch}

/* =====================================================================
   CHARTER-3 05 · PLACEMAT (p53) - colour ground + ONE texture inset
   carrying a display claim (exactly the charter placemat: purple +
   icing texture + claim + logo). Here: strawberry-jam texture for the
   breakfast meeting. Logo in a white holder (p12 busy-background rule).
   Claim on texture = CHARTER EXTENSION (display only, checked visually).
   ===================================================================== */
.placemat{background:var(--purple);color:var(--pink-pale)}
.placemat .container{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.8rem,4vw,3.6rem);
  align-items:center;padding-block:clamp(2.8rem,5.6vw,4.8rem)}
.pm__copy h3{color:var(--yellow);font-style:italic;font-size:clamp(2.1rem,3.4vw,3.1rem);line-height:.85;margin:0 0 .9rem}
.pm__copy p{max-width:42ch}
.pm__copy .link{color:var(--yellow);border-color:var(--yellow)}
.pm__tex{position:relative;aspect-ratio:4/3;background:#8e1f24 url("assets/brand/textures/jam-red.jpg") center/cover;
  padding:clamp(1.3rem,2.4vw,2.1rem);display:flex;align-items:flex-end;box-shadow:var(--shadow-sm)}
.pm__claim{color:var(--pink-pale);font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:clamp(2.2rem,3.8vw,3.5rem);line-height:.82;max-width:9ch;
  padding-bottom:.2em}
.pm__logo{position:absolute;right:clamp(.9rem,1.6vw,1.3rem);bottom:clamp(.9rem,1.6vw,1.3rem);
  background:#fff;padding:.45rem}
.pm__logo img{height:30px;width:auto}

/* =====================================================================
   CHARTER-3 06 · RUNNING ORDER (p85 sommaire) - the numbered agenda
   list, purple on white (8.4:1), thin rules, plus the p85 YELLOW
   photo card (photo inset + combo-1 caption). Locked - no extension.
   ===================================================================== */
.agenda{background:var(--paper)}
.agenda .container{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
.ag__row{display:grid;grid-template-columns:minmax(64px,84px) minmax(96px,130px) 1fr;gap:.4rem 1.4rem;
  align-items:baseline;padding:1rem 0;border-top:2px solid var(--purple)}
.ag__rows>.ag__row:last-of-type{border-bottom:2px solid var(--purple)}
.ag__n{font-family:var(--display);font-weight:700;font-style:italic;color:var(--purple);
  font-size:clamp(1.9rem,3vw,2.7rem);line-height:.8}
.ag__time{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--purple);font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1;white-space:nowrap}
.ag__what b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--purple);font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1;display:block;margin-bottom:.15rem}
.ag__what p{margin:0;font-size:.88rem;color:var(--ink-soft);max-width:44ch}
.ag__card{background:var(--yellow);padding:clamp(12px,1.4vw,18px);box-shadow:var(--shadow-sm)}
.ag__card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ag__cap{padding:clamp(.9rem,1.4vw,1.2rem) clamp(.2rem,.5vw,.4rem) clamp(.2rem,.5vw,.4rem)}
.ag__cap b{display:block;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--purple);font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:.85}
.ag__cap span{display:block;margin-top:.4rem;font-weight:700;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--purple)}

/* =====================================================================
   CHARTER-3 07 · DELEGATE PASSES (p45 keycards, all three variants) -
   (a) night-sky texture + thin WHITE keyline + white plate + logo in
   its white holder (p12); (b) purple holder with the white fill-in
   field (combo 8 label); (c) diamond pattern in pale-blue / purple-40
   tint (p45-shown holder pattern - CHARTER EXTENSION tints) + white
   claim card. Each card: one bg + one inset, law-abiding.
   ===================================================================== */
.passes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.pass{position:relative;aspect-ratio:8/5;box-shadow:var(--shadow-sm)}
.pass--tex{background:#0b1026 url("assets/brand/textures/night-sky.jpg") center/cover}
.pass__key{position:absolute;inset:clamp(10px,1.4vw,16px);border:2px solid #fff;
  padding:clamp(.8rem,1.3vw,1.1rem);display:flex;flex-direction:column}
.pass__plate{background:#fff;color:var(--emerald);align-self:flex-start;margin-top:auto;
  padding:.5em .75em;font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.pass__logo{position:absolute;right:clamp(.8rem,1.3vw,1.1rem);top:clamp(.8rem,1.3vw,1.1rem);
  background:#fff;padding:.35rem}
.pass__logo img{height:22px;width:auto}
.pass--fill{background:var(--purple);padding:clamp(1.2rem,2vw,1.7rem);display:flex;flex-direction:column;gap:1.1rem}
.pass__brand{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--yellow);font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:.9}
.pf__row{display:flex;align-items:baseline;gap:.7rem}
.pf__row .pf__label{font-weight:700;color:var(--yellow);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pf__row .pf__line{flex:1;border-bottom:2px solid #fff;min-height:1.5em}
.pass__note{margin-top:auto;color:var(--pink-pale);font-weight:600;font-size:.78rem}
.pass--dia{background:var(--blue-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' fill='%23D6EEF2'/%3E%3Cpath d='M22 0L44 22L22 44L0 22Z' fill='%23CB99E0'/%3E%3C/svg%3E") 0 0/44px 44px;
  display:grid;place-items:center;padding:clamp(1rem,1.6vw,1.4rem)}
.pass__card{background:#fff;color:var(--purple);padding:clamp(.9rem,1.6vw,1.3rem) clamp(1.1rem,1.8vw,1.5rem);
  box-shadow:var(--shadow-sm);max-width:85%}
.pass__card b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.5rem,2.2vw,2rem);line-height:.85;display:block}
.pass__card span{display:block;margin-top:.35rem;font-weight:600;font-size:.74rem;color:var(--emerald)}
.passes__fine{margin:1.2rem 0 0;font-size:.8rem;color:var(--ink-soft);max-width:64ch}

/* =====================================================================
   CHARTER-3 08 · THE ROOM NOTEPAD (p63) - zebra texture ground + ONE
   purple inset block, yellow claim (combo 8) + pale-pink sub (combo 6),
   white logo on the plate. Texture + colour inset = law-abiding;
   pairings locked - no extension.
   ===================================================================== */
.notepad{background:#4a4a44 url("assets/brand/textures/zebra.jpg") center/cover;
  padding-block:clamp(3rem,6vw,5rem)}
.np__block{position:relative;background:var(--purple);max-width:600px;
  padding:clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,2.6rem) clamp(2.2rem,3.6vw,3rem);box-shadow:var(--shadow)}
.np__block h3{color:var(--yellow);font-style:italic;font-size:clamp(2.4rem,4.2vw,3.7rem);line-height:.82;margin:0 0 .7rem}
.np__block p{color:var(--yellow);font-weight:600;max-width:38ch;margin:0;padding-right:3rem}
.np__logo{position:absolute;right:clamp(1rem,1.8vw,1.4rem);bottom:clamp(.9rem,1.6vw,1.2rem);height:26px;width:auto;opacity:.95}
/* getting-here.html, 2026-09-08: the Free Transit Zone statement is this same
   block with the texture swapped, its claim as the section's h2, and the FTZ
   arrow link on the plate. Scoped so meeting-rooms keeps the zebra default. */
.notepad--scales{background-color:#8d97a0;background-image:url("assets/brand/textures/fish-scales.jpg")}
.notepad--scales .np__block{padding-bottom:clamp(2.4rem,3.8vw,3.2rem)}
.np__block h2{color:var(--yellow);font-style:italic;font-size:clamp(2.4rem,4.2vw,3.7rem);
  line-height:.82;margin:0 0 .7rem;max-width:14ch}
.np__block .link{color:var(--yellow);border-color:currentColor;margin-top:1.3rem}

/* =====================================================================
   CHARTER-3 09 · YOUR EVENT CONTACT (p83 business card, both faces) -
   front: white card + VIVID-PINK name block with yellow name (p6/p83 -
   CHARTER EXTENSION, 3.0:1, display) + emerald details + green logo;
   back: zebra + vivid-pink plate with tone-on-tone DEEP-ROSE type
   (p83-observed - CHARTER EXTENSION, 2.1:1, display only).
   ===================================================================== */
.bizcards{display:grid;grid-template-columns:repeat(2,minmax(0,440px));gap:var(--gap)}
.bc{aspect-ratio:17/11;box-shadow:var(--shadow-sm);position:relative}
.bc--front{background:#fff;padding:clamp(1.1rem,1.8vw,1.5rem);display:flex;flex-direction:column}
.bc__name{background:var(--pink);color:var(--yellow);align-self:flex-start;
  padding:.55em .8em .5em}
.bc__name b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:.85;display:block}
.bc__details{margin-top:auto;font-size:.82rem;font-weight:600;color:var(--emerald);line-height:1.5;padding-right:4.5rem}
.bc__details b{text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;display:block;margin-bottom:.2rem}
.bc__logo{position:absolute;right:clamp(1rem,1.6vw,1.3rem);bottom:clamp(.9rem,1.5vw,1.2rem)}
.bc__logo img{height:34px;width:auto}
.bc--back{background:#4a4a44 url("assets/brand/textures/zebra.jpg") center/cover;
  display:grid;place-items:center;padding:clamp(1rem,1.6vw,1.4rem)}
.bc__plate{background:var(--pink);color:var(--rose-deep);padding:clamp(1rem,1.7vw,1.4rem) clamp(1.2rem,2vw,1.7rem)}
.bc__plate b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.8rem,2.7vw,2.5rem);line-height:.82;display:block}

/* =====================================================================
   CHARTER-3 10 ★ MEETING-ROOM ENQUIRY (p77 fill-in form, FULL SCALE) -
   the centrepiece, in THREE variants to choose between (same verified
   fields, three charter dressings, all inside the locked 8 combos):
   A · yellow panel - p55 colour panel + p77 fill-in, combo 1 throughout;
   B · purple holder - p45 keycard fill-in device at full scale, combo 8
       labels + white fields + combo 6 fine print;
   C · gatefold - p50 emerald cover (combo 7 orange claim) folding out
       to a pale-blue fill-in panel (combo 4).
   Underline inputs, square checks, green primary submit with ➤ on all.
   Fields mirror the LIVE ibisstylesperth.com/meeting-rooms enquiry
   form (fetched 2026-07-18); people-count bands are placeholders.
   ===================================================================== */
.mformband{background:var(--paper)}
.mform{max-width:1020px;padding:clamp(1.8rem,3.6vw,3.2rem);
  --f-title:var(--purple); --f-sub:var(--purple); --f-label:var(--purple);
  --f-line:var(--purple); --f-ink:var(--emerald); --f-ph:var(--ink-soft);
  --f-opt:var(--purple); --f-box:var(--purple); --f-fill:var(--purple);
  --f-boxbg:#fff; --f-fine:color-mix(in srgb,var(--purple) 60%,var(--ink-soft))}
.mform h3{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--f-title);font-size:clamp(2.2rem,3.6vw,3.3rem);line-height:.85;margin:0 0 .6rem}
.mform .sub{color:var(--f-sub);font-weight:600;margin:0 0 2rem;max-width:52ch}
.mf__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.8rem}
.mf__span{grid-column:1/-1}
.mf__row{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.mf__label{font-weight:700;color:var(--f-label);font-size:.98rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mf__input{flex:1;min-width:min(100%,180px);border:0;border-bottom:2px solid var(--f-line);
  background:transparent;font-family:inherit;font-size:1.02rem;font-weight:600;
  padding:.35em .1em;color:var(--f-ink);border-radius:0}
.mf__input::placeholder{color:var(--f-ph);font-weight:500}
select.mf__input{appearance:none;-webkit-appearance:none;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237D00B2' stroke-width='2'/%3E%3C/svg%3E") right .2em center/12px 8px no-repeat;
  padding-right:1.6em}
select.mf__input option{color:var(--ink);background:#fff}
.mf__set{border:0;margin:0;padding:0;min-width:0}
.mf__set legend{padding:0;margin-bottom:.55rem;font-weight:700;color:var(--f-label);
  font-size:.98rem;letter-spacing:.1em;text-transform:uppercase}
.mf__opts{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.mf__opt{display:flex;align-items:center;gap:.6rem;color:var(--f-opt);font-weight:600;cursor:pointer;font-size:.95rem}
.mf__opt input{appearance:none;-webkit-appearance:none;width:21px;height:21px;margin:0;flex:0 0 auto;
  border:2px solid var(--f-box);background:var(--f-boxbg);display:grid;place-items:center;cursor:pointer;border-radius:0}
.mf__opt input:checked::before{content:"";width:11px;height:11px;background:var(--f-fill)}
.mf__area{width:100%;border:0;border-bottom:2px solid var(--f-line);background:transparent;
  font-family:inherit;font-size:1.02rem;font-weight:600;color:var(--f-ink);
  padding:.35em .1em;min-height:92px;resize:vertical;border-radius:0}
.mf__area::placeholder{color:var(--f-ph);font-weight:500}
.mf__go{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.4rem}
.mf__go .mf__call{font-weight:600;font-size:.85rem;color:var(--f-sub)}
.mf__fine{margin:1.4rem 0 0;font-size:.78rem;color:var(--f-fine)}
/* Form states (WP-87): the line a form prints when it could not be sent, a keyline box in the block's own ink,
   and the thank-you that takes the place of a sent form. Verbatim from contact-us.html and meeting-rooms.html. */
.fnote{margin:0;padding:.7em .9em;border:2px solid currentColor;font-weight:700;font-size:.92rem;line-height:1.45}
.enquiry .fnote{grid-column:1/-1;margin:0 1.3rem 1rem;color:var(--emerald)}
.mform .fnote{color:var(--f-label)}
.fdone:focus{outline:0}

/* A · the yellow panel - combo 1 everywhere (6.3:1, AA at all sizes) */
.mform--a{background:var(--yellow)}

/* B · the purple holder - combo 8 labels, white fields (8.4:1), combo 6 extras */
.mform--b{background:var(--purple);
  --f-title:var(--yellow); --f-sub:var(--pink-pale); --f-label:var(--yellow);
  --f-line:#fff; --f-ink:#fff; --f-ph:rgba(255,255,255,.62);
  --f-opt:#fff; --f-box:#fff; --f-fill:var(--yellow); --f-boxbg:transparent;
  --f-fine:var(--pink-pale)}
.mform--b select.mf__input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFE000' stroke-width='2'/%3E%3C/svg%3E")}
.mform--b :where(input,select,textarea,button,a):focus-visible{outline-color:var(--yellow)}

/* C · the gatefold - p50 cover + pale-blue form panel (combo 4) */
.gform{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--blue-pale)}
.gform__cover{background:var(--emerald);padding:clamp(1.8rem,3.4vw,3.2rem);
  display:flex;flex-direction:column;min-height:100%}
.gform__cover h3{color:var(--orange);font-style:italic;font-size:clamp(2.8rem,5vw,4.8rem);line-height:.8;margin:0 0 1.1rem}
.gform__cover p{color:var(--orange);font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.15;letter-spacing:.02em;
  max-width:24ch;margin:0 0 1.4rem}
.gform__cover ul{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:.6rem;
  color:var(--orange);font-weight:700;font-size:.95rem;line-height:1.35}
.gform__cover li{padding-left:1.05em;text-indent:-1.05em}
.gform__cover li .dia{font-size:.7em;margin-right:.45em;vertical-align:.1em}
.gform .mform{max-width:none;background:var(--blue-pale)}
.gform .mf__grid{grid-template-columns:1fr;gap:1.35rem}

/* =====================================================================
   CHARTER-3 11 · THE PROPOSAL SHEET (p79-82 letterhead) - the charter's
   ½X frame-liner exception for correspondence: pale-blue sheet inside
   a ½X white liner, logo top-left (very light ground ✓ p12), purple
   condensed title + emerald letter body = combo 4. No extension.
   ===================================================================== */
.lhband{background:var(--cream-2)}
.sheet{max-width:780px;background:var(--blue-pale);border:clamp(10px,1.5vw,16px) solid #fff;
  box-shadow:var(--shadow);padding:clamp(1.8rem,3.6vw,3.2rem)}
.sheet .lh__logo{height:48px;width:auto;margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.lh__title{color:var(--purple);font-style:italic;font-size:clamp(2.2rem,3.8vw,3.4rem);line-height:.84;margin:0 0 1.1rem}
.lh__body{color:var(--emerald);max-width:56ch}
.lh__body p{margin:0 0 .9em}
.lh__sig{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  color:var(--purple);font-size:1.2rem;line-height:1.05;margin:1.4rem 0 0}
.lh__foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(1.6rem,3vw,2.4rem);
  padding-top:1rem;border-top:2px solid var(--purple);
  font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}


/* ---------- charter blocks - responsive (charter-block selectors only) ---------- */

@media (max-width:1024px){
  .wayfind .container{grid-template-columns:1fr 1fr}
  .panelseq{grid-template-columns:1fr 1fr}
  .badges{grid-template-columns:1fr 1fr}
  .postcards{grid-template-columns:1fr}
  .postcard img{aspect-ratio:16/10}
}

@media (max-width:760px){
  .qframe__box{padding:1.3rem 1.1rem}
  .pl__item{white-space:normal}
  .offerhero .claim{margin-left:auto;margin-right:auto}
}

@media (max-width:560px){
  .panelseq{grid-template-columns:1fr}
  .panel{min-height:0;padding-block:1.5rem}
  .badges{grid-template-columns:1fr}
  .wayfind .container{grid-template-columns:1fr 1fr;gap:.7rem}
  .wf b{font-size:clamp(2.1rem,11vw,2.9rem)}
}

@media (max-width:1024px){
  .idx{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
  .crops{grid-auto-rows:clamp(120px,17vw,180px)}
  .review .container{grid-template-columns:1fr;align-items:start}
  .gf__cover{min-height:clamp(320px,40vw,440px)}
}

@media (max-width:760px){
  .gatefold{grid-template-columns:1fr}
  .gf__cover{box-shadow:inset 0 -26px 30px -20px rgba(0,0,0,.55);min-height:0;padding-bottom:2.6rem}
  .gf__inside{box-shadow:inset 0 26px 30px -20px rgba(0,0,0,.55)}
  .duo{grid-template-columns:1fr}
  .duo__col{min-height:0}
  .crops{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(130px,24vw,180px)}
  .map__card{position:static;max-width:none;margin:0 0 2px}
    .fl__row{grid-template-columns:minmax(84px,110px) 1fr}
  .fl__range{grid-column:1 / -1;justify-self:start}
}

@media (max-width:560px){
  .idx{grid-template-columns:1fr}
  .idx a{min-height:0;padding-block:1.15rem}
  .team{grid-template-columns:1fr}
  .tb{aspect-ratio:1/1}
  .tag{width:100%;max-width:260px}
}

@media (max-width:1024px){
  .invite{grid-template-columns:1fr}
  .inv__photo{min-height:clamp(240px,44vw,360px)}
  .placemat .container{grid-template-columns:1fr;align-items:start}
  .pm__tex{max-width:560px}
  .agenda .container{grid-template-columns:1fr}
  .ag__card{max-width:480px}
  .pkgs{grid-template-columns:1fr}
  .pkg{min-height:0}
  .gform{grid-template-columns:1fr}
  .passes{grid-template-columns:1fr 1fr}
  .bizcards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .passes{grid-template-columns:1fr}
  .pass{max-width:420px}
  .bizcards{grid-template-columns:1fr}
  .bc{max-width:440px}
  .mf__grid{grid-template-columns:1fr;gap:1.4rem}
  .ag__row{grid-template-columns:minmax(52px,64px) 1fr;grid-template-rows:auto auto}
  .ag__time{grid-column:2}
  .ag__what{grid-column:2}
  .np__block p{padding-right:0}
  .np__logo{position:static;margin-top:1.2rem}
}

/* =====================================================================
   SUBPAGE DEVICES v2 - Phase A sync (A6, 2026-09-07)
   Brings the theme level with the approved POC pages contact-us.html,
   getting-here.html, meeting-rooms.html and home-current-content.html.
   Rules are VERBATIM from those pages except where a class is shared with a
   WP-19 charter twin whose review page must keep rendering as its own POC
   page does. Those are scoped (.locate ..., .split .panel, table.mx,
   .roadsign--stack, .pledge__panel .facts) and the scope is noted per rule.
   The verbatim POC block and the homepage rules above are untouched.
   ===================================================================== */

/* --- A1/A2/A3 - shared subpage furniture ------------------------------ */

/* Screen-reader-only text (meeting-rooms table caption + "not offered" cells). */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* A section that follows another without re-paying the top padding. */
.section--flush{padding-top:0}

/* A lead paragraph under the .head - the long SEO copy blocks. */
.copy{max-width:74ch;margin:0 0 clamp(1.6rem,3vw,2.4rem)}
/* The page's main links in a row under the section's intro paragraph, so a visitor meets them
   without scrolling (client feedback #319, #322, #325; Claus's pick 2026-10-01). */
.copy__links{display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.copy + .copy__links{margin-top:calc(1.1rem - clamp(1.6rem,3vw,2.4rem))}

/* A secondary heading inside a section (below .head, above a device). */
.subhead{font-size:clamp(1.7rem,2.4vw,2.4rem);color:var(--emerald);margin:clamp(2.2rem,4vw,3.2rem) 0 .9rem}

/* .head variant that carries the page intro paragraph. */
.head--intro{margin-top:.9rem}

/* Slim hero, resynced: the approved subpage hero is taller than WP-16's. */
.hero--slim .hero__frame{min-height:clamp(260px,42vh,480px)}
/* Per-page crop of the hero photo (the POC sets object-position per page). */
.hero--contact .hero__frame img{object-position:center 46%}
.hero--getting-here .hero__frame img{object-position:center 58%}
.hero--meetings .hero__frame img{object-position:center 42%}

/* Links inside a facts list. */
.facts a{border-bottom:2px solid var(--green);padding-bottom:1px}

/* --- A1/A3 - the field idiom, extended to the enquiry forms ----------- */
/* Superset of the booking-bar rule above: adds textarea + the select arrow,
   the date/number niceties and the placeholder colour. Same values for
   input/select, so the homepage booking bar renders unchanged. */
.field input,.field select,.field textarea{font-family:inherit;font-size:var(--s-0);color:var(--ink);background:transparent;
  border:0;padding:.1em 0;width:100%;font-weight:600;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:0}
.field input::placeholder,.field textarea::placeholder{color:#9AA5A7;font-weight:500}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1.6em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23003D48' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1em center;background-size:13px 8px}
.field textarea{resize:vertical;min-height:7em;line-height:1.5}
.field input[type="datetime-local"]{color-scheme:light;cursor:pointer;font-variant-numeric:tabular-nums}
.field input[type="number"]{appearance:textfield;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.field input[type="number"]::-webkit-inner-spin-button,.field input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* --- A3 - room / catering cards -------------------------------------- */
.card .facts{margin:.25rem 0 .35rem;gap:.35rem}
.card .facts li{font-size:.86rem;max-width:none}
.cards__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;
  margin-top:clamp(1.4rem,2.6vw,2rem);padding-top:1.2rem;border-top:1px solid var(--line)}
.cards__foot p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft);max-width:62ch}
.cards__foot p a{font-weight:700;color:var(--emerald);border-bottom:2px solid var(--green)}

/* --- A3 - capacity matrix as a REAL table ---------------------------- */
/* SCOPED: `table.mx`. The charter twin (charter-c03, review page
   /design-blocks-charter-3/) is a div grid on the same .mx class and keeps the
   grid rules above; the element-qualified selector applies only to the table. */
table.mx{display:table;width:100%;min-width:620px;border-collapse:separate;border-spacing:2px;
  background:#fff;border:2px solid #fff;table-layout:fixed}
.mx th,.mx td{padding:.85rem .9rem;text-align:left;vertical-align:bottom}
.mx thead th{background:var(--purple);color:var(--yellow);font-family:var(--display);font-weight:700;
  font-style:italic;text-transform:uppercase;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:.95}
.mx thead th small{display:block;font-family:var(--body);font-style:normal;font-weight:700;font-size:.62rem;
  letter-spacing:.12em}
.mx tbody th{background:var(--yellow);color:var(--purple);width:34%}
.mx tbody th b{font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.35rem,1.8vw,1.7rem);line-height:.9;display:block}
.mx tbody th span{display:block;margin-top:.35rem;font-weight:600;font-size:.74rem;line-height:1.35}
.mx td{background:#fff;color:#000;text-align:center;vertical-align:middle;
  font-family:var(--display);font-weight:700;font-style:italic;font-size:clamp(1.4rem,1.9vw,1.8rem);line-height:1}
.mx td .na{color:var(--ink-soft);font-weight:600}

/* --- A2/A3 - the white panel beside the form/map --------------------- */
/* SCOPED: `.split .panel`. The charter twin charter-a06 uses .panel inside
   .panelseq for the booking-steps sequence and keeps its own rules above. */
.split .panel{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;padding:clamp(1.3rem,2.2vw,1.9rem);min-height:0}
.split .panel h3{font-size:clamp(1.7rem,2.4vw,2.4rem);color:var(--emerald);margin-bottom:.6rem}
.split .panel p{color:var(--ink-soft);font-size:.95rem;max-width:52ch}
/* The charter booking-steps panel further down this file styles `.panel ul`
   and `.panel li` for its own numbered list. Those rules would otherwise shrink
   and re-indent the facts list inside a subpage panel, so restate the facts
   list here at a specificity that wins. Values are the shared .facts device. */
.split .panel .facts{list-style:none;margin:.4rem 0 1.6rem;padding:0;display:grid;gap:.6rem 2.4rem;
  font-size:inherit;font-weight:600;line-height:normal}
.split .panel .facts li{padding-left:1.65em;text-indent:0;position:relative;line-height:1.4;max-width:52ch}
.split .panel .link{margin-top:auto}
/* Photo-topped variant (meetings): the photo is flush, the copy keeps the pad. */
.split .panel--media{padding:0}
/* core/image wraps the photo in a <figure> the POC markup lacks - same shim as
   the hero frame, so the panel photo keeps its exact height. */
.panel__media figure{margin:0}
.panel__media{margin:0;overflow:hidden}
.panel__media img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 40%}
.panel__body{flex:1;display:flex;flex-direction:column;padding:clamp(1.3rem,2.2vw,1.9rem)}

/* --- A1/A2 - the map column (.locate) -------------------------------- */
/* SCOPED: the map itself is the one approved site map (charter-b07). On a
   subpage it sits in a .locate column and fills it, with the details card
   BELOW the map rather than floated over it; the charter review page keeps the
   overlay version. Only the differences are restated here. */
.locate{display:flex;flex-direction:column;background:var(--turq-t60);box-shadow:var(--shadow)}
.locate .mapwrap{flex:1;min-height:clamp(300px,30vw,420px)}
.locate .mapwrap svg{position:absolute;inset:0;width:100%;height:100%}
.locate .mp-name{font-size:17px}
.locate .mp-name--sm{font-size:15px}
.locate .mp-pillow{stroke-width:10}
.locate .map__card{position:static;max-width:none;box-shadow:none;
  padding:clamp(1.1rem,2vw,1.6rem)}
.locate .map__card ul{grid-template-columns:1fr 1fr;gap:.4rem 1.4rem}
.map__card li a{border-bottom:2px solid var(--turq)}

/* --- A2 - the roadsign, stacked ------------------------------------- */
/* SCOPED: `.roadsign--stack`. The charter twin charter-a09 is a full-width
   tinted band carrying one sign; getting-here drops the tint and stacks three. */
.roadsign--stack{background:none;padding-block:0;display:grid;gap:var(--gap)}
.roadsign--stack .roadsign__card{align-items:flex-start;
  padding:clamp(1.1rem,2vw,1.5rem) clamp(1rem,2.4vw,1.8rem)}
.roadsign--stack .roadsign__kicker{line-height:1.25}
.roadsign--stack .roadsign__msg{flex:none;min-width:0}
.roadsign__body{flex:1;min-width:min(100%,34ch);max-width:78ch}
.roadsign__more{margin:.5rem 0 0;font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.roadsign__more a{font-weight:700;color:var(--emerald);border-bottom:2px solid var(--green)}

/* --- A4 - the pledge device (sustainability / accessibility) --------- */
.pledge{display:grid;box-shadow:var(--shadow)}
.pledge__row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.pledge__media{position:relative;overflow:hidden;min-height:clamp(280px,32vw,460px)}
.pledge__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pledge__row--flip .pledge__media{order:2}
.pledge__panel{display:flex;flex-direction:column;padding:clamp(1.9rem,3.4vw,3rem)}
.pledge__panel--pink{background:var(--pink-pale);color:var(--emerald)}
.pledge__panel--blue{background:var(--blue-pale);color:var(--purple)}
.pledge__tag{font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.7rem;margin:0 0 1rem;color:inherit}
.pledge__panel h3{font-size:clamp(1.8rem,3.1vw,2.7rem);line-height:.9;letter-spacing:.012em;
  color:inherit;margin-bottom:1rem;max-width:16ch}
.pledge__panel>p{font-weight:600;color:inherit;max-width:44ch;margin-bottom:.4rem}
.pledge__panel .link{margin-top:auto;padding-top:1.4rem;color:inherit;border-color:currentColor}
/* SCOPED: the POC page narrows .facts globally; here only inside the panels,
   so the shared .facts on every other page keeps its two-column gap. */
.pledge__panel .facts{margin:.5rem 0 .6rem;gap:.55rem}
.pledge__panel .facts li{font-weight:700;line-height:1.3;max-width:44ch}
.pledge__panel .facts li::before{color:currentColor}

/* --- WP-32 · Meeting Rooms, the charter rebuild (2026-09-08) ---------- */
/* The page composes five charter blocks whose CSS already ships above for the
   charter review page /design-blocks-charter-3/ (twins c02, c04, c06, c08,
   c10c). The POC ADAPTS four of them, so every difference below is SCOPED BY
   THIS PAGE'S SECTION ID and the review page keeps the shared rules untouched.
   Reference: /meeting-rooms.html. */

/* c08 notepad: the POC sets the claim one step smaller than the charter twin,
   so it stays on one line at desktop width. */
#notepad .np__block h3{font-size:clamp(2.2rem,4vw,3.5rem)}

/* c06 running order -> "It's all in the room" (WP-82, 2026-10-01; Claus's pick
   from three mock-ups). Until then this section was the c04 menu panels, the
   one device on the page no other page used. The rules are the WP-38 rules on
   #why (FIFO) repeated for #included: two-column rows with no clock column, the
   copy widened, the row title and the caption as paragraphs, the yellow card
   running the full height of the list at desktop and back to 4/5 once the
   columns stack. `.ag__fine` is this page's one addition, the rates note under
   the rows; the photo crop is the page's own. */
#included .head{margin-bottom:clamp(1.2rem,2.4vw,2rem)}
#included .container{align-items:stretch}
#included .ag__row{grid-template-columns:minmax(64px,84px) 1fr}
#included .ag__what p{max-width:58ch}
#included .ag__what .ag__t{font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;color:var(--purple);font-size:clamp(1.15rem,1.6vw,1.45rem);
  line-height:1;display:block;margin:0 0 .15rem;max-width:none}
#included .ag__fine{margin:1.2rem 0 0;font-size:.8rem;color:var(--ink-soft);max-width:58ch}
#included .ag__cap .ag__capt{display:block;font-family:var(--display);font-weight:700;
  font-style:italic;text-transform:uppercase;color:var(--purple);
  font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:.85;margin:0}
#included .ag__cap .ag__caps{display:block;margin:.4rem 0 0;font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
#included .ag__card{display:flex;flex-direction:column}
#included .ag__card figure{margin:0;flex:1 1 0;min-height:0}
#included .ag__card img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  object-position:38% 40%;display:block}
@media (max-width:1024px){
  #included .ag__card{max-width:460px}
  #included .ag__card figure{flex:none}
  #included .ag__card img{height:auto;aspect-ratio:4/5}
}
@media (max-width:760px){
  #included .ag__row{grid-template-columns:minmax(48px,60px) 1fr;grid-template-rows:none}
}

/* c06 running order -> "How it comes together". The charter block's invented
   clock column is gone, so the row grid drops from three columns to two. The
   row title is a paragraph, not the POC's <b>: core has no block that renders a
   bare <b>, and this keeps all six titles editable in place. */
#how .head--tight{margin-bottom:clamp(1.2rem,2.4vw,2rem)}
#how .ag__row{grid-template-columns:minmax(64px,84px) 1fr}
#how .ag__what p{max-width:52ch}
#how .ag__what .ag__t{font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;color:var(--purple);font-size:clamp(1.15rem,1.6vw,1.45rem);
  line-height:1;display:block;margin:0 0 .15rem;max-width:none}
/* Same reason for the yellow photo card's caption (POC: <b> + <span>). */
#how .ag__cap .ag__capt{display:block;font-family:var(--display);font-weight:700;
  font-style:italic;text-transform:uppercase;color:var(--purple);
  font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:.85;margin:0}
#how .ag__cap .ag__caps{display:block;margin:.4rem 0 0;font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
/* core/image wraps the card photo in a <figure> the POC markup lacks. */
#how .ag__card figure{margin:0}

/* c10c gatefold enquiry -> the page's form, FULL WIDTH. The charter twin still
   hangs each field off a flex "LABEL: ____" row; the POC uses a two-column grid
   so long labels cannot push the field off its line. Date and time is a native
   picker and headcount is a number field (client call 2026-09-06), and the fine
   print sits on plain purple rather than the twin's color-mix tint, which the
   colour verifier cannot read back. All of it stays locked combo 4. */
#enquire .mform{--f-fine:var(--purple); --f-labw:9.6rem}
#enquire .mf__row{display:grid;grid-template-columns:var(--f-labw) minmax(0,1fr);
  align-items:baseline;column-gap:1rem;row-gap:.35rem}
#enquire .mf__input{width:100%;min-width:0;flex:none}
#enquire input[type="datetime-local"].mf__input{color-scheme:light;cursor:pointer;
  font-variant-numeric:tabular-nums}
#enquire input[type="number"].mf__input{appearance:textfield;-moz-appearance:textfield;
  font-variant-numeric:tabular-nums}
#enquire input[type="number"].mf__input::-webkit-inner-spin-button,
#enquire input[type="number"].mf__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#enquire .mf__go .mf__call a{border-bottom:2px solid var(--purple);padding-bottom:1px}

/* The ◆ list marks. The POC writes <span class="dia">◆</span> inside each <li>;
   a core list item cannot hold that span through an edit, so on this page the
   glyph comes from CSS and every bullet stays client-editable. Same size,
   spacing and colour as the span it replaces. Scoped to the page's one list
   (the panels' lists went with WP-82). */
#enquire .gform__cover li::before{content:"\25C6";font-size:.7em;margin-right:.45em;
  vertical-align:.1em}

/* --- WP-38 - FIFO accommodation Perth, the new page (2026-09-09) ------ */
/* The page composes two charter blocks whose CSS already ships above for the
   charter review page /design-blocks-charter-3/ (twins c06 running order, c02
   invitation face). The POC ADAPTS both, so every difference below is SCOPED BY
   THIS PAGE'S SECTION ID and the review page keeps the shared rules untouched.
   Reference: /fifo-accommodation-perth.html. */

/* Per-page crop of the hero photo (see the .hero--* rules above). */
.hero--fifo .hero__frame img{object-position:center 42%}

/* c06 running order -> "Built for the roster." The charter block's invented
   clock column is gone (this page has no times to give), so the row grid drops
   from three columns to two; a muted intro sits under the h2, the head tightens,
   the copy widens to use the freed column, and a row may carry an arrow link.
   The yellow photo card now runs the FULL HEIGHT of the list at desktop
   (Claus, 2026-09-09) and returns to its 4/5 ratio once the columns stack. */
#why .head{margin-bottom:clamp(1.2rem,2.4vw,2rem)}
#why .container{align-items:stretch}
.ag__intro{color:var(--ink-soft);max-width:48ch;margin:0 0 clamp(1.2rem,2.4vw,2rem)}
#why .ag__row{grid-template-columns:minmax(64px,84px) 1fr}
#why .ag__what p{max-width:58ch}
#why .ag__what .link{margin-top:.6rem;font-size:.72rem}
/* The row title is a paragraph, not the POC's <b>: core has no block that
   renders a bare <b>, and this keeps all four titles editable in place. Same
   reason for the yellow card's caption (POC: <b> + <span>). Values identical. */
#why .ag__what .ag__t{font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;color:var(--purple);font-size:clamp(1.15rem,1.6vw,1.45rem);
  line-height:1;display:block;margin:0 0 .15rem;max-width:none}
#why .ag__cap .ag__capt{display:block;font-family:var(--display);font-weight:700;
  font-style:italic;text-transform:uppercase;color:var(--purple);
  font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:.85;margin:0}
#why .ag__cap .ag__caps{display:block;margin:.4rem 0 0;font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
/* core/image wraps the card photo in a <figure> the POC markup lacks, so the
   figure carries the flex growth and the photo fills it. */
#why .ag__card{display:flex;flex-direction:column}
#why .ag__card figure{margin:0;flex:1 1 0;min-height:0}
#why .ag__card img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  object-position:center 40%;display:block}

/* c02 invitation face -> the closing statement band (styleguide section 6
   pattern J). The photo half is dropped and the panel runs on .container, so
   the block stops being a two-column grid and becomes a padded band; it is
   re-inked from the library's pale-pink ground and turquoise claim (a charter
   extension) to locked combo 4, PALE-BLUE -> PURPLE, 6.9:1. */
#closing.invite{display:block;background:var(--blue-pale);color:var(--purple);
  padding-block:clamp(2.4rem,5vw,4.2rem)}
#closing .inv__grid{display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(1.6rem,4vw,3.6rem);align-items:start}
#closing .inv__kick{color:var(--purple)}
#closing .inv__claim{color:var(--purple);font-size:clamp(2.7rem,5.2vw,4.8rem);margin:0}
#closing .inv__body{color:var(--purple);max-width:54ch}
#closing .inv__meta{color:var(--purple)}
#closing .inv__cta{margin-top:.2rem}
/* The list marks. The POC writes a green diamond span inside each <li>;
   a core list item cannot hold that span through an edit, so the glyph comes
   from CSS and every bullet stays client-editable (the WP-32 idiom above).
   Same size, spacing and colour as the span it replaces. */
#closing .inv__meta li::before{content:"\25C6";color:var(--green);font-size:.7em;
  margin-right:.45em;vertical-align:.1em}

/* --- WP-39 - Group accommodation Perth, the new page (2026-09-09) ----- */
/* The page composes the styleguide .cards device with a new four-up modifier,
   the FIRST library-01 block to reach the theme (design-blocks.html SPECIMEN
   01, the quote band, which has no charter twin, so its CSS ships here), and
   two charter twins whose scoped rules already ship above and need nothing new:
   c06 running order on #why (WP-38's cut, same six-row shape) and c10c gatefold
   enquiry on #enquire (WP-32's field grid and diamond marks). Only genuinely
   new classes are below. Reference: /group-accommodation.html.
   Every value is verbatim from that page's <style>. */

/* Per-page crop of the hero photo (see the .hero--* rules above). */
.hero--groups .hero__frame img{object-position:center 54%}

/* Four group-type cards in one row; 2-up at 1024 and 1-up at 760, both in the
   responsive block below (the modifier is declared after the shared .cards
   media rule further up the file, so it has to restate its own breakpoints). */
.cards--4{grid-template-columns:repeat(4,1fr)}

/* Block 01-01 QUOTE BAND, locked combo 8: PURPLE ground, YELLOW ink, 6.33:1.
   The charter diamond lattice sits behind it at 10% opacity (a pattern, not a
   texture, so the page's texture budget is untouched). */
.quoteband{position:relative;isolation:isolate;overflow:hidden;background:var(--purple);color:var(--yellow)}
.quoteband::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.10;
  background-image:
    repeating-linear-gradient(45deg,var(--yellow) 0 2px,transparent 2px 58px),
    repeating-linear-gradient(-45deg,var(--yellow) 0 2px,transparent 2px 58px)}
.quoteband .container{display:flex;flex-direction:column;gap:1.5rem;padding-block:clamp(2.6rem,5.5vw,4.6rem)}
.quoteband blockquote{margin:0;max-width:22ch;font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;font-size:var(--s-3);line-height:.88;letter-spacing:.01em;color:var(--yellow)}
.quoteband figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.6rem}
.quoteband .quote__who{font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.quoteband .quote__rating{font-weight:700;font-size:.82rem;letter-spacing:.06em}

/* WP markup drift inside the quote band, scoped to this page's section id.
   `#guests` used to be the booking bar's guests <select> as well; since WP-60 that
   is `#book-guests`. Every rule below is still a DESCENDANT selector for an element
   a <select> cannot contain. Keep it that way: never write a bare `#guests{...}` rule.
   The POC kills the figure's block margins in CSS and puts the quote's words straight
   inside the blockquote; here the figure and the blockquote are group blocks
   and the words are a paragraph block, so the margins they inherit are killed.
   Same for the credit line, a <span> in the POC. */
#guests figure.container{margin-block:0}   /* 0.18.1: block margins only, so `.container`'s auto inline margins centre the quote; `margin:0` sat it flush against the liner (client call 2026-09-09) */
#guests blockquote p{margin:0}
#guests .quote__who{margin:0}
/* The rating line. The POC nests <span class="dias"> inside the rating span; a
   core paragraph cannot carry that span through a client edit, so the five
   diamonds are the paragraph's own text and the .dias values move onto it.
   Same weight, size, tracking and colour as the span it replaces. */
#guests .quote__rating{margin:0;font-size:.72rem;letter-spacing:.18em}

/* c10c gatefold, this page's field set. Two short fields sit side by side
   inside the one-column panel (arriving | leaving, rooms | guests). Each column needs
   its label plus room for a whole date (9.4rem); where the panel cannot give both columns
   that, the pair stacks by itself (on a laptop the date fields showed "2026" only). */
.mf__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--f-labw,9.6rem) + 9.4rem)),1fr));gap:1.35rem 2.4rem}
/* Arrival and departure are native date pickers (dates are pickers, not free
   text, client call 2026-09-06): the same treatment WP-32 gave datetime-local. */
#enquire input[type="date"].mf__input{color-scheme:light;cursor:pointer;
  font-variant-numeric:tabular-nums}
/* Two POC pages now carry a gatefold form on the same #enquire id and they
   disagree on ONE value: at 760 meeting-rooms.html puts .15rem under a stacked
   label, group-accommodation.html leaves the row's own .35rem row-gap to do it
   (9 rows, so it is 21.6px of page height). The WP-32 rule stays as it is for
   meetings and this page's section carries a modifier that resets it. */
#enquire.gform--groups .mf__row .mf__label,
#enquire.gform--fifo .mf__row .mf__label{margin-bottom:0}
/* WP-71 (client feedback #311, 2026-09-24): the FIFO page carries the same
   gatefold, copied from the groups page, so its section takes the same reset.
   It sits between the rooms and the running order, not last, because the
   page ends on its pattern J band and two colour bands may not touch. */

/* --- WP-41 - Rooms (/hotel-room-perth/), the rebuilt page (2026-09-19) -- */
/* The page replaces the WP-16 bootstrap draft of the same slug. It reuses the
   styleguide `.cards` device, the c06 running order on #why (WP-38's cut) and,
   since 2026-09-19, the room pages' c08 notepad banner on #closing (WP-46's
   cut), so everything it needs already ships elsewhere in this file. Only the
   genuinely new values are below, and each
   one is SCOPED so the FIFO, Groups and Meeting Rooms pages are untouched.
   Reference: /hotel-room-perth.html. Every value verbatim from its <style>. */

/* Per-page crop of the hero photo (see the .hero--* rules above). This page
   keeps the base `center 50%`, so the modifier exists only to carry the caption
   rule in the responsive block below - it is this page, and only this page,
   whose hero is overlapped by the booking bar. */
.hero--rooms .hero__frame img{object-position:center 50%}

/* c06 running order -> "Come hang out.". Two differences from the FIFO cut:
   row 3 names two sibling pages inside its sentence, so a row paragraph may now
   carry inline links (the `.cards__foot p a` idiom), and this page's photo card
   sits lower in the frame. Both are scoped: the link rule to #why (no other
   page has a link inside a row paragraph) and the crop to this page's card
   modifier, so FIFO and Groups keep their `center 40%`. */
#why .ag__what p a{font-weight:700;color:var(--emerald);border-bottom:2px solid var(--green)}
#why .ag__card.ag__card--rooms img{object-position:center 62%}

/* Pattern D room carousel -> the page's #room-types section. The whole device
   already ships verbatim above for the homepage (#sleep), so the page needs
   exactly two things, and neither edits a shared rule:
   1. a FIFTH card accent beside the four the homepage assigns. The page's fifth
      card is the accessible rooms, so it takes locked combo 4, PALE-BLUE ground
      -> PURPLE ink, 6.9:1. It is written here and not next to the other four,
      because that block is the verbatim copy of index.html's CSS and index.html
      has no fifth card; same values, same shape, one modifier class.
   2. a one-card "peek" width on phones, scoped to this section: the room names
      here are the live page's full names, not the homepage's short ones, so two
      cards on a 390 px screen cut them to pieces. (Since 2026-09-24 the verbatim block above does the same for the homepage, as index.html has since 2026-09-20.)
   Not carried over from the homepage and so ABSENT by design: the .tabs filter
   row (five cards, five categories, nothing to filter) and `#sleep > .container`
   (the 1560px widening) - this track lines up with the section's head and copy. */
.room__box--bluepale{--accent:var(--blue-pale);--accent-ink:var(--purple)}  /* combo 4 */

/* The `.invite--purple` modifier that used to close this page (c02 invitation
   face, locked combo 6) was REMOVED 2026-09-19: the page now ends on the room
   pages' own c08 notepad banner on the night-sky material, whose CSS ships
   unscoped under WP-35 and WP-46 further down. Nothing else used the modifier;
   the Gallery's `.invite--purple-yellow` below is a different modifier and
   stays. So this page adds no closing-band rule at all. */

/* --- WP-42 - Special Offers (/special-offers/), the rebuilt page (2026-09-19) -- */
/* Replaces the WP-16 bootstrap draft of the same slug. Same devices as before
   (slim hero, booking bar, `.cards`, the `.news` night-sky band), so only three
   scoped values are new. Reference: /special-offers.html. */

/* Per-page crop of the hero photo: this frame needs the bed, not the ceiling. */
.hero--offers .hero__frame img{object-position:center 66%}

/* Tile animation (client feedback #85): since the 2026-09-19 card alignment this is the site card's
   own hover (THE SITE CARD, above), so the `.cards--offers` scope went. */

/* --- responsive ------------------------------------------------------ */
@media (max-width:1024px){
  .locate .mapwrap{min-height:clamp(340px,58vw,480px)}
  .pledge__row{grid-template-columns:1fr}
  .pledge__row--flip .pledge__media{order:0}
  .pledge__media{min-height:clamp(240px,42vw,380px)}
  /* WP-38 - the running-order card stacks under the list and takes its 4/5
     ratio back; the closing band's two columns become one. */
  #why .ag__card{max-width:460px}
  #why .ag__card figure{flex:none}
  #why .ag__card img{height:auto;aspect-ratio:4/5}
  #closing .inv__grid{grid-template-columns:1fr;gap:1.4rem}
  /* WP-39 - the four group-type cards go 2-up. */
  .cards--4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .locate .map__card ul{grid-template-columns:1fr}
  /* WP-39 - one card per row, and the paired short fields stack. */
  .cards--4{grid-template-columns:1fr}
  .mf__pair{grid-template-columns:1fr}
  /* WP-32 - the enquiry form's label column collapses above its field. */
  #enquire .mf__row{grid-template-columns:1fr}
  #enquire .mf__row .mf__label{margin-bottom:.15rem}
  .roadsign--stack .roadsign__kicker{white-space:normal}
  .mx th,.mx td{padding:.7rem .6rem}
  /* WP-38 - the numeral column narrows; the charter twin's stacked two-row
     grid (which exists for its clock column) is reset, this page has none. */
  #why .ag__row{grid-template-columns:minmax(48px,60px) 1fr;grid-template-rows:none}
  /* WP-41 - the Rooms hero is the only one a booking bar overlaps, so its
     caption needs an extra 1rem of clearance over the shared 2rem above. */
  .hero--rooms .hero__caption{margin-bottom:3rem}
  /* WP-41 - and its carousel shows one card plus a peek of the next, because
     this page's room names are the live page's full names (homepage: 2-up). */
  #room-types .room{flex-basis:78%}
  /* WP-42 - the Special Offers hero carries the booking bar too. */
  .hero--offers .hero__caption{margin-bottom:3rem}
}
@media (prefers-reduced-motion:reduce){
  .card,.card__box,.card__media img{transition:none}
  .card:hover,.card:focus-within{transform:none}
}

/* =====================================================================
   WP-43 - Gallery (/gallery/), the rebuilt page (2026-09-19)
   Replaces the WP-16 bootstrap draft of the same slug. Reference:
   /gallery.html; every value below is verbatim from that page's <style>
   except where the note says what WordPress markup forced.

   The page is block 03-b08 (multi-crop gallery) adapted, and in the theme
   the grid is a CORE GALLERY: the POC's `.gallerygrid > figure > a > img`
   becomes
     div.gallerygrid > figure.wp-block-gallery > figure.wp-block-image > a > img
   so the hotel can add, swap and remove photos in place. Core ships that
   block as a FLEX row with a per-item `width:calc(33.33% - ...)` carried
   on `figure.wp-block-image:not(#individual-image)` - an ID-weight
   selector - so the rules that undo it are scoped to this page's section
   id (`#gallery`, used by no other pattern) to win on specificity. That
   scoping is deliberate twice over: it also keeps every other page's
   `.wp-block-gallery` untouched.
   TRAP, measured: the width comes from TWO core rules, and the
   `.columns-3` variant is one class heavier than the base one, so the
   selector that undoes it needs `.has-nested-images` as well as the id.
   Without it the figures size to 33% OF THEIR OWN GRID CELL and the grid
   looks shattered. Keep every figure rule at id + 4 classes + 2 types.
   The nth-child crops target the image figures INSIDE the gallery figure,
   never the gallery figure itself.
   ===================================================================== */

/* Per-page crop of the hero photo (see the .hero--* rules above). The POC
   sets `center 42%` on `.hero--slim` itself; the theme does it per page. */
.hero--gallery .hero__frame img{object-position:center 42%}

/* The grid. `.gallerygrid` is the wrapper group; the grid itself is the
   core gallery figure inside it. */
#gallery .gallerygrid figure.wp-block-gallery{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-flow:dense;gap:var(--gap);margin:0;align-items:stretch}
#gallery .gallerygrid figure.wp-block-gallery.has-nested-images figure.wp-block-image{display:block;width:auto;
  max-width:none;margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--cream-2)}
/* Every sixth photo, starting with the first, is a double cell, alternating
   left and right. Position, not a class per photo, so the rhythm survives
   the hotel swapping, adding or removing photos. */
#gallery .gallerygrid figure.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(6n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
#gallery .gallerygrid figure.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(12n+7){grid-column:2 / span 2}
#gallery .gallerygrid figure.wp-block-image>a{display:block;width:100%;height:100%;cursor:zoom-in}
#gallery .gallerygrid figure.wp-block-image img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
#gallery .gallerygrid figure.wp-block-image>a:hover img,
#gallery .gallerygrid figure.wp-block-image>a:focus-visible img{transform:scale(1.04)}
#gallery .gallerygrid figure.wp-block-image>a:focus-visible{outline-offset:-6px;border-radius:0}
/* The note under the grid is a <p> here, so its inherited bottom margin goes. */
p.gallery__note{margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;font-size:.9rem;color:var(--ink-soft)}

/* --- Lightbox - a native <dialog> built by main.js on the first click.
       The square emerald prev / next buttons are the room carousel's. Core's
       own lightbox is off theme-wide (theme.json `lightbox.enabled:false`),
       so the two can never double up. Verbatim from /gallery.html. */
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  background:rgba(0,28,32,.95);color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(0,28,32,.95)}
.lightbox[open]{display:grid;grid-template-rows:1fr auto;justify-items:center}
.lightbox__stage{position:relative;min-height:0;width:100%}
.lightbox__stage img{position:absolute;top:clamp(3.6rem,6vw,4.4rem);bottom:.6rem;left:clamp(.8rem,6vw,5.5rem);right:clamp(.8rem,6vw,5.5rem);
  width:calc(100% - 2*clamp(.8rem,6vw,5.5rem));height:calc(100% - clamp(3.6rem,6vw,4.4rem) - .6rem);max-width:none;object-fit:contain;
  opacity:0;transition:opacity .3s var(--ease)}
.lightbox__stage img.in{opacity:1}
.lightbox__bar{width:min(100% - 2*var(--pad),var(--container));display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem 2rem;padding:.4rem 0 clamp(1rem,2.4vw,1.6rem);font-size:.86rem;line-height:1.45}
.lightbox__cap{margin:0;max-width:80ch}
.lightbox__count{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:.04em;white-space:nowrap}
.lightbox__btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:0;cursor:pointer;
  background:var(--emerald);color:#fff;transition:background .2s,transform .18s var(--ease)}
.lightbox__btn:hover{background:var(--green)}
.lightbox__btn:focus-visible{outline-color:var(--yellow);border-radius:0}
.lightbox__btn--x{top:clamp(.6rem,1.6vw,1.2rem);right:clamp(.6rem,1.6vw,1.2rem)}
.lightbox__btn--prev,.lightbox__btn--next{top:50%;margin-top:-26px}
.lightbox__btn--prev{left:clamp(.4rem,1.6vw,1.2rem)}
.lightbox__btn--next{right:clamp(.4rem,1.6vw,1.2rem)}

/* c02 invitation face -> the closing band in the `.invite--purple-yellow`
   modifier: locked combo 8, PURPLE ground -> YELLOW ink, 6.33:1, AA at every
   size. It is NOT WP-41's `.invite--purple` modifier (purple -> pale-pink,
   combo 6, removed 2026-09-19 when the Rooms page took the room pages' notepad
   banner instead): same ground, different ink, so it gets its own name.
   A modifier, never a fork - one style.css serves every page - so each rule
   restates the `#closing.invite` scope above it in order to win on
   specificity. This band states no facts, so there is no `.inv__meta` here.
   The CTA is the block's own ink as a solid button (yellow ground, purple
   label: combo 1 inside combo 8, the kicker's pair). */
#closing.invite.invite--purple-yellow{background:var(--purple);color:var(--yellow)}
#closing.invite--purple-yellow .inv__kick,
#closing.invite--purple-yellow .inv__claim,
#closing.invite--purple-yellow .inv__body{color:var(--yellow)}
/* The POC bottom-aligns this band's two columns (the FIFO and Rooms cut
   top-aligns them), so the modifier carries its own alignment. The body's
   bottom margin is this POC's 1.4rem, not the charter twin's 1.2rem: it is
   worth 3 px of band height once the two columns stack. */
#closing.invite--purple-yellow .inv__grid{align-items:end}
#closing.invite--purple-yellow .inv__body{margin-bottom:1.4rem}
.btn--invite{background:var(--yellow);color:var(--purple)}
.btn--invite:hover{box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}

/* --- WP-43 responsive ------------------------------------------------ */
@media (max-width:1024px){
  /* Two columns: a double cell becomes a full-width row. Three of them plus
     15 singles would leave one empty cell, so the third double (photo 13)
     drops back to a single: 2 rows + 16 singles. */
  #gallery .gallerygrid figure.wp-block-gallery{grid-template-columns:1fr 1fr}
  #gallery .gallerygrid figure.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(6n+1),
  #gallery .gallerygrid figure.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(12n+7){grid-column:1 / -1;grid-row:auto;aspect-ratio:16/10}
  #gallery .gallerygrid figure.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(18n+13){grid-column:auto;aspect-ratio:4/3}
}
@media (max-width:760px){
  .lightbox__btn{width:44px;height:44px}
  .lightbox__btn--prev,.lightbox__btn--next{margin-top:-22px;background:rgba(0,61,72,.82)}
  .lightbox__bar{flex-direction:column-reverse;gap:.2rem}
}
@media (prefers-reduced-motion:reduce){
  #gallery .gallerygrid figure.wp-block-image img,.lightbox__stage img{transition:none}
  #gallery .gallerygrid figure.wp-block-image>a:hover img{transform:none}
}

/* --- WP-44 - Eastside Social (/eastside-social/), the rebuilt page (2026-09-19) --
   Replaces the WP-16 bootstrap draft of the same slug. The page reuses devices
   that already ship above: the styleguide `.cards` grid, the c06 running order
   on #why (WP-38's cut, six rows), the `.split` + `.panel` + `.locate` map from
   Getting Here (A2) and the c02 invitation face on #closing. Only the genuinely
   new values are below, and each one is SCOPED so the approved pages are
   untouched. Reference: /eastside-social.html; every value is verbatim from
   that page's <style>. */

/* Per-page crop of the hero photo (see the .hero--* rules above). WP-61
   (feedback #236): the share-plates frame sits in the letterbox at the centre
   crop, plates and hands both in view. */
.hero--eastside .hero__frame img{object-position:center 50%}

/* Two links in the `.cards__foot` row instead of one (the menu PDF and the
   table booking), so they share a wrapper on the row's right-hand side. A new
   class: no other page's card foot carries a pair. */
.cards__links{display:flex;flex-wrap:wrap;gap:.9rem 1.8rem}

/* The panel's foot row. On Getting Here and Contact the `.link` alone is pinned
   to the bottom of the panel (`.split .panel .link{margin-top:auto}` above);
   here that pin moves onto a row the link shares with the page's one action
   button. Scoped inside `.split .panel` so it outweighs that rule. */
.split .panel .panel__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem}
.split .panel .panel__foot .link{margin-top:0}
/* An inline link in the panel's prose (the restaurant's own website), styled
   with the `.cards__foot p a` idiom. Scoped to this page's section id: no
   other page has a link inside a panel paragraph and none should change. */
#find .panel p a{font-weight:700;color:var(--emerald);border-bottom:2px solid var(--green)}

/* c06 running order -> "All day, your way.". Identical to the FIFO cut except
   the photo sits slightly lower in the frame, so only the crop is restated,
   on this page's card modifier (FIFO and Groups keep their `center 40%`). */
#why .ag__card.ag__card--eastside img{object-position:center 45%}

/* =====================================================================
   BLOG (2026-09-19) - the journal index and the post template.
   Written against the markup WordPress core blocks render (query loop,
   post-featured-image, post-terms, post-title, post-excerpt, post-date),
   so this block is identical in blog.html, blog-post.html and the theme's
   style.css. Every device is a derivative of an approved one:
   - `.blogcats`  = the `.tabs` idiom (§6-D) as real links to the category archives
   - `.bloglist`  = the `.cards > .card` idiom: white box, 16/10 photo, tracked-caps
                    tag, condensed emerald name, muted copy, `.link` pinned to the foot
   - `.bloglist--lead` = the newest story as a wide card (first card, page one only)
   - `.hero--post` = pattern A slim hero carrying the post's featured image
   - `.asidetoc`  = the rail's paper-card idiom as an auto "In this story" list
   Neutral grounds only. Colour accents: the pagination's current square
   (combo 8) and the rail's booking card (combo 8, WP-21).
   ===================================================================== */

/* --- Category filter: the tabs idiom, as links (crawlable, one URL per topic). */
.blogcats{display:flex;gap:.3rem 1.6rem;flex-wrap:wrap;list-style:none;margin:0 0 clamp(1.4rem,3vw,2.2rem);
  padding:0 0 .2rem;border-bottom:1px solid var(--line)}
.blogcats li{margin:0}
.blogcats a{display:block;position:relative;font-weight:700;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);padding:.35rem 0 .9rem}
.blogcats a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--green);
  transform:scaleX(0);transition:transform .25s var(--ease)}
.blogcats a:hover{color:var(--ink)}
.blogcats a[aria-current]{color:var(--emerald)}
.blogcats a[aria-current]::after,.blogcats a:hover::after{transform:scaleX(1)}

/* --- The story cards. */
.bloglist .wp-block-post-template{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.bloglist .wp-block-post{position:relative;margin:0;background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;transition:transform .3s var(--ease)}
.bloglist .wp-block-post:hover,.bloglist .wp-block-post:focus-within{transform:translateY(-5px)}
.bloglist .wp-block-post-featured-image{margin:0;overflow:hidden;background:var(--cream-2)}
.bloglist .wp-block-post-featured-image img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;transition:transform .6s var(--ease)}
.bloglist .wp-block-post:hover .wp-block-post-featured-image img{transform:scale(1.05)}
.bloglist__box{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:1.15rem 1.2rem 1.3rem;
  transition:background .3s var(--ease),color .3s var(--ease)}
.bloglist__box>*{margin:0}
.bloglist__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .6rem;font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.bloglist__meta>*{margin:0}
.bloglist__meta .wp-block-post-terms a{position:relative;z-index:2;color:var(--purple)}
.bloglist__meta .wp-block-post-terms a:hover{border-bottom:1px solid currentColor}
.bloglist__meta .wp-block-post-terms+.wp-block-post-date::before{content:"\00B7";margin-right:.6rem}
.bloglist h3.wp-block-post-title{font-size:clamp(1.45rem,2.1vw,2rem);line-height:.92;color:var(--emerald);text-wrap:balance}
/* the title link stretches over the whole card, so the photo and the copy click through too */
.bloglist .wp-block-post-title a::after{content:"";position:absolute;inset:0;z-index:1}
/* THE SITE CARD (Claus's pick 2026-09-19, design-cards.html option A "Flood"): the story card behaves
   like the homepage room card. The text box floods with ONE locked combo in one ink on hover or focus;
   small text only reads on combos 8, 1 and 4, so those rotate by position. */
.bloglist .wp-block-post{--accent:var(--purple);--accent-ink:var(--yellow)}                     /* combo 8 */
.bloglist .wp-block-post:nth-child(3n+2){--accent:var(--yellow);--accent-ink:var(--purple)}     /* combo 1 */
.bloglist .wp-block-post:nth-child(3n){--accent:var(--blue-pale);--accent-ink:var(--purple)}    /* combo 4 */
.bloglist .wp-block-post:is(:hover,:focus-within) .bloglist__box{background:var(--accent);color:var(--accent-ink)}
.bloglist .wp-block-post:is(:hover,:focus-within) .bloglist__box :is(.bloglist__meta,.wp-block-post-title,p,a){color:inherit}
.bloglist .wp-block-post:is(:hover,:focus-within) .wp-block-post-excerpt__more-link{border-color:currentColor}
.bloglist .wp-block-post-excerpt{flex:1;display:flex;flex-direction:column}
.bloglist .wp-block-post-excerpt__excerpt{margin:0;font-size:.92rem;color:var(--ink-soft);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.bloglist .wp-block-post-excerpt__more-text{margin:auto 0 0;padding-top:.9rem}
.bloglist .wp-block-post-excerpt__more-link{display:inline-flex;align-items:center;gap:.5em;font-weight:700;
  letter-spacing:.05em;font-size:var(--s--1);text-transform:uppercase;color:var(--emerald);
  border-bottom:2px solid var(--green);padding-bottom:3px;width:max-content}
.bloglist .wp-block-post-excerpt__more-link::after{content:"\2192";transition:transform .2s var(--ease)}
.bloglist .wp-block-post:hover .wp-block-post-excerpt__more-link::after{transform:translateX(4px)}

/* --- The lead story: first card of page one runs the full row, photo beside the words. */
body:not(.paged) .bloglist--lead .wp-block-post:first-child{grid-column:1/-1;display:grid;
  grid-template-columns:1.35fr 1fr}
body:not(.paged) .bloglist--lead .wp-block-post:first-child .wp-block-post-featured-image{height:100%}
body:not(.paged) .bloglist--lead .wp-block-post:first-child .wp-block-post-featured-image img{height:100%;
  aspect-ratio:auto;min-height:clamp(260px,30vw,430px)}
body:not(.paged) .bloglist--lead .wp-block-post:first-child .bloglist__box{justify-content:center;gap:.85rem;
  padding:clamp(1.5rem,3vw,2.6rem)}
body:not(.paged) .bloglist--lead .wp-block-post:first-child h3.wp-block-post-title{font-size:var(--s-2);line-height:.9}
body:not(.paged) .bloglist--lead .wp-block-post:first-child .wp-block-post-excerpt{flex:none}
body:not(.paged) .bloglist--lead .wp-block-post:first-child .wp-block-post-excerpt__excerpt{font-size:var(--s-0);
  -webkit-line-clamp:4}
body:not(.paged) .bloglist--lead .wp-block-post:first-child .wp-block-post-excerpt__more-text{margin-top:0;padding-top:1.1rem}

/* --- Pagination: square page numbers, the current one on combo 8. */
.bloglist .wp-block-query-pagination{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:.8rem 1.4rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid var(--line);
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--emerald)}
.bloglist .wp-block-query-pagination>*{margin:0}
.bloglist .wp-block-query-pagination-numbers{display:flex;flex-wrap:wrap;gap:.35rem;margin-inline:auto}
.bloglist .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 .4rem;
  background:var(--paper);color:var(--emerald);transition:background .2s,color .2s}
.bloglist a.page-numbers:hover{background:var(--emerald);color:#fff}
.bloglist .page-numbers.current{background:var(--purple);color:var(--yellow)}   /* combo 8 */
.bloglist .page-numbers.dots{background:none;min-width:1.5rem}
.bloglist .wp-block-query-pagination-previous,.bloglist .wp-block-query-pagination-next{
  border-bottom:2px solid var(--green);padding-bottom:3px}
.bloglist .wp-block-query-pagination-previous:hover,.bloglist .wp-block-query-pagination-next:hover{color:var(--purple)}

/* --- The post: featured image as the slim hero. No caption, so no scrim text to protect. */
.hero--post .hero__frame{background:var(--cream-2)}
.hero--post .wp-block-post-featured-image{margin:0;position:static}
/* core's own featured-image rule (height:auto) would otherwise un-fill the frame */
.hero--post .hero__frame .wp-block-post-featured-image img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 50%}

/* --- The post headline: ONE MORE TIER DOWN (Claus, 2026-09-19). A post title is a sentence,
       not a claim: at the subpage tier (104px) a 74-character title ran three lines and a
       390px band. Home 176 / pages 104 / posts 67 at desktop, same band, same role, same ink.
       One size for every post, never sized by title length, so all stories open alike. */
body.single-post:not(.home) .masthead__title h1{font-size:clamp(2.1rem,1rem + 3.6vw,4.2rem);line-height:.86;max-width:40ch}

/* --- The post: meta row (Blog · category · date · reading time) - also the way back. */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem;margin:0 0 1.8rem;font-size:.68rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.postmeta>*{margin:0}
.postmeta>*+*::before{content:"\00B7";margin-right:.7rem;color:var(--ink-soft)}
.postmeta a{color:var(--purple)}
.postmeta a:hover{border-bottom:1px solid currentColor}
.singlepost .postmeta .wp-block-post-date{display:block;margin:0;font-size:inherit;letter-spacing:inherit}

/* --- The post: article typography. The first paragraph is the lead automatically,
       so an author never has to style one. h2 = purple, h3 = emerald, h4 = body bold. */
.singlepost .wp-block-post-content>p:first-child{font-size:var(--s-1);line-height:1.5;color:var(--ink);margin-bottom:1.4rem}
.singlepost .wp-block-post-content h2{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem);line-height:.95;
  margin:2em 0 .55em;color:var(--purple);scroll-margin-top:6.5rem}
.singlepost .wp-block-post-content h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);line-height:1;
  margin:1.7em 0 .45em;color:var(--emerald)}
.singlepost .wp-block-post-content h4{font-family:var(--body);font-weight:700;font-size:1.04rem;line-height:1.35;
  text-transform:none;letter-spacing:0;margin:1.5em 0 .3em;color:var(--emerald)}
.singlepost .wp-block-post-content h3.qa__q{color:var(--purple)}
.singlepost .wp-block-post-content :is(p,li) a:not(.btn):not(.link){font-weight:600;color:var(--emerald);
  border-bottom:2px solid var(--green)}
.singlepost .wp-block-post-content :is(p,li) a:not(.btn):not(.link):hover{color:var(--purple);border-color:var(--purple)}
.singlepost .wp-block-post-content ul.wp-block-list:not(.facts){list-style:none;margin:0 0 1.3em;padding:0;display:grid;gap:.5rem}
.singlepost .wp-block-post-content ul.wp-block-list:not(.facts)>li{position:relative;padding-left:1.5em}
.singlepost .wp-block-post-content ul.wp-block-list:not(.facts)>li::before{content:"\25C6";position:absolute;left:0;top:.5em;
  font-size:.6em;line-height:1;color:var(--purple)}
.singlepost .wp-block-post-content ol.wp-block-list{margin:0 0 1.3em;padding-left:1.4em;display:grid;gap:.5rem}
.singlepost .wp-block-post-content ol.wp-block-list>li::marker{font-family:var(--display);font-weight:700;color:var(--purple)}
.postfoot{max-width:70ch;margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:1.4rem;border-top:1px solid var(--line)}
.postfoot p{margin:0}

/* --- The rail: "In this story", built from the post's own h2s (nothing for the author to do). */
/* a twelve-section story on a short laptop screen: the sticky rail scrolls inside itself */
.singlepost .postaside{max-height:calc(100vh - 7.4rem);overflow-y:auto;scrollbar-width:thin}
.asidetoc{background:var(--paper);padding:1.35rem 1.5rem 1.2rem;box-shadow:var(--shadow-sm)}
.asidetoc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.asidetoc li{counter-increment:toc;display:grid;grid-template-columns:2rem 1fr;align-items:baseline;
  padding:.62rem 0;border-bottom:1px solid var(--line)}
.asidetoc li:last-child{border-bottom:0}
.asidetoc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--display);font-weight:700;
  font-size:1.05rem;color:var(--purple)}
.asidetoc a{font-weight:600;font-size:.9rem;line-height:1.3;color:var(--emerald)}
.asidetoc a:hover{color:var(--purple)}

/* --- "Keep reading": three cards from the same topic, under the article. */
.morestories{padding-top:0}

@media (max-width:1024px){
  .singlepost .postaside{max-height:none;overflow:visible}
  .bloglist .wp-block-post-template{grid-template-columns:1fr 1fr}
  body:not(.paged) .bloglist--lead .wp-block-post:first-child{grid-template-columns:1fr 1fr}
  .asidetoc{display:none}   /* the rail drops under the article here, where a contents list has no job */
  .morestories .wp-block-post:nth-child(3){display:none}
}
@media (max-width:760px){
  .bloglist .wp-block-post-template{grid-template-columns:1fr}
  body:not(.paged) .bloglist--lead .wp-block-post:first-child{display:flex}
  body:not(.paged) .bloglist--lead .wp-block-post:first-child .wp-block-post-featured-image{height:auto}
  body:not(.paged) .bloglist--lead .wp-block-post:first-child .wp-block-post-featured-image img{height:auto;
    aspect-ratio:16/10;min-height:0}
  .morestories .wp-block-post:nth-child(3){display:flex}
  .bloglist .wp-block-query-pagination{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .bloglist .wp-block-post,.bloglist__box,.bloglist .wp-block-post-featured-image img{transition:none}
  .bloglist .wp-block-post:hover{transform:none}
}

/* =====================================================================
   WP-46 - ROOM PAGES (2026-09-19): the Room template
   A room is a "Room" in wp-admin (inc/rooms.php), and its page is laid out
   by blocks/room-page/render.php. Reference: the POC room pages in the
   project root (/superior-room-with-1-king-size-bed-city-view.html and its
   four siblings, one design); every value below is verbatim from their
   <style> except where a note says what the theme forced.

   The page reuses what already ships and needs nothing new for it: pattern C,
   the `.split` + `.split .panel` + `.panel__foot` (WP-27 / WP-44) and the pattern J
   band in its base combo 4 on #closing (WP-38). Only the genuinely new classes
   are below. WP-48 (same day, Claus): the page was made calmer. The c06
   running order + yellow photo card gave way to the `.rm-amen` icon list, the
   card's photo joined the gallery row, the band lost its facts list and the
   "Stay your way." track of other rooms was removed. WP-49: layout C "One sheet"
   replaced the split + separate amenities section (`.rm-sheet`).
   ===================================================================== */

/* Block 03-b08 multi-crop gallery, ADAPTED: one main crop over a row of
   up to four, crops set by POSITION (the first photo fills whatever height the
   panel beside it needs), no pattern or claim cell, no captions. Its own
   class on purpose: the Gallery page's grid (WP-43) crops differently and
   both live in this one stylesheet. */
.rm-photos{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.rm-photos figure{margin:0;position:relative;overflow:hidden;background:var(--cream-2)}
.rm-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rm-photos__main{flex:1 1 auto;min-height:clamp(240px,29vw,410px);box-shadow:var(--shadow)}
.rm-photos__row{display:flex;gap:var(--gap)}
.rm-photos__row figure{flex:1 1 0;aspect-ratio:4/3;box-shadow:var(--shadow-sm)}
/* Every photo opens large: a link to its full-size file, opened in the Gallery
   page's lightbox (WP-43) by main.js. Hover and focus are the gallery grid's.
   THEME ONLY: the "+N" badge on the fifth photo when the room has more than
   five (the rest sit in a hidden group the lightbox still steps through). */
.rm-photos a{position:absolute;inset:0;display:block;cursor:zoom-in}
.rm-photos a img{transition:transform .6s var(--ease)}
.rm-photos a:hover img,.rm-photos a:focus-visible img{transform:scale(1.04)}
.rm-photos a:focus-visible{outline-offset:-6px;border-radius:0}
.rm-photos__more{position:absolute;right:0;bottom:0;padding:.25em .6em;background:var(--emerald);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:.02em;pointer-events:none}
@media (prefers-reduced-motion:reduce){.rm-photos a img{transition:none}.rm-photos a:hover img{transform:none}}

/* THE ROOM SHEET (WP-49) - layout C "One sheet", Claus's pick 2026-09-19 from
   the five candidates on /design-room-page.html. ONE white sheet holds the
   room: photos beside the description and key facts, the amenities across
   the sheet, then the booking row. The calm boxed idiom (white, hairline,
   section shadow) under its OWN class, because `.panel` already means two
   other things in this stylesheet. THE PRICE LINE is the room-card price
   role at sheet-heading size, purple on white (8.35:1), on its own row above
   the button; printed only when the room has a price line. */
.rm-sheet{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:clamp(1.2rem,2.4vw,2rem)}
.rm-sheet__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem)}
.rm-sheet h3{font-size:clamp(1.7rem,2.4vw,2.4rem);color:var(--emerald);margin:0 0 .6rem}
.rm-sheet__text p{color:var(--ink-soft);font-size:.95rem;max-width:52ch}
.rm-sheet__text .facts{margin:.4rem 0 0}
.rm-sheet__amen{margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:clamp(1.4rem,2.6vw,2rem);border-top:1px solid var(--line)}
.rm-sheet__foot{margin-top:clamp(1.4rem,2.6vw,2rem);padding-top:1.3rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem}
.rm-sheet .rm-price{flex:1 0 100%;max-width:none;margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;line-height:.9;font-size:clamp(1.7rem,2.4vw,2.4rem);color:var(--purple)}

/* IN THE ROOM - the amenities as a quiet ICON LIST inside the sheet (WP-48,
   Claus 2026-09-19; three columns since WP-49). A row = one purple line icon
   + the amenity in body type, sentence case, body ink on white, over a
   hairline. ONE ink for the icons, no colour block, no photo. Icons: one
   square-cut line set (square caps, mitred joins, to sit with the hard
   corners), picked from the amenity's words by ibis_room_amenity_icon() in
   inc/rooms.php; no match = the purple diamond. The optional second list
   sits under the first as the `.facts` diamond points. Values verbatim from
   the POC room pages. */
.rm-amen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(1.4rem,3vw,2.8rem)}
.rm-amen li{display:flex;align-items:center;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-weight:600;line-height:1.35}
.rm-amen svg{flex:none;width:26px;height:26px;color:var(--purple);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.rm-extra{margin-top:clamp(1.8rem,3vw,2.6rem)}
.rm-extra .facts{margin-bottom:0}

/* The closing BANNER: the c08 notepad (WP-35) on the NIGHT-SKY material, a
   modifier and never a fork, like `.notepad--scales`. The plate carries the
   approved CTA label, the charter's rooms claim, the room's price line when
   it has one, and one `.btn--onpurple`. One ink on the plate: yellow on
   purple (combo 8). Replaced the flat pale-blue pattern J band (Claus,
   2026-09-19: a texture banner like the other pages use). */
.notepad--night{background-color:#0a1230;background-image:url("assets/brand/textures/night-sky.jpg")}
.np__block .np__kick{color:var(--yellow);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .9rem;padding:0}
.np__block .np__price{color:var(--yellow);margin:0 0 .2rem;padding:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;line-height:.9;font-size:clamp(1.7rem,2.4vw,2.4rem)}
.np__cta{margin-top:1.3rem;padding-right:3.4rem}

/* THEME ONLY - the states a POC page never reaches: a room with no photos
   (the text takes the full width) and a room whose only list is the second
   one (it starts at the top of the block). */
.rm-sheet__top--solo{grid-template-columns:1fr}
.rm-extra--first{margin-top:0}

@media (max-width:1024px){
  .rm-photos__main{flex:none;min-height:0;aspect-ratio:3/2}   /* stacked, the main crop takes its own ratio instead of the panel's height */
  .rm-sheet__top{grid-template-columns:1fr}
  .rm-amen{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .rm-amen{grid-template-columns:1fr}
  .np__cta{padding-right:0}
}

/* WP-54 (GO-LIVE-TODO G1) - THE OFFER PAGE. Reference: /try-us-love-us.html and its siblings.
   The offer page IS the room sheet (WP-49): `.rm-sheet`, `.rm-photos`, `.facts`, `.rm-price`
   and the `.news` closing band are reused as they stand, so an offer page and a room page can
   never drift apart. Only two things are the offer's own: the TERMS as quiet small print (one
   ink, no diamonds, no colour) and the second list closing flush inside its block. */
.of-terms{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.84rem;line-height:1.5;color:var(--ink-soft);max-width:80ch}
.rm-sheet .of-facts{margin-bottom:0}
/* The offers family's CLOSING BAND (Claus 2026-09-20, option E of five on /design-offer-banner.html):
   pattern H, the homepage's `.news` texture band with its white card, on the PINK GLITTER material.
   A modifier and never a fork. The light material needs no dark scrim; the band sits in the white
   frame-liner (`.texband`); the button is the booking button's purple and yellow, the only colour
   in the band. History: night-sky + green button as first built, then the c08 notepad on leopard
   with a purple plate, which Claus struck: too loud, and the plate competed with the button. */
.news--glitter{background-color:#fab0ce;background-image:url("assets/brand/textures/glitter-pink.jpg")}
.news--glitter::before{content:none}

/* WP-50: an opening-hours line the hotel has not filled in ([ibis_restaurant_hours line="2"]
   with one line stored) leaves an empty list item; it must not print a marker. */
.wp-block-list li:empty{display:none}

/* WP-52: the font flash. The two type tokens gain the metric-matched fallback faces from
   assets/css/fonts.css in SECOND place, ahead of any condensed face the visitor happens to
   have installed (Arial Narrow ships with Office and ran 22% wide), so text drawn before
   the woff2 lands already has the final width and baseline. The finished render is
   unchanged: the real face still comes first. Theme only; the POC pages keep Google Fonts. */
:root{
  --display:"Barlow Condensed","Barlow Condensed Fallback","Saira Condensed","Oswald","Arial Narrow",sans-serif;
  --body:"Barlow","Barlow Fallback","Inter","Helvetica Neue","Arial",system-ui,sans-serif;
}

/* PARKED 2026-09-23 (Claus): not on any page; #242 (WP-64). */
/* WP-62 (2026-09-23) - GUEST REVIEWS on Rooms, Special offers, Group accommodation and
   Meeting rooms (patterns/guest-reviews.php and the four page patterns).
   WP-63 (2026-09-23) - the SECOND CUT, the strip: the rule set below replaces WP-62's and is
   verbatim from the four POC pages, where it is identical; the two shims after it are the
   only WordPress additions. */
/* =====================================================================
   GUEST REVIEWS - design-testimonials.html option F, "the quiet rotation"
   (client feedback #242, Tom 2026-09-23; Claus's pick 2026-09-23), SECOND
   CUT the same day (Claus: the first sat on the page "like something we
   just put in there"; more horizontal, banner-like, smaller type). Now a
   STRIP between the running order's 2px purple rules: a small tracked
   label on the left, one quote at a time in the middle, the carousel's
   square buttons on the right. Purple on cream, no colour ground, so the
   page's colour budget and "no two bands touch" (rule 13) are untouched.
   The quote is condensed italic at the card-name tier, up to 58ch, so it
   runs one to three lines; all figures sit in ONE grid cell, so the
   longest quote sets one height and nothing below moves. The section
   has no top padding (the section above breathes onto the rule) and half
   a section below. Every quote is the hotel's, verbatim, with its source.
   ===================================================================== */
.guestsay{padding-block:0 clamp(2.2rem,4.5vw,3.8rem)}
.gs__bar{display:grid;grid-template-columns:minmax(8rem,11rem) 1fr auto;gap:1rem clamp(1.4rem,3vw,3rem);align-items:center;
  padding-block:clamp(1.2rem,2.2vw,1.8rem);border-top:2px solid var(--purple);border-bottom:2px solid var(--purple)}
.gs__label{margin:0;font-family:var(--body);font-weight:700;font-style:normal;text-transform:uppercase;font-size:.74rem;
  letter-spacing:.12em;line-height:1.45;color:var(--emerald)}
.gs__label span{color:var(--purple);margin-right:.45em}
.gs__rota{display:grid}
.gs__rota>figure{grid-area:1/1;margin:0;display:flex;flex-direction:column;gap:.5rem;
  opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.gs__rota>figure.is-on{opacity:1;visibility:visible;transition:opacity .7s var(--ease),visibility 0s}
.gs__rota blockquote{margin:0;max-width:58ch;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:.95;letter-spacing:.01em;color:var(--purple)}
.gs__who{display:block;font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)}
.gs__ctl{display:flex;align-items:center;gap:.4rem;justify-self:end;color:var(--ink-soft)}
.gs__btn{width:40px;height:40px;display:grid;place-items:center;border:0;cursor:pointer;background:var(--emerald);color:#fff;transition:background .2s var(--ease)}
.gs__btn:hover{background:var(--green)}
.gs__btn svg{width:42%;height:42%}
.gs__btn .ico-play{display:none}
.gs__ctl.is-paused .ico-play{display:block}
.gs__ctl.is-paused .ico-pause{display:none}
.gs__n{font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-left:.3rem;min-width:4ch}
@media (prefers-reduced-motion:reduce){.gs__rota>figure,.gs__rota>figure.is-on{transition:none}}
@media (max-width:1024px){.gs__bar{grid-template-columns:1fr auto}.gs__label{grid-column:1/-1}}
@media (max-width:760px){.gs__bar{grid-template-columns:1fr}.gs__ctl{justify-self:start}}
/* WP-62 shims: the quote's words are a paragraph inside the blockquote group and the source
   line is a paragraph (a <span> in the POC), so both lose the base `p{margin:0 0 1em}`. */
.gs__rota blockquote p{margin:0}
.gs__rota p.gs__who{margin:0}

/* =====================================================================
   GUEST REVIEWS WIDGET (WP-65, client feedback #242, approved 2026-09-23, styleguide pattern M)
   A fixed "Guest reviews" tab on the right edge opens a sheet that shows
   ONE real guest review at a time. It sits OVER the page instead of in it,
   so the page's own rhythm is untouched (the two in-page cuts of
   2026-09-23 were struck). Composed from the kit, nothing new:
   - the tab is the Book button's type and combo (purple -> yellow, combo 8)
     turned on its side;
   - the sheet is PATTERN H, the homepage .news device: the night-sky
     texture with its dark overlay as the ground and a white card floating
     on it (the same device closes the Rooms page and, on pink glitter, the
     Offers pages). Third cut, 2026-09-23 (Claus: the plain white sheet
     "lost a bit of the boldness our theme has"; the first, a list in
     purple display caps, was too busy);
   - inside the card: the .news__card h2 role for the title (condensed
     emerald), the .lead role for the quote (emerald body type), one purple
     quote mark as the accent, the name in condensed caps, a muted source
     line; previous / next are the carousel's square emerald buttons with
     its counter; one .link out. No timer.
   The sheet is a native <dialog> on the Gallery lightbox's dark emerald
   scrim. z-index 150: above the sticky bar (50), under the popup (200) and
   the open phone menu (210). Every quote is the hotel's, verbatim, with
   the source it named.
   THEME: verbatim from hotel-room-perth.html. Markup is printed by inc/reviews.php
   from wp_footer on pages that ask for it; behaviour is in assets/js/main.js.
   ===================================================================== */
:root{--gr-w:clamp(470px,31vw,680px)}   /* the sheet's width: 470px at 1440, wider on a wide screen (Claus, 2026-09-24: 470 was too slim on a 2000px display), capped at 680 */
.gr-tab{position:fixed;right:0;top:50%;z-index:150;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:.5em;padding:1.1em .6em;border:0;cursor:pointer;writing-mode:vertical-rl;
  background:var(--purple);color:var(--yellow);font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1;white-space:nowrap;
  box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),color .2s var(--ease),right .35s var(--ease)}
@media (min-width:761px){.gr-tab[aria-expanded="true"]{right:var(--gr-w);z-index:206}}   /* while the sheet is open the tab rides on its left edge, so a click on it collapses the sheet again (Claus, 2026-09-24); on a phone the sheet is full width and its close button does that job */
@media (hover:hover){.gr-tab:hover{transform:translateY(-50%) translateX(-3px);color:#fff}}   /* hover only where a pointer hovers: on a touch screen the state would stick to the tapped control */
.gr-tab:focus-visible{outline-color:var(--yellow);outline-offset:-5px}
.gr-tab .dia{font-size:.7em}
.gr-tab__ico{width:.75em;height:.75em;flex:0 0 auto;transition:transform .2s var(--ease)}   /* open / minimise: points into the page when closed, out to the edge when open (Claus, 2026-09-24) */
.gr-tab[aria-expanded="true"] .gr-tab__ico{transform:rotate(180deg)}
.gr{position:fixed;inset:0 0 0 auto;z-index:205;margin:0;width:var(--gr-w);max-width:100vw;height:100dvh;max-height:100dvh;   /* z-index for the desktop (non-modal) sheet: over the popup (200), under the open phone menu (210) */
  border:clamp(12px,2vw,26px) solid #fff;box-sizing:border-box;padding:0;color:var(--ink);box-shadow:var(--shadow);isolation:isolate;   /* the .texband liner: the charter's white frame on every texture band, so the night-sky never touches the page or a photo (Claus, 2026-09-24) */
  background:#0a1230 url("assets/brand/textures/night-sky.jpg") center/cover;   /* pattern H ground */
  transform:translateX(100%);transition:transform .35s var(--ease)}
.gr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(4,10,30,.42)}   /* pattern H overlay */
.gr[open]{display:flex;flex-direction:column}
.gr.is-in{transform:none}
.gr::backdrop{background:rgba(0,28,32,.62);opacity:0;transition:opacity .35s var(--ease)}
.gr.is-in::backdrop{opacity:1}
/* DESKTOP (Claus, 2026-09-24): no scrim and no scroll lock, the page stays visible and scrollable beside the sheet (dialog.show()).
   PHONE: the sheet fills the screen, so it stays modal (showModal(): scrim, scroll lock, Esc via cancel). */
.gr__x{position:absolute;top:clamp(.8rem,2vw,1.2rem);right:clamp(.8rem,2vw,1.2rem);   /* inside the liner: the dialog's border is the frame, the button sits in the padding box */z-index:2;width:44px;height:44px;display:grid;place-items:center;border:0;cursor:pointer;
  background:var(--emerald);color:#fff;box-shadow:var(--shadow-sm);transition:background .2s var(--ease)}
@media (hover:hover){.gr__x:hover{background:var(--green)}}
.gr__x svg{width:42%;height:42%}
.gr__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(4.2rem,9vw,5rem) clamp(1.3rem,3vw,2rem) clamp(1.3rem,3vw,2rem)}
.gr__card{background:#fff;padding:clamp(1.5rem,2.8vw,2.2rem) clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow)}   /* pattern H card */
.gr__kick{display:block;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);margin-bottom:.6rem}
.gr__title{margin:0 0 1.4rem;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.85;
  font-size:var(--s-2);color:var(--emerald);max-width:11ch}
.gr__mark{display:block;font-family:var(--display);font-weight:700;font-size:4rem;line-height:.55;height:.55em;color:var(--purple);margin-bottom:.9rem}
.gr__rota{display:grid}   /* every figure in the same cell: the longest quote sets one height, the foot never moves */
.gr__rota>figure{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:none}   /* the outgoing review goes at once ... */
.gr__rota>figure.is-on{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}   /* ... only the incoming one fades in, so two are never readable together (iPhone, 2026-09-23) */
.gr__rota blockquote{margin:0 0 1rem;font-size:var(--s-1);line-height:1.42;color:var(--emerald);max-width:38ch}
.gr__rota figcaption{display:flex;flex-direction:column;gap:.2rem}
.gr__name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.1rem;line-height:1;color:var(--emerald)}
.gr__who{font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.gr__foot{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:.8rem 1rem;flex-wrap:wrap}
.gr__ctl{display:flex;align-items:center;gap:.5rem}
.gr__btn{width:44px;height:44px;display:grid;place-items:center;border:0;cursor:pointer;background:var(--emerald);color:#fff;transition:background .2s var(--ease)}
@media (hover:hover){.gr__btn:hover{background:var(--green)}}
.gr__btn svg{width:46%;height:46%}
.gr__n{font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald);margin-left:.5rem;min-width:4.5ch}
@media (max-width:760px){
  .gr-tab{font-size:.95rem;padding:.95em .5em}
  :root{--gr-w:100vw}
  html:has(dialog.gr[open]){overflow:hidden}
  .gr__body{padding:4.4rem 1rem 1rem}
  .gr__mark{font-size:3.4rem}
}
@media (prefers-reduced-motion:reduce){
  .gr,.gr::backdrop{transition:none}
  .gr-tab,.gr-tab:hover{transform:translateY(-50%);transition:none}
  .gr__rota>figure.is-on{transition:none}
}

/* =====================================================================
   WP-66 (client feedback #239, 2026-09-24) - WHAT'S ON and THE EVENT PAGE.
   Reference: /whats-on.html; the event pages /lightscape-perth.html and
   siblings (ended: /harlem-globetrotters-at-rac-arena.html, always on:
   /footy-and-cricket-at-optus-stadium.html). The page is built from what the
   theme already has: the site card grid, the 04-b06 running order (`.agenda`,
   the FIFO page's device) and the pattern J closing band (`#closing.invite`,
   combo 4). The event page IS the offer page (WP-54), which is the room sheet.
   Three things are this page's own: the hero crop, the grid's empty state and
   the running-order shims scoped to #venues (the same as #why on FIFO).
   ===================================================================== */
.hero--whatson .hero__frame img{object-position:center 22%}
/* An empty card grid (no dated event listed today, the block prints one line) */
.cards__empty{grid-column:1/-1;margin:0;color:var(--ink-soft);font-size:.95rem}
/* The running order without its clock column, the WP-38 rules on #why repeated for #venues:
   two-column rows, the copy widened, the row title and the caption as paragraphs, the yellow
   card running the full height of the list at desktop and back to 4/5 once the columns stack. */
#venues .head{margin-bottom:clamp(1.2rem,2.4vw,2rem)}
#venues .container{align-items:stretch}
#venues .ag__row{grid-template-columns:minmax(64px,84px) 1fr}
#venues .ag__what p{max-width:58ch}
#venues .ag__what .link{margin-top:.6rem;font-size:.72rem}
#venues .ag__what .ag__t{font-family:var(--display);font-weight:700;font-style:italic;
  text-transform:uppercase;color:var(--purple);font-size:clamp(1.15rem,1.6vw,1.45rem);
  line-height:1;display:block;margin:0 0 .15rem;max-width:none}
#venues .ag__cap .ag__capt{display:block;font-family:var(--display);font-weight:700;
  font-style:italic;text-transform:uppercase;color:var(--purple);
  font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:.85;margin:0}
#venues .ag__cap .ag__caps{display:block;margin:.4rem 0 0;font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
#venues .ag__card{display:flex;flex-direction:column}
#venues .ag__card figure{margin:0;flex:1 1 0;min-height:0}
#venues .ag__card img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  object-position:center 40%;display:block}
@media (max-width:1024px){
  #venues .ag__card{max-width:460px}
  #venues .ag__card figure{flex:none}
  #venues .ag__card img{height:auto;aspect-ratio:4/5}
}
@media (max-width:760px){
  #venues .ag__row{grid-template-columns:minmax(48px,60px) 1fr;grid-template-rows:none}
}

/* =====================================================================
   WP-67 (Claus, 2026-09-24) - the WHAT'S ON closing band becomes a TEXTURE
   BAND, the Rooms and Offers closing-band format on a third material.
   Reference: /whats-on.html #closing and the four event pages. Pattern H,
   the homepage `.news` white card (its rules above, verbatim), on IRIDESCENT
   via `.news--irid`, a modifier like `.news--glitter` (WP-54), never a
   fork; a light material, so no scrim. The card carries the band's
   two-column grid, which the WP-38 `#closing .inv__*` rules above still
   lay out; the rules here only re-ink it for a white card: emerald type,
   the green diamond marks and the green button the only colour (the
   event page prints its quiet "See the rooms" link instead). The pattern J
   band (`#closing.invite`, combo 4) stays as it is for FIFO and Gallery.
   ===================================================================== */
.news--irid{background-color:#c9b6e6;background-image:url("assets/brand/textures/iridescent.jpg")}
.news--irid::before{content:none}
#closing .news__card{padding:clamp(1.8rem,3vw,2.8rem) clamp(1.8rem,3.2vw,3rem)}
#closing.news .inv__kick{font-size:.72rem;color:var(--emerald);max-width:none;margin:0 0 .9rem}
#closing.news .inv__claim{color:var(--emerald);font-size:clamp(2.4rem,4.2vw,3.7rem);line-height:.82}
#closing.news .inv__body{color:var(--ink-soft);font-size:1rem;max-width:54ch;margin:0 0 1.2rem}
#closing.news .inv__meta{color:var(--emerald)}
@media (max-width:760px){
  #closing.news .news__card{max-width:none}
}

/* =====================================================================
   WP-68 (2026-09-24) - the INFO / POLICY PAGE document sheet, verbatim from
   the POC (privacy-policy.html, cookie-policy.html, terms-of-use.html; the
   same `.docsheet` as sustainability.html / accessibility.html, whose own
   twin is WP-51). One white sheet beside the blog's "On this page" rail
   (`.postgrid` / `.postaside` / `.asidetoc`, BLOG block above). Neutral
   grounds only: white on cream, purple 8.35, emerald 11.92.
   ===================================================================== */
.docsheet{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:clamp(1.4rem,3vw,2.8rem)}
.docsheet>section:first-child .subhead{margin-top:0}
.docsheet p{max-width:70ch}
.docsheet section>:last-child{margin-bottom:0}
.docsheet .facts{margin:1.1rem 0 1.2rem}
.docsheet .facts li{max-width:60ch}
.docsheet :is(p,li) a:not(.btn):not(.link){font-weight:600;color:var(--emerald);border-bottom:2px solid var(--green)}
.docsheet :is(p,li) a:not(.btn):not(.link):hover{color:var(--purple);border-color:var(--purple)}
.docsheet a[href^="tel:"]{white-space:nowrap}
.docsheet__foot{margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.docsheet__foot p{margin:0}
.docsheet__foot p.muted{margin-top:.6rem}   /* the "last updated" line (the POC sets it inline) */
.docsheet__links{display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;margin-top:1.2rem}
/* WP-104: the credentials row at the top of the sheet (sustainability.html `.docsheet__keys`, verbatim): up to three
   hard facts stated once, big purple figure over a small line, hairlines between; one under the other on a phone. */
.docsheet__keys{list-style:none;margin:0;padding:0 0 clamp(1.4rem,2.6vw,2rem);display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line)}
.docsheet__keys li{padding:0 clamp(1rem,2vw,1.8rem);border-left:1px solid var(--line)}
.docsheet__keys li:first-child{padding-left:0;border-left:0}
.docsheet__keys b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(2.2rem,3.4vw,3.2rem);line-height:.9;color:var(--purple)}
.docsheet__keys span{display:block;margin-top:.45rem;font-weight:600;font-size:.9rem;line-height:1.35}
.docsheet__keys+section .subhead{margin-top:clamp(1.4rem,2.6vw,2rem)}
@media (max-width:1024px){
  .docsheet+.postaside{display:none}   /* the rail holds only the contents card, which has no job here (POC) */
}
@media (max-width:760px){
  .docsheet__keys{grid-template-columns:1fr}
  .docsheet__keys li{padding:1rem 0 0;margin-top:1rem;border-left:0;border-top:1px solid var(--line)}
  .docsheet__keys li:first-child{padding-top:0;margin-top:0;border-top:0}
}

/* H1 = the small label over the first section; the masthead line is display copy (Claus, 2026-10-03) */
.masthead__title .masthead__claim{font-family:var(--display);font-weight:700;font-style:normal;text-transform:uppercase;text-align:left;margin:0;
  font-size:var(--s-mast);color:var(--purple);line-height:.82;letter-spacing:.005em}
body:not(.home):not(.is-home-mirror) .masthead__title .masthead__claim{font-size:clamp(2.6rem,1.2rem + 6.5vw,6.5rem);text-wrap:balance}
body.single-post:not(.home) .masthead__title .masthead__claim{font-size:clamp(2.1rem,1rem + 3.6vw,4.2rem);line-height:.86;max-width:40ch}
h1:where(.pagelabel){font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;
  text-transform:inherit;letter-spacing:inherit;text-align:inherit;margin:0 0 1em}
h1.kicker--flush:where(.pagelabel){margin-bottom:0}

/* WP-92: hard corners - an image that still carries the core "Rounded" style (taken out of the editor) stays square */
.wp-block-image.is-style-rounded img{border-radius:0}