/* GENERATED by scratchpad/design-2026/build-explore-try.py from C:/Users/jack/design/explore-try.css. Do not edit. */
/* Explore with no opening (Jack, 3 October 2026: "drop the busy hero ... very simple to use, beautiful and minimal
   ... a smart way of filtering by region and also type", then: "stick with what we've been working on and all my
   feedback"). Nothing new is drawn: the page's own title in Larken where the film was, and the category words the
   phone already has, shown on the desktop in the same row as Showing places in, so type and region are chosen in one
   line. Only under main[data-discover], which only /try/explore sets. The trial's sheet, built into
   public/design-css/_explore-try.css by scratchpad/design-2026/build-explore-try.py. */
.ex-title{padding:clamp(40px,5vw,72px) 0 4px;background:var(--paper)}
.ex-title h1{font-family:var(--face);font-weight:300;font-size:min(clamp(40px,4.6vw,68px), 28px + (clamp(40px,4.6vw,68px) - 28px) * 0.6);line-height:1.04;letter-spacing:-.005em;margin:0;color:var(--ink)}
.ex-title p{font:400 17px/1.6 var(--serif);color:var(--ink-55);margin:12px 0 0;max-width:34em}
@media(min-width:821px){
  .ex-face[data-discover] .ex-cats .ex-wrap{display:flex;align-items:center;gap:26px}
  .ex-face[data-discover] .ex-rowcats{display:flex;order:1;flex:1 1 auto;min-width:0}
  .ex-face[data-discover] .ex-sort{order:2;flex:none}
  .ex-face[data-discover] .ex-sort .ex-cat:not(.ex-where){display:none}
  /* the main kinds only, so the row is one calm line that never runs under Where: Featured, Places to stay, Places
     to visit, Eat and drink, Things to do, Walks and Shops. Trending and the twelve interest words (Beaches to
     Photography) stay on the phone, where the row scrolls. */
  .ex-face[data-discover] .ex-rowcats .ex-cat:nth-child(2),
  .ex-face[data-discover] .ex-rowcats .ex-cat:nth-child(n+8):not(:last-child){display:none}
}

