/* _place.css - HAND-WRITTEN, like _ours.css, _listing.css, _links.css,
   _square.css and _nearmap.css. Loaded through config(’design.extras’) on
   /listings/, after the page’s own sheet, so it only adds.

   The September 2026 listing, settled with Jack across 9 September and drawn
   at /design-2026/listing/whole.html (a place to stay) and
   /design-2026/listing/attraction.html (everything else).

   EVERYTHING IS SCOPED UNDER .p26, on the page’s own <main>. The deck’s class
   names are the plain ones - .hero, .rail, .reads, .intro - and four sheets
   already own those. Scoping is what lets the deck’s CSS come across as it
   stands instead of being renamed into something nobody can match up against
   the mock.

   The order of the page: the opening, a welcome, the write-up in one centred
   column, the photographs, two upright ones as a break, the filled boxes,
   the calendar (a stay only), and Location - which _nearmap.css dresses. */

/* ---- the opening ----
   The region above the name, the name, and beneath it the two facts the
   listing actually holds. */
/* The bar is glass and sits over the photograph, exactly as on the homepage,
   which pulls its own hero up under the bar with margin-top:calc(-1*var(--bar))
   in _home.css. The listing never did: the header kept its own 76px band of
   paper above the picture, so at rest the menu was Shell on near-white and
   could not be read at all. Same pull, same number, same token. */
.p26 .hero{position:relative;overflow:hidden;background:#2B301D;
  height:min(84vh,780px);margin-top:calc(-1*var(--bar))}
/* The photograph AND the film: a listing with a film of its own opens on it
   (App\Support\ListingFilm, 27 Sep), and a <video> left undressed here sits at its
   natural size with black beside it. One rule for both so they cannot drift. */
.p26 .hero img,.p26 .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Two washes, not one. The foot carries the name, as it always did. The
   head is new: the bar is glass over the photograph and its words are Shell,
   so on a bright picture - a pale ceiling, a white sky - the whole menu
   disappeared. A short wash at the top gives it something to sit on without
   darkening the photograph itself. */
.p26 .hero .sh{position:absolute;inset:0;background:
  linear-gradient(rgba(16,14,10,.5) 0,rgba(16,14,10,.22) 9%,rgba(16,14,10,0) 20%),
  linear-gradient(transparent 44%,rgba(16,14,10,.68))}
.p26 .hero .w{position:absolute;left:0;right:0;bottom:0;padding-bottom:clamp(26px,4.5vh,58px);color:var(--shell)}
.p26 .hero .rg{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(249,245,238,.78)}
.p26 .hero h1{font-family:var(--face);font-weight:400;font-size:min(clamp(32px,5vw,74px), 28px + (clamp(32px,5vw,74px) - 28px) * 0.6);line-height:1.02;
  letter-spacing:-.018em;margin:13px 0 0;color:var(--shell)}
.p26 .hero h1 em{font-style:italic}
.p26 .hero .cap{display:flex;flex-wrap:wrap;font-family:var(--sans);font-size:14.5px;margin-top:16px}
.p26 .hero .cap span{color:var(--shell)}
.p26 .hero .cap span + span::before{content:"\00b7";margin:0 12px;color:rgba(249,245,238,.55)}
.p26 .hero .acts{display:flex;gap:10px;margin-top:22px}
/* _bar.css gives .hero .btn Tweed words and a Tweed line, which is the paper
   treatment: on a photograph it comes out dark brown on dark stone and can
   barely be read. Its own comment says the line is Shell on a photograph, and
   that is what the square card already does. Said here for the opening. */
.p26 .hero .acts .btn,.p26 .hero .acts .btn.quiet{--hover-bg:var(--shell);--hover-color:var(--ink);
  color:var(--shell);background:transparent}

/* ---- the introductions ----
   The home page’s welcome, reused: a small label on the left margin and the
   paragraph beside it, in Larken at 28px. .wl-in, .wl-label and .wl-text are
   _welcome.css’s own; what is here is the spacing and the two type sizes.

   The label is on the paragraph’s CAP LINE, not its baseline - an 11px label
   baselined against 28px type still reads low, because almost all of it sits
   under the big type’s cap. 6px, measured. */
.p26 .intro{padding:clamp(78px,12vh,164px) 0 clamp(42px,6.5vh,86px)}
.p26 .intro .wl-label{margin-top:6px}
/* A fixed width, not a max-width: the grid centres the column, so a short
   paragraph would otherwise start further right than a long one. */
.p26 .intro .wl-text{width:46ch;max-width:100%;min-height:1px}
/* On a phone the one column was 1fr, whose floor is its content, so the 46ch
   text made it 634px on a 375 screen (24 Sep). A zero floor lets max-width
   bite. Not width:min(46ch,100%): that shrank a short line to its own width
   and moved it off the column’s edge (the Designer, measured, 24 Sep). */
@media(max-width:1180px){.p26 .intro .wl-in{grid-template-columns:minmax(0,1fr)}}
.p26 .intro .sum{margin:0}
.p26 .intro .rest{font-family:var(--serif);font-weight:400;font-size:17.5px;line-height:1.72;
  color:var(--ink-75);margin:1.1em 0 0}
.p26 .intro .rest p + p{margin-top:1.1em}
.p26 .intro + section{padding-top:0}

/* ---- the write-up ----
   One centred column, and it shares the introductions’ measure exactly. `ch`
   is measured in the element’s own font, so the measure sits on a wrapper
   carrying Larken at 28px and the serif body inside it inherits the width
   without inheriting the type. */
/* top and bottom only: the shorthand set the sides to 0 and took the .in gutter away, so on a phone the write-up ran to the screen edge (24 Sep) */
.p26 .reads{padding-top:0;padding-bottom:clamp(50px,7vh,96px)}
.p26 .reads .col{font-family:var(--face);font-weight:300;font-size:28px;max-width:46ch;margin:0 auto}
.p26 .reads .body{font-family:var(--serif);font-size:19px;line-height:1.74}
.p26 .reads .body p{margin:0 0 1.3em}

/* ---- the photographs, the full width of the page ----
   Jack, 9 September. The one block that deliberately leaves the column every
   other block sits on, because the photographs are what the page is for. */
.p26 .rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:20px}
.p26 .rail-head .n{font-family:var(--sans);font-size:12.5px;color:var(--ink-55)}
/* The row, 10 September, after the slider on forty.framer.website that
   Jack sent: "implement it exactly as the listing page slider ... but in
   our version its square edges and clikcing on them opens up the lightroom.
   make it exact same size but all images are the same height".

   The reference, measured at 1440: cards 459 wide, 24 apart, edge to edge
   with no gutter, no snap, no scrollbar, no arrows, the track cloned once
   and moving itself, so a card is always cut at each edge. Two card shapes
   in the same row, 459x581 and 459x459 - which is the one thing he asked us
   not to copy, so every card here is 459x581, the tall one.

   Ours was 389 wide, 4 apart, snapped, with two arrows. What changed: the
   size, the gap, the snap off, the arrows away, and the row moves. The
   corners were already square and clicking already opened the lightbox.

   The measure is a clamp, not the flat 459, so a narrow window gets the
   reference’s own narrow card (253) instead of one card and no room: at
   1440 the clamp resolves to exactly 459. The height is an aspect-ratio for
   the same reason - 459/581 to three places is the reference’s 0.790, and
   holding a ratio rather than a height is what keeps every photograph the
   same shape at every width.

   The whole sheet is at /design-2026/listing-slider/, with the tuner. */
.p26 .reel{position:relative}
/* Every property _shared.css .rail sets, said again here, whether it is
   changing or not. It sets scroll-snap-type, scroll-padding-left and a
   negative margin; the first draft of this rule simply stopped declaring
   the snap and _shared.css kept it, so the row went on snapping under a
   design that has no snap points. A component rule you half-override wins
   the other half. */
/* 24 at 1440 and 16 at 375, which is what the reference runs at each end:
   clamp resolves to 24.48 then 24 at 1440, and 6.4 then 16 at 375. */
.p26 .reel .rail{display:flex;gap:clamp(16px,1.7vw,24px);overflow-x:auto;
  margin:0;padding:0;scrollbar-width:none;touch-action:pan-y;cursor:grab;
  scroll-snap-type:none;scroll-padding-left:0}
.p26 .reel .rail::-webkit-scrollbar{display:none}
.p26 .reel .rail.drag{cursor:grabbing}
.p26 .reel .rail button{flex:0 0 auto;width:clamp(253px,32vw,459px);aspect-ratio:459/581;
  border:0;padding:0;background:var(--stone);overflow:hidden;cursor:pointer}
/* Nothing happens under the pointer (Jack, 10 September). The port arrived
   with the site’s usual .8s scale on hover, and on a row that is already
   moving it reads as a second motion arguing with the first. No transition
   either, so there is nothing left to hold still for reduced motion - the
   component reads that query itself and simply never starts the row. */
.p26 .reel .rail img{width:100%;height:100%;object-fit:cover;display:block}
.p26 .reel .rail button:focus-visible{outline:2px solid var(--august);outline-offset:-3px}

/* Two upright photographs as a break between sections, on the canvas. */
.p26 .pair2{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:1400px;
  margin:clamp(20px,3vh,44px) auto;padding:0 var(--edge)}
.p26 .pair2 figure{margin:0;aspect-ratio:5/4;overflow:hidden;background:var(--stone)}
.p26 .pair2 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.p26 .pair2 figure:hover img{transform:scale(1.03)}
@media(max-width:700px){.p26 .pair2{grid-template-columns:1fr}}

/* ---- the filled boxes, on the reading column ---- */
.p26 .colw{font-family:var(--face);font-weight:300;font-size:28px;max-width:46ch;margin:0 auto}
/* One height for every box (24 Sep): a label on two lines made its row taller than the rest, and the grid read as uneven. */
.p26 .b-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-auto-rows:1fr;gap:12px}
.p26 .b-fill div{background:var(--oat);padding:22px 24px;font-family:var(--serif);font-size:16px}
.p26 .boxes{padding:0 0 clamp(78px,12vh,158px)}

/* One gap where two sections meet.

   .boxes pads 12vh below and .intro pads 12vh above, so a grid of amenities
   and the paragraph about them - the same subject - sat 259px apart at 1080,
   four times over on a single listing. The block above gives up its bottom
   padding when one of these follows it; the one below keeps its own, so the
   air between them is what a single section asks for rather than two. */
.p26 .boxes:has(+ .intro),.p26 .boxes:has(+ .wl),
.p26 .cal:has(+ .intro),.p26 .cal:has(+ .wl){padding-bottom:0}

/* And the same between the bands, which is the whole foot of a listing.
   Location pads 118.8px below at 1080 and whatever follows pads 108 or 129.6
   above, so the six places near a listing sat 248px from the next heading.

   Only a band with no ground of its own: where a band paints itself - the
   forest maker’s band, the calendar on oat - the padding is inside the colour
   and taking it away would set the words on the edge of the block. */
/* Not before Location: its own introduction pads far less than a section
   does, so giving up the padding above it left the guide card touching the
   word LOCATION. */
.p26 .band:not(.stone):not(.forest):has(+ .band:not(.led)),
.p26 .band:not(.stone):not(.forest):has(+ .wl),
.p26 .band:not(.stone):not(.forest):has(+ .intro),
.p26 .band:not(.stone):not(.forest):has(+ .boxes){padding-bottom:0}

/* ---- when it is free, on the real page ----
   Ground OAT and the chosen nights BRACKEN, off the swatch deck at
   /design-2026/listing/calendar.html. Bracken’s one job in the palette is
   "anything with a date", which is what a chosen night is; it is not yet a
   token in _bar.css so it is said in full.

   A free night is the lightest thing in the section because it is the thing
   to press; taken and hover are the oat carried 12-13% toward peat. */
.p26 #availability{background:var(--oat);
  --bracken:#C08C3D;
  --bracken-soft:rgb(192,140,61);
  --oat-12:rgb(219,215,208);
  --oat-13:rgb(217,213,206)}
.p26 #availability .days button{background:var(--paper)}
.p26 #availability .days button:hover{background:var(--oat-12)}
.p26 #availability .days .pad{background:none}
.p26 #availability .days .past,
.p26 #availability .days .booked{background:var(--oat-13);color:rgba(65,64,66,.4)}
.p26 #availability .days .booked{text-decoration:line-through;text-decoration-thickness:1px}
.p26 #availability .days .in{background:var(--bracken-soft);color:var(--shell)}
.p26 #availability .days .from,
.p26 #availability .days .to{background:var(--bracken);color:var(--shell)}
.p26 #availability .days .from:hover,
.p26 #availability .days .to:hover,
.p26 #availability .days .in:hover{background:var(--bracken)}
/* The month’s own arrows, on oat rather than on stone. */
.p26 #availability .cal .mh .sq button:hover{background:var(--paper)}

/* ---- the air around it ----
   The mock gives this band the full band padding; on the page it had lost
   both ends. `.p26 .intro + section` above takes the top off every section
   that follows an introduction, and `_welcome.css`’s `:has(+ .wl)` takes the
   bottom off anything a label block follows. Neither was written for a band
   that changes ground, and between them the calendar sat flush against its
   own stone edge. Jack, 10 September: "not enough space at the top".

   The same expression _shared.css gives .band, not a number read off a
   screenshot, so the two cannot drift apart. */
.p26 #availability{padding-top:clamp(64px,10vh,120px);
  padding-bottom:clamp(64px,10vh,120px)}

/* ---- when it is free, in the deck’s own markup ----
   Ground OAT and the chosen nights BRACKEN, both off the swatch deck at
   /design-2026/listing/calendar.html (Jack, 9 September). Bracken’s one job
   in the palette is "anything with a date", which is what a chosen night is.
   It is not yet a token in _bar.css, so it is said in full here.

   The wrapper is .calin, NOT .mid - .mid is already the class on the days
   between the two chosen ones, and naming both the same made every
   in-between day inherit the wrapper’s display:flex and lose its cell. */
.p26 .cal{padding:0 0 clamp(78px,12vh,160px);background:var(--oat);
  --bracken:#C08C3D;
  --bracken-soft:rgb(192,140,61);
  --oat-12:rgb(219,215,208);
  --oat-13:rgb(217,213,206)}
.p26 .calin{max-width:1020px;margin:0 auto;display:flex;align-items:flex-start;
  gap:clamp(10px,2vw,26px);justify-content:center}
.p26 .cal .step{width:46px;height:46px;flex:0 0 auto;margin-top:2px;border:1px solid var(--ink-20);
  background:var(--paper);cursor:pointer;display:grid;place-items:center;color:var(--ink);
  transition:background .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease)}
.p26 .cal .step:hover:not(:disabled){background:var(--forest);border-color:var(--forest);color:var(--paper)}
.p26 .cal .step:disabled{opacity:.24;cursor:default}
.p26 .cal .step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.p26 .months{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,64px)}
@media(max-width:760px){.p26 .months{grid-template-columns:1fr}}
.p26 .mo h4{font-family:var(--face);font-weight:400;font-size:21px;letter-spacing:-.008em;margin:0 0 18px}
.p26 .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.p26 .dow span{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-35);text-align:center}
.p26 .days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.p26 .days button{aspect-ratio:1;border:0;background:var(--paper);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:14px;padding:0;
  transition:background .18s var(--ease),color .18s var(--ease)}
.p26 .days button:hover:not(:disabled){background:var(--oat-12)}
.p26 .days button.gone{background:var(--oat-13);color:rgba(65,64,66,.4);cursor:not-allowed;
  text-decoration:line-through;text-decoration-thickness:1px}
.p26 .days button.pad{background:none;cursor:default;pointer-events:none}
.p26 .days button.mid{background:var(--bracken-soft);color:var(--shell)}
.p26 .days button.end{background:var(--bracken);color:var(--shell)}
.p26 .days button.mid:hover,.p26 .days button.end:hover{background:var(--bracken)}

/* ---- the region guide ----
   One guide, in a row _stay.css builds for two: the card sat on the left with
   half the canvas empty beside it. The listing only ever has the one, so on
   its own it takes the row - and a wider crop with it, or the row’s width
   would carry the card’s 1.24 aspect down to 1,040px tall. */
.p26 .guides > .guide:only-child{grid-column:1/-1;aspect-ratio:2.6}
@media(max-width:700px){.p26 .guides > .guide:only-child{aspect-ratio:var(--wide)}}

/* ---- the details band ----
   _listing.css places .keys in the second column outright, so where a listing
   has no practical paragraph the facts sat on the right of a full-width band
   with 933px of empty stone beside them. Calton Hill’s whole band read
   Good to know / Children welcome, hard against the right-hand edge. Alone,
   they start where everything else on the page starts. */
.p26 .ledge .keys:only-child{grid-column:1}

/* ---- one photograph, where there is no gallery ----
   Two photographs or fewer and the rail is not drawn: a rail of one put a
   single 4:5 card against the left edge of the window with 1,480px of paper
   beside it. In its place, one wide picture on the canvas.

   `.plate` and `.ph.wide` are _article.css’s names for the same thing, and a
   listing does not load that sheet, so the rule is said here rather than a
   new name invented for it. */
.p26 .plate{max-width:1400px;margin:0 auto;padding:0 var(--edge)}
.p26 .plate .ph.wide{display:block;width:100%;aspect-ratio:16/9;background:var(--stone-2)}
.p26 .plate img{width:100%;height:100%;object-fit:cover;display:block}
/* --wide is 1337/1080, the card’s ratio and not a landscape one, and with the
   photograph asking for the full height the aspect resolved off the height:
   847px of picture in a 1,284px canvas. 16/9 is near the opening’s own 1.83,
   so the one photograph and the one above it read as the same page. */

/* Whose photographs, when they are Google’s. Google’s terms want the
   photographer named beside the photograph, and until 22 September 2026
   the name was printed only in the lightbox. One quiet line in the small
   caps the page already uses for its labels, under the row and the plate. */
