/* ─────────────────────────────────────────────────────────────
   MAISON PORTUGAL — the editorial system
   Warm ivory ground, near-black type, a high-contrast serif for
   display, thin rules, square corners, one dark rectangular CTA.
   Loaded by every page built from blocks; site.css keeps the old
   INDIGO chrome until the redesign is switched on everywhere.
   ───────────────────────────────────────────────────────────── */

.mp{
  /* ground and ink */
  --mp-ivory:#f7f3ec;         /* the page */
  --mp-ivory-2:#efe9df;       /* a band that needs to separate */
  --mp-ink:#15120e;           /* headings, the dark CTA */
  --mp-body:#3f3931;          /* running text */
  --mp-mute:#857c70;          /* metadata, eyebrows */
  --mp-rule:#ddd4c6;          /* hairlines */
  --mp-ink-soft:rgba(21,18,14,.62);

  /* type.
     Gabriela for display: an old-style serif with a calm, slightly narrow
     capital, which is what the references are set in. It ships one weight
     (400), so nothing here asks for a bolder one — the headings get their
     authority from size, tracking and the uppercase, not from weight. The
     panel can put another face in its place; see chromeCss(). */
  --mp-display:'Gabriela',Didot,Georgia,'Times New Roman',serif;
  --mp-ui:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mp-script:'Parisienne','Snell Roundhand','Brush Script MT',cursive;

  /* rhythm */
  --mp-wrap:1320px;
  --mp-gut:clamp(18px,4vw,52px);

  background:var(--mp-ivory);
  color:var(--mp-body);
  font-family:var(--mp-ui);
  font-size:15px;
  line-height:1.62;

  /* ── the old names, pointing at the new palette ──────────
     Two pages are long-form records rather than compositions — a legal
     document and one person's page — and their stylesheets carry layout
     worth keeping (the portfolio's justified grid is real arithmetic).
     They are loaded as they are and re-coloured from here instead of being
     rewritten: every token site.css defines is redefined inside .mp, so a
     rule written for the navy ground comes out on the ivory one. */
  --ink:#f7f3ec; --ink-2:#efe9df; --navy:#efe9df;
  --cream:#15120e; --slate:#15120e;
  --gold:#15120e; --gold-hi:#3f3931; --gold-deep:#857c70;
  --blue:#15120e; --blue-hi:#3f3931; --select:#ddd4c6;
  --gutter:var(--mp-gut); --wrap:var(--mp-wrap);
  --serif:var(--mp-display); --sans:var(--mp-ui);
}
.mp *,.mp *::before,.mp *::after{box-sizing:border-box}
.mp img,.mp video{display:block;max-width:100%}
/* Weightless on purpose: a bare `.mp a` outranked every single-class link
   style (.mp__btn--light and the rest), so buttons took the text colour of
   whatever they sat in — dark ink on the dark hero. */
:where(.mp) a{color:inherit;text-decoration:none}
.mp :focus-visible{outline:2px solid var(--mp-ink);outline-offset:3px}

/* ── shared type ─────────────────────────────────────── */
.mp h1,.mp h2,.mp h3{
  font-family:var(--mp-display);font-weight:400;color:var(--mp-ink);
  margin:0;line-height:1.02;letter-spacing:.005em;
}
.mp h1{font-size:clamp(38px,5.6vw,74px);text-transform:uppercase}
.mp h2{font-size:clamp(28px,3.8vw,50px);text-transform:uppercase}
.mp h3{font-size:clamp(17px,1.5vw,21px)}
.mp p{margin:0}
.mp__eyebrow{
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--mp-mute);margin:0 0 14px;
}
.mp__script{
  font-family:var(--mp-script);font-size:clamp(21px,2.4vw,32px);
  line-height:1.16;color:var(--mp-ink);letter-spacing:.01em;
}
.mp__lede{font-size:clamp(14px,1.15vw,16px);line-height:1.72;color:var(--mp-body);max-width:46ch}
.mp__italic{font-family:var(--mp-display);font-style:italic;font-size:clamp(15px,1.5vw,20px);color:var(--mp-body)}

/* the one button, and its quiet sibling */
.mp__btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--mp-ink);color:var(--mp-ivory);
  padding:15px 28px;border:1px solid var(--mp-ink);
  font-family:var(--mp-ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;transition:background .32s ease,color .32s ease;
}
.mp__btn:hover{background:transparent;color:var(--mp-ink)}
.mp__btn--ghost{background:transparent;color:var(--mp-ink)}
.mp__btn--ghost:hover{background:var(--mp-ink);color:var(--mp-ivory)}
/* The button that sits on a photograph — the hero's and the closing plate's.
   Solid, not translucent.
   It was a transparent outline: 11px letters tracked out to .22em, in white,
   with a one-pixel border at 70% opacity. Over a dark frame that reads; over a
   bright one — pale skin, sky, the blue of a look — it disappears, which is
   what happened to START YOUR EXPERIENCE on the homepage plate. The panel can
   put any photograph behind it, so it cannot depend on the photograph.

   It carries its own ground now. A translucent fill was tried first and was
   still too close to the photograph underneath; the design system asks for a
   "dark filled rectangular primary CTA" anyway, so it is filled. The light
   border and the shadow keep the edge off a dark crop, and it still inverts
   to solid white on hover. */
.mp__btn--light{
  background:var(--mp-ink);
  color:#fff;border-color:rgba(255,255,255,.72);
  box-shadow:0 2px 20px rgba(12,10,8,.34);
}
.mp__btn--light:hover{background:#fff;color:var(--mp-ink);border-color:#fff}
.mp__link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mp-ink);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s ease;
}
.mp__link:hover{border-bottom-color:var(--mp-ink)}

