/* ============================================================
   MYSTIQUE COMPANIONS — Concept 01 "Maison"
   Heritage editorial. Playfair Display + Mulish (live-site pair).
   Palette: champagne cream ground, antique gold, espresso ink.
   ============================================================ */

:root{
  /* ---- Golden-Beige core ---- */
  --cream:#FBF7EF;
  --cream-2:#F4EDE0;
  --sand:#E9DFCC;
  --gold:#B8975A;
  --gold-lt:#D6BC86;
  --gold-dp:#8E7038;
  --espresso:#241E17;
  --ink:#2B2419;
  --ink-soft:#6A5F4E;
  --ink-mute:#948871;
  --line:rgba(36,30,23,.14);
  --line-gold:rgba(184,151,90,.42);

  /* ---- Liquid type scale ----
     vmin-driven, so a LANDSCAPE PHONE never inherits desktop-sized
     type: vmin tracks the SHORT edge, which is what "how big does
     this feel" actually depends on. */
  --f-micro: clamp(.66rem, .6rem + .22vmin, .74rem);
  --f-small: clamp(.78rem, .72rem + .3vmin, .875rem);
  --f-body:  clamp(.98rem, .92rem + .42vmin, 1.09rem);
  --f-lead:  clamp(1.06rem, .95rem + .82vmin, 1.42rem);
  --f-h3:    clamp(1.25rem, 1rem + 1.35vmin, 1.9rem);
  --f-h2:    clamp(1.75rem, 1.15rem + 2.9vmin, 3.5rem);
  --f-h1:    clamp(2.35rem, 1.2rem + 5.6vmin, 6.4rem);

  /* ---- Liquid spacing ---- */
  --gut: clamp(1.15rem, .5rem + 3.4vw, 4.5rem);
  --band: clamp(3.4rem, 1.5rem + 7.6vmin, 8.5rem);
  --rule: 1px;
  --shell: 1560px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--f-body);line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
  
}
img,picture,svg{max-width:100%;display:block}
img{height:auto;background:var(--sand)}
img[src*="logo"],img[src*="monogram"]{background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;font-weight:400;margin:0;line-height:1.1;letter-spacing:-.005em}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--gold-dp);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold);color:#fff}

.shell{width:min(100% - (var(--gut) * 2), var(--shell));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--espresso);color:var(--cream);padding:.8rem 1.2rem;z-index:999}
.skip:focus{left:.6rem;top:.6rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- Typographic utilities ---- */
.eyebrow{
  font-family:"Mulish",sans-serif;font-size:var(--f-micro);font-weight:700;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold-dp);
  display:flex;align-items:center;gap:.9em;margin:0 0 1.3rem;
}
.eyebrow::after{content:"";flex:1;height:var(--rule);background:var(--line-gold);max-width:5.5rem}
.eyebrow.is-centred{justify-content:center}
.eyebrow.is-centred::before{content:"";flex:1;height:var(--rule);background:var(--line-gold);max-width:5.5rem}
.lead{font-size:var(--f-lead);line-height:1.62;color:var(--ink-soft);font-weight:300}

/* ---- Buttons ---- */
.btn{
  --bg:var(--espresso);--fg:var(--cream);--bd:var(--espresso);
  display:inline-flex;align-items:center;gap:.7em;
  padding:clamp(.78rem,.55rem + .6vmin,1.05rem) clamp(1.4rem,1rem + 1.5vmin,2.4rem);
  background:var(--bg);color:var(--fg);border:var(--rule) solid var(--bd);
  font-size:var(--f-micro);font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
  cursor:pointer;
}
.btn:hover{--bg:var(--gold-dp);--bd:var(--gold-dp)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-gold)}
.btn--ghost:hover{--bg:var(--espresso);--fg:var(--cream);--bd:var(--espresso)}
.btn--light{--bg:transparent;--fg:var(--cream);--bd:rgba(232,220,200,.4)}
.btn--light:hover{--bg:var(--gold);--fg:var(--espresso);--bd:var(--gold)}
.arrow{transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(.32em)}

