/* GENERATED by scratchpad/design-2026/build-home-merge.py from C:/Users/jack/design/home-merge.html. Do not edit: change the mock or the builder. */
.lp-page .hm-line{display:block;margin-top:12px;font:400 clamp(14px,1.02vw,19px)/1.45 var(--read);color:rgba(255,255,255,.88);min-height:1.45em;transition:opacity .45s}
.lp-page .hm-line b{font-weight:500;color:#fff}
.lp-page .hm-placebox{position:absolute;z-index:2;left:var(--edge);bottom:26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;max-width:60%}
.lp-page .hm-placebox .lp-place{position:static}
.lp-page .hm-filmwx{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);transition:opacity .6s}
.lp-page .hm-filmwx i{font-style:normal;color:#C08C3D}
.lp-page .hm-foot{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;align-items:center;gap:28px;padding:0 var(--edge);height:54px;
  background:rgba(20,16,12,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden}
.lp-page .hm-foot b{font-family:var(--face);font-weight:400;font-size:16px;color:#fff;margin-left:6px}
.lp-page .hm-foot a{margin-left:auto;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
.lp-page .hm-foot .dot{width:7px;height:7px;border-radius:50%;background:#C08C3D;display:inline-block;margin-right:8px;animation:hm-pulse 2.4s ease-in-out infinite}
@keyframes hm-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.lp-page .hm-has-foot .hm-placebox{bottom:74px}
.lp-page .hm-now{position:absolute;z-index:3;right:var(--edge);bottom:26px;width:300px;padding:18px 20px 16px;color:#fff;
  background:rgba(20,16,12,.40);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16)}
.lp-page .hm-now .lp-kick{opacity:.75}
.lp-page .hm-now dl{margin-top:10px;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:14px;line-height:1.35}
.lp-page .hm-now dt{font-family:var(--sans);font-size:11px;letter-spacing:.06em;opacity:.7;padding-top:2px}
.lp-page .hm-now dd{font-family:var(--read)}
.lp-page .hm-now a{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
.lp-page .hm-has-foot .hm-now{bottom:74px}
.lp-page .hm-foot[hidden],.lp-page .hm-now[hidden]{display:none}
.lp-page .hm-find{position:relative;display:flex;gap:10px;align-items:center}
.lp-page .hm-find input{width:min(420px,38vw);height:50px;padding:0 18px;border:1px solid var(--tweed);background:var(--paper);font:400 16px var(--read);color:var(--ink)}
.lp-page .hm-find input::placeholder{color:rgba(65,64,66,.5)}
.lp-page .hm-sug{position:absolute;top:56px;left:0;width:min(420px,38vw);background:var(--paper);border:1px solid var(--stone-2);box-shadow:0 12px 30px rgba(0,0,0,.12);z-index:5;display:none}
.lp-page .hm-sug.on{display:block}
.lp-page .hm-sug a{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;font-family:var(--face);font-size:17px;border-top:1px solid var(--stone)}
.lp-page .hm-sug a:first-child{border-top:0}
.lp-page .hm-sug a span{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;align-self:center}
.lp-page .hm-sug a:hover{background:var(--oat)}
@media (max-width:820px){
  .lp-page .hm-find{width:100%;flex-wrap:wrap}
  .lp-page .hm-find input,.lp-page .hm-sug{width:100%}
  .lp-page .hm-find .lp-btn{width:100%}
  .lp-page .lp-head:has(.hm-find){flex-direction:column;align-items:stretch}
  .lp-page .hm-now{display:none}
  .lp-page .hm-foot{gap:18px;font-size:12px}
  .lp-page .hm-foot .opt{display:none}
  .lp-page .hm-placebox{max-width:calc(100% - 2*var(--edge))}
}
/* the trial: the search under the welcome paragraph, once the doors grid is gone */
.lp-page .lp-welcome .hm-find{margin-top:28px}
/* the trial: the feed starts where the hero ends */
#hm-feed .ex-sec.h3-bands{padding-top:0}
/* a feed film in turns: the films stacked, a line per film filling as it runs */
#hm-feed .fd-pic.fd-reel{aspect-ratio:16/10;background:#2b301d}
#hm-feed .fd-reel video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:0;transition:opacity .9s ease}
#hm-feed .fd-reel video.on{opacity:1}
#hm-feed .fd-reel .fd-over{z-index:2}
#hm-feed .fd-reel-bar{position:absolute;left:15px;right:15px;top:14px;z-index:2;display:flex;gap:5px}
#hm-feed .fd-reel-bar i{flex:1;height:2px;position:relative;overflow:hidden;background:rgba(255,255,255,.32)}
#hm-feed .fd-reel-bar i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
#hm-feed .fd-reel-bar i.done::after{transform:scaleX(1)}
#hm-feed .fd-reel-bar i.run::after{animation:fd-reel-fill var(--fd-reel-run,5500ms) linear forwards}
@keyframes fd-reel-fill{to{transform:scaleX(1)}}
/* the home: on a phone the feed stands on the band's edge */
@media (max-width:1000px){
  #hm-feed .h3-feed .fd-it{padding-left:clamp(16px,5.4vw,78px);padding-right:clamp(16px,5.4vw,78px)}
}
/* the live hero (hero-live.tsx): the film, the title, the live line with its light, the regions two squares each */
html:has(.hl-hero) header.site .flow a{font-size:19px}
/* the bar over the film readable whatever the film (Jack, 6 October 2026: "the menu is quite hard to read sometimes"):
   the words at full strength with a soft shadow while the bar is glass, and the top of the film darkened under it */
html:has(.hl-hero) header.site.glass .flow a,html:has(.hl-hero) header.site.glass .right,html:has(.hl-hero) header.site.glass .right a{opacity:1;text-shadow:0 1px 14px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.35)}
html:has(.hl-hero) header.site.glass .mk img{filter:brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.45))}
.hl-hero{--hl-sq:132px;--hl-ts:21px;--hl-veil:.34;--hl-day:#C08C3D;--hl-dusk:#414042;--hl-live:#AFA065;
  /* a little under a full screen, so the band below shows (Jack, 6 October 2026: "reduce the whole height of the hero
     slightly so more of the section below is seen") */
  position:relative;height:88vh;min-height:620px;max-height:980px;overflow:hidden;background:#2b301d;color:#fff;isolation:isolate;
  /* under the glass bar, as the landing's reel was */
  margin-top:calc(-1 * var(--bar,76px))}
.hl-film{position:absolute;inset:0;z-index:0}
.hl-film video,.hl-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
/* one film into the next (hero-live.tsx): the new one fades in over the old, a little longer and softer */
.hl-film video{transition:opacity 1.6s cubic-bezier(.45,0,.25,1)}
.hl-film .on{opacity:1}
.hl-film img.on{animation:hl-drift 30s ease-out both}
@keyframes hl-drift{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hl-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 190px),linear-gradient(180deg,rgba(0,0,0,calc(var(--hl-veil) * .9)) 0%,rgba(0,0,0,calc(var(--hl-veil) * .45)) 30%,rgba(0,0,0,calc(var(--hl-veil) * .5)) 60%,rgba(0,0,0,calc(var(--hl-veil) * 1.5)) 100%)}
/* centred between the bar and the region cards (Jack, 6 October 2026: "this part needs moved down slightly so its centered") */
.hl-words{position:absolute;z-index:5;left:clamp(16px,5.4vw,78px);right:clamp(16px,5.4vw,78px);top:calc(50% - 62px);transform:translateY(-50%);text-align:center}
.hl-h1{font:400 min(clamp(44px,3.5vw,76px), 28px + (clamp(44px,3.5vw,76px) - 28px) * 0.6)/1.06 var(--face);margin:0 auto;letter-spacing:-.01em;color:#fff}
.hl-t{margin:22px auto 0;max-width:820px;min-height:calc(var(--hl-ts) * 1.45 * 2);font:400 var(--hl-ts)/1.45 var(--serif);color:#fff}
/* the live line is small white words: a soft shadow keeps them read over a pale photograph (a region's inner page with no film, 12 October 2026) */
.hl-t{text-shadow:0 1px 2px rgba(0,0,0,.35),0 0 22px rgba(0,0,0,.4)}
.hl-t a{color:inherit;text-decoration:none}
.hl-t a:hover{border-bottom:1px solid rgba(255,255,255,.55)}
.hl-t b{font-weight:500;font-variant-numeric:tabular-nums}
.hl-lv{display:inline;animation:hl-fade .8s ease both}
@keyframes hl-fade{from{opacity:0}to{opacity:1}}
.hl-dot{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--hl-live);margin-right:.6em;vertical-align:.12em;
  box-shadow:0 0 0 0 rgba(175,160,101,.6);animation:hl-pulse 2s infinite}
@keyframes hl-pulse{0%{box-shadow:0 0 0 0 rgba(175,160,101,.6)}70%{box-shadow:0 0 0 .55em rgba(175,160,101,0)}100%{box-shadow:0 0 0 0 rgba(175,160,101,0)}}
/* the strip: the ribbon and its two arrows (Jack, 6 October 2026: "add left and right swipe arrows for the regions also
   as soon as user hovers over them so they can manually go through too") */
.hl-strip{position:absolute;z-index:6;left:0;right:0;bottom:clamp(44px,6.5vh,72px)}
.hl-ribbon{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.hl-shift{transform:translateX(var(--hl-nudge,0px));transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.hl-shift.jump{transition:none}
.hl-track{display:flex;gap:12px;width:max-content;padding-top:10px;animation:hl-slide 160s linear infinite}
/* the arrows: square, ink with a shell arrow, at each end of the strip; shown while the strip is pointed at */
.hl-arr{all:unset;box-sizing:border-box;position:absolute;z-index:7;top:calc(50% + 5px);transform:translateY(-50%);width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(65,64,66,.86);color:#F6F1E8;
  font:400 22px/1 var(--sans);opacity:0;pointer-events:none;transition:opacity .3s,background .25s,color .25s}
.hl-arr.prev{left:clamp(16px,5.4vw,78px)}.hl-arr.next{right:clamp(16px,5.4vw,78px)}
.hl-strip:hover .hl-arr,.hl-strip:focus-within .hl-arr{opacity:1;pointer-events:auto}
.hl-arr:hover{background:#C08C3D;color:#414042}
.hl-arr:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (hover:none){.hl-arr{opacity:1;pointer-events:auto;width:44px;height:44px}}
.hl-strip:hover .hl-track,.hl-hero.off .hl-track,.hl-hero.held .hl-track{animation-play-state:paused}
@keyframes hl-slide{to{transform:translateX(-50%)}}
.hl-rc{display:grid;grid-template-columns:var(--hl-sq) var(--hl-sq);height:var(--hl-sq);text-decoration:none;flex:none;cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .4s;outline:0 solid #fff;outline-offset:3px}
.hl-ph{display:block;overflow:hidden;background:#333}
.hl-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.hl-rc:hover .hl-ph img{transform:scale(1.06)}
.hl-tx{display:flex;flex-direction:column;justify-content:space-between;padding:13px 14px 12px;background:var(--hl-day);color:#414042}
.hl-rc.dark .hl-tx{background:var(--hl-dusk);color:#fff}
/* a place to stay free this week (/stay): its words square forest green */
.hl-rc.free .hl-tx{background:#2B301D;color:#F6F1E8}
/* A STAY'S FREE DATES AS BUTTONS (/stay, Jack, 6 October 2026: "new feed design looks great"): each date an ink cell
   with a gold Book cell after it, square, the whole a way to book those nights */
#hm-feed .fd-dates > span{display:flex;flex-wrap:wrap;gap:8px}
#hm-feed .fd-dates a{display:inline-flex;align-items:stretch;border:0;border-radius:0;padding:0;background:none;
  font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
#hm-feed .fd-dates a::before{content:attr(data-d);display:flex;align-items:center;padding:15px 18px;background:#414042;color:#F6F1E8}
#hm-feed .fd-dates a::after{content:"Book \2192";display:flex;align-items:center;padding:15px 18px;background:#C08C3D;color:#414042}
#hm-feed .fd-dates a:hover::before{background:#2B301D}
#hm-feed .fd-dates a{font-size:0}
/* a size larger, the days of the week left out (Jack, 6 October 2026: "a little bigger ... leave out the days just dates") */
#hm-feed .fd-dates a::before,#hm-feed .fd-dates a::after{font-size:13px;letter-spacing:.08em}
/* the names a size down so the longest (Aberdeenshire) stands clear of the square's edge (Jack, 6 October 2026) */
.hl-n{font:400 15.5px/1.12 var(--face);padding-right:6px}
/* the way into the region chosen: a gold square button under the line, room for it always kept (Jack, 6 October 2026:
   "we should probably have a link to then move on to that region page ... something simple but goes with design") */
.hl-go{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:13px 20px;background:#C08C3D;color:#414042;
  font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,background .25s}
.hl-go i{font-style:normal;font-size:15px;letter-spacing:0;transition:transform .3s}
.hl-go:hover{background:#F6F1E8}.hl-go:hover i{transform:translateX(4px)}
.hl-hero.held .hl-go{visibility:visible;opacity:1;transform:none}
/* a hero with a way on of its own shows it before any card is held (the Stay page's Find your stay, 6 October 2026) */
.hl-hero.hl-ask .hl-go{visibility:visible;opacity:1;transform:none}
.hl-m{font:500 10px/1.45 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.82;font-variant-numeric:tabular-nums}
.hl-hero.held .hl-rc{opacity:.55}
.hl-hero.held .hl-rc.on{opacity:1;transform:translateY(-8px);outline-width:1px}
@media (max-width:820px){
  .hl-hero{--hl-sq:104px;--hl-ts:17px}
  .hl-words{top:34%}
  /* a phone's squares are smaller: a long name breaks onto two lines, as Inverness-shire does */
  .hl-n{font-size:15px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .hl-t{min-height:calc(var(--hl-ts) * 1.45 * 3)}
}
@media (prefers-reduced-motion:reduce){.hl-track,.hl-film img.on,.hl-lv,.hl-dot{animation:none}}
/* THE REGIONS UNDER THE FILM (the home page, Jack, 8 October 2026: "move this attached part to below the hero"; each card
   simply its region's page, hero-live.tsx's under). The film keeps the hero's height; the strip stands on the page's own
   ground beneath it, its arrows centred on the squares; the words centred between the bar and the film's foot. */
.hl-hero.hl-under{--hl-h:clamp(620px,88vh,980px);height:auto;min-height:0;max-height:none;padding-top:var(--hl-h);background:none;color:inherit}
.hl-under .hl-film,.hl-under .hl-veil{bottom:auto;height:var(--hl-h)}
.hl-under .hl-film{background:#2b301d}
.hl-under .hl-words{top:calc((var(--hl-h) + var(--bar,76px)) / 2)}
/* the hero with no cards along its foot and nothing under it (/stay, 9 October 2026): the words stood 62px high to
   leave the cards their room; with the cards gone they stand in the middle of what shows under the bar, on a phone too */
.hl-plain .hl-words{top:calc(50% + var(--bar,76px) / 2)}
@media (max-width:760px){.hl-plain .hl-words{top:calc(50% + var(--bar,76px) / 2)}}
.hl-under .hl-strip{position:relative;bottom:auto;margin-top:clamp(24px,2.6vw,40px)}
.hl-under .hl-arr:focus-visible{outline-color:#414042}
/* the intro between the film and the regions (Jack, 8 October 2026: "underneath the hero lets actually put the intro ...
   justified in the middle nicely spaced out"): the welcome's paragraph, centred, a short measure, room either side */
.hl-intro{position:relative;z-index:6;box-sizing:border-box;max-width:calc(35em + 2 * clamp(16px,5.4vw,78px));margin:0 auto;
  /* more room above and below (Jack, 8 October 2026: "give more space above ad below the intro text space please") */
  padding:clamp(88px,9vw,168px) clamp(16px,5.4vw,78px) clamp(88px,9vw,168px);text-align:center;text-wrap:balance;
  font:400 clamp(19px,1.3vw,24px)/1.8 var(--serif);color:#414042}
.hl-under .hl-intro + .hl-strip{margin-top:0}
/* THE SIX WAYS IN (Jack, 12 October 2026, V1 of /design-2026/home-ways/: "can we add something here, a CTA for our
   main things, maybe small boxes"): six small square photographs under the introduction, the name beneath each in
   Jost capitals; the introduction's room below moves under them */
.hl-intro:has(+ .hl-ways){padding-bottom:0}
.hl-ways{position:relative;z-index:6;display:flex;justify-content:center;gap:14px;margin:0 auto;padding:clamp(40px,3vw,56px) 16px clamp(88px,9vw,168px)}
.hl-ways a{width:104px;text-align:center;color:#414042;text-decoration:none}
.hl-ways img{display:block;width:104px;height:104px;object-fit:cover;transition:transform .5s ease}
.hl-ways a:hover img{transform:translateY(-4px)}
.hl-ways b{display:block;margin-top:11px;font:500 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
@media (max-width:760px){.hl-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px;max-width:360px}
  .hl-ways a{width:auto}.hl-ways img{width:100%;height:auto;aspect-ratio:1}.hl-ways b{font-size:11.5px;letter-spacing:.07em}}
@media (prefers-reduced-motion:reduce){.hl-ways img{transition:none}}
/* THE CORNER (Jack, 8 October 2026: "on the bottom left of hero can you add time date and location info"): the region
   pages' .cv-here, read back off /region/isle-of-skye at 1920 - Jost 500 10/14, tracked 1.4px, capitals, shell at 88%,
   the green light, short shell rules between - set 37px above the film's foot on the hero's own gutter */
.hl-here{position:absolute;z-index:6;left:clamp(16px,5.4vw,78px);right:clamp(16px,5.4vw,78px);top:calc(var(--hl-h) - 51px);display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font:500 10px/14px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:rgba(249,245,238,.88);text-shadow:0 1px 10px rgba(65,64,66,.75);pointer-events:none}
.hl-here .hl-dot{width:7px;height:7px;margin:0;vertical-align:0}
/* ONE THING WORTH KNOWING (Jack, 12 October 2026, from /design-2026/hero-place/: "the bottom left could say something
   interesting about the video - maybe like did you know rogie falls"): the deck's A2, the place above in its small
   capitals and the line beneath it in Lora, larger, a way to the place's listing. The corner now grows upwards from the
   same foot, 37px above the film's edge, so a line that runs to two never pushes into the strip below */
.hl-here{top:calc(var(--hl-h) - 37px);transform:translateY(-100%);flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:10px;font-size:12px;letter-spacing:1.6px}
.hl-here .hl-pl{display:flex;align-items:center;gap:9px}
.hl-know{pointer-events:auto;display:block;max-width:min(600px,100%);font:400 22px/1.38 var(--serif);letter-spacing:0;text-transform:none;color:#F9F5EE;text-decoration:none;text-wrap:pretty}
.hl-know:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hl-know[hidden]{display:none}
.hl-know{animation:hl-fade .8s ease both}
@media (prefers-reduced-motion:reduce){.hl-know{animation:none}}
@media (max-width:560px){.hl-here{gap:8px;font-size:11px}.hl-know{font-size:17px;line-height:1.4}}
.hl-here b{font-weight:500}
.hl-here u{text-decoration:none;font-variant-numeric:tabular-nums}
.hl-here s{display:block;width:11px;height:1px;background:rgba(249,245,238,.4)}
/* a film of the magazine itself (Issue 13's shoot): its cover fills the middle, so the words step aside while it plays
   and come back with the next landscape (Jack, 8 October 2026, of the shoot's films in the hero) */
.hl-words{transition:opacity .9s ease}
.hl-hero.hl-quiet .hl-words{opacity:0;pointer-events:none}
/* THE CARDS, B: THE NAME ON THE PICTURE (Jack, 8 October 2026, of /design-2026/region-cards/: "B"). The home page's
   regions only (under the film): upright 4:5, 200 wide, one photograph, the name in white Larken 20 at its foot, the
   sunset top right with a small square beside it, gold while the sun is up there and pale dusk blue after. Every
   property of the two-square card that worked together (the grid, the fixed height, the gold cell's flex, padding and
   ground, the dark and free grounds, the phone's name size) is set again here so none of it is left fighting. */
.hl-hero.hl-under{--hl-cw:200px}
.hl-under .hl-rc{display:block;position:relative;width:var(--hl-cw);height:auto;aspect-ratio:4/5;grid-template-columns:none;overflow:hidden}
.hl-under .hl-ph{position:absolute;inset:0}
.hl-under .hl-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,14,11,.35) 0%,rgba(12,14,11,0) 30%,rgba(12,14,11,0) 55%,rgba(12,14,11,.62) 100%)}
.hl-under .hl-tx,.hl-under .hl-rc.dark .hl-tx,.hl-under .hl-rc.free .hl-tx{position:absolute;inset:0;display:block;padding:0;background:none;color:#fff}
.hl-under .hl-n{position:absolute;left:14px;right:14px;bottom:13px;padding:0;font:400 20px/1.12 var(--face);hyphens:manual;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hl-under .hl-m{position:absolute;top:12px;right:12px;display:flex;align-items:flex-start;gap:7px;text-align:right;opacity:.95;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hl-under .hl-m::before{content:"";flex:none;width:8px;height:8px;margin-top:3px;background:#C08C3D}
.hl-under .hl-rc.dark .hl-m::before{background:#A0BAD4}
@media (max-width:820px){.hl-hero.hl-under{--hl-cw:150px}.hl-under .hl-n{font-size:17px;left:11px;right:11px;bottom:10px}.hl-under .hl-m{top:10px;right:10px}}
/* SCOTLAND, AS IT HAPPENS (live-now.tsx; the home page, Jack, 8 October 2026: "on left add the attached style with left and
   right arrows - eg same design as hero from region pages - then on right side ... a notifications feed"). On the welcome's
   column. The frame is the region pages' film frame (welcome-5's cv-frame), every value read back off /region/isle-of-skye
   at 1920: 4:5, the cask ground, the veil, the mono caption and clock 20px in, the Jost kicker, Lora 23.4 name, the
   underlined way in, the 52px cask arrows 34px outside its edges. The notices are white squares on the page's ground, the
   region's picture at the left, the kind in Jost over the sentence in Lora; the newest unfolds at the top. */
.lw-sec{--lw-w:560px;--lw-arr:52px;--lw-out:34px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 64px;align-items:start;
  width:min(1284px,calc(100% - 2 * clamp(16px,5.4vw,78px)));margin:0 auto;padding:clamp(56px,6vw,96px) 0 clamp(56px,6vw,96px);
  /* on a ground of its own, the full width of the page (Jack, 8 October 2026: "put Happening in Scotland right now ...
     section in anothe coloured background"; then, off the switcher on the page itself, "go with blanket g5"): blanket,
     the warm pale of the magazine and the shop */
  background:#F2EAE0;box-shadow:0 0 0 100vmax #F2EAE0;clip-path:inset(0 -100vmax);position:relative;isolation:isolate}
/* the kinds in their colours */
.lw-k b{color:var(--kt)}
.lw-view{position:relative;padding:0 calc(var(--lw-arr) + var(--lw-out))}
.lw-mount{position:relative;width:var(--lw-w);aspect-ratio:4/5;overflow:hidden;background:#392916;color:#fff;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lw-mount:focus-visible{outline:2px solid #414042;outline-offset:4px}
.lw-f{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .8s ease}
.lw-f.on{opacity:1;pointer-events:auto}
.lw-f video,.lw-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lw-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,14,11,.52) 0%,rgba(12,14,11,.16) 20%,rgba(12,14,11,.04) 46%,rgba(12,14,11,.2) 74%,rgba(12,14,11,.56) 100%)}
.lw-at,.lw-time{position:absolute;z-index:5;top:20px;font:400 12.48px/20.2px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.88);text-shadow:0 1px 14px rgba(8,10,8,.62);pointer-events:none}
.lw-at{left:20px;right:120px;display:flex;align-items:center;gap:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-time{right:20px;text-align:right;white-space:nowrap}
.lw-time b{font-weight:400;color:#fff;font-variant-numeric:tabular-nums}
.lw-live{flex:none;display:inline-block;width:7px;height:7px;border-radius:50%;background:#AFA065;
  box-shadow:0 0 0 2.5px rgba(175,160,101,.28),0 0 10.7px 1.2px rgba(175,160,101,.59);animation:lw-on 2.4s ease-in-out infinite}
@keyframes lw-on{0%,100%{opacity:1}50%{opacity:.5}}
.lw-note{position:absolute;z-index:4;left:20px;right:20px;bottom:20px;color:rgba(255,255,255,.94);text-shadow:0 1px 16px rgba(8,10,8,.66)}
.lw-now{display:block;margin-bottom:8px;font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,247,.8);text-shadow:0 1px 10px rgba(65,64,66,.8)}
.lw-note p{margin:0 0 7px;font:400 23.424px/33.26px var(--serif)}
.lw-go{font:400 12.41px/17.6px var(--serif);letter-spacing:.02em;color:rgba(255,255,255,.94);opacity:.9;
  text-decoration:underline 1px rgba(255,255,255,.45);text-underline-offset:4px}
.lw-go:hover{text-decoration-color:#fff}
.lw-arr{all:unset;box-sizing:border-box;position:absolute;z-index:6;top:50%;transform:translateY(-50%);width:var(--lw-arr);height:var(--lw-arr);
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:#682114;transition:background .25s}
.lw-arr.prev{left:0}.lw-arr.next{right:0}
.lw-arr i{display:block;width:13px;height:13px;border-top:1px solid #F9F5EE;border-right:1px solid #F9F5EE;transform:rotate(45deg) translate(-1px,1px)}
.lw-arr.prev i{transform:rotate(-135deg) translate(-1px,1px)}
.lw-arr:hover{background:#F9F5EE}.lw-arr:hover i{border-color:#392916}
.lw-arr:focus-visible{outline:2px solid #A0BAD4;outline-offset:4px}
/* THE LINE OVER THE SECTION (Jack, 8 October 2026, off /design-2026/happening-now/: "L9 Centred ... but more space for the
   heading please"): one quiet centred line of Lora, the heading in ink, the day, time and weather after it quieter;
   never labelled cells. It spans both columns, with room above it and below. */
.lw-line{grid-column:1/-1;margin:0 auto clamp(36px,3vw,56px);max-width:960px;text-align:center;font:400 19px/1.5 var(--serif);color:#414042}
.lw-dl{color:rgba(65,64,66,.58);font-variant-numeric:tabular-nums}
/* the notices: as tall as the frame, the oldest fading out at the foot; each a photograph of its region (82px, the
   picture alone), the kind in its own colour and the place, the sentence; only the newest types */
.lw-wire{display:flex;flex-direction:column;height:calc(var(--lw-w) * 1.25);min-width:0}
.lw-list{flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);mask-image:linear-gradient(180deg,#000 74%,transparent)}
.lw-n{display:grid;grid-template-rows:1fr}
.lw-n.new{animation:lw-in .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes lw-in{from{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}
.lw-in{min-height:0;overflow:hidden}
.lw-in > a{display:block;color:inherit;text-decoration:none}
.lw-c{display:grid;grid-template-columns:82px minmax(0,1fr);gap:18px;align-items:start;padding:11px 0}
.lw-ph{display:block;width:82px;height:82px;object-fit:cover;background:#E8E1D4}
.lw-k{display:flex;align-items:center;gap:8px;margin:5px 0 7px;font:500 10px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(65,64,66,.56)}
.lw-k b{font-weight:500;color:var(--kt)}
.lw-k i{font-style:normal}
.lw-k i::before{content:"\00b7";margin-right:8px}
.lw-s{display:block;font:400 16px/1.45 var(--serif);color:#414042}
.lw-in > a:hover .lw-s{text-decoration:underline 1px rgba(65,64,66,.3);text-underline-offset:3px}
.lw-s.typing::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.12em;background:currentColor;animation:lw-caret .8s steps(1) infinite}
@keyframes lw-caret{50%{opacity:0}}
.lw-sec.off .lw-live{animation-play-state:paused}
@media (max-width:1180px){
  .lw-sec{grid-template-columns:minmax(0,1fr);gap:40px}
  .lw-view{padding:0}
  .lw-mount{width:100%;max-width:560px;margin:0 auto}
  .lw-arr{--lw-arr:44px}.lw-arr.prev{left:10px}.lw-arr.next{right:10px}
  .lw-view .lw-arr.prev{left:max(10px,calc(50% - 280px + 10px))}.lw-view .lw-arr.next{right:max(10px,calc(50% - 280px + 10px))}
  .lw-wire{height:620px}
  .lw-line{font-size:17px;margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){.lw-live,.lw-n.new{animation:none}.lw-f{transition:none}}
/* /live IN SMALL (14 October 2026, Jack: "a smaller version of the page really - then an obvious action to click to go
   live, so its more of an advert for it"). One block at /live's own proportion, 1920 by 1000: the film with the place,
   the clock and the day on it and the button at its foot; the notices on /live's forest down the right, a quarter of the
   width as /live's 480 of 1920. Type /live's, scaled to the block: place 44, clock 160, day 24 at full size. */
.lw-sec.lw-ad{display:block}
/* the notices a third of the block, not /live's quarter (Jack, 14 October 2026: "move space for the notifications, so a
   little less video but larger notifications, there a bit bunched") */
.lw-ad .lw-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,33%);aspect-ratio:1920/1000;background:#2B301D}
.lw-ad .lw-screen{position:relative;display:block;overflow:hidden;background:#392916;color:#FFFFF7;text-decoration:none}
.lw-ad .lw-screen:focus-visible{outline:2px solid #C08C3D;outline-offset:4px}
/* a film a playing video is drawn on whole pixels while its frame is cut on a fraction: two pixels over every edge, so no
   strip of the dark ground ever shows above it (Jack, 14 October 2026: "a black line border at the top of the video") */
.lw-ad .lw-still,.lw-ad .lw-vid{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);max-width:none;object-fit:cover;display:block}
.lw-ad .lw-still{animation:lw-fade .8s ease both}
.lw-ad .lw-vid{opacity:0;transition:opacity .8s ease}
.lw-ad .lw-veil{background:linear-gradient(180deg,rgba(12,14,11,.42) 0%,rgba(12,14,11,.08) 24%,rgba(12,14,11,.06) 48%,rgba(12,14,11,.5) 78%,rgba(12,14,11,.66) 100%)}
.lw-ad .lw-at{top:clamp(18px,2.2vw,32px);left:clamp(20px,2.6vw,44px);right:auto;color:#FFFFF7;font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;gap:11px}
.lw-ad .lw-live{width:8px;height:8px;border-radius:0;background:#F04E26;box-shadow:none}
.lw-ad .lw-face{position:absolute;z-index:4;left:clamp(20px,2.6vw,44px);bottom:clamp(20px,2.6vw,44px);right:calc(clamp(20px,2.6vw,44px) + 260px);display:flex;flex-direction:column;align-items:flex-start;text-shadow:0 1px 22px rgba(8,10,8,.45)}
.lw-ad .lw-place{font:400 min(clamp(24px,2.05vw,36px), 28px + (clamp(24px,2.05vw,36px) - 28px) * 0.6)/1.1 larken,Larken,Georgia,serif;margin:0 0 .25em;animation:lw-fade .8s ease both}
.lw-ad .lw-clock{display:block;margin-left:-.024em;font:400 min(clamp(70px,7.4vw,124px), 28px + (clamp(70px,7.4vw,124px) - 28px) * 0.6)/.9 larken,Larken,Georgia,serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lw-ad .lw-clock small{font-size:.3em;opacity:.55;margin-left:.18em;letter-spacing:0}
.lw-ad .lw-colon{font-style:normal;animation:lw-colon 1s ease-in-out infinite}
.lw-ad .lw-day{display:flex;align-items:center;gap:12px;margin-top:.7em;font:400 clamp(17px,1.2vw,20px)/1.2 larken,Larken,Georgia,serif}
.lw-ad .lw-sq{flex:none;width:7px;height:7px;background:#F04E26}
.lw-ad .lw-say{display:block;margin-top:.45em;font:400 clamp(14px,.9vw,16px)/1.5 var(--serif);color:rgba(255,255,247,.92)}
.lw-ad .lw-cta{position:absolute;z-index:5;right:clamp(20px,2.6vw,44px);bottom:clamp(20px,2.6vw,44px);display:inline-flex;align-items:center;gap:14px;height:60px;padding:0 30px;
  background:#FFFFF7;color:#2B301D;font:500 15px/1 var(--sans);letter-spacing:.04em;text-shadow:none;transition:background .25s ease,color .25s ease}
.lw-ad .lw-cta i{font-style:normal;font-size:18px;transition:transform .25s ease}
.lw-ad .lw-screen:hover .lw-cta{background:#682114;color:#F9F5EE}
.lw-ad .lw-screen:hover .lw-cta i{transform:translateX(4px)}
.lw-ad .lw-wire{height:auto;min-height:0;padding:clamp(18px,1.8vw,30px) clamp(18px,1.8vw,30px) 0;background:#2B301D;overflow:hidden}
.lw-ad .lw-list{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.lw-ad .lw-n{margin:0 0 14px}
.lw-ad .lw-c{grid-template-columns:76px minmax(0,1fr);gap:18px;padding:16px 18px;background:rgba(255,255,247,.055)}
.lw-ad .lw-ph{width:76px;height:76px;background:#392916}
.lw-ad .lw-k{display:block;margin:2px 0 8px;font-size:12px;color:rgba(255,255,247,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-ad .lw-k i::before{margin:0 7px}
.lw-ad .lw-s{font-size:19px;line-height:1.46;color:#FFFFF7}
.lw-ad .lw-in > a:hover .lw-s{text-decoration-color:rgba(255,255,247,.45)}
@keyframes lw-fade{from{opacity:0}to{opacity:1}}
@keyframes lw-colon{0%,55%{opacity:1}70%,100%{opacity:.3}}
.lw-sec.lw-ad.off .lw-colon{animation-play-state:paused}
@media (max-width:1100px){
  .lw-ad .lw-box{grid-template-columns:minmax(0,1fr) 340px}
  .lw-ad .lw-cta{height:52px;padding:0 22px;font-size:14px}
  .lw-ad .lw-face{right:24px;bottom:96px}
}
@media (max-width:760px){
  .lw-ad .lw-box{grid-template-columns:minmax(0,1fr);aspect-ratio:auto}
  .lw-ad .lw-screen{aspect-ratio:4/5}
  .lw-ad .lw-face{left:20px;right:20px;bottom:96px}
  .lw-ad .lw-cta{left:20px;right:20px;bottom:20px;justify-content:center;height:56px}
  .lw-ad .lw-wire{height:440px;padding:16px 16px 0}
  .lw-ad .lw-c{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px}
  .lw-ad .lw-ph{width:64px;height:64px}
  .lw-ad .lw-s{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.lw-ad .lw-colon,.lw-ad .lw-still,.lw-ad .lw-place{animation:none}.lw-ad .lw-vid,.lw-ad .lw-cta,.lw-ad .lw-cta i{transition:none}}
/* THE QUIZ ANSWERS, A5 THE INK SQUARES (Jack, 6 October 2026, off /design-2026/quiz-cards/: "A5 The ink squares"):
   dark squares, the letter large in gold Larken at the top, the answer at the foot in shell; right turns gold, wrong dusk
   blue, the rest fall back. Every property of _home5.css's .fd-opt that works together is set again here, so none of the
   old pale card is left fighting it. On a dark entry the squares are shell, so no two dark grounds meet. */
#hm-feed .fd-opts{gap:8px}
#hm-feed .fd-opt{min-height:118px;padding:16px 18px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;
  background:#414042;color:#F6F1E8;box-shadow:none;border:0;border-radius:0;font:400 17px/1.25 var(--serif)}
#hm-feed .fd-opt i{position:absolute;left:18px;top:16px;font:400 30px/1 var(--face);letter-spacing:0;font-style:normal;color:#C08C3D}
#hm-feed .fd-opt:hover{background:#2b301d;box-shadow:none;transform:translateY(-3px)}
#hm-feed .fd-opt:hover i{color:#C08C3D}
#hm-feed .fd-opt.right{background:#C08C3D;color:#414042;box-shadow:none;transform:none}
#hm-feed .fd-opt.right i{color:#414042}
/* WRONG, MADE PLAIN (Jack, 13 October 2026: "when you get the wrong answer its not obvious its wrong nothing really ahpepns,
   make it more ovbiovus"). A5's "dusk blue" was the resting squares' own ink, so a wrong pick did not change at all; and
   bracken is the right answer's gold. Wrong fills tweed, its letter becomes a cross and it shakes once; right shows a tick. */
#hm-feed .fd-opt.wrong{background:#682114;color:#F6F1E8;box-shadow:none;transform:none;animation:fd-shake .5s cubic-bezier(.22,.8,.24,1) both}
#hm-feed .fd-opt.wrong i,#hm-feed .fd-opt.right i{font-size:0}
#hm-feed .fd-opt.wrong i::after{content:'\2715';font-size:26px;color:#F6F1E8}
#hm-feed .fd-opt.right i::after{content:'\2713';font-size:30px;color:#414042}
#hm-feed .fd-verdict.no{color:#682114}
@media (prefers-reduced-motion:reduce){#hm-feed .fd-opt.wrong{animation:none}}
#hm-feed .fd-opt.dim{opacity:.35;transform:none}
#hm-feed .fd-row.dark .fd-opt{background:#F6F1E8;color:#414042}
#hm-feed .fd-row.dark .fd-opt i{color:#C08C3D}
#hm-feed .fd-row.dark .fd-opt:hover{background:#fff}
#hm-feed .fd-row.dark .fd-opt.right{background:#C08C3D;color:#414042}
#hm-feed .fd-row.dark .fd-opt.right i{color:#414042}
#hm-feed .fd-row.dark .fd-opt.wrong{background:#682114;color:#F6F1E8}
#hm-feed .fd-row.dark .fd-verdict.no{color:#E7B9A9}
@media (max-width:640px){#hm-feed .fd-opt{min-height:96px;font-size:16px}#hm-feed .fd-opt i{font-size:24px}}
/* the trial: the time a post went up, readable on a dark entry */
#hm-feed .h3-feed .fd-row.dark .fd-at em{color:rgba(255,255,255,.55)}
/* the trial: home-9's entries start on the sections' column */
@media (min-width:1001px){
  #hm-feed .h3-feed.d4 .fd-it{margin-left:calc(max(clamp(16px,5.4vw,78px),(100% - 1284px) / 2) - var(--fd-air,28px));margin-right:auto}
}
/* views, Love this and Recommend to a friend: lifted from C:/Users/jack/design/feed-actions.html */
.shr{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;white-space:nowrap;font-family:"Jost",system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:inherit;position:relative;z-index:3}
.shr > button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:9px;opacity:.72;transition:opacity .2s}
.shr > button:hover,.shr > button:focus-visible{opacity:1}
.shr > button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.shr svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4}
.shr > .shr-like.on{opacity:1}
.shr .shr-like.on svg{fill:#C08C3D;stroke:#C08C3D}
.shr .shr-like.on svg{animation:shr-pop .32s ease}
@keyframes shr-pop{40%{transform:scale(1.25)}}
.shr .shr-n{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.shr .shr-n:empty{display:none}
.shr .shr-views{display:inline-flex;align-items:center;gap:9px;opacity:.55;font-variant-numeric:tabular-nums}
.shr .shr-views[hidden]{display:none}
.shr.t-links .shr-views::after{content:"\00b7";margin-left:22px}
.shr.t-big .shr-views{font:400 calc(18px * var(--k)) "larken","Larken",Georgia,serif}
.shr.icons .shr-w{display:none}
.shr.words svg{display:none}
.shr{--k:1}
.shr.t-caps{font-size:calc(11px * var(--k))}
.shr.t-caps svg{width:calc(19px * var(--k));height:calc(19px * var(--k))}
.shr.t-capslg{font-size:calc(13px * var(--k));letter-spacing:.14em}
.shr.t-capslg svg{width:calc(23px * var(--k));height:calc(23px * var(--k))}
.shr.t-italic{font:italic 400 calc(17px * var(--k)) "Lora",Georgia,serif;letter-spacing:0;text-transform:none}
.shr.t-italic svg{width:calc(22px * var(--k));height:calc(22px * var(--k))}
.shr.t-larken{font:400 calc(20px * var(--k)) "larken","Larken",Georgia,serif;letter-spacing:0;text-transform:none}
.shr.t-larken svg{width:calc(22px * var(--k));height:calc(22px * var(--k))}
.shr.t-corm{font:italic 500 calc(22px * var(--k)) "Cormorant Garamond",Georgia,serif;letter-spacing:0;text-transform:none}
.shr.t-corm svg{width:calc(22px * var(--k));height:calc(22px * var(--k))}
.shr.t-buttons{font-size:calc(11.5px * var(--k));gap:12px}
.shr.t-buttons > button{opacity:1;padding:calc(12px * var(--k)) calc(18px * var(--k));border:1px solid currentColor}
.shr.t-buttons > button:hover{background:currentColor}
.shr.t-buttons > button:hover > *{filter:invert(1)}
.shr.t-buttons svg{width:calc(18px * var(--k));height:calc(18px * var(--k))}
.shr.t-big{font:italic 400 calc(16px * var(--k)) "Lora",Georgia,serif;letter-spacing:0;text-transform:none;gap:12px 34px}
.shr.t-big .shr-like svg{width:calc(32px * var(--k));height:calc(32px * var(--k));stroke-width:1.2}
.shr.t-big .shr-like .shr-w{display:none}
.shr.t-big .shr-n{font:400 calc(22px * var(--k)) "larken","Larken",Georgia,serif}
.shr.t-big .shr-rec svg{width:calc(22px * var(--k));height:calc(22px * var(--k))}
.shr.t-links{font:400 calc(16px * var(--k)) "Lora",Georgia,serif;letter-spacing:0;text-transform:none;gap:12px 22px}
.shr.t-links svg{display:none}
.shr.t-links > button{opacity:.85;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.shr.t-links > .shr-rec::before{content:"\00b7";margin-right:22px;text-decoration:none;display:inline-block}
.fd-row{position:relative}
.shr-under{display:grid;grid-template-columns:var(--fd-when,260px) minmax(0,var(--fd-col,752px));column-gap:48px;
  width:min(100%,calc(var(--fd-wide,1060px) + var(--fd-air,28px) * 2));box-sizing:border-box;padding:0 var(--fd-air,28px);
  margin:calc(var(--fd-gap,64px) * -0.45 + 22px) 0 0 calc(max(clamp(16px,5.4vw,78px),(100% - 1284px) / 2) - var(--fd-air,28px));padding-bottom:calc(var(--fd-gap,64px) * .5)}
.shr-under > *{grid-column:2}
.fd-at .shr{margin-top:18px;gap:18px}
.shr-corner{position:absolute;top:calc(var(--fd-gap,176px) * .5 + 6px);right:calc(100% - max(clamp(16px,5.4vw,78px),(100% - 1284px) / 2) - var(--fd-when,260px) - 48px - var(--fd-col,752px))}
@media (max-width:1000px){
  .shr-under{display:block;width:auto;margin:-18px 0 0;padding:0 var(--fd-air,16px) 28px}
  .shr-corner{right:62px;top:18px}
}
.shr-panel{flex:0 0 100%;box-sizing:border-box;white-space:normal;margin-top:4px;max-width:520px;padding:22px 24px;background:#FBF9F6;color:#414042;border:1px solid #D8D1CB;font-family:"Lora",Georgia,serif;font-size:15px;line-height:1.5;text-transform:none;letter-spacing:0;font-weight:400}
.shr-panel[hidden]{display:none}
.shr-panel h4{margin:0 0 4px;font-family:"larken","Larken",Georgia,serif;font-weight:400;font-size:21px}
.shr-panel p{margin:0 0 14px;opacity:.75}
.shr-ways{display:flex;gap:10px;flex-wrap:wrap}
.shr-btn{all:unset;box-sizing:border-box;cursor:pointer;font-family:"Jost",system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:14px 18px;border:1px solid #414042;color:#414042;background:transparent}
.shr-btn.fill{background:#2B301D;border-color:#2B301D;color:#F1EDE8}
.shr-btn:hover{background:#414042;color:#FBF9F6;border-color:#414042}
.shr-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.shr-form[hidden]{display:none}
.shr-form input{font:400 15px "Lora",Georgia,serif;height:46px;padding:0 14px;border:1px solid #D8D1CB;background:#fff;color:#414042;min-width:0}
.shr-form .shr-btn{grid-column:1 / -1;justify-self:start}
.shr-small{grid-column:1 / -1;font-size:13px;opacity:.65;margin:0}
.shr-done{font-family:"Lora",Georgia,serif;margin-top:12px}
.shr-done[hidden]{display:none}
.fd-row.shr-open{z-index:6;overflow:visible}
.fd-row.shr-open .shr-under,.fd-row.shr-open .fd-it{overflow:visible}
.shr-pop .shr-panel{position:absolute;left:0;top:calc(100% + 6px);width:min(420px,calc(100vw - 32px));box-shadow:0 18px 40px rgba(0,0,0,.14);margin:0}
@media (max-width:600px){
  .shr-form{grid-template-columns:1fr}
}
/* Find your stay, the band (HomeController::stayLive) */
.lp-page .fys{position:relative;overflow:hidden;min-height:clamp(520px,68vh,760px);display:flex;align-items:flex-end;background:#414042;color:#F9F5EE}
.lp-page .fys video,.lp-page .fys>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-page .fys::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,10,.34),rgba(14,12,10,.42) 40%,rgba(14,12,10,.8))}
.lp-page .fys .lp-kick{opacity:1}
.lp-page .fys-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:clamp(48px,7vw,104px) 0 clamp(44px,5vw,76px);box-sizing:border-box}
.lp-page .fys-h{font-family:var(--face);font-weight:300;font-size:min(clamp(54px,7.4vw,124px), 28px + (clamp(54px,7.4vw,124px) - 28px) * 0.6);line-height:.98;letter-spacing:-.02em;margin:14px 0 0}
.lp-page .fys-p{font-size:clamp(19px,1.5vw,24px);line-height:1.5;max-width:30em;margin:22px 0 0}
.lp-page .fys-go{display:inline-flex;align-items:center;gap:14px;margin:34px 0 0;padding:20px 30px;background:#C08C3D;color:#414042;font:500 14px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .25s}
.lp-page .fys-go i{font-style:normal;font-size:17px;letter-spacing:0;transition:transform .3s}
.lp-page .fys-go:hover{background:#F6F1E8}.lp-page .fys-go:hover i{transform:translateX(4px)}
.lp-page .fys-ways{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:44px 0 0}
.lp-page .fys-ways span{margin-right:10px;font-size:17px;opacity:.86}
.lp-page .fys-ways a{display:inline-flex;align-items:center;height:52px;padding:0 22px;background:rgba(249,245,238,.14);color:#F9F5EE;font:500 16px/1 var(--sans);text-decoration:none;backdrop-filter:blur(6px);transition:background .2s,color .2s}
.lp-page .fys-ways a:hover{background:#F9F5EE;color:#414042}
@media (max-width:900px){.lp-page .fys-in{padding-left:16px;padding-right:16px}.lp-page .fys-ways a{height:46px;padding:0 16px;font-size:15px}.lp-page .fys-ways span{width:100%;margin:0 0 2px}}
/* the reader's own sky (sky-ask.tsx): one line and one box, then the whole band is the weather there */
/* the post gives the band the row: its own label, heading and line stand down (the component writes the one line), and it
   sits in the middle of the page rather than in the feed's column */
#hm-feed .h3-feed .fd-it.fd-q-where,#hm-feed .h3-feed.d4 .fd-it.fd-q-where{position:static;display:block;width:auto;max-width:1284px;margin-left:auto;margin-right:auto;padding-top:0;padding-bottom:0}
.fd-q-where > .fd-at,.fd-q-where > .fd-h,.fd-q-where > .fd-said{display:none!important}
/* .fd-it > * is position:relative and held to the reading column; the band is neither, so its sky can lie against the row */
#hm-feed .fd-q-where > .sky{position:static;width:100%;max-width:none}
.sky{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:96px 0;text-align:center}
/* never two dark grounds touching: a night or a rain sky beside a dark post keeps a strip of chalk between them */
.fd-row.dark + .fd-row:has(.sky-on),.fd-row:has(.sky-on) + .fd-row.dark{border-top:44px solid #F9F5EE}
.sky{color:#2b2a2b}
.fd-row.dark .sky,.fd-row.dark .sky .sky-title{color:#fff}
.fd-row.dark .sky .sky-says{color:#fff}
.sky-on{min-height:640px;color:#fff}
.sky-bg{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;background:linear-gradient(180deg,#5d8fc4 0%,#a9c6de 58%,#e8c79a 100%)}
.sky-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 78% at 50% 50%,rgba(8,10,14,.66),rgba(8,10,14,.34))}
.sky-cloud .sky-bg{background:linear-gradient(180deg,#6f7f8f 0%,#9aa7b2 60%,#c3c7c7 100%)}
.sky-rain .sky-bg{background:linear-gradient(180deg,#3d4a57 0%,#5c6a76 62%,#7d868c 100%)}
.sky-snow .sky-bg{background:linear-gradient(180deg,#7c8a98 0%,#aab4bd 60%,#d9dde0 100%)}
.sky-fog .sky-bg{background:linear-gradient(180deg,#8c9499 0%,#b4b9bb 55%,#cfd1d0 100%)}
.sky-night .sky-bg{background:linear-gradient(180deg,#0c1424 0%,#18243a 62%,#2a3550 100%)}
.sky-night.sky-rain .sky-bg,.sky-night.sky-cloud .sky-bg,.sky-night.sky-fog .sky-bg,.sky-night.sky-snow .sky-bg{background:linear-gradient(180deg,#141b26 0%,#232c39 62%,#343d49 100%)}
.sky-night .sky-bg::after{background:none}
.sky-on .sky-in,.sky-on .sky-ask{text-shadow:0 1px 22px rgba(4,6,10,.6)}
.sky-on .sky-more a,.sky-on .sky-box,.sky-on .sky-found{text-shadow:none}
.sky-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sky-air{position:absolute;inset:0;display:block}
.sky-air .fd-sky{position:absolute;inset:0;display:block}
.fd-card .fd-name .eye{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sky-night.sky-cloud .sky-fall,.sky-night.sky-fog .sky-fall{opacity:.4}
/* over a film of the sky the drawn sun and cloud stand down; rain and snow still fall across it */
.sky-air.on-film .sky-sun{display:none}.sky-cloud .sky-air.on-film .sky-fall,.sky-fog .sky-air.on-film .sky-fall{display:none}
.sky-sun{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:#fff3c4;box-shadow:0 0 110px 50px rgba(255,236,170,.55)}
.sky-cloud .sky-sun,.sky-fog .sky-sun{opacity:.45}.sky-rain .sky-sun,.sky-snow .sky-sun{opacity:.18}
.sky-fall{position:absolute;inset:-40% 0 0 0;display:none}
.sky-drops{position:absolute;inset:0;width:100%;height:100%;display:block}
.sky-cloud .sky-fall,.sky-fog .sky-fall{display:block;inset:0;background:radial-gradient(ellipse 46% 26% at 22% 30%,rgba(255,255,255,.34),transparent 70%),radial-gradient(ellipse 52% 30% at 74% 22%,rgba(255,255,255,.26),transparent 70%),radial-gradient(ellipse 60% 28% at 48% 62%,rgba(255,255,255,.18),transparent 70%)}
.sky-fog .sky-fall{background-color:rgba(255,255,255,.22)}
.sky-night.sky-clear .sky-fall{display:block;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.6px);background-size:120px 90px,190px 140px;background-position:10px 20px,70px 50px}
.sky-in,.sky-ask{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;max-width:900px}
.sky-now{display:block;font:400 21px/1.4 var(--serif)}
.sky-head{display:block;max-width:15em;margin:18px 0 0;font:400 min(clamp(38px,4.4vw,76px), 28px + (clamp(38px,4.4vw,76px) - 28px) * 0.6)/1.04 var(--face);letter-spacing:-.015em;text-wrap:balance}
.sky-lines{display:block;margin-top:26px;font:400 20px/1.6 var(--serif)}
.sky-lines span{display:block}
.sky-more{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:38px}
.sky-more a{display:inline-flex;align-items:center;height:60px;padding:0 28px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);color:#fff;text-decoration:none;font:500 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.sky-more a:first-child{background:#C08C3D;color:#2B301D;box-shadow:none}
.sky-more a:hover{background:#fff;color:#2b2a2b;box-shadow:none}
.sky-change{margin-top:26px;padding:0;border:0;background:none;color:inherit;cursor:pointer;font:400 18px/1.4 var(--serif);text-decoration:underline;text-underline-offset:4px}
.sky-title{display:block;max-width:17em;font:400 min(clamp(30px,2.9vw,50px), 28px + (clamp(30px,2.9vw,50px) - 28px) * 0.6)/1.1 var(--face);letter-spacing:-.01em;text-wrap:balance}
.sky-box{display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:640px;margin-top:34px}
.sky-box input{flex:1 1 260px;min-width:0;height:64px;padding:0 22px;border:0;background:#fff;color:#414042;font:400 20px/1 var(--serif);text-align:left}
.sky-box input::placeholder{color:#7a7672}
.sky-box button{height:64px;padding:0 26px;border:0;background:#C08C3D;color:#2B301D;cursor:pointer;font:500 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.sky-box button:disabled{opacity:.6;cursor:default}
.sky-found{display:block;width:100%;max-width:640px;margin-top:10px;text-align:left}
.sky-found button{display:block;width:100%;margin:0 0 6px;padding:14px 22px;border:0;background:#fff;color:#414042;text-align:left;cursor:pointer}
.sky-found button:hover{background:#F1E9DA}
.sky-found b{display:block;font:400 24px/1.15 var(--face)}
.sky-found span{display:block;margin-top:3px;font:400 16px/1.4 var(--serif);color:#5d5955}
.sky-says{display:block;margin-top:16px;font:400 18px/1.5 var(--serif);font-style:normal}
@media (max-width:700px){.sky{padding:64px 0}.sky-on{min-height:520px}.sky-now{font-size:19px}.sky-lines{font-size:19px}.sky-more a{width:100%;justify-content:center;white-space:normal;text-align:center}.sky-box button{flex:1 1 100%}}