.mp__wrap{max-width:var(--mp-wrap);margin:0 auto;padding-inline:var(--mp-gut)}

/* ── masthead ────────────────────────────────────────── */
.mp-bar{
  position:sticky;top:0;z-index:40;background:var(--mp-ivory);
  border-bottom:1px solid var(--mp-rule);
}
.mp-bar__in{
  max-width:var(--mp-wrap);margin:0 auto;padding:14px var(--mp-gut);
  display:flex;align-items:center;gap:clamp(14px,3vw,44px);
}
.mp-mark{display:block;flex:0 0 auto;line-height:1;text-align:center}
/* With the house mark present the two sit side by side, the monogram first.
   Gabriela ships one weight, so the wordmark asks for 400 rather than the 500
   it used to: a face with no bold gets a synthetic one from the browser, and
   a smeared wordmark is the first thing anybody would notice. */
.mp-mark--logo{display:flex;align-items:center;gap:clamp(9px,1vw,14px)}
.mp-mark__logo{
  height:clamp(30px,3.4vw,44px);width:auto;flex:0 0 auto;
  /* the monogram is a gold gradient on transparency — nothing to fit inside */
  object-fit:contain;
}
.mp-mark__words{display:block}
.mp-mark b{
  display:block;font-family:var(--mp-display);font-weight:400;
  font-size:clamp(19px,2.1vw,27px);letter-spacing:.2em;color:var(--mp-ink);text-transform:uppercase;
}
.mp-mark span{
  display:block;font-size:8.5px;letter-spacing:.44em;text-transform:uppercase;
  color:var(--mp-mute);margin-top:4px;padding-inline-start:.44em;
}
/* In the footer the pair is set flush left rather than centred under itself. */
.mp-foot .mp-mark{text-align:start}
.mp-nav{display:flex;gap:clamp(16px,2.4vw,36px);margin-inline:auto}
.mp-nav a{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mp-ink);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .3s ease;white-space:nowrap;
}
.mp-nav a:hover,.mp-nav a[aria-current]{border-bottom-color:var(--mp-ink)}
.mp-bar__act{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);flex:0 0 auto}
.mp-bar .mp__btn{padding:12px 26px}
.mp-lang{display:flex;gap:9px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mp-mute)}
.mp-lang a[aria-current]{color:var(--mp-ink)}
.mp-burger{display:none;width:40px;height:40px;padding:0;background:none;border:1px solid var(--mp-rule);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.mp-burger span{display:block;width:17px;height:1px;background:var(--mp-ink);transition:transform .3s ease,opacity .2s ease}
.mp-burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mp-burger.is-open span:nth-child(2){opacity:0}
.mp-burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── hero ────────────────────────────────────────────── */
.mp-hero{position:relative;min-height:clamp(440px,76vh,760px);display:flex;align-items:center;overflow:hidden;background:var(--mp-ink)}
.mp-hero__bg,.mp-hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-hero__film{opacity:0;transition:opacity 1.2s ease}
.mp-hero__film.is-on{opacity:1}
.mp-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,10,8,.72) 0%,rgba(12,10,8,.42) 38%,rgba(12,10,8,.06) 72%);
}
.mp-hero__in{position:relative;z-index:2;max-width:var(--mp-wrap);margin:0 auto;width:100%;
  padding:clamp(52px,9vw,96px) var(--mp-gut)}
.mp-hero h1{color:#fff;max-width:14ch;text-shadow:0 2px 34px rgba(0,0,0,.28)}
.mp-hero .mp__eyebrow{color:rgba(255,255,255,.78)}
.mp-hero__lede{
  margin:clamp(18px,2.4vw,26px) 0 clamp(24px,3vw,34px);max-width:42ch;color:rgba(255,255,255,.92);
  font-family:var(--mp-display);font-style:italic;font-size:clamp(15px,1.5vw,19px);line-height:1.6;
}
.mp-hero__note{
  position:absolute;z-index:2;right:var(--mp-gut);bottom:clamp(34px,6vw,74px);
  color:#fff;text-align:right;max-width:9ch;transform:rotate(-6deg);
  text-shadow:0 2px 22px rgba(0,0,0,.4);
}

/* ── the experience rail ─────────────────────────────── */
.mp-rail{padding:clamp(40px,6vw,76px) 0 clamp(34px,5vw,60px)}
.mp-rail__head{
  max-width:var(--mp-wrap);margin:0 auto;padding-inline:var(--mp-gut);
  display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px);
}
.mp-rail__head h2{flex:1 1 auto}
.mp-rail__note{font-family:var(--mp-display);font-style:italic;color:var(--mp-mute);font-size:14px;flex:0 1 auto}
.mp-rail__nav{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mp-rail__count{font-size:10.5px;letter-spacing:.2em;color:var(--mp-mute);margin-inline-end:6px}
.mp-round{
  width:42px;height:42px;border:1px solid var(--mp-rule);background:none;border-radius:50%;
  color:var(--mp-ink);cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s;
}
.mp-round:hover{border-color:var(--mp-ink);background:rgba(21,18,14,.04)}
.mp-round[disabled]{opacity:.32;cursor:default}
.mp-rail__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);
  gap:clamp(8px,1vw,14px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--mp-gut);scrollbar-width:none;
}
.mp-rail__track::-webkit-scrollbar{display:none}
.mp-card{position:relative;display:block;scroll-snap-align:start;overflow:hidden;background:var(--mp-ivory-2)}
.mp-card img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.mp-card:hover img{transform:scale(1.045)}
.mp-card__text{position:absolute;inset-inline:0;bottom:0;padding:clamp(14px,1.5vw,20px);color:#fff;
  background:linear-gradient(to top,rgba(10,8,6,.82),rgba(10,8,6,.34) 52%,transparent)}
.mp-card__text h3{color:#fff;text-transform:uppercase;font-size:clamp(14px,1.25vw,18px);letter-spacing:.04em}
.mp-card__text p{margin-top:7px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.86);max-width:32ch}
.mp-card--todo::before{
  content:'Photograph to come';position:absolute;z-index:2;top:10px;inset-inline-start:10px;
  background:rgba(21,18,14,.78);color:#fff;padding:4px 9px;
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
}

/* ── how it works ────────────────────────────────────── */
.mp-steps{background:var(--mp-ivory-2);border-block:1px solid var(--mp-rule)}
.mp-steps__in{
  max-width:var(--mp-wrap);margin:0 auto;padding:clamp(34px,4.6vw,58px) var(--mp-gut);
  display:grid;grid-template-columns:minmax(180px,.8fr) auto repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,38px);align-items:start;
}
.mp-steps h2{line-height:.98}
.mp-steps__script{align-self:center}
.mp-step{border-inline-start:1px solid var(--mp-rule);padding-inline-start:clamp(16px,2vw,28px)}
.mp-step:first-of-type{border-inline-start:0;padding-inline-start:0}
.mp-step__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mp-step__n{font-family:var(--mp-display);font-size:19px;color:var(--mp-ink)}
.mp-step h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--mp-ui);margin-bottom:8px}
.mp-step p{font-size:13px;line-height:1.6}

/* ── stories mosaic ──────────────────────────────────── */
.mp-mosaic{padding:clamp(40px,6vw,76px) 0 0}
.mp-mosaic__head{
  max-width:var(--mp-wrap);margin:0 auto clamp(18px,2.4vw,28px);padding-inline:var(--mp-gut);
  display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
}
.mp-mosaic__head div{flex:1 1 auto}
.mp-mosaic__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.mp-tile{position:relative;display:block;overflow:hidden;background:var(--mp-ivory-2)}
.mp-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.mp-tile:hover img{transform:scale(1.04)}
.mp-tile span{
  position:absolute;inset-inline-start:0;bottom:0;padding:12px 16px;color:#fff;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.mp-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.5),transparent 46%)}

/* ── closing plate ───────────────────────────────────── */
.mp-plate{position:relative;margin-top:clamp(40px,6vw,72px);min-height:clamp(280px,42vh,420px);
  display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--mp-ink)}
.mp-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* A flat 44% wash was enough for the heading and not for anything small.
   Deepened, and weighted toward the middle where the words actually are, so a
   pale photograph still gives the text something to sit on without the whole
   frame going muddy at the edges. */
.mp-plate::after{content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 78% 70% at 50% 50%, rgba(12,10,8,.62) 0%, rgba(12,10,8,.46) 55%, rgba(12,10,8,.34) 100%)}
.mp-plate__in{position:relative;z-index:2;padding:clamp(40px,7vw,84px) var(--mp-gut);max-width:760px}
.mp-plate h2{color:#fff}
.mp-plate p{margin:14px auto clamp(22px,3vw,30px);color:rgba(255,255,255,.92);
  font-family:var(--mp-display);font-style:italic;font-size:clamp(14px,1.4vw,18px);max-width:46ch}

/* ── footer ──────────────────────────────────────────── */
.mp-foot{border-top:1px solid var(--mp-rule);background:var(--mp-ivory)}
.mp-foot__in{max-width:var(--mp-wrap);margin:0 auto;padding:clamp(28px,3.4vw,40px) var(--mp-gut);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.mp-foot__nav{display:flex;gap:clamp(14px,2vw,28px);margin-inline:auto;flex-wrap:wrap}
.mp-foot__nav a{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mp-ink)}
.mp-foot__social{display:flex;gap:14px;align-items:center;color:var(--mp-ink)}
.mp-foot__fine{
  max-width:var(--mp-wrap);margin:0 auto;padding:0 var(--mp-gut) clamp(24px,3vw,34px);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mp-mute);
}
.mp-foot__tags{margin-inline-start:auto;display:flex;gap:14px}

