@charset "UTF-8";

/* BRIO House shared visual system.
   Source decisions: Reviews 05–14 and CREATIVE_INTEGRATION_AUDIT.md. */

:root {
  color-scheme: light;

  /* Core palette */
  --paper: #fffdf7;
  --cream: #f4efe4;
  --ink: #292720;
  --cobalt: #173f6d;
  --teal: #284f5c;
  --orange: #e77932;
  --em: #d9662a;             /* emphasis orange for large display text on paper (3.5:1) */
  --label: #a8471f;          /* text-safe burnt orange for small labels (5.8:1 on paper) */
  --label-on-dark: var(--butter);
  --terracotta: #c96f43;
  --powder: #b8d4df;
  --burgundy: #7d3440;
  --butter: #f1cf6b;
  --olive: #687344;
  --white: #fffdf7;

  /* Approved room colour families */
  --mare-deep: #294e60;
  --mare-accent: #3e758c;
  --rosso-deep: #4b252c;
  --rosso-accent: var(--burgundy);
  --sera-deep: #70502d;
  --sera-accent: #a85e32;
  --oliva-deep: #344127;
  --oliva-accent: #5f6c3d;

  /* Semantic colour roles */
  --surface: var(--paper);
  --surface-soft: var(--cream);
  --text: var(--ink);
  --text-muted: rgba(41, 39, 32, 0.72);
  --accent: var(--cobalt);
  --accent-warm: var(--orange);
  --line: rgba(41, 39, 32, 0.22);
  --line-strong: rgba(41, 39, 32, 0.42);
  --focus: var(--orange);
  --overlay: rgba(17, 24, 21, 0.66);

  /* Typography */
  --font-display: "DM Serif Display", Georgia, serif;   /* EN display serif (no Vietnamese glyphs) */
  --font-sans: Manrope, "Helvetica Neue", Arial, sans-serif;
  --font-hand: Caveat, "Segoe Print", cursive;
  --text-xs: 0.75rem;
  --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --text-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --text-lead: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem);
  --text-h3: clamp(1.75rem, 1.35rem + 1.4vw, 3rem);
  --text-h2: clamp(3.25rem, 2.3rem + 4.1vw, 7rem);
  --text-hero: clamp(5rem, 3.6rem + 7vw, 11rem);
  --leading-tight: 0.86;
  --leading-body: 1.7;
  --tracking-label: 0.16em;

  /* Spacing */
  --space-1: 0.375rem;
  --space-2: 0.625rem;
  --space-3: 0.875rem;
  --space-4: 1.25rem;
  --space-5: 1.75rem;
  --space-6: 2.5rem;
  --space-7: 3.5rem;
  --space-8: 5rem;
  --space-9: 7.5rem;
  --section-space: clamp(5.5rem, 4.2rem + 5vw, 9.5rem);
  --page-pad: clamp(1.375rem, 4.7vw, 5.125rem);

  /* Reading and layout widths */
  --measure-small: 28rem;
  --measure: 42rem;
  --measure-wide: 58rem;
  --site-max: 108rem;
  --header-height: 4.75rem;

  /* Lines, shadows and motion */
  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);
  --shadow-paper: 0.5rem 0.625rem 0 rgba(23, 63, 109, 0.1);
  --shadow-soft: 0.45rem 0.55rem 1.5rem rgba(41, 39, 32, 0.1);
  --duration-fast: 160ms;
  --duration: 320ms;
  --duration-slow: 560ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Default room skin; overridden by data-room-theme */
  --room-deep: var(--teal);
  --room-accent: var(--powder);
  --room-soft: rgba(184, 212, 223, 0.42);
  --room-pattern: url("../patterns/P04_WideCheck_Powder.svg");
  --room-pattern-size: 2.125rem;

  /* Restrained textile scale */
  --pattern-gingham-size: 1.125rem;
  --pattern-mare-size: 2.125rem;
  --pattern-rosso-size: 2.5rem;
  --pattern-sera-size: 1.625rem;
  --pattern-oliva-size: 2.25rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-3));
  text-size-adjust: 100%;
}

