/* Riad Azerwal: one stylesheet, phone first.
   Order: fonts, tokens, base, shared pieces, the three layouts, sections in page order, door page, motion.
   Colours are capped by the brief (§4): paper, chalk, ink, terracotta, mustard (on ink only), plus the tile band.
   --ink-2 and the translucent lines are ink mixed into paper, not new colours. */

/* ---------- Fonts (self-hosted, OFL; licences in /fonts) ---------- */
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Metric-matched fallbacks (measured with fontTools): the swap does not move the layout. */
@font-face {
  font-family: "Serif Fallback"; src: local("Georgia"), local("Times New Roman");
  size-adjust: 75.9%; ascent-override: 130.4%; descent-override: 40.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Sans Fallback"; src: local("Arial"), local("Helvetica");
  size-adjust: 100.4%; ascent-override: 96.6%; descent-override: 24.9%; line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #F6F4F5;       /* ground */
  --chalk: #E8E8EB;       /* quiet bands */
  --ink: #1B1918;         /* text, dark panels, bottom bar */
  --terracotta: #BE4844;  /* the sitting-room chapter and the main button (white text 5.0:1) */
  --mustard: #C68E3C;     /* accent, on ink only (6.1:1) */
  --white: #FFFFFF;
  --ink-2: #545252;       /* secondary text: ink at 74 % on paper (7.0:1 on paper, 6.3:1 on chalk) */
  --paper-2: rgb(246 244 245 / .74); /* secondary text on ink (8.9:1) */
  --line: rgb(27 25 24 / .16);
  --line-ink: rgb(246 244 245 / .2);  /* hairline on ink: paper at 20 % */
  --t1: #1C1F26; --t2: #C35946; --t3: #DDAA58; --t4: #F3EEE7; /* courtyard cement tiles */

  --serif: "Instrument Serif", "Serif Fallback", Georgia, serif;
  --sans: "Instrument Sans", "Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: .8125rem;                                   /* labels: 13 px */
  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);        /* body: 16 to 18 px */
  --step-1: clamp(1.125rem, 1.03rem + .42vw, 1.375rem);  /* lead: 18 to 22 px */
  --step-2: clamp(1.75rem, 1.32rem + 1.85vw, 3.125rem);  /* serif statements: 28 to 50 px */
  --step-3: clamp(2.625rem, 1.75rem + 3.7vw, 5.25rem);   /* H2: 42 to 84 px */
  --step-4: clamp(3.25rem, 1.6rem + 6.6vw, 8.5rem);      /* the display line: 52 to 136 px */
  --h1: clamp(2rem, 1.6rem + 1.75vw, 3.25rem);           /* H1: 32 to 52 px */

  --gutter: clamp(1rem, 4.2vw, 4rem);
  --gap: clamp(1rem, 2.2vw, 2rem);
  --max: 84rem;
  --section: clamp(5rem, 3rem + 9vw, 11rem);
  --head-h: 4.5rem;
  --bar-h: 3.75rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: 1rem;
  scroll-padding-bottom: calc(var(--bar-h) + 1rem);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure, h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.band--ink :focus-visible, .site-foot :focus-visible, .bar :focus-visible { outline-color: var(--mustard); }
