/* _bar.css - HAND-WRITTEN, like _ours.css, _listing.css and _square.css. A trial on
   every September 2026 route, at Jack's asking on 8 September 2026.

   The bar: the mark on the left, four words in the centre in Larken rather than the
   five in small capitals - Destinations, Stay, Visit, Magazine - and on the right a
   Start here button that opens the Desk, then the menu. Search leaves the bar; it
   wants a home in the menu. The bar stays as you read: glass over the photograph,
   Cask once it has left it, its words Shell throughout, so nothing flips colour.

   The turn of a page: the site already runs every navigation through the View
   Transitions API (smooth.ts). These rules give that transition a paper ground, fade
   the old page out quickly and let the new one rise in late - the veil from the mock.

   The palette (Jack, 8 Sep, from Museum Ordrupgaard, renamed): August #A0BAD4 is the
   one accent - the thing you have kept, the word you are on, the mark of focus. Cask
   #392916 is the deep ground. Shell #F9F5EE is the type on Cask. Tweed #682114 is the
   button. And the button is theirs, read off their stylesheet: no fill, a 1px line in
   the text colour, 14.5px regular sentence case on a 50px button, square; on hover a
   second copy of the label in the other colour wipes across from the left in 0.4s,
   clip-path from inset(0 100% 0 0) to inset(0 -1% 0 0).

   Loaded after _shared.css and the page sheet through the modern extras list in
   HandleInertiaRequests, so it only overrides. No class is invented: .mk .flow
   .right .menu-word .start are the bar mock's own; .filmed, .on and data-label are
   states. If kept, the bar goes into build-bar-2026.py and its mock and the veil and
   buttons into build-shared.py; if not, delete this file and the one name in the
   extras list. */
:root{--august:#A0BAD4;--ling:#A0BAD4;--cask:#392916;--shell:#F9F5EE;--tweed:#682114;--oat:#F5F1E9;--bracken:#C08C3D;--bracken-soft:rgb(192,140,61)}

/* ── the four words, in Larken. No line and no colour (Jack, 8 Sep, twice): the words
   rest a little quiet, at 72%; the one under the pointer, and the one you are on,
   come up to full over 0.3s. That is the whole of it. ── */
.flow{gap:clamp(22px,3.2vw,48px)}
.flow a{font-family:var(--face);font-size:17px;font-weight:400;letter-spacing:-.004em;text-transform:none;padding:10px 0;opacity:.72;transition:opacity .3s ease}
.flow a::after,.flow a.on::after,.flow a:hover::after{content:none}
.flow a:hover,.flow a.on{opacity:1}
.flow a,.flow a:hover,.flow a.on,header.site.glass .flow a,header.site.glass .flow a:hover,header.site.glass .flow a.on{color:var(--shell)}
@media(max-width:1100px){.flow a:nth-child(2),.flow a:nth-child(3){display:inline-block}}
@media(max-width:1000px){.flow{display:none}}

/* ── the wordmark and the button, placed as Bright Studio's are (Jack, 9 Sep:
   "exactly the same position ... our button in exactly the same spot"), measured
   off brightstudio.julius.site at 1280 wide: a 76px bar; the wordmark a 28px word
   with -0.03em of tracking, its 33.6px box 56px from the left edge and centred in
   the bar; the button 40px tall with its right edge 56px from the right edge, centred
   too. Theirs is Open Sauce One; ours is Larken. Their wordmark has no hover - read
   twice over a second and a half, nothing moves - so neither does ours. Both edges
   are measured from the viewport, not from the 1400px column, so the bar's inner
   loses its maximum width here; the four words stay centred either way. ── */
/* Jack, 9 Sep, again: "exactly the same - margins, spacing, positioning - and use our
   own logo". So the mechanism as well as the numbers. Theirs is a three-part row: 56px
   of padding each side, the logo (33.6px tall) on the left, the button (40px tall) on
   the right, and the words - 16px on a 24px line, 24px apart - centred in the space
   between the two, which is why they sit 25px right of the page's centre there. Ours
   is built the same way: the mark and the button are in the row, not pinned to it,
   and the words take the space between. No burger; Start here opens the menu. The
   words keep the .02em of air Jack asked for in Larken. */
/* Jack, 9 Sep, at 1920 wide: "move the logo right and the button left, and centre the
   text perfectly". The row keeps the site's 1400px column, 56px in from its edges, so
   the mark and the button hang on the column's edges - the hero's words and the cards
   below start there too - rather than on the window's; at 1280 and under the column
   is the window and the numbers are theirs. The words are centred on the bar itself. */
header.site .in{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--edge)}
header.site .mk{position:static;left:auto;display:flex;align-items:center;flex:0 0 auto}
/* Jack: "make the logo pop more, whiter, a little bigger". The mark's artwork is dark;
   inverting it landed near white. Black first, then inverted, is white; 38px. */
header.site .mk img{display:block;height:38px;width:auto;filter:brightness(0) invert(1)}
header.site .flow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:24px}
header.site .flow a{font-size:16px;line-height:24px;padding:0;letter-spacing:.05em;white-space:nowrap}
/* ── between 1200 and 1000 the row is too wide to float centred: it ran into Sign in and Search from about 1030px
   down, and Days Out broke onto two lines (Jack, 12 October 2026, a screenshot of staging at 915px). Here it stands
   in the flow between the mark and the right-hand words with equal space either side, a little tighter, so the
   three can never cross whatever the member's name is. ── */
@media(max-width:1200px){header.site .flow{position:static;left:auto;top:auto;transform:none;margin:0 auto;gap:16px}}
header.site .in .right{position:static;right:auto;flex:0 0 auto;gap:14px}
header.site .in .right .start{height:40px;min-height:40px;padding:0 18px}
/* The menu stands at every width. It was `display:none` here with the phone
   query putting it back, so above 900 the bar had no menu at all and the ten
   words that live only in it - Itineraries, Collections, What's on, Journal,
   News, The library, Your guidebook, Saved places, The Desk, Membership -
   could not be reached from the bar (Jack, 10 September: "where is the
   itineary section gone"). bar.html sets `.menu-word{display:grid}` with
   nothing hiding it, and this sheet's own head comment describes the right
   as "a Start here button that opens the Desk, then the menu".
   Sign in leaves the bar too - it is in the menu's foot - so the row is mark, words,
   button, menu, and the words centre between the mark and the right as theirs do. */
/* 11 October 2026: Sign in is back, as a word beside the Search button, at every width (Jack: "there is no sign in
   button"); the menu it had moved into is gone. Larken, as the row's words. */
/* a little smaller (Jack, 12 October 2026: "Sign in text on menu, can yuo umake a little smaller font size please"): 17 to 15 */
header.site .in .right .you-word{display:inline-flex;align-items:center;font-family:var(--face);font-size:15px;font-weight:400;line-height:24px;letter-spacing:.05em;text-transform:none;text-decoration:none;padding:0 4px;opacity:.85;transition:opacity .3s ease;white-space:nowrap}
header.site .in .right .you-word:hover,header.site .in .right .you-word:focus-visible{opacity:1}
@media(max-width:560px){header.site .in .right .you-word{font-size:14px;padding:0 2px}}
@media(max-width:560px){header.site .in{padding:0 var(--edge)}}

/* ── the right: Start here, then the menu; Search steps out of the bar ── */
header.site .right{gap:10px;right:var(--edge)}
/* 8 October 2026: Search comes back, as a word beside Start here, because the site now has a search worth opening
   (Jack: "just realised there is no search function on the site"). It opens the layer (search-layer.tsx), not a page. */
header.site .right a.sx-word{display:none;align-items:center;font:500 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:0 6px}
/* 15 September: the burger is gone (Jack: "we just need the button"), so on a phone the button stays, a size down */
@media(max-width:560px){header.site .right .start{padding:0 14px;min-height:38px;font-size:9px}}
/* ── the phone: the mark and the menu ──
   `header.site .flow` and `header.site .in .right .menu-word` above are
   unconditional and outrank the `.flow{display:none}` in the queries, so the
   five words never hid and the menu never showed: at 375 the words ran
   straight through the mark. Said here at the same specificity, below the
   breakpoint this sheet already uses. build-bar-2026.py's own label for this
   width: "the mark and the menu". */
@media(max-width:1000px){header.site .flow{display:none}}
/* Search is the last word of the row from 8 October 2026 ("add the word search on the menu rather than the right hand
   side"); below 1000px, where the row is gone, it stands on the right beside Start here */
@media(max-width:1000px){header.site .right a.sx-word{display:inline-flex}}

/* ── the account ring, off for now (Jack, 8 Sep) ── */
header.site .right .you{display:none}

