/* The generated pages (experiences, the cars, the plans, the journal): the white header, the heroes, the questions, the cards.
   The home page loads this file too for the cards it shares with these pages. Palette: ink, paper, gold, white. The guides and the
   journal have their own rules at the end of this file (jr-, xg-). */
.doc-page{background:var(--paper)}
.doc-page .site-header{position:sticky;top:0;z-index:30;color:var(--ink)}
.doc-page .nav-link,.doc-page .language-toggle{color:var(--ink);text-decoration:none}
.doc-page .nav-link:after{background:var(--ink)}
.doc-page .header-divider{background:#10101033}
.doc-page .section-shell{width:min(1280px,calc(100% - 128px));margin-inline:auto}
.doc-page .section-kicker{color:var(--gold)}
.doc-main{background:var(--paper)}

/* Buttons. */
.doc-page .primary-button{width:auto;min-width:0;margin:0;min-height:52px;padding:0 22px;gap:14px;background:var(--ink);color:var(--white);border:1px solid var(--ink);border-radius:2px;font-size:14px;font-weight:600;text-decoration:none}
.doc-page .primary-button:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.doc-page .primary-button .icon{width:17px;height:17px}
.ghost-button{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border:1px solid var(--ink);border-radius:2px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:color .2s,border-color .2s}
.ghost-button:hover{border-color:var(--gold);color:var(--gold)}
.ghost-button .icon{width:16px;height:16px}

/* The hero of an experience and of the cars page: words on the left, the photo on the right. */
.xp-hero{padding:56px 0 52px;background:var(--white);border-bottom:1px solid var(--line)}
.xp-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.xp-hero h1,.post-head h1{margin:14px 0 0;font-size:clamp(38px,4.6vw,66px);font-weight:500;letter-spacing:-.035em;line-height:1.02}
.xp-lede{margin:20px 0 0;max-width:640px;font-size:18px;line-height:1.65;color:var(--muted)}
.xp-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
.xp-hero-media{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:var(--ink)}
.xp-hero-media img{display:block;width:100%;height:100%;object-fit:cover}
figure figcaption{margin-top:6px;font-size:11px;color:var(--muted)}
.xp-hero-media figcaption,.post-hero-media figcaption{position:absolute;right:10px;bottom:8px;margin:0;padding:3px 8px;background:#101010a6;color:#ffffffcc;border-radius:2px}

/* Questions (the cars page, the plan pages, the guides). */
.doc-faq details{border-top:1px solid var(--line)}
.doc-faq details:last-child{border-bottom:1px solid var(--line)}
.doc-faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 0;cursor:pointer;list-style:none;font-size:16.5px;font-weight:600;line-height:1.4}
.doc-faq summary::-webkit-details-marker{display:none}
.doc-faq summary::after{content:'+';flex:none;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--gold);font-weight:500}
.doc-faq details[open] summary::after{content:'−'}
.doc-faq details p{padding:0 0 18px;margin:0;font-size:16px;color:var(--muted)}
/* Books and links. */
.doc-books ul{list-style:none;margin:0;padding:0}
.doc-books li{display:grid;gap:3px;padding:14px 0;margin:0;border-top:1px solid var(--line)}
.doc-books li:last-child{border-bottom:1px solid var(--line)}
.doc-books b{font-weight:600;font-size:16px}
.doc-books span{font-size:14px;color:var(--muted)}
.doc-books small{font-size:12.5px;color:var(--muted)}
/* The cars on their page: the same cards as the home page, two to a row in the reading column. */
.cars-fleet .fleet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;margin-top:8px}

/* The way into the builder. */
.cta-band{margin-top:72px;padding:88px 0;background:var(--ink);color:var(--white);text-align:center}
.cta-band .section-kicker{color:var(--gold)}
.cta-band .section-title{color:var(--white);max-width:760px;margin:14px auto 0}
.cta-band .section-title em{font-style:italic}
.cta-band p{max-width:580px;margin:18px auto 0;font-size:16px;line-height:1.7;color:#ded7cb}
.cta-band .primary-button{margin-top:30px;background:var(--white);color:var(--ink);border-color:var(--white)}

/* Related pages, and the cards of stories. */
.doc-related{padding:72px 0 0}
.doc-related h2{margin:0 0 22px;font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.03em}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.rel-card{display:block;color:var(--ink);text-decoration:none;background:var(--white);border-radius:6px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.rel-card:hover,.post-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px #10101014}
.rel-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--ink)}
.rel-kicker{display:block;padding:14px 16px 0;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.rel-title{display:block;padding:6px 16px 18px;font-size:17px;font-weight:600;line-height:1.35}
.doc-credits{padding:40px 0 52px;font-size:12px;line-height:1.6;color:var(--muted)}
/* the cards of stories, on the home page */
.post-card{display:flex;flex-direction:column;min-width:0;color:var(--ink);text-decoration:none;background:var(--white);border-radius:6px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.post-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--ink)}
.post-card-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 22px}
.post-card-body .rel-kicker{padding:0}
.post-card-title{display:block;margin-top:8px;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.post-card-copy{display:block;margin-top:10px;font-size:14px;line-height:1.6;color:var(--muted)}
.post-card-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-size:13px;font-weight:600}
.post-card-more .icon{width:14px;height:14px;transition:transform .25s}
.post-card:hover .post-card-more .icon{transform:translateX(4px)}

/* The slim footer. */
.doc-footer{background:var(--ink);color:#ded7cb;border-top:1px solid #ffffff1f}
.doc-footer .section-shell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:26px 0;font-size:13px}
.doc-footer a{display:inline-flex;align-items:center;gap:8px;color:var(--white);text-decoration:none}
.doc-footer a:hover{color:var(--gold)}
.doc-footer .icon{width:14px;height:14px}
.doc-footer .icon.is-back{transform:rotate(180deg)}

@media(max-width:1120px){
  .doc-page .section-shell{width:calc(100% - 88px)}
  .xp-hero-grid{gap:32px}
}
@media(max-width:900px){
  .xp-hero-grid{grid-template-columns:1fr}
  .xp-hero-media{order:-1;aspect-ratio:16/10}
  .cars-fleet .fleet-grid{margin-top:0}
}
@media(max-width:760px){
  .doc-page .section-shell{width:calc(100% - 40px)}
  .xp-hero{padding:36px 0 40px}
  .xp-hero h1{font-size:clamp(32px,9vw,44px)}
  .xp-lede{font-size:16px}
  .xp-actions .primary-button,.xp-actions .ghost-button{width:100%;justify-content:space-between}
  .cta-band{margin-top:56px;padding:64px 0}
  .doc-related{padding-top:56px}
}