.chapter--salon :focus-visible { outline-color: var(--white); }
::selection { background: var(--ink); color: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
@media (min-width: 48em) { html { scroll-padding-top: calc(var(--head-h) + 1rem); scroll-padding-bottom: 1rem; } }

/* ---------- Shared pieces ---------- */
.skip {
  position: absolute; left: 1rem; top: -10rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem; font-weight: 600;
}
.skip:focus { top: 1rem; }

.ribbon {
  background: var(--chalk); color: var(--ink);
  font-size: .75rem; line-height: 1.3; letter-spacing: .01em; text-align: center;
  padding: .4rem var(--gutter);
}

/* The one ornament: the courtyard's colour-block cement tiles, drawn in CSS. */
.tiles {
  display: block; height: 6px;
  background:
    linear-gradient(90deg, var(--t1) 0 14%, var(--t2) 0 19%, var(--t3) 0 31%, var(--t1) 0 34%, var(--t4) 0 38%,
      var(--t2) 0 52%, var(--t3) 0 56%, var(--t1) 0 70%, var(--t3) 0 81%, var(--t4) 0 84%, var(--t2) 0 91%, var(--t1) 0 100%) 0 0 / 17rem 100% repeat-x;
}
.tiles--top { height: 5px; }
.tiles--mark { width: 5.5rem; background-size: 8.5rem 100%; }
.tiles--foot { height: 8px; }

.wordmark {
  font-family: var(--serif); font-weight: 400; font-size: 1.625rem; line-height: 1;
  letter-spacing: -.005em; text-decoration: none; color: inherit; white-space: nowrap;
}
.site-head .wordmark { display: inline-flex; align-items: center; min-height: 2.75rem; } /* touch target of 44 px */

.kicker {
  display: flex; gap: .875rem; align-items: baseline;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.kicker__num { color: var(--ink); font-variant-numeric: tabular-nums; }
.h2 {
  font-family: var(--serif); font-weight: 400; font-size: var(--step-3);
  line-height: .98; letter-spacing: -.015em; text-wrap: balance;
}
.chap-head { margin-bottom: clamp(2.25rem, 5vw, 4.5rem); }
.chap-head .tiles--mark { margin-bottom: 1.5rem; }
.chap-head .kicker { margin-bottom: .875rem; }
.statement {
  font-family: var(--serif); font-weight: 400; font-size: var(--step-2);
  line-height: 1.1; letter-spacing: -.005em; text-wrap: balance; max-width: 22em;
}
.lead { font-size: var(--step-1); line-height: 1.5; max-width: 34rem; text-wrap: pretty; }
.caption { margin-top: .75rem; font-size: .875rem; line-height: 1.45; color: var(--ink-2); max-width: 40ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.5rem;
  background: var(--terracotta); color: var(--white);
  font: 600 1rem/1.1 var(--sans); letter-spacing: .005em; text-decoration: none; text-align: center;
  border: 0; border-radius: 0; cursor: pointer;
}
.btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.btn--sm { min-height: 2.75rem; padding: 0 1.125rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn[disabled] { cursor: progress; opacity: .8; }

.lang { display: flex; align-items: center; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; min-height: 2.75rem; text-decoration: none; color: var(--ink-2);
}
.lang a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .4em; }
.lang__sep { color: var(--ink-2); }

/* ---------- Header ---------- */
.site-head { position: relative; z-index: 30; background: var(--paper); }
.site-head__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; }
.site-head__end { display: flex; align-items: center; gap: 1.25rem; margin-right: -.5rem; }
.runhead, .site-head__cta { display: none; }
@media (min-width: 48em) {
  .site-head { position: sticky; top: 0; border-bottom: 1px solid var(--line); }
  .site-head__in { min-height: var(--head-h); }
  .site-head__end { margin-right: 0; }
  .site-head__cta { display: inline-flex; }
  .runhead {
    position: absolute; left: 50%; translate: -50% 0;
    display: flex; gap: .75rem; align-items: baseline;
    font-size: var(--step--1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  }
  .runhead__num { color: var(--ink); font-variant-numeric: tabular-nums; }
  .runhead[data-state="home"] { visibility: hidden; }
}
@media (min-width: 48em) and (max-width: 63.99em) { .runhead { display: none; } }

/* ---------- Layouts (three only) ---------- */
/* .l-full : photo across the content width, text below.
   .l-side : photo and text side by side, asymmetric (12-column grid from 48em).
   .l-text : text only. */
.l-full__media img, .l-side img { width: 100%; }
@media (min-width: 48em) {
  .l-side { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
}

/* ---------- 1. First screen ---------- */
.hero__photo img { width: 100%; }
.hero__text { padding: 1.5rem var(--gutter) 0; }
.hero__h1 {
  font-family: var(--serif); font-weight: 400; font-size: var(--h1);
  line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; max-width: 14em;
}
.hero__display {
  margin-top: .375em;
  font-family: var(--serif); font-size: var(--step-4);
  line-height: .9; letter-spacing: -.025em; text-wrap: balance;
}
.facts {
  display: flex; flex-wrap: wrap; gap: .25rem 1.375rem;
  margin-top: 2rem; padding-block: .9rem;
  border-block: 1px solid var(--ink);
  font-size: .9375rem; font-weight: 500; line-height: 1.5;
}
.facts li { display: inline-flex; align-items: baseline; gap: .55rem; white-space: nowrap; }
.facts li::before { content: ""; flex: none; width: .4375rem; height: .4375rem; background: var(--ink); translate: 0 -.12em; }
.hero__cta { display: none; }
@media (min-width: 48em) {
  .hero {
    display: grid;
    grid-template-columns: var(--gutter) minmax(0, 5.2fr) calc(var(--gap) * 2) minmax(0, 6.8fr);
    min-height: min(calc(100svh - var(--head-h) - 2rem), 62rem, 78vw);
  }
  .hero__photo { grid-column: 4; grid-row: 1; position: relative; min-height: 32rem; }
  .hero__photo picture, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero__text { grid-column: 2; grid-row: 1; align-self: end; padding: 3rem 0 clamp(2.5rem, 7vh, 5rem); }
  .hero__cta { display: inline-flex; margin-top: 2rem; }
  /* The display line is capped by the text column (7.3vw: « And nobody else » fits on one line beside the
     photo) and by the screen height (11.5vh: the button stays on the first screen of a 1280 x 720 laptop). */
  .hero__display { font-size: clamp(3.25rem, min(1.6rem + 6.6vw, 7.3vw, 11.5vh), 8.5rem); }
}
@media (min-width: 48em) and (max-height: 780px) {
  .hero__text { padding-block: 2rem; }
  .facts { margin-top: 1.5rem; }
  .hero__cta { margin-top: 1.5rem; }
}
/* Short phones (390 x 660 with browser bars, 360 x 640): a shorter photo so the display line clears the bar.
   From 700 px of height up (390 x 844 included) the 5:4 crop stays as it is. */
@media (max-width: 47.99em) and (max-height: 700px) {
  .hero__photo img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 60%; }
  .hero__text { padding-top: 1rem; }
}

/* ---------- Chapters ---------- */
.chapter { padding-block: var(--section); }
.chapter + .chapter:not(.chapter--salon) { padding-top: 0; }
/* After the terracotta block the next chapter needs its own air back. Same specificity as the rule above
   (0,3,0) and later in the file, so it wins. */
.chapter.chapter--salon + .chapter { padding-top: var(--section); }

/* 01 The courtyard: the door */
.door { display: grid; justify-items: center; gap: clamp(2.25rem, 5vw, 4rem); }
.door__frame { width: min(100%, 38rem); background: var(--ink); }
.door .statement { text-align: center; max-width: 19em; }
.l-side--patio { margin-top: clamp(4rem, 9vw, 8rem); row-gap: 1.75rem; }
.aside { font-size: var(--step-1); line-height: 1.45; max-width: 19rem; padding-left: 1rem; border-left: 2px solid var(--ink); }
@media (max-width: 47.99em) { .l-side--patio .l-side__text { margin-top: 2.25rem; } }
@media (min-width: 48em) {
  .l-side--patio { align-items: end; }
  .l-side--patio .l-side__media { grid-column: 6 / span 6; grid-row: 1; }
  .l-side--patio .l-side__text { grid-column: 1 / span 4; grid-row: 1; padding-bottom: 3.5rem; }
}

/* 02 The sitting room: the single colour event */
.chapter--salon { background: var(--terracotta); color: var(--white); }
.chapter--salon .kicker, .chapter--salon .kicker__num, .chapter--salon .caption { color: var(--white); }
.l-side--salon { display: grid; row-gap: 2rem; }
.l-side--salon .statement { max-width: 15em; }
.salon__b { width: 72%; justify-self: end; }
@media (min-width: 48em) {
  .l-side--salon { row-gap: 0; }
  .l-side--salon .l-side__text { grid-column: 1 / span 5; grid-row: 1; }
  .salon__a { grid-column: 7 / span 6; grid-row: 1 / span 2; }
  .salon__b { grid-column: 2 / span 4; grid-row: 2; width: auto; justify-self: stretch; align-self: end; margin-top: 4rem; }
}

/* 03 The bedrooms: who sleeps where */
.plan { margin-top: .5rem; }
.plan__rooms { display: grid; grid-template-columns: auto auto; justify-content: start; row-gap: 2rem; }
.plan__room { display: flex; flex-direction: column; gap: .875rem; padding-inline: 1.25rem; border-left: 1px solid var(--ink); }
.plan__room:nth-child(odd) { padding-left: 0; border-left: 0; }
/* One square per place. A single bed is a square on its own; a queen bed is two squares joined by a hairline
   seam, so it reads as one bed for two. The gap between separate beds is wide enough to tell them apart. */
.marks { --m: 1.75rem; display: flex; gap: calc(var(--m) * .42); }
.m { display: block; flex: none; width: var(--m); height: var(--m); background: var(--ink); }
.m--q { width: calc(var(--m) * 2 + 2px); background: linear-gradient(90deg, var(--ink) 0 calc(50% - 1px), transparent 0 calc(50% + 1px), var(--ink) 0); }
.plan__name { font-size: var(--step--1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.plan__tag { margin-top: -.625rem; font-size: .875rem; color: var(--ink-2); }
.plan__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 2rem; font-size: .875rem; color: var(--ink-2); }
.plan__legend > span { display: inline-flex; align-items: center; gap: .625rem; }
.plan .marks.marks--key { --m: .75rem; gap: 0; }
.plan__lead { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 17em; }
.plan__common { margin-top: 1.25rem; color: var(--ink-2); }
@media (min-width: 40em) {
  .plan__rooms { grid-template-columns: repeat(4, auto); }
  .plan__room { padding-inline: clamp(1.25rem, 3.4vw, 3.5rem); }
  .plan__room:nth-child(odd) { padding-left: clamp(1.25rem, 3.4vw, 3.5rem); border-left: 1px solid var(--ink); }
  .plan__room:first-child { padding-left: 0; border-left: 0; }
  .plan__room:last-child { padding-right: 0; }
  .plan .marks { --m: clamp(1.75rem, 4.6vw, 4.5rem); }
}

.rooms { display: grid; gap: 3rem var(--gap); margin-top: clamp(3.5rem, 7vw, 6rem); }
.room { display: grid; gap: .5rem; align-content: start; }
.room__photo { margin-bottom: .75rem; }
.room__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 1.5rem + .9vw, 2.25rem); line-height: 1.05; }
.room__tag { display: block; font-family: var(--sans); font-size: .9375rem; line-height: 1.3; color: var(--ink-2); margin-top: .25rem; }
.room__beds { font-weight: 600; }
.room__detail { font-size: .9375rem; color: var(--ink-2); max-width: 30ch; }
@media (min-width: 48em) { .rooms { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) {
  .rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; }
  .room { grid-row: span 4; grid-template-rows: subgrid; row-gap: .5rem; }
}

.baths { margin-top: clamp(4rem, 8vw, 7rem); }
.baths__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.baths__caption { margin-top: 1rem; }
/* Narrower and set to the right (columns 6 to 12, no edge near a card edge), with the caption on the left as on
   the photos page, so the four bathrooms never sit under the four bedroom cards one for one (which bathroom goes
   with which bedroom is not known: brief §3.4). */
@media (min-width: 48em) {
  .baths { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .baths__grid { grid-column: 6 / -1; grid-row: 1; grid-template-columns: repeat(4, 1fr); }
  .baths__caption { grid-column: 1 / span 4; grid-row: 1; margin: 0; }
}

/* 04 The roof terrace */
.l-full .statement { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.trio { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: clamp(3rem, 7vw, 6rem); }
.trio__a { grid-column: 1 / -1; }
.trio img { width: 100%; }
@media (min-width: 48em) {
  .trio { grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
  .trio__a { grid-column: auto; }
  .trio li:nth-child(2) { margin-top: 4rem; }
  .trio li:nth-child(3) { margin-top: 8rem; }
}
/* "Every photo, room by room": a quiet text link closing a chapter. */
.more { margin-top: clamp(2.5rem, 5vw, 4rem); font-weight: 600; }
.more a { display: inline-block; padding-block: .625rem; text-underline-offset: .35em; }

/* ---------- Chaïma and the two lists (chalk band) ---------- */
.band { padding-block: var(--section); }
.band--chalk { background: var(--chalk); }
.chaima { display: grid; gap: 1.5rem; }
.chaima__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(5.5rem, 2rem + 16vw, 16rem); line-height: .82; letter-spacing: -.035em;
}
.chaima__role { font-size: var(--step--1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.chaima__text { margin-top: 1rem; font-family: var(--serif); font-size: var(--step-2); line-height: 1.12; max-width: 17em; text-wrap: pretty; }
@media (min-width: 64em) {
  .chaima { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .chaima__name { grid-column: 1 / span 6; }
  .chaima__body { grid-column: 7 / span 6; padding-bottom: .75rem; }
}
.lists { display: grid; gap: 3.5rem; margin-top: clamp(4.5rem, 9vw, 8rem); }
.list__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); line-height: 1.05;
  padding-bottom: 1rem; border-bottom: 1px solid var(--ink);
}
.list__items li {
  display: flex; gap: 1rem; align-items: baseline;
  padding-block: .9rem; border-bottom: 1px solid var(--line);
}
.list__items li::before { content: ""; flex: none; width: .625rem; height: .625rem; background: var(--ink); translate: 0 -.05em; }
.list__items--extra li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (min-width: 48em) { .lists { grid-template-columns: 1fr 1fr; column-gap: calc(var(--gap) * 2); } }

/* ---------- Good to know ---------- */
.good { display: grid; gap: 2.5rem; }
.good__row { display: grid; gap: .375rem; padding-block: 1.25rem 1.4rem; border-top: 1px solid var(--ink); }
.good__row:last-child { border-bottom: 1px solid var(--ink); }
.good dt { font-weight: 600; }
.good dd { max-width: 38rem; text-wrap: pretty; }
@media (min-width: 48em) { .good__row { grid-template-columns: minmax(9rem, 1fr) 2.6fr; column-gap: var(--gap); } }
@media (min-width: 64em) {
  .good { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .good .h2 { grid-column: 1 / span 4; position: sticky; top: calc(var(--head-h) + 2rem); }
  .good__list { grid-column: 5 / span 8; }
}

/* ---------- In their words ---------- */
.kicker--h { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.quotes { display: grid; gap: clamp(3rem, 7vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.quote p {
  font-family: var(--serif); font-size: var(--step-3); line-height: 1; letter-spacing: -.015em; text-wrap: balance;
}
.quote figcaption { margin-top: 1.25rem; font-size: .9375rem; color: var(--ink-2); max-width: 36ch; }
.review-line {
  margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 1.25rem; border-top: 1px solid var(--ink);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
@media (min-width: 64em) {
  .quotes { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .quote--a { grid-column: 1 / span 7; }
  .quote--b { grid-column: 6 / span 7; }
}

/* ---------- Check availability (ink) ---------- */
.band--ink { background: var(--ink); color: var(--paper); }
.request__grid { display: grid; gap: 2.5rem; }
.request .lead { margin-top: 1.5rem; }
.request__note { margin-top: 1.25rem; font-size: .9375rem; color: var(--paper-2); max-width: 30rem; padding-left: 1rem; border-left: 2px solid var(--mustard); }
@media (min-width: 64em) {
  .request__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .request__intro { grid-column: 1 / span 5; }
  .request__slot { grid-column: 7 / span 6; }
}
.lodgify-slot { min-height: var(--slot-phone, 40rem); }
@media (min-width: 48em) { .lodgify-slot { min-height: var(--slot-desktop, 34rem); } }
.lodgify-slot[hidden] { display: none; }

.form { display: grid; gap: 1.375rem; }
.form__row { display: grid; gap: 1.375rem; }
@media (min-width: 30em) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.field label { font-size: .9375rem; font-weight: 600; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-width: 0; min-height: 3.25rem; padding: .75rem .875rem;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ink);
  background: var(--paper); border: 0; border-radius: 0; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.field select {
  padding-right: 2.5rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 55%, calc(100% - .85rem) 55%;
  background-size: .36rem .36rem; background-repeat: no-repeat;
}
.field input[type="date"] { min-height: 3.25rem; }
.field input::-webkit-date-and-time-value { text-align: left; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--mustard); outline-offset: 2px; }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--mustard); }
.field__hint { font-size: .875rem; color: var(--paper-2); }
.field__error { font-size: .9375rem; font-weight: 600; color: var(--mustard); }
.form__summary { padding: .75rem 1rem; border: 1px solid var(--mustard); color: var(--mustard); font-weight: 600; }
.form__hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.form__end { margin-top: .5rem; }
.form__after { margin-top: .875rem; font-size: .9375rem; color: var(--paper-2); text-align: center; text-wrap: balance; }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); color: var(--paper); }
.band--ink + .site-foot, main:has(> .band--ink:last-child) + .site-foot { border-top: 1px solid rgb(246 244 245 / .14); }
.site-foot__in { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 5rem); }
.wordmark--foot { font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.site-foot__place { margin-top: .75rem; color: var(--paper-2); }
.site-foot__links { display: grid; gap: 1rem; justify-items: start; }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9375rem; }
.site-foot__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; } /* touch target of 44 px */
.site-foot .lang { margin-left: -.5rem; }
.site-foot .lang a { color: var(--paper-2); }
.site-foot .lang a[aria-current] { color: var(--paper); }
.site-foot .lang__sep { color: var(--paper-2); }
.placeholder { color: var(--mustard); font-size: .875rem; }
@media (min-width: 48em) {
  .site-foot__in { grid-template-columns: 1fr auto; align-items: end; }
  .site-foot__links { justify-items: end; text-align: right; }
  .site-foot .lang { margin-left: 0; margin-right: -.5rem; }
}

/* ---------- Phone bar ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)) var(--gutter);
  background: var(--ink); color: var(--paper);
  transition: transform .3s ease, visibility 0s;
}
.bar.is-hidden { transform: translateY(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; }
.bar__chapter { display: flex; align-items: baseline; gap: .55rem; min-width: 0; font-size: .9375rem; line-height: 1.2; }
.bar__num { font-weight: 600; color: var(--mustard); font-variant-numeric: tabular-nums; }
.bar__num:empty { display: none; }
.bar__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__chapter[data-state="home"] .bar__name { font-family: var(--serif); font-size: 1.375rem; }
.bar__btn { flex: none; min-height: 2.75rem; padding: 0 1rem; font-size: .9375rem; }
@media (max-width: 47.99em) { .has-bar .site-foot__in { padding-bottom: calc(var(--bar-h) + 3rem + env(safe-area-inset-bottom)); } }
@media (min-width: 48em) { .bar { display: none; } }

/* ---------- Photos page ---------- */
.gal-intro { padding-block: clamp(2.75rem, 1rem + 4vw, 4.5rem) clamp(1.75rem, 3vw, 2.75rem); }
.gal-intro .tiles--mark { margin-bottom: 1.5rem; }
.gal-intro__h1 {
  font-family: var(--serif); font-weight: 400; font-size: var(--step-3);
  line-height: .98; letter-spacing: -.015em; text-wrap: balance; max-width: 10em;
}
.gal-intro__lead { margin-top: 1.125rem; font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 30rem; text-wrap: pretty; }
@media (min-width: 64em) {
  .gal-intro .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .gal-intro .tiles--mark { grid-column: 1 / -1; }
  .gal-intro__h1 { grid-column: 1 / span 8; max-width: none; }
  .gal-intro__lead { grid-column: 9 / span 4; margin: 0 0 .5rem; font-size: var(--step-0); }
}
.chips + .room-gal { margin-top: clamp(2rem, 4vw, 3rem); }

/* Room chips: one row, sticky; on a phone the row scrolls sideways, never the page. */
.chips { position: sticky; top: 0; z-index: 25; background: var(--paper); border-block: 1px solid var(--line); }
.chips__row {
  display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: .625rem var(--gutter);
}
.chips__row::-webkit-scrollbar { display: none; }
.chips li { flex: none; }
.chips a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 .875rem;
  border: 1px solid var(--ink); font-size: .875rem; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.chips a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.chips a[aria-current="true"] { background: var(--ink); color: var(--paper); }
html:has(.chips) { scroll-padding-top: 5.25rem; }
@media (min-width: 48em) {
  .chips { top: calc(var(--head-h) + 1px); }
  html:has(.chips) { scroll-padding-top: calc(var(--head-h) + 5.25rem); }
}
@media (min-width: 64em) {
  .chips__row { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-inline: 0; }
}

/* Margin, not padding: an anchor (/fr/photos/#chambre-2) lands on the room's hairline, under the chips. */
.room-gal { margin-top: clamp(2.75rem, 1.5rem + 4vw, 6rem); }
.room-gal__head { padding-top: 1rem; border-top: 1px solid var(--ink); margin-bottom: 1.5rem; }
.room-gal__title { font-family: var(--serif); font-weight: 400; font-size: var(--step-2); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.room-gal__caption { margin-top: .625rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); max-width: 34ch; text-wrap: pretty; }
/* Phone: one column, edge to edge, 6 px apart like a wall of tiles. */
.gal { display: grid; gap: 6px; margin-inline: calc(-1 * var(--gutter)); }
.gal img { width: 100%; background: var(--chalk); }
.gal__caption { margin-top: .5rem; padding-inline: var(--gutter); }
@media (min-width: 48em) {
  .gal { grid-template-columns: 1fr 1fr; gap: .75rem; margin-inline: 0; }
  .gal__item--large { grid-column: 1 / -1; }
  .gal__caption { padding-inline: 0; }
}
@media (min-width: 64em) {
  .room-gal__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .room-gal__head { grid-column: 1 / span 3; margin: 0; position: sticky; top: calc(var(--head-h) + 6rem); }
  .gal { grid-column: 4 / span 9; }
}

.gal-end { padding-block: var(--section); }
.gal-end__in { display: grid; gap: 2.25rem; justify-items: start; padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--ink); }
.gal-end__line { font-family: var(--serif); font-size: var(--h1); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; max-width: 14em; }
.gal-end__display { display: block; margin-top: .3em; font-size: calc(var(--step-4) * .78); line-height: .92; letter-spacing: -.025em; }

/* ---------- Thank-you page (ink, after the ink request section) ---------- */
.thanks { padding-block: clamp(3.5rem, 2rem + 7vw, 8rem); }
.thanks__grid { display: grid; gap: 3rem; align-items: center; }
.kicker--ink { color: var(--paper-2); }
.thanks__h1 {
  margin-top: .875rem; font-family: var(--serif); font-weight: 400; font-size: var(--step-3);
  line-height: .98; letter-spacing: -.015em; text-wrap: balance; max-width: 10em;
}
.thanks__local {
  margin-bottom: 2rem; padding-left: 1rem; border-left: 2px solid var(--mustard);
  color: var(--mustard); font-weight: 600; font-size: .9375rem; max-width: 30rem;
}
.thanks__lead { margin-top: 1.5rem; }
.recap { margin-top: 2.5rem; max-width: 30rem; }
.recap__title { font-size: var(--step--1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-2); }
.recap__list { margin-top: .75rem; border-top: 1px solid var(--line-ink); }
.recap__list > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--line-ink); font-size: .9375rem; }
@media (min-width: 30em) { .recap__list > div { grid-template-columns: 8rem 1fr; font-size: var(--step-0); } }
.recap dt { color: var(--paper-2); }
.recap dd::first-letter { text-transform: uppercase; }
.thanks__links { display: flex; flex-wrap: wrap; gap: .25rem 2rem; margin-top: 2.5rem; font-weight: 600; }
.thanks__links a { display: inline-block; padding-block: .625rem; text-underline-offset: .35em; }
.thanks__photo { width: min(64%, 20rem); justify-self: end; }
@media (min-width: 48em) {
  .thanks__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .thanks__text { grid-column: 1 / span 7; }
  .thanks__photo { grid-column: 9 / span 4; width: auto; justify-self: stretch; }
}