/* On the page column (.in in _shared.css: 1400 centred, --edge each side), because the row above it runs to the edges. */
.p26 .reel + .credits, .p26 .plate + .credits{max-width:1400px;margin:14px auto 0;padding:0 var(--edge);font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .credits a{color:inherit;text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px}
.p26 .credits a:hover{color:var(--ink)}

/* The golf map on a stay page (24 Sep): _lodge.css’s .btn carries flex:1 for the calendar panel’s
   stacked buttons, and inside the map’s bar that stretched Directions across the row. The map’s
   buttons keep their own width, as on the golf page. */
.p26 .gl-sm .btn{flex:0 0 auto}

/* The section labels over the words (24 Sep). Jack: "the Location headings and the headings that
   are aligned left, we changed on golf one, can you make it all match". The golf listing keeps its
   labels over the words with data-labels="above" (_golfl.css, one of its four tuner settings); the
   stay page now sets the same, and the rule lives here, where every listing page loads it. Only
   where the introduction has its two columns: under 1181px it is one column already. */
@media (min-width: 1181px){
.p26[data-labels="above"] .wl-in > .wl-label{grid-column:2;grid-row:1;margin:0 0 16px}
.p26[data-labels="above"] .wl-in > .wl-text{grid-column:2;grid-row:2}
}

/* ---- the stay page, refined (24 Sep) ----
   Jack: "the boxes could be better designed eg amenities boxes, or some fine adjust ments to make
   it look better ... there is spacing issues" (the write-up hard against the photograph row). */

/* The write-up under the photograph row: the same air as under an introduction, where it had none
   (every listing had the fault; .reads takes padding-top:0 for the introduction above it). */
.p26 section:has(> .reel) + .reads{padding-top:clamp(42px,6.5vh,86px)}

/* The boxes with their drawings (Boxes icons, the places to stay): paper with a hairline edge, the
   drawing above the name, every box the same height as the tallest in its row. */
.p26 .b-fill.b-ic{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.p26 .b-fill.b-ic > div{display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  background:transparent;border:1px solid var(--stone-2,#D8D1CB);padding:18px 18px 16px;min-height:112px;
  font:400 16px/1.35 var(--serif);color:var(--ink)}
.p26 .b-fill.b-ic svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
.p26 .b-fill.b-ic .b-ic-none{display:block;width:26px;height:26px}
@media(max-width:560px){.p26 .b-fill.b-ic{grid-template-columns:repeat(2,minmax(0,1fr))}.p26 .b-fill.b-ic > div{min-height:100px}}
/* The picture you can look into straight after the write-up: one gap between them, the picture’s own
   (the two paddings together were 139px at 1080, twice the rhythm of the page). */
.p26 .reads:has(+ .gl-look){padding-bottom:0}

/* ---- What the owners say (stay-owners.tsx). Jack, 24 September 2026: "build 1 - 4
   please", and "a section just highligting some key places thats close to the
   accommodation something cool and nicely designed". The line is the itinerary’s
   (the register’s "The line", A7: dashed like a route on a map, 3px, dash 8 gap 6,
   stone-2), and a stop’s time of day is set as its hour, large and faint. Every
   section sits flush on the label above it; the next label brings the space. */

/* a line from our interview with them */
.p26 .ow{margin:clamp(64px,10vh,130px) 0 0;padding:clamp(72px,11vh,140px) 0;background:var(--forest);color:var(--on-forest)}
.p26 .ow-fig{margin:0}
.p26 .ow-q{margin:0;font:300 min(clamp(30px,2.9vw,46px), 28px + (clamp(30px,2.9vw,46px) - 28px) * 0.6)/1.18 var(--face);letter-spacing:-.012em;color:#fff;text-wrap:balance;text-indent:-.4em;quotes:"\201C" "\201D"}
.p26 .ow-q::before{content:open-quote}
.p26 .ow-q::after{content:close-quote}
.p26 .ow-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:28px 0 0;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-forest-55)}
.p26 .ow-who::before{content:"";width:40px;height:1px;background:var(--on-forest-55)}
.p26 .ow-go{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* the house next door */
.p26 .pr{padding:0}
.p26 .pr-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--stone);color:inherit;text-decoration:none}
.p26 .pr-pic{display:block;position:relative;overflow:hidden;min-height:300px;background:var(--stone-2)}
.p26 .pr-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.p26 .pr-card:hover .pr-pic img{transform:scale(1.035)}
.p26 .pr-words{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(26px,3vw,44px)}
.p26 .pr-far{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .pr-name{font:300 min(clamp(28px,2.4vw,36px), 28px + (clamp(28px,2.4vw,36px) - 28px) * 0.6)/1.1 var(--face);color:var(--ink)}
.p26 .pr-line{font:400 16px/1.55 var(--serif);color:var(--ink-75)}
.p26 .pr-go{margin-top:10px;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-underline-offset:5px}

/* close by: a route from the door, the nearest first, inside Where it is (between its
   words and the map). Jack, 24 Sep: "would prefer everything aligned and smilar length
   of text", "arrows here wo we can add more places", and of it and the map as two
   sections, "they dont align well, or dont work together": so one left edge with the
   map’s buttons, the map list’s 3:4 photographs, every name and distance on one line. */
.p26 .cb{padding:0 0 clamp(46px,7vh,90px);--g:clamp(16px,1.6vw,24px);--per:4}
.p26 .cb-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 30px}
.p26 .cb-k{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.p26 .cb-say{font:italic 400 17px/1.4 var(--serif);color:var(--ink-75)}
.p26 .cb-arrs{display:flex;gap:10px;margin-left:auto}
.p26 .cb-arr{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .25s,color .25s}
.p26 .cb-arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.p26 .cb-arr:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.p26 .cb-arr:disabled{opacity:.28;cursor:default}
.p26 .cb-arr:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.p26 .cb-row{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:0 var(--g);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.p26 .cb-row::-webkit-scrollbar{display:none}
.p26 .cb-row > li{position:relative;min-width:0;display:flex;
  flex:0 0 calc((100% - (var(--per) - 1) * var(--g)) / var(--per));scroll-snap-align:start}
/* The chain is gone. A dotted line with rings says "stops on a journey, in order", and the first ring
   filled in said "you are here". These are neighbours, not a route (Jack, 27 Sep). */
/* The distance may sit on one line; a name may not be clipped to one. Three of five names on Arbikie
   read "Dunninald Castle and G..." (Jack, 27 Sep). */
.p26 .cb-far,.p26 .cb-how{white-space:nowrap}
/* The foot: how far, on a hairline, pushed to the bottom of the card so every card in the row ends on
   the same rule however long its words are. */
.p26 .cb-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--stone-2)}
.p26 .cb-far{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.p26 .cb-how{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .cb-card{display:flex;flex-direction:column;width:100%;color:inherit;text-decoration:none}
.p26 .cb-pic{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--stone);margin:0 0 16px}
.p26 .cb-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.p26 a.cb-card:hover .cb-pic img{transform:scale(1.04)}
/* Close by, tidied (27 Sep): the name is the biggest thing on the card, not the mileage. */
.p26 .cb-name{display:block;margin:0 0 7px;font:400 21px/1.24 var(--face);letter-spacing:-.005em;
  color:var(--ink)}
.p26 a.cb-card .cb-name{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .3s}
.p26 a.cb-card:hover .cb-name{text-decoration-color:var(--ink-35)}
.p26 .cb-line{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin:0 0 14px;font:400 15px/1.55 var(--serif);color:var(--ink-75)}
@media (max-width:1240px){.p26 .cb{--per:3}}
@media (max-width:760px){.p26 .cb{--per:1.6}.p26 .cb-say{flex-basis:100%;order:3}}
@media (max-width:480px){.p26 .cb{--per:1.3}}

/* their perfect day: the itinerary’s line, down the page */
.p26 .od{padding:0}
.p26 .od-list{list-style:none;margin:0;padding:0}
.p26 .od-stop{position:relative;display:grid;grid-template-columns:200px 15px minmax(0,1fr);gap:0 28px;padding:0 0 46px}
.p26 .od-stop::before{content:"";position:absolute;left:calc(200px + 28px + 6px);top:18px;bottom:-12px;width:3px;background:repeating-linear-gradient(180deg,var(--stone-2) 0 8px,transparent 8px 14px)}
.p26 .od-stop:last-child{padding-bottom:0}
.p26 .od-stop:last-child::before{display:none}
.p26 .od-when{text-align:right;font:300 min(clamp(26px,2.2vw,34px), 28px + (clamp(26px,2.2vw,34px) - 28px) * 0.6)/1.05 var(--face);letter-spacing:-.01em;color:var(--ink-35)}
.p26 .od-go{display:block;margin-top:10px;font:500 11px/1.45 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .od-ring{position:relative;z-index:1;box-sizing:border-box;width:15px;height:15px;margin-top:10px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
.p26 .od-body{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;align-items:start}
.p26 .od-pic{display:block;width:96px;height:96px;object-fit:cover;background:var(--stone)}
.p26 .od-pic.none{visibility:hidden}
.p26 .od-words{display:block;padding-top:4px}
.p26 .od-said{display:block;font:italic 400 clamp(18px,1.4vw,21px)/1.5 var(--serif);color:var(--ink)}
.p26 .od-also{display:inline-block;margin-top:10px;font:400 15px/1.5 var(--serif);color:var(--ink-75)}
.p26 a.od-also{text-decoration:underline;text-decoration-color:var(--ink-35);text-underline-offset:3px}
@media (max-width:760px){
.p26 .od-stop{grid-template-columns:15px minmax(0,1fr);gap:0 18px;padding-bottom:36px}
.p26 .od-stop::before{left:6px}
.p26 .od-when{grid-column:2;grid-row:1;text-align:left;margin:0 0 14px}
.p26 .od-ring{grid-column:1;grid-row:1;margin-top:8px}
.p26 .od-body{grid-column:2;grid-row:2;grid-template-columns:72px minmax(0,1fr);gap:16px}
.p26 .od-pic{width:72px;height:72px}
.p26 .od-pic.none{display:none}
.p26 .od-body:has(.od-pic.none){grid-template-columns:minmax(0,1fr)}
.p26 .pr-card{grid-template-columns:minmax(0,1fr)}
.p26 .pr-pic{min-height:0;aspect-ratio:4/3}
}

/* The magazine band, golf’s IssueBar, at the foot of the stay page (Jack, 24 Sep: "add this
   new advert in too"). _lodge.css stretches every .btn (flex:1, for the booking panel);
   here they keep golf’s own size. And the day before it ends with the page’s rhythm, not
   flush on the band. */
.p26 .gl-mag .btn{flex:0 0 auto;padding-left:26px;padding-right:26px}
.p26 .od:has(+ .gl-mag){padding-bottom:clamp(78px,12vh,158px)}

/* ---- The round of 24 Sep 2026 ("ok do all that please"). */

/* the quote on forest (Jack: "maybe the quote section sould be good with a darker background
   section"); the next label brings its own space, as after any band */


/* Good to know as facts: a list to scan */
.p26 .gk{padding:0}
.p26 .gk-list{margin:0;border-top:1px solid var(--stone-2)}
.p26 .gk-row{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:0 28px;padding:18px 0;border-bottom:1px solid var(--stone-2)}
.p26 .gk-row dt{font:500 11px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gk-row dd{margin:0;font:400 18px/1.5 var(--serif);color:var(--ink)}
@media (max-width:560px){.p26 .gk-row{grid-template-columns:minmax(0,1fr);gap:4px}}

/* the way here, under Where it is’s words */
.p26 .wh-get{margin:22px 0 0;font:400 17px/1.55 var(--serif);color:var(--ink-75)}
.p26 .wh-get span{display:block;margin:0 0 6px;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}

/* the perfect day onto a trip */
.p26 .od-add{margin:36px 0 0 calc(200px + 28px + 15px + 28px)}
.p26 .od-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.p26 .od-btn:hover{background:var(--ink);color:var(--paper)}
@media (max-width:760px){.p26 .od-add{margin-left:33px}}

/* what guests remember, the quiet line before the magazine band */
.p26 .gr{padding:clamp(78px,12vh,158px) 0}
.p26 .gr-k{display:block;margin:0 0 16px;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gr-t{margin:0;font:300 min(clamp(28px,2.6vw,40px), 28px + (clamp(28px,2.6vw,40px) - 28px) * 0.6)/1.2 var(--face);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.p26 .gr-who{display:block;margin:18px 0 0;font:italic 400 16px/1.4 var(--serif);color:var(--ink-55)}
.p26 .od:has(+ .gr){padding-bottom:0}

/* the page’s own menu, under the site bar once the booking row is gone */
.pn-mark{display:block;height:0}
.pn{position:fixed;left:0;right:0;top:var(--bar);z-index:40;background:var(--paper);border-bottom:1px solid var(--stone-2);transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .35s}
.pn.on{transform:none;opacity:1;pointer-events:auto}
.pn .in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px}
.pn-parts{display:flex;gap:4px clamp(14px,2vw,30px);flex-wrap:wrap}
.pn-parts button{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-55);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.pn-parts button:hover{color:var(--ink)}
.pn-parts button.here{color:var(--ink);border-bottom-color:var(--ink)}
.pn-book{display:inline-flex;align-items:center;min-height:38px;padding:0 20px;background:var(--forest);color:var(--on-forest);font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
@media (max-width:760px){.pn{display:none}}
/* the booking panel sticks below the page’s menu, not under it */
@media (min-width:761px){.p26 .pick{top:calc(var(--bar) + 56px + 24px)}}
/* When it is free: its label inside the band, on the calendar’s left edge, as Close by’s */
.p26 .av-k{display:block;margin:0 0 34px;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.p26 .gk:has(+ .band){padding-bottom:clamp(78px,12vh,158px)}
/* a label with no words over it sits close to what it labels, as Close by’s and the dates’ do */
.p26 .intro:has(+ .gk),.p26 .intro:has(+ .pr){padding-bottom:34px}
.p26 #availability .cal{padding-bottom:0}

/* ---- An estate: one page for a place with several houses (estate.tsx, estate-parts.tsx).
   Jack, 24 Sep 2026: "a listing for lindores overall", every house of it on each house,
   its experiences "within all the pages", and "a section which is about booking for groups". */

/* the houses as cards */
.p26 .eh{padding:0}
.p26 .eh-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.p26 .eh-card{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.p26 .eh-pic{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone);margin:0 0 18px}
.p26 .eh-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.p26 .eh-card:hover .eh-pic img{transform:scale(1.04)}
.p26 .eh-name{display:block;font:300 min(clamp(24px,2vw,30px), 28px + (clamp(24px,2vw,30px) - 28px) * 0.6)/1.1 var(--face);letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.p26 .eh-sleeps{display:block;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);margin:0 0 14px}
.p26 .eh-points{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--stone-2)}
.p26 .eh-points li{padding:9px 0;border-bottom:1px solid var(--stone-2);font:400 15px/1.4 var(--serif);color:var(--ink-75)}
.p26 .eh-free{margin-top:auto;font:500 11px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}
.p26 .eh-all{background:var(--forest);color:var(--on-forest);padding:clamp(24px,2.4vw,36px);justify-content:flex-end;min-height:100%}
.p26 .eh-all .eh-name{color:#fff}
.p26 .eh-all-k{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-forest-55);margin:0 0 12px}
.p26 .eh-all-t{font:400 16px/1.5 var(--serif);color:var(--on-forest);margin:0 0 22px}
.p26 .eh-go{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:underline;text-underline-offset:5px}
@media (max-width:1100px){.p26 .eh-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.p26 .eh-row{grid-template-columns:minmax(0,1fr)}}

/* the houses side by side */
.p26 .ec{padding:0}
.p26 .ec-wrap{overflow-x:auto}
.p26 .ec-t{width:100%;min-width:640px;border-collapse:collapse}
.p26 .ec-t th,.p26 .ec-t td{padding:16px 16px 16px 0;border-bottom:1px solid var(--stone-2);text-align:left;vertical-align:top}
.p26 .ec-t thead th{border-bottom:1px solid var(--ink);font:300 clamp(20px,1.6vw,24px)/1.15 var(--face);color:var(--ink)}
.p26 .ec-t thead th a{color:inherit;text-decoration:none}
.p26 .ec-t thead th a:hover{text-decoration:underline;text-underline-offset:4px}
.p26 .ec-t tbody th{width:18%;font:500 11px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .ec-t td{font:400 17px/1.45 var(--serif);color:var(--ink)}
.p26 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* booking for a group: one calendar for every house */
.p26 .gc{margin-top:clamp(78px,12vh,158px)}
.p26 .gc-k{display:block;margin:0 0 12px;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.p26 .gc-say{margin:0 0 26px;font:300 min(clamp(24px,2vw,30px), 28px + (clamp(24px,2vw,30px) - 28px) * 0.6)/1.25 var(--face);color:var(--ink);max-width:34ch}
.p26 .gc-pick{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}
.p26 .gc-pick button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 18px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;font:400 16px/1.2 var(--serif);text-align:left;transition:background .2s,color .2s}
.p26 .gc-pick button span{font:500 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.p26 .gc-pick button.on{background:var(--ink);color:var(--paper)}
.p26 .gc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.7fr);gap:clamp(40px,6vw,110px);align-items:start}
.p26 .gc-cal{max-width:560px}
.p26 .gc-mh{display:flex;align-items:center;justify-content:space-between;margin:0 0 24px}
.p26 .gc-mh h3{margin:0;font:400 min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6)/1 var(--face);color:var(--ink)}
.p26 .gc-mh h3 span{font:italic 400 .75em var(--serif);color:var(--ink-55);margin-left:8px}
.p26 .gc-arrs{display:flex;gap:4px}
.p26 .gc-arrs button{width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink);cursor:pointer}
.p26 .gc-arrs button:disabled{opacity:.25;cursor:default}
.p26 .gc-arrs svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.p26 .gc-dow,.p26 .gc-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.p26 .gc-dow span{text-align:center;font:500 10px/2 var(--sans);letter-spacing:.14em;color:var(--ink-55)}
.p26 .gc-days > span{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:400 14px/1 var(--sans)}
.p26 .gc-days > span.pad{background:transparent}
.p26 .gc-days > span.past{color:var(--ink-35)}
.p26 .gc-days > span.free{background:var(--paper);color:var(--ink)}
.p26 .gc-days > span.some{background:color-mix(in srgb,var(--paper) 55%,var(--stone-2));color:var(--ink-75)}
.p26 .gc-days > span.taken{background:var(--stone-2);color:var(--ink-55)}
.p26 .gc-days > span.taken b{text-decoration:line-through}
.p26 .gc-days b{font-weight:400}
.p26 .gc-dots{display:flex;gap:3px}
.p26 .gc-dots em{width:5px;height:5px;border-radius:50%;border:1px solid var(--ink-35)}
.p26 .gc-dots em.y{background:var(--forest);border-color:var(--forest)}
.p26 .gc-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0;font:500 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gc-key span::before{content:"";display:inline-block;width:12px;height:12px;margin:0 8px -2px 0}
.p26 .gc-key .free::before{background:var(--paper)}
.p26 .gc-key .some::before{background:color-mix(in srgb,var(--paper) 55%,var(--stone-2))}
.p26 .gc-key .taken::before{background:var(--stone-2)}
.p26 .gc-side{background:var(--forest);color:var(--on-forest);padding:clamp(28px,3.2vw,44px) clamp(28px,3.2vw,48px)}
.p26 .gc-side h3{margin:0 0 10px;font:400 min(clamp(24px,2.2vw,30px), 28px + (clamp(24px,2.2vw,30px) - 28px) * 0.6)/1.15 var(--face);color:#fff}
.p26 .gc-sl{margin:0 0 24px;font:italic 400 17px/1.4 var(--serif);color:var(--on-forest)}
.p26 .gc-lab{display:block;margin:0 0 10px;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-forest-55)}
.p26 .gc-runs{list-style:none;margin:0 0 24px;padding:0}
.p26 .gc-runs li{padding:10px 0;border-bottom:1px solid rgba(241,237,232,.18);font:400 18px/1.3 var(--serif);color:#fff}
.p26 .gc-none{margin:0 0 24px;font:400 16px/1.5 var(--serif);color:var(--on-forest)}
.p26 .gc-sets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.p26 .gc-sets button{padding:8px 14px;border:1px solid rgba(241,237,232,.45);background:transparent;color:var(--on-forest);cursor:pointer;font:500 10px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.p26 .gc-sets button:hover{border-color:#fff;color:#fff}
.p26 .gc-book{display:flex;align-items:center;justify-content:center;min-height:50px;border:1px solid var(--on-forest);color:#fff;text-decoration:none;font:500 12px/1 var(--sans);letter-spacing:.06em}
.p26 .gc-book:hover{background:var(--on-forest);color:var(--forest)}
.p26 .gc-fine{margin:16px 0 0;font:italic 400 14px/1.4 var(--serif);color:var(--on-forest-55)}
@media (max-width:900px){.p26 .gc-grid{grid-template-columns:minmax(0,1fr)}.p26 .gc-cal{max-width:none}}

/* the estate’s own experiences */
.p26 .xp{padding:0}
.p26 .xp-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.p26 .xp-card{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.p26 .xp-pic{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--stone);margin:0 0 18px}
.p26 .xp-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.p26 a.xp-card:hover .xp-pic img{transform:scale(1.04)}
.p26 .xp-k{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);margin:0 0 8px}
.p26 .xp-name{font:300 min(clamp(24px,2vw,30px), 28px + (clamp(24px,2vw,30px) - 28px) * 0.6)/1.1 var(--face);letter-spacing:-.01em;color:var(--ink);margin:0 0 10px}
.p26 .xp-line{font:400 16px/1.55 var(--serif);color:var(--ink-75)}
.p26 .xp-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin:clamp(36px,5vh,56px) 0 0;border-top:1px solid var(--stone-2)}
.p26 .xp-more > div{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:0 20px;padding:16px 0;border-bottom:1px solid var(--stone-2)}
.p26 .xp-more dt{font:500 11px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .xp-more dd{margin:0;font:400 16px/1.5 var(--serif);color:var(--ink)}
.p26 .xp-go{display:inline-block;margin:28px 0 0;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-underline-offset:5px}
@media (max-width:900px){.p26 .xp-row{grid-template-columns:minmax(0,1fr)}.p26 .xp-more{grid-template-columns:minmax(0,1fr)}}

/* awards */
.p26 .aw{padding:clamp(78px,12vh,158px) 0}
.p26 .aw-k{display:block;margin:0 0 14px;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .aw-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--stone-2)}
.p26 .aw-list li{padding:14px 0;border-bottom:1px solid var(--stone-2);font:400 18px/1.45 var(--serif);color:var(--ink)}
.p26 .od:has(+ .aw){padding-bottom:0}
.p26 .intro:has(+ .eh),.p26 .intro:has(+ .ec),.p26 .intro:has(+ .xp){padding-bottom:clamp(34px,5vh,60px)}
/* the side-by-side table’s facts, on each house card */
.p26 .eh-facts{margin:0 0 18px}
.p26 .eh-facts > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--stone-2)}
.p26 .eh-facts dt{font:500 10px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .eh-facts dd{margin:0;font:400 15px/1.4 var(--serif);color:var(--ink);text-align:right}
.p26 .eh-points{margin-bottom:0}
/* every card in the row shares its rows, so the facts and the free dates line up across it */
@supports (grid-template-rows:subgrid){
.p26 .eh-row{grid-auto-rows:auto}
.p26 .eh-card:not(.eh-all){display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
.p26 .eh-card:not(.eh-all) .eh-points{align-self:start}
.p26 .eh-card:not(.eh-all) .eh-free{align-self:end}
.p26 .eh-all{grid-row:span 6}
}

/* ---- Booking for a group (estate-group.tsx): V1 on a computer, P2 on a phone. Jack, 24 Sep 2026: "ok cool
   code this in page so i can see it all working", from /design-2026/estate-group-cal.html. The calendar is the
   house page’s own (.cal, _lodge.css); the buttons the site’s own (.btn, .btn.quiet); gp- for the rest. */
.p26 .gp{margin-top:clamp(78px,12vh,158px)}
.p26 .gp-k{display:block;margin:0 0 12px;font:600 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.p26 .gp > .in > .gp-k{color:var(--ink)}
.p26 .gp-top{display:flex;flex-wrap:wrap;align-items:center;gap:22px 48px;margin:0 0 34px}
.p26 .gp-dial{display:flex;align-items:center;gap:14px}
.p26 .gp-dial button{width:46px;height:46px;border:1px solid var(--ink);background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink);padding:0;transition:background .2s,color .2s}
.p26 .gp-dial button:hover{background:var(--ink);color:var(--paper)}
.p26 .gp-dial svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.p26 .gp-v{font:300 min(56px, 28px + (56px - 28px) * 0.6)/1 var(--face);min-width:1.3ch;text-align:center;color:var(--ink)}
.p26 .gp-w{font:italic 19px var(--serif);color:var(--ink-75)}
.p26 .gp-said{flex:1 1 420px;max-width:64ch;margin:0;padding-left:20px;border-left:2px solid var(--forest);font:400 clamp(18px,1.45vw,21px)/1.6 var(--serif);color:var(--ink)}
.p26 .gp-body{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.p26 .gp-when{background:var(--paper);padding:clamp(20px,2.4vw,32px)}
.p26 .gp .cal{max-width:none;padding:0}
.p26 .gp .cal .mh{margin-bottom:18px}
.p26 .gp .cal .days button{font-size:15px;border:0;cursor:pointer;padding:0;background:var(--stone)}
.p26 .gp .cal .days button:hover{background:#fff}
.p26 .gp .cal .days .pad{visibility:hidden}
.p26 .gp .cal .days .past,.p26 .gp .cal .days .booked{background:transparent}
.p26 .gp .cal .days .booked{text-decoration:line-through}
.p26 .gp .cal .days .in{background:var(--bracken-soft,#C08C3D);color:#FBF9F6}
.p26 .gp .cal .days .from,.p26 .gp .cal .days .to{background:var(--bracken,#C08C3D);color:#FBF9F6}
.p26 .gp .cal .mh .sq button:disabled{opacity:.25;cursor:default}
.p26 .gp-msg{margin:12px 0 16px;font:italic 15px/1.4 var(--serif);color:var(--ink-75);min-height:1.4em}
.p26 .gp-btns{display:flex;flex-wrap:wrap;gap:8px}
.p26 .gp .btn{flex:0 0 auto;min-height:42px;padding:0 16px}
.p26 .gp .btn.quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.p26 .gp .btn.quiet:hover,.p26 .gp .btn.quiet.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.p26 .gp .gp-b .btn:not(.quiet){background:var(--forest);color:var(--paper);border:1px solid var(--forest)}
.p26 .gp .gp-b .btn:not(.quiet):hover{background:var(--moss);border-color:var(--moss)}
.p26 .gp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,230px));gap:16px}
.p26 .gp-card{transition:opacity .45s}
.p26 .gp-ph{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--stone-2);text-decoration:none}
.p26 .gp-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .45s,transform .9s var(--ease)}
.p26 .gp-ph:hover img{transform:scale(1.03)}
.p26 .gp-big{position:absolute;top:6px;right:12px;font:300 min(58px, 28px + (58px - 28px) * 0.6)/1 var(--face);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
/* what the number counts, in the card label's small caps (Jack, 25 Sep: "might be confusing, should it maybe say people") */
.p26 .gp-big{display:flex;flex-direction:column;align-items:flex-end}
.p26 .gp-big small{font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-top:5px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.p26 .gp-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 12px 12px;background:linear-gradient(transparent,rgba(20,20,18,.8));color:#fff}
.p26 .gp-cap b{display:block;font:400 19px/1.15 var(--face);margin:0 0 6px;color:#fff}
.p26 .gp-fit{display:inline-block;font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:5px 7px;border:1px solid rgba(255,255,255,.75);color:#fff}
.p26 .gp-card.lit .gp-fit{background:var(--forest);border-color:var(--forest)}
.p26 .gp-card.off{opacity:.45}
.p26 .gp-card.off img{filter:grayscale(1)}
.p26 .gp-b{padding:10px 0 0}
.p26 .gp-note{display:block;margin:0 0 8px;font:600 9.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}
.p26 .gp-card.off .gp-note{color:var(--ink-55)}
.p26 .gp-b .btn{min-height:36px;padding:0 12px;font-size:9.5px;letter-spacing:.14em}
.p26 .gp-sm{font:400 14px/1.4 var(--serif);color:var(--ink-55)}
.p26 .gp-bar,.p26 .gp-sheet{display:none}
@media (min-width:1300px){.p26 .gp-grid{grid-template-columns:repeat(2,minmax(0,250px))}}

/* a phone, P2: the houses first; the dates held at the foot of the section, opening a sheet from the bottom */
@media (max-width:760px){
.p26 .gp-top{flex-direction:column;align-items:stretch;gap:16px;margin:0 0 20px}
.p26 .gp-v{font-size:min(44px, 28px + (44px - 28px) * 0.6)}
.p26 .gp-dial button{width:42px;height:42px}
.p26 .gp-said{flex:none;font-size:17px;padding-left:14px}
.p26 .gp-body{display:block}
.p26 .gp-when{display:none}
.p26 .gp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p26 .gp-big{font-size:min(44px, 28px + (44px - 28px) * 0.6)}
.p26 .gp-cap b{font-size:16px}
.p26 .gp-fit{font-size:8.5px;padding:4px 6px}
.p26 .gp-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;margin:20px calc(-1 * var(--edge)) 0;padding:12px var(--edge);background:var(--forest);color:var(--on-forest)}
.p26 .gp-bar .gp-k{color:rgba(241,237,232,.6);margin:0}
.p26 .gp-bar b{display:block;font:400 17px/1.2 var(--serif);color:#fff}
.p26 .gp-bar .btn{margin-left:auto;background:var(--on-forest);color:var(--forest);border:1px solid var(--on-forest)}
.p26 .gp-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:88vh;overflow-y:auto;background:var(--paper);padding:18px var(--edge) 24px;box-shadow:0 -20px 40px rgba(65,64,66,.2);transform:translateY(105%);transition:transform .45s var(--ease);visibility:hidden}
.p26 .gp-sheet.open{transform:none;visibility:visible}
.p26 .gp-shead{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.p26 .gp-shead b{font:400 20px/1 var(--face)}
}
@media (prefers-reduced-motion:reduce){.p26 .gp-card,.p26 .gp-sheet,.p26 .gp-ph img{transition:none}}
.p26 .gp{padding:clamp(56px,8vh,100px) 0}
.p26 .gp .cal{background:transparent}
/* the bar’s button must win over the band’s own .btn rules (_bar.css) */
.p26 .gp .in .gp-bar .btn{background:var(--on-forest);color:var(--forest);border:1px solid var(--on-forest);min-height:40px;padding:0 14px}
.p26 .gp .in .gp-bar .btn:hover{background:#fff;border-color:#fff}

/* ---- A sight: the general listing rebuilt (sight.tsx). Jack, 24 Sep 2026: "finalise the general listing,
   eg an attraction ... old man of storr". The stay page's parts carry most of it; these are its own:
   dy- Did you know, the full window; rd- the day it is on. (Seasons, the guidebook band and the plain sources came off, 24 Sep.) */

/* stay cards on a sight: every name holds two lines, so the three lines under it start level */
.p26 .eh-even .eh-name{min-height:2lh}
@media (max-width:560px){.p26 .eh-even .eh-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}.p26 .eh-even .eh-row::-webkit-scrollbar{display:none}.p26 .eh-even .eh-card{scroll-snap-align:start}}

/* Did you know, the full window (Jack, 24 Sep: "full screen section with interesting facts - maybe you
   can swipe left to right to get more"). One fact a screen over our photograph; a real scroll track with
   snap points, the bar at the foot stepping it. */
.p26 .dy{position:relative;margin:clamp(56px,8vh,110px) 0 0;background:#2B301D;color:#fff}
.p26 .dy-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:0}
.p26 .dy-track::-webkit-scrollbar{display:none}
.p26 .dy-track:focus-visible{box-shadow:inset 0 0 0 2px #fff}
.p26 .dy-s{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;height:clamp(560px,88vh,940px);display:flex;align-items:flex-end;overflow:hidden}
.p26 .dy-s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p26 .dy-s::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,14,12,.74) 0%,rgba(12,14,12,.4) 42%,rgba(12,14,12,0) 72%),linear-gradient(0deg,rgba(12,14,12,.66) 0%,rgba(12,14,12,0) 48%)}
.p26 .dy-s .in{position:relative;z-index:1;width:100%;padding-bottom:clamp(128px,17vh,180px)}
.p26 .dy-t{max-width:760px}
.p26 .dy-k{display:block;margin:0 0 18px;font:600 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.p26 .dy h3{margin:0;max-width:15ch;font:300 min(clamp(40px,5vw,86px), 28px + (clamp(40px,5vw,86px) - 28px) * 0.6)/1.02 var(--face);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p26 .dy p{margin:22px 0 0;max-width:42ch;font:400 clamp(17px,1.25vw,21px)/1.55 var(--serif);color:rgba(255,255,255,.9)}
.p26 .dy .btn{flex:0 0 auto;display:inline-flex;margin-top:28px;min-height:50px;padding:0 26px;background:#fff;color:var(--ink);border:1px solid #fff}
.p26 .dy .btn:hover{background:transparent;color:#fff}
.p26 .dy-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 0 clamp(28px,4.5vh,48px);pointer-events:none}
.p26 .dy-bar .in{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.p26 .dy-bar .in>*{pointer-events:auto}
.p26 .dy-n{font:300 28px/1 var(--face);font-variant-numeric:tabular-nums;white-space:nowrap}
.p26 .dy-n i{font-style:normal;color:rgba(255,255,255,.55)}
.p26 .dy-dots{flex:1;display:flex;gap:6px;max-width:560px}
.p26 .dy-dots button{flex:1;height:18px;padding:8px 0;border:0;background:rgba(255,255,255,.34);background-clip:content-box;cursor:pointer}
.p26 .dy-dots button.on{background-color:#fff}
.p26 .dy-arr{display:flex;gap:8px;margin-left:auto}
.p26 .dy-arr button{width:52px;height:52px;border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;font:400 20px/1 var(--sans);cursor:pointer}
.p26 .dy-arr button:hover:not(:disabled){background:#fff;color:var(--ink)}
.p26 .dy-arr button:disabled{opacity:.3;cursor:default}
.p26 .dy button:focus-visible,.p26 .dy a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:760px){
  .p26 .dy-s{height:min(86svh,720px)}
  .p26 .dy-s::after{background:linear-gradient(0deg,rgba(12,14,12,.86) 0%,rgba(12,14,12,.5) 50%,rgba(12,14,12,.08) 100%)}
  .p26 .dy h3{font-size:min(clamp(32px,9vw,42px), 28px + (clamp(32px,9vw,42px) - 28px) * 0.6)}
  .p26 .dy-s .in{padding-bottom:112px}
  .p26 .dy-dots{display:none}
  .p26 .dy-arr button{width:46px;height:46px}
}

/* the day it is on, drawn as the day (Jack, 24 Sep: the line of names was "a bit boring") */
.p26 .rd{padding:clamp(72px,10vh,130px) 0 clamp(64px,9vh,120px)}
.p26 .rd-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(24px,4vw,64px);align-items:end;margin:0 0 clamp(28px,4vh,48px)}
.p26 .rd-k{display:block;margin:0 0 14px;font:600 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.p26 .rd h2{margin:0;font:300 min(clamp(34px,3.6vw,58px), 28px + (clamp(34px,3.6vw,58px) - 28px) * 0.6)/1.04 var(--face);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.p26 .rd h2 a{color:inherit;text-decoration:none}
.p26 .rd h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.p26 .rd-head p{margin:0;font:400 17px/1.6 var(--serif);color:var(--ink-75)}
.p26 .rd-chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(14px,1.4vw,22px)}
.p26 .rd-stop{min-width:0}
.p26 .rd-card{display:block;color:inherit;text-decoration:none}
.p26 .rd-pic{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.p26 .rd-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.p26 a.rd-card:hover .rd-pic img{transform:scale(1.04)}
.p26 .rd-pic em{position:absolute;left:10px;top:10px;padding:7px 9px;background:var(--paper);color:var(--ink);font:600 10px/1 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase}
.p26 .rd-stop.here .rd-pic{outline:2px solid var(--ink);outline-offset:4px}
.p26 .rd-no{display:flex;gap:10px;margin:16px 0 5px;font:600 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55);font-variant-numeric:tabular-nums}
.p26 .rd-no i{font-style:normal;color:var(--forest)}
.p26 .rd-card b{display:block;min-height:2lh;font:400 clamp(18px,1.3vw,22px)/1.2 var(--face);color:var(--ink)}
.p26 a.rd-card:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.p26 .rd-leg{position:relative;display:block;margin-top:14px;padding-top:12px;font:italic 14px/1.4 var(--serif);color:var(--ink-55)}
.p26 .rd-leg::before{content:"";position:absolute;left:0;right:calc(-1 * clamp(14px,1.4vw,22px));top:0;border-top:1px solid var(--ink-35,rgba(0,0,0,.3))}
.p26 .rd-leg::after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;background:var(--ink)}
.p26 .rd-stop:last-child .rd-leg::before{right:0}
.p26 .rd-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,4.5vh,52px)}
.p26 .rd .btn,.p26 .rd .addtrip{flex:0 0 auto;min-height:46px;padding:0 20px}
.p26 .rd .btn.quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.p26 .rd .btn.quiet:hover{background:var(--ink);color:var(--paper)}
@media (max-width:1000px){
  .p26 .rd-head{grid-template-columns:minmax(0,1fr)}
  .p26 .rd-chain{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(180px,34vw,260px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
  .p26 .rd-chain::-webkit-scrollbar{display:none}
  .p26 .rd-stop{scroll-snap-align:start}
}
@media (max-width:560px){.p26 .rd-chain{grid-auto-columns:62%}}
@media (prefers-reduced-motion:reduce){.p26 .rd-pic img{transition:none}}
.p26 .rd .btn:not(.quiet){background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.p26 .rd .btn:not(.quiet):hover{background:transparent;color:var(--ink)}

/* Jack, 25 Sep 2026, on /listings/vennel-steps. (1) The sticky bar keeps Save and Add to trip, not a link out.
   (2) Further reading fills the column: as many columns as there are groups, not three for two.
   (3) The stays row needs room before a dark band comes after it.
   (4) The stay cards' dates are one short button, not two lines of small capitals. */
.pn-acts{display:inline-flex;align-items:center;gap:10px}
.pn-q{display:inline-flex;align-items:center;min-height:38px;padding:0 18px;border:1px solid var(--ink-35);background:transparent;color:var(--ink);font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.pn-q:hover{border-color:var(--ink)}
.pn-acts .pn-book{border:0;cursor:pointer}
/* further reading, redrawn the same day: one list in the heading's centred column, two across, a rule above */
.p26 .intro.gl-more{padding:0 0 clamp(64px,9vh,110px)}
.p26 .gl-more-one ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px);border-top:1px solid var(--ink)}
@media (max-width:760px){.p26 .gl-more-one ul{grid-template-columns:minmax(0,1fr)}}
.p26 .eh + .gl-mag,.p26 .eh + section:not(.intro):not(.wl){margin-top:clamp(64px,9vh,110px)}
.p26 .eh-card:not(.eh-all) .eh-free{align-self:start;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;margin-top:14px;border:1px solid var(--forest);font:500 11px/1 var(--sans);letter-spacing:.12em;white-space:nowrap}
.p26 .eh-card:not(.eh-all):hover .eh-free{background:var(--forest);color:var(--on-forest)}
/* (5) the bar under the opening: Visit website, Save, Add to trip, left-aligned, no label (Jack, 25 Sep) */
.p26 .bkr-row.bkr-left{justify-content:flex-start}
.p26 .bkr-row.bkr-left .bkr-acts{margin-left:0}
/* (6) open now in the opening, and the week under Before you go (Jack, 25 Sep: open now on hero; google hours) */
.p26 .hero .opn{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:8px 14px 8px 12px;background:rgba(20,22,19,.42);border:1px solid rgba(241,237,232,.35);font:500 12px/1 var(--sans);letter-spacing:.08em;color:#fff;backdrop-filter:blur(4px)}
.p26 .hero .opn i{width:8px;height:8px;border-radius:50%;background:#414042}
.p26 .hero .opn.is-open i{background:#afa065;box-shadow:0 0 0 3px rgba(175,160,101,.25)}
.p26 .hero .opn b{font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.p26 .hero .opn span{opacity:.85}
.p26 .wkh-band{padding:0 0 clamp(42px,6.5vh,86px)}
.p26 .wkh{margin:0 auto;width:46ch;max-width:100%;font-size:28px}
.p26 .wkh div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 24px;padding:12px 0;border-top:1px solid var(--ink-20);font:400 17px/1.5 var(--serif)}
.p26 .wkh div:last-child{border-bottom:1px solid var(--ink-20)}
.p26 .wkh dt{font:500 11px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26 .wkh dd{margin:0}
.p26 .wkh .is-today dt,.p26 .wkh .is-today dd{color:var(--ink);font-weight:600}
/* An estate's Where it is on stone (Jack, 25 Sep: "how can we seperate the sections better it looks a bit busy"):
   the map band and the Close by rings take the stone instead of their own paper. */
.p26 .gl-around.stone .gl-smband{background:transparent}
/* The rings went with the chain (27 Sep); the stone ground has nothing left to tint. */
.p26 .gl-around.stone > section{background:transparent}
/* room under the farm cards before the stone of Where it is */
.p26 .xp:has(+ .gl-around.stone){padding-bottom:clamp(64px,9vh,110px)}


/* =========================================================================
   A READY-MADE ROUTE'S OWN PAGE (/try/itineraries/{slug}, pages/itineraries/route.tsx), 25 September 2026.
   The listing page's parts do most of it; these are the route's own: the day at a glance (the route on the
   footer's outline, beside the facts), the day on the itinerary line settled for the planner on 13 September
   (journey-days-37: a dot level with each stop, only the drive written between) in the site's colours and on
   one side so the words can be read, and the days that join it. iy- is the prefix, checked free.
   ========================================================================= */
.iy-label{font:600 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55);margin:0 0 18px}
/* who wrote it: a face in the opening, then the writer's own section, the portrait in the margin (313) and the words on the
   reading column (549), as the listing's Intro sets its label and its words */
.iy-by{display:flex;align-items:center;gap:12px;margin:18px 0 0;font:400 16px/1.3 var(--serif);color:rgba(249,245,238,.85)}
/* the opening dresses every img in it as its photograph (.p26 .hero img: absolute, the whole frame); the face undoes all of it */
.p26 .hero .iy-by img{position:static;inset:auto;width:40px;height:40px;max-width:none;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(249,245,238,.8)}
.iy-by b{font-weight:500;color:var(--shell)}
.iy-writer{padding:clamp(48px,6vw,80px) 0 clamp(24px,3vw,40px)}
.iy-writer .in > *{max-width:807px;margin-left:auto;margin-right:auto}
.iy-byline{display:flex;align-items:center;gap:12px;margin-bottom:24px;font:400 15px/1.3 var(--sans);color:var(--ink-55)}
.iy-byline img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.iy-byline a,.iy-byline b{color:var(--ink);font-weight:500;text-decoration:none}
.iy-byline a:hover{text-decoration:underline;text-decoration-color:var(--bracken);text-underline-offset:4px}
.iy-wsays{font:400 19px/1.65 var(--serif);color:var(--ink);margin-top:0;margin-bottom:16px}
.iy-more-by{background:var(--stone)}
.iy-byhead{display:flex;align-items:center;gap:18px}
.iy-byhead img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
/* the one question after Customise, in the prompt's shape (M5: one question on a dark band, a line, a field, a button) */
.iy-ask{background:var(--forest);color:var(--on-forest);text-align:center;padding:clamp(48px,6vw,72px) 0 clamp(40px,5vw,60px)}
.iy-ask h2{font:400 min(clamp(30px,3vw,42px), 28px + (clamp(30px,3vw,42px) - 28px) * 0.6)/1.1 var(--face);margin:0 0 12px}
.iy-ask p{font:400 16px/1.55 var(--serif);color:rgba(241,237,232,.72);margin:0 auto 26px;max-width:52ch}
.iy-ask form{display:flex;justify-content:center;max-width:560px;margin:0 auto}
.iy-ask input{flex:1;height:52px;border:0;padding:0 18px;font:400 18px/1 var(--face);background:var(--shell);color:var(--ink);border-radius:0}
/* the house button on a dark band, as .forest gives it: shell line and words, shell fill on hover (outranks .in .btn) */
.p26 .iy-ask .in .btn{height:52px;--hover-bg:var(--shell);--hover-color:var(--forest);color:var(--shell);border-color:var(--shell)}
.iy-later{margin-top:18px;background:none;border:0;cursor:pointer;font:400 14px/1 var(--sans);color:rgba(241,237,232,.72);text-decoration:underline;text-underline-offset:4px}
/* CUSTOMISE: your version's line under the bar, the edits on each stop, the place to add between stops */
.iy-yours{background:var(--stone);padding:16px 0}
.iy-yours .in{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.iy-yours p{margin:0;font:400 17px/1.4 var(--serif)}
.iy-yours b{font:400 20px/1.2 var(--face);font-weight:400}
.iy-status{margin-left:14px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.iy-ylinks{display:flex;gap:24px}
.iy-ylinks a,.iy-ylinks button,.iy-linkish{background:none;border:0;padding:0;cursor:pointer;font:500 14px/1 var(--sans);color:var(--tweed);text-decoration:underline;text-decoration-color:rgba(104,33,20,.3);text-underline-offset:4px}
.iy-how{max-width:807px;margin:-6px auto 30px;font:italic 400 16px/1.5 var(--serif);color:var(--ink-55)}
.iy-note{margin:14px 0 0;padding:12px 16px;background:var(--paper);font:italic 400 16px/1.5 var(--serif);color:var(--ink);max-width:56ch}
.iy-note span{display:block;font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--bracken);margin:0 0 6px}
.iy-acts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;align-items:center}
.iy-acts button{height:32px;padding:0 12px;background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);font:400 13px/1 var(--sans);color:var(--ink);cursor:pointer}
.iy-acts button:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--tweed);color:var(--tweed)}
.iy-acts button:disabled{opacity:.35;cursor:default}
.iy-mine{font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bracken);margin-right:6px}
.iy-stop.added .iy-dot{background:var(--paper);box-shadow:0 0 0 4px var(--shell),inset 0 0 0 3px var(--forest)}
.iy-notebox{margin:14px 0 0;max-width:56ch}
.iy-notebox textarea{width:100%;box-sizing:border-box;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);background:#fff;padding:12px 14px;font:400 16px/1.5 var(--serif);resize:vertical}
.iy-notebox p{display:flex;gap:16px;align-items:center;margin:10px 0 0}
.iy-notebox button{background:none;border:0;padding:0;cursor:pointer;font:500 14px/1 var(--sans);color:var(--ink-55)}
.iy-notebox .iy-keep{height:36px;padding:0 18px;background:var(--forest);color:var(--on-forest)}
/* the place to add: a plus on the line, then the choices open under it, in the page */
.iy-add{display:flex;align-items:center;gap:14px;margin:28px 0 0 -9px;background:none;border:0;padding:0;cursor:pointer;font:500 14px/1 var(--sans);color:var(--ink-55);position:relative;z-index:1}
.iy-add i{width:30px;height:30px;border-radius:50%;background:var(--forest);color:var(--on-forest);display:grid;place-items:center;font:400 20px/1 var(--sans);font-style:normal;box-shadow:0 0 0 4px var(--shell);transition:background .2s}
.iy-add:hover{color:var(--ink)}
.iy-add:hover i{background:var(--bracken)}
.iy-addhere{margin:24px 0 0 34px;background:#fff;padding:22px 24px 24px;box-shadow:0 1px 0 rgba(65,64,66,.04),0 12px 30px rgba(65,64,66,.07);position:relative;z-index:1}
.iy-addtop{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}
.iy-addtop p{margin:0;font:400 21px/1.2 var(--face)}
.iy-x{background:none;border:0;cursor:pointer;font:300 26px/1 var(--sans);color:var(--ink-55)}
.iy-addtabs{display:flex;gap:26px;margin:0 0 16px}
.iy-addtabs button{background:none;border:0;padding:0 0 8px;cursor:pointer;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);border-bottom:2px solid transparent}
.iy-addtabs button.on{color:var(--ink);border-bottom-color:var(--bracken)}
.iy-find{width:100%;box-sizing:border-box;height:46px;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);padding:0 14px;font:400 16px/1 var(--serif);margin:0 0 14px}
.iy-picks{display:grid;gap:10px}
.iy-pick{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center}
.iy-ppic{width:72px;height:72px;background:var(--stone);overflow:hidden}
.iy-ppic img{width:100%;height:100%;object-fit:cover;display:block}
.iy-ptext b{display:block;font:400 18px/1.2 var(--face);font-weight:400}
.iy-ptext span{font:400 14px/1.3 var(--serif);color:var(--ink-55)}
.iy-padd{width:76px;height:32px;background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);font:400 13px/1 var(--sans);cursor:pointer}
.iy-padd:hover{box-shadow:inset 0 0 0 1px var(--tweed);color:var(--tweed)}
.iy-none{margin:0;font:italic 400 15px/1.5 var(--serif);color:var(--ink-55)}
/* at a glance */
.iy-glance{padding:clamp(40px,5vw,72px) 0}
.iy-glance .in{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.iy-map{margin:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--stone)}
.iy-map svg{display:block;width:100%;height:auto;aspect-ratio:5/4}
.iy-land{fill:var(--stone-2)}
.iy-way{fill:none;stroke:var(--forest);stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1.6 1.2}
.iy-pin{fill:var(--forest);stroke:var(--shell)}
.iy-pin.end{fill:var(--bracken)}
.iy-n{fill:var(--on-forest);font-family:var(--sans);font-weight:600}
.iy-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px}
.iy-facts div{border-top:1px solid var(--stone-2);padding-top:12px}
.iy-facts dt{font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin:0 0 8px}
.iy-facts dd{margin:0;font:400 21px/1.3 var(--face);color:var(--ink)}
/* the day, on the line */
.iy-day{background:var(--shell);padding:clamp(72px,8vw,110px) 0}
/* the day stands on the listing page's reading column (Intro's: 807 wide, centred), so its edge is the words' edge above */
.iy-day .iy-label,.iy-line,.iy-end{max-width:807px;margin-left:auto;margin-right:auto}
.iy-end{padding-left:34px}
.iy-line{list-style:none;margin:0 auto;padding:0;position:relative}
/* the line starts at the first stop's dot, level with its photograph's middle, not above it (26 Sep audit) */
.iy-line::before{content:"";position:absolute;left:5px;top:calc(220px * .75 / 2);bottom:10px;width:2px;background:var(--stone-2)}
.iy-line:has(> .iyd-home:first-child)::before,.iy-line:has(> .iy-stop.shut:first-child)::before{top:10px}
.iy-stop{position:relative;padding:0 0 64px}
.iy-stop:last-child{padding-bottom:10px}
.iy-leg{margin:0 0 40px 34px;font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.iy-row{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 36px;padding-left:34px;align-items:start}
.iy-row.no-pic .iy-text{grid-column:1 / -1}
/* the dot sits on the line, level with the photograph's middle */
.iy-dot{position:absolute;left:0;top:calc(220px * .75 / 2 - 6px);width:12px;height:12px;border-radius:50%;background:var(--forest);box-shadow:0 0 0 4px var(--shell)}
.iy-stop:first-child .iy-dot,.iy-stop:last-child .iy-dot{background:var(--bracken)}
.iy-pic{aspect-ratio:4/3;background:var(--stone);overflow:hidden}
.iy-pic img{width:100%;height:100%;object-fit:cover;display:block}
.iy-hour{margin:0 0 6px;font:400 min(38px, 28px + (38px - 28px) * 0.6)/1 var(--face);letter-spacing:-.02em;color:var(--ink-20)}
.iy-text h3{margin:0;font:600 17px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.iy-text h3 a{color:inherit;text-decoration:none}
.iy-text h3 a:hover{text-decoration:underline;text-decoration-color:var(--bracken);text-underline-offset:4px}
.iy-kind{margin:6px 0 14px;font:400 16px/1.3 var(--face);color:var(--ink-55)}
.iy-words{margin:0 0 12px;font:400 17px/1.65 var(--serif);color:var(--ink-75);max-width:62ch}
.iy-more{display:inline-block;margin-top:4px;font:500 14px/1 var(--sans);color:var(--tweed);text-decoration:underline;text-decoration-color:rgba(104,33,20,.3);text-underline-offset:4px}
.iy-more:hover{text-decoration-color:var(--tweed)}
.iy-end{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
/* make it a weekend */
.iy-next{padding:clamp(72px,8vw,110px) 0}
.iy-next h2{font:400 min(clamp(28px,2.8vw,40px), 28px + (clamp(28px,2.8vw,40px) - 28px) * 0.6)/1.1 var(--face);margin:0 0 30px}
.iy-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
.iy-card{display:block;text-decoration:none;color:inherit}
.iy-cpic{display:block;aspect-ratio:3/4;background:var(--stone);overflow:hidden}
.iy-cpic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease,ease)}
.iy-card:hover .iy-cpic img{transform:scale(1.03)}
.iy-eye{display:block;margin:12px 0 6px;font:500 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-35)}
.iy-card b{display:block;font:400 20px/1.25 var(--face);font-weight:400}
@media (max-width:900px){
  .iy-glance .in{grid-template-columns:1fr}
  .iy-addhere{margin-left:0}
  .iy-yours .in{flex-direction:column;align-items:flex-start;gap:8px}
  .iy-wsays{font-size:17px}
  .iy-facts{grid-template-columns:1fr 1fr;gap:18px 20px}
  .iy-facts dd{font-size:18px}
  .iy-row{grid-template-columns:1fr;gap:14px 0}
  .iy-dot{top:calc((100vw - 32px - 34px) * .75 / 2 - 6px)}
  .iy-line::before{top:calc((100vw - 32px - 34px) * .75 / 2)}
  .iy-cards{grid-template-columns:1fr 1fr}
}
@media print{
  .site,.bkr,.pn,.iy-end,.eh,.iy-next,footer{display:none!important}
  .iy-day{background:none;padding:0}
}

/* =========================================================================
   YOUR DAY (Customise, 25 September 2026): the Desk's panel carrying the day's scenes (components/design/day-desk.tsx,
   the .dk shell from _desk.css), and your day's own simple page at /days/{token} (pages/itineraries/day.tsx). iyd- is
   the prefix, checked free.
   ========================================================================= */
/* every rule here stands after _desk.css's revert of every element inside .dk */
.dk.iyd .stage{gap:18px}
.dk.iyd .iyd-kick{font:600 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bracken);margin:0 0 10px}
.dk.iyd h2{font:400 clamp(24px,5.4cqi,32px)/1.15 var(--face);white-space:normal;max-width:none;margin:0 0 22px;color:var(--ink)}
.dk.iyd .iyd-q{display:block;margin:0 0 22px}
.dk.iyd .iyd-q > span{display:block;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin:0 0 10px}
.dk.iyd .iyd-q input,.dk.iyd .iyd-q textarea,.dk.iyd .iyd-other{width:100%;box-sizing:border-box;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);background:#fff;padding:12px 14px;font:400 17px/1.35 var(--serif);color:var(--ink);border-radius:0}
.dk.iyd .iyd-q input:focus,.dk.iyd .iyd-q textarea:focus,.dk.iyd .iyd-other:focus{outline:2px solid var(--august);outline-offset:1px}
.dk.iyd .iyd-row{display:flex;gap:10px;align-items:center}
.dk.iyd .iyd-row input{flex:1}
.dk.iyd .iyd-pill{flex:none;height:46px;padding:0 16px;background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);font:400 14px/1 var(--sans);color:var(--ink);cursor:pointer}
.dk.iyd .iyd-pill.on{background:var(--forest);color:var(--on-forest);box-shadow:none}
.dk.iyd .iyd-stays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 10px}
.dk.iyd .iyd-stay{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);padding:6px 10px 6px 6px;text-align:left;cursor:pointer}
.dk.iyd .iyd-stay.on{box-shadow:inset 0 0 0 2px var(--forest)}
.dk.iyd .iyd-spic{width:56px;height:56px;background:var(--stone);overflow:hidden}
.dk.iyd .iyd-spic img{width:100%;height:100%;object-fit:cover;display:block}
.dk.iyd .iyd-stay b{font:400 16px/1.2 var(--face);font-weight:400;color:var(--ink)}
.dk.iyd .iyd-fine{margin:8px 0 0;font:italic 400 14px/1.4 var(--serif);color:var(--ink-55)}
.dk.iyd .go{border:0;cursor:pointer}
.dk.iyd .go b{font-weight:400}
.dk.iyd .go:disabled{opacity:.6}
.dk.iyd .iyd-say{margin:0 0 22px;font:400 17px/1.6 var(--serif);color:var(--ink-75)}
.dk.iyd .iyd-links{margin:16px 0 0;display:flex;gap:22px;flex-wrap:wrap}
.dk.iyd .iyd-links a{font:500 14px/1 var(--sans);color:var(--tweed);text-decoration:underline;text-decoration-color:rgba(104,33,20,.3);text-underline-offset:4px}
.dk.iyd .iyd-shot{aspect-ratio:3/2;background:var(--stone);overflow:hidden;margin:0 0 18px}
.dk.iyd .iyd-shot img{width:100%;height:100%;object-fit:cover;display:block}
.dk.iyd .iyd-words{margin:0 0 6px;font:400 16px/1.6 var(--serif);color:var(--ink-75)}
.dk.iyd .iyd-two{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.dk.iyd .iyd-two button{height:40px;padding:0 16px;background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);font:400 14px/1 var(--sans);color:var(--ink);cursor:pointer}
.dk.iyd .iyd-two button:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--tweed);color:var(--tweed)}
.dk.iyd .iyd-two button:disabled{opacity:.35;cursor:default}
.dk.iyd .iyd-two .iyd-out{margin-left:auto}
.dk.iyd .iy-addtabs{display:flex;gap:26px;margin:0 0 16px}
.dk.iyd .iy-addtabs button{background:none;border:0;padding:0 0 8px;cursor:pointer;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);border-bottom:2px solid transparent}
.dk.iyd .iy-addtabs button.on{color:var(--ink);border-bottom-color:var(--bracken)}
.dk.iyd .iy-find{width:100%;box-sizing:border-box;height:46px;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);padding:0 14px;font:400 16px/1 var(--serif);margin:0 0 14px}
.dk.iyd .iy-picks{display:grid;gap:10px}
.dk.iyd .iy-pick{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center}
.dk.iyd .iy-ppic{width:72px;height:72px;background:var(--stone);overflow:hidden}
.dk.iyd .iy-ppic img{width:100%;height:100%;object-fit:cover;display:block}
.dk.iyd .iy-ptext b{display:block;font:400 18px/1.2 var(--face);font-weight:400}
.dk.iyd .iy-ptext span{font:400 14px/1.3 var(--serif);color:var(--ink-55)}
.dk.iyd .iy-padd{width:76px;height:32px;background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);font:400 13px/1 var(--sans);cursor:pointer}
.dk.iyd .iy-padd:hover{box-shadow:inset 0 0 0 1px var(--tweed);color:var(--tweed)}
.dk.iyd .iy-none{margin:0;font:italic 400 15px/1.5 var(--serif);color:var(--ink-55)}
.dk.iyd .iyd-make,.dk.iyd .iyd-done,.dk.iyd .iyd-stop,.dk.iyd .iyd-add{display:block}
.dk.iyd .iyd-stay b{display:block}
.dk.iyd .iyd-spic{display:block}
.dk.iyd .iy-ppic{display:block}
.dk.iyd .iy-ptext{display:block}
.dk.iyd .iy-ptext span{display:block}
.dk.iyd img{display:block;max-width:100%}
.dk.iyd .go span{display:inline}
/* your day's page: the top */
.iyd-top{padding:calc(var(--bar,76px) + clamp(40px,5vw,72px)) 0 clamp(36px,4vw,56px);background:var(--paper)}
.iyd-top .in > *{max-width:807px;margin-left:auto;margin-right:auto}
.iyd-trail{display:flex;gap:10px;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);margin-bottom:22px}
.iyd-trail a{color:var(--tweed);text-decoration:none}
.iyd-trail a:hover{text-decoration:underline;text-underline-offset:4px}
.iyd-top h1{font:400 min(clamp(40px,4.4vw,64px), 28px + (clamp(40px,4.4vw,64px) - 28px) * 0.6)/1.02 var(--face);letter-spacing:-.015em;margin-top:0;margin-bottom:12px;text-wrap:balance}
.iyd-said{font:italic 400 18px/1.5 var(--serif);color:var(--ink-75);margin-top:0;margin-bottom:0}
.iyd-said a{color:inherit;text-decoration:underline;text-decoration-color:var(--ink-20);text-underline-offset:4px}
.iyd-facts{display:flex;gap:40px;flex-wrap:wrap;margin-top:26px;margin-bottom:0}
.iyd-facts div{border-top:1px solid var(--stone-2);padding-top:10px;min-width:180px}
.iyd-facts dt{font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin:0 0 8px}
.iyd-facts dd{margin:0;font:400 20px/1.3 var(--face)}
.iyd-facts dd a{color:inherit;text-decoration:none}
.iyd-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:28px}
.iyd-acts a,.iyd-acts button{height:40px;padding:0 16px;display:inline-grid;place-items:center;background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);font:400 14px/1 var(--sans);color:var(--ink);text-decoration:none;cursor:pointer}
.iyd-acts a:hover,.iyd-acts button:hover{box-shadow:inset 0 0 0 1px var(--tweed);color:var(--tweed)}
.iyd-kept{margin-left:auto;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.iyd-them{margin-top:18px;font:italic 400 16px/1.5 var(--serif);color:var(--ink-55)}
.iyd-them a{color:var(--tweed)}
/* your day's page: the line, and a stop you can tap */
.iyd-day{padding-top:clamp(40px,4vw,60px);margin-top:28px}
.iyd-tap{cursor:pointer;transition:background .2s}
.iyd-tap:hover{background:rgba(255,255,255,.6)}
.iyd-tap:hover h3{text-decoration:underline;text-decoration-color:var(--bracken);text-underline-offset:4px}
.iyd-tap:focus-visible{outline:2px solid var(--august);outline-offset:4px}
.iyd-home .iy-row{display:block;padding-left:34px;min-height:24px}
.iyd-home .iy-dot{top:6px;background:var(--bracken)}
.iyd-hometext span{display:block;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin-bottom:6px}
.iyd-hometext b{font:400 22px/1.2 var(--face);font-weight:400}
.iyd-home{padding-bottom:40px}
.iyd-back{max-width:807px;margin:48px auto 0;display:flex;gap:14px;align-items:center;font:500 14px/1 var(--sans)}
.iyd-back a{color:var(--tweed);text-decoration:underline;text-decoration-color:rgba(104,33,20,.3);text-underline-offset:4px}
@media (max-width:900px){
  .iyd-stays{grid-template-columns:1fr}
  .iyd-kept{margin-left:0;flex-basis:100%}
}
@media print{.dk,.dk-veil,.iyd-acts,.iy-add,.iyd-back,.iy-how{display:none!important}}

/* your day's opening and bar (25 September): the listing's Opening and forest bar; the saved word on the forest, the basis
   line under it on paper, on the reading column */
.iyd-bar .bkr-row{justify-content:space-between;align-items:center}
.iyd-bar .iyd-kept{color:rgba(241,237,232,.62);margin-left:24px}
.iyd-basis{max-width:807px;margin:28px auto 0;padding:0 var(--edge);font:italic 400 16px/1.5 var(--serif);color:var(--ink-55)}
.iyd-basis a{color:var(--tweed);text-decoration:underline;text-decoration-color:rgba(104,33,20,.3);text-underline-offset:4px}

/* ------------------------------------------------------------------ the day turns, and the members' gate
   Added 25 September 2026, when the route page Jack passed was carried to all 107 itineraries. 104 are one
   day; three are not, and the line has to say where the day turns. Fifty are members', and the page shows a
   reader who is not one the first stop, then this, then the rest named and dimmed. */

/* where the day turns: the date rule across the line, the day's own name on it */
.iy-dayline{display:flex;align-items:center;gap:16px;margin:0 0 40px 34px;
  font:600 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--tweed)}
