/* /try/days-out, Hidden Scotland Days Out (4 October 2026): the page's own few rules, over the home page's
   (_home-landing.css), the Stay landing's finder (_stay-try.css, under .lp-page.st), Destinations' map (_dest-try.css)
   and Explore's card (_excard.css). Prefix do-. Built to public/design-css/_days-try.css by
   scratchpad/design-2026/build-days-try.sh; never edit the output. */

/* the name over the film: the kicker above it, in the hero's white */
.lp-page.do .lp-reel .do-kick { color: var(--on-dark, #fff); opacity: .8; margin-bottom: 14px; }

/* the Where panel's second row: the parts of Scotland, under the towns, a hairline between */
.lp-page.do .do-areas { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(65, 64, 66, .1); }

/* the map's names: every part with days in it, in two columns, so the list is no taller than the map */
.lp-page.do .lv-all ul { columns: 2; column-gap: 32px; }
.lp-page.do .lv-all li { break-inside: avoid; }

/* today's day out: the picture, then the words and the day's line */
.lp-page.do .do-today { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lp-page.do .do-pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.lp-page.do .do-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.lp-page.do .do-pic:hover img { transform: scale(1.03); }

/* the day's stops on a line, the measured way between written on it */
.lp-page.do .do-line { list-style: none; margin: 30px 0 0; padding: 0 0 0 15px; border-left: 2px solid var(--bracken); max-width: 30em; }
.lp-page.do .do-line li { position: relative; }
.lp-page.do .do-stop { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; font-family: var(--face); font-weight: 300; font-size: 20px; line-height: 1.3; }
.lp-page.do .do-stop b { flex: none; position: relative; left: -29px; margin-right: -29px; width: 26px; height: 26px; border-radius: 50%; background: var(--bracken); color: #fff;
    font-family: var(--sans); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-2px); }
.lp-page.do .do-way { display: block; padding: 2px 0 2px 12px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }

/* a page's own introduction: two paragraphs at the reading measure, the second close under the first */
.lp-page.do .do-intro { max-width: 40em; }
.lp-page.do .do-intro .lp-p { max-width: none; }
.lp-page.do .do-intro .lp-p + .lp-p { margin-top: 14px; }

/* short and sweet: the kinds as a line of tabs, Explore's own (small capitals, the chosen one underlined) */
.lp-page.do .do-tabs { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 0 26px; }
.lp-page.do .do-tabs button { background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: inherit; opacity: .55; border-bottom: 1.5px solid transparent; }
.lp-page.do .do-tabs button:hover { opacity: .85; }
.lp-page.do .do-tabs button.on { opacity: 1; border-bottom-color: currentColor; }

/* where are you starting from, at the head of the answer: the kicker, then the towns as Explore's tabs, links here */
.lp-page.do .do-from { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 0 0 26px; }
.lp-page.do .do-from .do-tabs { margin: 0; }
.lp-page.do .do-tabs a { padding: 6px 0; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: inherit; text-decoration: none; opacity: .55; border-bottom: 1.5px solid transparent; }
.lp-page.do .do-tabs a:hover { opacity: .85; }
.lp-page.do .do-tabs a.on { opacity: 1; border-bottom-color: currentColor; }

/* the kinds of day as cards before anything is asked (the home page's .lp-doors grid); a town's days split in two */
.lp-page.do .do-cats { margin-top: 8px; }
.lp-page.do .do-split + .do-split { margin-top: 44px; }
.lp-page.do .do-split > .lp-kick { margin: 0 0 18px; }

/* the questions: the step and its way back, the cards as buttons, the chosen one ticked on forest; how long as boxes */
.lp-page.do .do-steps { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin-bottom: 4px; }
.lp-page.do .do-back { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: inherit; opacity: .6; }
.lp-page.do .do-back:hover { opacity: 1; }
.lp-page.do .do-skip { margin-left: auto; }
.lp-page.do .do-pick { margin-top: 28px; }
.lp-page.do .do-pick .lp-cat { display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.lp-page.do .do-pick .lp-cat.on .ft { background: var(--forest); }
.lp-page.do .do-len { margin-top: 28px; max-width: 760px; }

/* never animated for a reader who asks for less motion (the page skips the moment then) */
@media (prefers-reduced-motion: reduce) { .lp-page.do .do-load-line path, .lp-page.do .do-load-said span { animation: none; opacity: 1; stroke-dashoffset: 0; } }

/* finding your days out: the line draws, the answers come one after another */
.lp-page.do .do-load { min-height: 70vh; display: flex; align-items: center; }
.lp-page.do .do-load .lp-wrap { width: 100%; text-align: center; }
.lp-page.do .do-load-line { display: block; width: min(600px, 90%); margin: 30px auto 26px; overflow: visible; }
.lp-page.do .do-load-line path { fill: none; stroke: var(--bracken); stroke-width: 2.5; stroke-dasharray: 760; stroke-dashoffset: 760; animation: do-draw 1.5s ease-in-out forwards; }
.lp-page.do .do-load-line circle { fill: var(--bracken); opacity: 0; animation: do-in .3s ease forwards; }
.lp-page.do .do-load-line circle:last-of-type { animation-delay: 1.3s; }
.lp-page.do .do-load-said { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; font-family: var(--face); font-weight: 300; font-size: min(clamp(20px, 2vw, 28px), 28px + (clamp(20px, 2vw, 28px) - 28px) * 0.6); }
.lp-page.do .do-load-said span { opacity: 0; animation: do-in .5s ease forwards; }
@keyframes do-draw { to { stroke-dashoffset: 0; } }
@keyframes do-in { to { opacity: 1; } }

/* the answer: the reader's choices as chips, the best match large */
.lp-page.do .do-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.lp-page.do .do-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(65, 64, 66, .25); background: none;
    font-family: var(--sans); font-size: 13px; color: inherit; cursor: pointer; }
.lp-page.do .do-chip i { font-style: normal; opacity: .55; }
.lp-page.do .do-chip:hover { border-color: currentColor; }
.lp-page.do .do-best { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
    margin: 6px 0 52px; color: inherit; text-decoration: none; }
.lp-page.do .do-best-words { display: flex; flex-direction: column; align-items: flex-start; }
.lp-page.do .do-best-words .lp-btn { margin-top: 24px; }
.lp-page.do .do-best:hover .do-pic img { transform: scale(1.03); }

/* a pair: the place's photograph, and where you eat set into its corner */
.lp-page.do .do-pair .ph { position: relative; }
.lp-page.do .do-pair .do-eat { position: absolute; right: 12px; bottom: 12px; width: 34%; height: auto; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--paper); }

/* a local's pick: their words as the card's title, who they are beneath */
.lp-page.do .do-local blockquote { margin: 8px 0 0; font-family: var(--face); font-weight: 300; font-size: 20px; line-height: 1.32; }
.lp-page.do .do-local p { margin-top: 10px; font-size: 15px; line-height: 1.5; opacity: .75; }
.lp-page.do .do-local p b { font-weight: 600; opacity: 1; }

@media (max-width: 820px) {
    .lp-page.do .do-best { grid-template-columns: 1fr; }
    .lp-page.do .do-today { grid-template-columns: 1fr; }
    .lp-page.do .do-pic { aspect-ratio: 4 / 3; }
    .lp-page.do .do-stop { font-size: 18px; }
}

/* THE SEARCH, all in the hero (Jack, 4 October 2026): four questions over the film, every answer the same size as its
   neighbours ("i want everything unisen"), a moment, then the answer on paper as cards with the name over the picture.
   White on the film, as the hero's own words. */
.lp-page.do .do-gen .lp-veil { z-index: 1; transition: background .5s ease; }
.lp-page.do .do-gen-on .lp-veil, .lp-page.do .do-gen-res .lp-veil { background: rgba(14, 12, 10, .58); }
.lp-page.do .do-gen-on .lp-place, .lp-page.do .do-gen-res .lp-place { opacity: 0 !important; }
/* a question can be taller than the screen on a phone: the hero grows to hold it */
.lp-page.do .do-gen-on { height: auto; min-height: 100vh; }
.lp-page.do .do-gen-on .lp-centre { position: relative; inset: auto; min-height: 100vh; padding: calc(var(--bar, 76px) + 40px) var(--edge) 96px; }
.lp-page.do .do-gen-res { height: auto; min-height: 0; }
.lp-page.do .do-gen-res .lp-centre { position: relative; inset: auto; min-height: clamp(380px, 50vh, 540px); padding: calc(var(--bar, 76px) + 30px) var(--edge) 50px; }
.lp-page.do .do-gen-step { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1040px; animation: do-up .45s ease both; }
@keyframes do-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lp-page.do .do-gen-line { max-width: 24em; margin: clamp(18px, 2vw, 28px) 0 0; }
.lp-page.do .do-gen-go { display: inline-flex; align-items: center; justify-content: center; margin-top: clamp(26px, 3.4vh, 40px); padding: 16px 34px;
    background: #fff; color: var(--ink); border: 1px solid #fff; font-family: var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.lp-page.do .do-gen-go:hover { background: transparent; color: #fff; }
/* back, said plainly: a button under the answers naming the question it goes back to */
.lp-page.do .do-gen-prev { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3.6vh, 42px); padding: 13px 22px 13px 18px;
    border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); color: #fff; font-family: var(--sans); font-size: 15px; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, color .2s, border-color .2s; }
.lp-page.do .do-gen-prev span { font-size: 18px; line-height: 1; transition: transform .2s; }
.lp-page.do .do-gen-prev:hover { background: #fff; color: var(--ink); border-color: #fff; }
.lp-page.do .do-gen-prev:hover span { transform: translateX(-3px); }
.lp-page.do .do-gen-back { background: none; border: 0; padding: 6px 0; color: rgba(255, 255, 255, .78); font-family: var(--sans); font-size: 13px; cursor: pointer; }
.lp-page.do .do-gen-back:hover { color: #fff; }
.lp-page.do .do-gen-q { font-family: var(--face); font-weight: 400; font-size: min(clamp(32px, 3.4vw, 64px), 28px + (clamp(32px, 3.4vw, 64px) - 28px) * 0.6); line-height: 1.12; margin: 0 0 clamp(24px, 3.4vh, 44px);
    text-wrap: balance; text-shadow: 0 2px 30px rgba(10, 14, 10, .35); }
/* the answers: a grid of equal boxes, four or three to a row, two on a phone */
.lp-page.do .do-gen-grid { display: grid; gap: 12px; width: 100%; }
.lp-page.do .do-gen-grid.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 880px; }
.lp-page.do .do-gen-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; }
.lp-page.do .do-gen-opt { display: flex; align-items: center; justify-content: center; min-height: 68px; padding: 12px 16px; text-align: center;
    border: 1px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .07); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--face); font-size: clamp(18px, 1.35vw, 23px); line-height: 1.2; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s; }