/* ---------- 404 (both languages, one line and the button each) ---------- */
.page-nf { min-height: 100svh; display: flex; flex-direction: column; }
.site-head--plain { position: static; }
.nf { flex: 1; display: grid; align-items: start; padding-block: clamp(3.5rem, 12vh, 8rem); }
.nf__grid { display: grid; gap: 3rem; }
.nf__block { display: grid; gap: 1.75rem; justify-items: start; align-content: start; }
.nf__line { font-family: var(--serif); font-weight: 400; font-size: clamp(2.625rem, 1.75rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.nf__block + .nf__block { padding-top: 3rem; border-top: 1px solid var(--ink); }
@media (min-width: 48em) {
  .nf { align-items: center; }
  .nf__grid { grid-template-columns: 1fr 1fr; column-gap: 0; }
  .nf__block { padding-right: calc(var(--gap) * 2); }
  .nf__block + .nf__block { padding: 0 0 0 calc(var(--gap) * 2); border-top: 0; border-left: 1px solid var(--ink); }
}

/* ---------- Language door ---------- */
.page-door { min-height: 100svh; display: flex; flex-direction: column; }
.doorway {
  flex: 1; display: grid; justify-items: center; align-content: center;
  gap: clamp(1.5rem, 4vh, 2.75rem); padding: clamp(2rem, 6vh, 4rem) var(--gutter);
}
.doorway__name { font-size: clamp(2.75rem, 2rem + 3vw, 4.75rem); }
.doorway__photo { width: min(78vw, 25rem, calc((100svh - 19rem) * .8)); }
.doorway__langs { display: flex; gap: clamp(2rem, 6vw, 3.5rem); }
.doorway__langs a {
  display: inline-flex; align-items: center; min-height: 3rem;
  font-family: var(--serif); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}

/* ---------- Motion: CSS only, off when reduced motion is asked, skipped where unsupported ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @supports (animation-timeline: view()) {
    /* The door: the courtyard photo opens like the house's black double doors.
       Fully open before its centre reaches the centre of the screen (range ends at cover 40 %).
       site.js adds .is-open once it has been fully open, so it never closes again. */
    [data-door] img { animation: door-open linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    [data-door].is-open img { animation: none; }
    /* Quiet rise of blocks as they enter: over a fixed 9rem of scroll, the same for a tall block and a short
       one, so a block is fully there once its top is a little way into the screen. */
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 9rem; }
  }
}
/* The phone bar slides in and out; under reduced motion it simply appears and disappears. */
@media (prefers-reduced-motion: reduce) { .bar, .bar.is-hidden { transition: none; } }
@keyframes door-open { from { clip-path: inset(0 45% 0 45%); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }