/* ---------- hero ---------- */
.d6-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(420px,50vh,560px);padding-block:clamp(2rem,4.5vw,3.25rem)}
.d6-hero__bg{position:absolute;inset:0;z-index:-2}
/* the skyline runs through the middle of this plate, so hold slightly above
   centre — bottom-anchoring would fill the band with open water */
.d6-hero__bg .mm-slot img{object-position:50% 45%}
/* the opening paragraph runs across the brightest part of the plate, where the
   scrim was thinnest — these stops keep the lede and its inline link solid */
.d6-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(34,48,31,.66) 0%,rgba(34,48,31,.80) 45%,rgba(34,48,31,.94) 100%)}
.d6-hero__inner{max-width:60rem}
.d6-hero h1{color:var(--paper);margin:1.35rem 0 1.5rem;
  font-size:clamp(2.05rem,1.15rem + 2.9vw,3.55rem);line-height:1.02;letter-spacing:-.03em}
.d6-hero h1 em{display:block;font-style:italic;color:var(--sage-soft)}
.d6-hero .mm-lede{color:rgba(243,255,239,.86);max-width:62ch}
/* the approved pairing — at the foot of the opening paragraph */
.d6-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ---------- the register and the band below it ----------
   Both come from _source/register.js, shared with the Nocturne: the client
   asked for the same block under both heroes, so there is one source for it. */

/* ==========================================================================
   THE REGISTER
   A single line of portraits under the selection heading, the testimonials
   below them. It replaced the six-tile mosaic on both concepts: the mosaic
   ran three tiles deep and cost most of a phone screen, where this costs one
   band.

   The Nocturne carries it inside ".c4.mm-on-dark", which paints headings and
   copy in paper. This surface is paper itself, so each of those is restated
   at a weight that wins there and is harmless anywhere else.
   ========================================================================== */
.cm-reg{background:var(--paper);padding-block:clamp(2.75rem,5.5vw,4.5rem)}
.cm-reg__head{display:grid;gap:1.15rem 3rem;align-items:end;margin:0 0 clamp(1.35rem,2.6vw,2rem)}
@media(min-width:900px){.cm-reg__head{grid-template-columns:minmax(0,1fr) auto}}
.cm-reg .mm-eyebrow{color:var(--sage-ink)}
/* two classes deep, so it beats both ".c4 :where(h2,h3)" and ".mm-on-dark h2" */
.cm-reg .cm-reg__head h2{color:var(--deep);margin:.85rem 0 0;max-width:26ch;
  font-size:clamp(1.5rem,1.25rem + 1.35vw,2.35rem);line-height:1.08;letter-spacing:-.028em}
.cm-reg__head h2 em{font-style:italic;color:var(--sage-ink)}
.cm-reg__cta{justify-self:start}
@media(min-width:900px){.cm-reg__cta{justify-self:end;margin-bottom:.4rem}}

/* One row at every width. The number of portraits on show always equals the
   number of columns, so the row is exactly full and can never wrap onto a
   second — three on a phone held upright, four from the width a phone in
   landscape reaches, six on a desktop. */
.cm-reg__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.cm-reg__row>*:nth-child(n+4){display:none}
@media(min-width:640px){
  .cm-reg__row{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
  .cm-reg__row>*:nth-child(4){display:block}
}
@media(min-width:1200px){
  .cm-reg__row{grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem}
  .cm-reg__row>*:nth-child(n+5){display:block}
}
/* The ratio belongs to the portrait, not the slot: a slot that is both
   height:100% and aspect-ratio takes its WIDTH from its height and bursts a
   narrow cell. In a frame this tall and narrow a centred crop takes the top
   of the head, so bias the subject up. */
.cm-reg .mm-portrait{aspect-ratio:4/5}
.cm-reg .mm-portrait .mm-slot{width:100%;height:100%;aspect-ratio:auto}
.cm-reg .mm-portrait img{object-position:50% 24%}
@media(max-width:639px){.cm-reg .mm-portrait__cue{padding:.6rem .3rem;font-size:.5rem;letter-spacing:.14em}}

/* ---------- testimonials, one at a time ----------
   A crossfade, not a carriage that slides: every quote occupies the same
   grid cell, so the tallest sets the height once and nothing on the page
   moves as it turns over. */
.cm-quotes{margin-top:clamp(2rem,4vw,3.25rem);background:var(--mint);border:1px solid var(--line);
  padding:clamp(1.75rem,4vw,3.25rem) clamp(1.25rem,3.5vw,3rem)}
.cm-quotes .mm-ornament{opacity:.5;margin-bottom:clamp(1.25rem,2.5vw,1.9rem)}
.cm-quotes__stage{display:grid}
/* The two states are timed apart on purpose. Run as one 0.75s crossfade both
   quotes sit at half opacity across the middle of it and the lines print over
   each other — legible enough on a photograph, unreadable on type. The
   outgoing quote clears first; the incoming one waits for it. */
.cm-quote{grid-area:1/1;margin:0;justify-self:center;max-width:46rem;text-align:center;
  opacity:0;visibility:hidden;transform:translateY(9px);
  transition:opacity .42s var(--ease),transform .42s var(--slow),visibility 0s linear .42s}
.cm-quote.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .6s var(--ease) .42s,transform .7s var(--slow) .42s,visibility 0s}
.cm-quotes blockquote{margin:0;font-family:var(--serif);font-style:italic;color:var(--deep);
  font-size:clamp(1.15rem,1rem + .95vw,1.9rem);line-height:1.42;letter-spacing:-.018em}