/* ── the turn of a page: to paper, then the new page rises ── */
::view-transition{background:var(--paper)}
::view-transition-old(root){animation:hs-leave 220ms ease-out both}
::view-transition-new(root){animation:hs-arrive 640ms var(--ease) 180ms both}
@keyframes hs-leave{to{opacity:0;transform:translateY(-6px)}}
@keyframes hs-arrive{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ── the bar as you scroll (Jack, 8 Sep, twice: the old switch was a snap, and the
   sliding-away bar was disliked) ──
   The bar stays. Its ground is a layer of its own whose opacity follows the scroll
   across the last 160px of the hero (--bar-t, 0 to 1, from the hook), so it arrives
   rather than appearing; and that ground is Cask, the words and the mark Shell on
   glass and on Cask alike, so nothing changes colour on the way - no flicker, no grey
   negative of the mark, no slab of stone on the copy. */
header.site,header.site.ready{background-color:transparent;color:var(--shell);transition:none}
header.site::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cask);opacity:var(--bar-t,1);transition:opacity .12s linear;pointer-events:none}
header.site .in{position:relative}
header.site.glass::before{opacity:var(--bar-t,0)}
header.site .mk img,header.site.glass .mk img{filter:brightness(0) invert(1);transition:none}
header.site.glass,header.site.glass.ready{color:var(--shell)}
header.site .flow a,header.site.glass .flow a,header.site .menu-word,header.site.glass .menu-word,header.site .right .word,header.site .bag{color:var(--shell)}
header.site .flow a::after,header.site.glass .flow a::after{background:var(--august)}
header.site.away{transform:none}
header.site.away::before{opacity:1}

/* ── the hero film: over the photograph, drifting as it does ── */
.hero > video.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:drift 16s linear both;z-index:0}
.hero > .veil,.hero > .in,.hero > .credit{z-index:1}
@media(prefers-reduced-motion:reduce){.hero > video.film{display:none}}

/* ── every hero in the palette (Jack, 8 Sep: "are we using the new colour palette
   here?", of the homepage). The Cask veil at .44 and Shell words, as on the film pages;
   and the way in - the paper pill with the breathing arrow - becomes the button below,
   Shell line on the photograph, Tweed fill on hover, the arrow gone. ── */
.hero .veil{background:rgba(57,41,22,.44)}
.hero h1,.hero h1 em,.hero .where{color:var(--shell)}
.hero .credit{color:rgba(249,245,238,.78)}
.hero .credit b{color:var(--shell)}
.hero .journey b{display:none}
.hero .journey,.hero .journey:hover{--hover-bg:var(--tweed);--hover-color:var(--shell);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;margin-top:26px;
  font-family:var(--sans);font-style:normal;font-weight:400;font-size:14.5px;letter-spacing:0;text-transform:none;line-height:1;white-space:nowrap;
  height:50px;min-height:50px;padding:0 25px;border:1px solid currentColor;border-radius:0;
  background:transparent;color:var(--shell);box-shadow:none;transform:none;cursor:pointer;transition:.5s}
.hero .journey[data-label]::after{content:attr(data-label);position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;background:var(--hover-bg);color:var(--hover-color);
  clip-path:inset(0 100% 0 0);transition:.4s;pointer-events:none}
.hero .journey[data-label]:hover::after{clip-path:inset(0 -1% 0 0)}
@media(max-width:600px){.hero .journey{height:50px;font-size:14.5px;padding:0 25px}}
@media(prefers-reduced-motion:reduce){.hero .journey,.hero .journey[data-label]::after{transition:none}}

/* ── the footer's grain (Jack, 8 Sep: "copy the texture of this image exactly and use
   it on our footer but in the forest green"). The reference - a flat green under a
   fine, even film grain - was pasted, not filed, so the grain is made rather than
   lifted: Gaussian noise at .60 on mid grey, softened a third of a pixel, a 320px tile
   (design-2026/grain.png), laid over the forest with soft-light so the green stays the
   green. Judged against the reference at the page's own scale; swap the tile for one
   lifted off the real file when it is in a folder. ── */
footer.ft{position:relative;isolation:isolate}
footer.ft::before{content:"";position:absolute;inset:0;z-index:0;background:url(/design-2026/grain.png) repeat;mix-blend-mode:soft-light;pointer-events:none}
footer.ft > *{position:relative;z-index:1}

/* (Every heading was tried in Gelica Extra Light for an hour on 8 Sep and put back to
   Larken at Jack's word; the stay card's name keeps Gelica - see _square.css.) */

