.marrakech-guide.mg-chapters {
  --chapter-ivory: #f8f6f2;
  --chapter-sand: #eee6d9;
  --chapter-line: #cfbea7;
  --chapter-gold: #c49a6c;
  --chapter-ink: #2b333f;
  --chapter-nav-height: 58px;
  --guide-toc-height: var(--chapter-nav-height);
  color: var(--chapter-ink);
}
.mg-chapters .mg-chapter-nav {
  position: sticky;
  inset-block-start: var(--guide-header-height, 67px);
  z-index: 35;
  background: var(--chapter-ivory);
  border-block: 1px solid var(--chapter-line);
}
.mg-chapters .mg-chapter-nav > .wrap {
  display: flex;
  align-items: center;
  gap: clamp(8px,1.8vw,30px);
  padding-block: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #b29773 transparent;
  scroll-padding-inline: 12px;
}
.mg-chapters .mg-chapter-nav a {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 30px;
  color: var(--chapter-ink);
  font: 550 .875rem/1.4 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.mg-chapters .mg-chapter-nav a[aria-current="location"] {
  color: #fff;
  background: var(--chapter-ink);
}
.mg-chapters .mg-nav-num {
  color: #825b32;
  font: 600 .75rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.mg-chapters .mg-chapter-nav [aria-current="location"] .mg-nav-num { color: #edcf9f; }
.mg-chapters .mg-chapter-nav a:focus-visible { outline-offset: -3px; outline-color: #99713e; }
.mg-chapters .mg-chapter-nav a[aria-current]:focus-visible { outline-color: #ffe1b4; }
.mg-chapters .mg-chapter {
  background: var(--chapter-ivory);
  border-block-end: 1px solid var(--chapter-line);
}
/* Section surfaces follow the reading order across chapter boundaries. */
.mg-chapters :is(#reperes,#excursions,#gueliz,#conseils,#articles) { background-color: var(--chapter-ivory); }
.mg-chapters :is(#incontournables,#itineraires,#quand-venir,#saveurs,#faq) { background-color: var(--chapter-sand); }
.mg-chapters .mg-chapter-head {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-areas: "number label" "number title";
  gap: 1px clamp(15px,1.6vw,26px);
  align-content: start;
  align-items: center;
  padding-block: clamp(37px,5vw,74px) clamp(22px,2.45vw,37px);
  border-block-end: 1px solid var(--chapter-line);
}
.mg-chapters .mg-chapter-number {
  grid-area: number;
  align-self: center;
  display: grid;
  place-items: center;
  inline-size: clamp(44px,4.3vw,64px);
  block-size: clamp(44px,4.3vw,64px);
  border-radius: 50%;
  background: var(--chapter-gold);
  color: #29251e;
  font: 500 clamp(1.25rem,2vw,1.9rem)/1 var(--serif);
  font-variant-numeric: lining-nums;
}
.mg-chapters .mg-chapter-label {
  grid-area: label;
  align-self: end;
  margin: 0;
  color: #735536;
  font: 650 .6875rem/1.55 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.mg-chapters .mg-chapter-title {
  grid-area: title;
  margin: 0;
  color: var(--chapter-ink);
  font: 400 clamp(2.15rem,4.15vw,4rem)/1.12 var(--serif);
  letter-spacing: -.045em;
  overflow-wrap: break-word;
}
.mg-chapters .mg-chapter-head + .mg-section:not(#agenda) { padding-block-start: clamp(27px,3.2vw,49px); }
.mg-chapters .city-original-intro { padding-block: clamp(20px,2.8vw,38px); }
.mg-chapters :is(.mg-chapter[id],.mg-section[id],article[id]) {
  scroll-margin-block-start: calc(var(--guide-header-height, 67px) + var(--chapter-nav-height) + 12px);
}
.mg-chapters #agenda {
  background: var(--chapter-ink);
  color: #fff8ec;
}
.mg-chapters #agenda :is(h2,h3,p,a) { color: #fff8ec; }
.mg-chapters #agenda :is(.eyebrow,time,h2 em) { color: #ebcaa1; }
.mg-chapters #agenda :is(.mg-note,.mg-heading > p) { color: #ebe5dc; }
.mg-chapters #agenda .mg-event { border-color: #747579; }
.mg-chapters details.mg-day {
  display: flow-root;
  padding-block: 24px;
  border-block-start: 1px solid var(--chapter-line);
}
.mg-chapters :is(details.mg-day,details.mg-advice) > summary {
  position: relative;
  min-height: 44px;
  padding-inline-end: 34px;
  color: var(--chapter-ink);
  cursor: pointer;
  list-style: none;
}
.mg-chapters :is(.mg-day,.mg-advice) > summary::-webkit-details-marker { display: none; }
.mg-chapters :is(.mg-day,.mg-advice) > summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 0;
  color: #775531;
  font: 400 1.375rem/1.8 var(--sans);
}
.mg-chapters :is(.mg-day,.mg-advice)[open] > summary::after { content: "−"; }
.mg-chapters .mg-day > summary :is(h3,h4,.mg-day-number) { margin-block: 0 4px; }
.mg-chapters .mg-day > ol { padding: 0; margin-block: 9px 0; }
.mg-chapters details.mg-advice { border-block-start: 1px solid var(--chapter-line); padding-block: 16px; }
.mg-chapters .mg-advice > summary {
  font: 400 clamp(1.2rem,1.65vw,1.55rem)/1.35 var(--serif);
  display: flex;
  align-items: center;
}
.mg-chapters .mg-advice > summary :is(h3,h4) { margin: 0; font: inherit; }
.mg-chapters .mg-advice p { margin: 7px 0 0; }
.mg-chapters .mg-final-card {
  background-color: var(--chapter-sand);
  color: var(--chapter-ink);
  inline-size: 100%;
  max-inline-size: none;
  border-block: 1px solid var(--chapter-line);
  padding-block: clamp(24px,4.5vw,66px);
  padding-inline: max(clamp(20px,4vw,56px),calc((100% - var(--max)) / 2));
  margin-block: 0;
}
.mg-chapters .mg-final-grid {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  align-items: center;
  gap: clamp(24px,5vw,85px);
}
.mg-chapters .mg-final-card .mg-ink img { display: block; width: 100%; max-height: 300px; object-fit: contain; }
.mg-chapters .mg-final-copy :is(h2,h3) { color: var(--chapter-ink); }
.mg-chapters .mg-final-copy .mg-benefits-title {
  margin-block: 20px 6px;
  font: 500 clamp(1.15rem,1.7vw,1.6rem)/1.35 var(--serif);
}
.mg-chapters .mg-final-benefits { margin-block-start: 24px; padding-block-start: 18px; border-block-start: 1px solid var(--chapter-line); }
.mg-chapters .mg-final-benefits > .eyebrow { margin-block-end: 6px; }
.mg-chapters .mg-final-benefits .direct-stay-reminder-copy p { font-size: .9375rem; line-height: 1.6; }
.mg-chapters .mg-final-benefits .direct-stay-reminder-copy span { grid-column: 2; }
.mg-chapters .mg-final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-block-start: 20px; }
[dir=rtl] .mg-chapters :is(.mg-chapter-label,.mg-chapter-title) { letter-spacing: normal; }
[dir=rtl] .mg-chapters .mg-chapter-title { line-height: 1.32; }
@media (min-width: 768px) {
  .mg-chapters .mg-day > summary { float: inline-start; inline-size: min(31%,330px); }
  .mg-chapters .mg-day > ol { margin-inline-start: min(37%,398px); margin-block-start: 0; }
}
@media (max-width: 767.98px) {
  .mg-chapters .mg-chapter-nav > .wrap { width: 100%; gap: 3px; padding: 4px 12px; }
  .mg-chapters .mg-chapter-nav a { min-height: 44px; padding: 6px 12px; font-size: .8125rem; }
  .mg-chapters .mg-chapter-head { padding-block: 31px 24px; column-gap: 14px; }
  .mg-chapters .mg-chapter-title { font-size: clamp(1.85rem,7.5vw,2.5rem); }
  .mg-chapters details.mg-day { padding-block: 8px; }
  .mg-chapters .mg-day > summary { display: grid; align-content: center; padding-block: 6px; }
  .mg-chapters .mg-day > ol { padding-block: 6px; }
  .mg-chapters .mg-practical { grid-template-columns: minmax(0,1fr); gap: 0; }
  .mg-chapters details.mg-advice { padding-block: 4px; }
  .mg-chapters .mg-final-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .mg-chapters .mg-final-card .mg-ink img { max-height: 170px; }
  .mg-chapters .mg-final-benefits .direct-stay-reminder-copy p { display: block; }
  .mg-chapters .mg-final-benefits .direct-stay-reminder-copy :is(strong,span) { display: block; }
}