/* UNUSED SINCE 15 NOVEMBER 2026, kept for reference only (commented out): the old layout of the journal and the guides, with its
   reading column and the side rail beside it (the table of contents, the card of facts, the dark "your stay" card). Nothing on the
   site carries these classes any more; the reading pages now use the jr- and xg- rules at the end of this file.
.post-head{padding:52px 0 44px;background:var(--white)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;margin:0;font-size:12.5px;letter-spacing:.3px;color:var(--muted)}
.post-meta>*+*::before{content:'·';margin:0 10px;color:var(--gold)}
.post-meta a{color:var(--gold);font-weight:600;text-decoration:none}
.post-head h1{max-width:960px}
.post-head .xp-lede{max-width:760px}
.facts-strip{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px;margin:36px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.facts-strip li{min-width:0}
.facts-strip b{display:block;font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.facts-strip span{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--muted)}
.post-hero-media{position:relative;margin:0;width:100%;height:clamp(340px,56vh,680px);background:var(--ink)}
.post-hero-media img{display:block;width:100%;height:100%;object-fit:cover}
.journal-head{padding-bottom:40px;border-bottom:1px solid var(--line)}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 clamp(40px,6vw,88px);align-items:start;padding-bottom:16px}
.doc-body{width:min(720px,100%);min-width:0;margin:0 auto}
.doc-section{padding:52px 0 0}
.doc-section h2,.prose h2{margin:0 0 18px;font-size:clamp(26px,2.6vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.doc-body h3{margin:28px 0 10px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.doc-body p{margin:0 0 16px;font-size:17px;line-height:1.75}
.doc-body ul,.doc-body ol{margin:0 0 18px;padding-left:22px}
.doc-body li{margin:7px 0;font-size:16.5px;line-height:1.65}
.doc-body li>b{font-weight:600}
.doc-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
.doc-body a:hover{color:var(--gold)}
.doc-body i{font-style:italic}
.prose{padding-top:52px}
.prose>h2:first-child+p::first-letter,.prose>p:first-child::first-letter{float:left;margin:9px 12px 0 0;font-size:4.4em;line-height:.78;font-weight:500;color:var(--ink)}
.prose h2{margin-top:56px}
.prose h2::before{content:'';display:block;width:28px;height:2px;margin-bottom:18px;background:var(--gold)}
.prose-figure{margin:34px 0 30px}
.prose-figure img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;background:var(--ink)}
.prose-figure figcaption{margin-top:8px;font-size:12.5px;color:var(--muted)}
blockquote.pull{margin:40px 0;padding:0 0 0 26px;border-left:2px solid var(--gold)}
blockquote.pull p{margin:0;font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.35;color:var(--ink)}
.doc-body table{display:block;overflow-x:auto;width:100%;margin:22px 0 10px;border-collapse:collapse;font-size:14px;line-height:1.5}
.doc-body thead th{text-align:left;padding:10px 12px;font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--ink);white-space:nowrap}
.doc-body td{padding:12px 12px;vertical-align:top;border-bottom:1px solid var(--line);min-width:120px}
.doc-body td:first-child{min-width:150px}
.doc-body tbody tr:hover{background:#ffffff80}
.doc-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:30px 0 8px}
.doc-gallery figure{margin:0}
.doc-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--ink)}
.doc-rail{min-width:0}
.rail-sticky{position:sticky;top:calc(var(--header-height,80px) + 24px);display:grid;gap:18px;padding-top:52px}
.rail-toc{display:grid;margin-bottom:6px}
.rail-toc p{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.rail-toc a{padding:8px 0 8px 14px;border-left:2px solid var(--line);font-size:13.5px;font-weight:600;line-height:1.35;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.rail-toc a:hover,.rail-toc a.is-current{color:var(--ink);border-left-color:var(--gold)}
.rail-card{padding:22px 24px 24px;background:var(--white);border-top:2px solid var(--gold);border-radius:6px}
.rail-card-kicker{margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.rail-card dl{display:grid;gap:14px;margin:0}
.rail-card dt{font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.rail-card dd{margin:3px 0 0;font-size:14.5px;line-height:1.55}
.rail-cta{background:var(--ink);color:var(--white)}
.rail-cta-kicker{margin:0;font-size:11px;font-weight:600;letter-spacing:1.4px;color:var(--gold)}
.rail-cta p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:#ded7cb}
.rail-cta .primary-button{width:100%;justify-content:space-between;margin-top:18px;background:var(--white);color:var(--ink);border-color:var(--white)}
.rail-cta .ghost-button{width:100%;justify-content:center;margin-top:10px;border-color:#ffffff4d;color:var(--white)}
.rail-cta .ghost-button:hover{border-color:var(--gold);color:var(--gold)}
.journal-list{padding:48px 0 24px}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.post-card.is-featured{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;margin-bottom:24px}
.post-card.is-featured img{aspect-ratio:3/2;height:100%}
.post-card.is-featured .post-card-body{padding:36px 40px}
.post-card.is-featured .post-card-title{font-size:clamp(26px,2.6vw,36px);font-weight:500;letter-spacing:-.03em}
.post-card.is-featured .post-card-copy{font-size:16px}
@media(max-width:1120px){.doc-layout{grid-template-columns:minmax(0,1fr) 260px}}
@media(max-width:900px){
  .doc-layout{grid-template-columns:1fr}
  .doc-rail,.rail-sticky{display:contents}
  .rail-toc{display:none}
  .rail-card.rail-facts{order:-1;margin-top:40px}
  .rail-card{margin-top:40px}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-card.is-featured{grid-template-columns:1fr}
  .post-card.is-featured .post-card-body{padding:22px 24px 26px}
  .facts-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-hero-media{height:clamp(260px,46vh,480px)}
}
@media(max-width:760px){
  .post-head h1{font-size:clamp(32px,9vw,44px)}
  .doc-body{width:100%}
  .doc-section,.prose{padding-top:40px}
  .doc-body p{font-size:16px}
  .doc-body li{font-size:15.5px}
  .prose h2{margin-top:44px}
  blockquote.pull{margin:32px 0;padding-left:18px}
  .post-grid{grid-template-columns:1fr}
  .post-head{padding:36px 0 32px}
  .facts-strip{gap:16px 20px;margin-top:28px;padding-top:22px}
  .facts-strip b{font-size:26px}
  .rail-card{padding:20px 20px 22px;margin-top:32px}
}
(end of the unused rules) */