.cm-quotes figcaption{margin-top:1.2rem;font:500 .625rem/1.5 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}

.cm-quotes__nav{display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,2.5vw,1.5rem);
  margin-top:clamp(1.5rem,3vw,2.25rem)}
.cm-quotes__arrow{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--sage-ink);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.cm-quotes__arrow:hover{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.cm-quotes__arrow i{font-size:.8rem}
/* dashes rather than dots — the page is built from hairlines and these belong
   to the same alphabet. The button itself is a proper touch target; only its
   rule is one pixel tall. */
.cm-quotes__dots{display:flex;align-items:center;gap:.5rem}
.cm-quotes__dots button{position:relative;width:1.75rem;height:1.5rem;padding:0;border:0;
  background:transparent;cursor:pointer}
.cm-quotes__dots button::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(56,77,52,.3);transition:background .35s var(--ease),height .35s var(--ease)}
.cm-quotes__dots button.is-on::before{background:var(--deep);height:2px}


.cm-cred{background:var(--deep-2)}
/* The row is a direct child of the full-bleed band, not of a shell, so the
   gap-over-a-tint technique cannot expose a sliver at the outer edges the way
   it did when the same trick was tried on an inset row. */
.cm-cred__row{display:grid;gap:1px;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--hair-light);border-block:1px solid var(--hair-light)}
@media(min-width:760px){.cm-cred__row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.cm-cred__row{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cm-cred__item{background:var(--deep-2);padding:clamp(1.1rem,2.2vw,1.6rem) clamp(.9rem,2vw,1.5rem)}
.cm-cred__icon{display:block;width:1.2rem;height:1.2rem;margin:0 0 .8rem;color:var(--sage-soft)}
.cm-cred__icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cm-cred__item span.cm-cred__label{display:block;font:500 .625rem/1.3 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper)}
@media(max-width:759px){
  .cm-cred__icon{width:1.05rem;height:1.05rem;margin-bottom:.6rem}
}


/* ---------- seam ----------
   The credential band and the directory toolbar are both dark; run together
   they read as one slab. A hairline that fades out at both ends, with the
   house ornament centred on it, separates them without introducing a colour
   the page does not already use. */
.d6-seam{background:var(--deep-2)}
.d6-seam__inner{display:flex;align-items:center;gap:clamp(.9rem,3vw,2rem);
  padding-block:clamp(1.35rem,3vw,2.25rem)}
.d6-seam__rule{flex:1;height:1px;min-width:0;
  background:linear-gradient(90deg,rgba(156,191,149,0),rgba(156,191,149,.55))}
.d6-seam__inner>.d6-seam__rule:last-child{background:linear-gradient(90deg,rgba(156,191,149,.55),rgba(156,191,149,0))}
.d6-seam .mm-ornament{flex:none;margin:0}

/* ---------- sticky search + region bar ---------- */
.d6-bar{position:sticky;top:var(--mm-nav,118px);z-index:32;background:var(--deep-2);
  border-block:1px solid rgba(243,255,239,.14)}
.d6-bar__inner{display:grid;gap:.75rem;padding-block:.9rem}
@media(min-width:1000px){.d6-bar__inner{grid-template-columns:minmax(0,330px) minmax(0,1fr);align-items:center;gap:1.75rem}}
.d6-search{display:flex;align-items:center;gap:.65rem;padding:.15rem .85rem;border-radius:1px;
  background:rgba(243,255,239,.08);border:1px solid rgba(243,255,239,.22);transition:border-color .25s,background .25s}
.d6-search:focus-within{border-color:var(--sage-soft);background:rgba(243,255,239,.13)}
.d6-search i{color:var(--sage-soft);font-size:.95rem;flex:none}
.d6-search input{flex:1;min-width:0;border:0;background:transparent;padding:.7rem .1rem;
  font:400 .875rem/1 var(--sans);color:var(--paper)}
.d6-search input:focus{outline:none}
.d6-search input::placeholder{color:rgba(243,255,239,.64)}
.d6-tabs{display:flex;align-items:center;gap:.3rem;overflow-x:auto;scrollbar-width:none}
.d6-tabs::-webkit-scrollbar{display:none}
.d6-tabs button{flex:none;border:1px solid transparent;background:transparent;border-radius:1px;
  padding:.5rem .9rem;font:500 .6875rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,255,239,.7);cursor:pointer;white-space:nowrap;transition:all .25s var(--ease)}