.link-ul{
  display:inline-flex;align-items:center;gap:.55em;font-size:var(--f-small);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dp);
  padding-bottom:.28rem;border-bottom:var(--rule) solid var(--line-gold);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.link-ul:hover{color:var(--espresso);border-color:var(--espresso)}
.link-ul:hover .arrow{transform:translateX(.3em)}

/* ============ HEADER ============ */
.announce{
  background:var(--espresso);color:var(--sand);
  font-size:var(--f-micro);letter-spacing:.24em;text-transform:uppercase;
  text-align:center;padding:.62rem var(--gut);
}
.announce b{color:var(--gold-lt);font-weight:700}

.masthead{
  position:sticky;top:0;z-index:80;background:rgba(251,247,239,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:var(--rule) solid var(--line);
}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:var(--gut);
  padding-block:clamp(.7rem,.4rem + 1.2vmin,1.5rem)}
.brand{display:block;flex:0 0 auto}
.brand img{width:clamp(140px,9.5vw + 92px,246px)}
.nav{display:flex;align-items:center;gap:clamp(.9rem,.3rem + 1.5vw,2.3rem)}
.nav a{font-size:var(--f-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  position:relative;padding-block:.35rem;transition:color .35s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:var(--rule);background:var(--gold);transition:width .45s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--espresso)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.masthead .btn{flex:0 0 auto}

.burger{display:none;width:2.9rem;height:2.9rem;border:var(--rule) solid var(--line-gold);background:transparent;
  align-items:center;justify-content:center;cursor:pointer;padding:0}
.burger span{display:block;width:1.15rem;height:1px;background:var(--espresso);position:relative;transition:background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--espresso);transition:transform .4s var(--ease)}
.burger span::before{top:-.32rem}
.burger span::after{top:.32rem}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(.32rem) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-.32rem) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(36,30,23,.4);opacity:0;pointer-events:none;transition:opacity .5s var(--ease);z-index:85}
.scrim[data-open="true"]{opacity:1;pointer-events:auto}

/* ============ HERO ============ */
.hero{position:relative;isolation:isolate;display:grid;place-items:center;
  min-height:clamp(30rem,92svh,60rem);padding-block:var(--band);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(251,247,239,.9) 0%,rgba(249,243,232,.68) 34%,rgba(244,237,224,.8) 76%,var(--cream) 100%)}
.hero__in{text-align:center;max-width:min(100%,58ch);position:relative}
.hero h1{font-size:var(--f-h1);line-height:1.02;font-weight:400;margin:0 0 clamp(1rem,.5rem + 1.6vmin,2rem)}
.hero h1 em{font-style:italic;color:var(--gold-dp)}
.hero__sub{font-size:var(--f-lead);font-weight:300;color:var(--ink-soft);margin-inline:auto;max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:clamp(1.5rem,.8rem + 2.2vmin,2.8rem)}
.hero__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,.5rem + 2vw,3.2rem);
  margin:clamp(2rem,1rem + 3vmin,4rem) 0 0;padding-top:clamp(1.2rem,.6rem + 1.6vmin,2rem);border-top:var(--rule) solid var(--line-gold)}
.hero__meta div{text-align:center}
.hero__meta dt{font-family:"Playfair Display",serif;font-size:var(--f-h3);color:var(--espresso);line-height:1}
.hero__meta dd{margin:.5rem 0 0;font-size:var(--f-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute)}

/* ============ SECTIONS ============ */
.band{padding-block:var(--band)}
.band--sand{background:var(--cream-2)}
.band--dark{background:var(--espresso);color:var(--sand)}
.band--dark h2,.band--dark h3{color:var(--cream)}
.band--dark .eyebrow{color:var(--gold-lt)}
.band--dark .lead{color:rgba(233,223,204,.78)}
.sec-head{max-width:62ch;margin:0 0 clamp(2rem,1rem + 3vmin,3.8rem)}
.sec-head.is-centred{margin-inline:auto;text-align:center}
.sec-head h2{font-size:var(--f-h2);margin:0 0 .7rem}

