/* The walk from above: the fly-through band for a walk page (wf-). New names, free across public/design-css,
   resources/js and public/design-2026 on 26 October 2026. Everything else is the site's: .in, .kick, .h2, .btn. */
.wf{padding:72px 0 80px;background:var(--wf-ground,var(--paper))}
.wf-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin:0 0 22px}
.wf-head .kick{margin:0 0 10px}
.wf-head h2{margin:0 0 0 -.03em;font:400 clamp(32px,3.2vw,46px)/1.05 var(--face);letter-spacing:-.005em;color:var(--ink)}
.wf-head p{margin:10px 0 0;max-width:46ch;font:400 17px/1.6 var(--serif);color:var(--ink-75)}
.wf-frame{position:relative}
.wf-stage{position:relative;overflow:hidden;aspect-ratio:16/9;max-height:78vh;width:100%;background:var(--wf-ground,var(--paper))}
.wf-stage .wf-map,.wf-stage .wf-still{position:absolute;inset:0}
.wf-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.wf-still img.on{opacity:1}
.wf-still canvas{position:absolute;left:0;top:0;pointer-events:none}
.wf-still .wf-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--wf-line,#C08C3D);box-shadow:0 0 0 3px var(--wf-ground,#FFFFF7)}
/* small labels in the corners */
.wf-tl,.wf-tr{position:absolute;top:16px;z-index:3;font:600 10.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-75);pointer-events:none}
.wf-tl{left:18px}.wf-tr{right:18px;text-align:right}
.wf-dark .wf-tl,.wf-dark .wf-tr{color:var(--on-forest-55)}
/* the card: our photograph and one line */
.wf-card{position:absolute;left:18px;bottom:18px;z-index:4;display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;width:min(560px,calc(100% - 36px));background:var(--paper);box-shadow:0 18px 40px rgba(29,27,25,.16);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.wf-card.on{opacity:1;transform:none;pointer-events:auto}
.wf-card.nopic{grid-template-columns:minmax(0,1fr)}
.wf-card img{display:block;width:200px;height:100%;min-height:150px;object-fit:cover}
.wf-card .wf-words{padding:18px 20px 18px}
.wf-card .wf-at{margin:0 0 6px;font:600 10.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-75)}
.wf-card h3{margin:0 0 6px;font:400 24px/1.1 var(--face);color:var(--ink)}
.wf-card p{margin:0;font:400 15px/1.5 var(--serif);color:var(--ink-75)}
.wf-card .wf-credit{margin:8px 0 0;font:400 9px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55,rgba(65,64,66,.55))}
.wf-cards-under .wf-card{position:relative;left:auto;bottom:auto;margin:18px 0 0;box-shadow:none;background:transparent;width:auto;max-width:760px}
/* under the picture: the controls, the day, the profile */
.wf-under{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:18px 0 0}
.wf-under .btn{cursor:pointer}
.wf-text{background:none;border:0;padding:6px 0;font:400 15px/1.4 var(--sans);color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--ink-35);text-underline-offset:4px}
.wf-text:hover{text-decoration-color:var(--ink)}
.wf-text:disabled{opacity:.4;cursor:default}
.wf-text.on{text-decoration-color:var(--tweed);color:var(--tweed)}
.wf-say{margin:0;font:400 16px/1.55 var(--serif);color:var(--ink-75)}
.wf-say b{font-weight:500;color:var(--ink)}
.wf-track{position:relative;flex:1 1 320px;height:28px;cursor:pointer}
.wf-track::before{content:"";position:absolute;left:0;right:0;top:13px;height:2px;background:var(--ink-20)}
.wf-track i{position:absolute;top:13px;left:0;height:2px;background:var(--wf-line,#C08C3D)}
.wf-track b{position:absolute;top:8px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--wf-ground,var(--paper));box-shadow:inset 0 0 0 2px var(--ink-55,rgba(65,64,66,.55))}
.wf-track b.past{box-shadow:inset 0 0 0 6px var(--wf-line,#C08C3D)}
/* the whole day, as a line of words */
.wf-day{margin:18px 0 0;font:400 17px/1.7 var(--serif);color:var(--ink-55,rgba(65,64,66,.55))}
.wf-day span{transition:color .4s var(--ease)}
.wf-day span.on{color:var(--ink)}
.wf-day em{font-style:normal;color:var(--ink-35)}
/* the light */
.wf-light{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:18px 0 0}
.wf-light input[type=range]{flex:1 1 260px;accent-color:var(--tweed)}
.wf-light input[type=date]{height:40px;padding:0 10px;border:1px solid var(--ink-35);border-radius:0;background:var(--paper);font:400 14.5px var(--sans);color:var(--ink)}
.wf-sun{margin:14px 0 0;max-width:900px}
/* the profile */
.wf-prof{position:relative;width:100%;margin:22px 0 0;touch-action:none}
.wf-prof svg{display:block;width:100%;height:auto;overflow:visible}
.wf-prof .ax{font:400 11px var(--sans);fill:var(--ink-55,rgba(65,64,66,.55))}
.wf-prof .pic image{cursor:pointer}
.wf-prof .cur{stroke:var(--ink);stroke-width:1}
.wf-prof-say{margin:10px 0 0}
.wf-save{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
.wf-credits{margin:12px 0 0;font:400 11px/1.5 var(--sans);color:var(--ink-55,rgba(65,64,66,.55));max-width:1000px}
.wf-credits a{color:inherit}
/* labels on the map (HTML, in the house faces, so they need no font files from a map server) */
.wf-lab{font:italic 400 13px/1.2 var(--serif);color:var(--ink-75);white-space:nowrap;text-shadow:0 0 3px var(--wf-ground,#FFFFF7),0 0 3px var(--wf-ground,#FFFFF7);pointer-events:none}
.wf-lab.place{font:500 10px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;font-style:normal}
.wf-dark .wf-lab{color:var(--on-forest);text-shadow:0 0 3px #2B301D,0 0 3px #2B301D}
.wf-pin{width:12px;height:12px;border-radius:50%;background:var(--wf-ground,#FFFFF7);box-shadow:inset 0 0 0 2px var(--wf-line,#C08C3D);transition:box-shadow .4s var(--ease)}
.wf-pin.on{box-shadow:inset 0 0 0 6px var(--wf-line,#C08C3D),0 0 0 3px var(--wf-ground,#FFFFF7)}
.wf-me{width:14px;height:14px;border-radius:50%;background:var(--wf-line,#C08C3D);box-shadow:0 0 0 3px var(--wf-ground,#FFFFF7),0 2px 8px rgba(29,27,25,.3)}
.wf-stage .maplibregl-ctrl-attrib,.wf-stage .mapboxgl-ctrl-attrib{font:400 10px/1.4 var(--sans);background:rgba(255,255,247,.8)}
.wf-stage .maplibregl-ctrl-attrib a,.wf-stage .mapboxgl-ctrl-attrib a{color:var(--ink-75)}
@media (max-width:720px){
  .wf{padding:48px 0 56px}
  .wf-stage{aspect-ratio:4/5;max-height:none}
  .wf-card{position:relative;left:auto;bottom:auto;width:auto;margin:14px 0 0;grid-template-columns:120px minmax(0,1fr);box-shadow:none;background:transparent}
  .wf-card img{width:120px;min-height:100px}
  .wf-card .wf-words{padding:2px 0 0 14px}
  .wf-card h3{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.wf-card,.wf-still img,.wf-day span,.wf-pin{transition:none}}

/* making a still (stills.py): the map alone, in a frame that crops well to both shapes */
.wf-making .wf-stage{aspect-ratio:6/5;max-height:none}
.wf-making .wf-card,.wf-making .wf-tl,.wf-making .wf-tr,.wf-making .maplibregl-ctrl-attrib,.wf-making .mapboxgl-ctrl-attrib{display:none!important}
/* on the satellite: the words on the map in white, held off the picture by a soft shadow */
.wf-sat .wf-tl,.wf-sat .wf-tr{color:rgba(255,255,247,.92);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.wf-sat .wf-lab{color:#FFFFF7;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 8px rgba(0,0,0,.35)}
.wf-sat .wf-stage{background:#2B301D}
/* W6, the film: one card for every moment (a place, wildlife, history, good to know, the woods), the walk and the
   loch now beneath it, and a bar along the foot of the picture. One box style only (Jack, 26 Oct). */
.wf-filming .wf-card{display:none}
.wf-filming .wf-stage{aspect-ratio:16/8;cursor:pointer}
.wf-call{position:absolute;left:0;top:0;z-index:4;width:360px;background:rgba(255,255,247,.97);box-shadow:0 24px 60px rgba(14,16,10,.34);will-change:transform;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.wf-call.shown{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.wf-call.docked{position:relative;width:auto;margin:14px 0 0;box-shadow:none;transform:none!important}
.wf-frame:fullscreen .wf-call{width:400px}
.wf-lead{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible;transition:opacity .4s var(--ease)}
.wf-lead:not(.shown){opacity:0!important}
.wf-lead path{stroke:rgba(255,255,247,.9);stroke-width:1.5;fill:none}
.wf-lead circle{fill:none;stroke:#FFFFF7;stroke-width:2}
.wf-moment{padding:0 0 20px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.wf-moment.on{opacity:1;transform:none}
.wf-moment figure{position:relative;margin:0;aspect-ratio:16/10;background:var(--stone);overflow:hidden}
.wf-moment figure img{display:block;width:100%;height:100%;object-fit:cover}
.wf-moment figcaption{position:absolute;right:10px;bottom:8px;font:500 8.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,247,.9);text-shadow:0 1px 3px rgba(0,0,0,.55)}
.wf-kind{display:flex;align-items:center;gap:8px;margin:20px 24px 6px;font:600 10.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-75)}
.wf-kind i{width:8px;height:8px;border-radius:50%;background:var(--ink-35)}
.wf-moment.wildlife .wf-kind i{background:#AFA065}.wf-moment.learn .wf-kind i{background:#C08C3D}.wf-moment.woods .wf-kind i{background:#2B301D}.wf-moment.tip .wf-kind i{background:#A0BAD4}.wf-moment.place .wf-kind i{background:var(--wf-line)}
.wf-moment h3{margin:0 22px 8px;font:400 28px/1.08 var(--face);letter-spacing:-.005em;color:var(--ink)}
.wf-moment:not(.pic) h3{font-size:32px}
.wf-moment .wf-line{margin:0 22px;font:400 16px/1.55 var(--serif);color:var(--ink-75)}
.wf-moment .wf-src{margin:10px 22px 0;font:500 9px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55,rgba(65,64,66,.55))}
.wf-pins{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.wf-pins > *{position:absolute;left:0;top:0;will-change:transform}
.wf-npin{width:10px;height:10px;border-radius:50%;background:#FFFFF7;box-shadow:0 0 0 2px rgba(255,255,247,.9),0 1px 4px rgba(0,0,0,.4);opacity:.85;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.wf-npin.wildlife{background:#AFA065}.wf-npin.learn{background:#C08C3D}.wf-npin.tip{background:#A0BAD4}.wf-npin.place{display:none}
.wf-npin.on{transform:scale(1.9);opacity:1;box-shadow:0 0 0 2px #FFFFF7,0 0 0 8px rgba(255,255,247,.25),0 2px 8px rgba(0,0,0,.45)}
.wf-title{position:absolute;left:48px;top:50%;z-index:4;max-width:520px;transform:translateY(-40%);opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease);pointer-events:none;color:#FFFFF7;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.wf-title.on{opacity:1;transform:translateY(-50%)}
.wf-title::before{content:"";position:absolute;left:-48px;top:-120px;bottom:-120px;width:760px;z-index:-1;background:radial-gradient(ellipse at 20% 50%,rgba(20,22,14,.62),rgba(20,22,14,0) 68%);pointer-events:none}
.wf-filming .wf-stage:has(.wf-title.on) .wf-pins{opacity:.35;transition:opacity .6s var(--ease)}
.wf-title .wf-at{margin:0 0 10px;font:600 11px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,247,.9)}
.wf-title h3{margin:0 0 10px;font:400 clamp(40px,4.6vw,64px)/1.02 var(--face);letter-spacing:-.01em}
.wf-title p{margin:0;font:400 18px/1.5 var(--serif)}
.wf-frame:fullscreen{background:#000;display:flex;align-items:center}
.wf-frame:fullscreen .wf-stage{aspect-ratio:auto;width:100%;height:100%;max-height:none}
@media (max-width:900px){
  .wf-filming .wf-stage{aspect-ratio:4/5}
}
@media (max-width:900px){.wf-title{left:20px;right:20px}}
/* the loch now, in the picture's top corner: the hour, the weather, the light, one line each */
.wf-tr.wf-wxc{display:flex;flex-direction:column;align-items:flex-end;gap:4px;line-height:1.2}
.wf-tr.wf-wxc span:first-child{color:rgba(255,255,247,.7)}
.wf-sat .wf-tr.wf-wxc span{color:#FFFFF7}
.wf-sat .wf-tr.wf-wxc span:first-child{color:rgba(255,255,247,.72)}
/* the film's corners: the walk top left, the time and date large top right with the weather and light beneath */
.wf-filming .wf-tl,.wf-filming .wf-tr{top:20px;display:flex;flex-direction:column;gap:3px;z-index:4;text-transform:none;letter-spacing:0;color:#FFFFF7;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.wf-filming .wf-tl{left:24px}.wf-filming .wf-tr{right:24px;align-items:flex-end;text-align:right}
.wf-filming .wf-tl b,.wf-filming .wf-tr b{font:400 34px/1 var(--face);letter-spacing:-.01em;color:#FFFFF7}
.wf-filming .wf-tl span,.wf-filming .wf-tr span{font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,247,.88)}
.wf-filming .wf-tr em{margin-top:6px;font:400 17px/1.3 var(--serif);font-style:normal;color:#FFFFF7}
.wf-frame:fullscreen .wf-filming .wf-tl b,.wf-frame:fullscreen .wf-tr b{font-size:42px}
/* the lens */
.wf-lens{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,12,8,.5),rgba(10,12,8,0) 24%),linear-gradient(to top,rgba(10,12,8,.5),rgba(10,12,8,0) 20%),radial-gradient(ellipse at 50% 55%,rgba(0,0,0,0) 58%,rgba(0,0,0,.32) 100%)}
.wf-lens::after{content:"";position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wf-pins .wf-lab{transition:opacity .8s var(--ease)}
.wf-flying .wf-pins .wf-lab{opacity:0}
.wf-flying .wf-pins .wf-npin:not(.on){opacity:.35}
@media (prefers-reduced-motion:reduce){.wf-lens::after{display:none}}
/* the foot of the film, as a video's: the line to drag along, cut into chapters; under it play, how far, the places,
   full screen. At the start a large play in the middle of the picture. */
.wf-foot{position:absolute;left:24px;right:24px;bottom:18px;z-index:5;display:flex;align-items:center;gap:16px;padding-top:22px}
.wf-seek{position:absolute;left:0;right:0;top:0;height:16px;cursor:pointer;touch-action:none}
.wf-seek span{position:absolute;top:6px;height:3px;background:rgba(255,255,247,.38);transition:height .2s var(--ease),top .2s var(--ease)}
.wf-seek span i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--wf-line)}
.wf-seek:hover span,.wf-seek.drag span{top:5px;height:5px}
.wf-knob{position:absolute;top:1px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#FFFFF7;box-shadow:0 1px 6px rgba(0,0,0,.45);transform:scale(0);transition:transform .2s var(--ease)}
.wf-seek:hover .wf-knob,.wf-seek.drag .wf-knob,.wf-seek:focus-visible .wf-knob{transform:scale(1)}
.wf-tip{position:absolute;bottom:22px;transform:translateX(-50%);padding:6px 10px;background:#FFFFF7;font:500 12px/1.2 var(--sans);font-style:normal;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.wf-seek:hover .wf-tip{opacity:1}
.wf-play{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;background:#FFFFF7;box-shadow:0 6px 18px rgba(0,0,0,.3);cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--ease)}
.wf-play:hover{transform:scale(1.06)}
.wf-play:focus-visible{outline:2px solid var(--august);outline-offset:3px}
.wf-play i{display:block;width:0;height:0;margin-left:3px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--tweed)}
.wf-play.on i{width:11px;height:13px;margin:0;border:0;border-left:3.5px solid var(--tweed);border-right:3.5px solid var(--tweed)}
.wf-far{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,247,.9);text-shadow:0 1px 6px rgba(0,0,0,.6);white-space:nowrap}
.wf-chapters{position:absolute;left:50%;transform:translateX(-50%);bottom:11px;display:flex;align-items:baseline;justify-content:center;gap:28px;white-space:nowrap}
.wf-chapters a{position:relative;flex:0 0 auto;padding:0 0 7px;font:400 18px/1.2 var(--face);letter-spacing:-.005em;color:rgba(255,255,247,.58);text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.6);transition:color .5s var(--ease)}
.wf-chapters a.past{color:rgba(255,255,247,.78)}
.wf-chapters a.on{color:#FFFFF7}
.wf-chapters a:hover{color:#FFFFF7}
.wf-chapters a i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--wf-line)}
.wf-chapters a:not(.on) i{width:0!important}
.wf-chapters a:focus-visible{outline:2px solid var(--august);outline-offset:4px}
/* the large play at the start, and the play or pause mark that flashes when the picture is pressed */
/* no circle under it (Jack, 28 Oct: "remove teh circle the play button was on"): a large paper mark with a soft shadow,
   and on the poster the words under it */
.wf-bigplay{position:absolute;left:50%;top:50%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0;border:0;background:none;cursor:pointer;opacity:0;transform:translate(-50%,-50%) scale(.92);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);filter:drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.wf-bigplay.on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.wf-bigplay.on:hover{transform:translate(-50%,-50%) scale(1.06)}
.wf-bigplay i{display:block;width:0;height:0;margin-left:10px;border-style:solid;border-width:34px 0 34px 56px;border-color:transparent transparent transparent #FFFFF7}
.wf-bigplay b{font:400 clamp(20px,1.9vw,26px)/1.15 var(--face);color:#FFFFF7;white-space:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.wf-flash{position:absolute;left:50%;top:50%;z-index:6;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(20,22,14,.55);display:grid;place-items:center;opacity:0;pointer-events:none}
.wf-flash i{display:block}
.wf-flash.play i{width:0;height:0;margin-left:5px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #FFFFF7}
.wf-flash.pause i{width:16px;height:22px;border-left:5px solid #FFFFF7;border-right:5px solid #FFFFF7}
.wf-flash.go{animation:wf-flash .7s var(--ease)}
@keyframes wf-flash{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.3)}}
@media (max-width:900px){.wf-foot{left:14px;right:14px;bottom:12px}.wf-chapters{position:static;transform:none;margin-left:auto;gap:16px}.wf-chapters a{font-size:15px}.wf-chapters a:not(.on){display:none}.wf-far{display:none}.wf-bigplay{width:80px;height:80px;margin:-40px 0 0 -40px}}
@media (prefers-reduced-motion:reduce){.wf-flash.go{animation:none}}
/* full screen, from the picture itself; the same button closes it */
.wf-full{position:absolute;right:76px;bottom:2px;width:40px;height:40px;width:46px;height:46px;border:0;border-radius:50%;background:#FFFFF7;box-shadow:0 8px 22px rgba(0,0,0,.3);cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--ease)}
.wf-full:hover{transform:scale(1.06)}
.wf-full:focus-visible{outline:2px solid var(--august);outline-offset:3px}
.wf-full svg{width:18px;height:18px;fill:none;stroke:var(--tweed);stroke-width:2;stroke-linecap:square}
.wf-full .cl{display:none}.wf-full.on .op{display:none}.wf-full.on .cl{display:inline}
.wf-frame.wf-big{position:fixed;inset:0;z-index:2000;background:#000;display:flex;align-items:center}
.wf-frame.wf-big .wf-stage{aspect-ratio:auto;width:100%;height:100%;max-height:none}
/* a phone: full screen sits in the foot's row after the place's name, the row lifted clear of Mapbox's mark */
@media (max-width:900px){.wf-full{position:static;flex:none;margin-left:4px}.wf-foot{bottom:30px}}
/* the card's foot: Move on, small and to the right, and the waiting line flush along the bottom edge */
.wf-moment h3{margin-top:20px}
.wf-moment .wf-kind + h3{margin-top:0}
.wf-moment .wf-line{margin-bottom:0}
.wf-wait{display:flex;justify-content:flex-end;margin:12px 0 0;padding:0 24px;opacity:0;transition:opacity .4s var(--ease)}
.wf-wait.on{opacity:1}
.wf-wait button{padding:6px 0;border:0;background:none;font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--tweed);cursor:pointer}
.wf-wait button span{display:inline-block;margin-left:6px;transition:transform .3s var(--ease)}
.wf-wait button:hover span{transform:translateX(3px)}
.wf-wait-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(65,64,66,.12)}
.wf-wait-line i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--wf-line)}
/* low cloud drifting slowly across the hills, its weight by the weather (--wf-mist, 0.2 clear to 1 in mist) */
.wf-mist{position:absolute;inset:0 0 35% 0;z-index:2;pointer-events:none;overflow:hidden;opacity:calc(var(--wf-mist, .4) * .85);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 55%,transparent 100%)}
.wf-mist i{position:absolute;top:0;bottom:0;left:-50%;width:200%;background-size:900px 420px;opacity:.55;filter:blur(14px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .012' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .94 0 0 0 0 .95 0 0 0 1.6 -.72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  animation:wf-drift 160s linear infinite}
.wf-mist i + i{background-size:1300px 520px;opacity:.35;animation-duration:240s;animation-direction:reverse;top:12%}
@keyframes wf-drift{from{transform:translateX(0)}to{transform:translateX(-900px)}}
.wf-frame figure video{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.wf-mist i{animation:none}}
/* the points and the route can be pressed */
.wf-pins .wf-npin{pointer-events:auto;cursor:pointer;border:0;padding:0;position:absolute}
.wf-pins .wf-npin::after{content:"";position:absolute;inset:-10px;border-radius:50%}
.wf-pins .wf-npin:hover{transform:scale(1.6);opacity:1}
.wf-pins .wf-npin:focus-visible{outline:2px solid var(--august);outline-offset:4px}
.wf-stage.wf-online{cursor:pointer}
.wf-filming .wf-stage{cursor:default}
.wf-filming .wf-stage.wf-online{cursor:pointer}
/* quieter marks in the film: small solid dots with no ring, a walker that breathes softly (Jack, 26 Oct: "a little
   more subtle, no white border around the points") */
.wf-filming .wf-pins .wf-npin{width:8px;height:8px;box-shadow:0 1px 3px rgba(0,0,0,.45);opacity:.9}
.wf-filming .wf-pins .wf-npin.tip{background:#DCE6EF}
.wf-filming .wf-pins .wf-npin.on{transform:scale(1.5);box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 6px rgba(240,226,190,.22)}
.wf-filming .wf-pin{width:8px;height:8px;background:var(--wf-line);box-shadow:0 1px 3px rgba(0,0,0,.45)}
.wf-filming .wf-pin.on{box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 6px rgba(192,140,61,.25)}
.wf-filming .wf-me{width:11px;height:11px;background:#F0E2BE;box-shadow:0 1px 4px rgba(0,0,0,.5);animation:wf-walker 2.2s var(--ease) infinite}
@keyframes wf-walker{0%,100%{box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 0 rgba(240,226,190,.45)}50%{box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 9px rgba(240,226,190,0)}}
/* the hills and the monuments, named on the land */
.wf-hill,.wf-site{display:flex;flex-direction:column;align-items:center;gap:1px;padding-bottom:16px;color:#FFFFF7;text-decoration:none;text-shadow:0 1px 8px rgba(0,0,0,.75);white-space:nowrap;transition:opacity .5s var(--ease)}
.wf-hill::after,.wf-site::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:12px;background:rgba(255,255,247,.7)}
.wf-hill b{font:400 15px/1.1 var(--face)}
.wf-hill span,.wf-site span{font:600 9.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,247,.85)}
.wf-hill.far b{font-size:14px}
.wf-site b{font:italic 400 13px/1.1 var(--serif)}
a.wf-hill{pointer-events:auto}
a.wf-hill:hover b{text-decoration:underline;text-underline-offset:3px}
.wf-hill.hid,.wf-site.hid,.wf-lab.hid,.wf-place.hid{opacity:0!important;pointer-events:none!important}
.wf-flying .wf-pins .wf-hill{opacity:.85}
.wf-flying .wf-pins .wf-site{opacity:0}
@media (prefers-reduced-motion:reduce){.wf-filming .wf-me{animation:none}}
/* paused, nothing moves: the mist, the walker's breath */
.wf-paused .wf-mist i,.wf-paused .wf-me{animation-play-state:paused}
.wf-paused .wf-play{animation:none}
/* on the walk page, in a frame (page.html?embed=1): the band fills the frame's width, on the page's own ground; before
   play, our photograph with the title and the large play, and nothing else loaded */
/* the frame on the walk page never scrolls: its scrollbar stood as a white bar down the film's right side (Jack, 26 Oct) */
.wf-embed,.wf-embed body{overflow:hidden;scrollbar-gutter:auto}
.wf-embed body{background:transparent}
.wf-embed .wf{padding:0;background:transparent}
.wf-embed .wf>.in{max-width:none;margin:0;padding:0}
.wf-poster{cursor:pointer;background:#2B301D}
.wf-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* a phone: the title under the large play, not behind it, and the clock alone at the top (the title names the walk) */
@media (max-width:600px){
  .wf-title{top:auto;bottom:96px;transform:none}.wf-title.on{transform:none}.wf-poster .wf-title{bottom:22px}
  .wf-title h3{font-size:36px}.wf-title p{font-size:16px}
  .wf-filming .wf-tl{display:none}.wf-filming .wf-tr b{font-size:28px}
}
/* the walk page's column (Jack, 26 Oct: the film in the flat map's place, "with the bit play button that makes it go
   full screen"): only the picture, and the credits under it; the card under the picture waits for full screen */
.wf-embed .wf-under{display:none}
.wf-embed .wf-credits{margin:10px 0 0;font-size:11px;line-height:1.5}
.wf-embed .wf:not(:fullscreen) .wf-frame:not(.wf-big) .wf-call.docked{display:none}
/* the band full screen (pressed play on the walk page): the picture fills the screen, nothing else shows */
.wf:fullscreen{padding:0;background:#000;overflow:hidden}
.wf:fullscreen>.in{height:100%}
.wf:fullscreen .wf-frame{height:100%;display:flex;align-items:center;background:#000}
.wf:fullscreen .wf-stage{aspect-ratio:auto;width:100%;height:100%;max-height:none}
.wf:fullscreen .wf-credits,.wf:fullscreen .wf-under,.wf:fullscreen .wf-head{display:none}
.wf:fullscreen .wf-call:not(.over){width:400px}
.wf-filming:fullscreen .wf-tl b,.wf-filming:fullscreen .wf-tr b{font-size:42px}
/* full screen on a narrow screen: the card over the foot of the picture, above the controls */
.wf-call.over{left:12px;right:12px;top:auto;bottom:122px;width:auto;transform:none!important;z-index:5}
.wf-call.over .wf-moment figure{aspect-ratio:16/8}
/* the press, smooth (Jack, 26 Oct: "a much nicer ... effortless, clean and perfect transition"): the photograph lies over
   the film while it gets ready, a quiet ring in place of the play, then fades into the film */
.wf-cover{position:absolute;inset:0;z-index:30;transition:opacity .9s var(--ease)}
.wf-cover.gone{opacity:0;pointer-events:none}
/* the wait, worth it (Jack, 28 Oct): the photograph darkens; "Hidden Scotland presents", the place large, how far it has
   loaded from 0 to 100% with a slim gold bar under it, and what is loading */
.wf-poster .wf-load{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center;color:#FFFFF7;opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.wf-poster .wf-load::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 48%,rgba(14,16,10,.78),rgba(14,16,10,.5) 70%,rgba(14,16,10,.62))}
.wf-poster.wf-loading .wf-load{opacity:1}
.wf-poster.wf-loading .wf-poster-in{opacity:0;transition:opacity .35s}
.wf-load-kick{margin:0 0 14px;font:600 11.5px/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,247,.86)}
.wf-load h2{margin:0;font:400 clamp(44px,6.2vw,92px)/1 var(--face);letter-spacing:-.015em;color:#FFFFF7;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.wf-load-n{margin:clamp(22px,4vh,38px) 0 12px;font:400 clamp(52px,6vw,84px)/1 var(--face);color:#FFFFF7;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wf-load-n b{font-weight:400}
.wf-load-bar{display:block;position:relative;width:min(360px,70%);height:3px;margin:0 auto clamp(16px,2.6vh,22px);background:rgba(255,255,247,.22)}
.wf-load-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(100% * var(--wf-load,0));background:#C08C3D}
.wf-load-say{margin:0;font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,247,.86)}
.wf-poster.wf-loading .wf-load h2{animation:wf-load-in .9s cubic-bezier(.2,.7,.2,1) .1s both}
.wf-poster.wf-loading .wf-load-kick{animation:wf-load-in .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes wf-load-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:600px){.wf-bigplay i{border-width:28px 0 28px 46px}.wf-load-kick{font-size:10.5px}.wf-load-say{font-size:11px;letter-spacing:.12em}}
@media (prefers-reduced-motion:reduce){.wf-poster.wf-loading .wf-load h2,.wf-poster.wf-loading .wf-load-kick{animation:none}}
/* at the reader's own pace (Jack, 26 Oct: "everyone reads at their own pace ... swipe back and forth or press back or
   next"): Back and Next on every card, large enough for a thumb; the hint once; the gold line only when it plays
   through by itself. The card fades and rises in once the camera rests, and fades out before it moves */
.wf-wait{justify-content:space-between;align-items:center;gap:10px;margin:16px 0 0;padding:0 22px}
.wf-wait button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--tweed);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tweed);background:none;transition:background .2s,color .2s,opacity .2s}
.wf-wait button span{margin:0}
.wf-wait .wf-next{background:var(--tweed);color:#FFFFF7}
.wf-wait .wf-next:hover,.wf-wait .wf-next:focus-visible{background:#4f180e}
.wf-wait .wf-back:hover,.wf-wait .wf-back:focus-visible{background:rgba(104,33,20,.07)}
.wf-wait button:hover span{transform:none}
.wf-wait .wf-next:hover span{transform:translateX(3px)}
.wf-wait .wf-back:hover span{transform:translateX(-3px)}
.wf-wait button span{transition:transform .3s var(--ease)}
.wf-wait .wf-back:disabled{visibility:hidden}
.wf-wait .wf-wait-line{display:none}
.wf-wait.wf-timed .wf-wait-line{display:block}
.wf-hint{margin:12px 22px 0;font:400 13px/1.4 var(--serif);font-style:italic;color:var(--ink-55,rgba(65,64,66,.55));text-align:right}
.wf-moment{transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.wf-moment:not(.on){transition:opacity .32s ease,transform .32s ease}
.wf-call{transition:opacity .55s var(--ease),visibility 0s .55s}
.wf-call.shown{transition:opacity .55s var(--ease)}
@media (max-width:600px){.wf-wait{padding:0 16px}.wf-wait button{padding:0 16px}.wf-hint{margin:10px 16px 0}}
@media (prefers-reduced-motion:reduce){.wf-moment{transform:none}}
/* the bar along the foot (Jack, 26 Oct: "a large sticky bar at the bottom for next and back which moves through it"):
   Back and Next large at its two ends, the line through the walk above them, Play through, how far and the places
   between; a soft shade under it so it reads on any ground. Square, as the house buttons are */
.wf-foot{bottom:30px}
.wf-foot::before{content:"";position:absolute;left:-24px;right:-24px;bottom:-30px;height:170px;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(14,16,10,.62),rgba(14,16,10,.28) 55%,rgba(14,16,10,0))}
.wf-step{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border:0;font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:background .2s,opacity .3s,transform .2s var(--ease)}
.wf-step span[aria-hidden]{transition:transform .3s var(--ease)}
.wf-prev{background:rgba(255,255,247,.94);color:var(--tweed)}
.wf-prev:hover span[aria-hidden]{transform:translateX(-3px)}
.wf-fwd{margin-left:auto;background:var(--tweed);color:#FFFFF7}
.wf-fwd:hover{background:#4f180e}
.wf-fwd:hover span[aria-hidden]{transform:translateX(3px)}
.wf-step:active{transform:scale(.97)}
.wf-step:focus-visible{outline:2px solid var(--august);outline-offset:3px}
.wf-step:disabled{opacity:.38;cursor:default;box-shadow:none}
@media (max-width:1300px){.wf-far{display:none}.wf-chapters{gap:20px}.wf-chapters a{font-size:16px}}
@media (max-width:1100px){.wf-chapters a:not(.on){display:none}}
@media (max-width:900px){.wf-chapters{position:static;transform:none;flex:1;margin:0;justify-content:center}.wf-fwd{margin-left:0}}
@media (max-width:600px){.wf-foot{left:12px;right:12px;bottom:26px;gap:10px}.wf-step{min-height:50px;padding:0 18px}.wf-play{flex-basis:40px;width:40px;height:40px}}
/* the close, on the walk page: only while the film fills the window, at the top corner; the walk's name steps aside */
.wf-embed .wf-full{position:absolute;top:18px;left:18px;right:auto;bottom:auto;z-index:8}
.wf-embed .wf-frame:not(.wf-big) .wf-full{display:none}
.wf-embed .wf-big .wf-tl{left:82px}
/* with Back and Next in the bar the line above them says how far; the full screen (the sheet only) sits beside Next */
.wf-foot .wf-far{display:none}
.wf-foot .wf-full{position:static;order:5;flex:none;margin-left:auto}
.wf-foot:has(.wf-full) .wf-fwd{order:6;margin-left:0}
/* the bar holds only Back, Play through, the line and Next (Jack, 26 Oct: of the places and the distance, "we probably
   dont need this bit if were adding a next and back button"); no credits under the film on the walk page: they are in
   the map's (i) */
.wf-foot .wf-chapters{display:none}
.wf-embed .wf-credits{display:none}
.wf-embed .wf-foot .wf-fwd{margin-left:auto}
/* on the walk page the corner button is only ever the close; in the page's column, only the picture and its play */
.wf-embed .wf-full .op{display:none}.wf-embed .wf-full .cl{display:inline}
.wf-embed .wf-frame:not(.wf-big) .wf-foot{display:none}
/* one solid bar right across the foot of the film (Jack, 26 Oct: "a full sticky bar", "timeline bar could be worked
   into the top of the bar"): the line through the walk along its top edge, Back at one end, Next at the other, Play
   through in words between them. No blur behind it: a blur over the moving map costs every frame */
.wf-foot{left:0;right:0;bottom:0;height:84px;padding:0 24px;gap:16px;background:rgba(24,27,17,.93)}
.wf-foot::before{display:none}
.wf-foot .wf-seek{top:-7px;left:0;right:0}
.wf-foot .wf-seek span{background:rgba(255,255,247,.26)}
.wf-foot .wf-step{box-shadow:none}
.wf-foot .wf-play{flex:none;width:auto;height:52px;margin:0 auto;padding:0 8px;border-radius:0;background:none;box-shadow:none;display:inline-flex;align-items:center;gap:12px;color:#FFFFF7;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.wf-foot .wf-play:hover{transform:none}
.wf-foot .wf-play:hover .wf-play-o{transform:scale(1.06)}
.wf-play-o{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#FFFFF7;transition:transform .3s var(--ease)}
.wf-embed .wf-foot .wf-fwd,.wf-foot .wf-fwd{margin-left:0}
.wf-foot:has(.wf-full) .wf-full{margin-left:0}
.wf-embed .wf-big .mapboxgl-ctrl-bottom-right,.wf-embed .wf-big .maplibregl-ctrl-bottom-right{bottom:84px}
.wf-call.over{bottom:96px}
@media (max-width:600px){
  .wf-foot{left:0;right:0;bottom:0;height:74px;padding:0 12px;gap:10px}
  .wf-play-w{display:none}
  .wf-embed .wf-big .mapboxgl-ctrl-bottom-right,.wf-embed .wf-big .maplibregl-ctrl-bottom-right{bottom:74px}
  .wf-call.over{bottom:86px}
}
/* Back, Play through and Next as one group in the middle of the bar (Jack, 27 Oct: "closer to the play through and
   more centered, so its very obvsious what to do"); the sheet's full screen keeps to the right end */
.wf-foot{justify-content:center;gap:14px}
.wf-foot .wf-play{margin:0 6px}
.wf-foot .wf-fwd,.wf-embed .wf-foot .wf-fwd{margin-left:0}
.wf-foot:has(.wf-full) .wf-full{position:absolute;right:24px;top:50%;transform:translateY(-50%)}
/* a phone (Jack, 27 Oct: "the bottom sticky bar can be a bit bigger ... what can we also add to show the user can
   swipe?"): a taller bar with larger buttons at the thumbs' ends; the cards before and after showing as slivers either
   side of the card; the card nudging once to the left the first time, and following the finger as it swipes */
@media (max-width:600px){
  .wf-foot{height:96px;padding:0 14px;justify-content:space-between}
  .wf-foot .wf-step{min-height:60px;padding:0 20px;font-size:14px}
  .wf-play-o{width:48px;height:48px}
  .wf-embed .wf-big .mapboxgl-ctrl-bottom-right,.wf-embed .wf-big .maplibregl-ctrl-bottom-right{bottom:96px}
  .wf-call.over{left:30px;right:30px;bottom:128px}
}
.wf-call.over::before,.wf-call.over::after{content:"";position:absolute;top:7%;bottom:7%;width:14px;background:rgba(255,255,247,.55);pointer-events:none}
.wf-call.over::before{left:-20px}
.wf-call.over::after{right:-20px}
.wf-call.over.wf-first::before,.wf-call.over.wf-last::after{display:none}
.wf-call.over .wf-moment.on.wf-nudge{animation:wf-nudge 1.6s cubic-bezier(.4,0,.2,1) 1.1s 1}
@keyframes wf-nudge{0%,100%{transform:none}35%{transform:translateX(-30px)}55%{transform:translateX(-30px)}}
@media (prefers-reduced-motion:reduce){.wf-call.over .wf-moment.on.wf-nudge{animation:none}}
/* the card's white is the card's own, so it fades with its words: a card changing showed an empty white box between
   them (Jack, 27 Oct: "the fact the cards go white at times isn't great"). Out: a quick fade with a slight fall; in: a
   slower fade and rise once its picture is ready */
.wf-call,.wf-call.over{background:none;box-shadow:none}
.wf-moment{background:rgba(255,255,247,.97);box-shadow:0 24px 60px rgba(14,16,10,.34)}
.wf-call.docked .wf-moment{box-shadow:none}
.wf-moment{opacity:0;transform:translateY(16px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.wf-moment.on{opacity:1;transform:none}
.wf-moment:not(.on){transform:none;transition:opacity .18s ease-in,transform 0s}   /* out quickly and still: a slow fade over the moving city read as a glitch (28 Oct) */
@media (prefers-reduced-motion:reduce){.wf-moment,.wf-moment:not(.on){transform:none}}
/* no flashing (Jack, 27 Oct): the slivers either side show only with a card between them; names that give way fade
   rather than blink; the loading ring goes before the photograph fades */
.wf-call.over::before,.wf-call.over::after{opacity:0;transition:opacity .5s var(--ease)}
.wf-call.over:has(.wf-moment.on)::before,.wf-call.over:has(.wf-moment.on)::after{opacity:1}
.wf-lab,.wf-hill,.wf-site{transition:opacity .45s var(--ease)}
.wf-cover.gone .wf-bigplay{opacity:0;transition:opacity .25s}
.wf-revealing .wf-call{opacity:0!important}
/* the older ways' card holder sits beside the picture in the frame: full window, before the film had started, it took a
   quarter of the width and a black strip showed down the right (Jack, 27 Oct). The film never uses it */
.wf-embed .wf-card,.wf-frame.wf-big>.wf-card{display:none}
/* the photograph carries the opening title through the fade; the film's own stays out of it, so two never show. No
   blue flash from the phone's own tap highlight on the buttons */
.wf-revealing .wf-title{opacity:0!important;transition:none}
.wf-foot button,.wf-full,.wf-bigplay,.wf-poster{-webkit-tap-highlight-color:transparent}
.wf-step:focus:not(:focus-visible){outline:none}
/* the line telling how to go on: centred at the foot of the card (Jack, 27 Oct: "this on the card should be centered ...
   at the bottom of the card"); the cards are all one height, so it sits in the same place on every one */
.wf-moment{display:flex;flex-direction:column}
.wf-moment>*{flex:none}
.wf-moment .wf-hint{margin-top:auto;padding-top:14px;text-align:center}
/* on a phone the card is thrown off with the finger and the next glides in as the dot lands (fly.js, toss and enter) */
.wf-call.over .wf-moment{will-change:transform}
/* a card with no photograph of ours (Jack, 27 Oct: "cards without photos for now"; 28 Oct: "too long and too much white
   space above and below - needs tidied up"): as tall as its own words, not the photographs' cards (fly.js, fitCard);
   what it is above its name, the words from the top, the way on along its foot */
.wf-moment:not(.pic){display:flex;flex-direction:column;padding:26px 0 18px}
.wf-moment:not(.pic) .wf-kind{margin:0 22px 10px}
.wf-moment:not(.pic) h3{margin-top:0;font-size:32px;line-height:1.06}
.wf-moment:not(.pic) .wf-line{font-size:17px}
.wf-moment:not(.pic) .wf-wait{margin-top:auto;padding-top:14px}
/* how long from the start and to the finish, under the card's line (Jack, 27 Oct: "how long until the end") */
.wf-moment .wf-when{margin:12px 22px 0;font:500 12px/1.45 var(--sans);letter-spacing:.03em;color:var(--ink-55,rgba(65,64,66,.6))}
/* Google's 3D city under a city walk: its logo and sources on the picture, as its terms ask, small, above the foot */
.wf-g3d-credit{position:absolute;left:16px;bottom:94px;z-index:6;display:flex;align-items:center;gap:8px;font:400 10.5px/1.2 var(--sans);color:rgba(255,255,247,.8);text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:auto}
.wf-g3d-credit img{height:14px;width:auto;vertical-align:middle}
.wf-g3d-credit a,.wf-g3d-credit .cesium-credit-expand-link{color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.wf-g3d-credit .cesium-credit-textContainer{display:inline}
.wf-embed .wf-frame:not(.wf-big) .wf-g3d-credit{bottom:16px}
.wf-map .cesium-viewer,.wf-map .cesium-widget,.wf-map .cesium-widget canvas{width:100%;height:100%}
.wf-map .cesium-viewer-bottom,.wf-map .cesium-widget-credits{display:none}
.wf-g3d-credit .cesium-credit-logoContainer{display:none!important}
/* over Google's city: our own places by the way, few and calm (white words, a dark halo, a dot where they are) */
.wf-place{position:absolute;left:0;top:0;padding:2px 4px 9px;border:0;background:none;font:500 12.5px/1.2 var(--sans);letter-spacing:.01em;color:#FFFFF7;white-space:nowrap;cursor:pointer;
  text-shadow:0 0 3px rgba(0,0,0,.9),0 1px 8px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.wf-place::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#FFFFF7;box-shadow:0 0 0 1.5px rgba(10,12,6,.5)}
.wf-place.on{opacity:1;pointer-events:auto}
.wf-place:hover,.wf-place:focus-visible{text-decoration:underline;text-underline-offset:3px;outline:none}
.wf-flying .wf-pins .wf-place{opacity:0;pointer-events:none}
.wf-placecard{position:absolute;z-index:9;width:300px;background:#FFFFF7;color:var(--ink);box-shadow:0 12px 34px rgba(0,0,0,.38)}
.wf-placecard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.wf-pc-in{padding:14px 18px 16px}
.wf-placecard .wf-kind{margin:0 0 6px;font:600 10px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55,rgba(65,64,66,.6))}
.wf-placecard h4{margin:0 0 6px;font:400 22px/1.12 var(--face);color:var(--ink)}
.wf-placecard p{margin:0;font:400 14.5px/1.45 var(--serif);color:var(--ink-75,rgba(65,64,66,.85))}
.wf-placecard .wf-go{margin-top:10px}
.wf-pc-x{position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;background:rgba(255,255,247,.92);color:var(--ink);font:400 20px/1 var(--sans);cursor:pointer}
.wf-pc-sheet{left:12px;right:12px;bottom:96px;width:auto}
.wf-pc-sheet img{aspect-ratio:16/9}
/* a card's own page: the film's card links to it */
.wf-moment .wf-go{margin:12px 22px 0}
.wf-go a{font:500 13px/1.3 var(--sans);letter-spacing:.04em;color:var(--tweed,#682114);text-decoration:underline;text-underline-offset:3px}
/* the turn at the top: its names come in, the other names step back */
.wf-pins .wf-view{opacity:0;transition:opacity .7s var(--ease)}
.wf-viewing .wf-pins .wf-view{opacity:1}
/* only during the turn at the top: the flying rule above showed them faintly everywhere, Palace of Holyroodhouse under the
   clock (Jack, 28 Oct) */
.wf-pins .wf-hill.wf-view{opacity:0;pointer-events:none}
.wf-viewing .wf-pins .wf-hill.wf-view{opacity:1;pointer-events:auto}
.wf-viewing .wf-pins .wf-hill.wf-view.hid{opacity:0;pointer-events:none}
.wf-viewing .wf-pins .wf-hill:not(.wf-view),.wf-viewing .wf-pins .wf-site,.wf-viewing .wf-pins .wf-place,.wf-viewing .wf-pins .wf-lab{opacity:0!important;pointer-events:none}
.wf-npin.lunch{background:#C08C3D}
/* Street View over the picture (Look around on a card; the drone's drop to the street): Google's own viewer, with nothing
   of ours over it but a line saying it turns, which fades (Jack, 28 Oct: "remove anything unessarily"). It stops above the
   foot's bar, so Google's credits along its foot and its buttons all show; Back or Next in the bar close it */
.wf-sv{position:absolute;left:0;right:0;top:0;bottom:84px;z-index:4;opacity:0;pointer-events:none;transition:opacity .9s var(--ease);background:#1d1f19}
.wf-embed .wf-frame:not(.wf-big) .wf-sv{bottom:0}
.wf-sv.on.loaded{opacity:1;pointer-events:auto}
.wf-sv iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wf-sv-say{position:absolute;left:50%;bottom:28px;margin:0;padding:9px 16px;transform:translateX(-50%);background:rgba(24,27,17,.72);color:#FFFFF7;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0}
.wf-sv.on.loaded .wf-sv-say{animation:wf-say 4.2s var(--ease) .6s 1 both}
@keyframes wf-say{0%{opacity:0}15%,70%{opacity:1}100%{opacity:0}}
.wf-street .wf-call,.wf-street .wf-lead{opacity:0!important;pointer-events:none}
.wf-sv-open .wf-tr,.wf-sv-open .wf-tl,.wf-sv-open .wf-g3d-credit,.wf-sv-open .wf-pins{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.wf-sv-open .wf-full{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
@media (max-width:600px){.wf-sv{bottom:96px}.wf-sv-say{bottom:20px}}
/* the card's ways on: More about (the drawer), Look around (down to the street) */
.wf-moment .wf-acts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 22px 0}
.wf-acts .wf-more,.wf-acts .wf-look{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid rgba(104,33,20,.55);background:none;font:500 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tweed,#682114);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.wf-acts .wf-more:hover,.wf-acts .wf-more:focus-visible{background:var(--tweed,#682114);color:#FFFFF7;outline:none}
.wf-acts .wf-look:hover,.wf-acts .wf-look:focus-visible{background:rgba(104,33,20,.08);outline:none}
/* a name in the words that opens the drawer */
.wf-ref{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-decoration-color:rgba(192,140,61,.85);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer}
.wf-ref:hover,.wf-ref:focus-visible{color:var(--tweed,#682114);outline:none}
.wf-pins .wf-view.wf-can{border:0;background:none;padding:0;cursor:pointer}
.wf-pins .wf-view.wf-can b{text-decoration:underline;text-decoration-color:rgba(255,255,247,.55);text-underline-offset:3px}
/* the side drawer, drawn as the walk page's desk (DeskPanel, _desk.css): paper, the crumb and Close along its head */
.wf-drawer{position:absolute;right:0;top:0;bottom:84px;z-index:8;display:flex;flex-direction:column;width:min(440px,100%);background:#FFFFF7;color:var(--ink);box-shadow:-18px 0 50px rgba(14,16,10,.3);
  transform:translateX(104%);visibility:hidden;transition:transform .55s cubic-bezier(.2,.75,.2,1),visibility 0s .55s}
.wf-drawer.on{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.wf-dr-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 30px 0;flex:none}
.wf-dr-crumb{font:600 9.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55,rgba(65,64,66,.6));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-dr-x{flex:none;min-height:36px;padding:0;border:0;background:none;font:600 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.wf-dr-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:18px 30px 30px}
.wf-dr-body figure{margin:0 0 20px;aspect-ratio:3/2;background:var(--stone,#e9e4d6);overflow:hidden}
.wf-dr-body figure img{display:block;width:100%;height:100%;object-fit:cover}
.wf-dr-body h3{margin:0 0 10px;font:400 30px/1.05 var(--face);letter-spacing:-.01em;color:var(--ink)}
.wf-dr-body p{margin:0 0 14px;font:400 16px/1.6 var(--serif);color:var(--ink-75,rgba(65,64,66,.88))}
.wf-dr-body .wf-dr-line{font-style:italic;font-size:17px;line-height:1.5}
.wf-dr-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px!important}
.wf-dr-go,.wf-dr-look{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--tweed,#682114);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.wf-dr-go{background:none;color:var(--tweed,#682114)}
.wf-dr-go:hover{background:var(--tweed,#682114);color:#FFFFF7}
.wf-dr-look{background:none;color:var(--tweed,#682114)}
.wf-dr-body .wf-dr-src{margin-top:18px;font:500 10px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55,rgba(65,64,66,.55))}
.wf-drawing .wf-call,.wf-drawing .wf-lead{opacity:0;pointer-events:none;transition:opacity .35s}
/* Continue, always in reach at the drawer's foot, on the paper with a soft shade above it (no dividing line) */
.wf-dr-foot{flex:none;padding:14px 30px 20px;background:#FFFFF7;box-shadow:0 -14px 18px -8px rgba(255,255,247,.95)}
.wf-dr-next{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border:0;background:var(--tweed,#682114);color:#FFFFF7;font:500 15px/1 var(--sans);cursor:pointer;transition:background .2s}
.wf-dr-next:hover,.wf-dr-next:focus-visible{background:#4f180e;outline:none}
.wf-dr-next span{transition:transform .3s var(--ease)}
.wf-dr-next:hover span{transform:translateX(3px)}
@media (max-width:600px){.wf-dr-foot{padding:10px 18px 14px}}
@media (max-width:600px){
  .wf-drawer{top:auto;left:0;bottom:96px;width:auto;max-height:calc(100% - 150px);transform:translateY(104%);box-shadow:0 -14px 40px rgba(14,16,10,.3)}
  .wf-dr-head{padding:16px 18px 0}.wf-dr-body{padding:14px 18px 22px}.wf-dr-body h3{font-size:26px}
}
/* Where next?, at the finish: the bird's eye turning slowly behind a dark veil, as Days Out's questions stand over its
   film (the do-gen opening: a large face heading, picture cards with the name on the picture) */
.wf-wn{position:absolute;left:0;right:0;top:0;bottom:84px;z-index:7;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:84px 40px 36px;
  background:linear-gradient(180deg,rgba(14,16,10,.72),rgba(14,16,10,.6) 40%,rgba(14,16,10,.78));color:#FFFFF7;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility 0s .8s}
.wf-wn.on{opacity:1;visibility:visible;transition:opacity .8s var(--ease)}
.wf-wn-in{width:100%;max-width:1180px;margin:auto 0;text-align:center}
.wf-wn.on .wf-wn-in{animation:wf-wn-up .7s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes wf-wn-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.wf-wn-kick{margin:0 0 10px;font:600 11px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,247,.78)}
.wf-wn h2{margin:0 0 clamp(18px,3vh,30px);font:400 clamp(40px,4.4vw,64px)/1 var(--face);letter-spacing:-.01em;color:#FFFFF7}
.wf-wn h3{margin:clamp(14px,2.2vh,22px) 0 12px;font:400 clamp(18px,1.5vw,22px)/1.2 var(--serif);font-style:italic;color:rgba(255,255,247,.92)}
.wf-wn-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.wf-wn-card{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#2b301d;color:#fff;text-decoration:none;text-align:left}
.wf-wn-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wf-wn-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.72))}
.wf-wn-card span{position:absolute;z-index:1;left:12px;right:12px;bottom:10px}
.wf-wn-card b{display:block;font:400 clamp(15px,1.15vw,18px)/1.15 var(--face)}
.wf-wn-card i{display:block;margin-top:4px;font:500 10px/1.2 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.wf-wn-card:hover img,.wf-wn-card:focus-visible img{transform:scale(1.05)}
.wf-wn-card:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wf-wn-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:clamp(20px,3.4vh,34px) 0 0}
.wf-wn-all,.wf-wn-again{display:inline-flex;align-items:center;min-height:50px;padding:0 28px;border:1px solid #fff;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.wf-wn-all{background:#fff;color:var(--ink)}
.wf-wn-all:hover{background:transparent;color:#fff}
.wf-wn-again{background:none;color:#fff}
.wf-wn-again:hover{background:#fff;color:var(--ink)}
.wf-wn-open .wf-title,.wf-wn-open .wf-bigplay,.wf-wn-open .wf-call,.wf-wn-open .wf-lead,.wf-wn-open .wf-pins,.wf-wn-open .wf-tr{opacity:0!important;pointer-events:none}
@media (max-width:1100px){.wf-wn-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){
  .wf-wn{bottom:96px;padding:70px 0 24px;align-items:flex-start}
  .wf-wn h2{font-size:40px}
  .wf-wn-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;scrollbar-width:none}
  .wf-wn-row::-webkit-scrollbar{display:none}
  .wf-wn-card{flex:0 0 62%;scroll-snap-align:start}
  .wf-wn-acts{padding:0 16px}.wf-wn-all,.wf-wn-again{flex:1 1 100%;justify-content:center}
}
/* THE CARD, DESIGNED WHOLE (Jack, 28 Oct: "too much space at bottom - needs better designed these cards"). Every card ends
   just below its last line or button, picture or none, at every size: no card is held to the tallest one's height (the
   27 Oct "exact same size" left an empty block under the short ones). The same space under the last line as over the
   first (DESIGN-RULES, 20 Oct): 22 px from the photograph to the words and 22 px at the foot (18 on a phone); words alone 22 px
   above and below. Its two buttons are the house's card buttons (DESIGN-RULES, 13 Sep: "Cards get 'Add' and 'Read more',
   the same size"): one row, each half the card, the sans in sentence case, Read more filled tweed, Look around outlined.
   The waiting line runs along the card's very foot and takes no room. Set here once, over the older layers above */
.wf-call .wf-moment{position:relative;min-height:0;padding:0 0 22px}
.wf-call .wf-moment:not(.pic){padding:22px 0}
.wf-call .wf-moment figure{margin:0 0 22px}
.wf-call .wf-moment .wf-kind{margin:0 22px 8px}
.wf-call .wf-moment h3{margin:0 22px 8px;font-size:28px;line-height:1.08}
.wf-call .wf-moment:not(.pic) h3{font-size:30px;line-height:1.06}
.wf-call .wf-moment .wf-line{margin:0 22px;font-size:16px;line-height:1.55}
.wf-call .wf-moment .wf-when{margin:10px 22px 0}
.wf-call .wf-moment .wf-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 22px 0}
.wf-call .wf-acts .wf-more,.wf-call .wf-acts .wf-look{justify-content:center;min-height:42px;padding:0 12px;border:1px solid var(--tweed,#682114);font:500 14px/1.1 var(--sans);letter-spacing:.01em;text-transform:none;text-align:center}
.wf-call .wf-acts .wf-more{background:var(--tweed,#682114);color:#FFFFF7}
.wf-call .wf-acts .wf-more:hover,.wf-call .wf-acts .wf-more:focus-visible{background:#4f180e;color:#FFFFF7}
.wf-call .wf-acts .wf-look{background:none;color:var(--tweed,#682114)}
.wf-call .wf-acts .wf-look:hover,.wf-call .wf-acts .wf-look:focus-visible{background:var(--tweed,#682114);color:#FFFFF7}
.wf-call .wf-moment .wf-hint{margin:14px 22px 0;padding:0;text-align:left}
.wf-call .wf-moment .wf-wait{position:absolute;left:0;right:0;bottom:0;height:3px;margin:0;padding:0}
@media (max-width:600px){
  .wf-call .wf-moment{padding-bottom:18px}
  .wf-call .wf-moment:not(.pic){padding:18px 0}
  .wf-call .wf-moment figure{margin-bottom:18px}
  .wf-call .wf-moment .wf-kind,.wf-call .wf-moment h3,.wf-call .wf-moment .wf-line,.wf-call .wf-moment .wf-when,.wf-call .wf-moment .wf-acts,.wf-call .wf-moment .wf-hint{margin-left:18px;margin-right:18px}
  .wf-call .wf-moment h3{font-size:26px}
  .wf-call .wf-moment:not(.pic) h3{font-size:28px}
  .wf-call .wf-moment .wf-acts{margin-top:16px}
}
/* the poster, one composition (Jack, 28 Oct: "its all a big misaligined - we wnat to urge peole to press play and make it
   something very cool"): the walk's own film behind (or the photograph drifting slowly), a shade from the foot, and on one
   left edge: what it is, the name, the line, and Enter the experience as the house's button (paper, ink, square, the sans
   in sentence case), a play mark in it. No pulse, nothing urgent */
.wf-poster img{transform-origin:60% 40%;animation:wf-drift 26s ease-in-out infinite alternate}
@keyframes wf-drift{from{transform:scale(1)}to{transform:scale(1.07)}}
.wf-poster-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.wf-poster-moving .wf-poster-film{opacity:1}
.wf-poster::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(14,16,10,.82) 0%,rgba(14,16,10,.5) 32%,rgba(14,16,10,0) 62%)}
.wf-poster-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 clamp(22px,6%,44px) clamp(24px,6%,44px);color:#FFFFF7;transition:opacity .4s var(--ease)}
.wf-poster-kick{margin:0 0 12px;font:600 11px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,247,.85)}
.wf-poster-in h3{margin:0 0 10px;font:400 clamp(40px,4.4vw,64px)/1 var(--face);letter-spacing:-.01em;color:#FFFFF7;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.wf-poster-line{margin:0 0 22px;max-width:34em;font:400 17px/1.5 var(--serif);color:rgba(255,255,247,.92)}
.wf-poster-go{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:0 26px 0 22px;background:#FFFFF7;color:var(--ink,#414042);font:500 15px/1 var(--sans);letter-spacing:.01em;transition:background .25s var(--ease),transform .25s var(--ease)}
.wf-poster-go i{display:block;width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--tweed,#682114);transition:transform .3s var(--ease)}
.wf-poster:hover .wf-poster-go,.wf-poster:focus-visible .wf-poster-go{background:#fff}
.wf-poster:hover .wf-poster-go i{transform:translateX(3px)}
.wf-poster:focus-visible{outline:none}
.wf-poster:focus-visible .wf-poster-go{outline:2px solid #FFFFF7;outline-offset:3px}
@media (max-width:600px){.wf-poster-in h3{font-size:38px}.wf-poster-line{font-size:15.5px;margin-bottom:18px}.wf-poster-go{min-height:50px}}
@media (prefers-reduced-motion:reduce){.wf-poster img{animation:none}}
/* Before you set off: Where next?'s page at the start, the drone turning slowly over the first place behind it */
.wf-wi .wf-wn-in{max-width:980px}
.wf-wi-intro{max-width:38em;margin:0 auto 12px;font:400 clamp(17px,1.35vw,20px)/1.55 var(--serif);color:rgba(255,255,247,.95)}
.wf-wi-facts{max-width:44em;margin:0 auto;font:400 15px/1.55 var(--serif);font-style:italic;color:rgba(255,255,247,.8)}
.wf-wi-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.wf-wi-go,.wf-wi-dir{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 30px;border:1px solid #fff;font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.wf-wi-go{background:#fff;color:var(--ink)}
.wf-wi-go:hover{background:transparent;color:#fff}
.wf-wi-go span{transition:transform .3s var(--ease)}
.wf-wi-go:hover span{transform:translateX(3px)}
.wf-wi-dir{background:none;color:#fff}
.wf-wi-dir:hover{background:#fff;color:var(--ink)}
.wf-wi-open .wf-title,.wf-wi-open .wf-bigplay,.wf-wi-open .wf-call,.wf-wi-open .wf-lead,.wf-wi-open .wf-pins,.wf-wi-open .wf-tr{opacity:0!important;pointer-events:none}
@media (max-width:1100px){.wf-wi-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.wf-wi-intro{font-size:16px;padding:0 16px}.wf-wi-facts{font-size:14px;padding:0 16px}.wf-wi-go,.wf-wi-dir{flex:1 1 100%;justify-content:center}}
/* on a phone, Start the walk in view at once: the introduction, then the two buttons, then the places to eat, then the
   practical line (the whole page ran past the screen and Directions sat under the bar) */
@media (max-width:600px){
  .wf-wi .wf-wn-in{display:flex;flex-direction:column}
  .wf-wi .wf-wn-kick{order:0}.wf-wi h2{order:1}.wf-wi .wf-wi-intro{order:2}.wf-wi .wf-wn-acts{order:3;margin:6px 0 4px}
  .wf-wi h3{order:4}.wf-wi .wf-wi-row{order:5}.wf-wi .wf-wi-facts{order:6;margin-top:16px}
  .wf-wi .wf-wn-card{flex-basis:46%}
}
/* the drawer over a place's Street View: Google's view stays beside it, never under it, so its credits and Terms show
   (Jack, 28 Oct: "fly into street view of that cafe and open the cart") */
.wf-sv-open.wf-drawing .wf-sv{right:min(440px,100%)}
@media (max-width:600px){
  .wf-sv-open.wf-drawing .wf-sv{right:0;bottom:56%}
  .wf-sv-open.wf-drawing .wf-drawer{top:44%;max-height:none}
}
/* before the walk is started, nothing of it: no card, no line to it (Jack, 28 Oct) */
.wf-prestart .wf-call,.wf-prestart .wf-lead{opacity:0!important;pointer-events:none}
/* Back and Next only (Jack, 28 Oct: "the only way is for the user to click back and next"): the round Play button goes */
.wf-foot .wf-play{display:none!important}
/* over Google's city on a computer, the card as the film's own caption (Jack, 28 Oct, of way D on the film-cards sheet: "can
   we try d"; first: "seems a bit mistjoined with the long line and the small card, maybe it could go underneighth it more
   centered, maybe more horizontal?"). No box and no long line: a shade rises 330 px from the bar, and on it, 64 px in and
   34 px above the bar, our photograph beside the words (sized and centred below). The place keeps its ring, with
   a faint halo. A card with no photograph is the words alone. A phone keeps its card over the foot */
.wf-call.caption{left:0;right:0;top:auto;bottom:84px;width:auto!important;min-height:330px;padding:0 64px 34px;display:flex;align-items:flex-end;transform:none!important;background:linear-gradient(to top,rgba(20,22,14,.86),rgba(20,22,14,.55) 55%,rgba(20,22,14,0))!important;box-shadow:none;pointer-events:none}
/* darker behind the words, and fading into the film well above them (Jack, 28 Oct: "make the opacity here a little darker
   and fade it into the fly over", "hard to read"): the shade starts 160 px over the first line, so the top of a tall
   caption is never on its faint end, and eases out in steps rather than one straight ramp */
.wf-call.caption:not(.over){min-height:0;padding-top:160px;background:linear-gradient(to top,rgba(14,16,10,.92) 0%,rgba(14,16,10,.88) 40%,rgba(14,16,10,.74) 58%,rgba(14,16,10,.5) 72%,rgba(14,16,10,.24) 86%,rgba(14,16,10,.07) 95%,rgba(14,16,10,0) 100%)!important}
.wf-call.caption:not(.over) .wf-moment>:not(figure):not(.wf-acts){text-shadow:0 1px 12px rgba(0,0,0,.35)}
.wf-call.caption .wf-moment{flex:0 1 auto;display:grid;grid-template-columns:var(--pw,360px) minmax(0,max-content);grid-template-rows:1fr repeat(8,auto);column-gap:28px;align-items:end;padding:0!important;background:none;box-shadow:none;pointer-events:auto}
.wf-call.caption .wf-moment:not(.pic){display:block;max-width:1100px}
.wf-call.caption .wf-moment figure{grid-column:1;grid-row:1/-1;align-self:stretch;min-height:0;margin:0;aspect-ratio:auto;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.wf-call.caption .wf-moment figure img{position:absolute;inset:0}
.wf-call.caption .wf-moment>:not(figure){grid-column:2;margin-left:0;margin-right:0}
.wf-call.caption .wf-moment .wf-kind{margin-top:0;color:rgba(255,255,247,.8)}
.wf-call.caption .wf-moment h3,.wf-call.caption .wf-moment:not(.pic) h3{margin-top:0;font-size:34px;line-height:1.06;color:#FFFFF7}
.wf-call.caption .wf-moment .wf-line{max-width:62ch;font-size:17px;color:rgba(255,255,247,.9)}
.wf-call.caption .wf-moment .wf-when,.wf-call.caption .wf-moment .wf-hint,.wf-call.caption .wf-moment .wf-src{color:rgba(255,255,247,.7)}
.wf-call.caption .wf-moment .wf-acts{display:flex;gap:10px}
.wf-call.caption .wf-acts>*{flex:0 0 auto;width:auto;padding:0 20px}
.wf-call.caption .wf-acts .wf-more{background:#FFFFF7;color:var(--ink);border-color:#FFFFF7}
.wf-call.caption .wf-acts .wf-more:hover,.wf-call.caption .wf-acts .wf-more:focus-visible{background:#fff;border-color:#fff;color:var(--ink)}
.wf-call.caption .wf-acts .wf-look{background:none;color:#FFFFF7;border-color:rgba(255,255,247,.7)}
.wf-call.caption .wf-acts .wf-look:hover,.wf-call.caption .wf-acts .wf-look:focus-visible{background:#FFFFF7;border-color:#FFFFF7;color:var(--ink)}
.wf-lead.caption path{display:none}
.wf-lead circle.halo{display:none}
.wf-lead.caption circle.halo{display:block;stroke:rgba(255,255,247,.45);stroke-width:1.5}
/* Google's logo and Data attribution at the very left of the bar on a computer, on one line (Jack, 28 Oct: "can we put
   google maps and data attriburtion link at the very bottom left on bottom menu bar"); on a phone Back fills that end
   of the bar, so there it stays just above it */
@media (min-width:601px){.wf-g3d-credit{left:24px;bottom:34px;white-space:nowrap}}
/* the Hidden Scotland wordmark in white at the right end of the bar, as in the site's own bar (Jack, 28 Oct: "add hidden
   scotland logo on the bottom right of the page menu footeer too in white"); left of the full-screen button where the bar
   has one; on a phone Next fills that end, so it goes */
.wf-foot .wf-logo{position:absolute;right:24px;top:50%;height:32px;width:auto;transform:translateY(-50%);filter:brightness(0) invert(1);pointer-events:none}
.wf-foot:has(.wf-full) .wf-logo{right:76px}
@media (max-width:600px){.wf-foot .wf-logo{display:none}}
/* on a phone over Google's city, way D as P3 (Jack, 28 Oct: "lets use 93", of the phones on the film-cards sheet): no card
   box, the caption 20 px in from each side above the bar, our photograph across its top at 16:9, a shade rising
   from the bar to about 150 px above the words. Still swiped, thrown and nudged as the card was; the slivers either side
   go, as there is no card edge for them to echo. Google's credit sits on one line just above the bar at the left, with
   20 px clear above it to the caption's last line, so it never reads as part of the words (12 px did); the middle of
   the bar has no room once Next says "Where next?" */
.wf-call.over.caption{left:0;right:0;bottom:96px;min-height:0;padding:150px 20px 46px;display:block;background:linear-gradient(to top,rgba(20,22,14,.9),rgba(20,22,14,.62) 55%,rgba(20,22,14,0))!important}
.wf-call.over.caption::before,.wf-call.over.caption::after{display:none}
.wf-call.over.caption .wf-moment{display:block;max-width:none}
.wf-call.over.caption .wf-moment figure{aspect-ratio:16/9;min-height:0;margin:0 0 16px}
.wf-call.over.caption .wf-moment .wf-kind{margin-bottom:6px}
.wf-call.over.caption .wf-moment h3,.wf-call.over.caption .wf-moment:not(.pic) h3{margin-bottom:8px;font-size:28px}
.wf-call.over.caption .wf-moment .wf-line{max-width:none;font-size:15.5px;line-height:1.5}
.wf-call.over.caption .wf-moment .wf-acts{margin-top:14px}
@media (max-width:600px){.wf-g3d-credit{left:20px;bottom:108px;white-space:nowrap}}
/* on Start the walk, no card until the drone faces the first place again (fly.js, wiStart) */
.wf-arriving .wf-call,.wf-arriving .wf-lead{opacity:0!important;pointer-events:none}
/* the caption centred on the picture, as one block, and our photograph larger: from the top of the words (the title, or
   what it is above it) to the foot of the last line, about 4:3 (fly.js sets --pw) (Jack, 28 Oct: "i think this should be moved right so
   its centered on the page, and the image bigger so it alignes with the top of the title") */
.wf-call.caption:not(.over){justify-content:center}
.wf-call.caption:not(.over) .wf-moment:has(> .wf-kind) figure{grid-row:2/-1}   /* from the title down: what it is stands over the words alone */
/* the two tabs, eat and drink and somewhere to stay (Jack, 28 Oct: "a tab system ... two tabs which flashes through"): the
   headings' own italic serif, the one showing in full white with a gold line under it, the other dimmer; its row comes in
   with a quick fade, in the same place, so the page never changes height */
.wf-wn-tabs{display:flex;justify-content:center;gap:28px;margin:clamp(14px,2.2vh,22px) 0 12px}
.wf-wn-tabs button{padding:0 0 6px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;font:400 clamp(18px,1.5vw,22px)/1.2 var(--serif);font-style:italic;color:rgba(255,255,247,.55);transition:color .25s var(--ease),border-color .25s var(--ease)}
.wf-wn-tabs button:hover{color:rgba(255,255,247,.85)}
.wf-wn-tabs button.on{color:#FFFFF7;border-bottom-color:var(--wf-line,#C9A15B)}
.wf-wn-tabs button:focus-visible{outline:2px solid #FFFFF7;outline-offset:4px}
.wf-wn-panes{display:grid}
.wf-wn-panes>.wf-wn-pane{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s}
.wf-wn-panes>.wf-wn-pane.on{opacity:1;visibility:visible;transition:opacity .35s ease}
@media (max-width:600px){.wf-wn-tabs{gap:18px;padding:0 16px}.wf-wn-tabs button{font-size:16px}}
@media (max-width:600px){.wf-wi .wf-wn-tabs{order:4}.wf-wi .wf-wn-panes{order:5}}   /* where the heading and its row stood */
/* the rows of cards on a computer: centred when short; a long one (the stays, 28 Oct) turns with an arrow either side, a
   page at a time, the arrow at an end it has reached gone */
@media (min-width:601px){
  .wf-wn-strip{position:relative}
  .wf-wn-row,.wf-wn .wf-wi-row{--n:6;display:flex;justify-content:center;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .wf-wn .wf-wi-row{--n:4}
  .wf-wn-row::-webkit-scrollbar{display:none}
  .wf-wn-row>.wf-wn-card{flex:0 0 calc((100% - (var(--n) - 1) * 12px) / var(--n));scroll-snap-align:start}
  .wf-wn-row.wf-wn-over{justify-content:flex-start}
  .wf-wn-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border:0;border-radius:0;background:#FFFFF7;color:var(--ink);font:500 18px/1 var(--sans);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
  .wf-wn-left{left:-22px}.wf-wn-right{right:-22px}
  .wf-wn-strip.over .wf-wn-arrow{opacity:1;pointer-events:auto}
  .wf-wn-strip.over.at-start .wf-wn-left,.wf-wn-strip.over.at-end .wf-wn-right{opacity:0;pointer-events:none}
}
@media (min-width:601px) and (max-width:1100px){.wf-wn-row{--n:3}.wf-wn .wf-wi-row{--n:2}}
@media (max-width:600px){.wf-wn-arrow{display:none}}