/* MEMORYLANE programme and country pages — the layout of 17 Sep 2026, after the owner's reference page (memorylane-finland-winter: style.css, gallery.css, ratings.css, trip-carousel.css), with the parts of ours the owner kept: the route heading with its day by day, and Where else? (the related pair, from finland-v2.css). Loaded only by public/finland/index.html and the pages built from it (scripts/data/programme-page.mjs). */ :root{color-scheme:dark;--bg:#080c0e;--ink:#fff;--mint:#b5ebd9;--mint-2:#acebd6;--muted:#e6e7e8;--soft:#c6dcd5;--deep:#10272a;--card:#0c1718;--line:#b5ebd944;--sticky-h:76px} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-bottom:calc(var(--sticky-h) + 16px)} /* The price bar, hidden for now (programme-hidden.js · the owner, 18 Sep: "เอา hide ไปก่อน"). Its markup, its CSS and its rows in the sheet are all still here; this takes it off the screen and gives back every pixel that was kept for it — the page's scroll padding, the footer's foot, where the photo button parks and where the privacy panel sits. */ html[data-hide-price-bar]{--sticky-h:0px} html[data-hide-price-bar] .programme-page .sticky{display:none} /* The leading line, hidden for now too: the next section already shows above the fold, so it was not telling anyone anything. */ html[data-hide-leading-line] .hero-lead{display:none} html[data-hide-close-button] .programme-page .close .button{display:none} html[data-hide-hero-fine] .hero-fine{display:none} html[data-hide-hero-button] .programme-page .hero .button{display:none} html[data-hide-score-block] .moments-sources{display:none} html[data-hide-route-pdf] .route-pdf{display:none} html[data-hide-itinerary] .full-route-cta{display:none} /* A card with a photo is the photo alone: no words over its foot, and so no dark shade laid there to keep them readable. */ html[data-hide-card-words] .care-card:not(.is-plain):not(.care-card-cta) .care-card-copy, html[data-hide-card-words] .care-card:not(.is-plain):not(.care-card-cta)::after{display:none} body.programme-page{margin:0;background:var(--bg);color:var(--ink);font-family:Prompt,sans-serif;font-size:18px;font-weight:400;line-height:1.8;-webkit-font-smoothing:antialiased} .programme-page a{color:inherit;text-decoration:none} .programme-page button,.programme-page a,.programme-page summary{-webkit-tap-highlight-color:transparent} .programme-page a:focus-visible,.programme-page summary:focus-visible,.programme-page video:focus-visible,.programme-page button:focus-visible{outline:3px solid var(--mint);outline-offset:6px} .programme-page img{display:block;max-width:100%;height:auto} .programme-page :is(h1,h2,h3,p,figure,ul,ol){margin:0} .programme-page :is(h1,h2,h3){font-weight:500} .programme-page h2{font-size:clamp(1.8rem,3.1vw,2.9rem);line-height:1.5;letter-spacing:-.025em} .programme-page .wrap{width:min(1240px,92%);margin-inline:auto} .programme-page .eyebrow{font-size:14px;letter-spacing:.17em;font-weight:500;color:var(--mint);margin-bottom:16px} .programme-page .fine{font-size:16px;color:var(--muted);line-height:1.8} .programme-page .button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:15px 26px;background:var(--mint);color:#080c0e;border-radius:4px;font-size:19px;font-weight:500;min-height:54px;transition:background .2s} .programme-page .button:hover{background:var(--mint-2)} .programme-page .text-link{display:inline-block;border-bottom:1px solid currentColor;margin-top:16px;font-size:18px;min-height:40px} .programme-page .skip-link{position:absolute;top:-100px;left:0;z-index:10;background:#000;padding:12px} .programme-page .skip-link:focus{top:0} .programme-page details{padding:15px 0} .programme-page summary{cursor:pointer;min-height:36px;align-content:center;font-size:18px} .programme-page details p{margin:14px 0} /* Header over the hero ─────────────────────────────────────────────── */ /* Over the video it is glass-clear; past the hero (motion.js adds .nav-solid to ) it takes a blurred bar, as the owner's reference does. Without the script it simply stays clear, which is what it has always been. */ .programme-header{position:absolute;z-index:3;top:0;left:6%;right:6%;height:110px;display:flex;justify-content:space-between;align-items:center;transition:background-color .6s ease,backdrop-filter .6s ease,padding .6s ease} html.js-motion .programme-header{position:fixed;left:0;right:0;padding:0 6%} html.nav-solid .programme-header{background:#0a141ab3;backdrop-filter:blur(10px)} .programme-header .brand img{width:76px;height:auto} .programme-header nav{display:flex} .programme-header .header-link{font-size:18px;border-bottom:1px solid var(--mint-2);padding:10px 0} /* What motion.js adds: a section rises into place once, the hero's picture drifts a little as the page moves, and the dark page fades into the white travel-dates band instead of meeting it at a hard edge. The page is readable without any of it. */ html.js-motion .will-reveal{opacity:0;transform:translateY(18px)} html.js-motion .will-reveal.is-revealed{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)} .programme-page .dates{position:relative} .programme-page .dates::before{content:'';position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,#0e1b1e,#ffffff00);opacity:var(--boundary,1);pointer-events:none;z-index:1} /* Hero ─────────────────────────────────────────────────────────────── */ /* The hero fills the screen at every size (the owner, 18 Sep: "banner video ทำให้เต็มจอได้"). svh, not dvh: a phone's toolbars coming and going must not make it jump; 100vh first for a browser without svh. */ .programme-page .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:135px 4% 96px;overflow:hidden} /* A little taller than the hero on both sides, so the drift (motion.js) never shows an edge. */ .hero-media{position:absolute;inset:-72px 0;overflow:hidden;will-change:transform} .programme-page .hero-photo,.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-photo{object-position:center 60%} /* The video is started by programme.js only where motion is welcome; until then (and always without it) the photo shows. */ .hero-video{object-position:center 60%;opacity:0;transition:opacity .9s ease} .hero-video.is-playing{opacity:1} /* Three layers, all the hero's own: the dark side the words sit on, the foot of the section, and a soft top so the transparent header stays legible over the video without a filled bar. */ .hero-shade{background:linear-gradient(90deg,#080c0eef,#080c0e95 44%,#080c0e15),linear-gradient(0deg,#080c0e,transparent 38%),linear-gradient(180deg,#080c0ecc,#080c0e00 24%)} .hero-copy{position:relative;width:min(1240px,100%);margin:auto} .hero-copy .country{font-family:Georgia,serif;font-size:clamp(4.5rem,8vw,7.8rem);line-height:1;margin-bottom:18px;letter-spacing:-.045em;color:var(--mint)} .programme-page h1{font-size:clamp(1.9rem,3.5vw,3rem);line-height:1.5} .hero-copy .intro{margin:16px 0 22px;font-size:20px} .offer{margin-bottom:20px} .offer>span{font-size:18px} .offer strong{display:block;font-size:2.6rem;font-weight:500;line-height:1.5} .offer strong small{font-size:18px;font-weight:400} .offer p{font-size:16px;color:var(--muted)} .hero-fine{margin-top:12px} .hero-caption{position:absolute;right:5%;top:50%;transform:translateY(-50%);font-size:.75rem;letter-spacing:.17em;writing-mode:vertical-rl;color:var(--muted)} /* เส้นนำสายตา (the owner, 19 Sep, after blacknz.co.nz): a solid hairline that starts --lead-into up inside the hero ("ทับ banner นิดนิด") and is not there until the page moves ("ยังไม่เลื่อนลงไม่ต้องโชว์"); it then eases down with the scroll to its full length, and the M of the logo in its ring comes up on its end. motion.js sets --lead-scale (0 → 1, eased) and --lead-mark (0 → 1); with no script, or with less motion asked for, the line is whole and the mark is there. */ .hero-lead{--lead-into:72px;--lead-scale:1;--lead-mark:1;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:48px;margin:calc(-1 * var(--lead-into)) auto 0;color:var(--mint);text-decoration:none} .hero-lead-line{display:block;width:1px;height:calc(var(--lead-into) + clamp(150px,26vh,230px));background:var(--mint);opacity:.85;transform:scaleY(var(--lead-scale));transform-origin:top} .hero-lead-mark{display:block;width:32px;height:32px;opacity:var(--lead-mark);transform:scale(calc(.7 + var(--lead-mark) * .3))} .hero-lead:focus-visible{outline:1px solid var(--mint);outline-offset:6px} /* YOUR WINTER MOMENTS ──────────────────────────────────────────────── */ .moments{padding:72px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:stretch} .section-title{margin-bottom:28px} .moments-copy{min-width:0;max-width:44rem} /* The words that make the case, no longer one block of same-size text (the owner, 19 Sep: "ทำตาม plan เลย", handoff/TRIP-PAGE-CHUNKS-PLAN.md): the blurb in three voices — the lead big and white, the middle quieter, the promise behind a thin mint rule like the leading line's — then what the winter holds as small score cards, whose scores they are in small quiet type right under them (#8fa39d, 7.4:1 — fainter than the words, still well above 4.5:1), and a button into LINE. The groups stand 30–34 px apart, the lines inside a group 16. */ .moments-blurb{margin-top:22px} .moments-blurb p{font-size:17px;line-height:1.85;color:#c4c9ca;max-width:33rem} .moments-blurb p:first-child{font-size:19px;line-height:1.7;color:var(--ink)} .moments-blurb p+p{margin-top:16px!important} .moments-blurb .moments-promise{margin-top:30px!important;padding:2px 0 2px 18px;border-left:1px solid var(--mint);font-size:16px;color:var(--soft)} .moments-preview{margin-top:20px!important;font-size:15px;line-height:1.85;color:var(--mint-2);letter-spacing:.01em;max-width:33rem} .moments-scores{list-style:none;margin:34px 0 0!important;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:33rem} .moments-scores>li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid #b5ebd933;border-radius:4px;background:#ffffff05} .moment-score{font-size:22px;font-weight:500;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums} .moment-score>span{font-size:.8em;color:var(--mint)} .moment-name{font-size:14px;line-height:1.45;color:var(--mint-2)} .moments-score-note{margin-top:10px!important;font-size:12px;line-height:1.6;color:#8fa39d} .programme-page .moments-cta{display:inline-flex;align-items:center;gap:14px;margin-top:32px;min-height:52px;padding:12px 22px;border:1px solid var(--mint);border-radius:4px;font-size:17px;line-height:1.4;color:var(--ink)} .programme-page .moments-cta:hover{background:var(--mint);color:var(--bg)} /* The reference scores, folded away under the words (lite-journey.css is not loaded here, so the pattern is restyled for the dark page). Closed it is one line; open it holds every score whole, with the note that they are not ours. */ .programme-page .lite-details{border-block:1px solid #b5ebd933;margin:24px 0 0;background:transparent} .programme-page .lite-details>summary{cursor:pointer;min-height:52px;padding:15px 30px 15px 0;position:relative;list-style:none;font-size:15px;line-height:1.6;color:var(--soft)} .programme-page .lite-details>summary::-webkit-details-marker{display:none} .programme-page .lite-details>summary::after{content:'+';position:absolute;right:2px;top:12px;font-size:23px;font-weight:300;color:var(--mint)} .programme-page .lite-details[open]>summary::after{content:'−'} .programme-page .lite-details>summary:hover{color:#fff} .programme-page .lite-detail-body{padding:4px 0 24px} .moments-list{list-style:none;margin:0!important;padding:0;display:grid;gap:26px} .moment{min-width:0;padding-top:22px;border-top:1px solid #b5ebd933} .moment:first-child{border-top:0;padding-top:0} .tile-label{font-size:14px;letter-spacing:.07em;color:var(--mint-2)} .moment h3{font-size:19px;line-height:1.5;margin:6px 0} .moment>p{font-size:16px;line-height:1.75;color:var(--muted)} .moment .trip-photo-date{margin-top:8px!important;font-size:14px;line-height:1.6;color:var(--soft)} /* The photos: two columns drifting upward behind a fade at the top and the foot, as icebreaker.fi does it. The drift is CSS alone, so it works without scripts; it stops on hover or focus, and is a still grid under prefers-reduced-motion. */ .moments-slide{position:relative;overflow:hidden;min-height:clamp(460px,64vh,720px)} .moments-slide::before,.moments-slide::after{content:'';position:absolute;left:0;right:0;height:16%;z-index:2;pointer-events:none} .moments-slide::before{top:0;background:linear-gradient(180deg,var(--bg),#080c0e00)} .moments-slide::after{bottom:0;background:linear-gradient(0deg,var(--bg),#080c0e00)} /* The two columns are laid over the section rather than inside its flow, so the strip takes the height of the row (the words, or its own floor — whichever is taller) instead of the height of the photos in it. That is what keeps the photos starting at the section's top edge and ending with the words, at any length of blurb. */ .moments-column{position:absolute;top:0;bottom:0;width:calc(50% - 7px);min-width:0;overflow:hidden} .moments-column[data-column="1"]{left:0} .moments-column[data-column="2"]{right:0} .moments-track{display:grid;gap:14px;animation:moments-rise 64s linear infinite;will-change:transform} .moments-column[data-column="2"] .moments-track{animation-duration:78s;animation-delay:-24s} .moments-slide:hover .moments-track,.moments-slide:focus-within .moments-track{animation-play-state:paused} @keyframes moments-rise{from{transform:translateY(0)}to{transform:translateY(-50%)}} .moments-frame{position:relative;container-type:inline-size;margin:0;border-radius:4px;overflow:hidden;background:var(--deep)} .programme-page .moments-frame>img{width:100%;aspect-ratio:4/3;object-fit:cover} .trip-watermark{position:absolute;right:2.8%;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;white-space:nowrap;font-size:clamp(4px,2.8cqw,11px);line-height:1.5;letter-spacing:.16em;color:#fff;opacity:.7;text-shadow:0 1px 4px #0009;pointer-events:none} .experience-rating{margin-top:16px;min-width:0;display:flex;flex-direction:column} .rating-label{font-size:14px!important;line-height:1.6;color:var(--soft)} .rating-score{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;margin-top:6px!important;line-height:1.5} .rating-star{color:#ffdc8a;font-size:22px} .rating-score strong{font-size:24px;font-weight:500;white-space:nowrap} .rating-score small{font-size:14px;font-weight:400;color:var(--soft)} .rating-count{font-size:14px;color:var(--muted)} .rating-experience{font-size:14px!important;line-height:1.65;margin-top:8px!important;color:var(--muted);overflow-wrap:anywhere} .rating-source{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;min-height:44px;padding:8px 0;font-size:14px;color:var(--mint)!important;text-decoration:underline!important;text-underline-offset:4px} .rating-source:hover{color:#fff!important} .rating-note{font-size:14px;line-height:1.8;color:var(--soft);max-width:1000px;margin:26px 0 12px!important} /* The route: our heading, the photo cards, day by day, FULL ITINERARY ───── */ .route-highlights{padding:76px 0;background:var(--deep)} .route-heading{margin-bottom:34px} .route-heading .eyebrow{margin-bottom:10px} .route-overview{margin-top:10px!important;font-size:clamp(1.1rem,1.8vw,1.45rem);color:var(--muted);overflow-wrap:anywhere} .route-overview span{color:var(--mint);padding:0 .2em} .route-more{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:0 40px;margin-top:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .route-days{flex:1 1 560px;min-width:0} .route-days summary{color:var(--mint)} .route-pdf{margin:15px 0!important;align-self:center} .route-pdf small{font-size:14px;color:var(--soft)} .route-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:0} .route-list li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:16px 0;border-top:1px solid #b5ebd922} .route-day{font-size:14px;letter-spacing:.12em;color:var(--mint);padding-top:4px} .route-list h3{font-size:19px;line-height:1.5} .route-list p{margin:4px 0 0!important;font-size:16px;color:var(--muted)} .route-itinerary .note{font-size:15px;color:var(--soft)} .pace-note{margin-top:8px;padding:18px 20px;border-left:2px solid var(--mint);background:#ffffff08} .pace-note h3{font-size:18px} .pace-note p{font-size:16px;color:var(--muted);margin:8px 0 0!important} .full-route-cta{display:flex;align-items:center;justify-content:space-between;gap:45px;padding:36px 0 0} .full-route-cta .eyebrow{margin-bottom:7px} .full-route-cta h3{font-size:26px;line-height:1.5} .full-route-cta div>p:last-child:not(.eyebrow){color:var(--muted);font-size:17px;margin-top:5px} .full-route-cta .button{flex:0 0 auto} /* Travel dates: a white band ─────────────────────────────────────────── */ .programme-page .dates{background:#fff;color:#080c0e;padding:65px 0;color-scheme:light} .dates .eyebrow{color:#173834} .dates a:focus-visible,.dates summary:focus-visible{outline-color:#173834} .dates-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px} .dates h2{font-size:clamp(1.7rem,2.7vw,2.35rem)} .dates .price{text-align:right;white-space:nowrap} .dates .price strong{display:block;font-size:2.8rem;font-weight:500;line-height:1.2} .dates .price span{display:block;font-size:16px} .dates .price small{display:block;font-size:14px;color:#34345e;white-space:normal;max-width:320px;margin-left:auto} .dates .price small:first-child{display:inline;color:#173834} .departure-group{margin:26px 0 8px!important} .departure-list{border-bottom:1px solid #d6d6e4} .departure{display:grid;grid-template-columns:85px minmax(0,1fr) auto;align-items:center;gap:8px 24px;border-top:1px solid #d6d6e4;padding:22px 0} .departure:hover{background:#e6fffc} .departure .month{font-size:1.35rem;line-height:1.2;font-weight:500} .departure .month small{display:block;font-size:16px;font-weight:400;margin-top:6px} .date-main{min-width:0} .date-main h3{font-size:22px;line-height:1.45;font-weight:500} .date-main h3 small{font-size:16px;font-weight:400;color:#34345e} .date-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:6px!important;font-size:16px;color:#34345e} .date-meta a{text-decoration:underline;text-underline-offset:3px} .departure-cost{white-space:nowrap} .departure-status{display:inline-block;font-size:14px;font-weight:500;line-height:1.4;padding:2px 10px;border-radius:999px;background:#e6fffc;color:#173834;border:1px solid #b5ebd9;white-space:nowrap} .departure.is-closed{background:transparent} .departure.is-closed .departure-status{background:#f1f1f5;color:#34345e;border-color:#d6d6e4} .departure.is-closed .date-main h3,.departure.is-closed .month{color:#6b6b80} .departure.is-selected{box-shadow:inset 3px 0 0 #173834;padding-left:14px} .departure-link{font-size:18px;font-weight:500;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:flex-end;gap:6px} .dates-note{margin-top:18px!important;color:#34345e!important} .dates-details{border-top:1px solid #d6d6e4;margin-top:18px} .details-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px} .dates .fine{color:#34345e} /* Where else? — the related pair (finland-v2.js) ────────────────────── */ .related-pair{padding:72px 0;border-top:1px solid #24393a} .related-pair .eyebrow{text-transform:none} .pair-heading{margin-bottom:clamp(24px,3vw,38px)} .pair-heading h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.5} .pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px);align-items:start} .pair-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #223635;border-radius:16px;background:linear-gradient(180deg,#0f1c1e,#0b1416);box-shadow:inset 0 1px 0 #ffffff0f,0 18px 40px -28px #000c;transition:border-color .25s ease} .pair-card:hover{border-color:#33534f} .pair-media{position:relative;display:block;aspect-ratio:16/7;overflow:hidden;background:#101f21} .programme-page .pair-media>img{width:100%;height:100%;object-fit:cover;object-position:center} .pair-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,#0d1719e8);pointer-events:none} .pair-media-note{position:absolute;z-index:1;left:18px;right:18px;bottom:12px;font-size:.7rem;line-height:1.7;color:#b6c6c2} .pair-media.is-placeholder{display:grid;place-items:center;background:radial-gradient(ellipse at 30% 20%,#1a3a38,transparent 70%),linear-gradient(140deg,#12262a,#0e1b1e)} .pair-media-mark{max-width:82%;text-align:center;font-size:.72rem;line-height:2.1;letter-spacing:.2em;color:#7fa39c;text-wrap:balance} .pair-body{display:flex;flex-direction:column;padding:clamp(18px,2.2vw,26px)} .pair-body .eyebrow{margin-bottom:12px} .pair-body h3{font-size:clamp(1.12rem,1.7vw,1.35rem);font-weight:400;line-height:1.55} .pair-blurb{margin-top:8px!important;color:var(--soft);font-size:.85rem;line-height:1.8} .pair-list{list-style:none;margin:18px 0 0!important;padding:0;display:grid;gap:2px} .pair-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:13px 12px;margin-inline:-12px;border-radius:8px;border-top:1px solid #ffffff12;transition:background .18s ease} .pair-list li:first-child a{border-top:0} .pair-list a:hover{background:#13282b} .pair-row-head{min-width:0} .pair-region{display:block;font-size:.66rem;letter-spacing:.16em;color:var(--mint)} .pair-name{display:block;margin-top:3px;font-size:.97rem;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pair-row-meta{grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:5px} .pair-dates{font-size:.8rem;color:#c3cfcc;font-variant-numeric:tabular-nums} .pair-note{font-size:.7rem;letter-spacing:.04em;color:var(--soft);padding:3px 9px;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff08} .pair-price{grid-column:2;grid-row:1/span 2;align-self:center;font-size:1rem;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap} .pair-price small{font-size:.68rem;color:var(--soft);margin-left:4px} .pair-price.is-tbc{font-size:.75rem;color:var(--soft);letter-spacing:0} .pair-list.is-single a{position:relative;grid-template-columns:minmax(0,1fr);gap:0;padding:18px 18px 16px 22px;margin-inline:-4px;border:0;border-radius:12px;background:#ffffff08;overflow:hidden} .pair-list.is-single a::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:#35635c;transition:background .25s ease,top .25s ease,bottom .25s ease} .pair-list.is-single a:hover{background:#ffffff0f} .pair-list.is-single a:hover::before{top:0;bottom:0;background:var(--mint)} .pair-list.is-single .pair-name{margin-top:5px;font-size:1.18rem;line-height:1.5;white-space:normal} .pair-list.is-single .pair-row-meta{margin-top:10px} .pair-list.is-single .pair-price{grid-column:1;grid-row:auto;margin-top:14px;font-size:1.3rem} .pair-list.is-single .pair-go{grid-column:1;margin-top:12px;padding-top:12px;border-top:1px solid #ffffff14;font-size:.82rem;color:var(--mint)} .pair-list:not(.is-single) .pair-go{display:none} /* Clips from real trips beside WHY MEMORYLANE? ───────────────────────── */ /* One gap everywhere in this block — between the two columns, between the rows of cards, and between the cards — so the right-hand side reads as even (the owner, 18 Sep: "เพิ่ม margin … ให้ฝั่งขวาดูสมมาตรกว่า"). The clip is sized to the strip rather than the strip stretched to the clip, which is what made the cards too tall. */ .care{--care-gap:24px;--care-clip:16.25rem;--care-wrap:min(1240px,92vw);--care-card:calc((var(--care-wrap) - var(--care-clip) - 6 * var(--care-gap)) / 6);position:relative;isolation:isolate;display:grid;grid-template-columns:var(--care-clip) minmax(0,1fr);grid-template-areas:'head head' 'film cards' 'foot foot';gap:var(--care-gap);align-items:stretch;padding:4.5rem 0;overflow-x:clip} .care.no-film{grid-template-columns:minmax(0,1fr);grid-template-areas:'head' 'cards' 'foot'} .care-head{grid-area:head;min-width:0;max-width:44rem} .care-film{grid-area:film;position:relative;min-width:0;align-self:start} .care-copy{grid-area:cards} .care-explorer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1} .care-explorer span{position:absolute;width:48rem;height:20rem;left:-16rem;top:1rem;border:1.5px solid #00ffe62b;border-radius:50%;transform:rotate(-22deg)} .care-explorer span+span{width:50rem;height:15rem;left:18rem;top:auto;bottom:1rem;border-color:#7af4e622;transform:rotate(-12deg)} .care-copy{min-width:0;max-width:none;display:grid;min-height:0} .care-foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;margin-top:.25rem!important;font-size:15px;line-height:1.7;color:var(--muted)} .care-foot .text-link{margin-top:0;font-size:15px;min-height:0;border-bottom-color:#b5ebd977} .care-head .eyebrow{margin-bottom:.75rem} .care-copy .eyebrow{margin:0 0 1rem} .care-head h2{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.5;letter-spacing:0;text-wrap:balance} /* The cards: two rows that scroll sideways, the last one cut off at the edge so there is plainly more (the owner's reference image). A card with no photo is the same tile on a tinted panel — a photo is never invented for one. */ /* Six columns of cards, each a quiet portrait (4:5) rather than a stretched tile. The strip carries no scrollbar of its own any more: the rows move themselves (programme.js), every card comes past, and a bar that no longer says where you are in the strip is worse than none. */ .care-cards{display:grid;gap:var(--care-gap);min-width:0} .care-row{overflow:hidden;min-width:0;--care-fade:56px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--care-fade),#000 calc(100% - var(--care-fade)),#0000);mask-image:linear-gradient(90deg,#0000,#000 var(--care-fade),#000 calc(100% - var(--care-fade)),#0000)} .care-track{display:flex;gap:var(--care-gap);width:max-content;will-change:transform} .care-set{display:flex;gap:var(--care-gap)} .care-cards:focus-visible{outline:3px solid var(--mint);outline-offset:6px} /* Moved by hand (programme.js): the finger's up-and-down stays the page's, its sideways is the row's; a hand to grab it. */ .care-cards.is-by-hand .care-row{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none} .care-cards.is-dragging .care-row{cursor:grabbing} .care-card{position:relative;display:block;flex:0 0 var(--care-card);width:var(--care-card);aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--deep);isolation:isolate} .care-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .care-card:not(.is-plain):not(.care-card-cta)::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#080c0e00 38%,#080c0ee6);pointer-events:none} .care-card.is-plain{background:linear-gradient(160deg,#16302f,#0e1b1e)} .care-card-copy{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:10px} .care-card-copy h3{font-size:14px;line-height:1.35;font-weight:500} .care-card-copy p{font-size:12px;line-height:1.5;color:var(--soft)} /* The section's sentence as a tile: no heading of its own, so it reads as words rather than as another card. */ .care-card.is-words{background:linear-gradient(160deg,#1d3a38,#0e1b1e)} .care-card.is-words p{font-size:14px;line-height:1.7;color:var(--muted)} /* The accent card: the one that opens LINE, at the head of the second row. */ .care-card-cta{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px;background:var(--mint);color:#080c0e} /* .programme-page a{color:inherit} outweighs the rule above, which left the card's words white on mint (1.3:1) since it came. */ .programme-page .care-card-cta{color:#080c0e} .care-card-cta .eyebrow{color:#173834;margin:0} .care-card-cta-title{font-size:15px;font-weight:500;line-height:1.35} .care-card-arrow{font-size:22px;line-height:1} .care-card-cta:hover{background:var(--mint-2)} /* The team's photo button (travel-contact.js) is back on these pages (the owner, 18 Sep: "เอา let's talk travel กลับมาหน้านี้ด้วย"). It parks above the price bar; on a phone the bar's own LINE button takes its place. */ .programme-page .travel-contact{bottom:calc(var(--sticky-h) + 14px + env(safe-area-inset-bottom,0px));transition:opacity .18s ease} /* programme.js takes it out of the way of the photo columns, the card strip and a round's own LINE link. */ /* Away at once — a button caught half-faded is still a button on the photograph — and back gently afterwards. */ .programme-page .travel-contact.is-away{opacity:0;pointer-events:none;transition:none} .care .text-link{font-size:1.0625rem;line-height:1.6;min-height:2.75rem;padding:.5rem 0;overflow-wrap:anywhere} .care-copy>.text-link{margin-top:1.5rem} .care-film{width:100%;min-width:0} .trip-player{position:relative;width:100%;aspect-ratio:9/16;isolation:isolate;overflow:hidden;border-radius:12px} .trip-slide{position:absolute;inset:0;overflow:hidden;border-radius:12px;opacity:0;transition:opacity .35s ease,transform .35s ease,filter .35s ease} .trip-slide.is-current{z-index:2;opacity:1;transform:none} .trip-slide[hidden],.trip-carousel-controls[hidden]{display:none} .trip-slide video{display:block;width:100%;height:100%;border:0;border-radius:inherit;object-fit:cover;background:#0c1718} .programme-page .trip-video-logo{position:absolute;z-index:3;top:1rem;left:1rem;width:3.5rem;height:auto;opacity:.76;filter:drop-shadow(0 1px 3px #0008);pointer-events:none} .trip-carousel-controls{position:absolute;z-index:4;right:.5rem;top:.5rem;display:flex;align-items:center;gap:.375rem} .trip-carousel-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;min-height:2.25rem;padding:0;border:1px solid #b5ebd947;background:#080c0eb3;backdrop-filter:blur(6px);color:var(--ink);font:inherit;font-size:.9375rem;cursor:pointer;border-radius:999px;overflow:hidden;text-indent:-99em} .trip-carousel-controls button::after{text-indent:0;float:left;width:100%;text-align:center} .trip-carousel-controls [data-trip-prev]::after{content:'←'} .trip-carousel-controls [data-trip-next]::after{content:'→'} .trip-carousel-controls button:hover{border-color:#00ffe6;color:#00ffe6;background:#00ffe60a} .trip-carousel-count{font-size:.75rem;line-height:1.5;white-space:nowrap;letter-spacing:.06em;color:var(--mint);font-variant-numeric:tabular-nums;background:#080c0eb3;backdrop-filter:blur(6px);border-radius:999px;padding:.25rem .5rem} .care-film-title{font-weight:500;color:var(--ink)} .trip-source-links{display:flex;flex-direction:column;align-items:flex-start} .trip-source-links .text-link{font-size:.9375rem;line-height:1.65;margin-top:0} /* Close, questions, footer, the price bar ────────────────────────────── */ .programme-page .close{padding:55px 0 45px;border-top:1px solid #acebd644;text-align:center} .close p:not(.eyebrow){color:var(--muted);margin:15px 0 24px} .close .faq{max-width:640px;margin:25px auto 0;text-align:left;border-top:1px solid #acebd644} .close .faq summary{text-align:center} .faq-item{margin-top:18px} .faq-item h3{font-size:18px;font-weight:500;line-height:1.6} .faq-item p{margin:4px 0 0!important;font-size:18px;color:var(--muted)} .programme-footer{width:88%;margin:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:24px 0 calc(var(--sticky-h) + 40px);font-size:16px;color:var(--muted);border-top:1px solid #acebd622} .programme-footer .brand img{width:66px;height:auto} .programme-footer .footer-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-left:auto} .programme-footer .footer-links button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .programme-footer .release-label,.programme-footer .photo-credit{flex-basis:100%;font-size:14px!important;color:var(--soft)!important;text-align:left;padding:0;letter-spacing:0} .programme-page .sticky{position:fixed;left:0;bottom:0;z-index:60;background:#080c0ef5;backdrop-filter:blur(12px);border-top:1px solid #b5ebd966;width:100%;padding:12px max(4%,calc((100% - 1240px)/2)) max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--sticky-h)} .sticky b{font-weight:500;font-size:18px;display:block} .sticky small{display:block;font-size:15px;color:var(--muted);line-height:1.5} .sticky .button{padding:10px 24px;min-height:48px;flex:none} /* The privacy choices (consent.js) */ .programme-page [hidden]{display:none!important} .programme-page .cookie-panel{position:fixed;z-index:90;right:20px;bottom:calc(var(--sticky-h) + 12px);width:min(470px,calc(100vw - 40px));max-height:70dvh;overflow:auto;padding:25px;background:#101a1c;color:var(--ink);border:1px solid #45615d;box-shadow:0 16px 80px #0008} .cookie-panel h2{font-size:1.15rem!important;line-height:1.6;letter-spacing:0!important} .cookie-panel p{font-size:.875rem;color:#b4c4c0;margin-top:9px!important} .cookie-panel .consent-status{font-size:.8rem} .cookie-panel .action-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 10px} .cookie-panel button{font:inherit;padding:10px 12px;font-size:.875rem;border:1px solid #637571;min-height:44px;background:transparent;color:inherit;cursor:pointer} .cookie-panel button:hover{border-color:var(--mint)} .cookie-panel a{font-size:.8rem;text-decoration:underline!important;text-underline-offset:4px} .cookie-options{display:grid;gap:10px;margin-top:14px} .cookie-options label{font-size:.875rem;display:flex;gap:10px} .cookie-options input{accent-color:var(--mint);width:18px;height:18px} /* A country page: when to go, its stay ─────────────────────────────── */ .seasons{padding:72px 0} .season-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px} .season-card{min-width:0;background:var(--deep);border-radius:4px;padding:22px 20px} .season-window{font-size:14px;letter-spacing:.07em;color:var(--mint)} .season-card h3{font-size:20px;line-height:1.5;margin:7px 0 10px} .season-card p{font-size:16px;color:var(--muted)} .season-card ul{margin-top:12px;padding-left:1.1rem;font-size:15px;color:var(--muted);line-height:1.75} .stay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:0 0 72px} .stay-photo img{width:100%;max-height:560px;object-fit:cover;border-radius:4px} .stay-photo figcaption{margin-top:10px;font-size:14px;letter-spacing:.08em;color:var(--soft)} .stay-copy h2{font-size:clamp(1.6rem,2.8vw,2.4rem)} .stay-copy>p{margin-top:14px!important;color:var(--muted)} .stay-copy details{border-top:1px solid var(--line);margin-top:18px} /* A programme page that has gone (renderEndedTemplate) */ .programme-ended{padding:180px 0 90px} .programme-ended p:not(.eyebrow){margin:16px 0 26px;color:var(--muted)} /* Six columns is the count at the width the owner works at. Below about 1200px the same six would be 90px wide and a two-word Thai title would break over five lines, so the strip drops to four and the cards keep the size they have at 1440 — the same card, fewer of them, rather than six unreadable ones. */ @media(max-width:75rem){ .care{--care-card:calc((var(--care-wrap) - var(--care-clip) - 4 * var(--care-gap)) / 4)} } @media(max-width:56rem){ .care{grid-template-columns:1fr;grid-template-areas:'head' 'film' 'cards' 'foot';gap:var(--care-gap);padding:3rem 0} .care{--care-card:calc((var(--care-wrap) - var(--care-gap)) / 2.4)} .care-head{max-width:none} .care .care-film{width:min(calc(100% - 2rem),17rem);justify-self:center} .care-explorer span{left:-19rem;top:18rem}.care-explorer span+span{left:2rem;top:auto;bottom:2rem} .trip-player{clip-path:inset(-4% -2rem -4% -4% round 1.25rem)} .pair-grid{grid-template-columns:minmax(0,1fr)} .pair-media{aspect-ratio:16/6} .stay{grid-template-columns:1fr} } @media(max-width:760px){ :root{--sticky-h:70px} body.programme-page{font-size:16px} .programme-page .wrap{width:88%} .programme-header{height:85px} .programme-header .brand img{width:59px} .programme-header .header-link{font-size:16px} .programme-page .hero{padding:115px 6% 40px} .hero-photo{object-position:60% center} .hero-shade{background:linear-gradient(90deg,#080c0ed9,#080c0e70),linear-gradient(0deg,#080c0e,transparent 80%)} .hero-copy .country{font-size:5.3rem} .programme-page h1{font-size:1.95rem} .hero-copy .intro{font-size:18px} .desktop-break{display:none} .hero .button,.close .button{width:100%;max-width:380px} .hero-caption{display:none} .moments,.seasons,.related-pair{padding:45px 0} .moments{grid-template-columns:1fr;gap:32px} .moments-slide{min-height:420px} .moment h3{font-size:19px}.moment>p{font-size:15px}.tile-label{font-size:13px;letter-spacing:.03em} .rating-score strong{font-size:22px}.rating-score{gap:4px 6px} .programme-page .hero{padding-bottom:78px} .route-highlights{padding:48px 0} .route-list li{grid-template-columns:1fr;gap:4px} .route-pdf{margin-top:0!important} .full-route-cta{display:block;padding-top:28px} .full-route-cta h3{font-size:22px} .full-route-cta .button{width:100%;margin-top:20px} .programme-page .dates{padding:40px 0} .dates-heading{display:block} .dates .price{text-align:left;margin-top:20px!important;white-space:normal} .dates .price strong{font-size:2.5rem} .dates .price small{margin-left:0} .departure{grid-template-columns:54px minmax(0,1fr);gap:6px 15px;padding:18px 0} .departure .month{font-size:1.1rem;grid-row:span 2;align-self:start;padding-top:3px} .departure .month small{font-size:14px} .date-main h3{font-size:19px} .date-meta{font-size:15px} .departure-link{grid-column:2;justify-self:start;justify-content:flex-start;border-bottom:1px solid #173834;min-height:40px} .departure.is-selected{padding-left:10px} .details-grid{grid-template-columns:1fr;gap:0} .programme-page .close{padding:35px 0} .programme-footer{padding-bottom:calc(var(--sticky-h) + 30px)} .programme-footer .footer-links{margin-left:0} .programme-page .sticky{padding:10px 5% max(10px,env(safe-area-inset-bottom));gap:10px} .sticky b{font-size:15px}.sticky small{font-size:13px} .sticky .button{font-size:16px;padding:10px 15px;white-space:nowrap;gap:12px} /* Without the bar there is no LINE button at the foot of a phone screen, so the photo button stays on. */ html:not([data-hide-price-bar]) .programme-page .travel-contact{display:none} .programme-page .cookie-panel{right:12px;width:calc(100vw - 24px);padding:20px} .cookie-panel button{flex:1 1 auto} .programme-ended{padding:130px 0 60px} } @media(max-width:720px){.hero-lead{--lead-into:56px}} @media(max-width:350px){.programme-page .sticky{flex-wrap:wrap}.sticky .button{width:100%}} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .trip-slide,.hero-video,.programme-header,.programme-page .travel-contact{transition:none} html.js-motion .will-reveal{opacity:1;transform:none;transition:none} /* A still grid of the photos, each one once. */ /* The rows of cards sit still, and the second set of each is not there at all: every card is on the page at once. */ .care-track{transform:none!important} .care-set[aria-hidden="true"]{display:none} .care-row{overflow:visible} .moments-slide{min-height:0;overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:14px} .moments-column{position:static;width:auto} .moments-slide::before,.moments-slide::after{display:none} .moments-track{animation:none} .moments-frame[aria-hidden="true"]{display:none} }