/* GENERATED by scratchpad/design-2026/build-dest-try.py from C:/Users/jack/design/destinations-try.css. Do not edit. */
/* /try/destinations, the second redesign (Jack, 3 October 2026). The page wears the home page's own sheet
   (_home-landing.css: the reel, the bands, the cards, the rails, the magazine spread); this adds only Scotland, live's
   map and the panel beside it, dressed as public/design-2026/scotland-live.html dresses them (the footer's forest, the
   land in the footer's pale, a region lit as a block of squares, its name over the map), and lets the home page's
   picture cards be pressed rather than followed. Every rule is under .lp-page.dg. Built into
   public/design-css/_dest-try.css by scratchpad/design-2026/build-dest-try.py; change this file and run that. */

/* the picture cards choose rather than lead away; the chosen one's foot is cask, as Explore's chosen region door */
.lp-page.dg .dg-cats .lp-cat{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.lp-page.dg .dg-cats .lp-cat .ph img{width:100%;height:100%;object-fit:cover;display:block}
.lp-page.dg .dg-cats .lp-cat.on .ft{background:var(--cask)}

/* the map and its panel */
.lp-page.dg .lv-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(32px,4vw,72px);align-items:start}
.lp-page.dg .lv-map{position:relative;min-width:0}
.lp-page.dg .lv-map svg{display:block;width:100%;height:auto;max-height:min(calc(100vh - 150px),880px)}
.lp-page.dg .land path{fill:rgba(237,232,230,.9);stroke:none}
/* a region is its squares: unseen until pointed at, when its grid shows; gorse where it is good for the word chosen,
   and stronger when it is the one picked */
.lp-page.dg .rg path{fill:rgba(0,0,0,0);stroke:none;cursor:pointer;pointer-events:all;transition:fill .15s}
.lp-page.dg .rg.good path{fill:rgba(192,140,61,.3)}
.lp-page.dg .rg.show path{fill:rgba(43,48,29,.14);stroke:rgba(43,48,29,.4);stroke-width:.35}
.lp-page.dg .rg.good.show path{fill:rgba(192,140,61,.45)}
.lp-page.dg .rg.on path{fill:rgba(192,140,61,.5);stroke:rgba(192,140,61,.9);stroke-width:.5}
.lp-page.dg .lv-rname{position:absolute;left:0;top:0;pointer-events:none;font:400 30px/1.05 var(--face);letter-spacing:-.01em;color:var(--on-dark);opacity:0;transition:opacity .2s}
.lp-page.dg .lv-rname.show{opacity:1}
.lp-page.dg .lv-rname small{display:block;margin-top:8px;font:500 10px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.6;max-width:22em}

/* the band's heading stands at the head of the panel, so the map can be the height of the screen */
.lp-page.dg .lv-head{margin-bottom:34px}
.lp-page.dg .lv-head .lp-h{margin-top:12px}
.lp-page.dg .lv-head .lp-p{margin-top:12px}
.lp-page.dg .lv-head .lv-back{margin:18px 0 0}
/* at rest: every region by name, under its part of Scotland */
.lp-page.dg .lv-all{display:grid;grid-template-columns:1fr 1fr;gap:30px 28px}
.lp-page.dg .lv-all ul,.lp-page.dg .lv-list{list-style:none;margin:0;padding:0}
.lp-page.dg .lv-all .lp-kick{margin-bottom:10px}
.lp-page.dg .lv-all button{background:none;border:0;padding:3px 0;cursor:pointer;color:var(--on-dark);font:400 18px/1.35 var(--face);text-align:left;opacity:.82;border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s}
.lp-page.dg .lv-all button:hover,.lp-page.dg .lv-all button.on{opacity:1;border-color:var(--bracken)}

/* a word chosen: the regions good for it, each with its picture and why */
.lp-page.dg .lv-list li+li{border-top:1px solid rgba(237,232,230,.14)}
.lp-page.dg .lv-list button{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;width:100%;padding:14px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--on-dark)}
.lp-page.dg .lv-list .ph{display:block;aspect-ratio:4/5;overflow:hidden;background:rgba(237,232,230,.1)}
.lp-page.dg .lv-list img{width:100%;height:100%;object-fit:cover;display:block}
.lp-page.dg .lv-list b{display:block;font:400 20px/1.2 var(--face)}
.lp-page.dg .lv-list i{display:block;font:400 15px/1.5 var(--read);font-style:normal;opacity:.75;margin-top:4px}
.lp-page.dg .lv-list button:hover b{text-decoration:underline;text-decoration-color:var(--bracken);text-underline-offset:5px;text-decoration-thickness:1px}

/* a region picked */
.lp-page.dg .lv-back{background:none;border:0;padding:0;margin-bottom:18px;cursor:pointer;color:var(--on-dark);opacity:.7;font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.lp-page.dg .lv-back:hover{opacity:1}
.lp-page.dg .lv-region .ph{display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:22px}
.lp-page.dg .lv-region .ph img{width:100%;height:100%;object-fit:cover;display:block}
.lp-page.dg .lv-region h3{font:300 min(clamp(34px,3vw,44px), 28px + (clamp(34px,3vw,44px) - 28px) * 0.6)/1.08 var(--face);margin-top:10px}
.lp-page.dg .lv-region .ln,.lp-page.dg .lv-region .why{font:400 17px/1.6 var(--read);opacity:.86;margin-top:10px}
.lp-page.dg .lv-region .for{font:400 15.5px/1.5 var(--read);opacity:.82;margin-top:16px}
.lp-page.dg .lv-region .for span{display:block;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:.62;margin-bottom:7px}
.lp-page.dg .lv-region .lp-btns{margin-top:26px}

@media(max-width:1100px){
  .lp-page.dg .lv-split{grid-template-columns:minmax(0,1fr) 340px}
}
@media(max-width:820px){
  .lp-page.dg .lv-split{grid-template-columns:1fr;gap:28px}
  /* on a phone the heading comes first, then the map, then the names */
  .lp-page.dg .lv-panel{display:contents}
  .lp-page.dg .lv-head{order:1;margin-bottom:0}
  .lp-page.dg .lv-map{order:2}
  .lp-page.dg .lv-all,.lp-page.dg .lv-list,.lp-page.dg .lv-region{order:3}
  .lp-page.dg .lv-map svg{max-height:70vh}
  .lp-page.dg .lv-rname{font-size:22px}
  .lp-page.dg .lv-region h3{font-size:32px}
}