/* ---- the four tops on trial (?top=a|b|c|d) ---- */
.ex-tops{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--stone-2,#D8D1CB);padding:6px 8px;font:600 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.ex-tops span{opacity:.6;margin:0 4px}
.ex-tops a{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid transparent;color:var(--ink)}
.ex-tops a.on{border-color:var(--tweed,#682114);color:var(--tweed,#682114)}
.ex-top h1,.ex-top h2{font-family:var(--face);font-weight:300;letter-spacing:-.005em;margin:0}

/* A: a question over film; the bar is square and 64 tall, Where | What | Explore */
.ex-ta{position:relative;height:66vh;min-height:480px;margin-top:calc(-1 * var(--bar,76px));overflow:hidden;color:#fff;background:#2b301d}
.ex-ta .reel{position:absolute;inset:0}
.ex-ta .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.ex-ta .reel video.on{opacity:1}
.ex-ta .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,10,.38),rgba(14,12,10,.2) 45%,rgba(14,12,10,.45))}
.ex-ta .in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--bar,76px) 20px 0;text-align:center}
.ex-ta h1{font-size:min(clamp(34px,3.85vw,72px), 28px + (clamp(34px,3.85vw,72px) - 28px) * 0.6);line-height:1.1;text-shadow:0 2px 34px rgba(10,14,10,.38)}
.ex-ta .bar{display:flex;align-items:stretch;margin-top:clamp(26px,3vw,40px);background:var(--paper);color:var(--ink);height:64px;width:min(760px,100%);text-align:left;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.ex-ta .part{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 22px;border-right:1px solid var(--stone-2,#D8D1CB);position:relative;cursor:pointer}
.ex-ta .part button{display:flex;flex-direction:column;justify-content:center;height:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.ex-ta .k{font:600 10.5px/1 var(--sans,'Jost',sans-serif);letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.ex-ta .part b{font-family:var(--face);font-weight:400;font-size:19px;margin-top:6px}
.ex-ta .menu{position:absolute;left:-1px;right:-1px;top:100%;background:var(--paper);box-shadow:0 18px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;padding:8px 0;z-index:5}
.ex-ta .menu button{height:44px;padding:0 22px;text-align:left;font-family:var(--face);font-size:18px;background:none;border:0;cursor:pointer;color:var(--ink)}
.ex-ta .menu button:hover,.ex-ta .menu button.on{color:var(--tweed,#682114)}
.ex-ta .go{flex:none;padding:0 30px;background:var(--tweed,#682114);color:var(--shell,#F9F5EE);border:0;font:400 15px/1 var(--sans,'Jost',sans-serif);cursor:pointer}
.ex-ta .go:hover{background:var(--cask,#392916)}

/* B: Scotland as a map, the region's picture and line beside it */
.ex-tb{padding:clamp(36px,4vw,64px) 0 8px;background:var(--paper)}
.ex-tb .in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.ex-tb h1{font-size:min(clamp(38px,4.2vw,64px), 28px + (clamp(38px,4.2vw,64px) - 28px) * 0.6);line-height:1.04}
.ex-tb .lede{font:400 17px/1.6 var(--serif);color:var(--ink-55);margin-top:14px;max-width:26em}
.ex-tb .rg{margin-top:24px}
.ex-tb .rg img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ex-tb .rg b{display:block;font-family:var(--face);font-weight:400;font-size:30px;margin-top:16px}
.ex-tb .rg p{font:400 17px/1.55 var(--serif);color:var(--ink-55);margin-top:6px}
.ex-tb .show{margin-top:16px;height:50px;padding:0 24px;border:1px solid var(--tweed,#682114);background:var(--tweed,#682114);color:var(--shell,#F9F5EE);font:400 14.5px/1 var(--sans,'Jost',sans-serif);cursor:pointer}
.ex-tb .map{max-width:520px;justify-self:center;width:100%}
.ex-tb .map svg{width:100%;height:auto}

/* C: pick a part of Scotland, large region photographs with the home page's tweed foot */
.ex-tc{padding:clamp(36px,4vw,64px) 0 8px;background:var(--paper)}
.ex-tc h1,.ex-tc .hd h2{font-size:min(clamp(36px,3.6vw,56px), 28px + (clamp(36px,3.6vw,56px) - 28px) * 0.6);line-height:1.05}
.ex-tc .row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 14px) / 5);gap:14px;overflow-x:auto;scrollbar-width:none;margin-top:28px;scroll-snap-type:x mandatory}
.ex-tc .row::-webkit-scrollbar{display:none}
.ex-tc .door{display:block;padding:0;border:0;background:none;cursor:pointer;text-align:left;scroll-snap-align:start}
.ex-tc .door .ph{display:block;aspect-ratio:4/5;overflow:hidden}
.ex-tc .door img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.ex-tc .door:hover img{transform:scale(1.05)}
.ex-tc .door .ft{display:flex;align-items:center;height:52px;padding:0 16px;background:var(--tweed,#682114);color:var(--shell,#F9F5EE);font-family:var(--face);font-size:19px}
.ex-tc .door.on .ft{background:var(--cask,#392916)}

/* D: words only */
.ex-td{padding:clamp(40px,5vw,80px) 0 12px;background:var(--paper)}
.ex-td .k{font:600 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.ex-td ul{list-style:none;margin:18px 0 0;padding:0}
.ex-td li button{background:none;border:0;padding:4px 0;cursor:pointer;font-family:var(--face);font-weight:300;font-size:min(clamp(40px,4.4vw,70px), 28px + (clamp(40px,4.4vw,70px) - 28px) * 0.6);line-height:1.12;color:var(--ink);opacity:.3;transition:opacity .3s}
.ex-td li button:hover,.ex-td li button.on{opacity:1}

@media(max-width:820px){
  .ex-ta .bar{flex-direction:column;height:auto}
  .ex-ta .part{height:60px;border-right:0;border-bottom:1px solid var(--stone-2,#D8D1CB)}
  .ex-ta .go{height:52px}
  .ex-tb .in{grid-template-columns:1fr}
  .ex-tc .row{grid-auto-columns:62%}
}
/* A: the two halves of the bar read from the left */
.ex-ta button.part{align-items:flex-start;background:none;border-top:0;border-bottom:0;border-left:0;font:inherit;color:inherit;text-align:left}
/* B: the map in the site's stone, the regions as tweed dots, the chosen one in bracken; held to a readable size */
.ex-tb .map{max-width:360px}
.ex-tb .map svg path,.ex-tb .map svg polygon{fill:var(--stone,#E4DED9);stroke:none}
.ex-tb .map .dot circle{fill:var(--tweed,#682114);stroke:var(--paper);stroke-width:2;transition:r .2s}
.ex-tb .map a:hover .dot circle,.ex-tb .map .dot:hover circle{r:9}
.ex-tb .map .dot.on circle{fill:var(--bracken,#C08C3D)}
.ex-tb .rg img{aspect-ratio:16/9}

/* C, as Jack chose it (3 October 2026): a small hero to look at, All of Scotland first, arrows through every region,
   one line for something particular */
.ex-tch{position:relative;height:46vh;min-height:360px;margin-top:calc(-1 * var(--bar,76px));overflow:hidden;color:#fff;background:#2b301d}
.ex-tch .reel{position:absolute;inset:0}
.ex-tch .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.ex-tch .reel video.on{opacity:1}
.ex-tch .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,10,.4),rgba(14,12,10,.2) 50%,rgba(14,12,10,.42))}
.ex-tch .in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:var(--bar,76px);text-align:center}
.ex-tch h1{font-family:var(--face);font-weight:400;font-size:min(clamp(34px,3.85vw,72px), 28px + (clamp(34px,3.85vw,72px) - 28px) * 0.6);line-height:1.1;text-shadow:0 2px 34px rgba(10,14,10,.38);margin:0}
.ex-tch .cue{position:relative;margin-top:22px;background:none;border:0;color:#fff;cursor:pointer;font:400 clamp(15px,1.12vw,20px)/1.5 var(--serif)}
.ex-tch .cue span{color:rgba(255,255,255,.78)}
.ex-tch .cue i{position:absolute;top:100%;left:50%;margin-top:14px;width:1px;height:56px;transform:translateX(-50%)}
.ex-tch .cue s{position:absolute;left:0;top:0;width:1px;height:0;background:#C08C3D;animation:ex-draw 3.2s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes ex-draw{0%{height:0;opacity:1}62%{height:100%;opacity:1}100%{height:100%;opacity:0}}
.ex-tc .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ex-tc .arrows{display:flex;gap:8px}
.ex-tc .arr{width:50px;height:50px;border:1px solid var(--tweed,#682114);background:transparent;color:var(--tweed,#682114);font:400 17px/1 var(--sans,'Jost',sans-serif);cursor:pointer;transition:background .35s,color .35s,opacity .35s}
.ex-tc .arr:hover{background:var(--tweed,#682114);color:var(--shell,#F9F5EE)}
.ex-tc .arr[disabled]{opacity:.3;cursor:default;background:transparent;color:var(--tweed,#682114)}
.ex-tc .find{display:flex;align-items:center;gap:20px;margin-top:30px;border-bottom:1px solid var(--stone-2,#D8D1CB);padding-bottom:10px}
.ex-tc .find .k{flex:none;font:600 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.ex-tc .find input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--face);font-size:22px;color:var(--ink);padding:6px 0}
.ex-tc .find input::placeholder{color:var(--ink-55);opacity:.7}
@media(prefers-reduced-motion:reduce){.ex-tch .cue s{animation:none;height:100%;opacity:.6}}
@media(max-width:820px){.ex-tc .find{flex-direction:column;align-items:flex-start;gap:6px}.ex-tc .arrows{display:none}}
/* a region chosen says what it is like, with the way to our guide */
.ex-rline{font:400 18px/1.55 var(--serif);color:var(--ink-55);margin:-6px 0 26px;max-width:46em}
.ex-rline a{color:var(--tweed,#682114);border-bottom:1px solid currentColor;margin-left:6px;white-space:nowrap}
/* the search, cleaner (Jack, 3 October 2026): no label, a glass and one line, a fine rule, held to a reading width */
.ex-tc .find{max-width:560px;gap:12px;margin-top:28px;padding-bottom:8px;border-bottom:1px solid var(--stone-2,#D8D1CB);flex-direction:row;align-items:center}
.ex-tc .find svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink-55);stroke-width:1.5}
.ex-tc .find input{font:400 17px/1.4 var(--serif);padding:6px 0}
.ex-tc .find:focus-within{border-color:var(--tweed,#682114)}
.ex-tc .find:focus-within svg{stroke:var(--tweed,#682114)}
@media(max-width:820px){.ex-tc .find{flex-direction:row;align-items:center;max-width:none}}
/* the Where panel on the trial: a small map under the parts of Scotland, the region pointed at in bracken; the lines
   upright and readable; the narrowing said plainly (Jack, 3 October 2026) */
.wh-trial .wh-map{margin:22px 10px 0;max-width:150px;opacity:.95}
.wh-trial .wh-map svg{width:100%;height:auto}
.wh-trial .wh-map svg path,.wh-trial .wh-map svg polygon{fill:rgba(241,237,232,.16);stroke:none}
.wh-trial .wh-map .dot circle{fill:rgba(241,237,232,.45);r:4}
.wh-trial .wh-map .dot.on circle{fill:var(--bracken,#C08C3D);r:8}
.wh-trial .wh-line{font-style:normal;font-size:14px;line-height:1.4;color:rgba(241,237,232,.78)}
.wh-trial .wh-lab{font:400 18px/1.3 var(--face);letter-spacing:0;text-transform:none;color:#F1EDE8;opacity:1}
.wh-trial .wh-pill{height:40px;padding:0 16px;font-size:14px}
.wh-trial .wh-card.on .wh-pic{outline:2px solid var(--bracken,#C08C3D);outline-offset:3px}
/* four ways to show the search (Jack, 3 October 2026), on trial: &find=1..4 */
.ex-finds{position:fixed;left:16px;bottom:64px;z-index:60;display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--stone-2,#D8D1CB);padding:6px 8px;font:600 11px/1 var(--sans,'Jost',sans-serif);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.ex-finds span{opacity:.6;margin:0 4px}
.ex-finds a{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid transparent;color:var(--ink)}
.ex-finds a.on{border-color:var(--tweed,#682114);color:var(--tweed,#682114)}
/* 2: the glass by the arrows; open, the line takes the heading's place */
.ex-tc .arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;display:block;margin:auto}
.ex-tc .find.in-head{flex:1;max-width:none;margin-top:0}
.ex-tc .find.in-head input{font-family:var(--face);font-size:min(clamp(24px,2.2vw,34px), 28px + (clamp(24px,2.2vw,34px) - 28px) * 0.6)}
/* 3: words to tap, quiet, under the line */
.ex-tc .find-words{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px}
.ex-tc .find-words button{background:none;border:0;padding:4px 0;cursor:pointer;font-family:var(--face);font-size:18px;color:var(--ink);opacity:.55;border-bottom:1px solid transparent;transition:opacity .25s,border-color .25s}
.ex-tc .find-words button:hover{opacity:1}
.ex-tc .find-words button.on{opacity:1;border-color:var(--bracken,#C08C3D)}
/* 4: on the film, under the title */
.ex-tch .hero-find{display:flex;align-items:center;gap:12px;width:min(520px,86vw);margin-top:22px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.6)}
.ex-tch .hero-find svg{flex:none;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.5}
.ex-tch .hero-find input{flex:1;min-width:0;border:0;outline:0;background:none;color:#fff;font:400 18px/1.4 var(--serif)}
.ex-tch .hero-find input::placeholder{color:rgba(255,255,255,.75)}

/* NOTHING ON A CARD IS CUT SHORT (Jack, 3 October 2026, on the news cards: "some of the cards cut off words, can you stop
   doing that"; found again on Bookmarks, "Flora Shedden Pop-Up at Th..."): Explore's card words wrap rather than end in
   an ellipsis, on /explore and every page that wears this sheet. */
.ex-face .ex-t b,.ex-face .ex-t i,.ex-face .ex-t em,.ex-face .ex-t u{white-space:normal;overflow:visible;text-overflow:clip}

/* EXPLORE, ONE QUESTION AT A TIME (/try/explore, Jack, 11 October 2026: "maybe it could work almost form like ... user
   clicks an option on the top part eg the queswtion Choose a part of Scotland then that dissapears and the next part
   opens up showing everything with the tab shystem in place - with easy and simple ways of going back"). pages/
   explore-flow.tsx. The question: every region's door in a grid (no arrows, no search). The answer: a heading that names
   what and where, the place a word to press, Choose somewhere else above it, the tabs, the one wall. Prefix exf-. */
.ex-tc.ask{padding-bottom:clamp(64px,10vh,120px)}
.ex-tc.ask .row{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 14px;overflow:visible;scroll-snap-type:none}
.exf-head{padding:clamp(40px,5vw,72px) 0 6px;background:var(--paper)}
.exf-back{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;margin:0 0 30px;border:1px solid var(--tweed,#682114);border-radius:0;background:none;color:var(--tweed,#682114);font:500 14.5px/1 var(--sans,'Jost',sans-serif);cursor:pointer;transition:background .3s,color .3s}
.exf-back:hover{background:var(--tweed,#682114);color:var(--shell,#F9F5EE)}
.exf-head h1{margin:0;font-family:var(--face);font-weight:400;font-size:min(clamp(36px,3.6vw,56px), 28px + (clamp(36px,3.6vw,56px) - 28px) * 0.6);line-height:1.08;color:var(--ink)}
.exf-word{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em;text-decoration-color:#C08C3D}
.exf-word:hover{text-decoration-color:currentColor}
.exf-tabs .ex-rowcats{overflow-x:auto;scrollbar-width:none}
.exf-tabs .ex-rowcats::-webkit-scrollbar{display:none}
.ex-none button{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:1100px){.ex-tc.ask .row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.ex-tc.ask .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.exf-back{margin-bottom:22px}}
/* on a phone the tabs keep the page's 20px edge, scrolling under it (measured at 375: the row began at 0) */
@media (max-width:820px){.exf-tabs .ex-wrap{padding-left:0;padding-right:0}.exf-tabs .ex-rowcats{padding:0 20px;scroll-padding:0 20px}}
/* the old page hid its tab row on a phone (it had chips of its own); the flow's tabs are its only way to choose a kind */
@media (max-width:820px){.ex-cats.exf-tabs{display:block}}
/* THE ANSWER'S SKY (/try/explore, the flow on Days Out's parts, 11 October 2026): the part of Scotland's own photograph
   where Days Out's sky has its film, under the same shade */
.exf-sky > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}