.lp-page.do .do-gen-opt:hover, .lp-page.do .do-gen-opt.on { background: #fff; color: var(--ink); border-color: #fff; }
/* where: one box, Google's suggestions under it, and their own position */
.lp-page.do .do-gen-where { position: relative; width: 100%; max-width: 640px; }
.lp-page.do .do-gen-in { width: 100%; height: 64px; padding: 0 22px; border: 1px solid #fff; background: #fff; color: var(--ink);
    font-family: var(--face); font-size: clamp(18px, 1.4vw, 22px); outline: none; text-align: center; }
.lp-page.do .do-gen-in::placeholder { color: rgba(65, 64, 66, .45); }
.lp-page.do .do-gen-in:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.lp-page.do .do-gen-list { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid rgba(65, 64, 66, .12);
    text-align: left; box-shadow: 0 18px 40px rgba(14, 12, 10, .28); }
.lp-page.do .do-gen-list button { display: block; width: 100%; padding: 13px 22px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.lp-page.do .do-gen-list button:hover, .lp-page.do .do-gen-list button:focus { background: rgba(65, 64, 66, .06); outline: none; }
.lp-page.do .do-gen-list b { display: block; font-family: var(--face); font-weight: 400; font-size: 18px; }
.lp-page.do .do-gen-list span { display: block; font-family: var(--sans); font-size: 13px; color: rgba(65, 64, 66, .55); margin-top: 2px; }
.lp-page.do .do-gen-locate { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 13px 22px; border: 1px solid rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .07); color: #fff; font-family: var(--sans); font-size: 15px; cursor: pointer; transition: background .2s, color .2s; }
.lp-page.do .do-gen-locate:hover { background: #fff; color: var(--ink); }
.lp-page.do .do-gen-locate svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lp-page.do .do-gen-locate[disabled] { opacity: .7; cursor: default; }
/* where they are, said back to be confirmed: a pin that drops, the place as a question, yes or type it */
.lp-page.do .do-gen-map { width: clamp(120px, 11vw, 170px); margin-bottom: clamp(14px, 2vh, 22px); }
.lp-page.do .do-gen-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-page.do .do-gen-map .cm-land path { fill: rgba(255, 255, 255, .22); stroke: rgba(255, 255, 255, .9); stroke-width: 1.4; }
.lp-page.do .do-gen-map .dot circle { r: 13px; fill: #fff; stroke: rgba(14, 12, 10, .55); stroke-width: 4; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .7)); }
.lp-page.do .do-gen-map .dot { transform-box: fill-box; transform-origin: center; animation: do-drop .7s cubic-bezier(.3, 1.5, .5, 1) .25s both; }
@keyframes do-drop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
/* two buttons side by side: the main one filled, the other outlined */
.lp-page.do .do-gen-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(26px, 3.4vh, 40px); }
.lp-page.do .do-gen-pair .do-gen-go, .lp-page.do .do-gen-pair .do-gen-prev { margin-top: 0; min-height: 50px; }
/* side by side, the two buttons speak alike: the same capitals, the same size, one filled and one outlined */
.lp-page.do .do-gen-pair .do-gen-prev { padding: 16px 30px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
/* the dog and step-free, ticked under who is coming */
.lp-page.do .do-gen-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 36px; margin-top: 14px; }
/* show all days out, along the foot of the hero while the questions are asked */
.lp-page.do .do-gen-all { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 8px 4px; border: 0; background: none;
    color: rgba(255, 255, 255, .85); font-family: var(--sans); font-size: 15px; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; white-space: nowrap; }
.lp-page.do .do-gen-all:hover { color: #fff; }
.lp-page.do .do-gen-car { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--sans); font-size: 16px; color: #fff; cursor: pointer; }
.lp-page.do .do-gen-car input { width: 18px; height: 18px; accent-color: #fff; margin: 0; cursor: pointer; }
.lp-page.do .do-gen-sub { margin: -8px 0 clamp(22px, 3.2vh, 36px); font: 400 clamp(17px, 1.3vw, 22px)/1.45 var(--read); color: rgba(255, 255, 255, .92); }
.lp-page.do .do-found-h { margin: 0 0 18px; }
.lp-page.do .do-found .do-split > .lp-kick { margin: 0 0 18px; }
.lp-page.do .do-gen-note { margin: 14px 0 0; font-family: var(--sans); font-size: 16px; color: rgba(255, 255, 255, .9); }
/* what they fancy: picture cards, all one size, five to a row, two on a phone; ticked when chosen */
/* the kinds: as many columns as the row needs (--cols, set by the page: 5 for All and eight kinds), a short last row centred */
.lp-page.do .do-gen-kinds { --cols: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; max-width: calc(var(--cols) * 225px); }
.lp-page.do .do-gen-kinds > .do-gen-kind { flex: 0 0 calc((100% - (var(--cols) - 1) * 12px) / var(--cols)); }
/* All: four of the kinds' pictures in a square of four */
.lp-page.do .do-gen-every .do-gen-mosaic { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; }
.lp-page.do .do-gen-every .do-gen-mosaic img { position: static; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.lp-page.do .do-gen-kind { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: #2b301d; color: #fff; }
.lp-page.do .do-gen-kind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.lp-page.do .do-gen-kind::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, .05) 35%, rgba(14, 12, 10, .72));
    transition: background .25s; }
.lp-page.do .do-gen-kind span { position: absolute; z-index: 1; left: 14px; right: 34px; bottom: 12px; text-align: left; font-family: var(--face); font-size: clamp(16px, 1.25vw, 21px); line-height: 1.15; }
.lp-page.do .do-gen-kind i { position: absolute; z-index: 1; top: 10px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8); font-style: normal; font-size: 13px; color: transparent; transition: background .2s, color .2s; }
.lp-page.do .do-gen-kind:hover img { transform: scale(1.05); }
.lp-page.do .do-gen-kind.on { outline: 2px solid #fff; outline-offset: -2px; }
.lp-page.do .do-gen-kind.on i { background: #fff; color: var(--ink); }
.lp-page.do .do-gen .do-load-line { margin: 26px auto 22px; }
.lp-page.do .do-gen .do-load-line path { stroke: #fff; }
.lp-page.do .do-gen .do-load-line circle { fill: #fff; }
.lp-page.do .do-gen .do-load-said { color: #fff; }
/* the answer: the landing's other bands step aside while a search is shown */
.lp-page.do.do-found-on > [data-band]:not([data-band="hero"]):not([data-band="found"]):not([data-band="again"]):not([data-band="far"]) { display: none; }
.lp-page.do .do-found .do-split { margin-top: clamp(56px, 7vw, 96px); }
.lp-page.do .do-again .lp-wrap { text-align: center; display: flex; flex-direction: column; align-items: center; }
/* the card: the photograph, and over its foot the name in full, how far, and what the day is */
.lp-page.do .do-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.lp-page.do .do-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone, #d9d3c7); color: #fff; text-decoration: none;
    opacity: 0; animation: do-up .6s ease forwards; }
.lp-page.do .do-card-pic { position: absolute; inset: 0; }
.lp-page.do .do-card-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.lp-page.do .do-card:hover .do-card-pic img { transform: scale(1.04); }
.lp-page.do .do-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, 0) 38%, rgba(14, 12, 10, .78)); }
.lp-page.do .do-card-tag { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 5px 9px; background: rgba(255, 255, 255, .92); color: var(--ink);
    font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.lp-page.do .do-card-words { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: clamp(16px, 1.6vw, 22px); }
.lp-page.do .do-card-eye { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .78; }
.lp-page.do .do-card-t { font-family: var(--face); font-weight: 400; font-size: clamp(20px, 1.5vw, 26px); line-height: 1.15; text-wrap: balance; text-shadow: 0 1px 18px rgba(10, 14, 10, .35); }
.lp-page.do .do-card-m { font-family: var(--sans); font-size: 13px; line-height: 1.4; opacity: .85; }
/* WHEN: a date picked on the day's own field */
.lp-page.do .do-gen-date { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.lp-page.do .do-gen-date input { height: 52px; padding: 0 16px; border: 1px solid #fff; background: #fff; color: var(--ink); font-family: var(--sans); font-size: 16px; }
.lp-page.do .do-gen-date .do-gen-go { margin-top: 0; }
/* PICK YOUR DATES: the site's calendar (stay's .cal) on a paper panel over the film, two months side by side */
.lp-page.do .do-gen-cal { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 36px; padding: 26px 30px 28px; background: #FBF9F6; color: var(--ink);
    text-align: left; box-shadow: 0 30px 70px rgba(10, 8, 6, .45); }
.lp-page.do .do-gen-cal .cal .days .past { pointer-events: none; }
@media (max-width: 720px) {
    .lp-page.do .do-gen-cal { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 340px; padding: 18px; }
    .lp-page.do .do-gen-cal2 { display: none; }
    /* one month on a phone: its own arrow onward */
    .lp-page.do .do-gen-cal .cal .sq button[data-n][hidden] { display: grid; }
}
/* FIND YOUR STAY'S CALENDAR: one month at a time with both arrows, larger, straight on the film with no panel (Jack,
   6 October 2026: "maybe bigger and doesnt need white background and one month at a time please with arrows"). Every
   property of the panel and of the stay calendar's squares is reset here, not only the background */
.lp-page.do .do-gen-cal.solo { display: block; width: min(500px, 100%); max-width: none; padding: 0; background: none; box-shadow: none; color: #fff; }
.lp-page.do .do-gen-cal.solo .cal .mh { margin-bottom: 22px; }
.lp-page.do .do-gen-cal.solo .cal .mh h3 { font: 400 min(34px, 28px + (34px - 28px) * 0.6)/1 var(--face); color: #fff; }
.lp-page.do .do-gen-cal.solo .cal .mh h3 span { font-size: 20px; color: rgba(255, 255, 255, .6); }
.lp-page.do .do-gen-cal.solo .cal .sq { gap: 8px; }
.lp-page.do .do-gen-cal.solo .cal .sq button { width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .6); background: none; color: #fff; transition: background .2s; }
.lp-page.do .do-gen-cal.solo .cal .sq button svg { width: 18px; height: 18px; stroke: #fff; }
.lp-page.do .do-gen-cal.solo .cal .sq button:hover { background: #fff; }
.lp-page.do .do-gen-cal.solo .cal .sq button:hover svg { stroke: var(--ink); }
.lp-page.do .do-gen-cal.solo .cal .sq button:disabled { opacity: .3; background: none; }
.lp-page.do .do-gen-cal.solo .cal .dow,
.lp-page.do .do-gen-cal.solo .cal .days { gap: 6px; }
.lp-page.do .do-gen-cal.solo .cal .dow { margin-bottom: 10px; }
.lp-page.do .do-gen-cal.solo .cal .dow span { font-size: 12px; color: rgba(255, 255, 255, .72); }
.lp-page.do .do-gen-cal.solo .cal .days button { font: 400 19px var(--serif); background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; transition: background .2s, color .2s; }
.lp-page.do .do-gen-cal.solo .cal .days button:hover { background: #fff; color: var(--ink); }
.lp-page.do .do-gen-cal.solo .cal .days .past { background: transparent; color: rgba(255, 255, 255, .35); }
.lp-page.do .do-gen-cal.solo .cal .days .today { box-shadow: inset 0 0 0 1px #fff; }
.lp-page.do .do-gen-cal.solo .cal .days .in { background: rgba(192, 140, 61, .85); color: #fff; }
.lp-page.do .do-gen-cal.solo .cal .days .from,
.lp-page.do .do-gen-cal.solo .cal .days .to { background: #C08C3D; color: #fff; }
@media (max-width: 720px) {
    .lp-page.do .do-gen-cal.solo { width: 100%; max-width: none; padding: 0; }
    .lp-page.do .do-gen-cal.solo .cal .mh h3 { font-size: 26px; }
    .lp-page.do .do-gen-cal.solo .cal .days button { font-size: 16px; }
    .lp-page.do .do-gen-cal.solo .cal .sq button { width: 42px; height: 42px; }
}
/* an event with no photograph of its own: the card in ink, its words as they are */
.lp-page.do .do-card.no-pic { background: #2b301d; }
.lp-page.do .do-card.no-pic::after { display: none; }

/* FEWER BOXES (Jack, 4 October: "a big boxy ... doenst sit right ... too may boxes"): the answers keep their boxes (he
   wanted those back), the search a line of type with an underline, location and the second of two buttons plain text; one filled button
   stays for the thing to press; back is a small round arrow over the question */
.lp-page.do .do-gen-in { height: 70px; padding: 0 10px; border: 0; border-bottom: 2px solid rgba(255, 255, 255, .75); background: none; color: #fff;
    font-size: min(clamp(20px, 1.9vw, 32px), 28px + (clamp(20px, 1.9vw, 32px) - 28px) * 0.6); text-shadow: 0 1px 18px rgba(10, 14, 10, .35); }
.lp-page.do .do-gen-in::placeholder { color: rgba(255, 255, 255, .55); }
.lp-page.do .do-gen-in:focus { box-shadow: none; border-bottom-color: #fff; }
.lp-page.do .do-gen-list { margin-top: 6px; }
.lp-page.do .do-gen-locate { border: 0; background: none; padding: 10px 4px; margin-top: 16px; text-decoration: underline; text-underline-offset: 6px; }
.lp-page.do .do-gen-locate:hover { background: none; color: #fff; opacity: .8; }
.lp-page.do .do-gen-pair .do-gen-prev { border-color: transparent; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    text-decoration: underline; text-underline-offset: 6px; }
.lp-page.do .do-gen-pair .do-gen-prev:hover { background: none; color: #fff; opacity: .8; }
.lp-page.do .do-gen-crumb { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 clamp(14px, 2.2vh, 26px); padding: 0; border: 0; background: none;
    color: rgba(255, 255, 255, .88); font: 600 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.lp-page.do .do-gen-crumb i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%;
    font-style: normal; font-size: 16px; letter-spacing: 0; transition: background .2s, color .2s, border-color .2s; }
.lp-page.do .do-gen-crumb:hover i { background: #fff; color: var(--ink); border-color: #fff; }
/* the opening's films: Jack's landscapes (/try/days-out/films), an 0.8s dissolve from one to the next, each named in
   the corner and moving on before it ends (the reel in days-out.tsx: 3.5s at most, less for a short film); the shade
   sits behind the words and at the top and foot, so the landscape stays bright at its edges */
.lp-page.do .do-gen .lp-films video { transition: opacity .8s ease; }
.lp-page.do .do-gen-open .lp-veil { background:
    radial-gradient(ellipse 58% 52% at 50% 50%, rgba(14, 12, 10, .4), rgba(14, 12, 10, .1) 72%),
    linear-gradient(180deg, rgba(14, 12, 10, .34), rgba(14, 12, 10, 0) 24%, rgba(14, 12, 10, 0) 76%, rgba(14, 12, 10, .42)); }

/* THE OPENINGS, eight to compare (4 October 2026), switched from the panel at the top of the film */
/* the opening grows to hold its content, with room at the top for the panel and at the foot for show all */
.lp-page.do .do-gen-open { height: auto; min-height: 100vh; }
.lp-page.do .do-gen-open .lp-centre { position: relative; inset: auto; min-height: 100vh; padding: calc(var(--bar, 76px) + 64px) var(--edge) 96px; }
@media (max-width: 640px) { .lp-page.do .do-gen .lp-place { display: none; } }
.lp-page.do .do-op-tuner { position: absolute; z-index: 4; left: var(--edge); top: calc(var(--bar, 76px) + 14px); display: flex; align-items: center; gap: 12px;
    padding: 7px 8px; background: rgba(14, 12, 10, .72); color: #fff; font-family: var(--sans); font-size: 13px; }
.lp-page.do .do-op-tuner b { font-weight: 600; margin-right: 6px; opacity: .7; }
.lp-page.do .do-op-tuner button { width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .45); background: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.lp-page.do .do-op-tuner button:hover { background: #fff; color: var(--ink); }
/* 2 today, live: the day and its weather lead, the question is the headline */
.lp-page.do .do-op-date { margin-bottom: 18px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.lp-page.do .do-op-big { font-size: min(clamp(46px, 5.4vw, 104px), 28px + (clamp(46px, 5.4vw, 104px) - 28px) * 0.6); max-width: 12em; }
/* 3 three ways in: three picture starts, the questions as the other way */
.lp-page.do .do-op-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 900px; margin-top: clamp(24px, 3.4vh, 38px); }
.lp-page.do .do-op-cards .do-gen-kind span { font-size: clamp(19px, 1.5vw, 25px); right: 16px; }
.lp-page.do .do-op-or { margin-top: 22px; }
/* 5 the postcard and 6 the map: words on one side, the thing itself on the other */
.lp-page.do .do-op-split { flex-direction: row; justify-content: center; gap: clamp(40px, 6vw, 110px); max-width: 1180px; text-align: left; }
.lp-page.do .do-op-text { flex: 0 1 520px; display: flex; flex-direction: column; align-items: flex-start; }
.lp-page.do .do-op-text .lp-h1 { max-width: 10em; }
.lp-page.do .do-op-postcard { flex: 0 0 auto; width: clamp(280px, 28vw, 410px); padding: 14px 14px 24px; background: #fbf8f1; color: var(--ink); text-decoration: none;
    transform: rotate(2.5deg); box-shadow: 0 30px 70px rgba(10, 8, 6, .5); transition: transform .45s ease; animation: do-up .8s ease .2s both; }
.lp-page.do .do-op-postcard:hover { transform: rotate(0) scale(1.02); }
.lp-page.do .do-op-pc-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.lp-page.do .do-op-pc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-page.do .do-op-pc-words { display: flex; flex-direction: column; gap: 8px; padding: 16px 6px 0; }
.lp-page.do .do-op-pc-words .do-card-eye { color: rgba(65, 64, 66, .55); opacity: 1; }
.lp-page.do .do-op-pc-t { font-family: var(--face); font-size: clamp(21px, 1.7vw, 27px); line-height: 1.15; }
.lp-page.do .do-op-pc-words ol { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--sans); font-size: 14px; }
.lp-page.do .do-op-pc-words li { display: flex; gap: 10px; align-items: baseline; }
.lp-page.do .do-op-pc-words li b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; flex: 0 0 auto; }
.lp-page.do .do-op-map { flex: 0 0 auto; width: clamp(220px, 23vw, 340px); }
.lp-page.do .do-op-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-page.do .do-op-map .cm-land path { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .75); stroke-width: 1.2; }
.lp-page.do .do-op-map .dot circle { r: 5px; fill: #fff; opacity: .3; animation: do-twinkle 3.4s ease-in-out infinite; }
.lp-page.do .do-op-map .dot:nth-child(3n) circle { animation-delay: .9s; }
.lp-page.do .do-op-map .dot:nth-child(4n) circle { animation-delay: 1.7s; }
.lp-page.do .do-op-map .dot:nth-child(5n) circle { animation-delay: 2.5s; }
@keyframes do-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); } }
/* 7 moving words: the second line changes, the route draws again each time */
/* the line rolls: the new one comes up from below as the one before goes up and out, a line every 2.2 seconds */
.lp-page.do .do-op-roll { position: relative; align-self: stretch; width: 100%; text-align: center; white-space: nowrap; height: 1.3em; overflow: hidden; margin-top: 4px; font-family: var(--face); font-size: min(clamp(32px, 3.6vw, 66px), 28px + (clamp(32px, 3.6vw, 66px) - 28px) * 0.6); line-height: 1.3; }
.lp-page.do .do-op-roll span { position: absolute; left: 0; right: 0; top: 0; display: block; animation: do-roll .62s cubic-bezier(.22, .8, .24, 1) both; }
.lp-page.do .do-op-roll span[data-was] { animation-name: do-roll-out; }
@keyframes do-roll { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
@keyframes do-roll-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-70%); } }
.lp-page.do .do-op-words { text-shadow: 0 1px 28px rgba(14, 12, 10, .28); }
/* bigger, as Jack asked: the name a spaced line of its own, Days out large */
.lp-page.do .do-op-brand { font-family: var(--sans); font-size: clamp(13px, 1.15vw, 18px); font-weight: 600; letter-spacing: .34em; text-transform: uppercase; opacity: .95; }
.lp-page.do .do-op-words .do-op-big { margin-top: clamp(8px, 1.2vh, 16px); font-size: min(clamp(64px, 8.6vw, 164px), 28px + (clamp(64px, 8.6vw, 164px) - 28px) * 0.6); line-height: 1; max-width: none; }
.lp-page.do .do-op-words .do-op-roll { font-size: min(clamp(26px, 3vw, 54px), 28px + (clamp(26px, 3vw, 54px) - 28px) * 0.6); margin-top: clamp(4px, 1vh, 12px); }
.lp-page.do .do-op-words .do-gen-go { margin-top: clamp(28px, 4vh, 44px); }
/* the little scenes: a single white stroke, rounded; the ground draws itself, the figures walk along it */
/* 8 one sentence: the answers are blanks in it */
.lp-page.do .do-op-says { margin: 6px 0 0; max-width: 21em; font-family: var(--face); font-size: min(clamp(28px, 3vw, 54px), 28px + (clamp(28px, 3vw, 54px) - 28px) * 0.6); line-height: 1.55; text-shadow: 0 2px 30px rgba(10, 14, 10, .35); }
.lp-page.do .do-op-says select, .lp-page.do .do-op-says input { appearance: none; -webkit-appearance: none; padding: 0 6px; border: 0; border-bottom: 2px solid rgba(255, 255, 255, .75);
    background: transparent; color: #fff; font: inherit; cursor: pointer; outline: none; }
.lp-page.do .do-op-says select option { color: var(--ink); font-size: 16px; }
.lp-page.do .do-op-says input { width: 7.5em; cursor: text; }
.lp-page.do .do-op-says input::placeholder { color: rgba(255, 255, 255, .55); }
.lp-page.do .do-op-where { position: relative; display: inline-block; }
.lp-page.do .do-op-where .do-gen-list { min-width: 320px; line-height: 1.3; text-shadow: none; }
.lp-page.do .do-op-sentence .do-gen-go[disabled] { opacity: .55; cursor: default; }
@media (max-width: 820px) {
    .lp-page.do .do-op-split { flex-direction: column; text-align: center; gap: 30px; }
    .lp-page.do .do-op-text { align-items: center; flex-basis: auto; }
    .lp-page.do .do-op-cards { grid-template-columns: 1fr; max-width: 340px; }
    .lp-page.do .do-op-cards .do-gen-kind { aspect-ratio: 16 / 7; }
}
@media (prefers-reduced-motion: reduce) { .lp-page.do .do-op-map .dot circle, .lp-page.do .do-op-roll span, .lp-page.do .do-op-postcard { animation: none !important; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lp-page.do .do-op-roll span[data-was] { display: none; } }

@media (max-width: 1100px) { .lp-page.do .do-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .lp-page.do .do-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .lp-page.do .do-gen-on .lp-centre { padding-top: calc(var(--bar, 76px) + 20px); padding-bottom: 80px; }
    .lp-page.do .do-gen-q { margin-bottom: 20px; }
    .lp-page.do .do-gen-grid.n4, .lp-page.do .do-gen-grid.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lp-page.do .do-gen-kinds { --cols: 2 !important; gap: 10px; }
    .lp-page.do .do-gen-kinds > .do-gen-kind { flex-basis: calc((100% - 10px) / 2); }
    /* fifteen tiles (All and fourteen kinds, 7 October 2026) three across: five even rows, not eight with one left over */
    .lp-page.do .do-gen-kinds[data-n="15"] > .do-gen-kind { flex-basis: calc((100% - 20px) / 3); aspect-ratio: 1 / 1; }
    .lp-page.do .do-gen-kinds[data-n="15"] .do-gen-kind span { left: 10px; right: 8px; bottom: 9px; font-size: 14px; }
    .lp-page.do .do-gen-kinds[data-n="15"] .do-gen-kind i { top: 6px; right: 6px; width: 20px; height: 20px; }
    .lp-page.do .do-gen-opt { min-height: 58px; font-size: 17px; }
    .lp-page.do .do-gen-kind { aspect-ratio: 16 / 9; }
    .lp-page.do .do-gen-in { height: 56px; font-size: 17px; padding: 0 16px; }
    .lp-page.do .do-cards { grid-template-columns: 1fr; }
    .lp-page.do .do-card { aspect-ratio: 4 / 3; }
    .lp-page.do .do-card-t { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .lp-page.do .do-gen-step, .lp-page.do .do-card, .lp-page.do .do-gen-map .dot { animation: none; opacity: 1; } }

/* ===================================================================== THE ANSWER (6 October 2026)
   The results sheet's round three, at Jack's picks (public/design-2026/days-out-results-6: H4 the day's sky, A1 the
   sentence with no full stop, K2 what it is in a word, 44px titles): the reel steps aside, the sky takes the top under
   the glass bar, and one wall of everything follows, Cosmos's way. Class names are the sheet's own (dor6-). */
.lp-page.do { --cask: #392916; --tweed: #682114; --shell: #F9F5EE; --bracken: #C08C3D; --august: #A0BAD4; --dor6-edge: 33px; --dor6-gap: 33px; --tsize: min(44px, 28px + (44px - 28px) * 0.6); }
.lp-page.do .do-gen-res { display: none; }
@keyframes dor6-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dor6-word { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .14em; text-decoration-color: rgba(249, 245, 238, .45); }
.dor6-word:hover { text-decoration-color: currentColor; }

/* under the glass bar, as the reel is (_home-landing: .lp-reel) */
.lp-page .dor6-sky { margin-top: calc(-1 * var(--bar, 76px)); }
.dor6-sky { position: relative; min-height: min(64vh, 660px); overflow: hidden; color: var(--shell); display: flex; background: #414042; animation: dor6-rise .8s var(--ease) both; }
.dor6-sky > video, .dor6-sky > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dor6-sky > canvas { z-index: 1; }
.dor6-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, .2), rgba(14, 12, 10, .12) 40%, rgba(14, 12, 10, .58)); }
.dor6-in { position: relative; z-index: 2; width: 100%; padding: calc(var(--bar, 76px) + 56px) var(--dor6-edge) 48px; display: flex; flex-direction: column; justify-content: flex-end; }
.dor6-k { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; opacity: .88; }
.dor6-wx { display: inline-grid; justify-items: start; }
.dor6-wx b { display: block; font-family: var(--face); font-weight: 300; font-size: min(clamp(100px, 10vw, 180px), 28px + (clamp(100px, 10vw, 180px) - 28px) * 0.6); line-height: .78; letter-spacing: -.03em; margin-left: -.06em; }
.dor6-wx span { display: block; font-family: var(--sans); font-size: 15px; line-height: 1.5; opacity: .9; margin-top: 14px; }
.dor6-wx span + span { margin-top: 0; }
.dor6-wx .dor6-far { font-family: var(--face); font-weight: 300; font-size: 30px; opacity: 1; margin: 0; }
.dor6-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; }
.dor6-in.a1 h1 { 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.08; margin: 12px 0 0; max-width: 17em; color: inherit; }

.dor6-wall { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--dor6-gap); padding: 33px var(--dor6-edge) 96px; align-items: start; background: var(--paper); }
.dor6-col { display: grid; gap: var(--dor6-gap); }
/* the page sets every link to inherit (.lp-page a): the wall's words are light on their photographs */
.lp-page .dor6-pin { color: var(--shell); }
.dor6-pin { position: relative; display: block; overflow: hidden; background: var(--stone); text-decoration: none; color: var(--shell); animation: dor6-rise .7s var(--ease) both; }
.dor6-pin.pic { aspect-ratio: 342 / 427; }
.dor6-pin.pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.dor6-pin.pic:hover > img { transform: scale(1.03); }
.dor6-pin.pic::after { content: ''; position: absolute; inset: 30% 0 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 12, 10, 0), rgba(14, 12, 10, .28) 45%, rgba(14, 12, 10, .66)); pointer-events: none; }
.dor6-pin.pic::before { content: ''; position: absolute; inset: 0 0 72%; z-index: 1; background: linear-gradient(180deg, rgba(14, 12, 10, .32), rgba(14, 12, 10, 0)); pointer-events: none; }
.dor6-t { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; font-family: var(--face); font-weight: 300; font-size: var(--tsize); line-height: 1.04; letter-spacing: -.015em;
    text-wrap: balance; text-shadow: 0 1px 14px rgba(14, 12, 10, .25); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dor6-tag { position: absolute; z-index: 2; left: 20px; right: 20px; top: 18px; display: flex; justify-content: space-between; gap: 12px; font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(14, 12, 10, .45); }
/* the word and the drive each on one line ("Day out" broke in two beside a long drive, 6 October 2026) */
.dor6-tag > span { white-space: nowrap; }
.dor6-pin.ev { aspect-ratio: 3 / 2; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; transition: filter .3s; }
.dor6-pin.ev:hover { filter: brightness(1.07); }
.dor6-pin.ev .dor6-tag { position: static; text-shadow: none; opacity: .88; }
.dor6-pin.ev .dor6-t { position: static; text-shadow: none; -webkit-line-clamp: 3; font-size: calc(var(--tsize) * .82); }
.dor6-end { margin: 0; padding: 0 var(--dor6-edge) 96px; font-family: var(--sans); font-size: 16px; color: rgba(65, 64, 66, .55); background: var(--paper); }
.dor6-end .btn { display: inline-flex; align-items: center; height: 50px; padding: 0 25px; margin-left: 16px; border: 1px solid var(--tweed); color: var(--tweed); background: none;
    font-family: var(--sans); font-size: 14.5px; cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease); }
.dor6-end .btn:hover { background: var(--tweed); color: var(--shell); }
.dor6-honest { font-family: var(--sans); font-size: 15px; color: var(--tweed); margin: 0; padding: 22px var(--dor6-edge) 0; background: var(--paper); }

@media (max-width: 1500px) { .lp-page.do { --cols: 4; } }
@media (max-width: 1100px) { .lp-page.do { --cols: 3; } }
@media (max-width: 760px) {
    .lp-page.do { --cols: 2; --dor6-edge: 16px; --dor6-gap: 12px; }
    .dor6-row { grid-template-columns: 1fr; gap: 22px; }
    .dor6-t { left: 12px; right: 12px; bottom: 10px; font-size: calc(var(--tsize) * .45); }
    .dor6-tag { left: 12px; right: 12px; top: 10px; font-size: 9px; letter-spacing: .16em; }
    .dor6-pin.ev { padding: 12px; } .dor6-pin.ev .dor6-t { font-size: calc(var(--tsize) * .4); }
    .dor6-end .btn { margin: 14px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .dor6-sky, .dor6-pin { animation: none; } }

/* ===================================================================== A DAY OPENED INSIDE DAYS OUT (6 October 2026)
   The real page in a layer over the wall (Jack: "it has to look as close to the original listing or days out as possible",
   "there will just be slight differences in navigation"): the layer's own bar, back to the wall and how far it is from
   their start, then the day's or the listing's own page, as it is, without the site's bar and footer. New prefix dol-
   (checked unused in every stylesheet). */
/* under the site's own bar, which stays on top and solid while a day is open (Jack: "make it live with the menu etc") */
body.dol-open header.site::before { opacity: 1 !important; }
/* held in place while a day is open: it slides away as the wall is read, and the page behind showed through (6 Oct) */
body.dol-open header.site { position: fixed; top: 0; left: 0; right: 0; transform: none !important; }
.dol { position: fixed; inset: 0; padding-top: var(--bar, 76px); z-index: 90; background: var(--paper); animation: dol-in .45s var(--ease) both; }
@keyframes dol-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* the layer's bar, only while the page comes or for a page without its own: the page's "At a glance" bar to the letter
   (_place: .pn, .pn-parts button, .pn-q), which Jack chose ("much prefer the style of this one so use this") */
.dol-bar { position: absolute; left: 0; right: 0; top: var(--bar, 76px); z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px;
    padding: 0 max(var(--dor6-edge), calc((100% - 1280px) / 2)); background: var(--paper); border-bottom: 1px solid #E4DED9; }
.dol-acts { display: inline-flex; align-items: center; gap: 10px; }
.dol-back { padding: 6px 0; border: 0; background: none; cursor: pointer; font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid transparent; }
.dol-back:hover { border-bottom-color: var(--ink); }
.dol-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border: 1px solid rgba(65, 64, 66, .35); background: transparent; color: var(--ink); font: 500 11px/1 var(--sans);
    letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.dol-btn:hover { border-color: var(--ink); }
.dol-frame { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--bar, 76px) + 57px); width: 100%; height: calc(100% - var(--bar, 76px) - 57px); border: 0; display: block; background: var(--paper); opacity: 0; transition: opacity .3s var(--ease); }
/* the page has its own bar, with the back button in it: the page takes the whole layer */
.dol-frame.whole { top: var(--bar, 76px); height: calc(100% - var(--bar, 76px)); }
.dol-frame.on { opacity: 1; }
.dol-wait { position: absolute; left: 0; right: 0; top: calc(var(--bar, 76px) + 57px); bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dol-wait .do-load-line { width: min(420px, 80%); margin: 0 auto 18px; }
.dol-wait p { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgba(65, 64, 66, .6); }
}
@media (prefers-reduced-motion: reduce) { .dol { animation: none; } .dol-frame { transition: none; } }

/* the plain homepage: the hero and nothing under it but the footer (Jack, 6 October 2026); the answer's wall still shows */
.lp-page.do.do-home > [data-band]:not([data-band="hero"]):not([data-band="found"]) { display: none; }
/* and no footer under it: the dark film would sit on the footer's dark green, two dark grounds touching (never) */
.lp-page.do.do-home ~ footer.ft, .lp-page.do.do-home ~ * footer.ft { display: none; }

/* ===================================================================== PICK ONE FOR ME (6 October 2026)
   The jar, L1 of public/design-2026/days-out-jar-3 (Jack: "lets try L1 S2, cut again", then "test it on the page"):
   one button in the sky; the wall's own photographs, real and square ("i think real photographs will probably look
   better", "try just square photographs not polaroid design"), are seen falling into a two-block lino jar one by one;
   then the jar steps aside and the chosen place's own card comes up ("it should just go to the listing card design as
   soon as one is picked"). Nothing to shake, nothing spins. resources/js/components/design/jar-pick.tsx. Prefix doj-.
   Only plain photographs move: the inked jar is two still pictures (his Chrome runs without graphics acceleration). */
.doj-go { display: inline-flex; align-items: center; height: 54px; padding: 0 26px; margin-top: 26px; border: 0; background: var(--shell); color: #414042; cursor: pointer;
    font-family: var(--sans); font-size: 15px; font-weight: 500; transition: background .3s var(--ease); }
.doj-go:hover { background: #fff; }
@keyframes doj-in { from { opacity: 0; } to { opacity: 1; } }
.doj { position: fixed; inset: 0; z-index: 90; padding: var(--bar, 76px) var(--dor6-edge) 0; background: #F1EFEA; color: #414042; display: flex; align-items: center; justify-content: center;
    animation: doj-in .45s var(--ease) both; }
.doj-close { position: absolute; z-index: 3; top: calc(var(--bar, 76px) + 18px); right: var(--dor6-edge); background: none; border: 0; padding: 6px 0; cursor: pointer;
    font-family: var(--sans); font-size: 15px; color: rgba(65, 64, 66, .7); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.doj-close:hover { color: #414042; }
/* the jar stands still while the photographs go in, then shakes itself, then the reveal (Jack, 6 October 2026: "make
   the jar can shake and feel a bit more animated", then "it should be still, images in then shake then reveal - the
   jar shouldnt move wihle the images go in"); --jh is its height, --neck how far its neck is above the middle */
.doj { --jh: min(58vh, 540px); --neck: calc(var(--jh) * -.37); }
.doj-jar { position: relative; height: var(--jh); aspect-ratio: 320 / 420; transform-origin: 50% 92%; animation: doj-in .35s var(--ease) both; }
.doj.shake .doj-jar { animation: doj-shake 1.3s ease-in-out both; }
@keyframes doj-shake {
    0% { transform: none; }
    7% { transform: translate(-6px, -8px) rotate(-5deg); }
    16% { transform: translate(7px, -14px) rotate(6deg); }
    25% { transform: translate(-7px, -14px) rotate(-6deg); }
    34% { transform: translate(7px, -12px) rotate(5.5deg); }
    43% { transform: translate(-6px, -10px) rotate(-5deg); }
    53% { transform: translate(5px, -8px) rotate(4deg); }
    63% { transform: translate(-4px, -5px) rotate(-3deg); }
    74% { transform: translate(3px, -2px) rotate(2deg); }
    86% { transform: translate(-1px, 0) rotate(-.8deg); }
    100% { transform: none; }
}
.doj-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.doj-inside { position: absolute; inset: 0; clip-path: url(#doj-glass); }
/* each photograph comes down from above the neck and lands with a small bounce; the glass clips it on the way in */
.doj-fall { position: absolute; aspect-ratio: 1; transform: translateY(-80vh); transition: transform .64s cubic-bezier(.3, 1.22, .6, 1); will-change: transform; }
.doj-fall img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 1px 4px rgba(65, 64, 66, .28); transform: rotate(var(--a, 0deg)); }
.doj.drop .doj-fall, .doj.shake .doj-fall, .doj.card .doj-fall, .doj.again .doj-fall { transform: none; }
/* pick again: the jar comes back as it was, full and still, then shakes */
.doj.again .doj-fall { transition: none; }
.doj.again .doj-jar { animation: doj-in .4s var(--ease) both; }
/* and jostle about inside while it shakes */
.doj.shake .doj-fall img { animation: doj-jig .42s ease-in-out 3; }
@keyframes doj-jig { 0%, 100% { transform: rotate(var(--a, 0deg)); } 35% { transform: translate(3px, -7px) rotate(calc(var(--a, 0deg) + 9deg)); } 70% { transform: translate(-3px, -3px) rotate(calc(var(--a, 0deg) - 7deg)); } }
/* picked: the chosen photograph comes up out of the neck, small, rises, then opens out into its own card (the wall's
   card) while the jar drops away beneath it; its words and the buttons come in once it has landed (Jack: "i think the
   reveal of the card could be better") */
.doj.card .doj-jar { animation: doj-away .75s var(--ease) both; }
@keyframes doj-away { to { opacity: 0; transform: translateY(70px) scale(.88); } }
/* the card is R6 of public/design-2026/days-out-reveal (Jack: "r6 for reveal"): centred on one axis, what it is and how
   far over its name, the photograph under them, the buttons under that; sized so the whole of it fits the screen */
.doj-card { position: absolute; left: 50%; top: calc(50% + var(--bar, 76px) / 2); width: min(720px, calc(100vw - 2 * var(--dor6-edge)), calc((100vh - var(--bar, 76px) - 330px) * 1.5));
    transform: translate(-50%, -50%); text-align: center; }
.doj-k { display: flex; justify-content: center; gap: 18px; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(65, 64, 66, .6);
    animation: dor6-rise .7s 1.25s var(--ease) both; }
.doj-t { font-family: var(--face); font-weight: 300; font-size: min(clamp(36px, 3.4vw, 54px), 28px + (clamp(36px, 3.4vw, 54px) - 28px) * 0.6); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; margin: 14px auto 28px; max-width: 13em; color: #414042;
    animation: dor6-rise .7s 1.35s var(--ease) both; }
.doj-ph { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone, #E4DED9); box-shadow: 0 30px 70px rgba(65, 64, 66, .22); animation: doj-out 1.5s both; }
.doj-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the photograph comes up out of the jar's neck (--from, measured as it mounts), small and turning, then opens out */
@keyframes doj-out {
    0% { opacity: 0; transform: translateY(var(--from, 0px)) scale(.12) rotate(-6deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    10% { opacity: 1; }
    42% { transform: translateY(calc(var(--from, 0px) - 100px)) scale(.3) rotate(5deg); animation-timing-function: cubic-bezier(.34, 1.36, .6, 1); }
    100% { opacity: 1; transform: none; }
}
.doj-acts { display: flex; justify-content: center; gap: 12px; margin-top: 26px; animation: dor6-rise .7s 1.5s var(--ease) both; }
.doj-btn { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border: 1px solid #414042; background: #414042; color: var(--shell); cursor: pointer;
    font-family: var(--sans); font-size: 14.5px; transition: background .3s var(--ease), color .3s var(--ease); }
.doj-btn.line { background: none; color: #414042; }
.doj-btn.line:hover { background: #414042; color: var(--shell); }
@media (max-width: 760px) {
    .doj { padding: var(--bar, 76px) 16px 0; }
    .doj { --jh: min(50vh, calc((100vw - 110px) * 1.31)); }
    .doj-card { width: calc(100vw - 32px); }
    .doj-t { font-size: 32px; margin: 10px auto 20px; }
    .doj-k { font-size: 10px; letter-spacing: .2em; }
}
/* nothing floats over it */
body.dol-open .bellfab { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .doj-fall { transition: none; } .doj-jar, .doj-fall img, .doj-ph { animation: none !important; } }

/* FIND YOUR STAY, WHERE: every part of Scotland as a photograph in one row, two a press of the arrows (Jack, 6 October
   2026: "we cant favour regions, we have to show them all somehow maybe using photographs and a left and right arrow").
   The tiles are the picture cards of "What are you looking for?"; the arrows are the calendar's squares */
.do-gen-railwrap { position: relative; width: min(936px, 100%); }
.do-gen-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.do-gen-rail::-webkit-scrollbar { display: none; }
.do-gen-rail > .do-gen-kind { flex: 0 0 calc((100% - 36px) / 4); aspect-ratio: 4 / 3; scroll-snap-align: start; }
.do-gen-arr { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; padding: 0;
    border: 1px solid rgba(255, 255, 255, .6); background: none; color: #fff; font: 400 18px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.do-gen-arr.prev { left: -66px; }
.do-gen-arr.next { right: -66px; }
.do-gen-arr:hover { background: #fff; color: var(--ink); }
.do-gen-arr:disabled { opacity: .25; cursor: default; background: none; color: #fff; }
@media (max-width: 1100px) {
    .do-gen-railwrap { padding-bottom: 62px; }
    .do-gen-arr { top: auto; bottom: 0; margin-top: 0; }
    .do-gen-arr.prev { left: calc(50% - 54px); }
    .do-gen-arr.next { right: calc(50% - 54px); }
}
@media (max-width: 720px) {
    .do-gen-rail > .do-gen-kind { flex-basis: calc((100% - 12px) / 2); aspect-ratio: 4 / 3; }
}

/* FIND YOUR STAY: "Have you thought of these?" stands clearly apart from what fits (Jack, 6 October 2026: "it has to be
   clear so there could be space but below should be Have you thought of") */
.dor6-honest.dor6-more { padding-top: 72px; color: var(--ink); }
.dor6-honest.dor6-more .lp-h { margin: 0 0 10px; color: var(--ink); }
.dor6-honest.dor6-more p { margin: 0; font-size: 15px; color: var(--tweed); }

/* ===================================================================== HOW FAR, AND THE LUCKY DIP (6 October 2026)
   Chosen from public/design-2026/days-out-near-2 (Jack: "b6 d4", "bracken", "centered and mosaic please", "move the
   title up so its centered both ways"). The sky's words centred both ways, the weather a line under them; the yellow
   band under the sky with the jar's two-block dial (a hand-cut black line, the reach overprinted in bracken, one square
   handle) and a plain Lucky dip button; the wall a mosaic, each photograph its own height (set in days-out.tsx).
   New prefix dfr- (checked unused everywhere). */
.dor6-in.a1.dfr-centre { align-items: center; justify-content: center; text-align: center; padding: var(--bar, 76px) var(--dor6-edge) 0; min-height: min(64vh, 660px); }
.dor6-in.a1.dfr-centre h1 { margin-left: auto; margin-right: auto; }
.dfr-wx { margin: 18px 0 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; opacity: .92; }
/* the row since the evening of 12 October 2026: no band, no heading, no line (Jack: "remove the line please - lucky dip
   is random there now - space out better"). One line of the collection page's big tabs (Larken, ink-35, the chosen word
   in ink) centred on the page on paper, air above and below; Lucky dip is the row's last thing, a small outlined button
   in line with the words, not a stranger at the page's edge. When the line is wider than the page it scrolls from its
   left and the ends fade, as the itineraries row does. */
.dfr-band { position: relative; display: flex; justify-content: center; align-items: center; padding: 44px var(--dor6-edge) 10px; background: var(--paper); color: var(--ink); }
.dfr-band > div { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.dfr-rowwrap { position: relative; max-width: 100%; }
.dfr-rowwrap::before, .dfr-rowwrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .3s; }
.dfr-rowwrap::before { left: 0; background: linear-gradient(to right, var(--paper) 35%, rgba(255, 255, 247, 0)); }
.dfr-rowwrap::after { right: 0; background: linear-gradient(to left, var(--paper) 35%, rgba(255, 255, 247, 0)); }
.dfr-rowwrap.back::before, .dfr-rowwrap.more::after { opacity: 1; }
.dfr-tabs { display: flex; flex-wrap: nowrap; justify-content: safe center; align-items: baseline; gap: 0 clamp(22px, 2.2vw, 40px); max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.dfr-tabs::-webkit-scrollbar { display: none; }
.dfr-tabs button { flex: 0 0 auto; background: none; border: 0; padding: 2px 0; cursor: pointer; font: 300 26px/1.2 var(--face); letter-spacing: -.005em; color: var(--ink-35); white-space: nowrap; transition: color .25s; }
.dfr-tabs button:hover { color: var(--ink-75); }
.dfr-tabs button.on { color: var(--ink); }
.dfr-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* the kinds stand a double space on from how far */
.dfr-tabs button.dfr-what { margin-left: clamp(22px, 2.2vw, 40px); }
/* Lucky dip stands in the sky under the weather line, in the hero's white: a line, no fill, filling on hover */
.dor6-in.a1.dfr-centre .dfr-dip { margin: 26px auto 0; height: 48px; padding: 0 26px; border-color: rgba(255, 255, 255, .85); background: transparent; color: #fff; font-size: 14px; }
.dor6-in.a1.dfr-centre .dfr-dip:hover, .dor6-in.a1.dfr-centre .dfr-dip:focus-visible { background: var(--shell); color: var(--ink); border-color: var(--shell); }
.dfr-stays { justify-content: center; }
.dfr-dip, .dfr-from { height: 56px; padding: 0 30px; border: 1px solid #414042; cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 500; white-space: nowrap;
    background: var(--paper, #FBF9F6); color: #414042; transition: background .3s var(--ease), color .3s var(--ease); }
.dfr-dip:hover, .dfr-from { background: #414042; color: var(--shell); }
.dfr-none { grid-column: 1 / -1; margin: 0; padding: 32px 0; font-family: var(--sans); font-size: 16px; color: rgba(65, 64, 66, .55); }
.dfr-none button { margin-left: 12px; background: none; border: 0; padding: 0; font: inherit; color: #414042; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (max-width: 1100px) {
    .dfr-band { padding-top: 34px; }
    .dfr-band > div { width: 100%; }
}
@media (max-width: 760px) {
    .dfr-h { font-size: 30px; }
    .dfr-band { padding-top: 26px; }
    .dfr-tabs { gap: 0 18px; }
    .dfr-tabs button { font-size: 20px; min-height: 44px; }
    .dfr-tabs button.dfr-what { margin-left: 18px; }
    .dor6-in.a1.dfr-centre .dfr-dip { height: 44px; }
}

/* The cookie note, on Days Out only, on a screen less than 900px tall: a slim strip along the bottom, same words, same
   button, clear of the bell. At 1280x720 the card in the corner sat over two of the answers to Who's coming and two of
   What would you like to do, and a click landed on the note (the speed and usability pass, 6 October 2026). Elsewhere it
   stays the card Jack chose (B5, 10 September). */
@media (max-height: 900px) and (min-width: 761px) {
    body:has(.lp-page.do) .ck { left: 0; right: 0; bottom: 0; width: auto; max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
        gap: 28px; padding: 12px calc(clamp(16px, 3vw, 32px) + 56px + 24px) 12px var(--dor6-edge, 33px); }
    body:has(.lp-page.do) .ck h2 { margin: 0; font-size: 18px; }
    body:has(.lp-page.do) .ck p { margin: 0; font-size: 13px; line-height: 1.45; }
    body:has(.lp-page.do) .ck .ck-do { margin: 0; }
    /* and the Show all link lifted above the strip while it is there */
    body:has(.lp-page.do .do-gen-all):has(.ck) .do-gen-all { bottom: 96px; }
}

/* FIND YOUR STAY, THE ANSWER PAGE'S ADDITIONS, ON TRIAL (9 October 2026; components/design/stay-find-extras.tsx). Jack,
   of the list of ideas: "do all these to see how it looks". New prefix sfx- (checked unused everywhere). Square
   corners throughout; the page's own inks. */
/* the tabs, as the account's bar (the member's menu, .rgd-bar5 in _member-menu.css, to the letter: Larken 300 at 26px,
   34px between, the one chosen in ink over a 2px bracken line, 84px tall, a soft shadow, held under the site bar; at
   900px and under 20px type, 64px tall, the row sideways). At their right the wall or the map. */
.sfx-tabs { position: sticky; top: var(--bar, 76px); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 48px; height: 84px; padding: 0 var(--dor6-edge);
    background: var(--paper, #FFFFF7); box-shadow: 0 10px 30px rgba(65, 64, 66, .06); }
.sfx-tabs nav { flex: 0 1 auto; min-width: 0; display: flex; gap: 34px; height: 100%; align-items: center; overflow-x: auto; scrollbar-width: none; }
.sfx-tabs nav::-webkit-scrollbar { display: none; }
.sfx-tabs nav.sfx-tabs-as { flex: 0 0 auto; }
.sfx-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; }
.sfx-tabs button:hover { color: var(--ink, #414042); }
.sfx-tabs button.on { color: var(--ink, #414042); border-bottom-color: var(--bracken); }
.sfx-tabs button:focus-visible { outline: 2px solid var(--ink, #414042); outline-offset: 4px; }
@media (max-width: 900px) {
    .sfx-tabs { top: var(--bar, 64px); height: 64px; gap: 20px; }
    .sfx-tabs nav { gap: 20px; }
    .sfx-tabs button { font-size: 20px; min-height: 44px; display: flex; align-items: flex-end; padding: 0 0 8px; }
}
/* the second photograph, over the first once it has come */
.dor6-pin.pic > img.sfx-two { opacity: 0; transition: opacity .5s var(--ease), transform .9s var(--ease); }
.dor6-pin.pic:hover > img.sfx-two { opacity: 1; }
/* WHERE IT IS AND WHEN IT IS FREE, AT A SIZE TO READ (Jack, 9 October 2026: "the region and date its free on teh card is
   also sooo small"): on Find your stay the two words over a card are 15px in sentence case, not 10.5px capitals */
.sfx-page .dor6-tag { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.25; }
/* THE CARD'S TWO BUTTONS, SHOWN WHEN IT IS POINTED AT (Jack, 9 October 2026, of the Shortlist button, first under the
   name, then in the corner: "i dont like where the shortlist button is possitioned it could be so much better", then
   "maybe on hover it can show buttons for more info and add to shortlist?"). At rest a card is its photograph, where
   and when, and its name, nothing else; pointed at (or reached by keyboard) the photograph dims and two buttons stand
   in its middle, More info and Shortlist. A card already on the shortlist keeps a small heart in its bottom right
   corner. Where nothing can be pointed with (a phone, a tablet) there is no hover: the heart alone sits in the top
   right corner and a tap anywhere else opens the place. */
.sfx-acts { position: absolute; z-index: 3; top: 0; right: 0; display: flex; }
.sfx-more { display: none; }
.sfx-kept { display: none; }
.sfx-heart { width: 44px; height: 44px; padding: 0; border: 0; background: var(--shell); color: #414042; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0;
    font: 500 0/1 var(--sans); white-space: nowrap; }
.sfx-heart svg { width: 18px; height: 18px; fill: none; stroke: #414042; stroke-width: 1.5; stroke-linejoin: round; }
.sfx-heart.on svg { fill: var(--bracken); stroke: var(--bracken); }
.sfx-page .dor6-pin.pic .dor6-tag { right: 56px; }
@media (hover: hover) and (min-width: 761px) {
    .sfx-page .dor6-pin.pic .dor6-tag { right: 20px; }
    .sfx-acts { inset: 0; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity .25s var(--ease); }
    .dor6-pin.pic:hover .sfx-acts, .dor6-pin.pic:focus-within .sfx-acts { opacity: 1; }
    .dor6-pin.pic:hover > img, .dor6-pin.pic:focus-within > img { filter: brightness(.62); }
    .dor6-pin.pic > img { transition: transform .9s var(--ease), filter .3s var(--ease), opacity .5s var(--ease); }
    .sfx-more, .sfx-heart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: 50px; padding: 0 22px; font: 500 14.5px/1 var(--sans); }
    .sfx-more { background: var(--shell); color: #414042; }
    .sfx-heart { background: transparent; border: 1px solid var(--shell); color: var(--shell); }
    .sfx-heart svg { stroke: var(--shell); }
    .sfx-more:hover { background: #fff; }
    .sfx-heart:hover { background: rgba(249, 245, 238, .16); }
    .sfx-heart:focus-visible { outline: 2px solid var(--shell); outline-offset: 2px; }
    /* on the shortlist already: a small heart at rest, bottom right */
    .sfx-kept { display: grid; place-items: center; position: absolute; z-index: 2; right: 0; bottom: 0; width: 40px; height: 40px; background: var(--shell); }
    .sfx-kept svg { width: 17px; height: 17px; fill: var(--bracken); stroke: var(--bracken); stroke-width: 1.5; stroke-linejoin: round; }
    .dor6-pin.pic:has(.sfx-kept) .dor6-t { right: 56px; }
}
/* the map: the coast at the left, the place pointed at beside it */
.sfx-map { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 420px); gap: 48px; align-items: start; padding: 20px var(--dor6-edge) 96px; background: var(--paper); }
.sfx-map-land svg { display: block; width: 100%; height: auto; max-height: 86vh; }
.sfx-coast path { fill: #E9E2D6; stroke: none; }
.sfx-dot { cursor: pointer; outline: none; }
.sfx-dot circle { fill: var(--tweed); transition: r .2s var(--ease); }
.sfx-dot circle.hit { fill: transparent; }
.sfx-dot:focus-visible circle:not(.hit) { stroke: var(--ink); stroke-width: 1.5; }
.sfx-dot-top { fill: var(--bracken); stroke: var(--paper); stroke-width: 1.5; pointer-events: none; }
.sfx-map-side { position: sticky; top: calc(var(--bar, 76px) + 24px); }
.sfx-map-side .dor6-pin { animation: none; }
.sfx-map-hint { margin: 16px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--tweed); }
@media (max-width: 760px) {
    .sfx-map { grid-template-columns: 1fr; gap: 20px; }
    .sfx-map-side { position: static; }
    .sfx-page .dor6-tag { font-size: 12.5px; }
    .sfx-heart { width: 40px; height: 40px; }
    .sfx-page .dor6-pin.pic .dor6-tag { right: 48px; }
}
@media (prefers-reduced-motion: reduce) { .dor6-pin.pic > img.sfx-two { transition: none; } }
/* the trip's name, asked as Find your stay's last question: one box, the name offered already in it */
.sfx-name { display: block; width: min(100%, 560px); box-sizing: border-box; height: 68px; margin: 8px auto 28px; padding: 0 20px; border: 1px solid rgba(249, 245, 238, .7); border-radius: 0;
    background: rgba(249, 245, 238, .96); color: #414042; text-align: center; font-family: var(--face); font-weight: 300; font-size: 30px; }
.sfx-name:focus { outline: 2px solid var(--shell); outline-offset: 3px; }
/* a card with the trip's button leaves it the top right corner where there is no pointer (Days Out's drive time sat there) */
.dor6-pin.pic:has(.sfx-acts) .dor6-tag { right: 56px; }
@media (hover: hover) and (min-width: 761px) { .dor6-pin.pic:has(.sfx-acts) .dor6-tag { right: 20px; } }
/* the yellow band, when the trip in hand has places to stay: a button to start from each */
.dfr-stays { display: flex; flex-wrap: wrap; gap: 10px; }
a.dfr-from { display: inline-flex; align-items: center; text-decoration: none; }
/* THE WAY ROUND, in a place opened over the results (StayLayer): the account's bar, 84px, a Back button that cannot be
   missed, the trip's parts in Larken, the one thing to do at the right; the page inside starts under it */
.sfx-nav { position: absolute; left: 0; right: 0; top: var(--bar, 76px); z-index: 2; height: 84px; display: flex; align-items: center; gap: 40px; padding: 0 var(--dor6-edge);
    background: var(--paper, #FFFFF7); box-shadow: 0 10px 30px rgba(65, 64, 66, .08); }
.sfx-nav-back { flex: 0 0 auto; height: 54px; padding: 0 24px 0 18px; display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--ink, #414042); background: var(--paper, #FFFFF7); color: var(--ink, #414042);
    cursor: pointer; font: 500 16px/1 var(--sans); }
.sfx-nav-back i { font-style: normal; font-size: 22px; line-height: 1; }
.sfx-nav-back:hover { background: var(--ink, #414042); color: var(--shell); }
.sfx-nav nav { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 34px; overflow-x: auto; scrollbar-width: none; }
.sfx-nav nav::-webkit-scrollbar { display: none; }
.sfx-nav nav a, .sfx-nav nav button { white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 6px; cursor: pointer; text-decoration: none; color: rgba(65, 64, 66, .55);
    font: 300 26px/1.15 var(--face); letter-spacing: -.005em; transition: color .2s, border-color .2s; }
.lp-page .sfx-nav nav a { color: rgba(65, 64, 66, .55); }
.sfx-nav nav a:hover, .sfx-nav nav button:hover, .lp-page .sfx-nav nav a:hover { color: var(--ink, #414042); }
.sfx-nav nav .on { color: var(--ink, #414042); border-bottom-color: var(--bracken); }
.sfx-nav-add { flex: 0 0 auto; height: 54px; padding: 0 26px; border: 1px solid var(--ink, #414042); background: var(--ink, #414042); color: var(--shell); cursor: pointer; font: 500 16px/1 var(--sans); white-space: nowrap; }
.sfx-nav-add:hover { background: #000; }
.sfx-nav-add.on { background: var(--paper, #FFFFF7); color: var(--ink, #414042); }
.dol:has(.sfx-nav) .dol-frame, .dol:has(.sfx-nav) .dol-wait { top: calc(var(--bar, 76px) + 84px); }
.dol:has(.sfx-nav) .dol-frame { height: calc(100% - var(--bar, 76px) - 84px); }
@media (max-width: 900px) {
    .sfx-nav { height: 64px; gap: 14px; }
    .sfx-nav-back { height: 44px; padding: 0 12px; } .sfx-nav-back span { display: none; }
    .sfx-nav nav { gap: 20px; } .sfx-nav nav a, .sfx-nav nav button { font-size: 20px; }
    .sfx-nav-add { height: 44px; padding: 0 14px; font-size: 14.5px; }
    .dol:has(.sfx-nav) .dol-frame, .dol:has(.sfx-nav) .dol-wait { top: calc(var(--bar, 64px) + 64px); }
    .dol:has(.sfx-nav) .dol-frame { height: calc(100% - var(--bar, 64px) - 64px); }
}

/* THE TABS IN THE MIDDLE (Jack, 11 October 2026, of Explore's answer tabs: "i think the tabs should be centered on teh page
   on all these pages"): the row of kinds stands in the middle of the page on Explore and Find your stay; where it is wider
   than the screen (a phone) it starts at the edge and scrolls, never cut at the left. Find your stay's Photographs | Map
   keeps the right-hand end, out of the row's way. */
.sfx-tabs { justify-content: center; }
.sfx-tabs > nav:first-child { margin: 0 auto; max-width: 100%; }
/* Photographs | Map stands apart at the right only on a screen wide enough for both (the site walk, 13 October 2026: at
   1440 wide the kinds ran under it, Dog friendly over Photographs); narrower, it stands in the row and the kinds are in
   the middle of what is left */
@media (min-width: 1900px) { .sfx-tabs nav.sfx-tabs-as { position: absolute; right: var(--dor6-edge); top: 0; } }

/* EXPLORE'S QUESTIONS (/try/explore, Jack, 11 October 2026, of What are you looking for?: "i dont like how text goes into
   two lines either fix that or make it one word", "all the boxes and everything could go around 8% larger"): the boxes
   8% larger, every name on one line (the names themselves are short: Stays, Things to do) */
.lp-page.do.exf-page .do-gen-kinds { max-width: calc(var(--cols) * 243px); gap: 13px; }
.lp-page.do.exf-page .do-gen-kinds > .do-gen-kind { flex-basis: calc((100% - (var(--cols) - 1) * 13px) / var(--cols)); }
.lp-page.do.exf-page .do-gen-railwrap { width: min(1011px, 100%); }
.lp-page.do.exf-page .do-gen-rail { gap: 13px; }
.lp-page.do.exf-page .do-gen-rail > .do-gen-kind { flex-basis: calc((100% - 39px) / 4); }
.lp-page.do.exf-page .do-gen-kind span { right: 14px; white-space: nowrap; font-size: clamp(17px, 1.35vw, 23px); }
@media (max-width: 760px) {
    .lp-page.do.exf-page .do-gen-rail > .do-gen-kind { flex-basis: calc((100% - 13px) / 2); }
    .lp-page.do.exf-page .do-gen-kinds > .do-gen-kind { flex-basis: calc((100% - 10px) / 2); }
    .lp-page.do.exf-page .do-gen-kind span { font-size: 16px; left: 10px; right: 10px; bottom: 9px; }
}
.lp-page.do.exf-page .do-gen-q { font-size: min(clamp(34px, 3.67vw, 69px), 28px + (clamp(34px, 3.67vw, 69px) - 28px) * 0.6); }

/* THE BROAD CHOICES, QUIETLY (Jack, 12 October 2026: the finer kinds are the tabs, the broad ones "somewhere else less
   prominent"): one line in the reading face over Search again, each choice a word to press */
.lp-page.do.exf-page .exf-also { margin: clamp(48px, 6vw, 88px) auto 0; padding: 0 var(--dor6-edge, 33px); max-width: 1100px; text-align: center;
    font-family: var(--serif, 'Lora', Georgia, serif); font-size: clamp(18px, 1.3vw, 21px); line-height: 1.6; color: rgba(65, 64, 66, .75); }
.lp-page.do.exf-page .exf-also button { padding: 0; border: 0; background: none; font: inherit; color: var(--ink, #414042); cursor: pointer;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: #C08C3D; }
.lp-page.do.exf-page .exf-also button:hover { text-decoration-color: currentColor; }
.lp-page.do.exf-page .exf-also + .dor6-end { margin-top: 18px; }

/* ===========================================================================
   THE QUESTIONS ON A PHONE, ONE SCREEN AT A TIME (13 October 2026). Days Out, Explore (.exf-page) and Stay's finder
   (.sfx-page) all wear these rules. Jack: "can we make it more friendly on mobile - so only on mobile can you do these
   changes. disable scroll down, unless absolutely needed on a device make it perfectly centered also it seems too far
   down"; "on iphone when you click next the keypad thing appears and when you take it away, there is white at the
   bottom and the page is moved up"; "i clicked tommorow, and it moved on to the next step, but an evening was already in
   white"; "when i clicke the next step, the top of the page is cut off ... maybe have a horizontal scroll to select all
   the options and the next button below it, so it shows the card bigger and they can swipe through"; "for the 'how
   long' and other things to go back, can you just make this say GO BACK"; "the loading animation before results should
   be perfecly centered"; "for results on mobile just one card at a time".
   =========================================================================== */

/* A finger leaves its hover behind on whatever is drawn under it next: tapping Tomorrow left An evening, in the same
   place on the next question, looking chosen. So on a screen without a pointer the hover looks are the resting ones. */
@media (hover: none) {
    .lp-page.do .do-gen-opt:hover:not(.on) { background: rgba(255, 255, 255, .07); color: #fff; border-color: rgba(255, 255, 255, .6); }
    .lp-page.do .do-gen-go:hover { background: #fff; color: var(--ink); }
    .lp-page.do .do-gen-prev:hover { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .55); }
    .lp-page.do .do-gen-prev:hover span { transform: none; }
    .lp-page.do .do-gen-crumb:hover i { background: none; color: inherit; border-color: rgba(255, 255, 255, .6); }
    .lp-page.do .do-gen-kind:hover img { transform: none; }
    .lp-page.do .do-gen-locate:hover { opacity: 1; }
}

/* the back button's words: the step's name on a large screen, Go back on a phone */
.lp-page.do .do-crumb-go { display: none; }

@media (max-width: 760px) {
    .lp-page.do .do-crumb-was { display: none; }
    .lp-page.do .do-crumb-go { display: inline; }

    /* each question is the screen: the height a phone really shows (svh, which neither the address bar nor the keyboard
       changes), the question in the middle of what is under the bar, and the page held still while it is asked. A
       question taller than a small phone scrolls inside itself, from its top, rather than being cut. */
    html:has(.lp-page.do .do-gen-on), html:has(.lp-page.do .do-gen-on) body { overflow: hidden; overscroll-behavior: none; }
    .lp-page.do .do-gen-on, .lp-page.do .do-gen-open { height: 100svh; min-height: 0; }
    .lp-page.do .do-gen-on .lp-centre, .lp-page.do .do-gen-open .lp-centre { box-sizing: border-box; height: 100svh; min-height: 0;
        display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
        padding: var(--bar, 76px) var(--edge) 64px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
    .lp-page.do .do-gen-on .lp-centre::-webkit-scrollbar { display: none; }
    .lp-page.do .do-gen-on .do-gen-step, .lp-page.do .do-gen-open .do-gen-step { margin-block: auto; padding: 16px 0; }
    .lp-page.do .do-gen-all { bottom: max(18px, env(safe-area-inset-bottom, 0px)); }

    /* what you would like to do: one row of big cards to swipe through, the next card showing at the edge, and the
       button straight under them; where there were fifteen small tiles in five rows and the button off the screen */
    .lp-page.do .do-gen-kinds, .lp-page.do .do-gen-kinds[data-n] { --cols: 1 !important; display: flex; flex-wrap: nowrap; justify-content: flex-start;
        gap: 12px; width: calc(100% + 2 * var(--edge)); max-width: none; margin: 0 calc(-1 * var(--edge)); padding: 2px var(--edge) 6px;
        overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .lp-page.do .do-gen-kinds::-webkit-scrollbar { display: none; }
    .lp-page.do .do-gen-kinds > .do-gen-kind, .lp-page.do .do-gen-kinds[data-n] > .do-gen-kind { flex: 0 0 64%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
    .lp-page.do .do-gen-kinds .do-gen-kind span, .lp-page.do .do-gen-kinds[data-n] .do-gen-kind span { left: 16px; right: 16px; bottom: 16px; font-size: 22px; }
    .lp-page.do .do-gen-kinds .do-gen-kind i, .lp-page.do .do-gen-kinds[data-n] .do-gen-kind i { top: 12px; right: 12px; width: 30px; height: 30px; }
    .lp-page.do .do-gen-kinds + .do-gen-go { margin-top: 22px; }

    /* the answers, one under another: a whole card to look at, not two halves */
    .lp-page.do { --cols: 1; }
    .dor6-t { font-size: calc(var(--tsize) * .62); }
    .dor6-pin.ev .dor6-t { font-size: calc(var(--tsize) * .55); }
}
/* a short phone (an SE, 667 tall): the cards a little squarer, so the question, the row and the button still fit */
@media (max-width: 760px) and (max-height: 700px) {
    .lp-page.do .do-gen-kinds > .do-gen-kind, .lp-page.do .do-gen-kinds[data-n] > .do-gen-kind { flex-basis: 56%; aspect-ratio: 1 / 1; }
    .lp-page.do .do-gen-q { font-size: 30px; }
}
/* Explore's row of places (.do-gen-rail): the same big cards on a phone, swiped, the next showing at the edge; the arrows
   go, as a thumb does their work */
@media (max-width: 760px) {
    .lp-page.do .do-gen-railwrap, .lp-page.do.exf-page .do-gen-railwrap { width: calc(100% + 2 * var(--edge)); max-width: none; margin: 0 calc(-1 * var(--edge)); padding-bottom: 0; }
    .lp-page.do .do-gen-rail, .lp-page.do.exf-page .do-gen-rail { gap: 12px; padding: 2px var(--edge) 6px; scroll-padding-inline: var(--edge); }
    .lp-page.do .do-gen-rail > .do-gen-kind, .lp-page.do.exf-page .do-gen-rail > .do-gen-kind { flex: 0 0 64%; aspect-ratio: 4 / 5; }
    .lp-page.do .do-gen-rail .do-gen-kind span { left: 16px; right: 16px; bottom: 16px; font-size: 22px; }
    .lp-page.do .do-gen-rail .do-gen-kind i { top: 12px; right: 12px; width: 30px; height: 30px; }
    .lp-page.do .do-gen-arr { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
    .lp-page.do .do-gen-rail > .do-gen-kind, .lp-page.do.exf-page .do-gen-rail > .do-gen-kind { flex-basis: 56%; aspect-ratio: 1 / 1; }
}