/* ── the admin's own preview ribbon ──────────────────── */
.mp-ribbon{
  position:fixed;z-index:60;inset-block-end:16px;inset-inline-start:16px;
  background:var(--mp-ink);color:var(--mp-ivory);padding:9px 15px;
  font-family:var(--mp-ui);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;gap:12px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.mp-ribbon a{border-bottom:1px solid rgba(247,243,236,.5)}

/* ── narrower ────────────────────────────────────────── */
@media (max-width:1100px){
  .mp-steps__in{grid-template-columns:1fr 1fr;row-gap:26px}
  .mp-steps__script{grid-column:2;justify-self:end;text-align:right}
  .mp-step{border-inline-start:0;padding-inline-start:0}
}
@media (max-width:900px){
  .mp-nav{
    position:absolute;top:100%;inset-inline:0;background:var(--mp-ivory);
    border-bottom:1px solid var(--mp-rule);flex-direction:column;gap:0;margin:0;
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .34s ease,visibility .34s;
  }
  .mp-nav.is-open{max-height:60vh;visibility:visible;overflow-y:auto}
  .mp-nav a{padding:15px var(--mp-gut);border-bottom:1px solid var(--mp-rule);font-size:12px}
  .mp-bar{position:relative}
  .mp-bar__in{position:relative;gap:12px}
  .mp-burger{display:flex;order:3}
  .mp-mark{margin-inline-end:auto}
  .mp-bar .mp__btn{padding:11px 18px;font-size:10px}
  .mp-mosaic__grid{grid-template-columns:repeat(2,1fr)}
  .mp-hero__note{display:none}
  .mp-steps__in{grid-template-columns:1fr}
  .mp-steps__script{grid-column:1;justify-self:start;text-align:start}
  .mp-rail__track{grid-auto-columns:minmax(180px,72vw)}
}
@media (max-width:560px){
  .mp-foot__in{flex-direction:column;align-items:flex-start}
  .mp-foot__nav{margin:0}
  .mp-foot__tags{margin:0}
  .mp-plate{min-height:320px}
  /* The bar is mark · burger · book · language on one line here, and the mark
     grew a monogram. Close the pair up and let the wordmark set tighter so
     the row still fits a 360px screen without the button wrapping under it. */
  .mp-bar .mp-mark--logo{gap:7px}
  .mp-bar .mp-mark__logo{height:26px}
  .mp-bar .mp-mark b{font-size:17px;letter-spacing:.14em}
  .mp-bar .mp-mark span{letter-spacing:.3em;padding-inline-start:.3em}
}
@media (prefers-reduced-motion:reduce){
  .mp *{animation:none!important;transition:none!important}
  .mp-card:hover img,.mp-tile:hover img{transform:none}
  html{scroll-behavior:auto}
}

/* ── sections of a type made in the panel ────────────────
   One renderer, four shapes — see Custom() in Blocks.tsx. They reuse the same
   tokens, rhythm and type scale as every built-in section, so a section
   somebody defines sits in the page rather than on top of it. */
.mp-own{max-width:var(--mp-wrap);margin:0 auto;padding:clamp(34px,5vw,64px) var(--mp-gut)}
.mp-own__in{max-width:var(--mp-wrap);margin:0 auto}
.mp-own__body{margin-top:14px;display:grid;gap:12px;max-width:62ch}
.mp-own__body p{font-size:clamp(14px,1.15vw,16px);line-height:1.72;color:var(--mp-body)}

/* a grid of cards */
.mp-own__grid{margin-top:clamp(22px,3vw,34px);display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mp-own__card{display:block}
.mp-own__card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--mp-ivory-2)}
.mp-own__card h3{margin-top:12px;font-size:clamp(15px,1.3vw,18px);text-transform:uppercase;letter-spacing:.04em}
.mp-own__card p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--mp-body)}
.mp-own__card[href] h3{transition:opacity .3s ease}
.mp-own__card[href]:hover h3{opacity:.62}

/* words beside one photograph */
.mp-own--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,56px);align-items:center}
.mp-own--split .mp-own__words{display:flex;flex-direction:column}
.mp-own__shot{margin:0}
.mp-own__shot img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* a band of words */
.mp-own--band{max-width:none;background:var(--mp-ivory-2);border-block:1px solid var(--mp-rule);
  text-align:center}
.mp-own--band .mp-own__in{max-width:68ch;display:flex;flex-direction:column;align-items:center}
.mp-own--band .mp-own__body{margin-inline:auto}
.mp-own--band .mp__btn{align-self:center!important}

/* a numbered list */
.mp-own__points{margin:clamp(22px,3vw,34px) 0 0;padding:0;list-style:none;display:grid;
  gap:clamp(14px,2vw,22px);counter-reset:none}
.mp-own__points li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,22px);
  align-items:start;border-top:1px solid var(--mp-rule);padding-top:clamp(14px,2vw,20px)}
.mp-own__n{font-family:var(--mp-display);font-size:clamp(15px,1.5vw,19px);color:var(--mp-mute)}
.mp-own__points h3{font-size:clamp(16px,1.4vw,20px);text-transform:uppercase;letter-spacing:.04em}
.mp-own__points p{margin-top:6px;font-size:14px;line-height:1.7;color:var(--mp-body);max-width:62ch}