/* ── the ground, on trial (Jack, 8 Sep): Argentique page colour, #FFFFF7, in place of paper #FBF9F6 ── */
:root{--paper:#FFFFF7}

/* ── the button: Museum Ordrupgaard's, in Tweed (Jack, 8 Sep) ──
   Their mechanism exactly. The button is a 1px line and a label; its ::after is the
   same label again, in --hover-color on a --hover-bg ground, clipped to nothing on
   the right; hover lets the clip go in 0.4s and the fill wipes in from the left with
   the label changing colour along the edge. Where a button carries no data-label
   the fill and the words change colour plainly instead, over the same 0.4s.
   Default: Tweed line and words on the page, Tweed fill and Shell words on hover.
   On a photograph or on Cask the line is Shell; on Cask the fill is Shell too. */
.btn,.btn.quiet,.band .in .btn,.stone .in .btn,.stone .mag2 .btn,.stone .mag2 .btn.quiet,.mag2 .btn.quiet,.band .btn.quiet,.in .btn.quiet,.band .btn,.in .btn,.btns .btn,.short .btn,.mag2 .btn,.mag .btn,.maker .btn,.hero .btn,.form button,.ft-form button,.acts2 button,.acts2 button.on,header.site .right .start,.card .do button,.card .do button + button,.card .do a{
  --hover-bg:var(--tweed);--hover-color:var(--shell);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:400;font-size:14.5px;letter-spacing:0;text-transform:none;line-height:1;white-space:nowrap;
  height:50px;min-height:50px;padding:0 25px;border:1px solid currentColor;border-radius:0;
  background:transparent;color:var(--tweed);box-shadow:none;text-decoration:none;cursor:pointer;
  transition:.5s}
.btn[data-label]::after,.in .btn[data-label]::after,.btns .btn[data-label]::after,.form button[data-label]::after,.ft-form button[data-label]::after,.acts2 button[data-label]::after,header.site .right .start[data-label]::after,.card .do button[data-label]::after,.card .do a[data-label]::after{
  content:attr(data-label);position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:var(--hover-bg);color:var(--hover-color);
  clip-path:inset(0 100% 0 0);transition:.4s;pointer-events:none}
.btn[data-label]:hover::after,.in .btn[data-label]:hover::after,.btns .btn[data-label]:hover::after,.form button[data-label]:hover::after,.ft-form button[data-label]:hover::after,.acts2 button[data-label]:hover::after,header.site .right .start[data-label]:hover::after,.card .do button[data-label]:hover::after,.card .do a[data-label]:hover::after{
  clip-path:inset(0 -1% 0 0)}
.btn:not([data-label]):hover,.in .btn:not([data-label]):hover,.btns .btn:not([data-label]):hover,.form button:not([data-label]):hover,.ft-form button:not([data-label]):hover,.acts2 button:not([data-label]):hover{background:var(--hover-bg);border-color:var(--hover-bg);color:var(--hover-color);transition:.4s}
/* on forest and on the Desk's say: Shell line, Shell fill, forest words */
.forest .btn,.forest .in .btn,.forest .in .btn.quiet,.forest .btns .btn,.band.forest .in .btn,.short .btn,.short .btns .btn,.say .btn,.ft-form button{--hover-bg:var(--shell);--hover-color:var(--forest);color:var(--shell)}
.ft-form button{background:transparent}
/* the bar: Shell line on glass and on Cask; Shell fill, Cask words */
header.site .right .start{--hover-bg:var(--shell);--hover-color:var(--cask);height:44px;min-height:44px;padding:0 20px;color:var(--shell)}
/* the two actions on the square card: Shell line on the photograph, Tweed fill on hover */
.card .do button,.card .do button + button,.card .do a{width:min(70%,190px);height:46px;min-height:46px;color:var(--shell);background:transparent;box-shadow:none}
/* August: the one you have kept stays filled, in heather */
.acts2 button.on,.card .do button.on,.btn.on{--hover-bg:var(--august);--hover-color:var(--shell);border-color:var(--august)}
.acts2 button.on[data-label]::after,.card .do button.on[data-label]::after,.btn.on[data-label]::after{clip-path:inset(0 -1% 0 0)}
.acts2 button.on:not([data-label]),.btn.on:not([data-label]){background:var(--august);color:var(--shell)}
:focus-visible{outline:2px solid var(--august);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.btn,.acts2 button,header.site .right .start,.card .do button{transition:none}.btn[data-label]::after,.in .btn[data-label]::after,.btns .btn[data-label]::after,.form button[data-label]::after,.ft-form button[data-label]::after,.acts2 button[data-label]::after,header.site .right .start[data-label]::after,.card .do button[data-label]::after,.card .do a[data-label]::after{transition:none}}


/* ── signed in, the one button is you (25 Sep; drawn as H on 3 Oct, below) ──
   The face is the register's: the photograph they gave, or the initial on forest, in a
   square. No sliding label - the fill would cover the face - so the hover fills the
   button itself, Shell with Cask words, as the label would have. */
/* THE NAME AND ITS MENU, ONE PIECE (11 October 2026). Jack: "can we make this neater - we dont need image"; then, of the
   first panels, "this is a complete mess - it shoudl be very easy to use and understand and simply - Home, The Daily,
   Bookmarks, Trips, Magazine, Subscription Settings log out", and "doesnt need Jack Cairney at the top - i feel like it
   could be connected better to the jack writing it seems disconnected - i also feel it could just be better overall".
   So the name is a tab the full height of the bar: maroon like the bar while shut, paper while open, and the panel
   continues straight down from it on the same paper, its right edge on the tab's. Seven places and Log out, nothing
   beside them; the page you are on is marked; under the pointer a row turns stone with maroon words. It unrolls from
   the tab. Every property is set, so nothing of the old panel (_you.css) wins half. On a phone it rises from the foot. */
header.site .in .right:has(> .me){align-self:stretch;align-items:stretch}
header.site .in .right:has(> .me) > :not(.me){align-self:center}
header.site .right .me{position:relative;z-index:61;display:inline-flex;align-items:center;gap:10px;margin:0;padding:0 18px;background:transparent;border:0;border-radius:0;color:var(--shell);font:inherit;cursor:pointer;text-decoration:none;transition:background-color .2s ease,color .2s ease}
header.site .right .me b{font:400 17px/24px var(--face);letter-spacing:.05em;white-space:nowrap;text-decoration:none}
header.site .right .me::after{content:"";width:6px;height:6px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease,ease)}
header.site .right .me:hover b{text-decoration:underline;text-decoration-color:#AFA065;text-decoration-thickness:1px;text-underline-offset:6px}
header.site .right .me[aria-expanded="true"]{background:#FFFFF7;color:#414042}
header.site .right .me[aria-expanded="true"] b{text-decoration:none}
header.site .right .me[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
@media(max-width:560px){header.site .right .me{padding:0 12px}header.site .right .me b{font-size:15px}}

@keyframes hs-unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hs-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hs-words{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
header.site .yp{position:absolute;right:var(--edge);left:auto;top:100%;bottom:auto;width:240px;max-width:calc(100vw - 32px);box-sizing:border-box;margin:0;padding:8px 0 10px;background:#FFFFF7;color:#414042;border:0;border-radius:0;box-shadow:0 26px 40px -16px rgba(43,48,29,.4);z-index:60;text-align:left;animation:hs-unroll .28s cubic-bezier(.2,.7,.2,1) both}
header.site .yp-top{display:none}
header.site .yp-rows{display:flex;flex-direction:column;gap:0;margin:0;padding:0;max-height:none;overflow:visible;animation:hs-words .3s .1s ease both}
header.site .yp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:10px 26px;background:none;border:0;color:#414042;text-decoration:none;transition:background-color .15s ease,color .15s ease}
header.site .yp-row:hover,header.site .yp-row:focus-visible{background:#F2EFE6;color:#682114;outline:none}
header.site .yp-row b{display:inline;position:static;font:400 18px/1.25 var(--face);letter-spacing:.01em;color:inherit;white-space:nowrap;transform:none;transition:none}
header.site .yp-row b::before,header.site .yp-row b::after{content:none}
header.site .yp-row[aria-current="page"]::after{content:"";width:6px;height:6px;flex:none;background:#F04E26}
header.site .yp-row i{display:none}
header.site .yp-row.first b{color:inherit}
header.site .yp-quiet{display:block;margin:6px 0 0;padding:0;border:0;animation:hs-words .3s .14s ease both}
header.site .yp-quiet a,header.site .yp-quiet button{display:block;width:100%;box-sizing:border-box;margin:0;padding:10px 26px;background:none;border:0;border-radius:0;cursor:pointer;text-align:left;font:500 14px/1.3 var(--sans);letter-spacing:.03em;color:#7a7672;text-decoration:none;transition:background-color .15s ease,color .15s ease}
header.site .yp-quiet a:hover,header.site .yp-quiet button:hover,header.site .yp-quiet button:focus-visible{background:#F2EFE6;color:#682114;outline:none}
header.site .yp.sheet{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;padding:14px 0 calc(16px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(43,48,29,.25);animation:hs-rise .3s cubic-bezier(.2,.7,.2,1) both}
header.site .yp.sheet .yp-row,header.site .yp.sheet .yp-quiet button{padding:12px 24px}
header.site .yp.sheet .yp-rows{max-height:60vh;overflow:auto}
@media(prefers-reduced-motion:reduce){header.site .yp,header.site .yp-rows,header.site .yp-quiet{animation:none}}
@media(prefers-reduced-motion:reduce){header.site .yp,header.site .yp-rows,header.site .yp-quiet{animation:none}}

/* THE GOLD UNDERLINE (Jack, 6 October 2026: "add the yellow underline you have on menu ... maybe on hover over"): the gold
   of the region cards drawn in from the left under a word as it is pointed at, and kept under the page you are on */
header.site .flow a{position:relative}
header.site .flow a::after,header.site.glass .flow a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:#C08C3D;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.8,.24,1)}
header.site .flow a:hover::after,header.site .flow a:focus-visible::after,header.site .flow a.on::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){header.site .flow a::after{transition:none}}

/* ===== THE SEARCH (8 October 2026; components/design/search-layer.tsx over any page, pages/search-live.tsx at /search).
   Here because the bar opens it on every page and this sheet is on every page. Square corners throughout. ===== */
.sx-layer{position:fixed;inset:0;z-index:300;background:#414042;color:#F6F1E8;overflow-y:auto;animation:sx-in .25s ease both}
@keyframes sx-in{from{opacity:0}to{opacity:1}}
.sx-x{position:absolute;top:26px;right:clamp(16px,5.4vw,78px);background:none;border:0;color:inherit;cursor:pointer;
  font:500 12px/1 var(--sans,'Jost',sans-serif);letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid currentColor;padding:0 0 4px}
.sx-layer-in{max-width:980px;margin:16vh auto 80px;padding:0 clamp(16px,5.4vw,78px)}
.sx-form{position:relative;display:flex;align-items:stretch;gap:16px;border-bottom:2px solid currentColor}
.sx-in{flex:1;min-width:0;background:none;border:0;outline:none;color:inherit;padding:10px 0 14px;
  font:400 min(clamp(28px,3.6vw,52px), 28px + (clamp(28px,3.6vw,52px) - 28px) * 0.6)/1.1 var(--face,'Larken',Georgia,serif);-webkit-appearance:none;appearance:none}
.sx-in::placeholder{color:currentColor;opacity:.42}
.sx-in::-webkit-search-cancel-button{display:none}
.sx-go{align-self:center;flex:0 0 auto;border:0;cursor:pointer;background:#C08C3D;color:#414042;padding:16px 22px;
  font:500 12px/1 var(--sans,'Jost',sans-serif);letter-spacing:.16em;text-transform:uppercase;transition:background .25s}
.sx-go:hover{background:#F6F1E8}
.sx-list{list-style:none;margin:18px 0 0;padding:0}
.sx-list a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid rgba(246,241,232,.14);color:inherit;text-decoration:none}
.sx-list b{font:400 24px/1.2 var(--face,'Larken',Georgia,serif)}
.sx-list span{flex:0 0 auto;font:500 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.18em;text-transform:uppercase;opacity:.66}
.sx-list a:hover,.sx-list a.on{color:#C08C3D}
.sx-try{margin-top:36px}
.sx-k{font:500 12px/1.4 var(--sans,'Jost',sans-serif);letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin:0 0 12px}
.sx-try a{display:block;padding:9px 0;color:inherit;text-decoration:none;font:400 min(clamp(22px,2.2vw,30px), 28px + (clamp(22px,2.2vw,30px) - 28px) * 0.6)/1.2 var(--face,'Larken',Georgia,serif);opacity:.9}
.sx-try a:hover{color:#C08C3D;opacity:1}

/* the page */
.sx-page{background:#FBF9F6;color:#414042;min-height:70vh}
.sx-top{padding:calc(var(--bar,76px) + 52px) clamp(16px,5.4vw,78px) 30px;background:#EFEBE4}
.sx-top .sx-form{max-width:1240px}
.sx-top .sx-in{font-size:min(clamp(26px,2.8vw,44px), 28px + (clamp(26px,2.8vw,44px) - 28px) * 0.6)}
.sx-list.is-drop{position:absolute;z-index:30;top:100%;left:0;right:0;margin:0;padding:0 20px;background:#FBF9F6;box-shadow:0 24px 60px rgba(65,64,66,.18)}
.sx-list.is-drop a{border-bottom-color:rgba(65,64,66,.1)}
.sx-list.is-drop a:hover,.sx-list.is-drop a.on{color:#C08C3D}
.sx-h{font:400 min(clamp(36px,4.2vw,62px), 28px + (clamp(36px,4.2vw,62px) - 28px) * 0.6)/1.05 var(--face,'Larken',Georgia,serif);margin:40px 0 0;letter-spacing:-.01em;text-wrap:balance}
.sx-said{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.sx-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #414042;color:#414042;text-decoration:none;
  font:500 13px/1 var(--sans,'Jost',sans-serif);letter-spacing:.05em;transition:background .2s,color .2s}
.sx-chip i{font-style:normal;opacity:.55}
.sx-chip:hover{background:#414042;color:#FBF9F6}
.sx-tabs{display:flex;flex-wrap:wrap;gap:4px 18px;margin:30px 0 0;border-top:1px solid rgba(65,64,66,.14);padding-top:12px}
.sx-tabs button{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;color:#414042;padding:8px 0;
  font:500 12px/1 var(--sans,'Jost',sans-serif);letter-spacing:.16em;text-transform:uppercase}
.sx-tabs button.on{border-bottom-color:#C08C3D}
.sx-sec{padding:44px clamp(16px,5.4vw,78px) 8px}
.sx-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin:0 0 20px}
.sx-sec-h h2{font:400 min(clamp(28px,2.6vw,40px), 28px + (clamp(28px,2.6vw,40px) - 28px) * 0.6)/1.1 var(--face,'Larken',Georgia,serif);margin:0}
.sx-page .dor6-wall.sx-wall{padding:0;background:transparent}
.sx-page .dor6-pin.ev{background:#2B301D;color:#F6F1E8}
.sx-more,.sx-maptoggle{display:block;margin:26px auto 0;background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;color:#414042;
  padding:0 4px 4px;font:500 13px/1 var(--sans,'Jost',sans-serif);letter-spacing:.12em;text-transform:uppercase}
.sx-maptoggle{margin:0}
.sx-map{padding:0 clamp(16px,5.4vw,78px) 10px;max-width:720px}
.sx-close-h{padding:64px clamp(16px,5.4vw,78px) 0;margin-top:28px;border-top:1px solid rgba(65,64,66,.14)}
.sx-close-h h2{font:400 min(clamp(28px,2.6vw,40px), 28px + (clamp(28px,2.6vw,40px) - 28px) * 0.6)/1.1 var(--face,'Larken',Georgia,serif);margin:0 0 8px}
.sx-close-h p{font:400 17px/1.5 'Lora',Georgia,serif;color:#414042;margin:0}
.sx-close-h + .sx-sec{padding-top:24px}
/* first on the page (no place was exactly it): no rule above it, the heading box already ends the top */
.sx-top + .sx-close-h{border-top:0;margin-top:0;padding-top:44px}
.sx-empty .sx-h2{font:400 min(clamp(30px,3vw,44px), 28px + (clamp(30px,3vw,44px) - 28px) * 0.6)/1.1 var(--face,'Larken',Georgia,serif);margin:0 0 10px}
.sx-p{font:400 18px/1.55 'Lora',Georgia,serif;margin:0 0 6px;color:#414042}
.sx-try.is-page{margin-top:14px}
.sx-try.is-page a{color:#414042}
.sx-try.is-page a:hover{color:#C08C3D}
.sx-desk{padding:40px clamp(16px,5.4vw,78px) 90px;margin:0;font:400 17px/1.5 'Lora',Georgia,serif;color:#414042}
.sx-desk a,.sx-desk button{color:#414042;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){
  .sx-layer-in{margin-top:12vh}
  .sx-go{padding:14px 12px}
  /* the placeholder, Search Hidden Scotland, whole on a phone: 22px fits 375, 19px fits 320 */
  .sx-in,.sx-top .sx-in{font-size:22px}
  .sx-list b{font-size:20px}
  .sx-top{padding-top:calc(var(--bar,64px) + 30px)}
}
@media (max-width:360px){.sx-in,.sx-top .sx-in{font-size:19px}}

/* ===== THE SEARCH, THE ANSWER FIRST (8 October 2026; Jack chose A from public/design-2026/search-page/, on trial at
   /try/search, pages/search-try.tsx). The sheet's rules, its class names prefixed sq-. Square corners; no labels on a
   photograph; the heading is the box. ===== */
.sq-page{background:#FBF9F6;color:#414042;min-height:60vh}
.sq-q{padding:56px clamp(16px,5.4vw,78px) 0}
.sq-box{position:relative;display:flex;align-items:flex-end;gap:20px;border-bottom:2px solid #414042;max-width:1240px}
.sq-in{flex:1;min-width:0;border:0;background:none;outline:none;resize:none;overflow:hidden;display:block;padding:0 0 10px;color:#414042;
  font:400 min(clamp(40px,4.2vw,64px), 28px + (clamp(40px,4.2vw,64px) - 28px) * 0.6)/1.08 var(--face,'Larken',Georgia,serif);letter-spacing:-.01em}
.sq-in::placeholder{color:#414042;opacity:.4}
.sq-go{flex:0 0 auto;border:0;background:none;cursor:pointer;padding:0 0 18px;font:500 12px/1 var(--sans,'Jost',sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#c08c3d}
.sq-go:hover{color:#414042}
.sq-box .sx-list.is-drop{top:calc(100% + 2px)}
.sq-said{margin:16px 0 0;font:400 15px/1.4 var(--sans,'Jost',sans-serif);color:#414042;display:flex;flex-wrap:wrap;gap:4px 18px}
.sq-said a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.sq-said a:hover{color:#414042;border-bottom-color:currentColor}
.sq-said i{font-style:normal;margin-left:6px;opacity:.7}
.sq-sec{padding:52px clamp(16px,5.4vw,78px) 0}
.sq-sec.is-first{padding-top:40px}
.sq-sec-h{margin:0 0 20px}
.sq-sec-h h2{font:400 32px/1.1 var(--face,'Larken',Georgia,serif);margin:0}
.sq-sec-h p{font:400 17px/1.5 'Lora',Georgia,serif;color:#414042;margin:10px 0 0}
/* smaller, 8 Oct ("maybe try the listing cards smaller - i think the images are too big"): six across, 4:5; days out four across */
.sq-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 18px}
.sq-grid.is-wide{grid-template-columns:repeat(4,minmax(0,1fr))}
.sq-grid.is-small{grid-template-columns:repeat(6,minmax(0,1fr))}
.sq-card{display:block;color:#414042;text-decoration:none}
.sq-card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#EFEBE4}
.sq-grid.is-wide .sq-card img{aspect-ratio:3/2}
.sq-t{font:400 21px/1.2 var(--face,'Larken',Georgia,serif);margin:12px 0 0}
.sq-grid.is-wide .sq-t{font-size:20px}
.sq-l{font:400 14px/1.4 var(--sans,'Jost',sans-serif);color:#414042;margin:6px 0 0}
.sq-l:empty{display:none}
.sq-card:hover .sq-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sq-titles{border-top:1px solid #D9D2C7;max-width:1240px}
.sq-titles a{display:block;padding:16px 0;border-bottom:1px solid #D9D2C7;color:#414042;text-decoration:none}
.sq-titles b{font:400 22px/1.3 var(--face,'Larken',Georgia,serif)}
.sq-titles a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sq-more{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:26px}
.sq-more:empty{display:none}
.sq-lnk{white-space:nowrap;background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 3px;cursor:pointer;color:#414042;
  font:500 13px/1 var(--sans,'Jost',sans-serif);letter-spacing:.08em}
.sq-map{max-width:720px;margin-top:28px}
.sq-foot{padding:56px clamp(16px,5.4vw,78px) 90px;margin:0;font:400 17px/1.5 'Lora',Georgia,serif;color:#414042}
.sq-foot a{color:#414042;text-decoration:underline;text-underline-offset:4px}
@media (max-width:1500px){.sq-grid,.sq-grid.is-small{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1100px){.sq-grid,.sq-grid.is-small{grid-template-columns:repeat(4,minmax(0,1fr))}.sq-grid.is-wide{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .sq-q{padding:30px 20px 0}
  .sq-in{font-size:30px}
  .sq-go{padding-bottom:12px}
  .sq-sec{padding:40px 20px 0}
  .sq-grid,.sq-grid.is-small{grid-template-columns:1fr 1fr;gap:24px 12px}
  .sq-grid.is-wide{grid-template-columns:1fr;gap:24px}
  .sq-t{font-size:18px}
  .sq-grid.is-wide .sq-t{font-size:19px}
  .sq-titles b{font-size:19px}
  .sq-more{flex-direction:column;align-items:flex-start}
  .sq-foot{padding:40px 20px 60px}
}

/* the answer as a pop-up (8 October 2026: "more like a pop up where the page can be closed off with a big x on top right,
   so that means we dont need the menu etc"): paper over the whole window, its own scroll, a big × top right; on its own
   address (.sq-page.is-alone) the same without a bar, menu or footer */
.sq-layer{position:fixed;inset:0;z-index:300;background:#FBF9F6;color:#414042;overflow-y:auto;overscroll-behavior:contain;animation:sq-in .2s ease both}
@keyframes sq-in{from{opacity:0}to{opacity:1}}
.sq-layer .sq-q,.sq-page.is-alone .sq-q{padding-top:96px;padding-right:calc(clamp(16px,5.4vw,78px) + 72px)}
.sq-layer .sq-foot,.sq-page.is-alone .sq-foot{padding-bottom:120px}
.sq-page.is-alone{min-height:100vh}
.sq-x{position:fixed;z-index:310;top:24px;right:clamp(16px,5.4vw,78px);width:56px;height:56px;padding:0;border:0;background:#FBF9F6;cursor:pointer}
.sq-x span{position:absolute;left:8px;right:8px;top:27px;height:2px;background:#414042;transform:rotate(45deg);transition:background .2s}
.sq-x span + span{transform:rotate(-45deg)}
.sq-x:hover span{background:#C08C3D}
.sq-all{transition:opacity .15s}
/* WHILE IT LOOKS (Jack, 13 October 2026: "i searced 'cafes aboyne' but it just seems to do nothing ... add somekind of
   loading or something to show the user its working on finding them the rusults"). The button says Searching, a gold
   line runs along under the box, one quiet line says what it is looking for, and what was there falls back. The same on
   /search (sx-) as in the search over the page (sq-). */
.sq-all.is-busy{opacity:.2;pointer-events:none}
.sq-box.is-busy::after,.sx-form.is-busy::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:30%;background:#C08C3D;animation:sq-sweep 1.1s ease-in-out infinite}
@keyframes sq-sweep{0%{left:0;width:0}40%{width:35%}100%{left:100%;width:0}}
.sq-box.is-busy .sq-go,.sx-form.is-busy .sx-go{cursor:default;animation:sq-beat 1.1s ease-in-out infinite}
@keyframes sq-beat{50%{opacity:.45}}
.sq-wait,.sx-wait{margin:22px 0 0;font:400 19px/1.45 var(--serif,'Lora',Georgia,serif);color:#414042;opacity:.8}
.sq-wait{padding:0}
.sx-wait{max-width:1240px}
.sx-page.is-busy .sx-h,.sx-page.is-busy .sx-said,.sx-page.is-busy .sx-tabs,.sx-page.is-busy .sx-sec,.sx-page.is-busy .sx-close-h{opacity:.2;pointer-events:none;transition:opacity .15s}
@media (prefers-reduced-motion:reduce){.sq-box.is-busy::after,.sx-form.is-busy::after{animation:none;width:100%;left:0;opacity:.6}.sq-box.is-busy .sq-go,.sx-form.is-busy .sx-go{animation:none}}
@media (max-width:760px){
  .sq-x{top:14px;right:12px;width:48px;height:48px}
  .sq-x span{top:23px}
  .sq-layer .sq-q,.sq-page.is-alone .sq-q{padding-top:76px;padding-right:20px}
}



/* THE EIGHT AT WORK (Jack, 10 October 2026: "for menu bar on top lets try Maroon ... leave the light colours as they
   are for backgrounds ... use 392916 for some dark backgrounds too ... what can we use #F04E26 for, it will be nice to
   have pops of clour. try and utilise the other colours and build homepage again").
   This sheet is hand-written and is the last one on every page, so the jobs are given here once:
     maroon  the bar
     forest and cask, turn about: the dark bands of the feed; the foot of the page is cask
     olive   every filled button, and the line under a word of the bar (11 October)
     flame   the pops, and only small ones: the light that says "now", the dot of the picture
             you are on, the line that grows beside a link
     sky     a link on a dark band
     olive   the small label on a forest band;  gold  the small label on a cask band
   A whole rule is set each time, hover included (a half-overridden button has lost its own words four times). */
/* solid over a hero film too, not see-through until the page is scrolled: he asked to try the bar in maroon, and a
   bar that only turns maroon further down would not show him it */
header.site::before,header.site.glass::before,header.site.away::before{background:#682114;opacity:1}
/* the line under a word of the bar is olive (Jack, 11 October 2026: "AFA065 for th ehover over line on menu too") */
header.site .flow a::after,header.site.glass .flow a::after{background:#AFA065}
.fd-row.dark:nth-child(even of .dark){background:#392916}
.fd-row.dark .fd-kick{color:#AFA065}
.fd-row.dark:nth-child(even of .dark) .fd-kick{color:#C08C3D}
.fd-row.dark .fd-go{color:#A0BAD4}
.fd-row .fd-go s{background:#F04E26}
.fd-row .fd-dots i.on,.fd-row.dark .fd-dots i.on,.fd-row.bright .fd-dots i.on{background:#F04E26}
.hl-hero .hl-dot,.hl-here .hl-dot,.lw-sec .lw-live{background:#F04E26}
/* BUTTONS ARE THE OLIVE (Jack, 11 October 2026: "can we use AFA065 for hero button on home and other buttons"; on
   10 October they were the gold). A filled button is olive with forest words (about 5 to 1, easily read); under the
   pointer it turns cask with pale words. An outlined button keeps its maroon line and words: olive words on the pale
   page could not be read. */
.hl-hero .hl-go,.lp-page .lp-btn.fill,.lp-page .plan .lp-btn.fill{background:#AFA065;border-color:#AFA065;color:#2B301D}
.hl-hero .hl-go:hover,.lp-page .lp-btn.fill:hover,.lp-page .plan .lp-btn.fill:hover{background:#392916;border-color:#392916;color:#FFFFF7}
footer.ft{background:#392916}

/* THE SEARCH OPENS ON EVERYTHING WE DO, AS DOORS (search-answer.tsx, config/discover.php; Jack, 10 October 2026: "a nice
   visual menu ... very visual and very easy to use"). A photograph a door, its name over the foot of it and one plain
   line under the name; four across, two on a phone. */
header.site .in .right button.start.is-search{display:inline-flex;align-items:center}
.sqd-try{margin:0;padding:22px clamp(16px,5.4vw,78px) 0;font:400 18px/1.7 var(--serif,'Lora',Georgia,serif);color:#414042}
.sqd-try span{margin-right:14px;font:500 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#7a7672}
.sqd-try a{display:inline-block;margin-right:22px;color:#414042;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sqd-try a:hover{color:#6B2216}
.sqd-sec .sq-sec-h{margin-bottom:22px}
.sqd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sqd-door{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:#EFEBE4;color:#fff;text-decoration:none}
.sqd-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.sqd-door:hover img{transform:scale(1.04)}
.sqd-door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,14,0) 42%,rgba(8,10,14,.72) 100%)}
.sqd-w{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;display:block}
.sqd-w b{display:block;font:400 min(clamp(24px,2vw,34px), 28px + (clamp(24px,2vw,34px) - 28px) * 0.6)/1.08 var(--face,'Larken',Georgia,serif);letter-spacing:-.01em}
.sqd-w i{display:block;margin-top:7px;font:400 17px/1.35 var(--serif,'Lora',Georgia,serif);font-style:normal;opacity:.94}
.sq-all > .sqd-sec:last-of-type{padding-bottom:110px}
@media(max-width:1100px){.sqd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.sqd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sqd-w{left:14px;right:14px;bottom:14px}.sqd-w b{font-size:21px}.sqd-w i{font-size:15px}.sqd-try a{display:block;margin:0}}

/* THE DAILY UNDER THE MEMBER'S MENU (11 October 2026). The cover is drawn 76px up, under the bar; with the member's menu
   now straight under the bar (as on every account page), it starts under the menu instead. Signed out there is no
   menu, and the cover is as it was. */
.wel-menu ~ article.dy > .dy-hero{margin-top:0}

/* ONE SIZE FOR THE BAR'S WORDS ON EVERY PAGE (Jack, 11 October 2026: "can we work on making the menu consistant across
   the site - its differnet sizes - first lets get it right - on homepage ... can you make the font a lttel bit smaller on
   the menu that goes for sign in text too"). Over a big opening (.hl-hero: the home page, Destinations, the Library,
   the Munros, Stay) the words were 19px (_home-merge.css), everywhere else 16px. Now 17px everywhere: the row, Sign in
   and the member's name. Set here, the last sheet on every page, with the opening's own selector so it wins there too. */
header.site .flow a,html:has(.hl-hero) header.site .flow a{font-size:17px;line-height:24px;letter-spacing:.05em}

/* ── THE MENU ON A PHONE: THE BAR OPENS (brm-, 13 October 2026) ──
   Jack, of design 6 of the deck (claude.ai/artifact/ETZ3vo2mVjNAh6cA1Y79dj): "lets try 6 please", "transition and usabilty
   has to be perfect and app like", "seamliess going through pages", "probably sign in and join now on the bottom"; on
   seeing it: "it could reveal and drop down slower, a little more spaced out, there is also space for a few more optoins";
   and then: "the options could load one after the other in a really cool way", "the sign in and join now button is a bit
   too close to the end of the page", "SIGN IN THEN JOIN NOW - NO BUTTON JUST TEXT".
   Below 1000px the bar's words are hidden, and Sign in moves into the menu's foot; the word Menu stands beside Search.
   Pressed, the bar's own ground (--brm-ground, read from the bar as it is drawn) drops to the foot of the screen in .8s;
   from 300ms each word comes out of a blur, its letters drawing in from wide spacing (B, "Ink", chosen by Jack from the
   sheet: "BInk"), 65ms apart, the seven and then the six smaller ones (.brm-more, two to a row); the gold line under the
   page you are on draws across once its word has settled; the foot comes last. Closing, the words fade first and the
   ground rolls up after.
   A word pressed keeps a gold line while the next page loads and the others fade; the menu lifts off once that page is
   drawn (site-bar.tsx). The five entrances compared: /design-2026/phone-menu.html. Every word at least 44px to press.
   Still for a phone that asks for less motion. Square throughout; space divides the groups, never a line. */
header.site .right .brm-word{display:none}
@media(max-width:1000px){
  header.site .in .right .you-word,header.site .right .me{display:none}
  header.site .right .brm-word{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 6px;border:0;background:none;cursor:pointer;font-family:var(--face);font-size:16px;font-weight:400;line-height:1;letter-spacing:.04em;color:var(--shell);text-decoration:underline;text-decoration-color:var(--bracken);text-decoration-thickness:1px;text-underline-offset:6px;-webkit-tap-highlight-color:transparent}
}
header.site.brm-on::before{opacity:1;transition:none}
header.site.brm-on.away{transform:none}
.brm{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;justify-content:space-between;gap:36px;box-sizing:border-box;margin:0;padding:calc(var(--bar,76px) + 26px) var(--edge,20px) calc(56px + env(safe-area-inset-bottom,0px));background:var(--brm-ground,var(--cask));color:var(--shell);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;transition:clip-path .45s cubic-bezier(.65,0,.35,1) .14s,visibility 0s linear .6s}
.brm.brm-open{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto;transition:clip-path .8s cubic-bezier(.77,0,.18,1),visibility 0s}
@media(min-width:1001px){.brm{display:none}}
.brm-top{display:flex;flex-direction:column;gap:30px}
.brm-list{display:flex;flex-direction:column;align-items:flex-start}
.brm-more{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;justify-items:start}
.brm-top a{position:relative;display:block;padding:11px 0;font-family:var(--face);font-size:31px;font-weight:400;line-height:1.15;letter-spacing:-.005em;color:var(--shell);text-decoration:none;-webkit-tap-highlight-color:transparent}
.brm-more a{padding:10px 0;font-size:20px;line-height:1.2;letter-spacing:0;color:color-mix(in srgb,var(--shell) 80%,transparent)}
.brm-w{display:block}
/* B, Ink (Jack, 13 October 2026: "BInk"): out of a blur, the letters drawing in from wide spacing. Closing, the word fades
   first and only then goes back to its blur and spacing, so nothing jumps while it can still be seen. */
.brm-t{display:block;opacity:0;filter:blur(10px);letter-spacing:.22em;transition:opacity .2s ease,filter 0s linear .2s,letter-spacing 0s linear .2s}
.brm.brm-open .brm-t{opacity:1;filter:blur(0);letter-spacing:inherit;transition:opacity .7s ease calc(300ms + var(--i,0) * 65ms),filter .9s ease calc(300ms + var(--i,0) * 65ms),letter-spacing 1.1s cubic-bezier(.16,1,.3,1) calc(300ms + var(--i,0) * 65ms)}
.brm-top a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--bracken);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.brm-more a::after{bottom:6px}
.brm.brm-open .brm-top a.brm-here::after{transform:scaleX(1);transition:transform .6s cubic-bezier(.16,1,.3,1) calc(850ms + var(--i,0) * 65ms)}
.brm.brm-open .brm-top a.brm-go::after{transform:scaleX(1);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.brm-top a:active{opacity:.7}
.brm.brm-going .brm-top a:not(.brm-go){opacity:.38;transition:opacity .25s ease}
.brm-foot{display:flex;align-items:center;justify-content:flex-start;gap:36px;opacity:0;transform:translateY(8px);transition:opacity .15s ease,transform .15s ease}
.brm.brm-open .brm-foot{opacity:1;transform:none;transition:opacity .6s ease calc(300ms + var(--i,10) * 65ms),transform .8s cubic-bezier(.16,1,.3,1) calc(300ms + var(--i,10) * 65ms)}
.brm-sign,.brm-join{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;background:none;cursor:pointer;font:600 13px/1 var(--sans,'Jost',sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--shell);text-decoration:none;-webkit-tap-highlight-color:transparent}
.brm-join{text-decoration:underline;text-decoration-color:var(--bracken);text-decoration-thickness:1px;text-underline-offset:7px}
/* a short phone (an SE at 667): the words closer, so the foot is still in sight without scrolling */
@media(max-width:1000px) and (max-height:740px){.brm{gap:24px;padding-top:calc(var(--bar,76px) + 14px);padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}.brm-top{gap:18px}.brm-list a{padding:6px 0;font-size:29px}}
@media(prefers-reduced-motion:reduce){.brm,.brm.brm-open,.brm-t,.brm.brm-open .brm-t,.brm-top a::after,.brm.brm-open .brm-top a.brm-here::after,.brm-foot,.brm.brm-open .brm-foot{transition:none}.brm-t,.brm-foot{transform:none}.brm-t{filter:none;letter-spacing:inherit}}

/* THE SEARCH IN DAYS OUT'S SHAPE, /try/search-days (13 October 2026; Jack: "more like teh day trip style of search ...
   type what their searching first of all"). Redrawn the same evening, cleaner (Jack: "could be easier and clear and
   aligned better"; "this is a mess alignement and spacing wise - really create perfection here"):
     the opening: everything on one centre line, the label, a white field with the tweed Search inside it, the ways in
       as one line of words;
     the answer: the sky carries the sentence alone, New search in its corner; under it one paper ground and ONE left
       edge (Days Out's own, --dor6-edge) for the tabs, the words to add, each part's small label, its cards and More.
   Days Out's sky, tabs and wall (dor6-, dfr-) as they are; sxd- is what is new here. No footer. */
.sxd-page{background:var(--paper)}
/* the opening is the whole screen, the film to its foot, nothing showing beneath (Jack, 14 October 2026: "delete the
   white bar at the bottom"); the sky already runs up under the bar, so the screen's own height is exact */
.sxd-sky.is-open{min-height:100vh;min-height:100svh}
.sxd-sky.is-open .dor6-in.a1.dfr-centre{min-height:100vh;min-height:100svh}
.sxd-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* the field: white, square, the words in Larken ink, Search in tweed inside it, on the same centre as the label */
.sxd-box{position:relative;display:flex;align-items:center;width:min(860px,100%);height:76px;margin:20px auto 0;padding:0 8px 0 28px;background:#FFFFF7;color:#414042;text-align:left}
.sxd-in-box{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:#414042;padding:0;-webkit-appearance:none;appearance:none;
  font:400 min(30px, 28px + (30px - 28px) * 0.6)/1.2 var(--face,'Larken',Georgia,serif)}
.sxd-in-box::placeholder{color:#414042;opacity:.5}
.sxd-in-box::-webkit-search-cancel-button{display:none}
.sxd-go{flex:0 0 auto;height:60px;padding:0 30px;border:0;background:#682114;color:#F9F5EE;cursor:pointer;font:500 15px/1 var(--sans,'Jost',sans-serif);letter-spacing:.04em}
.sxd-go:hover{background:#4F180E}
.sxd-drop{color:#414042;top:100%;left:0;right:0}
.sxd-drop a{border-bottom:0;padding:13px 0;font:400 19px/1.3 var(--serif,'Lora',Georgia,serif)}
.sxd-drop a span{font:500 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.sxd-box.is-busy::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:30%;background:#C08C3D;animation:sq-sweep 1.1s ease-in-out infinite}
.sxd-starts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:28px auto 0;max-width:1100px}
.sxd-start{background:none;border:0;padding:0;cursor:pointer;color:#fff;font:400 18px/1.4 var(--serif,'Lora',Georgia,serif);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.55)}
.sxd-start:hover{text-decoration-color:#fff}
.sxd-wait{margin:24px 0 0;font:400 20px/1.45 var(--serif,'Lora',Georgia,serif);color:#fff;opacity:.9}
.sxd-film{position:absolute;left:var(--dor6-edge,33px);bottom:28px;z-index:2;font:400 18px/1.2 var(--face,'Larken',Georgia,serif);color:#fff}

/* the answer's sky: the sentence alone, New search in its corner */
.sxd-sky:not(.is-open){min-height:min(52vh,520px)}
.sxd-sky:not(.is-open) .dor6-in.a1.dfr-centre{min-height:min(52vh,520px)}
.sxd-h .sxd-word.is-on{text-decoration-color:currentColor}
/* New search: the sky's own white outline button, under the sentence (14 October 2026) */
.dor6-in.a1.dfr-centre .sxd-new{display:inline-flex;align-items:center;justify-content:center;margin:30px auto 0;height:52px;padding:0 30px;text-decoration:none;background:#FFFFF7;color:#414042;border:1px solid #FFFFF7;font:500 15px/1 var(--sans,'Jost',sans-serif);letter-spacing:.03em}
.dor6-in.a1.dfr-centre .sxd-new:hover{background:#682114;border-color:#682114;color:#F9F5EE}

/* under the sky: one paper ground, one left edge */
.sxd-body{background:var(--paper);padding:40px var(--dor6-edge,33px) 72px;color:#414042}
/* the tabs centred and Filter beside them, one row (14 October 2026: "you can center these tabs") */
.sxd-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 34px}
.sxd-tabs{justify-content:center !important;padding:0 !important;margin:0;min-width:0}
.sxd-filter{flex:0 0 auto;height:46px;padding:0 24px;background:none;border:1px solid #414042;color:#414042;cursor:pointer;font:500 14px/1 var(--sans,'Jost',sans-serif);letter-spacing:.04em}
.sxd-filter:hover,.sxd-filter.is-on{background:#414042;color:#FFFFF7}
.sxd-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px 40px;max-width:1100px;margin:26px auto 0;padding:30px 32px 24px;background:#F2EEE6;text-align:left}
.sxd-filters .sxd-k{margin-bottom:12px}
.sxd-filters .sxd-pop-foot{grid-column:1/-1;margin-top:0}
.sxd-pop-row button.is-on{background:#414042;border-color:#414042;color:#FFFFF7}
.sxd-tabs button.on{color:#414042}
.sxd-adds{display:flex;flex-wrap:wrap;gap:6px 24px;margin:16px 0 0;padding:0}
.sxd-add{background:none;border:0;padding:0;cursor:pointer;color:#414042;opacity:.78;font:400 17px/1.4 var(--serif,'Lora',Georgia,serif)}
.sxd-add::before{content:'+ '}
.sxd-add.is-plain::before{content:''}
.sxd-add:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.sxd-part{margin-top:44px}
.sxd-k{margin:0 0 16px;font:500 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.2em;text-transform:uppercase;color:#414042}
.sxd-body .dor6-wall.sxd-wall{padding:0;background:none}
.sxd-more{display:block;margin:26px 0 0;padding:0;background:none;border:0;cursor:pointer;color:#414042;font:500 12px/1 var(--sans,'Jost',sans-serif);letter-spacing:.18em;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px}
.sxd-close{margin:64px 0 0}
.sxd-close h2{margin:0 0 6px;font:400 min(32px, 28px + (32px - 28px) * 0.6)/1.15 var(--face,'Larken',Georgia,serif);color:#414042}
.sxd-close p{margin:0;font:400 17px/1.5 var(--serif,'Lora',Georgia,serif);color:rgba(65,64,66,.75)}
.sxd-close + .sxd-part{margin-top:22px}
.sxd-none{margin-top:20px}
.sxd-none h2{margin:0 0 8px;font:400 32px/1.15 var(--face,'Larken',Georgia,serif)}
.sxd-none p{margin:0;font:400 18px/1.5 var(--serif,'Lora',Georgia,serif)}
.sxd-desk{margin:64px 0 0;font:400 17px/1.5 var(--serif,'Lora',Georgia,serif);color:rgba(65,64,66,.8)}
.sxd-desk a{color:#414042;text-decoration:underline;text-underline-offset:5px}
.sxd-page.is-busy .sxd-body{opacity:.2;pointer-events:none;transition:opacity .15s}

/* a part of the sentence, open */
.sxd-pop{position:absolute;z-index:6;left:50%;bottom:28px;transform:translateX(-50%);width:min(780px,92vw);background:#FFFFF7;color:#414042;padding:22px 26px 18px;text-align:left;box-shadow:0 24px 60px rgba(20,16,12,.35)}
.sxd-pop-k{margin:0 0 12px;font:500 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.2em;text-transform:uppercase}
.sxd-pop-row{display:flex;flex-wrap:wrap;gap:8px}
.sxd-pop-row button{background:none;border:1px solid rgba(65,64,66,.45);color:#414042;cursor:pointer;padding:10px 14px;font:400 17px/1.2 var(--serif,'Lora',Georgia,serif)}
.sxd-pop-row button:hover{background:#414042;border-color:#414042;color:#FFFFF7}
.sxd-pop-town input{width:100%;margin:0 0 14px;padding:6px 0 10px;background:none;border:0;border-bottom:2px solid #414042;outline:none;color:#414042;font:400 26px/1.2 var(--face,'Larken',Georgia,serif)}
.sxd-pop-foot{display:flex;gap:22px;margin-top:16px}
.sxd-pop-foot button{background:none;border:0;padding:0;cursor:pointer;color:#414042;font:400 16px/1.4 var(--serif,'Lora',Georgia,serif);text-decoration:underline;text-underline-offset:5px}
/* the opening's heading: the hero pages' lp-h1 (Larken, its size), on one line where the screen allows */
.lp-page .dor6-in.a1 h1.sxd-title{font-size:min(clamp(34px,3.85vw,80px), 28px + (clamp(34px,3.85vw,80px) - 28px) * 0.6);max-width:none;margin:0 0 clamp(22px,3vh,34px);text-align:center}
@media (max-width:760px){.lp-page .dor6-in.a1 h1.sxd-title{max-width:11em;margin-bottom:20px}}

/* THE GLIDE (14 October 2026: "should be supper smooth and seamliess"). A dark ground behind every photograph and film,
   so nothing white shows while one loads; the sky's height eased between the answer and the whole screen; the
   photograph, the sentence and the box faded in; the results rising in and stepping away. */
.sxd-sky{background:#24211D;transition:min-height .65s cubic-bezier(.22,.8,.24,1)}
.sxd-sky .dor6-in.a1.dfr-centre{transition:min-height .65s cubic-bezier(.22,.8,.24,1)}
.sxd-sky.is-tall{min-height:100vh;min-height:100svh}
.sxd-sky.is-tall .dor6-in.a1.dfr-centre{min-height:100vh;min-height:100svh}
.sxd-still,.sxd-sky > video{animation:sxd-fade .7s ease both}
.sxd-swap{width:100%;display:flex;flex-direction:column;align-items:center;animation:sxd-fade .45s ease both}
.sxd-body{animation:sxd-rise .6s cubic-bezier(.22,.8,.24,1) both;transition:opacity .3s ease,transform .3s ease}
.sxd-body.is-away,.sxd-page.is-busy .sxd-body.is-away{animation:none;opacity:0;transform:translateY(18px);pointer-events:none}
.sxd-back{margin:26px auto 0;background:none;border:0;padding:0;cursor:pointer;color:#fff;font:400 16px/1.4 var(--serif,'Lora',Georgia,serif);text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.55)}
.sxd-back:hover{text-decoration-color:#fff}
.dor6-in.a1.dfr-centre button.sxd-new{cursor:pointer}
@keyframes sxd-fade{from{opacity:0}to{opacity:1}}
@keyframes sxd-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sxd-sky,.sxd-sky .dor6-in.a1.dfr-centre,.sxd-body{transition:none}.sxd-still,.sxd-sky > video,.sxd-swap,.sxd-body{animation:none}}
@media (max-width:760px){
  .sxd-box{height:62px;padding:0 6px 0 16px}
  .sxd-in-box{font-size:21px}
  .sxd-go{height:50px;padding:0 16px;font-size:14px}
  .sxd-starts{gap:8px 18px;margin-top:22px}
  .sxd-start{font-size:16px}
  .sxd-body{padding:28px var(--dor6-edge,16px) 56px}
  .sxd-tabs button{font-size:22px}
  .sxd-adds{gap:4px 18px}
  .sxd-add{font-size:16px}
  .sxd-part{margin-top:32px}
  .sxd-pop{bottom:14px;padding:18px 18px 14px}
  .sxd-film{display:none}
  .sxd-row{gap:14px}
  .sxd-filters{padding:22px 18px 18px}
}
@media (prefers-reduced-motion:reduce){.sxd-box.is-busy::after{animation:none;width:100%}}

/* JOINING ONE QUESTION AT A TIME, /try/join (14 October 2026; pages/membership/join-flow.tsx). Days Out's asking
   (_days-try.css: the question, the outline choices, Go back) over the film of the newest issue being opened; what is
   ours here is the two memberships as paper cards, the issue covers, the details form and the check. Jack: "very easy to
   use ... should be super simple on mobile too". */
.mfl-step{max-width:1080px}
.mfl-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;width:100%;max-width:1000px;text-align:left}
.mfl-plan{all:unset;box-sizing:border-box;display:flex;flex-direction:column;background:#FFFFF7;color:#414042;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease}
.mfl-plan:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,12,9,.35)}
.mfl-plan:focus-visible{outline:2px solid #FFFFF7;outline-offset:4px}
.mfl-pic{display:block;aspect-ratio:2/1;overflow:hidden;background:#2B301D}
.mfl-pic img{display:block;width:100%;height:100%;object-fit:cover}
.mfl-body{display:flex;flex-direction:column;flex:1;padding:24px 28px 28px}
.mfl-head{font:400 28px/1.15 larken,Larken,Georgia,serif;color:#414042}
.mfl-price{margin:8px 0 18px;font:italic 400 16px/1.4 var(--serif,'Lora',Georgia,serif);color:rgba(65,64,66,.7)}
.mfl-price b{margin-right:6px;font:normal 400 min(40px, 28px + (40px - 28px) * 0.6)/1 larken,Larken,Georgia,serif;color:#414042;vertical-align:-4px}
.mfl-list{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.mfl-list span{position:relative;padding-left:26px;text-wrap:pretty;font:400 16px/1.45 var(--serif,'Lora',Georgia,serif);color:#414042}
.mfl-list span::before{content:"\2713";position:absolute;left:0;top:0;color:#2B301D;font-weight:600}
.mfl-list span.is-print::before{color:#C08C3D}
.mfl-choose{margin-top:auto;display:flex;align-items:center;justify-content:center;height:56px;background:#682114;color:#F9F5EE;
  font:500 15px/1 var(--sans,'Jost',sans-serif);letter-spacing:.04em;transition:background .2s ease}
.mfl-plan:hover .mfl-choose{background:#4E180F}

.mfl-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.lp-page.do .mfl-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:22px 24px;text-align:center}
.mfl-opt b{font:400 28px/1.1 larken,Larken,Georgia,serif}
.mfl-opt span{font:400 18px/1.3 var(--serif,'Lora',Georgia,serif)}
.mfl-opt small{max-width:24em;font:400 14px/1.45 var(--serif,'Lora',Georgia,serif);opacity:.8}

.mfl-issues{display:flex;justify-content:center;gap:clamp(18px,3vw,40px);width:100%}
.mfl-issue{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:clamp(150px,20vw,250px);color:#fff;cursor:pointer;text-align:center}
.mfl-cover{display:grid;place-items:center;width:100%;aspect-ratio:3/4;overflow:hidden;background:#2B301D;outline:3px solid transparent;outline-offset:5px;
  transition:outline-color .2s ease,transform .25s ease;box-shadow:0 14px 34px rgba(10,12,9,.4)}
.mfl-cover img{display:block;width:100%;height:100%;object-fit:cover}
.mfl-cover i{font:normal 400 min(clamp(64px,7vw,104px), 28px + (clamp(64px,7vw,104px) - 28px) * 0.6)/1 larken,Larken,Georgia,serif;color:#FFFFF7}
.mfl-cover.is-next{background:#2B301D}
.mfl-issue:hover .mfl-cover{transform:translateY(-3px)}
.mfl-issue:hover .mfl-cover,.mfl-issue.on .mfl-cover,.mfl-issue:focus-visible .mfl-cover{outline-color:#FFFFF7}
.mfl-issue b{margin-top:18px;font:400 22px/1.2 larken,Larken,Georgia,serif}
/* the line under the name only, never the cover (Jack, 14 October 2026: "remove the transparatne over the image cards") */
.mfl-issue .mfl-when{margin-top:6px;font:400 15px/1.4 var(--serif,'Lora',Georgia,serif);color:rgba(255,255,255,.85)}



@media (max-width:760px){
  .mfl-plans{grid-template-columns:minmax(0,1fr);gap:16px}
  .mfl-pic{aspect-ratio:5/2}
  .mfl-body{padding:20px 20px 22px}
  .mfl-head{font-size:24px}
  .mfl-price b{font-size:min(34px, 28px + (34px - 28px) * 0.6)}
  .mfl-list{gap:7px;margin-bottom:20px}
  .mfl-list span{font-size:15px}
  .mfl-two{grid-template-columns:minmax(0,1fr)}
  .lp-page.do .mfl-opt{min-height:0;padding:20px}
  .mfl-opt b{font-size:24px}
  .mfl-issue{width:calc(50% - 9px)}
  .mfl-issues{gap:18px}
  .mfl-issue b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.mfl-plan,.mfl-cover{transition:none}}

/* ONE SCREEN, NEVER A PAGE TO SCROLL (Jack, 14 October 2026: "possible to make it so scroll is disabled unless absolutly
   needed by a device or browser", "reduce size a little so every thign fits on the one page", "i feel like th boxes
   should be a little smaller anyway"). The page is the screen and does not move; a step that cannot fit (a short
   window, the two memberships on a phone) scrolls inside it, and only then. Everything a size down, and down again on
   a short screen, so a laptop at 1280 by 720 sees every step whole. */
html:has(.mfl-page),html:has(.mfl-page) body{overflow:hidden;overscroll-behavior:none}
.lp-page.do .mfl-sky.do-gen-on{height:100vh;height:100svh;min-height:0}
.lp-page.do .mfl-sky.do-gen-on .lp-centre{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:calc(var(--bar,76px) + clamp(10px,2.6vh,30px)) var(--edge) clamp(14px,2.6vh,30px)}
.lp-page.do .mfl-sky .lp-centre::-webkit-scrollbar{display:none}
.mfl-plans{max-width:860px;gap:18px}
.mfl-pic{aspect-ratio:5/2}
.mfl-body{padding:18px 24px 22px}
.mfl-head{font-size:24px}
.mfl-price{margin:6px 0 14px;font-size:15px}
.mfl-price b{font-size:min(34px, 28px + (34px - 28px) * 0.6)}
.mfl-list{gap:5px;margin-bottom:18px}
.mfl-list span{padding-left:24px;font-size:15px;line-height:1.4}
.mfl-choose{height:50px;font-size:14px}
.mfl-two{max-width:660px}
.lp-page.do .mfl-opt{min-height:116px;padding:18px 20px}
.mfl-opt b{font-size:24px}
.mfl-opt span{font-size:17px}
.mfl-issue{width:clamp(120px,min(17vw,27vh),210px)}
.mfl-issue b{margin-top:14px;font-size:20px}
@media (max-height:880px) and (min-width:761px){
  .mfl-pic{aspect-ratio:3/1}
  .lp-page.do .mfl-step .do-gen-sub{margin-bottom:18px}
}
@media (max-height:780px) and (min-width:761px){
  .mfl-pic{aspect-ratio:4/1}
  .mfl-body{padding:14px 22px 18px}
  .mfl-price{margin:4px 0 10px}
  .mfl-list{gap:3px;margin-bottom:14px}
  .mfl-list span{font-size:14.5px;line-height:1.35}
  .mfl-choose{height:46px}
  .lp-page.do .mfl-step .do-gen-q{margin-bottom:10px}
  .lp-page.do .mfl-step .do-gen-sub{margin:-4px 0 14px;font-size:17px}
}
@media (max-width:760px){
  /* on a phone the two memberships are words alone, so both are nearly in view at once */
  .mfl-pic{display:none}
  .mfl-body{padding:16px 18px 18px}
  .mfl-head{font-size:22px}
  .mfl-price b{font-size:30px}
  .mfl-list{gap:4px;margin-bottom:14px}
  .mfl-list span{font-size:14.5px}
  .mfl-choose{height:46px}
  .mfl-issue{width:calc(50% - 9px)}
}

/* /join from /try/join: the steps so far along the top, where "Your details" is (Jack, 14 October 2026: "shoudl somehow
   show a continuation or something, maybe where your details text is, have a think whats best"). The done ones ticked
   and each a way back; this one in ink and underlined; the card still to come, quiet. */
.mfl-trail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:0 0 clamp(14px,1.6vw,22px);padding:0;list-style:none;
  font:500 12px/1.4 var(--sans,'Jost',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:rgba(65,64,66,.5)}
.mfl-trail li{display:flex;align-items:center}
.mfl-trail li + li::before{content:"";width:22px;height:1px;margin:0 12px;background:rgba(65,64,66,.3)}
.mfl-trail li.is-done{color:#2B301D}
.mfl-trail li.is-done > *::before,.mfl-trail li.is-done:not(:has(a))::after{content:none}
.mfl-trail li.is-done a{color:inherit;text-decoration:none}
.mfl-trail li.is-done a::before{content:"\2713";margin-right:7px;color:#C08C3D;font-weight:600}
.mfl-trail li.is-done a:hover{text-decoration:underline;text-underline-offset:4px}
.mfl-trail li.is-on{color:#414042;text-decoration:underline;text-decoration-color:#682114;text-decoration-thickness:2px;text-underline-offset:6px}
@media (max-width:760px){
  .mfl-trail{gap:6px 16px;font-size:11px;letter-spacing:.1em}
  .mfl-trail li + li::before{display:none}
}
/* /join from the flow: its heading a sentence of what to do next, a size down under the steps, and one quiet line */
.mem-join .mem-join-h.mfl-ask{max-width:none;margin:0 0 8px;font-weight:400;font-size:min(clamp(26px,2.1vw,33px), 28px + (clamp(26px,2.1vw,33px) - 28px) * 0.6);line-height:1.2;letter-spacing:0}
.mfl-ask-sub{margin:0 0 clamp(24px,2.8vw,36px);font:400 17px/1.5 var(--serif,'Lora',Georgia,serif);color:rgba(65,64,66,.72)}