/* -- Manifesto -- */
.manifesto{display:grid;gap:clamp(1.8rem,1rem + 3.4vw,5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:62rem){.manifesto{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr)}}
.manifesto__fig{position:relative;margin:0}
.manifesto__fig img{width:100%;aspect-ratio:3/4;object-fit:cover}
.manifesto__fig figcaption{position:absolute;left:0;bottom:0;transform:translateY(45%);
  background:var(--cream);padding:clamp(.9rem,.5rem + 1.2vmin,1.5rem) clamp(1rem,.6rem + 1.4vmin,1.9rem);
  border-left:2px solid var(--gold);max-width:min(85%,28rem);font-size:var(--f-small);color:var(--ink-soft);font-style:italic}
.dropcap::first-letter{
  font-family:"Playfair Display",serif;float:left;font-size:3.6em;line-height:.78;
  padding:.06em .12em 0 0;color:var(--gold-dp);font-weight:400;
}

/* -- Services -- */
.svc{display:grid;gap:0;grid-template-columns:1fr;border-top:var(--rule) solid var(--line)}
@media (min-width:60rem){.svc{grid-template-columns:repeat(3,1fr)}}
.svc__item{padding:clamp(1.6rem,.9rem + 2.4vmin,3rem) 0;border-bottom:var(--rule) solid var(--line)}
@media (min-width:60rem){
  .svc__item{padding-inline:clamp(1.4rem,.6rem + 2vw,2.8rem);border-bottom:0}
  .svc__item + .svc__item{border-left:var(--rule) solid var(--line)}
  .svc__item:first-child{padding-left:0}
  .svc__item:last-child{padding-right:0}
}
.svc__num{font-family:"Playfair Display",serif;font-size:var(--f-small);color:var(--gold);letter-spacing:.2em;display:block;margin-bottom:1rem}
.svc__item h3{font-size:var(--f-h3);margin:0 0 .9rem}
.svc__item p{color:var(--ink-soft);font-size:var(--f-small);line-height:1.78}

/* -- Companions rail -- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(14rem,44vw,20.5rem);gap:clamp(.9rem,.4rem + 1.5vw,1.9rem);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.4rem;
  scrollbar-width:thin;scrollbar-color:var(--gold) var(--sand);
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-track{background:var(--sand)}
.rail::-webkit-scrollbar-thumb{background:var(--gold)}
.card{scroll-snap-align:start}
.card__fig{position:relative;overflow:hidden;margin:0}
.card__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.1s var(--ease),filter .8s var(--ease);filter:saturate(.94)}
.card:hover .card__fig img{transform:scale(1.045);filter:saturate(1.04)}
.card__tag{position:absolute;top:.9rem;left:.9rem;background:rgba(251,247,239,.93);color:var(--gold-dp);
  font-size:var(--f-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:.42rem .8rem}
.card__body{padding:1.15rem 0 0}
.card__body h3{font-size:var(--f-h3);margin:0 0 .18rem}
.card__loc{font-size:var(--f-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 .8rem}
.card__body p{font-size:var(--f-small);color:var(--ink-soft);line-height:1.7;margin-bottom:.9rem}
.rail-nav{display:flex;gap:.55rem;justify-content:flex-end;margin-top:.4rem}
.rail-nav button{width:2.9rem;height:2.9rem;border:var(--rule) solid var(--line-gold);background:transparent;color:var(--espresso);
  cursor:pointer;display:grid;place-items:center;transition:background .35s var(--ease),color .35s var(--ease)}
.rail-nav button:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}

/* -- Steps -- */
.steps{counter-reset:s;display:grid;gap:0}
.step{counter-increment:s;display:grid;gap:clamp(.6rem,.3rem + 1.4vw,2.6rem);
  grid-template-columns:1fr;padding-block:clamp(1.5rem,.9rem + 2.2vmin,2.8rem);border-top:var(--rule) solid rgba(233,223,204,.2)}
@media (min-width:52rem){.step{grid-template-columns:6rem minmax(0,22ch) minmax(0,1fr);align-items:baseline}}
.step::before{content:counter(s,decimal-leading-zero);font-family:"Playfair Display",serif;
  font-size:var(--f-h3);color:var(--gold-lt);line-height:1}
.step h3{font-size:var(--f-h3);margin:0}
.step p{margin:0;color:rgba(233,223,204,.76);font-size:var(--f-small);line-height:1.8}