.d6-tabs button:hover{color:var(--paper);background:rgba(243,255,239,.1)}
.d6-tabs button.is-on{background:var(--paper);color:var(--deep)}
.d6-bar__count{margin-left:auto;flex:none;padding-left:1.25rem;
  font:500 .625rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sage-soft);white-space:nowrap}
@media(max-width:999px){.d6-bar__count{display:none}}

/* ---------- dossier shell ---------- */
.d6-shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  display:grid;gap:clamp(2rem,4vw,4rem);padding-block:clamp(2.25rem,4.5vw,4rem)}
@media(min-width:1100px){.d6-shell{grid-template-columns:minmax(0,236px) minmax(0,1fr)}}

/* standing index rail */
.d6-index{align-self:start}
@media(min-width:1100px){
  .d6-index{position:sticky;top:calc(var(--mm-nav,118px) + var(--mm-bar,66px) + 1.5rem);
    max-height:calc(100vh - var(--mm-nav,118px) - var(--mm-bar,66px) - 3rem);
    overflow:auto;scrollbar-width:thin;padding-right:.75rem}
}
.d6-index__title{margin:0 0 1.15rem;padding-bottom:.9rem;border-bottom:1px solid var(--hair);
  font:500 .625rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sage-ink)}
.d6-index__group{margin:0 0 1.5rem}
.d6-index__group>span{display:block;margin-bottom:.55rem;font:600 .625rem/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--deep)}
.d6-index ul{list-style:none;margin:0;padding:0}
.d6-index li a{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;
  padding:.34rem 0;font-size:.8125rem;color:var(--muted);text-decoration:none;
  transition:color .25s,padding-left .3s var(--slow)}
.d6-index li a em{font-style:normal;font-size:.625rem;color:var(--sage-ink)}
.d6-index li a:hover{color:var(--deep);padding-left:.4rem}
.d6-index li a.is-active{color:var(--deep);font-weight:500}
.d6-index__box>summary{display:none}
@media(max-width:1099px){
  .d6-index{border:1px solid var(--hair);background:var(--mist)}
  .d6-index__title{display:none}
  .d6-index__box>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    list-style:none;cursor:pointer;padding:1.1rem 1.35rem;
    font:500 .625rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sage-ink)}
  .d6-index__box>summary::-webkit-details-marker{display:none}
  .d6-index__box>summary i{font-size:.85rem;transition:transform .35s var(--slow)}
  .d6-index__box[open]>summary i{transform:rotate(180deg)}
  .d6-index__wrap{display:grid;gap:1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    padding:0 1.35rem 1.35rem}
}

/* region rule */
.d6-chapter{margin:clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem);
  padding-top:clamp(1.5rem,3vw,2.25rem);border-top:2px solid var(--deep)}
[data-region-block]:first-child .d6-chapter{margin-top:0;padding-top:0;border-top:0}
.d6-chapter__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem}
.d6-chapter h2{font-family:var(--serif);font-style:italic;margin:0;
  font-size:clamp(1.9rem,1.4rem + 2.1vw,3.1rem);line-height:1;letter-spacing:-.03em}

