/* GENERATED by scratchpad/design-2026/build-trips.py: the shortlist rows from days-out/days-try.css, then the page's own. Do not edit. */
.sfx-pop-x svg, .sfx-pop-off svg {width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: square;}
.sfx-pop-x:hover, .sfx-pop-off:hover {background: var(--oat, #F5F1E9);}
.sfx-pop-list {list-style: none; margin: 0; padding: 0;}
.sfx-pop-list li {display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; align-items: center; gap: 16px; border-top: 1px solid rgba(65, 64, 66, .14);}
.sfx-pop-list li:last-child {border-bottom: 1px solid rgba(65, 64, 66, .14);}
.sfx-pop-row {display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 32px; padding: 18px 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink);}
.sfx-pop-row img {width: 220px; height: 150px; object-fit: cover; display: block; background: var(--stone);}
.sfx-pop-row b {display: block; font-family: var(--face); font-weight: 300; font-size: min(clamp(28px, 2.2vw, 36px), 28px + (clamp(28px, 2.2vw, 36px) - 28px) * 0.6); line-height: 1.1;}
.sfx-pop-row i {display: block; margin-top: 12px; font: normal 400 19px/1.45 var(--sans); color: var(--tweed);}
.sfx-pop-row:hover b {text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;}
.sfx-pop-off {width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;}
@media (max-width: 760px) {
    .sfx-pop-list li {grid-template-columns: minmax(0, 1fr) 44px; gap: 0 6px;}
    .sfx-pop-list li > a.sfx-pop-days {grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: -4px 0 14px 118px;}
    .sfx-pop-list li > span:empty {display: none;}
    .sfx-pop-row {grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 14px 0;}
    .sfx-pop-row img {width: 104px; height: 104px;}
    .sfx-pop-row b {font-size: 22px;}
    .sfx-pop-row i {font-size: 14.5px; margin-top: 6px;}
    .sfx-pop-off {width: 44px; height: 44px;}
}

/* the page: one column on paper under the member's menu */
.mt-page { background: var(--paper, #FFFFF7); color: var(--ink, #414042); --tweed: #682114; --bracken: #C08C3D; --stone: #E9E2D6; --face: 'Larken', Georgia, serif; --sans: 'Jost', Helvetica, Arial, sans-serif; }
.mt-in { width: min(100%, 1120px); margin: 0 auto; padding: 72px clamp(16px, 4vw, 60px) 120px; }
.mt-h, .mt-name { display: block; width: 100%; margin: 0 0 32px; padding: 0; border: 0; background: none; color: var(--ink, #414042);
    font-family: var(--face); font-weight: 300; font-size: min(clamp(44px, 5vw, 84px), 28px + (clamp(44px, 5vw, 84px) - 28px) * 0.6); line-height: 1.04; letter-spacing: -.015em; }
.mt-name { border-bottom: 1px solid transparent; }
.mt-name:hover, .mt-name:focus { border-bottom-color: rgba(65, 64, 66, .35); outline: none; }
.mt-back { margin: 0 0 22px; }
/* YOUR TRIPS: the heading with its one button, then the trips as cards, three across */
.mt-in:has(.mt-cards) { width: min(100%, 1400px); }
.mt-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 40px; }
.mt-top .mt-h { margin: 0; width: auto; }
.mt-top .btn { text-decoration: none; height: 56px; padding: 0 30px; font-size: 16px; }
.mt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 33px; }
.mt-card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.mt-card > a { position: absolute; inset: 0; display: block; color: #F9F5EE; text-decoration: none; }
.mt-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.mt-card:hover img { transform: scale(1.03); }
.mt-card > a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, .34), rgba(14, 12, 10, 0) 30%, rgba(14, 12, 10, 0) 45%, rgba(14, 12, 10, .68)); }
.mt-card-said { position: absolute; z-index: 2; left: 22px; right: 70px; top: 20px; font: 500 15px/1.35 var(--sans); text-shadow: 0 1px 10px rgba(14, 12, 10, .45); }
.mt-card b { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; font-family: var(--face); font-weight: 300; font-size: min(clamp(32px, 3vw, 46px), 28px + (clamp(32px, 3vw, 46px) - 28px) * 0.6); line-height: 1.04; letter-spacing: -.015em; }
.mt-card.is-bare > a { color: var(--ink, #414042); }
.mt-card.is-bare > a::after { display: none; }
.mt-card.is-bare .mt-card-said { text-shadow: none; color: var(--tweed); }
/* delete: a cross in the corner, shown when the card is pointed at, always where there is no pointer */
.mt-card-x { position: absolute; z-index: 3; top: 0; right: 0; width: 52px; height: 52px; padding: 0; border: 0; background: #F9F5EE; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.mt-card-x svg { width: 20px; height: 20px; fill: none; stroke: #414042; stroke-width: 1.5; stroke-linecap: square; }
.mt-card:hover .mt-card-x, .mt-card-x:focus-visible { opacity: 1; }
.mt-card-x:hover { background: #fff; }
@media (hover: none) { .mt-card-x { opacity: 1; } }
/* the way to a new one, always the last card */
a.mt-card.is-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: none; border: 1px solid rgba(65, 64, 66, .35); color: var(--ink, #414042); text-decoration: none; }
a.mt-card.is-new:hover { background: #F5F1E9; }
a.mt-card.is-new i { font: 300 min(64px, 28px + (64px - 28px) * 0.6)/1 var(--face); }
a.mt-card.is-new b { position: static; font-size: 30px; }
/* A TRIP'S OWN PAGE: the photograph of where it is going across the top, its name on it; then two parts, each with what
   is on the trip and four places offered for it */
.mt-hero { position: relative; min-height: 440px; display: flex; align-items: flex-end; background: #414042; color: #F9F5EE; overflow: hidden; }
.mt-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, .3), rgba(14, 12, 10, .1) 40%, rgba(14, 12, 10, .7)); }
.mt-hero-in { position: relative; z-index: 2; width: min(100%, 1400px); margin: 0 auto; padding: 56px clamp(16px, 4vw, 60px) 44px; }
.mt-hero .mt-back a { color: #F9F5EE; border-bottom-color: rgba(249, 245, 238, .6); }
.mt-hero .mt-name { color: #F9F5EE; margin: 0 0 10px; }
.mt-hero .mt-name:hover, .mt-hero .mt-name:focus { border-bottom-color: rgba(249, 245, 238, .6); }
.mt-hero .mt-said { margin: 0; color: #F9F5EE; font-size: 21px; }
.mt-hero.is-bare { min-height: 0; background: none; color: var(--ink, #414042); }
.mt-hero.is-bare::after { display: none; }
.mt-hero.is-bare .mt-back a, .mt-hero.is-bare .mt-name { color: var(--ink, #414042); }
.mt-hero.is-bare .mt-said { color: var(--tweed); }
.mt-in.is-trip { width: min(100%, 1400px); padding-top: 8px; }
.mt-part-top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0 0 22px; }
.mt-part-top h2 { margin: 0; }
.mt-part-top a { font: 500 16px/1.3 var(--sans); color: var(--ink, #414042); text-decoration: none; border-bottom: 1px solid rgba(65, 64, 66, .35); padding: 4px 0; white-space: nowrap; }
.mt-part-top a:hover { border-bottom-color: var(--ink, #414042); }
.mt-part .sfx-pop-list { margin: 0 0 36px; }
.mt-in.is-trip .mt-add { margin: 72px 0 0; }
/* THE TRIP'S HOME PAGE, in the home page's bands: each the full width on its own ground, its column 1600 at most */
.mt-hero { min-height: min(68vh, 640px); }
.mt-hero-in, .mt-band-in { width: min(100%, 1600px); margin: 0 auto; padding-left: clamp(16px, 3vw, 60px); padding-right: clamp(16px, 3vw, 60px); box-sizing: border-box; }
.mt-hero .mt-name { font-size: min(clamp(54px, 6.4vw, 112px), 28px + (clamp(54px, 6.4vw, 112px) - 28px) * 0.6); }
.mt-hero .mt-said { font-size: 24px; }
.mt-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the trip's parts along the top, in the account bar's own lettering (Larken 300 at 26px, a bracken line under the one chosen) */
/* held under the site bar as the page scrolls, as the member's menu is, so another part is one press from anywhere */
.mt-tabs { background: #FFFFF7; box-shadow: 0 10px 30px rgba(65, 64, 66, .06); position: sticky; top: var(--bar, 76px); z-index: 40; }
@media (max-width: 900px) { .mt-tabs { top: var(--bar, 64px); } }
.mt-tabs .mt-band-in { display: flex; align-items: center; gap: 34px; height: 84px; overflow-x: auto; scrollbar-width: none; }
/* centred, as the member's menu is (Jack: "i think this can be centered") and as the film's title and the finer tabs under it are */
@media (min-width: 901px) { .mt-tabs .mt-band-in { justify-content: center; } }
.mt-tabs .mt-band-in::-webkit-scrollbar { display: none; }
.mt-tabs button { white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 6px; cursor: pointer; color: rgba(65, 64, 66, .55); font: 300 26px/1.15 var(--face); letter-spacing: -.005em; transition: color .2s, border-color .2s; }
.mt-tabs button:hover { color: #414042; }
.mt-tabs button.on { color: #414042; border-bottom-color: var(--bracken); }
@media (max-width: 900px) { .mt-tabs .mt-band-in { height: 64px; gap: 20px; } .mt-tabs button { font-size: 20px; } }
.mt-band { padding: clamp(56px, 6vw, 104px) 0; }
.mt-band.g-paper { background: #FFFFF7; }
.mt-band.g-blanket { background: #F2EAE0; }
.mt-band.g-forest { background: #414042; color: #F9F5EE; }
.mt-band h2 { margin: 0; font-family: var(--face); font-weight: 300; font-size: min(clamp(38px, 3.8vw, 64px), 28px + (clamp(38px, 3.8vw, 64px) - 28px) * 0.6); line-height: 1.05; letter-spacing: -.015em; color: inherit; }
.mt-band .mt-part-top { margin: 0 0 40px; }
.mt-band .mt-part-top a { font-size: 17px; }
/* a part opened on its own opens on a film, its name centred on it and its way on under it (Jack, 15 October 2026:
   "maybe cnetering the title and put a video background here"); the band under it starts closer, and the finer tabs
   stand straight under the film */
.mt-film { position: relative; overflow: hidden; display: grid; place-items: center; min-height: clamp(260px, 30vw, 440px); background: #2B301D; color: #F9F5EE; text-align: center; }
.mt-film > video, .mt-film > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-film::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, .22), rgba(14, 12, 10, .42)); }
.mt-film-in { position: relative; z-index: 1; padding: 48px clamp(16px, 3vw, 60px); }
.mt-film h2 { margin: 0; font-family: var(--face); font-weight: 300; font-size: min(clamp(40px, 4.6vw, 76px), 28px + (clamp(40px, 4.6vw, 76px) - 28px) * 0.6); line-height: 1.04; letter-spacing: -.015em; color: #F9F5EE; text-shadow: 0 2px 24px rgba(14, 12, 10, .35); }
.mt-film a { display: inline-block; margin: 22px 0 0; font: 500 17px/1.3 var(--sans); color: #F9F5EE; text-decoration: none; border-bottom: 1px solid rgba(249, 245, 238, .6); padding: 4px 0; }
.mt-film a:hover { border-bottom-color: #F9F5EE; }
.mt-film + .mt-band { padding-top: clamp(40px, 4vw, 64px); }
.mt-film + .mt-band:has(> .lp-page) { padding-top: 0; }
/* the trip so far: a sentence, and the four parts on the wall's own columns, a photograph of what is chosen or the word Choose */
.mt-sofar-say { margin: 18px 0 40px; max-width: 46em; font: 400 21px/1.5 'Lora', Georgia, serif; color: var(--tweed); }
.mt-sofar-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 33px; align-items: start; }
.mt-sofar-parts button { display: block; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.mt-sofar-pic { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; margin: 0 0 18px; background: #E6DACB; }
.mt-sofar-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-sofar-pic.is-empty img { filter: grayscale(1); opacity: .38; }
.mt-sofar-pic i { z-index: 1; position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; height: 46px; padding: 0 20px; background: #F9F5EE; color: #414042; font: 500 15px/1 var(--sans); }
.mt-sofar-parts button:hover .mt-sofar-pic i { background: #fff; }
.mt-sofar-parts b { display: block; font-family: var(--face); font-weight: 300; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
.mt-sofar-has { display: block; margin: 6px 0 0; font: 400 17px/1.45 'Lora', Georgia, serif; color: var(--tweed); }
@media (max-width: 1300px) { .mt-sofar-parts { gap: 24px; } }
@media (max-width: 900px) { .mt-sofar-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .mt-sofar-say { font-size: 19px; margin-bottom: 28px; } .mt-sofar-parts b { font-size: 23px; } }
/* share the trip, under its name: one button, then the link beside it */
.mt-share { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 26px 0 0; color: #F9F5EE; font: 400 19px/1.4 'Lora', Georgia, serif; }
.mt-share-go { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border: 0; background: #F9F5EE; color: #414042; cursor: pointer; text-decoration: none; font: 500 16px/1 var(--sans); }
.mt-share-go:hover { background: #fff; }
.mt-share input { height: 50px; width: min(100%, 460px); padding: 0 16px; border: 0; background: rgba(249, 245, 238, .92); color: #414042; font: 400 15px/1 var(--sans); }
.mt-share-stop { background: none; border: 0; padding: 0; cursor: pointer; color: #F9F5EE; font: 400 17px/1.4 'Lora', Georgia, serif; text-decoration: underline; text-underline-offset: 4px; }
h1.mt-name { margin: 0; }
/* THE TRIP ON THE MAP, the whole window: the side down the left with a large cross at its head, the Google map beside it */
.mt-map { position: fixed; inset: 0; z-index: 4000; background: #EEEAE4; }
.mt-map-map { position: absolute; inset: 0 0 0 480px; }
.mt-map-map .bm-gmap-in, .mt-map-map .sfx-pop-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.mt-map-side { position: absolute; left: 0; top: 0; bottom: 0; width: 480px; box-sizing: border-box; overflow-y: auto; padding: 32px 36px 48px; background: #FFFFF7; box-shadow: 10px 0 40px rgba(65, 64, 66, .14); z-index: 2; }
.mt-map-x { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 0 30px; border: 0; background: #414042; color: #F9F5EE; cursor: pointer; }
.mt-map-x svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.mt-map-name { display: block; font-family: var(--face); font-weight: 300; font-size: min(42px, 28px + (42px - 28px) * 0.6); line-height: 1.05; letter-spacing: -.015em; color: #414042; }
.mt-map-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.mt-map-kinds button { height: 46px; padding: 0 18px; border: 0; background: #F2EAE0; color: #414042; cursor: pointer; font: 500 15px/1 var(--sans); white-space: nowrap; }
.mt-map-kinds button:hover { background: #E6DACB; }
.mt-map-kinds button.on { background: #414042; color: #F9F5EE; }
.mt-map-side ul { list-style: none; margin: 28px 0 0; padding: 0; }
.mt-map-side li button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 9px 0; background: none; border: 0; text-align: left; cursor: pointer; color: #414042; }
.mt-map-side li img, .mt-map-side li i { flex: none; width: 64px; height: 64px; object-fit: cover; background: #E6DACB; }
.mt-map-side li b { display: block; font-family: var(--face); font-weight: 300; font-size: 23px; line-height: 1.15; }
.mt-map-side li em { display: block; margin: 4px 0 0; font: 400 15px/1.4 'Lora', Georgia, serif; font-style: normal; color: var(--tweed); }
.mt-map-side li.is-mine em { color: var(--bracken); font: 500 14px/1.4 var(--sans); }
.mt-map-side li.on b, .mt-map-side li button:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* every thing as its photograph in a circle, as the Bookmarks map has them; what is on the trip wears bracken */
.mt-map .bm-pins { position: absolute; left: 0; top: 0; }
.mt-map .bm-photo { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0; border: 3px solid #fff; border-radius: 50%; overflow: hidden; background: #F5F1E9; box-shadow: 0 3px 12px rgba(65, 64, 66, .28); cursor: pointer; transition: transform .2s, border-color .2s; }
.mt-map .bm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mt-map .bm-photo.is-mine { border-color: var(--bracken); width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.mt-map .bm-photo.lit { transform: scale(1.15); }
.mt-map .bm-photo.on { transform: scale(1.4); border-color: #414042; }
.mt-map .sfx-pop-map { background: #2B301D; }
.mt-map .sfx-pop-map .sfx-coast path { fill: #414042; }
.mt-map .sfx-pop-map circle { stroke: #2B301D; cursor: pointer; }
.mt-map .sfx-pop-map circle.visit { fill: #F9F5EE; }
.mt-map .sfx-pop-map circle.idea { fill: #2B301D; stroke: #F9F5EE; }
@media (max-width: 900px) {
    .mt-map-map { inset: 0 0 48vh 0; }
    .mt-map-side { top: auto; width: 100%; height: 48vh; padding: 20px 16px 32px; box-shadow: 0 -10px 40px rgba(65, 64, 66, .14); }
    .mt-map-x { position: fixed; left: 12px; top: 12px; width: 52px; height: 52px; margin: 0; z-index: 3; }
    .mt-map-name { font-size: 30px; }
}
.mt-map-card { margin: 32px 0 0; background: #2B301D; color: #F9F5EE; }
.mt-map-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mt-map-card b { display: block; padding: 22px 24px 0; font-family: var(--face); font-weight: 300; font-size: 30px; line-height: 1.1; }
.mt-map-card span { display: block; padding: 8px 24px 0; font: 400 17px/1.45 'Lora', Georgia, serif; color: rgba(249, 245, 238, .8); }
.mt-map-card p { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0; padding: 22px 24px 24px; }
.mt-map-card .mt-tile-add, .mt-map-open .mt-tile-add { position: static; }
.mt-map-card em { font: 500 15px/1 var(--sans); font-style: normal; color: var(--bracken); }
.mt-map-card a { color: #F9F5EE; font: 500 15px/1 var(--sans); text-underline-offset: 4px; }
.mt-map-open { margin: 32px 0 0; }
@media (max-width: 900px) { .mt-share input { width: 100%; } }
/* WHERE THEY ARE STAYING: a stop of the trip, the photograph beside its name and what is known of it */
.mt-base { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 60px); align-items: center; margin: 0 0 33px; background: #F2EAE0; }
.mt-base > img, .mt-base > i { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #E6DACB; }
.mt-base > div { padding: 28px clamp(20px, 3vw, 48px) 28px 0; }
.mt-base b { display: block; font-family: var(--face); font-weight: 300; font-size: min(clamp(32px, 3vw, 52px), 28px + (clamp(32px, 3vw, 52px) - 28px) * 0.6); line-height: 1.05; letter-spacing: -.015em; color: #414042; }
.mt-base span { display: block; margin: 12px 0 0; font: 400 19px/1.5 'Lora', Georgia, serif; color: var(--tweed); }
.mt-base p { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 26px 0 0; }
.mt-base-go { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border: 0; background: #414042; color: #F9F5EE; cursor: pointer; text-decoration: none; font: 500 16px/1 var(--sans); white-space: nowrap; }
.mt-base-go:hover { background: #000; }
.mt-base-go:disabled { opacity: .45; cursor: default; }
.mt-base-go.is-quiet { background: #F2EAE0; color: #414042; }
.mt-base-go.is-quiet:hover { background: #E6DACB; }
.mt-base-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; font: 400 17px/1.5 'Lora', Georgia, serif; color: var(--tweed); }
.mt-base.is-new { margin: 28px 0 0; background: #FFFFF7; }
.mt-base.is-new input { display: block; width: 100%; box-sizing: border-box; height: 56px; margin: 0 0 10px; padding: 0 16px; border: 0; background: #F2EAE0; color: #414042; font: 400 19px/1 'Lora', Georgia, serif; }
.mt-base.is-new input:first-child { font-family: var(--face); font-weight: 300; font-size: 26px; }
/* somewhere of their own: one box, on blanket */
.mt-own { margin: 0 0 56px; padding: 36px 40px 36px; background: #F2EAE0; }
.mt-own h3 { margin: 0; font-family: var(--face); font-weight: 300; font-size: min(34px, 28px + (34px - 28px) * 0.6); line-height: 1.1; letter-spacing: -.01em; color: #414042; }
.mt-own > p { margin: 10px 0 0; font: 400 19px/1.5 'Lora', Georgia, serif; color: var(--tweed); }
.mt-own-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 22px 0 0; }
.mt-own-box input { flex: 1 1 320px; max-width: 720px; height: 56px; padding: 0 18px; border: 0; background: #FFFFF7; color: #414042; font: 400 19px/1 'Lora', Georgia, serif; }
.mt-own-box .mt-base-go { height: 56px; }
.mt-own .mt-own-says { color: #414042; }
.mt-own-found { list-style: none; margin: 18px 0 0; padding: 0; max-width: 720px; }
.mt-own-found button { display: block; width: 100%; padding: 14px 18px; margin: 0 0 6px; border: 0; background: #FFFFF7; text-align: left; cursor: pointer; color: #414042; }
.mt-own-found button:hover { background: #fff; }
.mt-own-found button.has-pic { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 10px 18px 10px 10px; }
.mt-own-found button.has-pic img { grid-row: 1 / span 2; width: 64px; height: 64px; object-fit: cover; display: block; }
.mt-own-found button.has-pic b { align-self: end; }
.mt-own-found button.has-pic span { align-self: start; }
.mt-own-found b { display: block; font-family: var(--face); font-weight: 300; font-size: 24px; line-height: 1.15; }
.mt-own-found span { display: block; margin: 4px 0 0; font: 400 16px/1.4 'Lora', Georgia, serif; color: var(--tweed); }
.mt-own-or { margin: 0 0 30px; font-family: var(--face); font-weight: 300; font-size: min(34px, 28px + (34px - 28px) * 0.6); line-height: 1.1; letter-spacing: -.01em; color: #414042; }
.mt-any { margin: 0; }
/* the foot of a trip: the way back, and the one thing that cannot be undone, small and apart */
.mt-band.mt-last { padding: 36px 0; }
.mt-last .mt-band-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.mt-last .mt-band-in > :last-child { margin-left: auto; }
.mt-last a, .mt-last button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--tweed); font: 400 17px/1.4 'Lora', Georgia, serif; text-decoration: underline; text-underline-offset: 4px; }
/* two things to do with a place to stay offered: stay here, or shortlist it */
.mt-tile-acts { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.mt-tile-acts .mt-tile-add { position: static; }
.mt-tile-add.is-quiet { background: rgba(14, 12, 10, .5); color: #F9F5EE; }
.mt-tile-add.is-quiet:hover { background: rgba(14, 12, 10, .7); }
.mt-tile.is-on.has-act b { bottom: 82px; }
/* which stop the page is showing what is near, when the trip has more than one */
.mt-bases { background: #FFFFF7; }
.mt-bases .mt-band-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 28px; padding-bottom: 4px; }
.mt-bases span { margin-right: 12px; font: 400 19px/1.4 'Lora', Georgia, serif; color: var(--tweed); }
.mt-bases button { height: 48px; padding: 0 20px; border: 0; background: #F2EAE0; color: #414042; cursor: pointer; font: 500 16px/1 var(--sans); }
.mt-bases button.on { background: #414042; color: #F9F5EE; }
@media (max-width: 900px) { .mt-base { grid-template-columns: 1fr; gap: 0; } .mt-base > div { padding: 20px 18px 24px; } .mt-own { padding: 24px 18px; margin-bottom: 36px; } .mt-own h3, .mt-own-or { font-size: 27px; }
    .mt-tile-acts { left: 12px; right: 12px; bottom: 12px; } }
/* a question at a time, on paper within the blanket: the question, its answers as square buttons, and the way past it */
.mt-ask { margin: 0 0 44px; padding: 36px 40px 30px; background: #FFFFF7; }
.mt-ask h3 { margin: 0 0 22px; font-family: var(--face); font-weight: 300; font-size: min(34px, 28px + (34px - 28px) * 0.6); line-height: 1.1; letter-spacing: -.01em; color: #414042; }
.mt-ask-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.mt-ask-opts button { height: 52px; padding: 0 22px; border: 0; background: #F2EAE0; color: #414042; cursor: pointer; font: 500 16px/1 var(--sans); white-space: nowrap; transition: background .15s, color .15s; }
.mt-ask-opts button:hover { background: #E6DACB; }
.mt-ask-opts button.on { background: #414042; color: #F9F5EE; }
.mt-ask-foot { display: flex; align-items: center; gap: 26px; margin: 22px 0 0; }
.mt-ask-back { margin-left: auto; }
.mt-ask-done { margin: -16px 0 36px; }
.mt-ask-done .mt-ask-skip { margin-left: 0; }
.mt-ask-go { height: 52px; padding: 0 30px; border: 0; background: #414042; color: #F9F5EE; cursor: pointer; font: 500 16px/1 var(--sans); }
.mt-ask-skip { background: none; border: 0; padding: 0; cursor: pointer; color: var(--tweed); font: 400 17px/1.4 'Lora', Georgia, serif; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .mt-ask { padding: 24px 18px 22px; margin-bottom: 30px; } .mt-ask h3 { font-size: 27px; } .mt-ask-opts button { height: 48px; padding: 0 16px; font-size: 15px; } }
/* an event with no photograph of its own stands on forest, so its name can still be read */
.mt-tile:not(:has(img)) { background: #414042; }
/* one wall a band: tall photographs four across, the name on the photograph */
.mt-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 33px; }
.mt-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.mt-tile > a { position: absolute; inset: 0; display: block; color: #F9F5EE; text-decoration: none; }
.mt-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.mt-tile:hover img { transform: scale(1.03); }
.mt-tile > a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, .36), rgba(14, 12, 10, 0) 30%, rgba(14, 12, 10, 0) 40%, rgba(14, 12, 10, .74)); }
.mt-tile-said { position: absolute; z-index: 2; left: 20px; right: 64px; top: 18px; font: 500 15px/1.35 var(--sans); text-shadow: 0 1px 10px rgba(14, 12, 10, .45); }
.mt-tile b { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 82px; font-family: var(--face); font-weight: 300; font-size: min(clamp(26px, 2.3vw, 40px), 28px + (clamp(26px, 2.3vw, 40px) - 28px) * 0.6); line-height: 1.05; letter-spacing: -.015em; }
.mt-tile.is-on b { bottom: 20px; }
/* on the trip: a bracken line down its left edge and its own words along the top */
.mt-tile.is-on { box-shadow: inset 0 0 0 0 transparent; }
.mt-tile.is-on::before { content: ''; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 6px; background: var(--bracken); }
.mt-tile-add { position: absolute; z-index: 3; left: 20px; bottom: 20px; height: 46px; padding: 0 20px; border: 0; background: #F9F5EE; color: #414042; cursor: pointer; font: 500 15px/1 var(--sans); white-space: nowrap; }
.mt-tile-add:hover { background: #fff; }
.mt-tile .mt-card-x { opacity: 1; }
/* the trip on our own map, on forest: the names at the left, the map at the right */
.mt-onmap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 640px); gap: clamp(32px, 5vw, 96px); align-items: center; }
.mt-onmap ul { list-style: none; margin: 32px 0 0; padding: 0; }
.mt-onmap li { border-top: 0; }
.mt-onmap li a { display: block; padding: 8px 0; font-family: var(--face); font-weight: 300; font-size: 28px; line-height: 1.15; color: #F9F5EE; text-decoration: none; }
.mt-onmap li a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.mt-onmap .sfx-pop-map { position: static; background: #2B301D; }
.mt-onmap .sfx-pop-map .sfx-coast path { fill: #414042; }
.mt-onmap .sfx-pop-map circle { stroke: #2B301D; }
.mt-onmap .sfx-pop-map circle.visit { fill: #F9F5EE; }
.mt-band .mt-add { margin: 0; }
.mt-band .mt-end { margin: 48px 0 0; }
@media (max-width: 1300px) { .mt-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 900px) { .mt-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mt-onmap { grid-template-columns: 1fr; } .mt-hero { min-height: 380px; }
    .mt-tile b { left: 12px; right: 12px; bottom: 62px; font-size: 21px; } .mt-tile.is-on b { bottom: 12px; } .mt-tile-said { left: 12px; right: 50px; top: 12px; font-size: 13px; }
    .mt-tile-add { left: 12px; bottom: 12px; height: 40px; padding: 0 14px; font-size: 14px; } .mt-tile .mt-card-x { width: 42px; height: 42px; }
    .mt-band .mt-part-top { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 24px; } .mt-hero .mt-said { font-size: 19px; } }
.mt-said { margin: -18px 0 36px; font: 400 19px/1.5 'Lora', Georgia, serif; color: var(--tweed); }
@media (max-width: 1100px) { .mt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 600px) { .mt-cards { grid-template-columns: 1fr; } .mt-top .mt-h { font-size: min(38px, 28px + (38px - 28px) * 0.6); } .mt-top .btn { height: 48px; padding: 0 20px; } }
.mt-back a, .mt-end button, .mt-none a { font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink, #414042); text-decoration: none;
    background: none; border: 0; border-bottom: 1px solid rgba(65, 64, 66, .35); padding: 6px 0; cursor: pointer; }
/* naming a new trip, and adding a place: a label, a box, and for the new trip its button */
.mt-new { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 48px; }
.mt-new label, .mt-add label { flex: 1 1 320px; max-width: 560px; display: block; }
.mt-new label span, .mt-add label span { display: block; margin: 0 0 8px; font: 400 15px/1.4 var(--sans); color: var(--tweed); }
.mt-new input, .mt-add input { display: block; width: 100%; box-sizing: border-box; height: 56px; padding: 0 16px; border: 1px solid rgba(65, 64, 66, .35); border-radius: 0; background: #fff;
    font-family: 'Lora', Georgia, serif; font-size: 18px; color: var(--ink, #414042); }
.mt-new input:focus, .mt-add input:focus { outline: 2px solid var(--bracken); outline-offset: 2px; }
.mt-new .btn { height: 56px; }
.mt-new .btn:disabled { opacity: .45; cursor: default; }
.mt-add { position: relative; margin: 0 0 12px; max-width: 560px; }
.mt-add ul { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid rgba(65, 64, 66, .35); border-top: 0; }
.mt-add li button { display: block; width: 100%; padding: 14px 16px; border: 0; background: none; cursor: pointer; text-align: left; font: 400 17px/1.3 'Lora', Georgia, serif; color: var(--ink, #414042); }
.mt-add li + li button { border-top: 1px solid rgba(65, 64, 66, .12); }
.mt-add li button:hover { background: #F5F1E9; }
.mt-add li i { font: normal 400 14px/1.3 var(--sans); color: var(--tweed); margin-left: 10px; }
.mt-part { margin: 56px 0 0; }
.mt-part h2 { margin: 0 0 18px; font-family: var(--face); font-weight: 300; font-size: min(clamp(28px, 2.6vw, 40px), 28px + (clamp(28px, 2.6vw, 40px) - 28px) * 0.6); line-height: 1.1; color: var(--ink, #414042); }
.mt-none { margin: 0; font: 400 17px/1.5 'Lora', Georgia, serif; color: var(--tweed); }
.mt-none a { margin-left: 12px; }
.mt-more { margin: 22px 0 0; }
.mt-more .btn { text-decoration: none; }
.mt-blank { display: block; width: 300px; height: 200px; background: var(--stone); }
.mt-end { margin: 72px 0 0; }
.mt-page a.sfx-pop-row { text-decoration: none; }
@media (max-width: 760px) {
    .mt-in { padding-top: 40px; }
    .mt-h, .mt-name { font-size: min(38px, 28px + (38px - 28px) * 0.6); margin-bottom: 22px; }
    .mt-blank { width: 104px; height: 104px; }
    .mt-new .btn { width: 100%; }
}