/* -- Reasons -- */
.reasons{display:grid;gap:clamp(1.5rem,.8rem + 2.4vw,3.4rem);grid-template-columns:1fr}
@media (min-width:48rem){.reasons{grid-template-columns:repeat(2,1fr)}}
@media (min-width:78rem){.reasons{grid-template-columns:repeat(3,1fr)}}
.reason{border-top:2px solid var(--gold);padding-top:1.2rem}
.reason h3{font-size:var(--f-h3);margin:0 0 .6rem}
.reason p{font-size:var(--f-small);color:var(--ink-soft);line-height:1.78;margin:0}

/* -- Destinations -- */
.dest{display:grid;gap:clamp(1.6rem,1rem + 2.6vw,4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:64rem){.dest{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.dest__list{display:flex;flex-wrap:wrap;gap:.5rem .35rem;margin:0;padding:0;list-style:none}
.dest__list li{font-family:"Playfair Display",serif;font-size:clamp(1.05rem,.7rem + 1.5vmin,2.1rem);color:var(--ink);line-height:1.28}
.dest__list li::after{content:"·";color:var(--gold);margin-inline:.5em}
.dest__list li:last-child::after{content:""}
.dest__list li.is-dim{color:var(--ink-mute)}
.dest__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,.25rem + .8vw,1rem);
  --stagger:clamp(.8rem,.4rem + 1.6vw,2.6rem);padding-bottom:var(--stagger)}
.dest__grid img{width:100%;aspect-ratio:3/4;object-fit:cover}
.dest__grid figure{margin:0}
/* Drop the whole right-hand column, not alternating tiles. Offsetting 2
   and 3 pushed column 1's pair apart while making column 2's pair overlap;
   offsetting 2 and 4 keeps both columns evenly gapped and reads as a
   deliberate stagger. The padding reserves the space the transform spills. */
.dest__grid figure:nth-child(2),.dest__grid figure:nth-child(4){transform:translateY(var(--stagger))}

/* -- Membership -- */
.mship{display:grid;gap:clamp(1.8rem,1rem + 3vw,4.5rem);grid-template-columns:1fr}
@media (min-width:64rem){.mship{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}}
.mship__list{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.1rem}
.mship__list li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;
  padding-block:.9rem;border-bottom:var(--rule) solid rgba(233,223,204,.16);font-size:var(--f-small);line-height:1.7}
.mship__list li::before{content:"—";color:var(--gold-lt)}
.mship__panel{border:var(--rule) solid rgba(184,151,90,.4);padding:clamp(1.5rem,.9rem + 2.4vmin,3rem);align-self:start}
.mship__panel h3{font-size:var(--f-h3);margin:0 0 1rem}
.mship__panel p{font-size:var(--f-small);color:rgba(233,223,204,.78);line-height:1.8}

/* -- FAQ -- */
.faq{border-top:var(--rule) solid var(--line)}
.faq details{border-bottom:var(--rule) solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;cursor:pointer;
  list-style:none;padding-block:clamp(1rem,.7rem + 1.3vmin,1.6rem);font-family:"Playfair Display",serif;
  font-size:var(--f-h3);line-height:1.28;transition:color .35s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-dp)}
.faq summary i{flex:0 0 auto;width:1.5rem;height:1.5rem;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--gold);transform:translateY(-50%)}
.faq summary i::after{transform:translateY(-50%) rotate(90deg);transition:opacity .35s var(--ease)}
.faq details[open] summary i::after{opacity:0}
.faq__a{padding:0 0 clamp(1.1rem,.7rem + 1.4vmin,1.9rem);max-width:82ch}
.faq__a p{color:var(--ink-soft);font-size:var(--f-small);line-height:1.82;margin:0 0 .7em}

/* -- Closing CTA -- */
.closing{position:relative;isolation:isolate;text-align:center;padding-block:clamp(4rem,2rem + 9vmin,10rem);overflow:hidden}
.closing__bg{position:absolute;inset:0;z-index:-2}
.closing__bg img{width:100%;height:100%;object-fit:cover}
.closing__bg::after{content:"";position:absolute;inset:0;background:rgba(36,30,23,.66)}
.closing h2{color:var(--cream);font-size:var(--f-h2);margin:0 auto .9rem;max-width:22ch}
.closing p{color:rgba(233,223,204,.84);max-width:52ch;margin:0 auto 2rem;font-size:var(--f-lead);font-weight:300}