/* dossier entries */
.d6-entry{padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--hair)}
.d6-entry__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.5rem;margin-bottom:1.15rem}
.d6-entry__head h2{margin:0;font-size:clamp(1.65rem,1.35rem + 1.4vw,2.5rem);line-height:1;letter-spacing:-.03em}
.d6-entry__tally{display:inline-flex;align-items:baseline;gap:.45rem;margin-left:auto;color:var(--muted)}
.d6-entry__tally b{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1;color:var(--sage-ink)}
.d6-entry__tally span{font:500 .625rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.d6-entry__banner{position:relative;overflow:hidden;margin:0 0 1.5rem}
.d6-entry__banner .mm-slot{aspect-ratio:21/8}
@media(max-width:700px){.d6-entry__banner .mm-slot{aspect-ratio:16/9}}
.d6-entry__cols{display:grid;gap:clamp(1.25rem,3vw,2.5rem)}
@media(min-width:820px){.d6-entry__cols.has-media{grid-template-columns:minmax(0,.36fr) minmax(0,1fr)}}
.d6-entry__media{margin:0}
.d6-entry__media .mm-slot{aspect-ratio:4/5}
@media(max-width:819px){.d6-entry__media .mm-slot{aspect-ratio:16/9}}
.d6-entry__cities{margin-top:1.6rem;padding-top:1.35rem;border-top:1px solid var(--hair)}
.d6-entry__cities>span{display:block;margin-bottom:.9rem;font:500 .5625rem/1 var(--sans);
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* ---------- the destination list ----------
   These were chips: a wrapping flex row where every chip took its own width,
   the right edge came out ragged, and there was no column for the eye to run
   down. The client called it messy and she was right — thirty-seven boxes of
   thirty-seven different widths is a lot of noise for a list of place names.

   This is a true grid instead: equal tracks, so every name begins on the same
   vertical line and every gap is the same gap at every width.

   The column count follows the CONTAINER rather than the viewport, and it has
   to. The index rail appears at 1100px and takes 236px out of this very
   column, so a viewport-keyed breakpoint would widen the grid at exactly the
   width the room for it shrinks.

   13.75rem is the track. Measured against the actual names: the longest is
   "German Business Corridor Escorts" at 228px, then a gap down to 197, 192,
   180. A track wide enough for 228 plus the 13px mark and the .6rem beside
   it is 251px, and at that size the widest this column ever gets — 1008px —
   holds three, not four. 220px clears everything from the second-longest
   down and gives four across on any desktop from 1280 up, which is the
   layout the client marked. Exactly one name on the page takes two lines,
   and it is a phrase rather than a city.

   No rules between the rows. The last row is nearly always part empty, and a
   hairline running under three cells and stopping is exactly the untidiness
   this replaces. The order comes from the alignment; the interest comes from
   the hover. */
.d6-cities{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1rem,1.6vw,1.75rem)}
@media(min-width:820px){
  .d6-cities{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.75rem),1fr))}
}
.d6-cities li{min-width:0}
/* two classes deep so it outranks ".mm-main li a", which colours links in
   running copy and gives them a border — right for a sentence, wrong for an
   index of thirty-seven place names */
.d6-entry__cities .d6-cities a{display:flex;align-items:flex-start;gap:.6rem;
  padding:.5rem 0;border-bottom:0;text-decoration:none;
  font-size:.875rem;line-height:1.45;color:var(--ink);
  transition:color .3s var(--ease),transform .4s var(--slow)}
.d6-entry__cities .d6-cities a:hover{color:var(--deep);transform:translateX(3px)}
/* The mark is decorative — the name beside it is the text — but at 14px a
   hairline drawn in --sage sits at 2.7:1 on paper and reads as a smudge
   rather than a pin. --sage-ink is 5.09:1: unmistakably a mark, and still
   three stops lighter than the name it belongs to, so the hierarchy holds. */
.d6-cities__pin{flex:none;width:.875rem;height:.875rem;margin-top:.14em;color:var(--sage-ink);
  transition:color .3s var(--ease)}
.d6-cities__pin svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.d6-cities a:hover .d6-cities__pin{color:var(--deep)}
/* the rule draws in under the name only, left to right */
.d6-cities__name{position:relative;min-width:0}
.d6-cities__name::after{content:"";position:absolute;left:0;right:100%;bottom:-.15em;height:1px;
  background:var(--sage);transition:right .5s var(--slow)}
.d6-cities a:hover .d6-cities__name::after{right:0}
@media(prefers-reduced-motion:reduce){
  .d6-entry__cities .d6-cities a:hover{transform:none}
  .d6-cities__name::after{transition:none}
}

/* the Europe overview */
.d6-note{position:relative;isolation:isolate;overflow:hidden;background:var(--deep-2);
  padding:clamp(1.9rem,4vw,3.25rem);margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.d6-note__bg{position:absolute;inset:0;z-index:-2;opacity:.3}
.d6-note::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(43,59,40,.94),rgba(43,59,40,.72))}
.d6-note h2{color:var(--paper);font-size:clamp(1.55rem,1.3rem + 1.3vw,2.3rem);
  line-height:1.06;letter-spacing:-.028em;margin:.9rem 0 1.15rem}

.d6-empty{padding:3.5rem 1rem;text-align:center;color:var(--muted)}
.d6-empty a{color:var(--sage-ink)}

/* ---------- outro ---------- */
.d6-outro{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(3.5rem,8vw,6rem);text-align:center}
.d6-outro__bg{position:absolute;inset:0;z-index:-2}
.d6-outro::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(34,48,31,.88)}
.d6-outro h2{color:var(--paper);font-size:clamp(1.9rem,1.45rem + 2.2vw,3.2rem);line-height:1.04;letter-spacing:-.03em;margin:1.3rem auto 1.25rem;max-width:18ch}
.d6-outro .mm-body{color:rgba(243,255,239,.82);max-width:58ch;margin-inline:auto}
.d6-outro__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2rem}