body {
  min-width: 20rem;
  margin: 0;
  color: var(--text);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  display: block;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
[type="button"],
[type="submit"] {
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

p,
h1,
h2,
h3,
figure,
blockquote,
dl,
dd,
fieldset,
legend {
  margin: 0;
}

ul,
ol {
  margin-block: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 0.1875rem solid var(--focus);
  outline-offset: 0.25rem;
}

::selection {
  color: var(--paper);
  background: var(--cobalt);
}

.brio-shell {
  width: min(100%, var(--site-max));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.brio-section {
  padding-block: var(--section-space);
}

.brio-measure {
  max-width: var(--measure);
}

.brio-measure-small {
  max-width: var(--measure-small);
}

.brio-eyebrow,
.brio-label,
.brio-index {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.brio-eyebrow {
  color: var(--label);
}

.brio-display,
.brio-heading,
.brio-subheading {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.05em;
}

.brio-display {
  font-size: var(--text-hero);
  line-height: 0.78;
}

.brio-heading {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
}

.brio-subheading {
  font-size: var(--text-h3);
  line-height: 1;
}

.brio-display em,
.brio-heading em,
.brio-subheading em {
  color: var(--em);
  font-weight: inherit;
}

.brio-lead {
  max-width: var(--measure-small);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: 1.4;
}

.brio-hand-note {
  max-width: 16rem;
  color: var(--accent-warm);
  font-family: var(--font-hand);
  font-size: clamp(1.25rem, 1.08rem + 0.65vw, 1.75rem);
  font-weight: 600;
  line-height: 1.05;
  transform: rotate(-3deg);
}

.brio-muted {
  color: var(--text-muted);
}

/* Vietnamese pages use Playfair Display: DM Serif Display ships no Vietnamese subset (D18). */
html[lang="vi"]{--font-display:"Playfair Display",Georgia,serif;--leading-tight:.95}
html[lang="vi"] :is(h1,h2,h3,.house h2,.section-heading h2,.hero h1,.page-hero h1,.room-hero-copy h1,.rooms-intro h1,.booking-visual h1,.objects-row h3,.mio-threshold h3,.stay-copy h3,.practical h2,.booking-scene h2,.editorial-heading h2,.prose-page .editorial-heading h1,.house-next h2,.whole-book h2){line-height:.98}
html[lang="vi"] .hero h1{letter-spacing:-.035em}
@media(max-width:768px){html[lang="vi"] .hero h1{font-size:clamp(54px,15.5vw,84px)}html[lang="vi"] :is(.house h2,.section-heading h2,.objects-row h3,.mio-threshold h3,.practical h2,.booking-scene h2){font-size:clamp(52px,14.5vw,80px)}}
html[lang="vi"]{--font-hand:"Playfair Display",Georgia,serif}
html[lang="vi"] :is(.hand-note,.mio-note,.margin-note,.guest-note b,.brio-hand-note){font-family:var(--font-display);font-style:italic;font-weight:400}

/* <picture> wrappers must not break frame sizing: the <img> lays out as if it were the direct child. */
picture{display:contents}
picture>source{display:none}

/* ---------- Global shell (Review 15 header/footer, creative lock nav) ---------- */
body.menu-open{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:300;top:-80px;left:20px;padding:12px 16px;color:#fff;background:var(--cobalt);font-size:var(--text-sm);font-weight:600;text-decoration:none}.skip-link:focus{top:12px}
.eyebrow{color:var(--label);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase}
.section-index{display:flex;align-items:center;gap:13px;font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase}.section-index span{display:grid;place-items:center;width:38px;height:38px;color:#fff;background:var(--label);border-radius:50%}
.section-heading{display:grid;grid-template-columns:120px 1fr .55fr;gap:clamp(35px,5vw,84px);align-items:end;margin-bottom:78px}.section-heading .section-index{align-self:start}.section-heading h2{margin-top:22px;color:var(--cobalt);font:400 var(--text-h2)/.82 var(--font-display);letter-spacing:-.055em}.section-heading h2 em{color:var(--em);font-weight:400}.section-heading>p{max-width:440px;padding-bottom:8px;color:var(--text-muted);font-size:var(--text-sm);line-height:1.8}
.page-main{overflow:clip}.page-main--offset{padding-top:var(--header-height)}
.site-header{position:fixed;z-index:100;inset:0 0 auto;height:var(--header-height);padding:7px var(--page-pad);display:grid;grid-template-columns:64px 1fr auto auto;align-items:center;gap:clamp(22px,4vw,70px);color:#fff;border-bottom:1px solid rgba(255,255,255,.34);transition:color var(--duration) ease,background-color var(--duration) ease,border-color var(--duration) ease,box-shadow var(--duration) ease}.site-header[data-tone="surface"]{color:#292720;background:rgba(255,253,247,.96);border-color:rgba(41,39,32,.22);box-shadow:0 7px 24px rgba(58,49,35,.06);backdrop-filter:blur(12px)}.brand{position:relative;width:56px;height:61px}.brand img{position:absolute;inset:0;height:100%;object-fit:contain;transition:opacity var(--duration-fast) ease}.brand-dark{opacity:0}.site-header[data-tone="surface"] .brand-light{opacity:0}.site-header[data-tone="surface"] .brand-dark{opacity:1}.place-line,.desktop-nav a,.book-link{font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase}.place-line{opacity:.7}.site-header[data-tone="surface"] .place-line{opacity:1}.desktop-nav{display:flex;gap:clamp(22px,3vw,44px)}.desktop-nav a{position:relative;padding:14px 0;opacity:.78}.desktop-nav a:hover,.desktop-nav a[aria-current="page"]{opacity:1}.desktop-nav a[aria-current="page"]::after{content:"";position:absolute;right:0;bottom:6px;left:0;height:1px;background:currentColor}.book-link{min-width:130px;padding:13px 15px;display:flex;justify-content:space-between;border:1px solid currentColor}.site-header[data-tone="surface"] .book-link{color:#fff;border-color:var(--cobalt);background:var(--cobalt)}.menu-trigger,.mobile-menu{display:none}
.site-header{grid-template-columns:64px 1fr auto auto}
.site-header a{text-decoration:none}
.header-utilities{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.utility-link{font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.78;padding:14px 0;position:relative}.utility-link:hover,.utility-link[aria-current="page"]{opacity:1}.utility-link[aria-current="page"]::after{content:"";position:absolute;right:0;bottom:6px;left:0;height:1px;background:currentColor}
.lang-switch{display:flex;align-items:center;gap:8px;font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase}.lang-switch strong{font-weight:600}.lang-switch span{opacity:.5}.lang-switch a{opacity:.8;padding:12px 0}.lang-switch a:hover,.lang-switch a:focus-visible{opacity:1}
.mobile-menu-rooms{display:flex;flex-wrap:wrap;gap:10px 22px;padding:12px 0 18px 34px;border-bottom:var(--border)}.mobile-menu-rooms a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}.mobile-menu-rooms a i{width:16px;height:16px;background:var(--room-pattern) center/var(--room-pattern-size);border:2px solid var(--paper);outline:1px solid var(--line)}.mobile-menu-rooms a[aria-current="page"]{color:var(--cobalt)}
.mobile-language a{color:var(--cobalt)}
.breadcrumb{margin-bottom:var(--space-4);font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}.breadcrumb ol{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none}.breadcrumb li+li::before{content:"·";margin-right:10px;opacity:.5}.breadcrumb a{opacity:.72;text-decoration:none}.breadcrumb a:hover{opacity:1;text-decoration:underline}.breadcrumb [aria-current]{opacity:1}
.site-footer{position:relative;min-height:720px;display:grid;grid-template-columns:.7fr 1.3fr;color:#f8f1e4;background:#213f4b;overflow:hidden}.footer-scene{position:relative;min-height:720px}.footer-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(14,21,20,.48))}.footer-scene img{width:100%;height:100%;object-fit:cover;filter:saturate(.82)}.footer-scene p{position:absolute;z-index:1;left:28px;right:28px;bottom:25px;padding-top:12px;border-top:1px solid rgba(255,255,255,.45);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase}.footer-content{padding:75px var(--page-pad) 28px;display:flex;flex-direction:column}.footer-content>img,.footer-content>picture>img{width:76px;height:70px;object-fit:contain}.footer-content>p{max-width:520px;margin:47px 0 55px;font:400 clamp(42px,4vw,65px)/1 var(--font-display)}.footer-nav{padding:36px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:50px;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}.footer-nav nav{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.footer-nav span{margin-bottom:7px;color:var(--butter);font-size:var(--text-xs);font-weight:600;letter-spacing:.15em;text-transform:uppercase}.footer-nav a{font:italic 17px/1.35 var(--font-display);opacity:.76}.footer-nav a:hover{opacity:1}.footer-bottom{margin-top:auto;padding-top:22px;display:flex;justify-content:space-between;font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}.site-footer>i{position:absolute;right:0;bottom:0;width:45px;height:120px;background:url('../patterns/P01_Gingham_Orange.svg') center/18px repeat}
.site-footer a{text-decoration:none}.footer-bottom a:hover,.footer-nav a:hover{text-decoration:underline}

/* Lightbox */
.lightbox{width:min(96vw,1500px);max-height:96vh;padding:0;color:var(--paper);background:transparent;border:0;overflow:visible}.lightbox::backdrop{background:rgba(17,24,21,.88)}.lightbox figure{position:relative;display:grid;justify-items:center;gap:var(--space-3)}.lightbox img{max-width:100%;max-height:82vh;width:auto;height:auto;background:var(--ink);box-shadow:0 30px 60px rgba(0,0,0,.4)}.lightbox figcaption{font:italic var(--text-body)/1.3 var(--font-display)}.lightbox-close,.lightbox-nav{position:fixed;z-index:2;min-width:44px;min-height:44px;padding:10px 14px;color:var(--paper);background:rgba(17,24,21,.7);border:1px solid rgba(255,253,247,.4);font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.lightbox-close{top:16px;right:16px}.lightbox-nav{top:50%;transform:translateY(-50%)}.lightbox-nav--prev{left:16px}.lightbox-nav--next{right:16px}.lightbox-nav[hidden]{display:none}.lightbox-trigger{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in;color:inherit;font:inherit;text-align:inherit}.lightbox-trigger img,.lightbox-trigger picture{width:100%;height:100%}.lightbox-count{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);font-size:var(--text-xs);letter-spacing:.14em}


.brio-button {
  min-height: 2.75rem;
  padding: 0.875rem 1.125rem;
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  color: var(--paper);
  background: var(--cobalt);
  border: 1px solid var(--cobalt);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.brio-button:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0.3rem 0.35rem 0 rgba(23, 63, 109, 0.16);
}

.brio-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.brio-button--warm {
  color: var(--paper);
  background: var(--terracotta);
  border-color: var(--terracotta);
}

.brio-button--quiet {
  color: var(--ink);
  background: transparent;
  border-color: var(--line-strong);
}

.brio-button--paper {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--paper);
}

.brio-button[disabled],
.brio-button[aria-disabled="true"] {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


.brio-header {
  position: relative;
  z-index: 50;
  min-height: var(--header-height);
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: minmax(4rem, 1fr) auto minmax(4rem, 1fr);
  gap: var(--space-5);
  align-items: center;
  color: var(--ink);
  background: rgba(255, 253, 247, 0.94);
  border-bottom: var(--border);
  transition: color var(--duration) ease, background-color var(--duration) ease;
}

/* Form primitives */
.brio-form {
  display: grid;
  gap: var(--space-6);
}

.brio-fieldset {
  min-width: 0;
  padding: 0 0 var(--space-6);
  border: 0;
  border-bottom: var(--border);
}

.brio-legend {
  width: 100%;
  margin-bottom: var(--space-4);
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  line-height: 1.1;
}

.brio-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.brio-field {
  display: grid;
  gap: var(--space-2);
}

.brio-field > span,
.brio-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brio-field :where(input, select, textarea) {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.75rem 0.875rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 1rem;
}

.brio-field textarea {
  min-height: 8rem;
  resize: vertical;
}

.brio-field :where(input, select, textarea):hover {
  border-color: var(--line-strong);
}

.brio-field [aria-invalid="true"] {
  border-color: var(--burgundy);
}

.brio-field-help,
.brio-field-error {
  font-size: var(--text-xs);
  line-height: 1.5;
}

.brio-field-help {
  color: var(--text-muted);
}

.brio-field-error {
  color: var(--burgundy);
  font-weight: 600;
}

.brio-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.brio-choice {
  min-height: 6.5rem;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  align-content: center;
  color: var(--ink);
  background: rgba(255, 253, 247, 0.55);
  border: var(--border);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) var(--ease);
}

.brio-choice:hover,
.brio-choice[aria-pressed="true"],
.brio-choice[aria-selected="true"] {
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0.375rem 0.375rem 0 var(--room-soft);
}

.brio-choice strong {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.625rem);
  font-weight: 400;
  line-height: 1.1;
}

.brio-choice small {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.brio-counter {
  min-height: 3.25rem;
  display: grid;
  grid-template-columns: 3.25rem 4.5rem 3.25rem 1fr;
  align-items: center;
  background: var(--paper);
  border: var(--border);
}

.brio-counter button {
  min-width: 2.75rem;
  min-height: 3.25rem;
  padding: 0;
  color: var(--ink);
  background: var(--cream);
  border: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  cursor: pointer;
}

.brio-counter output {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.625rem;
}

.brio-counter > span {
  justify-self: end;
  padding-right: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brio-form-summary {
  padding: var(--space-4);
  display: grid;
  grid-template-columns: minmax(7rem, 0.35fr) 1fr;
  gap: var(--space-4);
  color: var(--paper);
  background: var(--teal);
}

.brio-form-summary > span {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Image and gallery primitives */
.brio-image-frame {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

.brio-image-frame > :where(img, picture) {
  width: 100%;
  height: 100%;
}

.brio-image-frame img {
  object-fit: cover;
  object-position: var(--focal-point, center);
}

.brio-image-label {
  position: absolute;
  z-index: 2;
  bottom: var(--space-4);
  left: var(--space-4);
  max-width: calc(100% - (2 * var(--space-4)));
  padding: var(--space-2) var(--space-3);
  color: var(--paper);
  background: rgba(17, 24, 21, 0.74);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brio-paper-photo {
  padding: 0.5rem 0.5rem 2rem;
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-paper);
}

.brio-paper-photo figcaption {
  padding: var(--space-3) var(--space-1) 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.2;
}

.brio-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 0.78fr));
  gap: var(--space-4);
}

.brio-gallery-feature {
  grid-row: span 2;
}

.brio-gallery figure {
  min-width: 0;
}

.brio-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-point, center);
}

.brio-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.brio-gallery-thumb {
  min-height: 4rem;
  padding: 0.25rem;
  background: var(--paper);
  border: var(--border);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.brio-gallery-thumb:hover,
.brio-gallery-thumb[aria-pressed="true"] {
  border-color: var(--accent);
  opacity: 1;
}

.brio-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brio-lightbox {
  width: min(92vw, 90rem);
  max-height: 92vh;
  padding: 0;
  color: var(--paper);
  background: var(--ink);
  border: 0;
}

.brio-lightbox::backdrop {
  background: rgba(17, 24, 21, 0.82);
}

.brio-lightbox-close {
  position: absolute;
  z-index: 2;
  top: var(--space-4);
  right: var(--space-4);
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--paper);
  background: var(--overlay);
  border: 1px solid rgba(255, 253, 247, 0.5);
  cursor: pointer;
}

/* Room themes and textile accents */
[data-room-theme="mare"] {
  --room-deep: var(--mare-deep);
  --room-accent: var(--mare-accent);
  --room-soft: rgba(184, 212, 223, 0.48);
  --room-pattern: url("../patterns/P04_WideCheck_Powder.svg");
  --room-pattern-size: var(--pattern-mare-size);
}

[data-room-theme="rosso"] {
  --room-deep: var(--rosso-deep);
  --room-accent: var(--rosso-accent);
  --room-soft: rgba(125, 52, 64, 0.16);
  --room-pattern: url("../patterns/P09_CottageSprig_Rosso.svg");
  --room-pattern-size: var(--pattern-rosso-size);
}

[data-room-theme="sera"] {
  --room-deep: var(--sera-deep);
  --room-accent: var(--sera-accent);
  --room-soft: rgba(241, 207, 107, 0.34);
  --room-pattern: url("../patterns/P10_TinyGingham_Sera.svg");
  --room-pattern-size: var(--pattern-sera-size);
}

[data-room-theme="oliva"] {
  --room-deep: var(--oliva-deep);
  --room-accent: var(--oliva-accent);
  --room-soft: rgba(104, 115, 68, 0.2);
  --room-pattern: url("../patterns/P06_Harlequin_Olive.svg");
  --room-pattern-size: var(--pattern-oliva-size);
}

.brio-pattern {
  width: min(8.5rem, 28vw);
  height: clamp(3rem, 5vw, 4.25rem);
  display: block;
  background-color: var(--cream);
  background-image: var(--room-pattern);
  background-position: center;
  background-repeat: repeat;
  background-size: var(--room-pattern-size);
  border: 0.375rem solid var(--paper);
  outline: var(--border);
  box-shadow: 0.25rem 0.3rem 0 rgba(41, 39, 32, 0.08);
  transform: rotate(-2deg);
}

.brio-pattern--gingham {
  background-image: url("../patterns/P01_Gingham_Orange.svg");
  background-size: var(--pattern-gingham-size);
}

.brio-pattern--mare {
  background-image: url("../patterns/P04_WideCheck_Powder.svg");
  background-size: var(--pattern-mare-size);
}

.brio-pattern--rosso {
  background-image: url("../patterns/P09_CottageSprig_Rosso.svg");
  background-size: var(--pattern-rosso-size);
}

.brio-pattern--sera {
  background-image: url("../patterns/P10_TinyGingham_Sera.svg");
  background-size: var(--pattern-sera-size);
}

.brio-pattern--oliva {
  background-image: url("../patterns/P06_Harlequin_Olive.svg");
  background-size: var(--pattern-oliva-size);
}

.brio-reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--duration-slow) ease,
    transform var(--duration-slow) var(--ease);
}

.brio-reveal[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}@media (max-width: 64rem) {
  :root {
    --section-space: clamp(5rem, 10vw, 7rem);
  }

  .brio-gallery {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}@media (max-width: 48rem) {
  :root {
    --header-height: 4.25rem;
    --page-pad: clamp(1.25rem, 5vw, 2rem);
    --text-hero: clamp(4.25rem, 19vw, 7.5rem);
    --text-h2: clamp(3rem, 14vw, 5.5rem);
  }

  .brio-gallery {
    margin-inline: calc(var(--page-pad) * -1);
    padding: 0 var(--page-pad) var(--space-3);
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .brio-gallery > * {
    flex: 0 0 78vw;
    min-height: 28rem;
    scroll-snap-align: center;
  }

  .brio-gallery-feature {
    flex-basis: 86vw;
  }
}@media (max-width: 32rem) {
  .brio-field-grid,
  .brio-choice-grid,
  .brio-form-summary {
    grid-template-columns: 1fr;
  }

  .brio-counter {
    grid-template-columns: 3.25rem 4rem 3.25rem 1fr;
  }
}@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .brio-reveal {
    opacity: 1;
    transform: none;
  }
}

@media(max-width:1100px){.site-header{grid-template-columns:58px 1fr auto}.place-line{display:none}}
@media(max-width:768px){:root{--header-height:4.25rem;--page-pad:20px}.site-header{height:var(--header-height);padding:5px 20px;grid-template-columns:50px 1fr auto auto;gap:14px}.utility-link,.lang-switch{display:none}.header-utilities{gap:0}.brand{width:48px;height:55px}.desktop-nav{display:none}.site-header>.book-link{justify-self:end;min-width:90px;padding:11px 12px}.menu-trigger{width:72px;padding:10px 0;display:grid;grid-template-columns:1fr 19px;gap:3px 8px;align-items:center;color:inherit;border:0;background:transparent}.menu-trigger span{grid-row:1/3;font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}.menu-trigger i{width:19px;height:1px;background:currentColor}.mobile-menu{position:fixed;z-index:2;inset:0;padding:22px 20px;display:grid;grid-template-rows:auto 1fr auto;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(rgba(40,40,32,.07) .55px,transparent .55px);background-size:14px 14px;overflow:auto}.mobile-menu[hidden]{display:none}.mobile-menu-top{display:flex;justify-content:space-between}.mobile-menu-top>p{font:400 18px/1 var(--font-display)}.mobile-menu-top p span{font:600 var(--text-xs)/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase}.menu-close{display:flex;align-items:center;gap:12px;border:0;background:transparent}.menu-close span{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}.menu-close i{position:relative;width:19px;height:19px}.menu-close i::before,.menu-close i::after{content:"";position:absolute;left:0;top:9px;width:19px;height:1px;background:var(--ink);transform:rotate(45deg)}.menu-close i::after{transform:rotate(-45deg)}.mobile-menu nav{margin:40px 0;align-self:center;border-top:var(--border)}.mobile-menu nav a{min-height:78px;padding:12px 0;display:grid;grid-template-columns:34px 1fr auto;align-items:center;border-bottom:var(--border)}.mobile-menu nav small{align-self:start;padding-top:7px;color:var(--label);font-size:var(--text-xs)}.mobile-menu nav span{font:400 clamp(40px,13vw,62px)/.9 var(--font-display);letter-spacing:-.04em}.mobile-menu nav a[aria-current="page"] span{color:var(--cobalt);font-style:italic}.mobile-language{padding-top:16px;border-top:var(--border);font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}.mobile-language strong{color:var(--label)}.menu-pattern{position:absolute;right:0;top:20%;width:20px;height:155px;background:url('../patterns/P01_Gingham_Orange.svg') center/16px repeat}.site-footer{min-height:0;display:block}.footer-scene{height:70svh;min-height:560px}.footer-content{padding:65px 20px 25px}.footer-content>p{margin:42px 0;font-size:42px}.footer-nav{gap:28px}.footer-bottom{gap:20px}.site-footer>i{width:28px;height:90px}.footer-nav{grid-template-columns:1fr 1fr}}
@media(max-width:390px){.site-header>.book-link{display:none}.footer-nav{grid-template-columns:1fr}.footer-bottom{align-items:flex-start;flex-direction:column}.footer-nav{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.site-header,.brand img{transition:none}}

/* Labels on dark grounds */
.mio-threshold .eyebrow,.booking-scene>div>p,.house-chapter--cobalt .chapter-label,.house-next .chapter-label,.whole-book .chapter-label,.room-cta .brio-eyebrow,.site-footer .footer-nav span{color:var(--label-on-dark)}