/* -- Footer -- */
.foot{background:var(--espresso);color:rgba(233,223,204,.72);padding-block:var(--band) 0;font-size:var(--f-small)}
.foot__grid{display:grid;gap:clamp(1.8rem,1rem + 3vw,4rem);grid-template-columns:1fr}
@media (min-width:46rem){.foot__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:70rem){.foot__grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.foot h4{font-size:var(--f-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lt);
  font-family:"Mulish",sans-serif;font-weight:700;margin:0 0 1.2rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.foot a{transition:color .3s var(--ease)}
.foot a:hover{color:var(--gold-lt)}
.foot__brand img{width:clamp(160px,14vw,232px);margin-bottom:1.3rem}
.foot__bottom{margin-top:var(--band);border-top:var(--rule) solid rgba(233,223,204,.14);
  padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:var(--f-micro);letter-spacing:.14em;text-transform:uppercase;color:rgba(233,223,204,.5)}

/* ============ REVEAL ============ */
[data-rise]{opacity:0;transform:translateY(1.6rem);transition:opacity .95s var(--ease),transform .95s var(--ease)}
[data-rise].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rise]{opacity:1;transform:none}}

/* ============================================================
   ORIENTATION + LIQUID BEHAVIOUR
   ============================================================ */

/* Mobile nav drawer */
@media (max-width:60rem){
  .burger{display:flex}
  .nav{position:fixed;inset:0 0 0 auto;width:min(85vw,26rem);background:var(--cream);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.5rem;
    padding:var(--gut);transform:translateX(101%);transition:transform .58s var(--ease);
    z-index:90;border-left:var(--rule) solid var(--line-gold);overflow-y:auto}
  .nav[data-open="true"]{transform:none}
  .nav a{font-size:var(--f-lead);letter-spacing:.1em;text-transform:none;font-family:"Playfair Display",serif;font-weight:400}
  .masthead > .shell > .btn{display:none}
}
@media (min-width:60.0625rem){.nav .btn{display:none}.scrim{display:none}}

/* PHONE IN LANDSCAPE — the classic failure case.
   Short viewport: collapse vertical rhythm, keep the hero on one
   screen, and lay the drawer out in two columns so it never scrolls. */
@media (orientation:landscape) and (max-height:34rem){
  :root{--band:clamp(1.8rem,1rem + 3.4vmin,3.2rem)}
  .hero{min-height:auto;padding-block:clamp(2.2rem,10svh,4rem)}
  .hero__in{max-width:min(100%,72ch)}
  .hero h1{font-size:clamp(1.8rem,1rem + 5.4vmin,3.2rem)}
  .hero__meta{margin-top:1.3rem;padding-top:1rem;gap:1.4rem}
  .hero__cta{margin-top:1.1rem}
  .announce{padding-block:.4rem}
  .nav{width:min(72vw,32rem);display:grid;grid-template-columns:repeat(2,1fr);
    align-content:center;gap:.9rem 1.6rem;padding-block:1.2rem}
  .nav .btn{grid-column:1 / -1;justify-content:center}
  .step{padding-block:1rem}
  .rail{grid-auto-columns:clamp(11rem,26vw,15rem)}
  .manifesto__fig figcaption{position:static;transform:none;max-width:none;margin-top:.9rem}
}

/* TABLET / LARGE PHONE IN PORTRAIT */
@media (orientation:portrait) and (max-width:60rem){
  .hero{min-height:clamp(28rem,80svh,44rem)}
  .dest__grid{padding-bottom:0}
  .dest__grid figure:nth-child(2),.dest__grid figure:nth-child(4){transform:none}
  .manifesto__fig figcaption{position:static;transform:none;max-width:none;margin-top:1rem}
}

/* Very wide screens — cap the measure, never the imagery */
@media (min-width:118rem){:root{--shell:1720px}}

/* Touch devices: drop hover-dependent affordances */
@media (hover:none){
  .card:hover .card__fig img{transform:none}
  .rail-nav{display:none}
}