@media (max-width:760px){
  .mp-own--split{grid-template-columns:minmax(0,1fr)}
  .mp-own__points li{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ── jumping to a section ────────────────────────────────
   The category strip on the catalogue links down the page to its own rows,
   and the masthead is sticky — so a heading landed underneath it and the
   visitor arrived looking at the middle of a section they had not seen the
   top of. Every element with an id stops clear of the bar instead.

   This stylesheet is only loaded on MAISON pages, so a bare html rule here
   is already scoped to them; the old chrome keeps site.css's own.
   Below 900px the bar is `position:relative` and there is nothing to clear,
   so the offset goes back to a thumb's worth of breathing room. */
html{scroll-behavior:smooth}
.mp [id]{scroll-margin-top:96px}
@media (max-width:900px){
  .mp [id]{scroll-margin-top:16px}
}

/* ── the language picker, in the ivory bar ───────────────
   The component is shared with the old chrome, so only the skin changes
   here: the same markup, set on the light ground and opening downward
   from the masthead rather than upward from a dark footer. */
.mp .langsw{position:relative;display:inline-flex}
.mp .langsw__btn{
  display:inline-flex;align-items:center;gap:7px;background:none;
  border:1px solid var(--mp-rule);color:var(--mp-ink);
  padding:9px 13px;font:inherit;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s ease;
}
.mp .langsw__btn:hover{border-color:var(--mp-ink)}
.mp .langsw__globe{font-size:12px;line-height:1}
.mp .langsw__menu{
  position:absolute;z-index:50;top:calc(100% + 8px);inset-inline-end:0;margin:0;padding:6px 0;
  list-style:none;background:var(--mp-ivory);border:1px solid var(--mp-rule);
  box-shadow:0 20px 44px rgba(21,18,14,.14);min-width:172px;max-height:62vh;overflow:auto;
}
.mp .langsw--up .langsw__menu{top:calc(100% + 8px);bottom:auto}
.mp .langsw__menu li{margin:0;padding:0;list-style:none}
.mp .langsw__item{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:0;color:var(--mp-ink);padding:9px 15px;font:inherit;font-size:12.5px;
  cursor:pointer;text-align:start;
}
.mp .langsw__item:hover{background:rgba(21,18,14,.05)}
.mp .langsw__item.is-on{font-weight:500}
.mp .langsw__item i{font-style:normal;font-size:9.5px;letter-spacing:.16em;opacity:.5}

/* ── a page's text header ────────────────────────────────
   The listing and product pages open on words, not on a plate: eyebrow,
   title, one line of promise, and — where there is one — a single
   photograph beside them. */
.mp-head{
  max-width:var(--mp-wrap);margin:0 auto;padding:clamp(34px,5vw,64px) var(--mp-gut) clamp(22px,3vw,34px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(22px,4vw,56px);align-items:center;
}
.mp-head--plain{grid-template-columns:minmax(0,1fr);max-width:min(var(--mp-wrap),980px)}
.mp-head__text h1 em,.mp-head__text h2 em{font-style:italic;text-transform:none}
.mp-head__lede{margin-top:clamp(14px,1.8vw,20px);max-width:44ch}
.mp-head__lines{margin-top:14px;font-family:var(--mp-display);font-style:italic;
  font-size:clamp(15px,1.4vw,19px);line-height:1.5;color:var(--mp-ink)}
.mp-head__note{margin-top:18px}
.mp-head__shot{position:relative}
.mp-head__shot img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mp-head--tall .mp-head__shot img{aspect-ratio:2/3}

/* ── numbered editorial rows ─────────────────────────────
   Reference 3: an index, a name, a reading and a button on the left; one
   dominant photograph and up to two supporting ones on the right. */
.mp-rows{border-top:1px solid var(--mp-rule)}
.mp-row{
  max-width:var(--mp-wrap);margin:0 auto;padding:clamp(20px,2.6vw,30px) var(--mp-gut);
  display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,1.9fr) minmax(0,.92fr);
  gap:clamp(12px,1.6vw,22px);align-items:stretch;border-bottom:1px solid var(--mp-rule);
}
.mp-row__side{display:flex;flex-direction:column;justify-content:center;gap:12px;padding-block:6px}
.mp-row__n{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;color:var(--mp-mute)}
.mp-row__n::after{content:'';flex:1 1 auto;height:1px;background:var(--mp-rule);max-width:54px}
.mp-row__side h3{font-size:clamp(21px,2.4vw,32px);text-transform:uppercase;line-height:1.04}
.mp-row__side p{font-family:var(--mp-display);font-style:italic;font-size:clamp(14px,1.3vw,17px);line-height:1.45;color:var(--mp-body)}
/* The paragraph under the italic line: running text, not display italic, so
   the two read as a promise and then an explanation rather than as one long
   flourish. */
.mp-row__side .mp-row__body{
  font-family:var(--mp-ui);font-style:normal;
  font-size:clamp(13px,1.05vw,14.5px);line-height:1.62;color:var(--mp-body);
  max-width:46ch;
}
.mp-row__main{position:relative;overflow:hidden;background:var(--mp-ivory-2)}
.mp-row__main img{width:100%;height:100%;min-height:clamp(200px,26vw,320px);object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.mp-row__main:hover img{transform:scale(1.035)}
.mp-row__aside{display:grid;grid-template-rows:1fr 1fr;gap:clamp(6px,.8vw,10px)}
.mp-row__aside span{display:block;overflow:hidden;background:var(--mp-ivory-2)}
.mp-row__aside img{width:100%;height:100%;object-fit:cover}
.mp-row__specs{margin-top:6px;display:grid;gap:5px}
.mp-row__specs div{display:flex;gap:10px;font-size:11.5px;line-height:1.45}
.mp-row__specs dt{flex:0 0 84px;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-mute);font-size:9.5px;padding-top:2px}
.mp-row__specs dd{margin:0;color:var(--mp-body)}

/* ── the four-column band ────────────────────────────────
   Reference 4: concept, experience, look, audience — thin rules between. */
.mp-cols{
  max-width:var(--mp-wrap);margin:0 auto;padding:clamp(26px,3.4vw,44px) var(--mp-gut);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,30px);
  border-top:1px solid var(--mp-rule);
}
.mp-col{border-inline-start:1px solid var(--mp-rule);padding-inline-start:clamp(14px,1.6vw,22px)}
.mp-col:first-child{border-inline-start:0;padding-inline-start:0}
.mp-col h3{font-size:clamp(16px,1.5vw,21px);line-height:1.15;margin-bottom:12px}
.mp-col p{font-size:13px;line-height:1.62;margin-bottom:10px}
.mp-col ul{margin:10px 0 0;padding-inline-start:17px;display:grid;gap:6px}
.mp-col li{font-size:12.5px;line-height:1.5}
.mp-col__listTitle{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mp-mute);margin:14px 0 6px}