/* ──────────── The plans page (dist/plans.html) and the plan pages (dist/plans/<slug>.html) ──────────── */
.plans-head h1 em{font-style:normal;color:var(--gold)}
.plans-list{padding:clamp(36px,5vw,64px) 0 8px}
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
/* A plan, in the manner of the car cards: the photo on its own, the name, three things it holds, the price and the way in. */
.plan-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:10px 10px 18px;background:var(--white);border:1px solid var(--line);border-radius:18px;transition:border-color .2s,box-shadow .25s,transform .25s}
.plan-card:hover{border-color:#10101038;box-shadow:0 22px 44px -26px #10101055;transform:translateY(-2px)}
.plan-card.is-signature{border-color:var(--gold)}
.plan-card-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--ink)}
.plan-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.plan-card:hover .plan-card-media img{transform:scale(1.04)}
.plan-pill{position:absolute;top:12px;left:12px;padding:6px 11px;border-radius:999px;background:var(--white);color:var(--ink);font-size:10.5px;font-weight:600;letter-spacing:1.2px}
.plan-index{position:absolute;top:12px;right:12px;padding:5px 10px;border-radius:999px;background:#1010108c;color:var(--white);font-size:11px;font-weight:600;letter-spacing:1px;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.plan-badge{position:absolute;left:12px;bottom:12px;padding:6px 11px;border-radius:999px;background:var(--whatsapp,#25d366);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.plan-card-body{display:flex;flex-direction:column;flex:1;padding:18px 8px 0}
.plan-theme{margin:0;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.plan-name{margin:6px 0 0;font-size:clamp(24px,2vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.plan-name a{color:var(--ink);text-decoration:none}
.plan-name a::after{content:'';position:absolute;inset:0;border-radius:18px} /* the whole card opens the plan */
.plan-desc{display:-webkit-box;margin:10px 0 0;overflow:hidden;font-size:14.5px;line-height:1.6;color:var(--muted);-webkit-line-clamp:3;-webkit-box-orient:vertical}
.plan-keys{list-style:none;display:grid;gap:9px;margin:16px 0 20px;padding:0}
.plan-keys li{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.35;color:var(--ink)}
.plan-keys .icon{flex:none;width:17px;height:17px;color:var(--gold);stroke-width:1.6}
.plan-keys li:first-child{font-weight:600}
.plan-keys li:first-child .icon{fill:currentColor}
.plan-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin:0}
.plan-price small{width:100%;font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.plan-price strong{font-size:22px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.plan-price span{font-size:12px;color:var(--muted)}
.plan-go{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 5px 0 16px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.plan-go .icon{box-sizing:border-box;width:32px;height:32px;padding:9px;border-radius:50%;background:var(--ink);color:var(--white);transition:background .2s,color .2s}
.plan-card:hover .plan-go{background:var(--ink);color:var(--white)}
.plan-card:hover .plan-go .icon{background:var(--white);color:var(--ink)}
/* At a glance: the plans side by side; on a phone the table slides sideways with the plan names held on the left. */
.plans-glance{padding:clamp(56px,7vw,88px) 0 0}
.plans-glance h2{margin:0;font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.03em}
.plans-glance>p{margin:10px 0 0;max-width:62ch;font-size:15.5px;line-height:1.65;color:var(--muted)}
.glance-wrap{margin-top:28px;overflow-x:auto;border:1px solid var(--line);border-radius:2px;background:var(--white);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.glance{width:100%;min-width:780px;border-collapse:collapse;font-size:14px;line-height:1.45}
.glance th,.glance td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.glance tbody tr:last-child>*{border-bottom:0}
.glance thead th{background:var(--white);font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.glance thead th:first-child,.glance tbody th{position:sticky;left:0;z-index:1}
.glance tbody th{background:var(--white);font-weight:600;white-space:nowrap;box-shadow:1px 0 0 var(--line)}
.glance tbody th a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.glance-price{font-weight:600;white-space:nowrap}
.glance-no{color:#5c5a5573}
/* A plan's page. */
.plan-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:16px 0;font-size:12.5px;color:var(--muted)}
.plan-crumbs a{color:var(--ink);text-decoration:none}
.plan-crumbs a:hover{color:var(--gold)}
.plan-story .pk-name h1{margin:6px 0 0;font-family:var(--sans);font-size:clamp(32px,2.9vw,46px);font-weight:500;font-style:normal;letter-spacing:-.04em;line-height:1.04;color:var(--ink)}
.plan-story .pk-sec h2{margin:0;font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.plan-story .pk-sec h2::before{content:'';display:block;width:28px;height:2px;margin-bottom:16px;background:var(--gold)}
.plan-houses{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:420px;margin:16px 0 0;padding:0}
.plan-houses li{display:grid;gap:1px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.plan-houses b{font-size:14px;font-weight:600}
.plan-houses span{font-size:12px;color:var(--muted)}
.plan-houses strong{margin-top:6px;font-size:17px;font-weight:600;letter-spacing:-.01em}
a.pk-select,a.pk-custom{text-decoration:none}
.plan-others h2{margin:0 0 24px;font-size:clamp(26px,2.6vw,36px);font-weight:500;letter-spacing:-.03em}
.plan-all{margin:28px 0 0}
@media(max-width:1120px){.plans-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(max-width:900px){
  .doc-page .pk .pk-media{top:var(--header-height,72px)}
  .plan-crumbs{padding:12px 0}
}
@media(max-width:700px){
  .plans-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .plan-card{padding:8px 8px 16px;border-radius:16px}
  .plan-card-media{aspect-ratio:16/11;border-radius:11px}
  .plan-card-body{padding:16px 8px 0}
  .plan-name{font-size:26px}
  .plan-desc{-webkit-line-clamp:4}
  .plans-glance>p{font-size:15px}
  .glance th,.glance td{padding:12px 14px}
}
@media(prefers-reduced-motion:reduce){.plan-card,.plan-card-media img{transition:none}}
/* Phones: the comparison becomes one small card per plan, each line a label and its value; no sideways scrolling. */
@media(max-width:700px){
  .glance-wrap{overflow:visible}
  .glance{min-width:0}
  .glance thead{display:none}
  .glance,.glance tbody,.glance tr,.glance tbody th,.glance td{display:block}
  .glance tr{padding:16px 18px 10px;border-bottom:1px solid var(--line)}
  .glance tbody tr:last-child{border-bottom:0}
  .glance tbody th{position:static;padding:0 0 8px;border:0;box-shadow:none;font-size:17px}
  .glance td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border:0;border-top:1px solid #ded7cb99;text-align:right}
  .glance td::before{content:attr(data-label);flex:none;font-size:10.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);text-align:left}
  .glance td.glance-price{font-size:16px}
}

/* ───── The page of all plans: the title with the introduction beside it, one plan per row (photo and plan, alternating), the plans
   side by side with the weather line as their footnote. ───── */
.plans-page,.plans-page .doc-main,.plan-page,.plan-page .doc-main{background:var(--white)}
.plans-page .section-kicker,.plan-page .section-kicker{font-size:11px;letter-spacing:1.75px}
.pl-hero{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px)}
.pl-hero .section-shell{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5.5vw,88px);align-items:end}
.pl-hero .section-kicker{margin:0}
.pl-hero h1{max-width:900px;margin:16px 0 0;font-size:clamp(44px,5vw,76px);font-weight:500;letter-spacing:-.045em;line-height:.98;text-shadow:none;text-wrap:balance}
.pl-hero h1 em{color:var(--gold);font-style:normal}
.pl-intro{display:grid;gap:12px;max-width:520px;margin:0;padding-bottom:4px}
.pl-intro p{margin:0;font-size:17px;line-height:1.7;color:var(--muted)}
.pl-facts{grid-column:1/-1;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(40px,5vw,64px) 0 0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pl-facts li{padding:24px 24px 24px 0}
.pl-facts li+li{padding-left:24px;border-left:1px solid var(--line)}
.pl-facts b{display:block;font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.pl-facts span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.pl-list{display:grid;gap:clamp(72px,9vw,136px);padding:clamp(56px,7vw,104px) 0 clamp(72px,8vw,120px)}
.pl-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5.5vw,88px);align-items:start}
.pl-row.is-flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.pl-row.is-flip .pl-media{order:2}
.pl-media{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;border-radius:2px;background:var(--line)}
.pl-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pl-row:hover .pl-media img{transform:scale(1.03)}
.pl-num{position:absolute;left:16px;top:16px;padding:6px 9px;border-radius:2px;background:#10101073;font-size:12px;font-weight:600;letter-spacing:1.5px;line-height:1;color:var(--white)}
.pl-k{margin:0;font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.pl-body h2{margin:14px 0 0;font-size:clamp(38px,4.2vw,60px);font-weight:500;letter-spacing:-.04em;line-height:1}
.pl-body h2 a{color:var(--ink);text-decoration:none;transition:color .2s}
.pl-body h2 a:hover{color:var(--gold)}
.pl-basis{margin:14px 0 0;font-size:14px;color:var(--muted)}
.pl-desc{margin:18px 0 0;max-width:52ch;font-size:16.5px;line-height:1.7;color:var(--muted)}
.pl-keys{list-style:none;margin:24px 0 0;padding:0}
.pl-keys li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4}
.pl-keys li:last-child{border-bottom:1px solid var(--line)}
.pl-keys .icon{flex:none;width:20px;height:20px;color:var(--gold)}
.pl-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 28px;margin-top:28px}
.pl-price{display:grid;gap:4px;margin:0}
.pl-price small{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.pl-price strong{font-size:30px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.pl-price span{font-size:12.5px;line-height:1.5;color:var(--muted)}
.pl-actions{display:flex;align-items:center;gap:22px}
.pl-custom{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;transition:color .2s}
.pl-custom:hover{color:var(--gold)}
.pp-flex{display:flex;gap:12px;max-width:68ch;margin:20px 0 0;font-size:14px;line-height:1.65;color:var(--muted)}
.pp-flex .icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--gold)}
.pl-glance{padding:clamp(56px,7vw,96px) 0;background:var(--white);border-top:1px solid var(--line)}
.pl-glance h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.pl-glance-copy{margin:12px 0 0;font-size:15.5px;color:var(--muted)}
.plans-page .cta-band,.plan-page .cta-band{margin-top:0}
.plans-page .doc-credits,.plan-page .doc-credits{padding:0 0 clamp(40px,5vw,64px)}

/* ───── A plan's page: the photo full width with the name, the facts, the plan with a card that stays in view, the others. ───── */
.pp-hero{position:relative;display:flex;align-items:stretch;min-height:clamp(540px,78vh,780px);overflow:hidden;background:var(--ink);color:var(--white)}
.pp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a shade from the left, where the words are, and from the bottom, under the buttons */
.pp-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101010b3 0%,#10101080 38%,#10101000 72%),linear-gradient(180deg,#10101059 0%,#10101000 30%,#101010b3 100%)}
.pp-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;padding:28px 0 clamp(48px,6vw,80px)}
.pp-crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:auto;font-size:12.5px;color:#ffffffd9}
.pp-crumbs a{color:var(--white);text-decoration:none}
.pp-crumbs a:hover{color:var(--gold)}
.pp-kicker{margin:48px 0 0;font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--white);text-shadow:0 1px 14px #10101059}
.pp-hero h1{margin:14px 0 0;font-size:clamp(56px,8.4vw,128px);font-weight:500;letter-spacing:-.05em;line-height:.92;color:var(--white)}
.pp-lede{max-width:560px;margin:22px 0 0;font-size:18px;line-height:1.6;color:#ffffffe6}
.pp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.doc-page .pp-hero .primary-button{background:var(--white);border-color:var(--white);color:var(--ink)}
.doc-page .pp-hero .primary-button:hover{background:var(--gold);border-color:var(--gold)}
.pp-hero .ghost-button{border-color:#ffffff73;color:var(--white)}
.pp-hero .ghost-button:hover{border-color:var(--white);color:var(--white)}
.pp-facts ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;border-bottom:1px solid var(--line)}
.pp-facts li{padding:28px 20px 28px 0}
.pp-facts li+li{padding-left:20px;border-left:1px solid var(--line)}
.pp-facts b{display:block;font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.pp-facts span{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--muted);text-wrap:balance}
.pp-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(48px,6vw,104px);align-items:start;padding:clamp(56px,6vw,88px) 0 0}
/* the plan in full, before what it holds */
.pp-overview{max-width:52ch;margin:0;font-size:clamp(19px,1.5vw,21px);line-height:1.6;letter-spacing:-.01em;color:var(--ink)}
.pp-overview+.pp-sec{margin-top:clamp(64px,7vw,104px)}
/* sections are parted by space alone (each list closes on its own hairline); a link of "On this page" lands 32px under the header */
.pp-sec{scroll-margin-top:32px}
.pp-sec+.pp-sec{margin-top:clamp(96px,10vw,144px)}
.pp-k{margin:0;font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.pp-sec h2{margin:14px 0 0;max-width:22ch;font-size:clamp(30px,3vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.08}
.pp-intro{max-width:64ch;margin:18px 0 0;font-size:16px;line-height:1.7;color:var(--muted)}
/* hairline grids: a last row that would be half empty is closed by its last item */
.pp-incl{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.pp-incl li{display:flex;flex-direction:column;gap:14px;padding:24px 22px 26px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.pp-incl li:not(:nth-child(3n+1)){padding-left:22px;border-left:1px solid var(--line)}
.pp-incl li:last-child:nth-child(3n+1){grid-column:1/-1}
.pp-incl li:last-child:nth-child(3n+2){grid-column:span 2}
.pp-incl .icon{width:26px;height:26px;color:var(--gold);stroke-width:1.5}
.pp-not{margin-top:28px}
.pp-not p{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.pp-not ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:0;padding:0}
.pp-not li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--muted)}
.pp-not li:last-child:nth-child(odd){grid-column:1/-1}
.pp-not li:before{content:'';flex:none;width:10px;height:1px;margin-top:11px;background:var(--muted)}
.pp-prose{max-width:66ch;margin-top:22px}
.pp-prose p{margin:0 0 16px;font-size:17px;line-height:1.75;color:var(--muted)}
.pp-points{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.pp-points li{padding:26px 26px 28px 0;border-bottom:1px solid var(--line)}
.pp-points li:nth-child(even){padding-left:26px;border-left:1px solid var(--line)}
.pp-points .icon{width:26px;height:26px;color:var(--gold);stroke-width:1.5}
.pp-points b{display:block;margin-top:16px;font-size:18px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.pp-points p{margin:8px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}
/* the hour by hour and the day by day share one column of labels and one label style (words in capitals, the times as written) */
.pp-day{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.pp-day li{display:grid;grid-template-columns:112px minmax(0,1fr) 148px;gap:0 24px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}
.pp-day time,.pp-days span{padding-top:4px;font-size:11px;font-weight:600;letter-spacing:1.5px;line-height:1.45;color:var(--gold);font-variant-numeric:tabular-nums}
.pp-day time.is-word,.pp-days span{text-transform:uppercase}
.pp-day b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.pp-day p{margin:6px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}
.pp-day img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;background:var(--line)}
.pp-opt{padding:2px 8px;border:1px solid var(--line);border-radius:2px;font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.pp-days{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.pp-days li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:0 24px;padding:18px 0;border-bottom:1px solid var(--line)}
.pp-days span{padding-top:5px;white-space:nowrap}
.pp-days p{margin:0;max-width:62ch;font-size:16px;line-height:1.65;color:var(--ink)}
.pp-houses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
.pp-house{display:grid;align-content:start;gap:4px;color:var(--ink);text-decoration:none}
.pp-house img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px;margin-bottom:16px;background:var(--line);transition:opacity .3s}
.pp-house:hover img{opacity:.9}
.pp-house-k{font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.pp-house b{font-size:20px;font-weight:500;letter-spacing:-.02em;transition:color .2s}
.pp-house:hover b{color:var(--gold)}
.pp-house strong{margin-top:8px;font-size:32px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.pp-house small{font-size:13px;line-height:1.5;color:var(--muted)}
.pp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.plan-page .pp-sec.doc-faq h2{margin-bottom:28px}
.plan-page .pp-sec.doc-faq summary{font-size:17px}
.pp-rail{position:sticky;top:calc(var(--header-height,80px) + 28px)}
.pp-card{padding:28px;border:1px solid var(--line);border-radius:2px;background:var(--white)}
.pp-card-k{margin:0;font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.pp-card-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:16px 0 0}
.pp-card-price small{width:100%;font-size:12px;color:var(--muted)}
.pp-card-price strong{font-size:36px;font-weight:500;letter-spacing:-.035em;line-height:1}
.pp-card-price span{font-size:13px;color:var(--muted)}
.pp-card-basis{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);text-wrap:balance}
/* the two ways in, full width, each with its icon beside its words */
.pp-card-actions{display:grid;gap:10px;margin-top:22px}
.doc-page .pp-card .primary-button,.pp-card .ghost-button{display:flex;width:100%;justify-content:center}
.pp-share{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-top:12px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.pp-share .icon{width:15px;height:15px}
.pp-share:hover{color:var(--ink)}
.pp-share.is-done span{display:none}
.pp-share.is-done:after{content:attr(data-tip);color:var(--gold)}
.pp-toc{display:grid;margin-top:28px;padding-left:16px;border-left:1px solid var(--line)}
.pp-toc p{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.pp-toc a{margin-left:-17px;padding:6px 0 6px 16px;border-left:1px solid transparent;font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.pp-toc a:hover{color:var(--ink)}
.pp-toc a.is-current{color:var(--ink);border-left-color:var(--gold)}
/* on a screen too short for the card and the links together (measured: the column is at most 659px tall above 1120px wide and
   683px below, under a 108px top, with 24px to spare), the card alone stays in view */
@media(max-height:800px){.pp-toc{display:none}}
@media(max-width:1120px) and (max-height:830px){.pp-toc{display:none}}
.pp-others{margin-top:clamp(72px,8vw,120px);padding:clamp(56px,7vw,96px) 0;background:var(--white);border-top:1px solid var(--line)}
.pp-others h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.pp-others-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:36px 0 32px}
.pp-other{display:grid;align-content:start;gap:6px;color:var(--ink);text-decoration:none}
.pp-other img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;margin-bottom:12px;background:var(--line);transition:opacity .3s}
.pp-other:hover img{opacity:.88}
.pp-other-k{font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.pp-other b{font-size:22px;font-weight:500;letter-spacing:-.025em;transition:color .2s}
.pp-other:hover b{color:var(--gold)}
.pp-other-p{font-size:14px;color:var(--muted)}
.pp-mbar{display:none}
@media(max-width:1120px){
  /* the introduction under the title once the column beside it would be too narrow for it */
  .pl-hero .section-shell{grid-template-columns:minmax(0,1fr)}
  .pl-intro{max-width:640px;margin-top:28px}
  .pp-facts li{padding:24px 14px 24px 0}
  .pp-facts li+li{padding-left:14px}
  .pp-facts b{font-size:17px}
  .pp-layout{grid-template-columns:minmax(0,1fr) 300px}
  .pp-incl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-incl li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .pp-incl li:nth-child(even){padding-left:22px;border-left:1px solid var(--line)}
  .pp-incl li:last-child:nth-child(n){grid-column:auto}
  .pp-incl li:last-child:nth-child(odd){grid-column:1/-1}
  .pp-others-grid{gap:16px}
  .pp-other b{font-size:18px}
  .pp-day li{grid-template-columns:112px minmax(0,1fr) 120px;gap:0 20px}
  .pp-days li{gap:0 20px}
}
@media(max-width:900px){
  .pl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-facts li:nth-child(3){padding-left:0;border-left:0}
  .pl-facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .pl-row,.pl-row.is-flip{grid-template-columns:minmax(0,1fr);gap:26px}
  .pl-row.is-flip .pl-media{order:0}
  .pl-media{aspect-ratio:4/3}
  /* the facts in pairs: the nights and the room, the meals across, the two prices side by side */
  .pp-facts ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-facts li,.pp-facts li+li{padding:18px 14px 18px 0;border-left:0}
  .pp-facts li:nth-child(2),.pp-facts li:nth-child(5){padding-left:14px;border-left:1px solid var(--line)}
  .pp-facts li:nth-child(3){grid-column:1/-1}
  .pp-facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .pp-layout{grid-template-columns:minmax(0,1fr)}
  .pp-rail{display:none}
  .pp-mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1);align-items:center;justify-content:space-between;gap:16px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--line);box-shadow:0 -10px 30px #1010100f}
  .pp-mbar.is-on{transform:none}
  .pp-mbar small{display:block;font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--gold);white-space:nowrap}
  .pp-mbar b{display:block;margin-top:2px;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
  .pp-mbar-go{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border-radius:2px;background:var(--ink);color:var(--white);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
  .pp-mbar-go .icon{width:17px;height:17px}
  .plan-page{padding-bottom:72px}
}
@media(max-width:700px){
  .pl-hero h1{font-size:clamp(40px,11vw,56px)}
  .pl-hero h1 em{display:inline}
  .pl-intro p{font-size:16px}
  .pl-facts li{padding:18px 14px 18px 0}
  .pl-facts li+li{padding-left:14px}
  .pl-facts li:nth-child(3){padding-left:0}
  .pl-body h2{font-size:clamp(34px,10vw,44px)}
  .pl-foot{align-items:stretch;flex-direction:column}
  .pl-actions{justify-content:space-between}
  .pp-hero{min-height:calc(100svh - var(--header-height,72px))}
  /* the words cover most of the photo on a phone: a shade under the crumbs, a clear band, then the shade of the words (measured:
     at least 4.6:1 for the crumbs and the kicker on every cover at 390x664 and 360x780) */
  .pp-hero:after{background:linear-gradient(180deg,#101010a3 0%,#10101066 10%,#10101040 22%,#10101094 36%,#101010b3 52%,#101010d9 100%)}
  .pp-hero-inner{padding:20px 0 32px}
  .pp-kicker{margin-top:28px}
  .pp-hero h1{font-size:clamp(46px,13vw,64px)}
  .pp-lede{font-size:16px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
  .pp-hero-actions{flex-direction:column}
  .pp-hero-actions a{justify-content:center}
  .pp-overview{font-size:18px}
  .pp-sec h2{font-size:clamp(28px,8vw,36px)}
  .pp-incl{grid-template-columns:minmax(0,1fr)}
  .pp-incl li,.pp-incl li:nth-child(even){flex-direction:row;align-items:center;padding:16px 0;border-left:0}
  .pp-incl .icon{flex:none;width:22px;height:22px}
  .pp-not ul{grid-template-columns:minmax(0,1fr)}
  .pp-points{grid-template-columns:minmax(0,1fr)}
  .pp-points li,.pp-points li:nth-child(even){padding:22px 0;border-left:0}
  .pp-day li{grid-template-columns:minmax(0,1fr) 92px;grid-template-areas:'time img' 'text img';gap:4px 16px;padding:16px 0}
  .pp-day time{grid-area:time;padding:0}
  .pp-day div{grid-area:text}
  .pp-day img{grid-area:img;aspect-ratio:1}
  .pp-days li{grid-template-columns:minmax(0,1fr);gap:6px}
  .pp-days span{padding:0}
  .pp-houses{grid-template-columns:minmax(0,1fr);gap:44px}
  .pp-actions{flex-direction:column}
  .pp-actions a{justify-content:center}
  .pp-others-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .pp-other img{aspect-ratio:1}
}
/* the narrowest phones: the bar keeps its price and its button on one line */
@media(max-width:380px){
  .pp-mbar{gap:12px;padding-inline:16px}
  .pp-mbar-go{padding:0 14px}
  .pp-mbar-go .icon{display:none}
}
@media(prefers-reduced-motion:reduce){.pl-media img{transition:none}}

/* ───── The cars page, on white: the facts in a line, the fleet in a grid as wide as the page with a filter by kind, and each
   practical part as a heading beside its text. No side column. ───── */
.cars-page,.cars-page .doc-main{background:var(--white)}
.cx-hero{border-bottom:0}
.cx-facts ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cx-facts li{display:grid;align-content:start;gap:8px;padding:24px 20px 26px 0}
.cx-facts li+li{padding-left:20px;border-left:1px solid var(--line)}
.cx-facts span{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.cx-facts b{font-size:14.5px;font-weight:500;line-height:1.5;color:var(--ink)}
.cx-fleet{padding:clamp(64px,7vw,112px) 0 clamp(56px,6vw,96px)}
.cx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px}
.cx-head h2{margin:0;max-width:16ch;font-size:clamp(34px,4vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.cx-head h2 em{font-style:normal;color:var(--gold)}
.cx-filters{display:flex;flex-wrap:wrap;gap:8px}
.cx-filters button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:2px;background:var(--white);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.cx-filters button small{font-size:12px;font-weight:500;color:var(--muted)}
.cx-filters button:hover{border-color:var(--ink)}
.cx-filters button.is-on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.cx-filters button.is-on small{color:#ffffffb3}
.cx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px;margin-top:clamp(36px,4vw,56px)}
.cx-grid .car-card[hidden]{display:none}
.cx-grid .car-card{border-radius:4px}
.cx-grid .car-reserve{text-decoration:none}
.cx-fleet .car-card-more{margin-top:32px;border-radius:4px}
.cx-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(40px,6vw,96px);padding:clamp(56px,6vw,88px) 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-height,80px) + 16px)}
.cx-sec-head{align-self:start;position:sticky;top:calc(var(--header-height,80px) + 32px)}
.cx-sec-head h2{margin:0;font-size:clamp(28px,2.8vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.cx-prose{max-width:68ch}
.cx-prose p{margin:0 0 18px;font-size:17px;line-height:1.75;color:var(--muted)}
.cx-prose h3{margin:28px 0 10px;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cx-prose ul,.cx-prose ol{margin:0 0 18px;padding-left:20px;font-size:16.5px;line-height:1.7;color:var(--muted)}
.cx-prose li{margin-bottom:8px}
.cx-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.cx-prose b,.cx-prose strong{color:var(--ink);font-weight:600}
.cx-sec .doc-faq summary{font-size:17px}
.cars-page .cta-band{margin-top:0}
.cars-page .doc-related{padding-top:clamp(56px,6vw,88px)}
@media(max-width:1180px){.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx-grid .car-bottom{flex-wrap:wrap;gap:12px}
@media(max-width:1120px){
  .cx-facts ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx-facts li:nth-child(4){padding-left:0;border-left:0}
  .cx-facts li:nth-child(n+4){border-top:1px solid var(--line)}
}
@media(max-width:900px){
  .cx-grid{gap:24px 16px}
  .cx-sec{grid-template-columns:minmax(0,1fr)}
  .cx-sec-head{position:static}
}
@media(max-width:700px){
  .cx-facts ul{grid-template-columns:minmax(0,1fr)}
  .cx-facts li,.cx-facts li+li{padding:16px 0;border-left:0}
  .cx-facts li+li{border-top:1px solid var(--line)}
  .cx-head h2{font-size:clamp(32px,9vw,42px)}
  .cx-filters{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px}
  .cx-filters::-webkit-scrollbar{display:none}
  .cx-filters button{flex:none}
  .cx-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .cx-prose p{font-size:16px}
}

/* ═════════ THE READING PAGES (15 November 2026): the journal (jr-: dist/journal/<slug>.html, its index, and in French) and the guides
   of the experiences (xg-: dist/surf.html, yoga.html, quad.html, paradise-valley.html, agadir-souk-el-had.html,
   timlaline-dunes.html, hammam.html, and in French). On white, in the manner of the cars page and the plan pages, with no side
   column: the words and the photo, the facts in a line, then one reading column of about 68 characters with the photos, the
   quote and the tables woven in (wider than the text where they need the room), the questions, what to read next, the way in.
   A story's chapters are listed once under its head ("In this post") rather than in a rail beside the text. ═════════ */
.jr-page,.jr-page .doc-main,.xg-page,.xg-page .doc-main{background:var(--white)}
.jr-k,.xg-k{margin:0;font-size:11px;font-weight:600;letter-spacing:1.75px;line-height:1.5;text-transform:uppercase;color:var(--gold)}
.jr-k a{color:inherit;text-decoration:none;transition:color .2s}
.jr-k a:hover{color:var(--ink)}
.jr-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.jr-crumbs a{color:var(--ink);text-decoration:none;transition:color .2s}
.jr-crumbs a:hover{color:var(--gold)}
.jr-crumbs>span[aria-hidden]{color:#5c5a5580}
.jr-page h1,.xg-page h1{font-family:var(--sans);font-weight:500;color:var(--ink);text-shadow:none;text-wrap:balance}
.jr-page h2,.xg-page h2{text-wrap:balance}
/* the words under a photograph: what it shows, and whose it is when it is not ours */
.jr-page figure figcaption,.xg-page figure figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 18px;margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted)}
.jr-page figcaption small,.xg-page figcaption small{font-size:11.5px;color:var(--muted)} /* (muted in full: the credit is small, and 70% muted fell under 4.5:1 on white) */

/* ── A story: the head ── */
.jr-hero{padding:clamp(24px,3vw,36px) 0 0}
.jr-hero .section-shell>.jr-k{margin-top:clamp(36px,4vw,56px)}
.jr-hero h1{max-width:19ch;margin:16px 0 0;font-size:clamp(42px,5.2vw,80px);letter-spacing:-.045em;line-height:1}
.jr-hero h1.is-long{max-width:24ch;font-size:clamp(36px,4.3vw,64px);line-height:1.04}
.jr-hero-foot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px clamp(32px,5.5vw,88px);align-items:end;margin-top:clamp(22px,2.6vw,32px)}
.jr-lede{margin:0;max-width:58ch;font-size:clamp(17px,1.35vw,19px);line-height:1.65;color:var(--muted)}
.jr-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.jr-meta>*+*::before{content:'·';margin:0 10px;color:var(--gold)}
.jr-cover{margin:clamp(32px,4vw,56px) 0 0}
.jr-cover img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:2px;background:var(--line)}
.jr-facts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(32px,4vw,48px) 0 0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jr-facts li{min-width:0;padding:24px 24px 26px 0}
.jr-facts li+li{padding-left:24px;border-left:1px solid var(--line)}
.jr-facts b{display:block;font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.jr-facts span{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted)}

/* ── A story: the text. One column of about 68 characters (32.5em of DM Sans at 19px: measured 68 to 70 characters a line, spaces
   included, in English and in French); the photos, the quote, the gallery and the practical part take the wide
   track (1040px at most), centred on the same axis. Grid items do not collapse their margins: every gap is a margin-top. ── */
.jr-body{padding:clamp(56px,6vw,96px) 0 0}
.jr-prose{display:grid;grid-template-columns:[wide-start] minmax(0,1fr) [text-start] minmax(0,32.5em) [text-end] minmax(0,1fr) [wide-end];font-size:19px;line-height:1.72;color:#101010db}
.jr-prose>*{grid-column:text;min-width:0;margin:22px 0 0}
.jr-prose>:first-child{margin-top:0}
.jr-prose>.jr-wide{grid-column:wide;justify-self:center;width:100%;max-width:1040px}
.jr-prose>p,.jr-prose>ul,.jr-prose>ol{font-size:inherit}
.jr-prose>ul,.jr-prose>ol{padding-left:22px}
.jr-prose>ul li,.jr-prose>ol li{margin-top:10px;font-size:18px;line-height:1.7}
.jr-prose>ul li::marker,.jr-prose>ol li::marker{color:var(--gold)}
.jr-prose b,.jr-prose strong{font-weight:600;color:var(--ink)}
.jr-prose i{font-style:italic}
.jr-prose>p a,.jr-prose>ul a,.jr-prose>ol a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.jr-prose>p a:hover,.jr-prose>ul a:hover,.jr-prose>ol a:hover{color:var(--gold)}
/* a chapter: its number on a hairline, then its title */
.jr-prose>.jr-ch{display:flex;align-items:center;gap:16px;margin-top:clamp(64px,7vw,96px);font-size:11px;font-weight:600;letter-spacing:1.75px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.jr-prose>.jr-ch::after{content:'';flex:1;height:1px;background:var(--line)}
.jr-prose>:first-child.jr-ch,.jr-toc+.jr-ch{margin-top:clamp(56px,6vw,80px)}
.jr-prose>h2{margin-top:18px;font-size:clamp(28px,2.6vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.12;color:var(--ink);scroll-margin-top:56px} /* (the page already keeps the header's height free: scroll-padding-top) */
.jr-prose>h3{margin-top:36px;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.jr-prose>h2+*,.jr-prose>h3+*{margin-top:14px}
/* the first letter of the story */
.jr-first::first-letter{float:left;margin:8px 12px 0 0;font-size:4.4em;font-weight:500;line-height:.8;color:var(--ink)}
/* photographs, the gallery, the quote */
.jr-prose>.jr-fig,.jr-prose>.jr-gallery{margin-top:clamp(44px,5vw,72px)}
.jr-prose>.jr-fig+*,.jr-prose>.jr-pull+*{margin-top:clamp(44px,5vw,72px)}
.jr-fig,.jr-gallery figure,.xg-fig{margin:0}
.jr-fig img,.xg-fig img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;background:var(--line)}
.jr-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px 20px}
.jr-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:var(--line)}
.jr-gallery.is-one img{aspect-ratio:3/2}
.jr-prose>.jr-pull{max-width:880px;margin-top:clamp(52px,5.5vw,80px);padding:clamp(26px,3vw,40px) 0 clamp(30px,3.4vw,44px);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.jr-pull::before{content:'';display:block;width:28px;height:2px;margin-bottom:22px;background:var(--gold)}
.jr-pull p{margin:0;font-size:clamp(24px,2.7vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.22;color:var(--ink);text-wrap:balance}
/* "In this post": the chapters, two to a line, and the way straight to the practical part */
.jr-toc{padding:22px 0 24px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.jr-toc ol{list-style:none;columns:2;column-gap:40px;margin:12px 0 0;padding:0}
.jr-toc li{break-inside:avoid;margin:0}
.jr-toc ol a{display:flex;gap:14px;padding:8px 0;font-size:15px;line-height:1.45;color:var(--ink);text-decoration:none;transition:color .2s}
.jr-toc ol a span{flex:none;width:20px;padding-top:2px;font-size:11px;font-weight:600;letter-spacing:1px;color:var(--gold);font-variant-numeric:tabular-nums}
.jr-toc ol a:hover{color:var(--gold)}
.jr-toc-jump{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding-top:4px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink);text-decoration:none;transition:color .2s}
.jr-toc-jump .icon{flex:none;width:15px;height:15px;color:var(--gold);transform:rotate(90deg)}
.jr-toc-jump:hover{color:var(--gold)}
/* the practical part: its heading beside its notes, one note to a line */
.jr-prose>.jr-practical{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px clamp(32px,5vw,72px);margin-top:clamp(80px,9vw,128px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--ink);scroll-margin-top:24px}
.jr-practical h2{margin:12px 0 0;font-size:clamp(28px,2.6vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.jr-practical dl{margin:0;border-top:1px solid var(--line)}
.jr-practical dl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 24px;padding:18px 0 20px;border-bottom:1px solid var(--line)}
.jr-practical dt{padding-top:5px;font-size:11px;font-weight:600;letter-spacing:1.5px;line-height:1.4;text-transform:uppercase;color:var(--gold)}
.jr-practical dd{margin:0;font-size:16px;line-height:1.7;color:var(--ink)}
/* the links to read further */
.jr-prose>.jr-further{margin-top:clamp(48px,5vw,72px)}
.jr-links{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.jr-links li{margin:0;border-bottom:1px solid var(--line)}
.jr-links a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;color:var(--ink);text-decoration:none}
.jr-links b{display:block;font-size:15.5px;font-weight:600;line-height:1.45;transition:color .2s}
.jr-links small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.jr-links .icon{flex:none;width:16px;height:16px;color:var(--gold)}
.jr-links a:hover b{color:var(--gold)}

/* ── What to read next, and the way in (both kinds of pages) ── */
.jr-next{margin-top:clamp(72px,8vw,112px);padding:clamp(56px,6vw,88px) 0 clamp(48px,5vw,72px);border-top:1px solid var(--line)}
.xg-page .jr-next{margin-top:0}
.jr-next-head,.jr-stories-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.jr-next h2{margin:12px 0 0;font-size:clamp(30px,3.2vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.jr-next .text-link{margin-bottom:6px}
.jr-next-grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:28px;margin-top:clamp(32px,3.5vw,48px)}
.jr-card{display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--ink);text-decoration:none}
.jr-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;margin-bottom:10px;background:var(--line);transition:opacity .3s}
.jr-card:hover img{opacity:.88}
.jr-card-k{font-size:11px;font-weight:600;letter-spacing:1.75px;line-height:1.5;text-transform:uppercase;color:var(--gold)}
.jr-card b{font-size:clamp(18px,1.5vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.3;transition:color .2s}
.jr-card:hover b{color:var(--gold)}
.jr-card-line{display:-webkit-box;overflow:hidden;font-size:14.5px;line-height:1.6;color:var(--muted);-webkit-line-clamp:3;-webkit-box-orient:vertical}
.jr-page .cta-band,.xg-page .cta-band{margin-top:0}
.jr-band-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.jr-band .jr-band-actions .primary-button{margin-top:0}
.jr-band .ghost-button{border-color:#ffffff59;color:var(--white)}
.jr-page .doc-credits,.xg-page .doc-credits{margin-top:0;padding:0 0 clamp(40px,5vw,64px)}

/* ── The journal's index: the title and its introduction, the first story large, every story with the filter, the guides ── */
.jr-ix-hero{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px)}
.jr-ix-hero .section-shell{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5.5vw,88px);align-items:end}
.jr-ix-hero h1{margin:16px 0 0;font-size:clamp(52px,6.4vw,100px);letter-spacing:-.05em;line-height:.95}
.jr-ix-hero h1 em,.jr-stories h2 em,.jr-guides h2 em{display:inline;font-style:normal;color:var(--gold)}
.jr-ix-intro p{margin:0;max-width:46ch;font-size:17px;line-height:1.7;color:var(--muted)}
.jr-ix-intro .jr-ix-count{margin-top:16px;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink)}
.jr-feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5.5vw,88px);align-items:center;padding:clamp(40px,4.5vw,64px) 0 clamp(72px,8vw,120px);border-top:1px solid var(--line)}
.jr-feature-media{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--line)}
.jr-feature-media img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.jr-feature-media:hover img{opacity:.92}
.jr-feature-body h2{margin:14px 0 0;font-size:clamp(32px,3.4vw,52px);font-weight:500;letter-spacing:-.04em;line-height:1.04}
.jr-feature-body h2 a{color:var(--ink);text-decoration:none;transition:color .2s}
.jr-feature-body h2 a:hover{color:var(--gold)}
.jr-feature-lede{margin:18px 0 0;font-size:16.5px;line-height:1.7;color:var(--muted)}
.jr-feature .jr-meta{justify-content:flex-start;margin-top:18px}
.jr-feature .primary-button{margin-top:28px}
.jr-stories{padding:clamp(64px,7vw,104px) 0;border-top:1px solid var(--line)}
.jr-stories h2,.jr-guides h2{margin:12px 0 0;font-size:clamp(34px,4vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.jr-filters{display:flex;flex-wrap:wrap;gap:8px}
.jr-filters button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:2px;background:var(--white);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.jr-filters button small{font-size:12px;font-weight:500;color:var(--muted)}
.jr-filters button:hover{border-color:var(--ink)}
.jr-filters button.is-on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.jr-filters button.is-on small{color:#ffffffb3}
/* the eight stories under the large one: four to a row on a wide screen (two even rows), two below 1180px, one on a phone */
.jr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:52px 24px;margin-top:clamp(36px,4vw,56px)}
.jr-grid .jr-card b{font-size:19px}
@media(max-width:1180px){.jr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}.jr-grid .jr-card b{font-size:20px}}
.jr-grid .jr-card[hidden]{display:none}
.jr-guides{padding:clamp(64px,7vw,104px) 0;border-top:1px solid var(--line)}
.jr-guides .section-shell{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px clamp(40px,6vw,96px);align-items:start}
.jr-guides-head p:last-child{margin:16px 0 0;max-width:40ch;font-size:16px;line-height:1.7;color:var(--muted)}
.jr-guides-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin:0;padding:0}
.jr-guides-list li{border-bottom:1px solid var(--line)}
.jr-guides-list li:nth-child(-n+2){border-top:1px solid var(--line)}
.jr-guides-list a{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:center;gap:14px;padding:18px 0;color:var(--ink);text-decoration:none}
.jr-guides-n{align-self:start;padding-top:6px;font-size:11px;font-weight:600;letter-spacing:1px;color:var(--gold);font-variant-numeric:tabular-nums}
.jr-guides-list b{display:block;font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.3;transition:color .2s}
.jr-guides-list small{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--muted)}
.jr-guides-list .icon{width:16px;height:16px;color:var(--muted);transition:color .2s,transform .2s}
.jr-guides-list a:hover b,.jr-guides-list a:hover .icon{color:var(--gold)}
.jr-guides-list a:hover .icon{transform:translateX(3px)}

/* ── A guide: the words and the photo, the facts in a line, each part as a heading beside its text ── */
.xg-hero{padding:clamp(24px,3vw,36px) 0 clamp(48px,5vw,72px)}
.xg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(28px,3.5vw,48px)}
.xg-hero h1{margin:16px 0 0;font-size:clamp(42px,5vw,76px);letter-spacing:-.045em;line-height:1}
.xg-hero h1.is-long{font-size:clamp(36px,3.9vw,58px);line-height:1.04}
.xg-lede{margin:22px 0 0;max-width:52ch;font-size:clamp(17px,1.35vw,19px);line-height:1.65;color:var(--muted)}
.xg-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.xg-hero-media{margin:0}
.xg-hero-media img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:2px;background:var(--line)}
.xg-facts ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.xg-facts ul.has-wide{grid-template-columns:repeat(5,minmax(0,1fr))}
.xg-facts li{display:flex;flex-direction:column;gap:6px;min-width:0;padding:24px 22px 26px 0}
.xg-facts li+li{padding-left:22px;border-left:1px solid var(--line)}
.xg-facts li.is-wide{grid-column:span 2}
.xg-facts span{margin-bottom:4px;font-size:11px;font-weight:600;letter-spacing:1.6px;line-height:1.4;text-transform:uppercase;color:var(--gold)}
.xg-facts b{font-size:14.5px;font-weight:500;line-height:1.5;color:var(--ink)}
/* "On this page": the parts of the guide in one quiet line under the facts (on a phone, a line that slides sideways) */
.xg-toc{display:flex;align-items:baseline;gap:10px 28px;padding:20px 0 22px}
.xg-toc .xg-k{flex:none}
.xg-toc ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;padding:0}
.xg-toc a{font-size:14px;font-weight:500;line-height:1.5;color:var(--ink);text-decoration:none;transition:color .2s}
.xg-toc a:hover{color:var(--gold)}
.xg-sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(40px,6vw,96px);padding:clamp(56px,6vw,96px) 0;border-top:1px solid var(--line)}
.xg-facts+.xg-sec{border-top:0}
.xg-sec-head{align-self:start;position:sticky;top:calc(var(--header-height,80px) + 32px)}
.xg-sec-head h2{margin:12px 0 0;font-size:clamp(28px,2.8vw,42px);font-weight:500;letter-spacing:-.035em;line-height:1.08}
.xg-sec-body{min-width:0}
.xg-prose{font-size:19px;line-height:1.72;color:#101010db}
.xg-prose>*{max-width:32.5em;margin:20px 0 0}
.xg-prose>:first-child{margin-top:0}
.xg-prose>h3{margin-top:40px;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.xg-prose>h3+*{margin-top:12px}
.xg-prose>ul,.xg-prose>ol{padding-left:22px}
.xg-prose li{margin-top:10px;font-size:18px;line-height:1.7}
.xg-prose li::marker{color:var(--gold)}
.xg-prose b,.xg-prose strong{font-weight:600;color:var(--ink)}
.xg-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.xg-prose a:hover{color:var(--gold)}
.xg-fig{margin-top:clamp(36px,4vw,56px)}
.xg-more{padding:0 0 clamp(56px,6vw,96px)}
/* the spot guide: the table of the plans side by side (a frame of hairlines, small capitals for the heads, the first column held
   when it slides sideways); on a phone, one small card per row */
.xg-prose>.xg-table{max-width:none;margin-top:28px;overflow-x:auto;border:1px solid var(--line);border-radius:2px;background:var(--white);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.xg-table table{width:100%;min-width:760px;border-collapse:collapse;font-size:14px;line-height:1.55;color:#101010db}
.xg-table th,.xg-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.xg-table tbody tr:last-child>*{border-bottom:0}
.xg-table thead th{background:var(--white);font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.xg-table thead th:first-child,.xg-table tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--white);box-shadow:1px 0 0 var(--line)}
.xg-table tbody td:first-child{min-width:150px;color:var(--ink)}
.xg-table a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.xg-faq summary{font-size:17px}
.xg-faq details p{font-size:16px;line-height:1.7}
.xg-books{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin:0;padding:0}
.xg-books li{display:flex;flex-direction:column;gap:4px;padding:18px 0 20px;border-top:1px solid var(--line)}
.xg-books b{font-size:16.5px;font-weight:600;line-height:1.4}
.xg-books span{font-size:14px;line-height:1.55;color:var(--muted)}
.xg-books small{font-size:12.5px;line-height:1.5;color:var(--muted)}
.xg-books a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.xg-books a:hover{color:var(--gold)}
.xg-online{margin-top:36px}

@media(max-width:1120px){
  .jr-next-grid[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .xg-facts ul,.xg-facts ul.has-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xg-facts li.is-wide{grid-column:auto}
  .xg-facts li,.xg-facts li+li{padding:20px 20px 22px 0;border-left:0}
  .xg-facts li:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
  .xg-facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .jr-guides .section-shell{grid-template-columns:minmax(0,1fr)}
  .jr-guides-head p:last-child{max-width:60ch}
}
@media(max-width:900px){
  .jr-hero-foot{grid-template-columns:minmax(0,1fr)}
  .jr-meta{justify-content:flex-start}
  .jr-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jr-facts li,.jr-facts li+li{padding:18px 16px 20px 0;border-left:0}
  .jr-facts li:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
  .jr-facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .jr-prose>.jr-practical{grid-template-columns:minmax(0,1fr)}
  .jr-ix-hero .section-shell{grid-template-columns:minmax(0,1fr)}
  .jr-ix-intro{margin-top:24px}
  .jr-feature{grid-template-columns:minmax(0,1fr);gap:28px}
  .jr-grid{gap:44px 20px}
  .xg-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .xg-hero-media{order:-1}
  .xg-hero-media img{aspect-ratio:16/10}
  .xg-sec{grid-template-columns:minmax(0,1fr)}
  .xg-sec-head{position:static}
}
@media(max-width:700px){
  .jr-hero h1{font-size:clamp(34px,9.6vw,46px);line-height:1.03}
  .jr-hero h1.is-long{font-size:clamp(30px,8.2vw,38px);line-height:1.08}
  .jr-lede{font-size:16.5px}
  .jr-cover img{aspect-ratio:3/2}
  .jr-facts b{font-size:24px}
  .jr-prose{grid-template-columns:[wide-start text-start] minmax(0,1fr) [text-end wide-end];font-size:17px;line-height:1.72}
  .jr-prose>ul li,.jr-prose>ol li{font-size:16px}
  .jr-prose>h2{font-size:clamp(26px,7.4vw,32px)}
  .jr-prose>h3{font-size:18.5px}
  .jr-first::first-letter{font-size:4.1em;margin:7px 10px 0 0}
  .jr-toc ol{columns:1}
  .jr-practical dl>div{grid-template-columns:minmax(0,1fr);gap:6px}
  .jr-practical dt{padding-top:0}
  .jr-practical dd{font-size:15.5px}
  .jr-gallery{grid-template-columns:minmax(0,1fr);gap:24px}
  /* what to read next: one line each, the photo small beside the words */
  .jr-next-grid,.jr-next-grid[style*="--n:4"]{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
  .jr-next .jr-card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
  .jr-next .jr-card img{grid-row:1/3;margin:0;aspect-ratio:1}
  .jr-next .jr-card b{font-size:17px}
  .jr-next .jr-card-line{display:none}
  .jr-ix-hero h1{font-size:clamp(46px,13vw,64px)}
  .jr-ix-intro p{font-size:16px}
  .jr-feature-media{aspect-ratio:3/2}
  .doc-page .jr-feature .primary-button{width:100%;justify-content:center}
  .jr-stories h2,.jr-guides h2{font-size:clamp(32px,9vw,42px)}
  .jr-filters{width:calc(100% + 20px);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px}
  .jr-filters::-webkit-scrollbar{display:none}
  .jr-filters button{flex:none}
  .jr-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .jr-grid .jr-card-line{-webkit-line-clamp:2}
  .jr-guides-list{grid-template-columns:minmax(0,1fr)}
  .jr-guides-list li:nth-child(2){border-top:0}
  .jr-band-actions{flex-direction:column}
  .doc-page .jr-band-actions a{width:100%;justify-content:center}
  .xg-hero h1{font-size:clamp(34px,9.6vw,46px);line-height:1.03}
  .xg-hero h1.is-long{font-size:clamp(30px,8.2vw,38px);line-height:1.08}
  .xg-lede{font-size:16.5px}
  .xg-actions{flex-direction:column}
  .doc-page .xg-actions a{width:100%;justify-content:center}
  .xg-facts ul,.xg-facts ul.has-wide{grid-template-columns:minmax(0,1fr)}
  .xg-facts li,.xg-facts li+li,.xg-facts li:nth-child(even){padding:16px 0 18px;border-left:0}
  .xg-facts li+li{border-top:1px solid var(--line)}
  .xg-sec-head h2{font-size:clamp(28px,8vw,34px)}
  .xg-toc{flex-direction:column;gap:10px;padding:18px 0 20px}
  .xg-toc ul{width:calc(100% + 20px);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px}
  .xg-toc ul::-webkit-scrollbar{display:none}
  .xg-toc li{flex:none}
  .xg-prose{font-size:17px;line-height:1.72}
  .xg-prose li{font-size:16px}
  .xg-books{grid-template-columns:minmax(0,1fr)}
  .xg-prose>.xg-table{overflow:visible;border:0;border-top:1px solid var(--line);border-radius:0}
  .xg-table table{min-width:0}
  .xg-table thead{display:none}
  .xg-table table,.xg-table tbody,.xg-table tr,.xg-table td{display:block}
  .xg-table tr{padding:16px 0 8px;border-bottom:1px solid var(--line)}
  .xg-table td,.xg-table tbody tr:last-child>*{padding:8px 0;border:0;border-top:1px solid #ded7cb99}
  .xg-table td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:10.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
  .xg-table tbody td:first-child{position:static;min-width:0;padding:0 0 8px;border:0;box-shadow:none;font-size:17px}
  .xg-table tbody td:first-child::before{display:none}
}
@media(prefers-reduced-motion:reduce){.jr-card img,.jr-feature-media img,.jr-guides-list .icon{transition:none}}