.iy-dayline:first-child{margin-top:0}
.iy-stop + .iy-stop .iy-dayline{margin-top:14px}
.iy-dayline b{font-weight:600;flex:none}
.iy-dayline i{display:block;height:1px;background:var(--stone-2);flex:1}
.iy-dayline i:first-child{flex:0 0 22px}

/* the gate, under the first stop */
.iy-gate{margin:26px 0 0;padding:26px 28px;background:var(--oat);border-top:2px solid var(--tweed);max-width:62ch}
.iy-gate-t{margin:0;font:400 23px/1.25 var(--face);color:var(--ink)}
.iy-gate-w{margin:10px 0 0;font:400 16px/1.6 var(--serif);color:var(--ink-75)}
.iy-gate-a{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:20px 0 0}
.iy-gate-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 26px;background:var(--tweed);color:var(--paper);
  font:500 14px/1 var(--sans);text-decoration:none;transition:background-color .25s var(--ease,ease)}
.iy-gate-btn:hover{background:var(--ink)}
.iy-gate-in{font:400 15px/1 var(--serif);color:var(--ink-55);text-decoration:underline;
  text-decoration-color:var(--stone-2);text-underline-offset:4px}
.iy-gate-in:hover{color:var(--ink)}

/* the stops behind it: the name and the hour, nothing else. The columns stay as they are above, so the
   names keep the words' own edge; the photograph simply takes no room, and the dot comes up to the name. */