/* ── a strip of photographs ──────────────────────────────── */
.mp-gal{padding:clamp(28px,4vw,52px) 0 0}
.mp-gal__head{max-width:var(--mp-wrap);margin:0 auto clamp(14px,2vw,22px);padding-inline:var(--mp-gut);
  display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.mp-gal__head h2{font-size:clamp(21px,2.4vw,32px)}
.mp-gal__head p{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mp-mute)}
.mp-gal__strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(140px,1fr);gap:3px;
  overflow-x:auto;scrollbar-width:none}
.mp-gal__strip::-webkit-scrollbar{display:none}
.mp-gal__strip img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* ── the cast ────────────────────────────────────────────── */
.mp-cast{max-width:var(--mp-wrap);margin:0 auto;padding:clamp(20px,3vw,36px) var(--mp-gut);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(12px,1.6vw,22px)}
.mp-face{display:block}
.mp-face__frame{display:block;overflow:hidden;background:var(--mp-ivory-2)}
.mp-face__frame img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.mp-face:hover .mp-face__frame img{transform:scale(1.04)}
.mp-face__role{margin-top:11px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mp-mute)}
.mp-face__name{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px;
  font-family:var(--mp-display);font-size:clamp(15px,1.4vw,19px);color:var(--mp-ink)}
.mp-face__note{margin-top:5px;font-size:12px;line-height:1.5;color:var(--mp-body)}

/* ── the message form ────────────────────────────────────── */
.mp-form{max-width:var(--mp-wrap);margin:0 auto;padding:clamp(22px,3vw,40px) var(--mp-gut);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(22px,4vw,56px);
  border-top:1px solid var(--mp-rule)}
.mp-form__in label{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mp-mute);margin:16px 0 6px}
.mp-form__in input,.mp-form__in textarea{
  width:100%;background:#fff;border:1px solid var(--mp-rule);color:var(--mp-ink);
  padding:13px 15px;font:inherit;font-size:14px;border-radius:0;
}
.mp-form__in textarea{min-height:120px;resize:vertical}
.mp-form__in input:focus,.mp-form__in textarea:focus{outline:none;border-color:var(--mp-ink)}
.mp-form__in button{margin-top:20px}
.mp-form__in .err{color:#9d2f3f;font-size:12.5px;margin-top:8px}
.mp-form__in .ok{color:#3f6b4a;font-size:12.5px;margin-top:8px}

/* ── the two forms ───────────────────────────────────────
   Both of these had NO styles at all on a MAISON page, and both are the
   booking path.

   `.bf*` is the modal every "Book" opens — in the masthead, in the footer, on
   every closing plate. `.mf*` is the message form on the contact page. Their
   only rules lived in site.css, the INDIGO stylesheet, which these pages do
   not load: from the day the redesign went live, pressing Book gave everyone
   an unstyled stack of labels and inputs on a bare ground.

   Re-skinned rather than imported — site.css is navy and gold, and dragging it
   in would have repainted the page around it. */

.mp .bf{
  position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,36px);
  background:rgba(21,18,14,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.mp .bf__card{
  position:relative;width:min(96vw,560px);max-height:92vh;overflow-y:auto;
  background:var(--mp-ivory);color:var(--mp-body);
  border:1px solid var(--mp-rule);border-radius:0;
  padding:clamp(26px,4vw,44px);
  box-shadow:0 40px 110px rgba(21,18,14,.34);
  /* The dialog is rendered where its trigger is rather than portalled, so it
     inherits whatever the surrounding section sets — the masthead and the
     footer both letter-space and uppercase their text. Taken back here, or the
     same form reads differently depending on which button opened it. */
  text-transform:none;letter-spacing:normal;text-align:start;
}
.mp .bf__card .eyebrow,.mp .bf__card .mp__eyebrow{
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mp-mute);margin:0 0 10px}
.mp .bf__lede{margin:0 0 clamp(18px,2.6vw,26px);font-size:14px;line-height:1.7;color:var(--mp-body)}
.mp .bf__close{
  position:absolute;top:12px;inset-inline-end:12px;width:34px;height:34px;cursor:pointer;
  border:1px solid var(--mp-rule);background:none;color:var(--mp-ink);font-size:13px;line-height:1;
  transition:background .3s ease,color .3s ease;
}
.mp .bf__close:hover{background:var(--mp-ink);color:var(--mp-ivory)}

/* the fields, shared by the modal and the contact page */
.mp .bf__row,.mp .mf__row{display:flex;flex-wrap:wrap;gap:12px}
.mp .bf__row .bf__field,.mp .mf__row .mf__field{flex:1 1 200px}
.mp .bf__field,.mp .mf__field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.mp .bf__field span,.mp .mf__field span{
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mp-mute)}
.mp .bf__field input,.mp .bf__field textarea,
.mp .mf__field input,.mp .mf__field textarea{
  width:100%;padding:13px 15px;border-radius:0;
  background:#fff;color:var(--mp-ink);border:1px solid var(--mp-rule);
  font-family:var(--mp-ui);font-size:14px;line-height:1.5;
  transition:border-color .3s ease;
}
.mp .bf__field textarea,.mp .mf__field textarea{resize:vertical;min-height:110px}
.mp .bf__field input::placeholder,.mp .bf__field textarea::placeholder,
.mp .mf__field input::placeholder,.mp .mf__field textarea::placeholder{color:var(--mp-mute)}
.mp .bf__field input:focus,.mp .bf__field textarea:focus,
.mp .mf__field input:focus,.mp .mf__field textarea:focus{outline:none;border-color:var(--mp-ink)}

.mp .bf__foot,.mp .mf__foot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:8px}
/* the submit, in both — the same dark rectangle as every other primary action.
   `.btn--solid` is the class the contact form emits. */
