/* Le Baccanti public site — journeys page (verbatim from the design mockup; loaded after base.css). */
.editorial-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:75px 55px;align-items:start}
.editorial-story{min-width:0}
.editorial-story img{aspect-ratio:auto;height:100%;object-fit:cover}
.editorial-story .picture{height:350px}
.editorial-story .meta{margin-top:0;font-size:14px}
.editorial-story h3{font-size:35px;max-width:550px}
.editorial-story p{max-width:520px;font-size:17px;line-height:1.65;margin:14px 0 22px}
.story-1{grid-column:1/8}
.story-1 .picture{height:430px}
.story-1 h3{font-size:43px}
.story-2{grid-column:9/13;margin-top:120px}
.story-2 .picture{height:290px}
.story-2 h3{font-size:31px}
.story-3{grid-column:1/5;margin-top:50px}
.story-3 .picture{height:320px}
.story-3 h3{font-size:31px}
.story-4{grid-column:6/13}
.story-4 .picture{height:470px}
.story-4 h3{font-size:43px}
.story-5{grid-column:1/13;display:grid;grid-template-columns:1.4fr 1fr;gap:0;background:var(--ink);color:white;margin-block:25px}
.story-5 .picture{height:100%;min-height:430px}
.story-5 .story-copy{padding:45px;align-self:center}
.story-5 .meta,.story-5 p{color:#e7e5dc}
.story-5 h3{font-size:40px}
.story-5 .text-link{color:var(--yellow)}
.story-6{grid-column:1/7}
.story-6 .picture{height:410px}
.story-7{grid-column:8/13;margin-top:85px}
.story-7 .picture{height:340px}
.story-8{grid-column:1/8;margin-top:15px}
.story-8 .picture{height:440px}
.story-8 h3{font-size:43px}
.story-9{grid-column:9/13;margin-top:125px}
.story-9 .picture{height:300px}
.story-9 h3{font-size:31px}
.editorial-grid .meta{flex-wrap:wrap;gap:5px 15px}
.collection-top{margin-bottom:50px}
.collection{padding-bottom:110px}
@media(max-width:1000px){.editorial-grid{gap:55px 30px}.story-2{grid-column:8/13}.story-3{grid-column:1/6}.story-4{grid-column:7/13}.story-9{grid-column:8/13}.story-5 .story-copy{padding:32px}.story-5 h3{font-size:34px}.editorial-story h3{font-size:32px}.story-1 .picture,.story-4 .picture,.story-8 .picture{height:380px}}
@media(max-width:700px){.editorial-grid{display:block}.editorial-story{margin:0 0 55px}.editorial-story .picture{height:320px}.editorial-story h3{font-size:34px}.editorial-story p{font-size:17px}.story-5{display:block;margin-block:20px 55px}.story-5 .picture{height:310px;min-height:0}.story-5 .story-copy{padding:30px 25px 35px}.story-4 .picture,.story-8 .picture{height:390px}.collection{padding-bottom:45px}}
.editorial-grid{gap:38px 32px}
.story-2{grid-column:8/13;margin-top:35px}
.story-3{grid-column:1/6;margin-top:0}
.story-4{grid-column:6/13}
.story-5{margin-block:5px}
.story-7{grid-column:7/13;margin-top:30px}
.story-8{margin-top:0}
.story-9{grid-column:8/13;margin-top:35px}
.editorial-story h3{margin:10px 0}
.editorial-story p{margin:12px 0 16px}
.collection-top{margin-bottom:32px}
.collection{padding-bottom:70px}
@media(max-width:1000px){.editorial-grid{gap:32px 26px}.story-2{margin-top:25px}.story-3{margin-top:0}.story-4{grid-column:6/13}.story-7{margin-top:25px}.story-9{margin-top:25px}}
@media(max-width:700px){.editorial-story{margin:0 0 34px}.story-5{margin-block:0 34px}.collection{padding-bottom:28px}}
.inspired-header{padding-bottom:35px}
.mixed-layout{display:grid;gap:45px}
.proposal-row{display:grid;gap:28px;align-items:start}
.regular-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.mixed-story{min-width:0}
.mixed-story .picture{display:block;aspect-ratio:1;overflow:hidden}
.mixed-story img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.mixed-story .meta{font-size:14px;flex-wrap:wrap;gap:4px 12px;margin:0 0 12px}
.mixed-story h3{font-size:30px;line-height:1.15;margin:10px 0}
.mixed-story p{font-size:16px;line-height:1.6;margin:12px 0 17px;max-width:580px}
.staggered-row{grid-template-columns:1.35fr 1fr;gap:36px}
.staggered-row .mixed-story:first-child .picture{aspect-ratio:1.5}
.staggered-row .mixed-story:last-child{padding-top:45px}
.staggered-row .mixed-story:last-child .picture{aspect-ratio:1.4}
.staggered-row h3{font-size:37px}
.final-story{display:block;padding-top:8px}
.final-story .mixed-story{display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:center}
.final-story .picture{aspect-ratio:1.6}
.final-story .mixed-copy{padding:10px 0}
.final-story h3{font-size:39px}
.collection{padding-bottom:70px}
@media(max-width:1000px){.proposal-row{gap:22px}.mixed-story h3{font-size:27px}.staggered-row h3,.final-story h3{font-size:33px}.staggered-row,.final-story .mixed-story{gap:28px}}
@media(max-width:700px){.inspired-header{padding-bottom:26px}.mixed-layout{gap:34px}.regular-row,.staggered-row{grid-template-columns:1fr;gap:34px}.staggered-row .mixed-story:last-child{padding-top:0}.regular-row .picture{aspect-ratio:1}.staggered-row .mixed-story:first-child .picture,.staggered-row .mixed-story:last-child .picture{aspect-ratio:1.2}.mixed-story h3,.staggered-row h3,.final-story h3{font-size:32px}.final-story .mixed-story{grid-template-columns:1fr;gap:10px}.final-story .picture{aspect-ratio:1.2}.collection{padding-bottom:45px}}
nav{gap:22px}
nav a{letter-spacing:.04em}
@media(min-width:651px) and (max-width:1050px){header{padding-inline:24px}.logo{font-size:25px}nav{gap:15px}nav a{font-size:13px}}
@media(max-width:650px){nav{gap:18px}}
@media(max-width:900px){.menu{display:block}header nav{display:none;position:absolute;top:88px;left:0;right:0;background:var(--paper);padding:22px 26px;box-shadow:0 14px 18px #0002;flex-direction:column;align-items:flex-start;gap:18px}header nav.open{display:flex}}
@media(max-width:650px){header nav{top:75px}}
@media(min-width:901px){header nav{gap:16px}header nav a{font-size:13px}}
@media(max-width:1050px){.menu{display:block}header nav{display:none;position:absolute;top:88px;left:0;right:0;background:var(--paper);padding:22px 26px;box-shadow:0 14px 18px #0002;flex-direction:column;align-items:flex-start;gap:18px}header nav.open{display:flex}}
@media(max-width:650px){header nav{top:75px}}
.journey-map-intro{grid-template-columns:1.08fr 1fr;align-items:center;gap:5vw;padding-top:42px;padding-bottom:42px}
.journey-intro-copy h1{max-width:620px}
.journey-intro-copy>p{max-width:560px;margin:25px 0 0}
.region-explorer{min-width:0;padding:25px 28px;background:var(--cream);border-top:2px solid var(--yellow-deep)}
.region-map-heading h2{font:400 27px/1.2 'Playfair Display',Georgia,serif;margin:10px 0}
.region-map-heading p{font-size:14px;margin:0;color:var(--grey)}
.region-explorer-body{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:10px;margin-top:8px}
.region-map{width:100%;height:270px;overflow:visible}
.region{fill:var(--line);stroke:var(--paper);stroke-width:1.15;cursor:pointer;transition:fill .2s;outline:none}
/* :hover and :focus-visible are separate rules: Safari before 15.4 drops a whole selector list that contains :focus-visible. */
.region:hover{fill:var(--yellow-deep);stroke:var(--anthracite);stroke-width:1.7}
.region:focus-visible{fill:var(--yellow-deep);stroke:var(--anthracite);stroke-width:1.7}
.region.selected{fill:var(--anthracite);stroke:var(--paper)}
.region-choice-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.region-choice strong{display:block;font:400 27px/1.2 'Playfair Display',Georgia,serif;margin:8px 0}
.region-selection-line{display:block;width:35px;height:2px;background:var(--yellow-deep);margin:17px 0}
.region-quick{display:flex;flex-wrap:wrap;gap:8px}
.region-quick button{font:14px/1.3 'DM Sans',Arial,sans-serif;border:1px solid var(--line);padding:7px 10px;background:transparent;color:var(--anthracite-soft);cursor:pointer}
.region-quick button.active{color:white;background:var(--anthracite);border-color:var(--anthracite)}
.region-reset{font:14px 'DM Sans',Arial,sans-serif;color:var(--anthracite-soft);background:none;border:0;border-bottom:1px solid var(--yellow);padding:0 0 3px;margin-top:22px;cursor:pointer}
.region-quick button:focus-visible{outline:2px solid var(--anthracite);outline-offset:3px}
.region-reset:focus-visible{outline:2px solid var(--anthracite);outline-offset:3px}
@media(max-width:1000px){.journey-map-intro{gap:28px}.region-explorer{padding:22px}.region-explorer-body{grid-template-columns:1fr 1fr}.region-map{height:235px}.region-choice strong{font-size:24px}}
@media(max-width:750px){.journey-map-intro{grid-template-columns:1fr;gap:28px}.journey-intro-copy>p{margin-top:15px}.region-explorer{padding:22px}.region-explorer-body{grid-template-columns:1fr 1fr;gap:20px}.region-map{height:260px}.region-map-heading h2{font-size:25px}.region-choice strong{font-size:27px}}

/* Additions to the mockup */

/* A region is chosen on the map (journeys.js adds .is-filtered and hides the other journeys):
   the staggered rows would leave holes, so the collection becomes a plain grid of regular cards. */
.collection [hidden]{display:none!important}
.mixed-layout.is-filtered{grid-template-columns:repeat(3,minmax(0,1fr));gap:45px 28px;align-items:start}
.mixed-layout.is-filtered .proposal-row{display:contents}
.mixed-layout.is-filtered .proposal-row .mixed-story{display:block;padding-top:0}
.mixed-layout.is-filtered .proposal-row .mixed-story .picture{aspect-ratio:1}
.mixed-layout.is-filtered .proposal-row .mixed-story h3{font-size:30px}
.mixed-layout.is-filtered .proposal-row .mixed-copy{padding:0}
@media(max-width:1000px){.mixed-layout.is-filtered{gap:45px 22px}.mixed-layout.is-filtered .proposal-row .mixed-story h3{font-size:27px}}
@media(max-width:700px){.mixed-layout.is-filtered{grid-template-columns:1fr;gap:34px}.mixed-layout.is-filtered .proposal-row .mixed-story h3{font-size:32px}}

/* No journey for the chosen region: an invitation to get in touch.
   The box is always in the page (an empty live region); journeys.js reveals its content and adds .is-shown. */
.collection-empty.is-shown{border-top:1px solid var(--line);padding:36px 0 8px}
.collection-empty p{font:400 28px/1.35 'Playfair Display',Georgia,serif;letter-spacing:-.02em;max-width:760px;margin:0 0 24px;color:var(--ink)}
@media(max-width:700px){.collection-empty.is-shown{padding-top:28px}.collection-empty p{font-size:23px}}

/* Brand colour coding (palette variables of base.css) */

/* Map of Italy: regions without a journey in the hairline neutral, regions with journeys in a taupe tint
   (journeys.js adds .has-journeys). Like the shortcut buttons: the hovered region in anthracite, the chosen one in brand yellow
   (a light outline keeps small islands clean); keyboard focus adds a 2px outline (yellow, or anthracite on the chosen region).
   .region.selected comes after :hover, so the chosen region stays yellow under the pointer. */
.region-explorer{border-top:3px solid var(--yellow)}
/* The mockup's grey (#6f7275) is only 4.25:1 on the cream panel: the darker palette grey keeps the hint above WCAG AA. */
.region-map-heading p{color:var(--anthracite-soft)}
.region{fill:var(--line);stroke:var(--paper);stroke-linejoin:round}
.region.has-journeys{fill:var(--taupe);fill-opacity:.62}
.region:hover{fill:var(--anthracite);fill-opacity:1;stroke:var(--paper);stroke-width:1.15}
.region:focus-visible{fill:var(--anthracite);fill-opacity:1;stroke:var(--yellow);stroke-width:2}
.region.selected{fill:var(--yellow);fill-opacity:1;stroke:var(--paper);stroke-width:1.15}
.region.selected:focus-visible{stroke:var(--anthracite);stroke-width:2}
.region-choice-label{color:var(--taupe-ink);font-weight:400}
.region-selection-line{width:48px;height:3px;background:var(--yellow)}
.region-quick button{font-weight:500;border:1px solid var(--anthracite);border-radius:2px;padding:7px 9px;color:var(--anthracite);transition:background .2s,color .2s,border-color .2s}
@media(hover:hover){.region-quick button:hover{background:var(--anthracite);color:var(--yellow)}}
.region-quick button.active{background:var(--yellow);border-color:var(--anthracite);color:var(--anthracite)}
.region-reset{font-weight:400;color:var(--anthracite);border-bottom:2px solid var(--yellow);padding-bottom:4px;transition:border-color .2s}
.region-reset:hover{border-bottom-color:var(--anthracite)}

/* Journey cards: a coloured banner under the photo carries the number (shared .numeral of base.css), the region and the length.
   Region and length are sized so that they stay on one line in the three-card rows at 1440 (e.g. "Rome & Amalfi Coast · 8 days · 7 nights"). */
.story-banner{display:flex;align-items:center;gap:14px;padding:12px 16px;color:#fff;margin:0 0 18px}
.story-banner.tone-olive{background:var(--olive)}
.story-banner.tone-taupe{background:var(--taupe-ink)}
.story-banner.tone-anthracite{background:var(--anthracite)}
.story-banner .numeral{flex:none}
.story-banner .meta{flex:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px;margin:0;color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:right}
.final-story .story-banner{margin-bottom:22px}

/* No journey for the chosen region: a cream panel with a yellow rule and a real button. */
.collection-empty.is-shown{border-top:0;border-left:4px solid var(--yellow);background:var(--cream);padding:34px clamp(22px,4vw,48px) 38px;margin-top:8px}
.collection-empty p{margin-bottom:6px}
.collection-empty .button{margin-top:22px}

/* "Made personal": an olive band, white text, yellow accents. */
.tailor{background:var(--olive);color:#fff}
.tailor .eyebrow{color:#fff}
.tailor .text-link{color:#fff;border-bottom:2px solid var(--yellow)}
.tailor .text-link:hover{color:var(--yellow)}
/* Phones: the final journey's banner sits flush under its photo, like the other cards (no grid gap, no copy padding). */
@media(max-width:700px){.story-banner{padding:10px 16px;gap:14px}.final-story .mixed-story{gap:0}.final-story .mixed-copy{padding-top:0}.final-story .story-banner{margin-bottom:18px}.collection-empty.is-shown{padding:26px 20px 30px}}
/* The length of the journey never breaks in the middle ("10 days · 9 nights"). */
.story-banner .story-length{white-space:nowrap}
/* Three narrow cards side by side (tablets): the length does not fit beside the number, so it gets its own line under it;
   the region stays beside the number. Every banner has the same height (number + one line). */
@media(min-width:701px) and (max-width:1000px){.regular-row .story-banner,.mixed-layout.is-filtered .story-banner{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 10px;padding-inline:14px}.regular-row .story-banner .meta,.mixed-layout.is-filtered .story-banner .meta{display:contents}.regular-row .story-banner .meta>span,.mixed-layout.is-filtered .story-banner .meta>span{grid-column:2;align-self:end;justify-self:end}.regular-row .story-banner .meta>.story-length,.mixed-layout.is-filtered .story-banner .meta>.story-length{grid-column:1/-1}}
.region-reset{text-align:left}
/* The reset is a text link that may wrap on two lines (German, phones): underline the words, not the box. */
.region-reset,.region-reset:hover{border-bottom:0;padding-bottom:0}
.region-reset{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:6px;line-height:1.7;transition:text-decoration-color .2s}
.region-reset:hover{text-decoration-color:var(--anthracite)}