.iy-stop.shut .iy-pic{visibility:hidden;aspect-ratio:auto;height:0}
.iy-stop.shut{padding-bottom:26px}
.iy-stop.shut .iy-dot{top:2px;width:8px;height:8px;background:var(--stone-2)}
.iy-stop.shut .iy-text h3{color:var(--ink-35)}
.iy-stop.shut .iy-kind{color:var(--ink-20);margin-bottom:0}
.iy-stop.shut .iy-hour{font-size:24px;color:var(--ink-20);margin-bottom:2px}

@media (max-width:900px){
  .iy-dayline{margin-left:0}
  .iy-gate{padding:22px 20px}
}

/* =========================================================================
   A ROUTE OF MORE THAN ONE DAY (26 September 2026). Jack, on Scotland in seven days: "each day should be split up
   better, maybe each day could have a different background colour? and i think we need tab buttons at the top for
   each day which auto scrolls to that day"; and where to eat and to stay as suggestions at the end of each day, not
   as stops. The days sit under the forest bar as tabs; each day is its own part of the page on its own ground, with
   its head (the day, its name, its line, its drive and where the night is), its stops on the line, then Where to
   eat (cask, as eating is in the itinerary's colours) and Where to stay (tweed), and its directions.
   ========================================================================= */
.iy-tabs{background:var(--paper)}
.iy-tabs .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0 clamp(14px,1.6vw,28px)}
.iy-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:22px 0 18px;border:0;background:none;cursor:pointer;
  text-align:left;border-bottom:2px solid transparent;transition:border-color .25s var(--ease,ease)}
.iy-tabs button span{font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55)}
.iy-tabs button b{font:400 17px/1.2 var(--face);font-weight:400;color:var(--ink)}
.iy-tabs button:hover b{text-decoration:underline;text-decoration-color:var(--stone-2);text-underline-offset:4px}
.iy-tabs button.here{border-bottom-color:var(--bracken)}
.iy-tabs button.here span{color:var(--bracken)}

/* the grounds, one a day, warm and cool in turn so two days side by side never look alike */
.iy-dday{--g:var(--shell);background:var(--g);padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px)}
.iy-dday.g1{--g:#F9F5EE}
.iy-dday.g2{--g:#EAEDE5}
.iy-dday.g3{--g:#F4EADF}
.iy-dday.g4{--g:#E7EBE9}
.iy-dday.g5{--g:#F1ECE3}
.iy-dday.g6{--g:#EAE5E0}
.iy-dday.g7{--g:#F5EDE9}
.iy-dday .iy-dot{box-shadow:0 0 0 4px var(--g)}
.iy-dday .iy-pic{background:rgba(65,64,66,.06)}

/* the day's head, on the reading column the line stands on */
.iy-dhead{max-width:807px;margin:0 auto 56px}
.iy-dn{margin:0 0 14px;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--bracken)}
.iy-dhead h2{margin:0;font:300 min(clamp(34px,3.6vw,52px), 28px + (clamp(34px,3.6vw,52px) - 28px) * 0.6)/1.08 var(--face);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.iy-dwords{margin:18px 0 0;font:italic 400 19px/1.55 var(--serif);color:var(--ink-75);max-width:60ch}
.iy-dfacts{display:flex;flex-wrap:wrap;gap:6px 28px;margin:22px 0 0;font:400 18px/1.3 var(--face);color:var(--ink)}
.iy-dfacts span:first-child{color:var(--forest)}

/* where to eat and where to stay, as suggestions at the day's foot */
.iy-sugg{margin-top:clamp(64px,6vw,88px)}
.iy-sugg .iy-label{color:var(--cask);margin-bottom:22px}
.iy-sleep .iy-label{color:var(--tweed)}
.iy-eat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.iy-ecard{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.iy-epic{display:block;aspect-ratio:4/3;overflow:hidden;background:rgba(65,64,66,.06);margin:0 0 14px}
.iy-epic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease,ease)}
.iy-ecard:hover .iy-epic img{transform:scale(1.03)}
.iy-ecard b{font:400 22px/1.15 var(--face);font-weight:400;color:var(--ink)}
.iy-ecard span:last-child{margin-top:6px;font:400 15px/1.4 var(--serif);color:var(--ink-55)}
/* the stays are the listing's own houses; the section they come in is already inside the day's column */
.iy-sleep .eh > .in{padding:0;max-width:none}
.iy-dday .iy-end{max-width:none;padding-left:0;margin-top:clamp(40px,4vw,56px)}

@media (max-width:1100px){
  .iy-eat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .iy-tabs .in{display:flex;overflow-x:auto;scrollbar-width:none;gap:0 22px}
  .iy-tabs .in::-webkit-scrollbar{display:none}
  .iy-tabs button{flex:0 0 auto;max-width:180px}
  .iy-dhead{margin-bottom:40px}
  .iy-dday .iy-dot{top:calc((100vw - 32px - 34px) * .75 / 2 - 6px)}
}
@media print{
  .iy-tabs,.iy-sugg{display:none!important}
  .iy-dday{background:none;padding:24px 0}
}

/* ---- the route's Google map (Jack, 26 September 2026): the outline map's box, 5:4 in the glance's 420 column; a press
   opens it full screen with the key to its dots (components/design/route-gmap.tsx). rgm- is the prefix, checked free. */
.rgm{position:relative;margin:0;aspect-ratio:5/4;background:#EEEAE4;box-shadow:inset 0 0 0 1px var(--stone)}
.rgm-map{position:absolute;inset:0}
.rgm:not(.full) .rgm-map{cursor:zoom-in}
.rgm-open{position:absolute;right:12px;bottom:12px;height:36px;padding:0 14px;background:var(--paper);border:0;cursor:pointer;
  font:500 13px/1 var(--sans);color:var(--ink);box-shadow:0 1px 4px rgba(65,64,66,.14)}
.rgm-open:hover{background:var(--forest);color:var(--on-forest)}
.rgm.full{position:fixed;inset:0;z-index:300;aspect-ratio:auto;box-shadow:none}
.rgm.full .rgm-map{top:64px}
.rgm-top{position:absolute;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 4px 0 var(--edge);background:var(--paper);border-bottom:1px solid var(--stone-2);z-index:2}
.rgm-title{margin:0;font:400 22px/1.1 var(--face);color:var(--ink)}
.rgm-x{width:56px;height:56px;border:0;background:none;cursor:pointer;font:300 min(34px, 28px + (34px - 28px) * 0.6)/1 var(--sans);color:var(--ink)}
.rgm-x:hover{color:var(--bracken)}
.rgm-key{position:absolute;left:16px;bottom:24px;z-index:2;display:flex;flex-wrap:wrap;gap:4px 18px;padding:12px 16px;background:var(--paper);
  box-shadow:0 1px 4px rgba(65,64,66,.14);max-width:calc(100% - 32px)}
.rgm-k{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font:500 13px/1.6 var(--sans);color:var(--ink);cursor:pointer}
span.rgm-k{cursor:default}
.rgm-k i{display:block;width:10px;height:10px;border-radius:50%;flex:none}
.rgm-k.off{color:var(--ink-35)}
.rgm-k.off i{opacity:.3}
.rgm-info{display:grid;gap:4px;width:200px;font-family:var(--sans)}
.rgm-info img{width:200px;aspect-ratio:4/3;object-fit:cover;display:block;margin:0 0 6px}
.rgm-info span{font:600 9.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.rgm-info b{font:400 17px/1.2 var(--face);font-weight:400;color:var(--ink)}
.rgm-info a{font:500 13px/1.4 var(--sans);color:var(--tweed)}

/* ---- where to eat as a row to browse, arrows at its head (Jack, 26 September) ---- */
.iy-shead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px}
.iy-shead .iy-label{margin:0}
.iy-arrows{display:flex;gap:6px}
.iy-arrows button{width:44px;height:44px;border:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink-20);cursor:pointer;
  font:400 18px/1 var(--sans);color:var(--ink)}
.iy-arrows button:hover:not(:disabled){background:var(--forest);color:var(--on-forest);box-shadow:none}
.iy-arrows button:disabled{opacity:.35;cursor:default}
.iy-eat{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * clamp(16px,1.8vw,28px)) / 4);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.iy-eat::-webkit-scrollbar{display:none}
.iy-ecard{scroll-snap-align:start}

/* ---- where to stay: the explore page's card, four across (Jack: "nothing fancy, same listing style as explore") ---- */
.iy-stays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}

/* ---- take the day with you: the directions as the thing to press, shown before it is pressed ---- */
.iy-go{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(56px,6vw,80px);padding:clamp(32px,4vw,56px);background:var(--forest);color:var(--on-forest)}
.iy-go .iy-label{color:rgba(241,237,232,.62);margin-bottom:14px}
.iy-go h3{margin:0;font:300 min(clamp(28px,2.6vw,38px), 28px + (clamp(28px,2.6vw,38px) - 28px) * 0.6)/1.1 var(--face);color:var(--shell)}
.iy-go-say p:not(.iy-label){margin:16px 0 0;font:400 17px/1.6 var(--serif);color:rgba(241,237,232,.8);max-width:46ch}
.iy-go-btn{display:inline-flex;align-items:center;height:52px;margin-top:28px;padding:0 26px;background:var(--shell);color:var(--ink);
  font:500 15px/1 var(--sans);text-decoration:none;transition:background-color .25s var(--ease,ease)}
.iy-go-btn:hover{background:var(--paper)}
.iy-go-list{list-style:none;margin:0;padding:22px 24px;background:var(--paper);color:var(--ink)}
.iy-go-list li{position:relative}
.iy-go-top{display:flex;align-items:baseline;gap:12px;padding:0 0 16px;margin:0 0 14px;border-bottom:1px solid var(--stone-2)}
.iy-go-top b{font:400 24px/1 var(--face);font-weight:400;color:var(--forest)}
.iy-go-top span{font:400 15px/1 var(--serif);color:var(--ink-55)}
.iy-go-row{display:flex;align-items:center;gap:12px;padding:5px 0;font:400 16px/1.3 var(--serif)}
.iy-go-row i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--forest);color:var(--on-forest);display:grid;place-items:center;
  font:600 11px/1 var(--sans);font-style:normal}
.iy-go-list li:first-of-type + li .iy-go-row i,.iy-go-list li:last-child .iy-go-row i{background:var(--bracken)}
.iy-go-list em{display:block;margin:0 0 0 11px;padding:2px 0 2px 25px;border-left:2px dotted var(--stone-2);font:600 9.5px/1.6 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--ink-55)}

@media (max-width:1100px){
  .iy-stays{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iy-eat{grid-auto-columns:calc((100% - clamp(16px,1.8vw,28px)) / 2)}
}
@media (max-width:900px){
  .iy-go{grid-template-columns:1fr}
  .rgm-title{font-size:18px}
}
@media (max-width:560px){
  .iy-eat{grid-auto-columns:76%}
}

.dk.iyd .iyd-wrap{flex-wrap:wrap}

/* the explore page's card as the explore page draws it (.j2's rules, which only reach that page), for Where to stay */
.iy-stays .ex-c{display:block;color:inherit;text-decoration:none}
.iy-stays .ex-p{display:block;position:relative;overflow:hidden;background:rgba(65,64,66,.06);aspect-ratio:3/4}
.iy-stays .ex-p img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease,ease)}
.iy-stays .ex-c:hover .ex-p img{transform:scale(1.04)}
.iy-stays .ex-t{display:block;margin-top:12px}
.iy-stays .ex-t .eye{display:block;font:500 9.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-35);margin-bottom:5px}
.iy-stays .ex-t b,.iy-stays .ex-t i{display:block;font-size:16px;line-height:1.4;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iy-stays .ex-t b{font:400 19px/1.4 var(--face);letter-spacing:-.005em;color:var(--ink)}
.iy-stays .ex-t i{font-family:var(--sans);font-weight:400;letter-spacing:-.02em;color:var(--ink-55)}

/* ---- the days as a row on the reading column, under the introduction (Jack, 26 September: "aligned with the text so
   smaller with arrows if longer than needed"); the old row under the forest bar (iy-tabs) is no longer drawn ---- */
.iy-drow{padding:0 var(--edge) clamp(40px,5vw,64px)}
.iy-drow-in{max-width:807px;margin:0 auto;display:flex;align-items:center;gap:18px;border-top:1px solid var(--stone-2);border-bottom:1px solid var(--stone-2)}
.iy-drow-list{flex:1;min-width:0;display:flex;gap:0 26px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.iy-drow-list::-webkit-scrollbar{display:none}
.iy-drow-list button{flex:none;display:flex;align-items:baseline;gap:8px;padding:15px 0 13px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;white-space:nowrap}
.iy-drow-list span{font:600 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55)}
.iy-drow-list b{font:400 16px/1 var(--face);font-weight:400;color:var(--ink)}
.iy-drow-list button:hover b{text-decoration:underline;text-decoration-color:var(--stone-2);text-underline-offset:4px}
.iy-drow-list button.here{border-bottom-color:var(--bracken)}
.iy-drow-list button.here span{color:var(--bracken)}
.iy-drow .iy-arrows button{width:34px;height:34px;font-size:15px}

/* ---- the day's directions as a code, on a computer only ---- */
.iy-go-qr{display:flex;align-items:center;gap:18px;margin:26px 0 0}
.iy-go-qr span{flex:none;width:96px;height:96px;padding:8px;background:var(--shell)}
.iy-go-qr svg{display:block;width:100%;height:100%}
.iy-go-qr em{font:italic 400 15px/1.45 var(--serif);color:rgba(241,237,232,.75);max-width:26ch}
@media (hover:none),(max-width:900px){ .iy-go-qr{display:none} }

/* ---- the print panel's second question, as boxes to tick ---- */
.dk.iyd .iyd-checks{display:grid;gap:8px}
.dk.iyd .iyd-check{display:flex;align-items:center;gap:12px;height:48px;padding:0 14px;background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--ink-20);
  font:400 16px/1 var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.dk.iyd .iyd-check i{flex:none;width:20px;height:20px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ink-35);font:600 13px/1 var(--sans);font-style:normal;color:var(--on-forest)}