.mp .bf__send,.mp .mf__foot .btn--solid,.mp .mp-form__in .btn--solid{
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  padding:15px 30px;border:1px solid var(--mp-ink);border-radius:0;
  background:var(--mp-ink);color:var(--mp-ivory);
  font-family:var(--mp-ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  transition:background .32s ease,color .32s ease;
}
.mp .bf__send i,.mp .mf__foot .btn--solid i{font-style:normal;font-size:12px;opacity:.75}
.mp .bf__send:hover,.mp .mf__foot .btn--solid:hover{background:transparent;color:var(--mp-ink)}
.mp .bf__send[disabled],.mp .mf__foot .btn--solid[disabled]{opacity:.5;cursor:default}
.mp .bf__send[disabled]:hover,.mp .mf__foot .btn--solid[disabled]:hover{
  background:var(--mp-ink);color:var(--mp-ivory)}

.mp .bf__status,.mp .mf__status{font-size:13px;line-height:1.5;flex:1 1 180px;color:var(--mp-body)}
.mp .bf__status.is-ok,.mp .mf__status.is-ok{color:#3f6b4a}
.mp .bf__status.is-err,.mp .mf__status.is-err{color:#9d2f3f}
/* the challenge sits between the fields and the button in both */
.mp .bf .cf-turnstile,.mp .mf__form .cf-turnstile{margin:4px 0 2px}

/* The contact page's own form is `.mp-form__in` — its generic `label` rule was
   catching the <label> that wraps each field and setting it in small capitals,
   which is why the inputs sat beside their names rather than under them. */
.mp .mp-form__in .mf__field{margin-bottom:14px}
.mp .mp-form__in label.mf__field{font-size:inherit;letter-spacing:normal;text-transform:none;
  color:inherit;margin:0 0 14px}

/* ── a left column beside a card row ─────────────────────── */
.mp-rail--side{
  max-width:var(--mp-wrap);margin:0 auto;padding:clamp(20px,2.6vw,32px) var(--mp-gut);
  display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,2.6fr);gap:clamp(16px,2.4vw,34px);
  align-items:center;border-top:1px solid var(--mp-rule);
}
.mp-rail--side .mp-rail__track{padding-inline:0;grid-auto-columns:minmax(150px,1fr)}
.mp-rail--side .mp-rail__head{padding-inline:0;margin:0 0 12px;display:block}
.mp-rail--side .mp-card img{aspect-ratio:4/5}

@media (max-width:1000px){
  .mp-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .mp-col:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .mp-row{grid-template-columns:minmax(130px,.8fr) minmax(0,1.6fr)}
  .mp-row__aside{display:none}
  .mp-form{grid-template-columns:minmax(0,1fr)}
  .mp-rail--side{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .mp-head,.mp-head--tall{grid-template-columns:minmax(0,1fr)}
  .mp-head__shot img,.mp-head--tall .mp-head__shot img{aspect-ratio:4/3}
  .mp-cols{grid-template-columns:minmax(0,1fr)}
  .mp-col{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--mp-rule);padding-top:18px}
  .mp-col:first-child{border-top:0;padding-top:0}
  .mp-row{grid-template-columns:minmax(0,1fr);gap:14px}
  .mp-row__main img{min-height:230px}
}

/* ── a legal document, on the ivory ground ───────────────
   The same markup the panel already edits, restyled rather than rebuilt:
   these pages are long-form text and the redesign changes how they are set,
   not what they are. */
.mp .legal{max-width:min(var(--mp-wrap),820px);margin:0 auto;padding:clamp(34px,5vw,64px) var(--mp-gut)}
.mp .legal .eyebrow{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mp-mute);margin:0 0 14px}
.mp .legal h1{font-size:clamp(30px,4.4vw,54px);margin:0 0 10px}
.mp .legal .updated{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mp-mute);margin:0 0 30px}
.mp .legal h2{
  font-size:clamp(17px,1.8vw,23px);text-transform:none;margin:34px 0 12px;
  padding-top:20px;border-top:1px solid var(--mp-rule);
}
.mp .legal p{margin:0 0 14px;font-size:14.5px;line-height:1.75;max-width:68ch}
.mp .legal ul{margin:0 0 16px;padding-inline-start:20px;display:grid;gap:8px}
.mp .legal li{font-size:14px;line-height:1.7;max-width:66ch}
.mp .legal a{border-bottom:1px solid var(--mp-rule);transition:border-color .3s ease}
.mp .legal a:hover{border-bottom-color:var(--mp-ink)}
.mp .legal strong{font-weight:500;color:var(--mp-ink)}

/* ── one person's page ───────────────────────────────────── */
.mp .mb{
  max-width:var(--mp-wrap);margin:0 auto;padding:clamp(30px,4.6vw,58px) var(--mp-gut);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.mp .mb__text h1{font-size:clamp(32px,4.4vw,58px);margin:0 0 4px}
.mp .mb__text .eyebrow{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mp-mute);margin:0 0 14px}
.mp .mb__tag{font-family:var(--mp-display);font-style:italic;font-size:clamp(15px,1.5vw,20px);color:var(--mp-body);margin:10px 0 0}
.mp .mb__bio{margin-top:18px;display:grid;gap:12px;max-width:52ch}
.mp .mb__bio p{font-size:14px;line-height:1.7}
.mp .mb__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.mp .mb__btn{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--mp-rule);padding:11px 17px;color:var(--mp-ink);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .3s ease,background .3s ease;
}
.mp .mb__btn:hover{border-color:var(--mp-ink);background:rgba(21,18,14,.04)}
.mp .mb__btn i{font-style:normal;opacity:.5;font-size:11px}
.mp .mb__shot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mp .mb__work{
  max-width:var(--mp-wrap);margin:0 auto;padding:clamp(18px,2.6vw,32px) var(--mp-gut) clamp(30px,4vw,50px);
  border-top:1px solid var(--mp-rule);
}
.mp .mb__work > h2{font-size:clamp(19px,2.2vw,28px);margin:0 0 18px}
.mp .mw{position:relative;display:block;overflow:hidden;background:var(--mp-ivory-2);border:0;padding:0;cursor:pointer}
.mp .mw img,.mp .mw__still{width:100%;height:100%;object-fit:cover;display:block}
.mp .mw__badge{position:absolute;inset-inline-end:8px;bottom:8px;color:#fff;font-size:11px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.mp .mw__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.34),transparent 52%);pointer-events:none}
@media (max-width:860px){
  .mp .mb{grid-template-columns:minmax(0,1fr)}
  .mp .mb__shot img{aspect-ratio:4/3}
}

/* ── a card whose photograph does not exist yet ──────────
   It used to show a picture of something else with a label stuck over it,
   which is worse than showing nothing: the label says "photograph to come"
   and the picture says otherwise. The tile is typographic until there is a
   real frame for it — the title still reads, the card still links, and
   nothing implies a photograph that was never taken. */
.mp-card--todo .mp-card__wait{
  display:block;aspect-ratio:3/4;
  background:
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(21,18,14,.035) 13px 26px),
    var(--mp-ivory-2);
}
.mp-tile.mp-card--todo .mp-card__wait{aspect-ratio:4/3}
.mp-card--todo .mp-card__text{background:none;color:var(--mp-ink)}
.mp-card--todo .mp-card__text h3{color:var(--mp-ink)}
.mp-card--todo .mp-card__text p{color:var(--mp-body)}
.mp-tile.mp-card--todo::after{content:none}
.mp-tile.mp-card--todo span{color:var(--mp-ink);text-shadow:none}
.mp-card--todo::before{
  background:none;color:var(--mp-mute);border:1px solid var(--mp-rule);
}

/* ── the strip of categories ─────────────────────────────
   Under the masthead on the catalogue: a ring, a glyph and a small label
   each. It scrolls sideways rather than wrapping, so the row stays a row. */
.mp-strip{border-bottom:1px solid var(--mp-rule);background:var(--mp-ivory)}
.mp-strip__in{
  max-width:var(--mp-wrap);margin:0 auto;padding:clamp(14px,2vw,22px) var(--mp-gut);
  display:flex;gap:clamp(18px,3.4vw,54px);justify-content:center;
  overflow-x:auto;scrollbar-width:none;
}
.mp-strip__in::-webkit-scrollbar{display:none}
.mp-strip__one{
  display:flex;flex-direction:column;align-items:center;gap:9px;flex:0 0 auto;
  color:var(--mp-ink);text-align:center;
}
.mp-strip__ring{
  width:44px;height:44px;border:1px solid var(--mp-rule);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s ease,background .3s ease;
}
.mp-strip__one:hover .mp-strip__ring{border-color:var(--mp-ink);background:rgba(21,18,14,.04)}
.mp-strip__label{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--mp-mute)}
.mp-strip__one:hover .mp-strip__label{color:var(--mp-ink)}
.mp-strip__one[aria-current] .mp-strip__ring{border-color:var(--mp-ink)}
@media (max-width:760px){
  .mp-strip__in{justify-content:flex-start;gap:22px}
}
/* a row still waiting for its photography */
.mp-row__main--todo .mp-card__wait{aspect-ratio:auto;height:100%;min-height:clamp(200px,26vw,320px)}
.mp-row__main--todo{position:relative}
.mp-row__main--todo::after{
  content:attr(data-wait);position:absolute;inset-inline-start:14px;top:12px;
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mp-mute);
}

/* ── questions and answers ───────────────────────────────
   A disclosure list, not a scripted accordion: it opens with no JavaScript,
   it is a disclosure in the accessibility tree, and a crawler reads the
   answer whether it is open or shut. */
.mp-faq{border-top:1px solid var(--mp-rule)}
.mp-faq__in{max-width:min(var(--mp-wrap),980px);margin:0 auto;padding:clamp(30px,4.4vw,58px) var(--mp-gut)}
.mp-faq__head{margin-bottom:clamp(16px,2.4vw,28px)}
.mp-faq__head h2{font-size:clamp(24px,3vw,40px)}
.mp-faq__head p{margin-top:8px}
.mp-faq__one{border-top:1px solid var(--mp-rule)}
.mp-faq__one:last-child{border-bottom:1px solid var(--mp-rule)}
.mp-faq__one summary{
  list-style:none;cursor:pointer;padding:clamp(14px,1.8vw,20px) 34px clamp(14px,1.8vw,20px) 0;
  font-family:var(--mp-display);font-size:clamp(16px,1.6vw,21px);color:var(--mp-ink);
  position:relative;line-height:1.3;
}
.mp-faq__one summary::-webkit-details-marker{display:none}
.mp-faq__one summary::after{
  content:'+';position:absolute;inset-inline-end:2px;top:50%;transform:translateY(-50%);
  font-family:var(--mp-ui);font-size:19px;color:var(--mp-mute);transition:transform .25s ease;
}
.mp-faq__one[open] summary::after{content:'–'}
.mp-faq__one summary:hover{color:var(--mp-body)}
.mp-faq__one p{padding:0 34px clamp(16px,2vw,22px) 0;font-size:14.5px;line-height:1.72;max-width:72ch}