.dk.iyd .iyd-check.on i{background:var(--forest);box-shadow:none}
.iy-go-qr img{display:block;width:100%;height:100%}

/* =========================================================================
   THE ROUTE AS A BOOK (26 September 2026), in the manner of The Best of Isle of Skye. Jack: "take inspiration from our
   isle of skye guides and make it beautifully designed each one please, should be perfect in terms of margins".
   components/design/route-book.tsx measures every block in .rbk-measure, then sets them into pages of a fixed size with
   margins of their own (@page has none, so the print dialog's margins cannot move anything). Always A4, since people
   print at home (Jack, 26 September); every measure is the guide's A5 one scaled by --s. The screen never shows the pages; in print they are all there is. rbk- is the prefix.
   ========================================================================= */
.rbk{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;
  --k:#414042;--g:#414042;--l:#DDD6CE;--taupe:#414042;--olive:#2B301D;--circle:#414042;--wash:#F4F0EA;
  color:var(--k);font-family:var(--serif);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rbk *{box-sizing:border-box}
:where(.rbk) :where(h1,h2,h3,p,ol,ul,dl,dd,dt){margin:0;padding:0}
:where(.rbk) :where(ol,ul){list-style:none}
.rbk img{display:block;width:100%;height:100%;object-fit:cover}
.rbk-measure{position:absolute;left:-30000px;top:0;visibility:hidden}
.rbk-pages{display:none}
@media print{
  html.rbk-on,html.rbk-on body{background:#fff!important;margin:0!important;padding:0!important}
  html.rbk-on body > *:not(#app){display:none!important}
  html.rbk-on #app > *:not(.rbk){display:none!important}
  html.rbk-on .rbk{position:static;width:auto;height:auto;overflow:visible}
  html.rbk-on .rbk-measure{display:none}
  html.rbk-on .rbk-pages{display:block}
}

/* ---- a page ---- */
.rbk-page{position:relative;width:var(--pw);height:var(--ph);overflow:hidden;background:#fff;break-after:page;page-break-after:always}
.rbk-page:last-child{break-after:auto;page-break-after:auto}
.rbk-body{position:absolute;left:var(--side);top:var(--top);width:var(--cw);height:var(--ch);overflow:hidden}
.rbk-cols{display:grid;grid-template-columns:var(--colw) var(--colw);column-gap:var(--gap);align-items:start}
.rbk-rh{position:absolute;left:var(--side);right:var(--side);top:calc(var(--top) - 9mm * var(--s));font:500 calc(5.8pt * var(--s)) / 1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--g)}
.rbk-folio{position:absolute;bottom:calc(var(--bottom) - 10mm * var(--s));font:400 calc(6.6pt * var(--s)) / 1 var(--serif);color:var(--taupe)}
.odd .rbk-folio{right:var(--side)}
.even .rbk-folio{left:var(--side)}
.rbk-edge{position:absolute;top:50%;writing-mode:vertical-rl;font:400 calc(6pt * var(--s)) / 1 var(--sans);letter-spacing:.08em;color:var(--g)}
.odd .rbk-edge{right:calc(var(--side) / 2 - 1.5mm);transform:translateY(-50%)}
.even .rbk-edge{left:calc(var(--side) / 2 - 1.5mm);transform:translateY(-50%) rotate(180deg)}
.rbk-h2{font:500 calc(21pt * var(--s)) / 1.05 var(--face);color:var(--taupe);margin-bottom:calc(7mm * var(--s))}
.rbk-sub{font:600 calc(5.9pt * var(--s)) / 1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin-bottom:calc(3mm * var(--s))}

/* ---- a stop, as the route page sets it (Jack, 26 Sep: "similar design to whats on the page ... take away the more
   about hyperlink"): a rail with a dot, the photograph, the name in spaced capitals, what it is, the words, a box to
   tick; the way from the last stop above it in small capitals. The rail is drawn by each block, so it runs on. ---- */
.rbk-st{position:relative}
.rbk-leg{position:relative;padding:calc(3.4mm * var(--s)) 0}
.rbk-leg span{font:600 calc(5.2pt * var(--s)) / 1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--g)}
.rbk-strow{position:relative;display:grid;grid-template-columns:calc(40mm * var(--s)) minmax(0,1fr);column-gap:calc(6.5mm * var(--s));
  padding:0 0 calc(4mm * var(--s))}
.rbk-st.nopic .rbk-strow{grid-template-columns:minmax(0,1fr)}
.rbk-stpic{aspect-ratio:4 / 3;background:var(--wash);overflow:hidden}
.rbk-sttext h3{font:600 calc(7.6pt * var(--s)) / 1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--k)}
.rbk-kind{margin-top:calc(1mm * var(--s));font:400 calc(7pt * var(--s)) / 1.3 var(--serif);color:var(--g)}
.rbk-words{font:400 calc(7.4pt * var(--s)) / 1.55 var(--serif);text-align:justify;hyphens:auto;color:#2B301D}
.rbk-sttext .rbk-words{margin-top:calc(2.6mm * var(--s))}
.rbk-tick{display:flex;align-items:center;gap:calc(1.6mm * var(--s));margin-top:calc(2.6mm * var(--s));font:500 calc(5.3pt * var(--s)) / 1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--g)}
.rbk-tick i{display:block;width:calc(3mm * var(--s));height:calc(3mm * var(--s));border:.3mm solid var(--g);border-radius:50%}
/* the rest of a day's words, leading its first page of stops */
.rbk-lead{font:italic 400 calc(8.2pt * var(--s)) / 1.6 var(--serif);color:#2B301D;padding-bottom:calc(6mm * var(--s));max-width:calc(120mm * var(--s))}

/* ---- where to eat, where to stay: the Edinburgh guide's food and beds. The band across the top of the first page
   (the photograph, a panel of colour with its notch pointing into the picture, the title set right), then two columns of
   entries: a numbered circle, the name in the sans, the town in the colour, a line in italic, the words justified.
   Cask for eating, tweed for sleeping (--ink2). ---- */
/* the band: colour across the top of the page, its words on the columns' own left edge (29 September: the places carry
   their photographs, so the band carries none) */
.rbk-lhead{position:absolute;left:0;top:0;width:100%;display:flex}
.rbk-lpanel{flex:1;background:var(--panel);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;
  padding:0 var(--side) calc(8mm * var(--s))}
.rbk-lpanel h2{font:500 calc(22pt * var(--s)) / 1.04 var(--face);margin:calc(2.4mm * var(--s)) 0 calc(3mm * var(--s))}
.rbk-lpanel .rbk-owords{font-size:calc(7.8pt * var(--s));max-width:calc(100mm * var(--s))}
.rbk-listp .rbk-cols > div{display:flex;flex-direction:column}
.rbk-en{padding-bottom:calc(6mm * var(--s))}
.rbk-enpic{aspect-ratio:16 / 10;margin-bottom:calc(2.8mm * var(--s));background:var(--wash);overflow:hidden}
.rbk-eye{font:600 calc(5.4pt * var(--s)) / 1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2,var(--g));margin-bottom:calc(1.2mm * var(--s))}
.rbk-en h3{font:500 calc(11pt * var(--s)) / 1.15 var(--face);color:var(--k)}
.rbk-enline{margin-top:calc(.8mm * var(--s));font:italic 400 calc(7pt * var(--s)) / 1.4 var(--serif);color:var(--g)}
.rbk-en .rbk-words{margin-top:calc(1.6mm * var(--s))}

/* ---- Simon Hird's photograph, a whole page ---- */
.rbk-full{background:#414042}
.rbk-full img{position:absolute;inset:0}
.rbk-fcap{position:absolute;left:var(--side);bottom:calc(10mm * var(--s));font:500 calc(5.8pt * var(--s)) / 1.4 var(--sans);letter-spacing:.06em;color:#fff;
  text-shadow:0 0 5px rgba(0,0,0,.45)}
.rbk-fcap b{display:block;font:500 calc(9pt * var(--s)) / 1.2 var(--face);letter-spacing:0;margin-bottom:calc(1mm * var(--s))}

/* ---- lines to write on ---- */
.rbk-notes .rbk-sub,.rbk-npage .rbk-sub{color:var(--g)}
.rbk-notes i,.rbk-npage > i{display:block;height:calc(7.5mm * var(--s));border-bottom:.25mm solid var(--l)}
.rbk-colo{margin-top:calc(6mm * var(--s));font:italic 400 calc(6.8pt * var(--s)) / 1.5 var(--serif);color:var(--g);max-width:calc(95mm * var(--s))}

/* ---- the cover and the back: olive, as the guides' are ---- */
.rbk-cover,.rbk-back{background:var(--olive);color:#fff;text-align:center}
.rbk-ckick,.rbk-cfoot{font:500 calc(6.6pt * var(--s)) / 1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
/* The cover is the guides' own, measured off the Edinburgh cover (148 x 190 mm): the photograph 77.5 x 100 mm, centred,
   its top 59.7 mm down; the line above it at 20.1 mm, the title at 34.3 mm, the foot at 171.2 mm. The whole cover
   scaled up evenly by 210/148 (1.419) and centred on the A4 page (Jack, 26 September: "can the dimentions be exactly
   the same as our guidebook, its currently way too long"). */
.rbk-cover > *{position:absolute;left:0;right:0}
.rbk-cover .rbk-ckick{top:39.5mm;font-size:17pt;letter-spacing:.14em}
/* the guide's title is 53pt at this scale; a title too long for one line at that size is set smaller to fit (the
   component measures it), so it never runs into the photograph */
.rbk-cover h1{font:500 var(--ctitle,53pt) / 1.04 var(--face);white-space:nowrap}
.rbk-ctitle{top:57mm;left:18mm;right:18mm;height:34mm;display:flex;flex-direction:column;justify-content:center;gap:3mm}
.rbk-ctitle p{font:italic 400 15pt / 1.3 var(--serif);opacity:.9;text-wrap:balance}
.rbk-cpic{top:95.7mm;left:50%;right:auto;width:110mm;height:142mm;transform:translateX(-50%);overflow:hidden}
.rbk-cover .rbk-cfoot{top:253.9mm;font-size:14pt;letter-spacing:.14em}
.rbk-back{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 calc(24mm * var(--s))}
.rbk-blurb{font:italic 400 calc(9pt * var(--s)) / 1.6 var(--serif);max-width:calc(90mm * var(--s))}
.rbk-back .rbk-cfoot{margin-top:calc(12mm * var(--s))}

/* ---- the introduction, on stone, as the guide's opening quotation ---- */
.rbk-intro{background:#414042;display:flex;flex-direction:column;padding:calc(var(--top) + 6mm) calc(var(--side) + 5mm * var(--s)) var(--bottom)}
.rbk-imain{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.rbk-big{font:500 calc(18pt * var(--s)) / 1.2 var(--face);color:#EFE8E1;text-wrap:balance}
.rbk-rest{font:italic 400 calc(8.2pt * var(--s) * var(--ik,1)) / 1.62 var(--serif);color:#F7F3EF}
.rbk-intro .rbk-big{margin-bottom:calc(8mm * var(--s))}
.rbk-intro:not(.is-map){justify-content:center}
.rbk-intro:not(.is-map) .rbk-facts{margin-top:calc(12mm * var(--s));color:#fff}
/* the island: the page's opening on paper */
.rbk-intro.is-map{background:#F9F5EE;justify-content:flex-start;padding-top:calc(var(--top) + 8mm)}
.rbk-intro.is-map .rbk-big{color:var(--k);font-size:calc(19pt * var(--s))}
.rbk-intro.is-map .rbk-iwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:calc(6mm * var(--s))}
.rbk-intro.is-map .rbk-rest{flex:none;max-width:128mm;color:#2B301D}
.rbk-imap{flex:1 1 0;min-height:0}
.rbk-imap .iy-sketch,.rbk-imap .iy-island{height:100%;min-height:0;max-width:none}
.rbk-imap .iy-island{display:inline-block}
.rbk-imap .iy-island img{width:auto;height:100%}
.rbk-imap .iy-island-over .i1{font-size:9.5px}
.rbk-imap .iy-island-over .i2{font-size:11.5px}

/* ---- the introduction's foot: the trip in facts, and what to book before you go, in white on the stone ---- */
.rbk-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(3mm * var(--s)) calc(5mm * var(--s))}
.rbk-facts dt{font:600 calc(5.2pt * var(--s)) / 1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-bottom:calc(1.4mm * var(--s))}
.rbk-facts dd{font:400 calc(8.2pt * var(--s)) / 1.3 var(--face)}
/* ---- before you go: the page's white card on its own ground, a round tick for each thing to book, our beds beneath the bed ---- */
.rbk-before{background:#F9F5EE}
.rbk-before .rbk-h2{color:var(--k)}
.rbk-bcard{background:#fff;padding:calc(3mm * var(--s)) calc(7mm * var(--s))}
.rbk-before .rbk-bcard{box-shadow:0 .4mm 2mm rgba(65,64,66,.06)}
.rbk-before .rbk-notes{margin-top:calc(10mm * var(--s))}
.rbk-todo{display:grid;grid-template-columns:calc(4.4mm * var(--s)) minmax(0,1fr);column-gap:calc(4mm * var(--s));padding:calc(5mm * var(--s)) 0}
.rbk-rtick{display:block;width:calc(4.4mm * var(--s));height:calc(4.4mm * var(--s));border:.35mm solid #2B301D;border-radius:50%;margin-top:calc(.6mm * var(--s))}
.rbk-tline{font:500 calc(11pt * var(--s)) / 1.2 var(--face);color:var(--k)}
.rbk-tsay{margin-top:calc(1.6mm * var(--s));font:400 calc(7.6pt * var(--s)) / 1.55 var(--serif);color:#2B301D;max-width:calc(110mm * var(--s))}
.rbk-turl{margin-top:calc(1.4mm * var(--s));font:500 calc(6.2pt * var(--s)) / 1.3 var(--sans);letter-spacing:.04em;color:#682114}
.rbk-tbeds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(3.4mm * var(--s));margin-top:calc(4mm * var(--s))}
.rbk-tbpic{aspect-ratio:4 / 3;background:var(--wash);overflow:hidden;margin-bottom:calc(1.8mm * var(--s))}
.rbk-tbeds .rbk-eye{--ink2:#682114;font-size:calc(4.8pt * var(--s));margin-bottom:calc(.8mm * var(--s))}
.rbk-tbname{font:500 calc(7.6pt * var(--s)) / 1.2 var(--face);color:var(--k)}

/* ---- a day's opener: the photograph, the panel of colour below it with its notch, the title set right ---- */
.rbk-opener{display:flex;flex-direction:column}
.rbk-opic{position:relative;flex:0 0 57%;overflow:hidden;background:var(--wash)}
.rbk-opic span{position:absolute;left:var(--side);bottom:calc(4mm * var(--s));font:500 calc(5.6pt * var(--s)) / 1 var(--sans);color:#fff;text-shadow:0 0 4px rgba(0,0,0,.35)}
.rbk-panel{position:relative;flex:1 1 auto;background:var(--panel);color:#fff;display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  padding:calc(11mm * var(--s)) var(--side) calc(12mm * var(--s))}
.rbk-pnotch{position:absolute;top:calc(-2.6mm * var(--s) + .2mm);right:calc(30mm * var(--s));width:0;height:0;border-left:calc(2.6mm * var(--s)) solid transparent;
  border-right:calc(2.6mm * var(--s)) solid transparent;border-bottom:calc(2.6mm * var(--s)) solid var(--panel)}
.rbk-okick{font:500 calc(6.3pt * var(--s)) / 1 var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.rbk-opener h2{font:500 calc(30pt * var(--s)) / 1.02 var(--face);margin:calc(3.4mm * var(--s)) 0 calc(5mm * var(--s))}
.rbk-owords{font:italic 400 calc(8.6pt * var(--s)) / 1.55 var(--serif);max-width:calc(82mm * var(--s))}
.rbk-ofacts{margin-top:auto;font:500 calc(5.8pt * var(--s)) / 1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.85}

/* =========================================================================
   A ROUTE THAT ANSWERS FOR YOUR TRIP (Jack, 26 September 2026: build the five ideas on the page). route-plan.tsx:
   the strip under the introduction (your dates, who is coming), Book before you go as a list to finish (a count out of
   its total and a filling line), the facts under each stop, open or shut on your day, what a stop is like with
   children, a dog or a wheelchair, and under each day If it rains and Worth a detour. Forest for what is fine, tweed for
   what is not (never red, never urgent), bracken for your night. rp- is the prefix.
   ========================================================================= */
.rp-strip{padding:0 var(--edge) clamp(28px,3.4vw,40px)}
.rp-in{max-width:807px;margin:0 auto}
/* a route's own introduction ("The route", "The day") stands in the same centred 807px column as everything under it:
   it sat on the page's left edge while the date strip, the day tabs, the stops and Book before you go were centred,
   240px in at 1440 (Jack, 29 September 2026, "issue here with alignment") */
.wl.intro.iy-intro .wl-in{max-width:807px;margin-left:auto;margin-right:auto}
.rp-sline{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin:0;padding:18px 0;border-top:1px solid var(--stone-2);font:400 16px/1.5 var(--serif);color:var(--ink-75)}
.rp-sline b{font:500 21px/1.25 var(--face);color:var(--ink)}
.rp-sline .rp-warn{color:var(--tweed)}
.rp-set{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 28px}
.rp-sinfo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px}
.rp-sline .rp-acts{display:flex;gap:22px;white-space:nowrap}
.rp-sline button{background:none;border:0;padding:0 0 3px;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  box-shadow:inset 0 -1px 0 var(--ink-35);cursor:pointer}
.rp-sline button:hover{box-shadow:inset 0 -1px 0 var(--ink)}
.rp-ask span{flex:1 1 440px}
.rp-sline .rp-go{height:44px;padding:0 20px;box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);background:none}
.rp-sline .rp-go:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}

.rp-book{padding:clamp(8px,2vw,24px) var(--edge) clamp(48px,6vw,80px)}
.rp-bhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.rp-bhead .iy-label{margin:0}
.rp-count{margin:0;font:400 14px/1 var(--sans);color:var(--ink-55)}
.rp-count b{font:500 22px/1 var(--face);color:var(--ink);margin-right:5px}
.rp-fill{height:3px;background:var(--stone-2);margin:16px 0 4px}
.rp-fill i{display:block;height:100%;background:var(--forest);transition:width .5s ease}
.rp-blist{list-style:none;margin:0;padding:0}
.rp-blist li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--stone-2)}
.rp-tick{width:34px;height:34px;display:grid;place-items:center;border:0;box-shadow:inset 0 0 0 1px var(--ink-35);background:#fff;
  font:600 12px/1 var(--sans);color:var(--ink-55);cursor:pointer;padding:0}
.rp-blist li.on .rp-tick{background:var(--forest);box-shadow:none;color:#fff;font-size:15px}
.rp-bname{margin:0;font:500 20px/1.25 var(--face);color:var(--ink)}
.rp-blist li.on .rp-bname{color:var(--ink-55)}
.rp-bwhen{margin:5px 0 0;font:400 15px/1.5 var(--serif);color:var(--ink-55)}
/* our own places to stay under a bed to book (Jack, 29 September 2026): the day's Where to stay cards, smaller */
.rp-bstays{margin-top:18px;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.rp-blist li:has(.rp-bstays){align-items:start}
/* three houses take the row between them (9 October 2026) */
.rp-bstays[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
/* one house or two, said in a sentence (Jack chose F of public/design-2026/beds-nearby/, 9 October 2026); the names are
   the sheet's own, bnb- */
.rp-blist li:has(.bnb-says){align-items:start}
.rp-blist li:has(.bnb-says) .rp-tick{margin-top:-4px}
.bnb-says{margin-top:18px}
.bnb-say{display:grid;grid-template-columns:84px minmax(0,1fr);gap:20px;align-items:center;padding:18px 0 0;border-top:1px solid var(--stone-2)}
.bnb-say+.bnb-say{margin-top:18px}
.bnb-say:not(:has(.bnb-ph)){grid-template-columns:minmax(0,1fr)}
.bnb-say .bnb-ph{display:block;aspect-ratio:1/1;background:var(--stone);overflow:hidden}
.bnb-say .bnb-ph img{display:block;width:100%;height:100%;object-fit:cover}
.bnb-say p{margin:0;font:400 21px/1.4 var(--face);color:var(--ink)}
.bnb-say p a{color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.bnb-say p span{color:var(--ink-55)}
/* the same sentence under Where to eat, where there is one place or two (9 October 2026) */
.iy-places .bnb-says{margin-top:16px}
/* where to pick up the picnic, a card before the day (Jack, 9 October 2026): the kind of place on the left, its name
   and where on the right, one fine rule between; the sheet's own bnb- names */
.bnb-pk{padding-bottom:clamp(40px,5vw,72px)}
.bnb-pk .iy-label{margin:0 0 10px}
.bnb-pkl{margin:26px 0 0;padding:0;border-top:1px solid var(--stone-2)}
.bnb-pkl div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:0 24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--stone-2)}
.bnb-pkl dt{font:500 11.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.bnb-pkl dd{margin:0;font:400 21px/1.4 var(--face);color:var(--ink)}
.bnb-pkl dd a{color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.bnb-pkl dd span{color:var(--ink-55)}
@media (max-width:760px){.bnb-pkl div{grid-template-columns:minmax(0,1fr);gap:4px 0}.bnb-pkl dd{font-size:18px}}
/* on a walk page Where to eat stands as the accommodation card does, the same paper, width and shadow, a short gap
   under it, and room before the page's foot (Jack, 9 October 2026: "this where to eat sectino is a bit of a mess") */
.p26[data-walk] [data-hs="stay"]{padding-bottom:clamp(56px,6vw,96px)}
.p26[data-walk] [data-hs="stay"]>.col{max-width:var(--wtw)}
.p26[data-walk] [data-hs="stay"] .iy-places{margin-top:clamp(20px,2vw,28px);background:#FFFFF7;box-shadow:0 18px 50px rgba(65,64,66,.07);padding:clamp(28px,3.4vw,52px)}
.p26[data-walk] [data-hs="stay"] .iy-places .iy-ponly{margin-top:0}
.p26[data-walk][data-hero] .rp-card{max-width:var(--wtw)}
.p26[data-walk] [data-hs="stay"] .rp-before{padding-bottom:0;margin-bottom:0}
@media (max-width:760px){
  .bnb-say{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .bnb-say p{font-size:18px}
}
/* every bed of ours for the night, nearest first (Jack, 29 Sep 2026: "show them all"), past four in one even row
   that scrolls, browsed with arrows as the eat list is (30 Sep: "we need arrows here to browse through"); the row wins
   over the to-do's own four-column grid, which had squeezed four cards small beside three large */
.rp-brow{display:grid;gap:12px;margin-top:18px}
.rp-brow .iy-arrows{justify-self:end}
.rp-brow .rp-bstays.is-many,.rp-todo-beds .rp-brow .rp-bstays.is-many{display:flex;grid-template-columns:none;margin:0;padding:0 0 4px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;gap:clamp(12px,1.4vw,20px)}
.rp-brow .rp-bstays.is-many::-webkit-scrollbar{display:none}
.rp-brow .rp-bstays.is-many>*{flex:0 0 calc((100% - 3 * clamp(12px,1.4vw,20px)) / 4);min-width:0;scroll-snap-align:start}
@media (max-width:760px){.rp-brow .rp-bstays.is-many>*{flex-basis:44%}}
.rp-blist li:has(.rp-bstays) .rp-tick{margin-top:-4px}
.rp-bgo{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:13px 18px;box-shadow:inset 0 0 0 1px var(--ink)}
.rp-bgo:hover{background:var(--ink);color:var(--paper)}

.iy-dn .rp-date{margin-left:14px;padding-left:14px;border-left:1px solid var(--ink-20);color:var(--ink-55)}

.rp-open{display:flex;gap:11px;align-items:baseline;margin:0;font:400 16px/1.5 var(--serif);color:var(--ink)}
.rp-open i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--forest)}
.rp-open.shut{color:var(--tweed)}
.rp-open.shut i{background:none;box-shadow:inset 0 0 0 1.5px var(--tweed)}

.rp-day{max-width:807px;margin:clamp(24px,3vw,40px) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.rp-rain,.rp-det{background:#fff;padding:26px 28px 24px}
.rp-day > :only-child{grid-column:1 / -1}
.rp-rain .iy-label,.rp-det .iy-label{margin-bottom:14px}
.rp-rwords{margin:0;font:400 16px/1.6 var(--serif);color:var(--ink-75)}
/* a place linked where the words name it (29 Sep) */
.rp-rwords a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(65,64,66,.3);text-underline-offset:3px;transition:color .25s,text-decoration-color .25s}
.rp-rwords a:hover{color:var(--tweed);text-decoration-color:var(--tweed)}
.rp-rlinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0}
.rp-rlinks a{font:500 14px/1.4 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-35);text-underline-offset:3px}
.rp-det ol{list-style:none;margin:0;padding:0}
.rp-det li{padding:14px 0 0}
.rp-det li:first-child{border-top:0;padding-top:0}
.rp-min{font:600 9.5px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.rp-det a{font:500 18px/1.3 var(--face);color:var(--ink);text-decoration:none}
.rp-det a:hover{text-decoration:underline;text-underline-offset:3px}
.rp-det li p{margin:4px 0 0;font:400 14.5px/1.55 var(--serif);color:var(--ink-75)}

/* a stay, free or taken on your night: bracken is a chosen night */
.iy-stays .ex-t .ex-note{display:block;margin-top:8px;font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.iy-stays .ex-t .ex-note.on{color:var(--bracken)}

.dk .rp-desk .cal{margin-bottom:6px}

@media (max-width:760px){
  .rp-day{grid-template-columns:1fr}
  .rp-blist li{grid-template-columns:34px minmax(0,1fr)}
  .rp-bgo{grid-column:2;justify-self:start;margin-top:-4px}
  .rp-bstays{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rp-bstays.is-many{grid-template-columns:none;grid-auto-columns:44%}
  .rp-rain,.rp-det{padding:22px 20px 20px}
}
.rp-cheaper{margin:18px 0 0;font:400 15px/1.6 var(--serif);color:var(--ink-55)}
.rp-cheaper b{font:600 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin-right:12px}
.rp-cheaper a{color:var(--ink-75);text-decoration:underline;text-decoration-color:var(--ink-20);text-underline-offset:3px}
.rp-open.unsure{color:var(--ink-55)}
.rp-open.unsure i{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-35)}
.rp-swap{margin:8px 0 0 20px;font:400 16px/1.5 var(--serif);color:var(--ink-75)}
.rp-swap b{font:600 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--forest);margin-right:10px}

/* MORE INFO (Jack, 26 September 2026: add a button saying more info and it pulls out the drawer with this info
   nicely designed; on the itinerary it just shows what we had before, to keep it clean). On the stop: the button
   beside More about, and one tweed line only when it is shut on your day. In the drawer: the photograph, your day,
   Plan your visit as rows, Booking, Who it suits, the listing. */
.rp-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:20px 0 0}
.rp-links .iy-more{margin:0}
.rp-info{height:36px;padding:0 16px;border:0;box-shadow:inset 0 0 0 1px var(--ink);background:none;color:var(--ink);cursor:pointer;
  font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
/* More info is the house button (Jack, 29 Sep: "too small, and they should have our hover over effect"): Tweed line,
   the Tweed wipe from data-label, Jost 14.5 in sentence case */
.btn.rp-info{min-height:46px;padding:0 24px;font:400 14.5px/1 var(--sans);letter-spacing:0;text-transform:none;background:transparent;color:var(--tweed);border:1px solid var(--tweed);--hover-bg:var(--tweed);--hover-color:var(--shell)}
.rp-shutline{flex-basis:100%;display:flex;gap:10px;align-items:baseline;margin:0;font:400 16px/1.5 var(--serif);color:var(--tweed)}
.rp-shutline i{flex:none;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--tweed)}

.dk.iyd .rp-dr h2{margin-bottom:6px}
.dk .rp-drpic{aspect-ratio:3 / 2;margin:0 0 24px;background:var(--stone);overflow:hidden}
.dk .rp-drpic img{width:100%;height:100%;object-fit:cover;display:block}
.dk .rp-drkind{margin:0 0 22px;font:400 16px/1.4 var(--serif);color:var(--ink-55)}
.dk .rp-drday{margin:0 0 8px;padding:14px 16px;background:#fff;box-shadow:inset 3px 0 0 var(--forest)}
.dk .rp-drday.shut{box-shadow:inset 3px 0 0 var(--tweed)}
.dk .rp-drday.unsure{box-shadow:inset 3px 0 0 var(--ink-35)}
.dk .rp-drday .rp-swap{margin:10px 0 0 20px}
.dk .rp-drlabel{margin:28px 0 10px;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55)}
.dk .rp-drrows{margin:0;border-top:1px solid var(--ink-20)}
.dk .rp-drrows div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--ink-20)}
.dk .rp-drrows dt{font:600 9.5px/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.dk .rp-drrows dd{margin:0;font:400 15.5px/1.5 var(--serif);color:var(--ink)}
.dk .rp-drnote{margin:12px 0 0;font:italic 400 14px/1.5 var(--serif);color:var(--ink-55)}
.dk .rp-drwords{margin:0 0 16px;font:400 16px/1.55 var(--serif);color:var(--ink-75)}
.dk .rp-drwho{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dk .rp-drwho li{padding:12px 16px;background:#fff;box-shadow:inset 3px 0 0 var(--forest)}
.dk .rp-drwho li.care{box-shadow:inset 3px 0 0 var(--tweed)}
.dk .rp-drwho b{display:flex;justify-content:space-between;gap:12px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.dk .rp-drwho b span{color:var(--bracken)}
.dk .rp-drwho p{margin:7px 0 0;font:400 15px/1.5 var(--serif);color:var(--ink-75)}
.dk .rp-drmore{margin:28px 0 10px}
.dk .rp-drmore a{font:500 15px/1.4 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* the day's line and its Instead, reused in the drawer: the Desk resets p, i and b, so they are set again inside it */
.dk .rp-open{display:flex;gap:11px;align-items:baseline;margin:0;font:400 16px/1.5 var(--serif);color:var(--ink)}
.dk .rp-open i{display:block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--forest)}
.dk .rp-drday.shut .rp-open{color:var(--tweed)}
.dk .rp-drday.shut .rp-open i{background:none;box-shadow:inset 0 0 0 1.5px var(--tweed)}
.dk .rp-drday.unsure .rp-open{color:var(--ink-55)}
.dk .rp-drday.unsure .rp-open i{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-35)}
.dk .rp-swap{margin:10px 0 0 20px;font:400 16px/1.5 var(--serif);color:var(--ink-75)}
.dk .rp-swap b{font:600 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--forest);margin-right:10px}
.dk.iyd .rp-dr .iyd-kick{margin:0 0 10px}
.dk .rp-drbook .go{margin-top:4px}


/* ---------------------------------------------------------------------------
   THE OPENING BAND (.oh-)

   Idea eight off /design-2026/hours.html, which Jack chose: everything about
   this minute on the left, the whole week on the right, over the moving sky the
   feed already runs. He asked for it said conversationally and live - "it
   should say Closed just now... its currently raining here and 11 degrees" - so
   the type is set for sentences rather than for labels: Larken for the line
   that matters, Lora underneath it, and no capitals anywhere except the days.

   The prefix is new and was checked against every sheet in public/design-css
   before it was used. `hb-` was already taken by forty-odd of them; `oh-` by
   none.

   It replaces the old .wkh-band, which drew the week on paper with nothing
   round it and answered only half the question.
--------------------------------------------------------------------------- */

.p26 .oh-band{position:relative;overflow:hidden;border-radius:3px;
  background:var(--oh-ground,#414042);color:var(--on-forest);
  margin:0 0 clamp(42px,6.5vh,86px)}

/* the sky sits behind everything and is never in the way of a pointer */
.p26 .oh-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:block}
.p26 .oh-sky canvas{display:block;width:100%;height:100%}

/* The band runs edge to edge, but its words line up with the page column, the way .plate does.
   Without this the sentence began at the browser edge while everything above and below it began at 320. */
.p26 .oh-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,64px);align-items:center;max-width:1400px;margin:0 auto;
  padding:clamp(28px,3.4vw,44px) var(--edge)}

/* LEFT: this minute, said as sentences */
.p26 .oh-now{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.p26 .oh-say{margin:0;font:400 min(clamp(25px,2.5vw,34px), 28px + (clamp(25px,2.5vw,34px) - 28px) * 0.6)/1.2 var(--face);color:var(--on-forest);
  letter-spacing:-.005em;max-width:20ch}
.p26 .oh-say.oh-wait{opacity:.7}
.p26 .oh-wx{margin:0;font:400 17px/1.55 var(--serif);color:rgba(241,237,232,.76);max-width:34ch}
.p26 .oh-go{margin-top:6px;display:inline-block;font:500 12px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--shell);border:1px solid rgba(241,237,232,.5);
  padding:13px 20px;border-radius:2px;text-decoration:none}
.p26 .oh-go:hover{background:var(--shell);color:var(--oh-ground,#414042);border-color:var(--shell)}

/* RIGHT: the week, the same <dl> the page already used, put on a dark ground.
   The rules were ink at 20%, which disappears entirely here. */
.p26 .oh-week .wkh{width:100%;margin:0;font-size:inherit}
.p26 .oh-week .wkh div{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:0 20px;padding:9px 0;
  border-top:1px solid rgba(241,237,232,.16);font:400 16px/1.5 var(--serif);color:rgba(241,237,232,.8)}
.p26 .oh-week .wkh div:last-child{border-bottom:1px solid rgba(241,237,232,.16)}
.p26 .oh-week .wkh dt{font:500 11px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,237,232,.5)}
.p26 .oh-week .wkh dd{margin:0}
/* today is the one row worth picking out, and bracken is already the site's colour for a chosen day */
.p26 .oh-week .wkh .is-today{color:var(--on-forest)}
.p26 .oh-week .wkh .is-today dt{color:var(--bracken-soft,#C08C3D)}
.p26 .oh-week .wkh .is-today dd{color:var(--on-forest)}

/* On a phone the week goes under, because the sentence is the part somebody
   standing in the street actually needs. */
@media (max-width:860px){
  .p26 .oh-in{grid-template-columns:1fr;gap:26px;align-items:start}
  .p26 .oh-say{max-width:none}
}


/* WHERE IT IS, aligned to the page column.

   It is a label and three words, not a paragraph, so the centred reading column left it stranded to the
   right of everything around it. Measured at 1920 on 27 September: the band's sentence and the first Close
   by card both begin at 320, this began at 557. Close by sits directly beneath it and they now share an
   edge. The Welcome intro keeps the reading column, because it has a paragraph to fill it.

   The space above comes down with it. `.intro` carries up to 164px of top padding and the band above it up
   to 86px of bottom margin, which put a quarter of a screen of nothing between the two (Jack, 27 September:
   "misaligned and floaty"). The band now hands its space to whatever follows rather than adding to it. */
.p26 .gl-where{padding-top:clamp(44px,6vh,78px)}
.p26 .gl-where .wl-in{grid-template-columns:minmax(0,1fr)}
/* both children move with the column, or grid-column:2 from [data-labels="above"] throws them
   into an implicit track on the right: measured at 1368 when only the first line was changed. */
.p26 .gl-where .wl-in > .wl-label{grid-column:1;grid-row:1;margin:0 0 14px}
.p26 .gl-where .wl-in > .wl-text{grid-column:1;grid-row:2}
.p26 .gl-where .wl-text{width:auto;max-width:46ch}
/* Space above, none below: the band hands its lower space to whatever follows, but it needs its own
   breathing room off the facts table above it, which was measured at 0. */
.p26 .oh-band{margin-top:clamp(44px,6vh,84px);margin-bottom:0}

/* The week, tightened. Capped and set against the band's right edge, with the day and the time beside each
   other instead of at opposite ends of a 608px row. */
.p26 .oh-week .wkh{max-width:340px;margin-left:auto}
.p26 .oh-week .wkh div{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:0 18px}
.p26 .oh-week .wkh dd{text-align:right}


/* ---- the introductions, ranged left (27 Sep) ----
   Jack, on Stay nearby: "i also think this text needs left aligned". `.wl-in` is `1fr auto 1fr` and
   the page's data-labels="above" puts BOTH the label and the words in the centre column, so every
   introduction floated in the middle of the plate while the rest of the page ranged from 320.

   The whole rule moves together, or grid-column:2 survives the single column and throws the children
   into an implicit track on the right - the fault that took Where it is from 557 to 1368 this morning.
   `_welcome.css`'s phone breakpoint is this exact shape; this is it above 1181 as well, and only for
   a listing introduction, so the home page's centred welcome keeps its centring. */
@media (min-width: 1181px){
.p26 .intro .wl-in{grid-template-columns:minmax(0,1fr)}
.p26 .intro .wl-in > .wl-label{grid-column:1;grid-row:1;margin:0 0 16px}
.p26 .intro .wl-in > .wl-text{grid-column:1;grid-row:2}
}


/* ---- the break, on a listing with no photographs of its own (27 Sep) ----
   Jack, on the Enchanted Galaxy: "need an image between these sections, if there are no images available
   maybe can can add something about a place or places nearby, or maybe a cafe nearby, some kind of advert
   for it, it needs split up anyway." Then: "use Seven for round the corner part."

   Idea seven off /design-2026/break.html. Forest ground edge to edge, the photograph bleeding off the right
   half, the words on the left - the page's second dark rest, answering the opening-hours band, so the column
   of paper is broken twice rather than once. */
.p26 .nbk{padding:0}
.p26 .nbk + section{padding-top:clamp(44px,6.5vh,88px)}

.p26 .nbk-a{position:relative;display:block;overflow:hidden;text-decoration:none;
  background:var(--forest);color:var(--on-forest)}

/* The right half of the viewport, bled to the edge. Pinned rather than laid out in the grid, so the seam
   sits at 50% of the screen and not at 50% of the plate, which would have left a band of forest between the
   photograph and the edge at any width over 1400. */
.p26 .nbk-pic{position:absolute;top:0;right:0;bottom:0;left:50%;background:var(--cask)}
.p26 .nbk-pic img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.p26 .nbk-a:hover .nbk-pic img{transform:scale(1.02)}

/* The words back on the page column: the plate's own maths, 1400 centred with --edge each side. Two columns
   so the words end before the photograph begins - at 1920 they run 320 to 930 and the seam is at 960. */
.p26 .nbk-in{position:relative;z-index:1;width:min(1400px,100%);margin:0 auto;
  padding:clamp(44px,5.5vw,84px) var(--edge);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center;
  min-height:clamp(320px,40vh,440px)}
.p26 .nbk-on{grid-column:1;display:grid;gap:12px;justify-items:start}

.p26 .nbk-kick{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-forest-55)}
.p26 .nbk-name{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.6vw,38px), 28px + (clamp(26px,2.6vw,38px) - 28px) * 0.6);line-height:1.1;
  letter-spacing:-.005em;color:var(--on-forest)}
.p26 .nbk-line{font-family:var(--serif);font-size:17px;line-height:1.6;max-width:38ch;
  color:rgba(241,237,232,.82)}
.p26 .nbk-far{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-forest-55)}
.p26 .nbk-go{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:#C08C3D;border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:4px}
.p26 .nbk-a:hover .nbk-go{color:var(--on-forest)}

/* Stacked on a phone, the photograph first and upright, the words under it on the ground. */
@media(max-width:760px){
.p26 .nbk-a{display:flex;flex-direction:column}
.p26 .nbk-pic{position:relative;inset:auto;order:-1;width:100%;aspect-ratio:4/5}
.p26 .nbk-in{grid-template-columns:minmax(0,1fr);min-height:0;padding:clamp(26px,6vw,38px) var(--edge)}
.p26 .nbk-line{font-size:15.5px;max-width:46ch}
}

@media(prefers-reduced-motion:reduce){
.p26 .nbk-pic img,.p26 .nbk-a:hover .nbk-pic img{transition:none;transform:none}
}

/* ---- the write-up and the facts, ranged left (27 Sep) ----
   Jack: "aignment is messed up here, does not look good." The introductions moved to the page's own edge
   earlier today; these two did not, so a heading at 320 had its own paragraph starting at 557. Both are
   `max-width:46ch;margin:0 auto` - the measure stays, the centring goes. Measured at 1920: label, paragraph,
   write-up, facts and the band all read 320. */
.p26 .reads .col{margin-left:0;margin-right:0}
.p26 .colw{margin-left:0;margin-right:0}


/* ---- the band meets Did you know (27 Sep) ----
   Jack: "random gap between these sections". Measured on BAM: the band ends, 86px of paper, then a
   photograph running edge to edge - two full-bleed sections with a strip of paper between them, which reads
   as a mistake rather than as a rest. `.dy` carries `margin:clamp(56px,8vh,110px) 0 0` for the paper above
   it in every other position, and that is right everywhere except here.

   `.gl-around` already meets the band with nothing between them, which is what the page does on a listing
   with no Did you know - so this is the two neighbours agreeing, not a new idea. The whole margin is
   rewritten rather than the top alone: the shorthand sets all four, and overriding one leaves the rest
   fighting it. */
.p26 .oh-band + .dy{margin:0}

/* THE TRAIL (Jack, 29 September 2026, after jeffd.org: "his is perfectly fluid", "just a strip down"; settled on the
   sheet public/design-2026/route-trail/trail-strip.html, P1 Photographs, with his "only put the border round the ones on
   the itineary"). The days beside one still strip of the real map; route-trail.tsx draws it, RoutePage passes the
   trail only where the strips exist. The column takes each day's ground as the reader reaches it, and the strip for the
   day cross-fades in. On a phone it is not shown. */
/* one composition down the middle (Jack, 29 Sep: "moved closer to the center so they work together as one"): the strip's
   column ends where the words begin, the pair centred in --tw */
.iy-trail{--sw:400px;--tw:min(1200px,calc(100% - 48px));display:grid;grid-template-columns:calc((100% - var(--tw)) / 2 + var(--sw)) minmax(0,1fr);position:relative}
.iy-trail-stage{position:sticky;top:76px;height:calc(100vh - 76px);align-self:start;overflow:hidden;background:#F9F5EE}
.iy-trail-in{position:absolute;top:0;bottom:0;right:0;width:min(var(--sw),100%);opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1)}
.iy-trail-in.is-ready{opacity:1}
.iy-trail-day{position:absolute;inset:0;opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1)}
.iy-trail-day.on{opacity:1}
.iy-trail-svg{position:absolute;left:0;width:100%;top:clamp(84px,11vh,112px);height:calc(100% - clamp(84px,11vh,112px) - clamp(24px,4vh,44px));display:block;pointer-events:none;will-change:transform}
.iy-trail-svg text{font-family:var(--sans)}
.iy-trail-head{position:absolute;left:28px;top:clamp(24px,3.6vh,36px);z-index:2}
.iy-trail-dn{margin:0 0 7px;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.iy-trail-mi{margin:0;font:500 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55);font-variant-numeric:tabular-nums}
.iy-trail-svg.is-marks [data-pop]{pointer-events:auto;cursor:pointer}
.iy-trail-svg.is-marks circle,.iy-trail-svg.is-marks image,.iy-trail-svg.is-marks text{transform-box:fill-box;transform-origin:center}
/* the day's own stops: the photograph in a ring, forest until reached, copper once reached, a size up for the one next */
.iy-trail-st>*{transition:fill .4s,stroke .4s,opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.iy-trail-ring{fill:#F9F5EE;stroke:#2B301D;stroke-width:2.2}
.iy-trail-dot{fill:#2B301D}
.iy-trail-st.is-reached .iy-trail-ring{stroke:#C08C3D;stroke-width:3}
.iy-trail-st.is-reached .iy-trail-dot{fill:#C08C3D}
.iy-trail-st.is-active .iy-trail-ring,.iy-trail-st.is-active image{transform:scale(1.18)}
.iy-trail-name{font-size:10px;font-weight:600;letter-spacing:.16em;fill:rgba(65,64,66,.55);paint-order:stroke;stroke:var(--halo);stroke-width:4px;stroke-linejoin:round;opacity:0}
.iy-trail-st.is-reached .iy-trail-name,.iy-trail-st.is-active .iy-trail-name,.iy-trail-st:hover .iy-trail-name{opacity:1}
.iy-trail-st.is-reached .iy-trail-name{fill:rgba(65,64,66,.8)}
.iy-trail-st.is-active .iy-trail-name{fill:#414042}
.iy-trail-st:hover .iy-trail-name{fill:#682114}
/* our other places along the way: smaller, no ring, their photograph; bigger and named on a card when pointed at */
.iy-trail-np>*{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
.iy-trail-np{opacity:.78;transition:opacity .4s}
.iy-trail-np.is-near,.iy-trail-np:hover{opacity:1}
.iy-trail-np-halo{fill:var(--halo);opacity:.9}
.iy-trail-np:hover image,.iy-trail-np:hover .iy-trail-np-halo{transform:scale(1.7)}
/* the reader, on the road */
.iy-trail-car-ring{fill:#F9F5EE;stroke:#C08C3D;stroke-width:2.4}
.iy-trail-car-dot{fill:#C08C3D}
/* the strip stands under the site bar and the page's own bar, never behind them (route-trail.tsx sets its top) */
/* the card over the map */
.iy-trail-pop{position:absolute;z-index:6;width:232px;background:#FFFFF7;box-shadow:0 14px 40px rgba(65,64,66,.16),0 0 0 1px rgba(65,64,66,.06);pointer-events:none}
.iy-trail-pop[hidden]{display:none}
.iy-trail-pop img{display:block;width:100%;height:146px;object-fit:cover}
.iy-trail-kick{margin:12px 14px 5px;font:600 9.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#C08C3D}
.iy-trail-pop b{display:block;margin:0 14px;font:400 20px/1.15 var(--face);color:var(--ink)}
.iy-trail-pop span{display:block;margin:6px 14px 14px;font:400 13.5px/1.45 var(--serif);color:var(--ink-75)}
.iy-trail-pop b:last-child{margin-bottom:14px}
/* one ground for every day of the trail (Jack, 29 Sep: "i dont think the differnet coour background work now - the map
   doesnt change autiamcially so doesn tlook right as you scroll"): the strip stands still, so a ground that changes under
   the words would always meet it at a seam. The day changes with the strip's cross-fade and the day's own heading. */
.iy-trail-days .iy-dday{--g:#F9F5EE}
.iy-trail-days .iy-dday .in{max-width:calc(min(1200px, 100vw - 48px) - var(--sw));margin-left:0;margin-right:auto;padding-left:clamp(28px,3vw,52px);padding-right:24px}
.iy-trail-days .iy-stays{grid-template-columns:repeat(2,minmax(0,1fr))}
/* no line beside the trail (Jack, 29 Sep: "we maybe dont need this line anymore"): the map carries where you are */
.iy-trail-days .iy-line::before,.iy-trail-days .iy-dot{display:none}
.iy-trail-days .iy-row{padding-left:0}
.iy-trail-days .iy-leg{margin-left:0}
/* each stop one block that answers the map (Jack, 29 Sep: "a hover over over the listings ... which links up to the map
   better"): pointed at, it lifts onto paper, its name turns Tweed, and on the map its photograph lifts with its card */
.iy-trail-days .iy-row::before{content:"";position:absolute;inset:-22px -26px;background:#FFFFF7;box-shadow:0 14px 40px rgba(65,64,66,.09),0 0 0 1px rgba(65,64,66,.05);opacity:0;transition:opacity .35s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.iy-trail-days .iy-row>*{position:relative}
.iy-trail-days .iy-stop.is-hot .iy-row::before{opacity:1}
.iy-trail-days .iy-stop .iy-pic img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.iy-trail-days .iy-stop.is-hot .iy-pic img{transform:scale(1.04)}
.iy-trail-days .iy-stop h3,.iy-trail-days .iy-stop h3 a{transition:color .3s}
.iy-trail-days .iy-stop.is-hot h3,.iy-trail-days .iy-stop.is-hot h3 a{color:var(--tweed)}
.iy-trail-st.is-hot .iy-trail-ring,.iy-trail-st.is-hot image{transform:scale(1.3)}
.iy-trail-st.is-hot .iy-trail-name{opacity:1;fill:#682114}
/* no thread from the map to the words: it swung with every bend of the road and never pointed true (Jack, 29 Sep) */
@media (max-width:900px){.iy-trail{display:block}.iy-trail-stage{display:none}}
@media (prefers-reduced-motion:reduce){.iy-trail-stage,.iy-trail-day,.iy-trail-in,.iy-trail-st>*,.iy-trail-np>*{transition:none}}

/* ABOVE THE DAYS, on a trailed route (the route-top sheet, http://localhost:8080/design-2026/route-top/; Jack, 29
   September 2026: "lets try V2 - The map beside the words then try the white card style design of v3 for the Book two
   nights in Dunvegan section - i dont think we need this section [the facts] - then i like the checkbox style V4").
   No rules, no borders, no change of ground (Jack: "i dont like line and page breaks"): the shell runs from here to the
   end of the days, and space alone separates. On the trail's own line: the drawing where the strip stands, the words at
   the seam where the stops begin. */
.iy-has-trail{--sw:400px;--tw:min(1200px,calc(100% - 48px));--seam:clamp(28px,3vw,52px)}
.iy-has-trail .iy-top,.iy-has-trail .rp-before{background:#F9F5EE}
.iy-top{padding:clamp(64px,8vw,120px) 0 clamp(56px,7vw,100px)}
.iy-top-in{max-width:var(--tw);margin:0 auto;display:grid;grid-template-columns:var(--sw) minmax(0,1fr);gap:0;align-items:start}
.iy-sketch{grid-column:1;min-height:300px}
.iy-sketch svg{display:block;width:auto;max-width:100%;height:auto;max-height:clamp(360px,44vh,480px);margin:0 auto}
.iy-top-words{grid-column:2;padding-left:var(--seam);max-width:calc(720px + var(--seam))}
.iy-top-sum{margin:0 0 20px;font:400 min(clamp(24px,2.1vw,30px), 28px + (clamp(24px,2.1vw,30px) - 28px) * 0.6)/1.3 var(--face);color:var(--ink);text-wrap:balance}
.iy-top-p{margin:0 0 16px;font:400 17px/1.65 var(--serif);color:var(--ink-75)}
.iy-top-p:last-child{margin-bottom:0}
/* before you go: one white card, lifted by a shadow, no edge; a round tick for each thing to book */
.rp-before{padding:0 0 clamp(72px,9vw,130px)}
.rp-card{max-width:var(--tw);margin:0 auto;background:#FFFFF7;box-shadow:0 18px 50px rgba(65,64,66,.07);padding:clamp(28px,3.4vw,52px)}
.rp-todo{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,2.6vw,36px)}
.rp-todo li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:6px 18px;align-items:start}
.rp-dot{width:24px;height:24px;margin-top:4px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--forest);cursor:pointer;transition:background .3s,box-shadow .3s}
.rp-dot:hover{box-shadow:inset 0 0 0 1.5px var(--bracken)}
.rp-todo li.on .rp-dot{background:var(--bracken);box-shadow:inset 0 0 0 1.5px var(--bracken)}
.rp-todo-name{margin:0;font:400 clamp(20px,1.6vw,24px)/1.3 var(--face);color:var(--ink);transition:color .3s}
.rp-todo-name a{text-decoration:none;box-shadow:inset 0 -1px 0 rgba(65,64,66,.22);transition:color .3s,box-shadow .3s}
.rp-todo-name a:hover{color:var(--tweed);box-shadow:inset 0 -1px 0 var(--tweed)}
.rp-todo li.on .rp-todo-name,.rp-todo li.on .rp-todo-name a{color:var(--ink-55)}
.rp-todo-say{margin:4px 0 0;font:400 15.5px/1.55 var(--serif);color:var(--ink-75);max-width:62ch}
.rp-todo-dates{grid-column:3;grid-row:1 / span 2;align-self:center}
.btn.rp-datebtn{min-height:50px;padding:0 25px;font:400 14.5px/1 var(--sans);letter-spacing:0;text-transform:none;background:transparent;color:var(--tweed);border:1px solid var(--tweed);--hover-bg:var(--tweed);--hover-color:var(--shell)}
.rp-when{margin:0;display:flex;gap:16px;align-items:baseline;font:400 18px/1.3 var(--face)}
.rp-when button{background:none;border:0;padding:0;font:400 14.5px/1 var(--sans);color:var(--tweed);cursor:pointer;box-shadow:inset 0 -1px 0 var(--tweed)}
.rp-todo-beds{grid-column:1 / -1;margin-top:clamp(18px,2vw,26px)}
.rp-todo-beds .rp-bstays{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
@media (max-width:900px){
  .iy-has-trail{--tw:100%}
  .iy-top,.rp-before{padding-left:var(--edge);padding-right:var(--edge)}
  .iy-top-in{grid-template-columns:1fr;gap:28px}
  .iy-sketch{grid-column:1;min-height:0;max-width:340px}
  .iy-top-words{grid-column:1;padding-left:0}
  .rp-card{padding:22px 20px}
  .rp-todo li{grid-template-columns:26px minmax(0,1fr)}
  .rp-todo-dates{grid-column:2;grid-row:auto;align-self:start;margin-top:8px}
  .rp-todo-beds .rp-bstays{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* on a phone the days take the whole width: their column is worked out from the trail's width, which a phone does not have */
@media (max-width:900px){.iy-trail-days .iy-dday .in{max-width:none;padding-left:var(--edge);padding-right:var(--edge)}}

/* WHERE TO EAT AND WHERE TO STAY, one section a day (route.tsx DayPlaces; Jack, 29 September 2026: "how can we
   incorporte both these sections into one? maybe as a tab system ... both should be the explore style listing type").
   The tabs are words, no underline, no rule: the one open in ink, the other quiet, Tweed on hover. The site's explore
   card for both, three across the words' column, two on a phone. */
.iy-places{margin-top:clamp(40px,5vw,72px)}
.iy-ptabs{display:flex;flex-wrap:wrap;gap:6px clamp(22px,2.4vw,36px);margin:0 0 clamp(18px,2vw,26px)}
.iy-ptabs button{background:none;border:0;padding:0;cursor:pointer;font:400 clamp(21px,1.7vw,26px)/1.2 var(--face);color:rgba(65,64,66,.38);transition:color .3s}
.iy-ptabs button:hover{color:var(--tweed)}
.iy-ptabs button.on{color:var(--ink)}
.iy-ponly{font:400 clamp(21px,1.7vw,26px)/1.2 var(--face);color:var(--ink)}
/* both tabs wear the explore page's card exactly (the iy-stays rules: the 3:4 photograph, the eye, the name in Larken), and
   bigger: two across the day's words, three where the column is wide (Jack, 29 Sep: "make them the same listing styple ... same as
   explore page, so shouldl be bigger", "they both should match") */
.iy-pgrid.iy-stays{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:clamp(24px,2.6vw,36px) clamp(16px,1.8vw,24px)}
.iy-pmore{margin-top:clamp(18px,2vw,26px);background:none;border:0;padding:0;cursor:pointer;font:400 14.5px/1 var(--sans);color:var(--tweed);box-shadow:inset 0 -1px 0 var(--tweed)}
@media (max-width:900px){.iy-pgrid.iy-stays{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the day's drive, miles and light: a size smaller, each underlined softly (Jack, 29 September 2026: "be a littel big smaller
and maybe underslined?") */
.iy-dfacts{gap:6px 24px;font-size:15px}
.iy-dfacts span{text-decoration:underline;text-decoration-color:rgba(65,64,66,.25);text-decoration-thickness:1px;text-underline-offset:5px}
.iy-dfacts span:first-child{text-decoration-color:rgba(43,48,29,.4)}

/* THE ISLAND AT A GLANCE (route-trail.tsx RouteSketch; Jack, 29 September 2026: "maybe we have the map of skye here"): the
   whole island, north up, fading into the ground at every edge (a still picture, so its mask costs nothing); on it the
   days in their inks, the base, and the way in with its drive; under it the days, each a press to that day */
.iy-island{position:relative}
.iy-island img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.iy-island-over{position:absolute;inset:0}
.iy-sketch .iy-island-over svg{display:block;width:100%;height:100%;max-height:none;margin:0}
.iy-island.is-bare .iy-island-over{position:static}
.iy-island-over .i1{font:600 8.5px/1 var(--sans);letter-spacing:.16em;fill:#414042;paint-order:stroke;stroke:#F9F5EE;stroke-width:3.5px;stroke-linejoin:round}
.iy-island-over .i2{font:italic 400 10.5px/1 var(--serif);fill:rgba(65,64,66,.78);paint-order:stroke;stroke:#F9F5EE;stroke-width:3.5px;stroke-linejoin:round}
.iy-island-days{list-style:none;margin:clamp(14px,1.6vw,22px) 0 0;padding:0 0 0 28px;display:grid;gap:10px}
.iy-island-days button{display:flex;gap:12px;align-items:baseline;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.iy-island-days i{flex:none;width:16px;height:3px;border-radius:2px;transform:translateY(-3px)}
.iy-island-days b{font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.iy-island-days span{font:400 16px/1.3 var(--face);color:var(--ink-75);transition:color .25s}
.iy-island-days button:hover span{color:var(--tweed)}

/* THE HOUSE BUTTON on the bars (Jack, 29 September 2026: "whats happened to buttons, we had a button style which was bigger
   and had a nice hoverover effect of it filling when scrolling over - this is what i want to use for every button on the
   site - but we've been switching it up"; of Save, Add to trip, Your dates, Print: "same issue"). DESIGN-SYSTEM section 5:
   a 1px line and the label, Jost 400 14.5 in sentence case, 50 px, square; the same label again in ::after, clipped to
   nothing, wipes in from the left over 0.4s. On the forest band a Shell line with a Shell fill and forest words; on paper
   a Tweed line with a Tweed fill and Shell words. Weighted (:not(#_)) to win over the golf sheet's .p26 .bkr.a3 .bkr-q, which this page also loads, and whose
   instant hover fill would hide the wipe. */
.bkr .bkr-q:not(#_)[data-label]:hover{background:transparent;color:var(--shell)}
.bkr .bkr-q:not(#_),.pn .pn-q,.pn .pn-book{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 25px;font:400 14.5px/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;text-decoration:none;border-radius:0;background:transparent;transition:color .4s}
.bkr .bkr-q:not(#_){color:var(--shell);border:1px solid var(--shell);--hb:var(--shell);--hc:var(--forest)}
.pn .pn-q,.pn .pn-book{color:var(--tweed);border:1px solid var(--tweed);--hb:var(--tweed);--hc:var(--shell)}
.bkr .bkr-q:not(#_)[data-label]::after,.pn .pn-q[data-label]::after,.pn .pn-book[data-label]::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--hb);color:var(--hc);clip-path:inset(0 100% 0 0);transition:clip-path .4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.bkr .bkr-q:not(#_)[data-label]:hover::after,.pn .pn-q[data-label]:hover::after,.pn .pn-book[data-label]:hover::after,.bkr .bkr-q:not(#_)[data-label]:focus-visible::after,.pn .pn-q[data-label]:focus-visible::after,.pn .pn-book[data-label]:focus-visible::after,.pn .pn-q.on[data-label]::after,.bkr .bkr-q:not(#_).on[data-label]::after{clip-path:inset(0 -1% 0 0)}
.bkr .bkr-q:not(#_):not([data-label]):hover,.pn .pn-q:not([data-label]):hover,.pn .pn-book:not([data-label]):hover{background:var(--hb);color:var(--hc)}
.bkr .bkr-q:not(#_):hover,.pn .pn-q:hover,.pn .pn-book:hover{border-color:var(--hb)}
/* and Print in the print panel, the same button on paper (the Desk resets its buttons, so it is named here) */
.dk .iyd-print:not(#_){position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 32px;margin-top:6px;font:400 14.5px/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;border-radius:0;background:transparent;color:var(--tweed);border:1px solid var(--tweed);transition:color .4s}
.dk .iyd-print:not(#_)::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--tweed);color:var(--shell);clip-path:inset(0 100% 0 0);transition:clip-path .4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.dk .iyd-print:not(#_):hover::after,.dk .iyd-print:not(#_):focus-visible::after{clip-path:inset(0 -1% 0 0)}
@media (prefers-reduced-motion:reduce){.bkr .bkr-q:not(#_)[data-label]::after,.pn .pn-q[data-label]::after,.pn .pn-book[data-label]::after{transition:none}}
/* the page's bar, bigger and stronger (Jack, 29 Sep: "i think this bar can be a bit bigger and stronger"): taller, the parts
   of the page in ink a size up with a Bracken mark under the one you are in, a soft shadow where the hairline was */
.pn{border-bottom:0;box-shadow:0 10px 30px rgba(65,64,66,.07)}
.pn .in{min-height:74px}
.pn-parts{gap:4px clamp(18px,2.4vw,36px)}
.pn-parts button{padding:8px 0;font:500 12.5px/1.4 var(--sans);letter-spacing:.16em;color:var(--ink-75);border-bottom:2px solid transparent}
.pn-parts button:hover{color:var(--ink)}
.pn-parts button.here{color:var(--ink);border-bottom-color:var(--bracken)}
.pn-acts{gap:12px}

/* your dates, once chosen: regular weight, not bold (Jack, 29 Sep: "this text highlighed when entering dates is too bold") */
.rp-when{font-size:16px}
.rp-when b{font-weight:400;color:var(--ink)}

/* a heading for screen readers and search only (the route page, 29 Sep audit) */
.iy-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* THE MAP ON A PHONE (route-trail.tsx TrailMapButton; Jack, 29 September 2026: "how does this look and work on mobile ...
   can we still show the map somehow ... there could be a stick show map view button"). Below 900 px the strip is not
   beside the words; a button at the foot, only while among the days, opens it full screen where the reader is. */
.iy-mapbtn,.iy-mapclose{display:none}
@media (max-width:900px){
  .iy-mapbtn{display:inline-flex;align-items:center;gap:10px;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:65;max-width:calc(100% - 120px);min-height:50px;padding:0 22px;border:0;border-radius:0;background:var(--forest);color:var(--shell);font:400 14.5px/1 var(--sans);box-shadow:0 10px 30px rgba(65,64,66,.22);cursor:pointer;transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
  .iy-mapbtn.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
  .iy-mapbtn b{font-weight:500}
  .iy-mapbtn span{opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .iy-mapbtn b+span::before{content:"\00b7";margin-right:10px;opacity:.7}
  /* open: the strip full screen, the day's name and miles at its head, Close in the corner */
  .iy-trail.is-map .iy-trail-stage{display:block;position:fixed;inset:0;top:0!important;height:100dvh!important;z-index:70;background:#F9F5EE}
  .iy-trail.is-map .iy-trail-in{width:100%;opacity:1}
  .iy-trail.is-map .iy-trail-svg{top:84px;height:calc(100% - 84px - 24px - env(safe-area-inset-bottom,0px))}
  .iy-trail.is-map .iy-trail-head{left:20px;top:26px}
  .iy-mapclose{display:inline-flex;align-items:center;position:fixed;top:14px;right:14px;z-index:71;min-height:44px;padding:0 18px;border:1px solid var(--tweed);background:#F9F5EE;color:var(--tweed);font:400 14.5px/1 var(--sans);cursor:pointer}
  .iy-trail.is-map .iy-trail-pop{width:min(232px,calc(100% - 40px))}
  html.iy-map-lock,html.iy-map-lock body{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.iy-mapbtn{transition:none}}

/* THE ROUTE PAGE ON A PHONE (Jack, 29 September 2026: "fully audit and build the page for mobile customers"). Measured at
   375: small capitals under 11 px read as dust on a phone, and a finger needs 44 px to press. */
@media (max-width:900px){
  .p26 .ex-t .eye,.iy-leg,.iy-trail-days .iy-leg{font-size:11px;letter-spacing:.16em}
  .iy-label{font-size:11.5px}
  .iy-go-qr em{font-size:12px}
  .rp-dot{position:relative}
  .rp-dot::after{content:"";position:absolute;inset:-10px}
  .iy-more{display:inline-block;padding:13px 0}
  .iy-ptabs button{min-height:44px}
  .rp-rwords a,.rp-det a{padding:6px 0}
  /* the four buttons under the opening: two by two, the same width, not a ragged wrap */
  .bkr .bkr-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
  .bkr .bkr-q:not(#_){width:100%;padding:0 12px}
}

/* THE ROUTE ON A PHONE, AS AN APP (route-trail.tsx TrailMapButton; Jack, 29 September 2026: "almost feel like its an app on
   their phone"): a bar at the foot, within a thumb's reach, once past the opening; the part you are in lit with a Bracken
   dot; Map in Shell. The cards you choose between swipe sideways, as an app's rows do. */
.iy-appbar{display:none}
@media (max-width:900px){
  .iy-mapbtn{display:none!important}
  .iy-appbar{display:flex;align-items:center;gap:2px;position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--forest);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px rgba(65,64,66,.16);overflow-x:auto;scrollbar-width:none;transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .iy-appbar::-webkit-scrollbar{display:none}
  .iy-appbar.on{transform:none}
  .iy-appbar button{position:relative;flex:1 0 auto;min-height:50px;min-width:62px;padding:0 10px;border:0;background:none;color:rgba(241,237,232,.62);font:500 13.5px/1 var(--sans);cursor:pointer;transition:color .25s;-webkit-tap-highlight-color:transparent}
  .iy-appbar button.here{color:var(--shell)}
  .iy-appbar button.here::after{content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--bracken)}
  .iy-appbar .is-map{flex:0 0 auto;margin-left:6px;padding:0 20px;background:var(--shell);color:var(--forest);font-weight:600}
  html.iy-appbar-on body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  html.iy-appbar-on .bellfab{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;transition:bottom .35s cubic-bezier(.2,.7,.2,1)}
  /* the cards you choose between swipe sideways, a card and a bit showing so the row reads as a row */
  .iy-pgrid.iy-stays{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--edge));padding:0 var(--edge) 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .iy-pgrid.iy-stays>*{flex:0 0 74%;scroll-snap-align:start}
  .iy-pgrid.iy-stays::-webkit-scrollbar,.rp-todo-beds .rp-bstays::-webkit-scrollbar{display:none}
  .rp-todo-beds .rp-bstays{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}
  .rp-todo-beds .rp-bstays>*{flex:0 0 74%;scroll-snap-align:start}
  .iy-pmore{display:none}
}
/* six at first on a desk, the rest after Show all; a phone's swiping row holds every one (the same markup for both, so the
   server's page and the phone's agree) */
@media (min-width:901px){.iy-pgrid.is-cut>:nth-child(n+7){display:none}}
/* a press on the bar lands a part just under the site bar, its heading in sight */
@media (max-width:900px){.iy-has-trail [data-hs]{scroll-margin-top:72px}}

/* the phone, seen by eye (Jack, 29 Sep: "seem sto be issues, visually audit it all") */
@media (max-width:900px){
  /* the four buttons two by two: the golf sheet's .p26 .bkr-acts loads later at the same weight */
  .bkr .bkr-acts:not(#_){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
  /* the beds inside the card line up with its ticks and words, not past its edge */
  .rp-todo-beds .rp-bstays{margin:0;padding:0 0 4px}
  .rp-todo-beds .rp-bstays>*{flex:0 0 78%}
  .iy-appbar button{font-size:14.5px}
  .iy-island-over .i1{font-size:10px}
  .iy-island-over .i2{font-size:12px}
}
/* a swipe row settles its cards on the text's edge, not the screen's (the first card sat at 0, 29 Sep) */
@media (max-width:900px){.iy-pgrid.iy-stays{scroll-padding-inline:var(--edge)}}
/* a swipe row keeps room under its cards' last line (overflow on one axis clips the other) */
@media (max-width:900px){.iy-pgrid.iy-stays,.rp-todo-beds .rp-bstays{padding-bottom:12px}}

/* the route page's photographers, one small line at its foot (Google's terms and CC BY-SA; Jack, 30 September 2026:
   "make it as small as possible though"): the listing's credits line, set the same */
.p26 > .credits{max-width:1400px;margin:28px auto 0;padding:0 var(--edge) 28px;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}

/* THE WALK PAGE, W3 "The map leads" (route.tsx walkW3; Jack, 7 October 2026, of Mount Keen: "is there not something
   better we can do here - its in itineary format but only has one stop"; he chose W3 of
   http://localhost:8080/design-2026/walk-page/). The sheet's own class names and values, scoped to the walk page's main
   (data-walk) so they touch no other page: the map large on the left from the first line, sticky under the bars while the
   words beside it scroll; the name, the overview and the walk's card in rows (no rules between them); the walk's
   photograph across the frame; the walk in its own words on the reading column. On a phone the two columns stack, the map
   first. */
.p26[data-walk]{--sw:520px;--col:720px;--wtw:min(1200px,calc(100% - 48px));background:#F9F5EE;padding-top:clamp(48px,6vw,96px)}
.p26[data-walk] .frame{max-width:var(--wtw);margin:0 auto}
/* on trial with ?hero=1: the photograph and the forest bar first, as a listing opens (9 October 2026) */
.p26[data-walk][data-hero]{padding-top:0;--wtw:min(1280px,calc(100% - 2 * var(--edge)))}
.p26[data-walk][data-hero] .side{margin-top:clamp(44px,5vw,72px)}
.p26[data-walk][data-hero] .side .sum{margin-top:0}
/* the facts beside the map, neatened (Jack, 9 October 2026: "neaten up this part its a bit busy and messy"): a
   narrower measure, air under the opening words, one fine rule between facts, the label on the first line of its fact */
.p26[data-walk][data-hero] .side>div:last-child{max-width:680px}
.p26[data-walk][data-hero] .rest{font-size:18px;line-height:1.65}
.p26[data-walk][data-hero] .rows{margin-top:34px;border-top:1px solid var(--stone-2)}
.p26[data-walk][data-hero] .rows div{grid-template-columns:150px minmax(0,1fr);gap:0 20px;padding:17px 0;border-bottom:1px solid var(--stone-2);align-items:baseline}
.p26[data-walk][data-hero] .rows dt{font:500 12px/1.5 var(--sans);letter-spacing:.14em}
.p26[data-walk][data-hero] .rows dd{font:400 18px/1.55 var(--serif);color:var(--ink)}
@media (max-width:760px){.p26[data-walk][data-hero] .rows div{grid-template-columns:minmax(0,1fr);gap:4px 0}}
.p26[data-walk] .col{max-width:min(var(--col),var(--wtw));margin:0 auto}
.p26[data-walk] .gap{height:clamp(44px,5vw,72px)}
.p26[data-walk] .side{display:grid;grid-template-columns:var(--sw) minmax(0,1fr);gap:clamp(28px,3.4vw,60px);align-items:start}
.p26[data-walk] .stick{position:sticky;top:calc(var(--bar) + 74px + 24px)}
.p26[data-walk] .map{position:relative;line-height:0}
.p26[data-walk] .map img{width:100%;height:auto;display:block}
.p26[data-walk] .map svg{position:absolute;inset:0;width:100%;height:100%}
.p26[data-walk] .pt circle{fill:var(--ink)}
.p26[data-walk] .pt text{font:600 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:var(--ink)}
.p26[data-walk] .pt text.s{font:italic 400 11px var(--serif);letter-spacing:0;text-transform:none;fill:var(--ink-75)}
.p26[data-walk] .kick{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin:0 0 14px}
.p26[data-walk] .chap{margin:0 0 20px;font:400 min(clamp(32px,3.4vw,48px), 28px + (clamp(32px,3.4vw,48px) - 28px) * 0.6)/1.1 var(--face);color:var(--ink)}
.p26[data-walk] .sum{margin:0 0 16px;font:400 min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6)/1.3 var(--face);color:var(--ink)}
.p26[data-walk] .rest{margin:0 0 18px;font:400 17px/1.6 var(--serif);color:var(--ink-75)}
.p26[data-walk] .side .rest:last-of-type{margin-bottom:0}
.p26[data-walk] .bkr-acts{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 36px}
.p26[data-walk] .btn2{display:inline-flex;align-items:center;height:50px;padding:0 25px;font:400 14.5px/1 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;color:var(--tweed);background:none;border:1px solid var(--tweed);cursor:pointer;transition:background .2s,color .2s}
.p26[data-walk] .btn2:hover,.p26[data-walk] .btn2:focus-visible{background:var(--tweed);color:var(--shell)}
.p26[data-walk] .rows{margin:0;padding:0}
.p26[data-walk] .rows div{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr);gap:0 24px;padding:14px 0}
.p26[data-walk] .rows dt{font:500 11px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.p26[data-walk] .rows dd{margin:0;font:400 17px/1.5 var(--serif);color:var(--ink)}
.p26[data-walk] .frame>img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
/* the stop after the walk, as a stop is shown beside the trail: no line, no dot, on the column's edge */
.p26[data-walk] .iy-line{max-width:none}
.p26[data-walk] .iy-line::before,.p26[data-walk] .iy-dot{display:none}
.p26[data-walk] .iy-row{padding-left:0}
.p26[data-walk] .iy-leg{margin-left:0}
.p26[data-walk] .kick + .iy-line{margin-top:30px}
.p26[data-walk] .rp-day{max-width:none;margin-top:clamp(24px,3vw,40px)}
/* further reading, the sight page's Find out more as it was, on the frame's edge (it stood at the 1400 column, 40px left of it) */
.p26[data-walk] .wl.intro > .in{max-width:calc(var(--wtw) + 2 * var(--edge))}
@media (max-width:900px){
  .p26[data-walk]{--wtw:calc(100% - 2 * var(--edge));padding-top:24px}
  .p26[data-walk] .side{grid-template-columns:1fr}
  .p26[data-walk] .stick{position:static}
}
/* on a phone the card's label sits above its words, and the map's names are set larger, as the trail's overview's are */
@media (max-width:600px){
  .p26[data-walk] .rows div{grid-template-columns:minmax(0,1fr);gap:6px 0}
  .p26[data-walk] .pt text{font-size:12px}
  .p26[data-walk] .pt text.s{font-size:13px}
}
/* A MUNRO'S LISTING (pages/munros/hill.tsx, 9 October 2026). The normal listing's page with the September Munro
   drawing's parts in it (Jack: "it should look like the normal listing but i like the On the hill today section").
   Everything else on the page is the listing's own; these are the few things it did not have, named mnr- (a prefix
   used nowhere else). One left edge throughout: every band is a .band with an .in. Type no smaller than 16px. */
.p26.mnr section.band.mnr-today,.p26.mnr section.band.mnr-before,.p26.mnr section.band.mnr-readers,.p26.mnr section.band.mnr-cards{padding:clamp(64px,10vh,120px) 0}
.p26.mnr section.band.mnr-before:not(.stone):not(.forest),.p26.mnr section.band.mnr-cards:not(.stone):not(.forest){padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(64px,10vh,120px)}
.p26.mnr .mnr-shots{padding:clamp(64px,10vh,120px) 0 clamp(40px,6vh,72px)}
.p26.mnr section.mnr-stone{background:var(--stone)}
.p26.mnr section.wl.intro.gl-more.mnr-stone{padding-bottom:clamp(64px,10vh,120px)}
/* the keepers' one warning, large over the summit ridge: every property stated, since the quotation band's own sheet
   is not one this page loads */
.mnr-say{position:relative;display:grid;place-items:center;min-height:clamp(440px,62vh,680px);padding:clamp(64px,10vh,120px) clamp(20px,4vw,60px);overflow:hidden;background:var(--forest)}
.mnr-say img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mnr-say::after{content:"";position:absolute;inset:0;background:rgba(22,26,20,.5)}
.mnr-say blockquote{position:relative;z-index:1;margin:0;max-width:22ch;text-align:center;font:italic 400 min(clamp(34px,3.6vw,56px), 28px + (clamp(34px,3.6vw,56px) - 28px) * 0.6)/1.18 var(--serif);color:#fff}
.mnr-say cite{display:block;margin-top:28px;font:400 11px/1.6 var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.mnr-say cite b{font-weight:600;color:#fff}
.p26.mnr .av-k{display:block;margin:0 0 clamp(22px,2.4vw,34px)}
.mnr-stone{background:var(--stone)}
.mnr-stone+.mnr-stone{padding-top:0}
/* on the hill today: the summit large, three days beside it, a quiet line under; then the calendar and its panel */
.mnr-now{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.95fr);gap:clamp(28px,5vw,96px);align-items:end}
.mnr-top b{display:block;font:400 min(clamp(60px,7.2vw,112px), 28px + (clamp(60px,7.2vw,112px) - 28px) * 0.6)/.95 var(--face);letter-spacing:-.02em;color:var(--ink)}
.mnr-top i{display:block;margin-top:16px;font:italic 400 19px/1.5 var(--serif);color:var(--ink)}
.mnr-top p{margin-top:14px;font:400 17px/1.7 var(--serif);color:var(--ink-75,var(--ink))}
.mnr-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px)}
.mnr-days>div{padding-top:18px;border-top:1px solid var(--ink)}
.mnr-days span{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.mnr-days b{display:block;margin-top:14px;font:400 min(clamp(22px,1.9vw,28px), 28px + (clamp(22px,1.9vw,28px) - 28px) * 0.6)/1.15 var(--face);color:var(--ink)}
.mnr-days i{display:block;margin-top:8px;font:italic 400 16px/1.5 var(--serif);color:var(--ink-75,var(--ink))}
.mnr-fine{margin-top:clamp(22px,2.4vw,34px);max-width:760px;font:italic 400 16px/1.6 var(--serif);color:var(--ink-55)}
.mnr-fine a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mnr-today .avail{margin-top:0}
/* A Munro whose photographs are all upright (Jack, 11 October 2026, from public/design-2026/munro-uprights.html, numbers 6 and 4):
   three prints on the paper with the name beneath, or the name in ink with one upright beside it. Nothing is written
   over a photograph. Space divides the prints; no lines. */
.p26.mnr .mnr-prints,.p26.mnr .mnr-paper{background:var(--shell);color:var(--ink)}
.p26.mnr .mnr-prints{padding:clamp(24px,3.6vw,56px) 0 clamp(28px,3.4vw,52px)}
.p26.mnr .mnr-prints-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.4vw,20px)}
.p26.mnr .mnr-prints-row img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.p26.mnr .mnr-prints-txt{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(22px,2.6vw,36px)}
.p26.mnr .mnr-prints h1,.p26.mnr .mnr-paper h1{font-family:var(--face);font-weight:400;font-size:min(clamp(32px,5vw,74px), 28px + (clamp(32px,5vw,74px) - 28px) * 0.6);line-height:1.02;margin:0;color:var(--ink)}
.p26.mnr .mnr-up-rg{font-family:var(--sans);font-size:11px;font-weight:600;line-height:1;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px}
.p26.mnr .mnr-up-line{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(18px,1.6vw,23px);line-height:1.3;margin:16px 0 0}
.p26.mnr .mnr-up-by{font-family:var(--sans);font-size:10px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);margin:0}
.p26.mnr .mnr-up-by a{color:inherit;text-underline-offset:3px}
.p26.mnr .mnr-paper{padding:clamp(24px,3.6vw,56px) 0}
.p26.mnr .mnr-paper .in{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,64px);align-items:end}
.p26.mnr .mnr-paper .mnr-up-by{margin-top:26px}
.p26.mnr .mnr-paper-fr{position:relative;height:min(64vh,600px);aspect-ratio:3/4;overflow:hidden}
.p26.mnr .mnr-paper-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
.p26.mnr .mnr-paper-fr img.on{opacity:1}
@media (max-width:760px){
  .p26.mnr .mnr-prints-txt{display:block}
  .p26.mnr .mnr-prints-txt .mnr-up-by{margin-top:16px}
  .p26.mnr .mnr-paper .in{grid-template-columns:1fr}
  .p26.mnr .mnr-paper-fr{order:-1;height:auto;width:100%;aspect-ratio:4/5}
}
/* the opening photograph's own credit, small at the foot of the photograph on the right of the page's column; on a narrow
   screen it drops under the title's line, where there is no room beside it */
.p26.mnr .hero .w .in{position:relative}
.p26.mnr .hero .mnr-heroby{position:absolute;right:var(--edge,0px);bottom:0;margin:0;font-family:var(--sans);font-size:10px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:rgba(249,245,238,.92);text-shadow:0 0 2px rgba(8,10,14,.85),0 1px 12px rgba(8,10,14,.75)}
.p26.mnr .hero .mnr-heroby a{color:inherit;text-decoration:underline;text-decoration-color:rgba(249,245,238,.45);text-underline-offset:3px}
.p26.mnr .hero .mnr-heroby a:hover{color:#fff;text-decoration-color:#fff}
@media (max-width:760px){.p26.mnr .hero .mnr-heroby{position:static;margin-top:14px}}
/* the line naming a licensed photograph's photographer: the listing's own quiet credit line, on the page's column */
.p26.mnr .mnr-by .credits{max-width:1400px;margin:14px auto 0;padding:0 var(--edge) 28px;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
/* the summit's weather behind its figures: the Daily's sky on a dark ground, every colour of the band's type restated for it */
.p26.mnr section.band.mnr-sky{position:relative;overflow:hidden;padding:clamp(72px,11vh,132px) 0;background:#2B301D;color:#fff}
.p26.mnr section.band.mnr-sky:not(.stone):not(.forest){padding-top:clamp(72px,11vh,132px);padding-bottom:clamp(72px,11vh,132px)}
.mnr-sky .fd-sky{position:absolute;inset:0;z-index:0;display:block;pointer-events:none;left:0;width:auto}
.mnr-sky .fd-sky canvas{display:block;width:100%;height:100%}
.mnr-sky .mnr-film{overflow:hidden;background:#2B301D}
.mnr-sky .mnr-film video{display:block;width:100%;height:100%;object-fit:cover}
.mnr-sky::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,10,14,.34),rgba(8,10,14,.52));pointer-events:none}
.mnr-sky .in{position:relative;z-index:1}
.p26.mnr .mnr-sky .av-k{color:#fff}
.mnr-sky .mnr-top b{color:#fff;text-shadow:0 1px 26px rgba(4,6,10,.7)}
.mnr-sky .mnr-top i{color:#fff;text-shadow:0 1px 20px rgba(4,6,10,.66)}
.mnr-sky .mnr-top p{color:#EDE9E3;text-shadow:0 1px 18px rgba(4,6,10,.66)}
.mnr-sky .mnr-days>div{border-top-color:rgba(255,255,255,.6)}
.mnr-sky .mnr-days span{color:rgba(255,255,255,.8)}
.mnr-sky .mnr-days b{color:#fff;text-shadow:0 1px 20px rgba(4,6,10,.66)}
.mnr-sky .mnr-days i{color:#EDE9E3;text-shadow:0 1px 18px rgba(4,6,10,.66)}
.mnr-sky .mnr-fine{color:rgba(255,255,255,.82);text-shadow:0 1px 18px rgba(4,6,10,.66)}
.mnr-sky .mnr-fine a{color:#fff}
.mnr-day{margin:22px 0 0;padding:0}
.mnr-day>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0 18px;padding:12px 0;border-top:1px solid var(--on-forest-20,rgba(255,255,255,.2))}
.mnr-day dt{font:600 10.5px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-forest-55,rgba(255,255,255,.6))}
.mnr-day dd{margin:0;font:400 16.5px/1.5 var(--serif);color:var(--on-forest,#fff)}
/* before you go: two short lists side by side; from our readers: the reports and the forest panel side by side */
.mnr-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:start}
.mnr-before h3{font:400 min(clamp(26px,2.3vw,34px), 28px + (clamp(26px,2.3vw,34px) - 28px) * 0.6)/1.1 var(--face);color:var(--ink);margin:0 0 20px}
.mnr-before ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.mnr-before li{padding:14px 0;border-bottom:1px solid var(--stone-2);font:400 18px/1.5 var(--serif);color:var(--ink)}
.mnr-before .mnr-two p{margin-top:20px;max-width:46ch;font:italic 400 17px/1.6 var(--serif);color:var(--ink-75,var(--ink))}
.mnr-readers .mnr-two{grid-template-columns:minmax(0,1fr) minmax(320px,.7fr)}
.mnr-lead{max-width:22ch;font:400 min(clamp(28px,2.6vw,40px), 28px + (clamp(28px,2.6vw,40px) - 28px) * 0.6)/1.2 var(--face);color:var(--ink)}
.mnr-report{padding:20px 0;border-top:1px solid var(--stone-2)}
.mnr-report span{display:block;font:600 10.5px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55)}
.mnr-report p{margin-top:8px;max-width:52ch;font:400 19px/1.6 var(--serif);color:var(--ink)}
.mnr-readers .pick{position:static}
.mnr-when{margin-bottom:clamp(40px,5vw,72px)}
.mnr-when .cal{margin-top:20px;padding-bottom:0;background:transparent}
.p26 .mnr-when .days .past,.p26 .mnr-when .days .booked{background:var(--oat-13);color:rgba(65,64,66,.4);pointer-events:none;cursor:default}
.p26 .mnr-when .days .today::after{display:none}
.p26 .mnr-when .days .from,.p26 .mnr-when .days .from:hover{background:var(--bracken,#C08C3D);color:#FBF9F6}
.mnr-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mnr-pick label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--on-forest-55,rgba(255,255,255,.55));font:400 15px/1 var(--sans);color:var(--on-forest,#fff);cursor:pointer;border-radius:0}
.mnr-pick label[data-on]{background:var(--on-forest,#fff);color:var(--forest);border-color:var(--on-forest,#fff)}
.mnr-pick input{position:absolute;opacity:0;width:1px;height:1px}
.mnr-pick label:focus-within{outline:2px solid var(--on-forest,#fff);outline-offset:2px}
.mnr-readers textarea{display:block;width:100%;margin-top:16px;padding:14px 16px;background:transparent;border:1px solid var(--on-forest-55,rgba(255,255,255,.55));border-radius:0;font:400 17px/1.5 var(--serif);color:var(--on-forest,#fff);resize:vertical}
.mnr-readers textarea::placeholder{color:var(--on-forest-55,rgba(255,255,255,.6))}
.mnr-readers .pick .btns{margin-top:20px}
.mnr-foot{padding:clamp(32px,4vw,56px) 0!important}
.mnr-foot .mnr-fine{margin-top:0;max-width:none}
@media(max-width:900px){.mnr-now,.mnr-two,.mnr-readers .mnr-two{grid-template-columns:minmax(0,1fr)}.mnr-days{grid-template-columns:minmax(0,1fr)}}