/* _walks.css: GENERATED by scratchpad/design-2026/build-walks.py from public/design-2026/walks-stage1/ws1.css. Edit the
   sheet, then run the builder; never this file. Walks, stage 1, and round two from public/design-2026/walk-page-2/wpg.css
   (26 October 2026). */
/* ws1.css: the new rules of the walks, stage 1 sheet (Jack, 26 October 2026: "Yes, start stage 1").
   Everything else on the frames is the site's own (.band, .in, .btn, ex- cards, bnb-say, wl, cb-, dor6-, dfr-, do-gen-,
   ady-, ctb-). New names, free across public/design-css, resources/js and public/design-2026 on 26 October 2026:
     wsa-  the walk page's bands after the walk's words: Stay at the start, After the walk, Also near
     wfh-  Walks from here, on a stay page
     wkf-  the walk finder's few additions to Days Out's parts
     dtw-  Did this walk?: the way in, the weather row, a walker's report
     wif-  Is it for me?: a button per kind of walker, and each one's answer for this walk
   No rounded corners, no dividing lines, no counts. Tuned through custom properties the sheet's tuner writes. */
:root{--wsa-h:34px;--wsa-shape:3/2;--wsa-cols:3;--wsa-gap:28px;--wfh-shape:3/4;--wkf-len:13px}
/* ------------------------------------------------------------------ wsa-: the walk page's bands */
.wsa-band{padding:var(--space,clamp(64px,10vh,120px)) 0}
.wsa-band.band{margin:0}
/* the grounds are the site's: .band (paper), .band.stone, and oat written the way _shared.css asks a new ground to be */
.band.wsa-oat:not(.stone):not(.forest){background:var(--oat,#F5F1E9)}
.wsa-band + .wsa-band.wsa-same{padding-top:0}
.wsa-head{margin:0 0 30px;max-width:46ch}
.wsa-h{margin:0;font:400 var(--wsa-h)/1.08 var(--face);letter-spacing:-.005em;color:var(--ink);margin-left:-.03em}
.wsa-line{margin:10px 0 0;font:400 17px/1.55 var(--serif);color:var(--ink-75,rgba(65,64,66,.75))}
.wsa-sub{margin:0 0 16px;font:600 10.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75,rgba(65,64,66,.75))}
.wsa-part + .wsa-part{margin-top:56px}
/* the cards are the site's Explore card (ex-), three across, at the band's shape */
.wsa-band .ex-face{--ex-cols:var(--wsa-cols);--ex-gap:var(--wsa-gap);--ex-row:40px;--ex-shape:var(--wsa-shape);--ex-say:16px}
.wsa-band .ex-c{opacity:1;transform:none;animation:none}
.wsa-band .ex-corner{position:absolute;z-index:2;left:14px;top:12px;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--shell,#F9F5EE);text-shadow:0 1px 10px rgba(14,12,10,.5)}
.wsa-band .ex-p:has(.ex-corner)::before{content:"";position:absolute;inset:0 0 70%;z-index:1;background:linear-gradient(180deg,rgba(14,12,10,.32),rgba(14,12,10,0));pointer-events:none}
.wsa-band .ex-t i{font-style:normal;white-space:normal;overflow:visible;text-overflow:clip}
/* said in a sentence: the beds' own row (bnb-say), with no rule between */
.wsa-says .bnb-say{border-top:0;padding-top:0}
.wsa-says .bnb-say + .bnb-say{margin-top:22px}
.wsa-says .bnb-say p{font-size:21px}
.wsa-says .bnb-say p span{color:var(--ink-55,rgba(65,64,66,.55))}
.wsa-says.no-ph .bnb-say{grid-template-columns:minmax(0,1fr)}
/* B2: Days Out's upright, carried to the walk page (the dor6-pin's own values) */
.wsa-pins{display:grid;grid-template-columns:repeat(var(--wsa-cols),minmax(0,1fr));gap:var(--wsa-gap)}
.wsa-pin{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--stone);color:var(--shell,#F9F5EE);text-decoration:none}
.wsa-pin > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.wsa-pin:hover > img{transform:scale(1.03)}
.wsa-pin::before{content:"";position:absolute;inset:0 0 72%;z-index:1;background:linear-gradient(180deg,rgba(14,12,10,.32),rgba(14,12,10,0))}
.wsa-pin::after{content:"";position:absolute;inset:30% 0 0;z-index:1;background:linear-gradient(180deg,rgba(14,12,10,0),rgba(14,12,10,.28) 45%,rgba(14,12,10,.66))}
.wsa-ptag{position:absolute;z-index:2;left:18px;right:18px;top:16px;display:flex;justify-content:space-between;gap:12px;font:600 10px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-shadow:0 1px 10px rgba(14,12,10,.45)}
.wsa-ptag span{white-space:nowrap}
.wsa-pt{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;font:300 28px/1.06 var(--face);letter-spacing:-.015em;text-wrap:balance}
.wsa-pt small{display:block;margin-top:8px;font:400 13px/1.35 var(--sans);letter-spacing:0;opacity:.92}
/* A2: the day round the walk, on the itinerary's line (A7: dashed, 3px, dash 8 gap 6, stone-2) */
.wsa-day{position:relative;margin:0;padding:0 0 0 46px;list-style:none;max-width:860px}
.wsa-day::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:3px;background:repeating-linear-gradient(180deg,var(--stone-2) 0 8px,transparent 8px 14px)}
.wsa-dstop{position:relative;padding:0 0 46px}
.wsa-dstop:last-child{padding-bottom:0}
.wsa-dot{position:absolute;left:-46px;top:4px;width:21px;height:21px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.wsa-dstop.is-walk .wsa-dot{background:var(--ink)}
.wsa-dlab{margin:0 0 12px;font:600 10.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75,rgba(65,64,66,.75))}
.wsa-dwalk{margin:0;font:400 28px/1.15 var(--face);color:var(--ink)}
.wsa-dwalk span{display:block;margin-top:6px;font:400 16px/1.5 var(--serif);color:var(--ink-55,rgba(65,64,66,.55))}
/* A3: said in sentences, in the page's own label-and-words rows (wl) */
.wsa-said .wl-in + .wl-in{margin-top:48px}
.wsa-said .wl-text .bnb-says{margin-top:4px}
/* A4: one band, four tabs (Days Out's big tabs, carried) */
.wsa-tabs{display:flex;flex-wrap:wrap;gap:0 36px;margin:0 0 30px;padding:0;list-style:none}
.wsa-tabs button{background:none;border:0;padding:2px 0;cursor:pointer;font:300 26px/1.2 var(--face);letter-spacing:-.005em;color:var(--ink-35,rgba(65,64,66,.35))}
.wsa-tabs button.on{color:var(--ink)}
/* where none is close: said plainly, above whatever there is */
.wsa-none{margin:0 0 22px;font:400 21px/1.4 var(--face);color:var(--ink);max-width:40ch}
/* ------------------------------------------------------------------ wfh-: Walks from here, on a stay */
.wfh .cb-card .cb-line{-webkit-line-clamp:2}
.wfh-shape .cb-pic{aspect-ratio:var(--wfh-shape)}
.wfh-band{padding:var(--space,clamp(64px,10vh,120px)) 0;background:var(--paper)}
.wfh-k{display:block;margin:0 0 22px;font:600 10.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.wfh-list{margin:0;padding:0;list-style:none;max-width:900px}
.wfh-list li + li{margin-top:20px}
.wfh-list a{display:grid;grid-template-columns:84px minmax(0,1fr);gap:20px;align-items:center;color:inherit;text-decoration:none}
.wfh-list .ph{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--stone)}
.wfh-list .ph img{display:block;width:100%;height:100%;object-fit:cover}
.wfh-list b{display:block;font:400 21px/1.3 var(--face);color:var(--ink)}
.wfh-list span{display:block;margin-top:4px;font:400 15px/1.45 var(--sans);color:var(--ink-55,rgba(65,64,66,.55))}
.wfh-list .wfh-far{color:var(--ink)}
/* H3: on the line from the door */
.wfh-line{position:relative;margin:0;padding:0 0 0 46px;list-style:none;max-width:900px}
.wfh-line::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:3px;background:repeating-linear-gradient(180deg,var(--stone-2) 0 8px,transparent 8px 14px)}
.wfh-line li{position:relative}
.wfh-line li + li{margin-top:26px}
.wfh-mark{position:absolute;left:-46px;top:28px;width:21px;height:21px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.wfh-line li.door .wfh-mark{top:2px;background:var(--ink)}
.wfh-line .wfh-home{margin:0;font:400 21px/1.3 var(--face);color:var(--ink)}
.wfh-at{display:block;margin:0 0 8px;font:600 10.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55,rgba(65,64,66,.55))}
/* H4: two groups, from the door first */
.wfh-grp + .wfh-grp{margin-top:52px}
.wfh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.wfh-grid .cb-card{display:block}
.wfh-grid .cb-pic{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--stone)}
.wfh-grid .cb-pic img{width:100%;height:100%;object-fit:cover;display:block}
.wfh-none{margin:0;font:400 21px/1.4 var(--face);color:var(--ink);max-width:44ch}
.wfh-none a{color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* ------------------------------------------------------------------ wkf-: the walk finder */
.wkf-pin .dor6-t{bottom:46px}
.wkf-len{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;font:400 var(--wkf-len)/1.35 var(--sans);color:var(--shell,#F9F5EE);opacity:.92;text-shadow:0 1px 10px rgba(14,12,10,.45)}
.wkf-two{display:flex;flex-direction:column;align-items:center;gap:6px}
.wkf-two + .wkf-two{margin-top:2px}
.wkf-two .dfr-tabs button{font-size:22px}
.wkf-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:33px 28px;padding:33px var(--dor6-edge,33px) 96px;background:var(--paper)}
.wkf-cards .cb-card{display:block;color:var(--ink);text-decoration:none}
.wkf-cards .cb-pic{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--stone)}
.wkf-cards .cb-pic img{display:block;width:100%;height:100%;object-fit:cover}
.wkf-honest{margin:0;padding:22px var(--dor6-edge,33px) 0;font:400 16px/1.5 var(--sans);color:var(--ink-75,rgba(65,64,66,.75));background:var(--paper)}
.wkf-near{margin:0;padding:12px var(--dor6-edge,33px) 0;font:600 10.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75,rgba(65,64,66,.75));background:var(--paper)}
.wkf-box{display:flex;justify-content:center;margin:26px 0 0}
.wkf-box input{width:min(560px,80vw);height:64px;padding:0 22px;border:1px solid rgba(249,245,238,.7);border-radius:0;background:rgba(249,245,238,.08);color:var(--shell,#F9F5EE);font:300 26px/1 var(--face)}
.wkf-box input::placeholder{color:rgba(249,245,238,.75)}
.wkf-names{margin:10px auto 0;padding:0;list-style:none;width:min(560px,80vw);background:var(--paper);color:var(--ink);text-align:left}
.wkf-names li{padding:12px 22px;font:400 18px/1.3 var(--face)}
.wkf-names li span{display:block;font:400 13px/1.3 var(--sans);color:var(--ink-55,rgba(65,64,66,.55))}
.wkf-names li.on{background:var(--stone)}
/* ------------------------------------------------------------------ dtw-: Did this walk? */
.dtw-line{margin:22px 0 0;font:400 17px/1.5 var(--serif);color:var(--ink-75,rgba(65,64,66,.75))}
.dtw-line a{color:var(--tweed);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.dtw-ask{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--shell,#F9F5EE);text-align:center}
.dtw-ask > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dtw-ask::after{content:"";position:absolute;inset:0;background:rgba(14,12,10,.42)}
.dtw-ask > div{position:relative;z-index:1;padding:60px var(--edge)}
.dtw-ask h2{margin:0;font:400 min(41px, 28px + (41px - 28px) * 0.6)/1.1 var(--face);color:inherit}
.dtw-ask p{margin:12px auto 26px;max-width:44ch;font:400 17px/1.55 var(--serif)}
.dtw-ask .btn{--line:var(--shell,#F9F5EE);color:var(--shell,#F9F5EE);border-color:var(--shell,#F9F5EE)}
.dtw-pair{display:grid;gap:26px}
.dtw-pair .k{display:block;margin:0 0 10px;font:600 10.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.dtw-tags{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 14px;font:600 10.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-75,rgba(65,64,66,.75))}
.ady-pics figure .dtw-slot{width:220px;max-width:100%}
.dtw-slot{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;background:var(--stone);font:400 13px/1.3 var(--sans);color:var(--ink-55,rgba(65,64,66,.55))}
.dtw-say{margin:8px 0 0;font:400 15px/1.5 var(--sans);color:var(--ink-55,rgba(65,64,66,.55))}
.dtw-say b{font-weight:500;color:var(--ink)}
/* ------------------------------------------------------------------ the glance line (V): the walk's deciding facts */
.p26 .hero p.wsa-glance{font-style:normal;font-family:var(--sans);font-size:17px;letter-spacing:.01em;line-height:1.5;max-width:none}
.wsa-glance i,.wsa-glance-bar i,.wsa-glance-col i{font-style:normal;opacity:.6}
.wsa-glance-bar{margin:0 0 22px;font:600 11px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-forest,#F1EDE8)}
.wsa-glance-col{margin:0 0 18px;font:400 17px/1.5 var(--sans);color:var(--ink)}
/* ------------------------------------------------------------------ wif-: Is it for me? */
.wif-btns{display:flex;flex-wrap:wrap;gap:10px}
.wif-b{min-height:56px;padding:0 22px;border:1px solid var(--ink-35,rgba(65,64,66,.35));border-radius:0;background:var(--paper);color:var(--ink);font:400 16px/1.2 var(--sans);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.wif-b:hover{border-color:var(--ink)}
.wif-b.on{background:var(--august);border-color:var(--august);color:var(--ink)}
.wif-ans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px;margin-top:44px}
.wif-a{margin:0}
.wif-who{margin:0;font:600 10.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75,rgba(65,64,66,.75))}
.wif-v{margin:6px 0 12px;font:400 min(34px, 28px + (34px - 28px) * 0.6)/1.1 var(--face);color:var(--ink)}
.wif-a[data-v="unknown"] .wif-v{color:var(--ink-55,rgba(65,64,66,.55))}
.wif-facts{margin:0;padding:0;list-style:none}
.wif-facts li{margin:0 0 8px;font:400 17px/1.55 var(--serif);color:var(--ink)}
.wif-q{margin:16px 0 0;font:italic 400 17px/1.55 var(--serif);color:var(--ink)}
.wif-q span{display:block;margin-top:4px;font:400 13px/1.4 var(--sans);font-style:normal;color:var(--ink-55,rgba(65,64,66,.55))}
.wif-empty,.wif-none{margin:16px 0 0;font:400 15px/1.5 var(--sans);color:var(--ink-55,rgba(65,64,66,.55))}
.wif-empty a{color:var(--tweed);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.wif-better{margin-top:18px}
.wif-better .bnb-say{grid-template-columns:72px minmax(0,1fr)}
.wif-better .bnb-say p{font-size:19px}
/* T2: every answer at once, a line each */
.wif-lines{margin:0;padding:0;list-style:none;max-width:980px}
.wif-lines li{display:grid;grid-template-columns:260px minmax(0,1fr);gap:4px 24px;padding:0 0 18px;font:400 17px/1.55 var(--serif);color:var(--ink)}
.wif-lines b{font:500 15px/1.6 var(--sans);color:var(--ink)}
.wif-lines p{margin:0}
.wif-v2{font-family:var(--face);font-size:21px}
.wif-lines li[data-v="unknown"] .wif-v2{color:var(--ink-55,rgba(65,64,66,.55))}
.wif-lines a{color:var(--tweed);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* T3: tiles, the answer in a sheet from the right */
.wif-t3{position:relative}
.wif-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:calc(100% - 520px)}
.wif-tile{display:flex;flex-direction:column;justify-content:space-between;min-height:116px;padding:16px 18px;border:1px solid var(--ink-20,rgba(65,64,66,.2));border-radius:0;background:var(--paper);text-align:left;cursor:pointer}
.wif-tile.on{border-color:var(--ink);background:var(--august)}
.wif-tv{font:600 10px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-75,rgba(65,64,66,.75))}
.wif-tl{font:400 19px/1.2 var(--face);color:var(--ink)}
.wif-sheet{position:absolute;top:0;right:0;bottom:0;width:480px;overflow:auto;padding:40px 36px;box-sizing:border-box;background:var(--paper);box-shadow:-18px 0 44px rgba(14,12,10,.14)}
.wif-sheet .wif-a + .wif-a{margin-top:40px}
.wif-x{position:absolute;right:16px;top:12px;width:40px;height:40px;border:0;background:none;font:300 28px/1 var(--sans);color:var(--ink);cursor:pointer}
@media (max-width:900px){.wif-ans{grid-template-columns:1fr}
.wif-tiles{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.wif-sheet{position:static;width:auto;margin-top:24px;box-shadow:none}
.wif-lines li{grid-template-columns:1fr}}
@media (max-width:600px){.wif-b{min-height:48px;padding:0 16px;font-size:15px}
.wif-v{font-size:28px}}
@media (max-width:1100px){:root{--wsa-cols:2}
.wfh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wkf-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){:root{--wsa-h:28px;--wsa-gap:16px}
.wsa-pins{grid-template-columns:repeat(2,minmax(0,1fr))}
.wsa-pt{font-size:20px;left:12px;right:12px;bottom:10px}
.wsa-ptag{left:12px;right:12px;top:10px;font-size:9px;letter-spacing:.16em}
.wsa-says .bnb-say{grid-template-columns:64px minmax(0,1fr);gap:14px}
.wsa-says .bnb-say p{font-size:18px}
.wfh-grid{grid-template-columns:1fr}
.wfh-list a{grid-template-columns:64px minmax(0,1fr);gap:14px}
.wkf-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;padding:16px}
.wkf-pin .dor6-t{bottom:34px}
.wkf-len{left:12px;right:12px;bottom:10px;font-size:11px}
.dtw-ask h2{font-size:30px}}
@media (prefers-reduced-motion:reduce){.wsa-pin > img{transition:none}}
/* wpg.css: the new rules of the walk page, round two (Jack, 26 October 2026, of Loch an Eilein: "make a bigger section on
   places to stay nearby ... after the walk, more suggestions or better presented ... fix spacing isseus ... go through
   each section and improve as much as you can"; and "i dont think this kind of walk should be like the itineary page").
   Everything else in the frames is the site's own: .band, .in, .btn, the Explore card (ex-), the beds said in a sentence
   (bnb-say), the walks bands (wsa-), Is it for me? (wif-), the kind tabs (iy-addtabs), wl / gl-more, ady- / ctb-.
   NEW NAMES (free across public/design-css, resources/js and public/design-2026 on 26 October 2026):
     wpg-  the walk page's new parts: the photographs in the walk's words, the chosen set and its full screen, the films
           of what lives in the pines, After the walk by the hour, the places to stay told large, Did this walk?
           centred, further reading with no lines, and the fixes to the bands' space
   No rounded corners, no dividing lines, no counts. Tuned through custom properties the sheet's tuner writes. */
:root{--wpg-space:clamp(64px,10vh,120px);--wpg-shape:3/2;--wpg-gap:28px;--wpg-row:44px;--wpg-h:34px;--wpg-fig:720px}
/* ------------------------------------------------------------------ the bands' space, put right
   1. After the walk lost its foot: _place.css's ".p26 .band:not(.stone):not(.forest):has(+ .band:not(.led))" takes the
      padding off any band without a ground of its own that has a band after it (meant for two paper bands that read as
      one); After the walk is followed by Also near on oat, so its last photograph sat on the edge. (0,6,0 to beat; 0,7,0.)
   2. Make it a weekend lost its foot the same way, to _welcome.css's ":where(section, div):has(+ .wl)".
   3. Stay at the start had 56 to 96 under it and 64 to 120 over it (_place.css's walk rule). The same space both ends. */
.p26[data-walk]:not(.wpg-asis) .band.wsa-band:not(.stone):not(.forest):not(.led),.p26[data-walk]:not(.wpg-asis) .band.wsa-band.stone:not(.forest):not(.led),.p26[data-walk]:not(.wpg-asis) [data-hs="stay"].band.wsa-band.stone:not(.forest),.p26[data-walk] .band.wpg-band:not(.stone):not(.forest):not(.led),.p26[data-walk] .band.wpg-band.stone:not(.forest):not(.led),.p26[data-walk] [data-hs].band.wpg-band.forest:not(.led){padding:var(--wpg-space) 0}
.p26[data-walk] section.iy-next.wpg-fix{padding:var(--wpg-space) 0}
/* (wpg-asis on the main shows the page's spacing as it is, faults and all, for the sheet's Q1) */
.p26[data-walk] .wpg-band{margin:0}
/* 4. The walk's own measure (--wtw, _place.css) is min(1280px, 100% - 2 edges); the page's .in holds 1400 less two edges.
      At 1920 they agree; at 1440 the film, the words and further reading sat at 80 while every band's heading sat at 78.
      The same measure as .in, so every left edge is one. */
.p26[data-walk][data-hero]:not(.wpg-asis){--wtw:min(calc(1400px - 2 * var(--edge)), calc(100% - 2 * var(--edge)))}
/* the grounds, one each: paper written the way _shared.css asks a new ground to be (the walk page's own ground is shell) */
.band.wpg-paper:not(.stone):not(.forest){background:var(--paper,#FFFFF7)}
.band.wpg-shell:not(.stone):not(.forest){background:var(--shell,#F9F5EE)}
.band.wpg-band.forest{background:var(--forest);color:var(--on-forest)}
.band.forest .wsa-h{color:var(--on-forest)}
.band.forest .wsa-line,.band.forest .wsa-sub{color:var(--on-forest-55)}
.band.forest .ex-t b{color:var(--on-forest)}
.band.forest .ex-t i{color:var(--on-forest-55)}
.band.forest .ex-t .eye{color:var(--on-forest-55)}
.wpg-head{margin:0 0 34px;max-width:52ch}
.wpg-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.wsa-band .wsa-head,.wpg-band .wsa-head{margin-bottom:34px}
.wpg-band .wsa-h,.wsa-band .wsa-h{font-size:var(--wpg-h)}
.wpg-band .ex-face,.wsa-band .ex-face{--ex-cols:3;--ex-gap:var(--wpg-gap);--ex-row:var(--wpg-row);--ex-shape:var(--wpg-shape);--ex-say:16px}
.wpg-band .ex-c{opacity:1;transform:none;animation:none}
.wpg-band .ex-p img{opacity:1}
.wpg-band .ex-t i{font-style:normal;white-space:normal}
.wpg-band .ex-corner{position:absolute;z-index:2;left:14px;top:12px;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--shell,#F9F5EE);text-shadow:0 1px 10px rgba(14,12,10,.5)}
.wpg-band .ex-p:has(.ex-corner)::before{content:"";position:absolute;inset:0 0 70%;z-index:1;background:linear-gradient(180deg,rgba(14,12,10,.32),rgba(14,12,10,0));pointer-events:none}
.wpg-part + .wpg-part{margin-top:64px}
.wpg-band .wsa-sub{margin:0 0 18px}
/* ------------------------------------------------------------------ the facts at a glance, with no lines (C2, C3) */
.p26[data-walk][data-hero] .rows.wpg-nolines{border-top:0}
.p26[data-walk][data-hero] .rows.wpg-nolines div{border-bottom:0;padding:11px 0}
.p26[data-walk][data-hero] .rows.wpg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 36px;border-top:0;margin-top:40px}
.p26[data-walk][data-hero] .rows.wpg-two div{display:block;border-bottom:0;padding:0}
.p26[data-walk][data-hero] .rows.wpg-two dt{margin:0 0 6px}
.p26[data-walk][data-hero] .rows.wpg-two dd{font-size:17px}
.wpg-fold{margin-top:22px}
.wpg-fold summary{cursor:pointer;list-style:none;font:400 14.5px/1 var(--sans);color:var(--tweed);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.wpg-fold summary::-webkit-details-marker{display:none}
/* ------------------------------------------------------------------ the opening: the column beside the film (O) */
/* O2: the words on the film's middle; O3: the words from the film's top, where it starts and the way there level with
   its foot. page.js sets the column's min-height to the film's own height (520 x 650 at 1440); on a phone, none */
.p26[data-walk] .frame.side > .wpg-open{display:flex;flex-direction:column;align-self:stretch}
/* built: the frame's grid sets its columns at the top (align-items:start), so the column stretches to the film's own height
   with no script; the sheet measured it with page.js */
.p26[data-walk] .frame.side > .wpg-open.mid{justify-content:center}
.p26[data-walk] .frame.side > .wpg-open.foot{justify-content:flex-start}
.p26[data-walk] .frame.side > .wpg-open .sum{margin-top:-.16em}
.wpg-start{margin-top:auto;padding-top:36px}
.wpg-start .wsa-sub{margin:0 0 10px}
.wpg-start-say{margin:0;max-width:52ch;font:400 17px/1.55 var(--serif);color:var(--ink)}
.wpg-start .btn{margin-top:22px}
/* built: Walk it now beside Directions to the start (27 October 2026) */
.wpg-start-acts{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.wpg-start-acts .btn{margin-top:22px}
/* built: how the name is said, over where it starts (Jack, 26 October 2026: "we could also add pronounciateion") */
.wpg-start .wpg-say{margin-bottom:24px}
.wpg-before-say a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* ------------------------------------------------------------------ Before you go: the facts as a practical page (C) */
.wpg-before{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(28px,3vw,48px)}
.wpg-before .wsa-sub{margin:0 0 12px}
.wpg-before-say{margin:0;font:400 17px/1.6 var(--serif);color:var(--ink)}
.wpg-prose{max-width:720px}
.wpg-prose p{margin:0 0 18px;font:400 18px/1.65 var(--serif);color:var(--ink)}
.wpg-prose p:last-child{margin-bottom:0}
.wpg-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 48px;margin:0}
.wpg-pairs div{margin:0}
.wpg-pairs dt{margin:0 0 6px;font:500 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.wpg-pairs dd{margin:0;font:400 17px/1.55 var(--serif);color:var(--ink)}
/* ------------------------------------------------------------------ the walk's words, with its photographs (D) */
.wpg-fig{margin:40px auto 44px;max-width:var(--wpg-fig)}
.wpg-fig.wide{max-width:none;width:min(calc(100vw - 2 * var(--edge)), 1284px);position:relative;left:50%;transform:translateX(-50%)}
.wpg-fig img,.wpg-fig video{display:block;width:100%;aspect-ratio:var(--wpg-shape);object-fit:cover;background:var(--stone)}
.wpg-cap{margin:10px 0 0;font:400 13.5px/1.45 var(--sans);color:var(--ink-55)}
.wpg-cap b{font-weight:500;color:var(--ink-75)}
/* the chosen set: three across on a computer, two on a phone, 3:2, a tap for full screen (DESIGN-RULES, 21 October) */
.wpg-setwrap{max-width:var(--col,720px);margin:64px auto 0}
.wpg-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wpg-set button{display:block;padding:0;border:0;background:var(--stone);cursor:zoom-in;aspect-ratio:var(--wpg-shape);overflow:hidden}
.wpg-set img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.wpg-set button:hover img{transform:scale(1.03)}
.wpg-full{position:fixed;inset:0;z-index:90;display:none;background:rgba(20,20,16,.94);color:var(--shell)}
.wpg-full.on{display:grid;grid-template-rows:1fr auto;padding:28px var(--edge)}
.wpg-full img{max-width:100%;max-height:calc(100vh - 140px);margin:auto;object-fit:contain}
.wpg-full nav{display:flex;justify-content:center;gap:12px;padding-top:18px}
.wpg-full nav button{min-width:96px;height:44px;border:1px solid var(--shell);background:none;color:var(--shell);font:400 14.5px var(--sans);cursor:pointer}
/* ------------------------------------------------------------------ what lives in the pines: the films (E) */
.wpg-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wpg-gap)}
.wpg-films.one{grid-template-columns:minmax(0,1fr)}
.wpg-films.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.wpg-film{margin:0}
.wpg-film video,.wpg-film img{display:block;width:100%;aspect-ratio:var(--wpg-shape);object-fit:cover;background:#1d1f16}
.band.forest .wpg-cap{color:var(--on-forest-55)}
.band.forest .wpg-cap b{color:var(--on-forest)}
/* built: what else lives there, said under the films in the caption's voice, a little larger (Jack, 26 October 2026) */
.wpg-films + .wpg-cap{margin-top:30px;max-width:64ch;font-size:15.5px;line-height:1.55}
/* ------------------------------------------------------------------ After the walk (F, G): the sentence form, spaced */
.wpg-band .bnb-says.wsa-says .bnb-say + .bnb-say{margin-top:26px}
.wpg-band .wsa-says .bnb-say{grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:center}
.wpg-band .wsa-says .bnb-ph{aspect-ratio:3/2}
.wpg-band .wsa-says .bnb-ph img{width:100%;height:100%;object-fit:cover}
/* a rail: one row, nearest first, it scrolls sideways */
.wpg-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--wpg-gap)) / 3.3);gap:var(--wpg-gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:0}
.wpg-rail > *{scroll-snap-align:start}
/* ------------------------------------------------------------------ the places to stay (H, I, J) */
.wpg-lead{max-width:none}
.wpg-lead .wpg-head.mid .wsa-sub{margin-bottom:12px}
.wpg-lead-name{margin:0;font:400 calc(var(--wpg-h) + 10px)/1.05 var(--face);letter-spacing:-.008em}
.wpg-lead-line{margin:14px auto 0;max-width:46ch;font:400 18px/1.55 var(--serif);color:var(--ink-75)}
.wpg-lead-say{margin:14px 0 0;font:400 14.5px/1.4 var(--sans);color:var(--ink-75)}
.wpg-lead .btn{margin-top:24px}
.wpg-lead-pic{margin:40px 0 0}
.wpg-lead-pic img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;background:var(--stone)}
.wpg-lead .wpg-set{margin-top:14px}
.wpg-rest{margin-top:72px}
.wpg-more{display:flex;justify-content:center;margin-top:48px}
.wpg-hide{display:none}
.wpg-group + .wpg-group{margin-top:60px}
.wpg-group .wsa-sub a{color:inherit;text-underline-offset:4px}
.wpg-band .iy-addtabs{margin:0 0 30px}
/* J5: the name on the photograph, the advert in its corner, one line under (DESIGN-RULES, 20 October: "a card is one thing
   to press") */
.wpg-on{position:relative;display:block;color:var(--shell)}
.wpg-on .ex-p::after{content:"";position:absolute;inset:45% 0 0;z-index:1;background:linear-gradient(0deg,rgba(14,12,10,.55),rgba(14,12,10,0));pointer-events:none}
.wpg-on .wpg-name{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;font:400 24px/1.1 var(--face);color:var(--shell)}
/* ------------------------------------------------------------------ Did this walk? centred (N2) */
.wpg-did{text-align:center}
.wpg-did .wsa-line{margin-left:auto;margin-right:auto;max-width:46ch}
.wpg-did .btn{margin-top:26px}
/* ------------------------------------------------------------------ further reading, no lines, on the container's edge (P2) */
.p26 .wpg-read .wl-in{grid-template-columns:minmax(0,1fr)}
.p26 .wpg-read .wl-text{max-width:none;width:100%}
.p26 .wpg-read .gl-more-g li{border-bottom:0}
.p26 .wpg-read .gl-more-g a{padding:12px 0}
.p26 .wpg-read .gl-more-g.gl-more-one ul{border-top:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px clamp(28px,3vw,48px)}
@media (max-width:1100px){.wpg-band .ex-face{--ex-cols:2}
.wpg-films.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){:root{--wpg-h:28px;--wpg-gap:14px;--wpg-row:30px}
.wpg-band .ex-face{--ex-cols:2}
.wpg-set{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* built: two across on a phone, so the lead's third photograph would stand alone on its row; two are shown */
.wpg-lead .wpg-set button:nth-child(n+3){display:none}
.wpg-films{grid-template-columns:minmax(0,1fr)}
.wpg-fig{margin:28px auto 32px}
.wpg-lead-name{font-size:32px}
.wpg-lead-pic img{aspect-ratio:3/2}
.wpg-band .wsa-says .bnb-say{grid-template-columns:96px minmax(0,1fr);gap:14px}
.wpg-rail{grid-auto-columns:72%}
.p26 .wpg-read .gl-more-g.gl-more-one ul{grid-template-columns:minmax(0,1fr)}
.p26[data-walk][data-hero] .rows.wpg-two{grid-template-columns:minmax(0,1fr)}
.wpg-before,.wpg-pairs{grid-template-columns:minmax(0,1fr)}
.wpg-start{padding-top:28px}
.wpg-on .wpg-name{font-size:19px;left:12px;right:12px;bottom:10px}
/* built: the places to stay one to a row on a phone, and their tabs on one line that scrolls sideways, never two (Jack,
   27 October 2026: "tabs go on two lines - and i think just one card per row is better ... the tabs system can scroll") */
.wpg-band[data-hs="stay"] .ex-face{--ex-cols:1}
.wpg-band .iy-addtabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:calc(-1 * var(--edge));padding-right:var(--edge);gap:22px}
.wpg-band .iy-addtabs::-webkit-scrollbar{display:none}
.wpg-band .iy-addtabs button{flex:0 0 auto;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.wpg-set img{transition:none}}
/* P2: further reading's two blocks are one section: the same space over its label as under its last link */
.p26[data-walk] section.wl.intro.gl-more-h.wpg-read{padding-top:var(--wpg-space)}
.p26[data-walk] .wpg-read .wl-label{margin-top:0}
.p26[data-walk] section.wl.intro.gl-more.wpg-read{padding-bottom:var(--wpg-space)}
/* wgl-: the walk's glance line, the facts under a walk's name in its opening photograph (the walk-glance sheet,
   26 October 2026). New names, free across public/design-css, resources/js and public/design-2026 on that day. Everything
   else is the site's: .p26 .hero, .w, .in, .rg, h1, .fx.b4 (the house standfirst, _golfl.css), .wsa-glance (the line as
   built, _walks.css), .bkr (the forest bar).

   The tuner's numbers are custom properties on .wgl, so the line it prints is the rule as it would be built:
     --wgl-size   the walk's line at 1440, in px (a phone takes 17)
     --wgl-size2  the second line, in px
     --wgl-o2     the second line's strength
     --wgl-gap    the space under the name, in px */
.p26 .hero .wgl{--wgl-size:20;--wgl-size2:15;--wgl-o2:1;--wgl-gap:14;
  margin:calc(var(--wgl-gap) * 1px) 0 0;font-family:var(--sans);color:var(--shell);max-width:none}
.p26 .hero .wgl p{margin:0;max-width:none}
.p26 .hero .wgl-a{font-size:min(clamp(17px, calc(var(--wgl-size) * 100vw / 1440), calc(var(--wgl-size) * 1px)), 28px + (clamp(17px, calc(var(--wgl-size) * 100vw / 1440), calc(var(--wgl-size) * 1px)) - 28px) * 0.6);line-height:1.4;letter-spacing:.01em}
.p26 .hero .wgl p.wgl-b{margin-top:6px;font-size:calc(var(--wgl-size2) * 1px);line-height:1.45;letter-spacing:.01em;opacity:var(--wgl-o2)}
/* one fact never breaks across two lines (the phone split "£5 / parking" and "café 2 miles / away") */
.wgl-i{white-space:nowrap}
.wgl[data-p="break"] .wgl-i{white-space:normal}
.wgl i{font-style:normal;opacity:.6}
/* between the facts: a middle dot (as built), a wide space, or commas as in a sentence */
.wgl[data-j="space"] i{display:inline-block;width:1.1em;overflow:hidden;color:transparent}
.wgl[data-j="comma"] i{opacity:1}
/* the face of the walk's line: Jost as built, Jost in small spaced capitals as the label above the name, or Lora italic as
   the house standfirst */
.wgl[data-e="caps"] .wgl-a{font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:min(clamp(11px, calc(var(--wgl-size) * 62vw / 144000), calc(var(--wgl-size) * .62px)), 28px + (clamp(11px, calc(var(--wgl-size) * 62vw / 144000), calc(var(--wgl-size) * .62px)) - 28px) * 0.6)}
.wgl[data-e="serif"] .wgl-a{font-family:var(--serif);font-style:italic;letter-spacing:0}
/* the figures a little heavier, the way a guidebook sets its numbers */
.wgl b{font-weight:500}
.wgl[data-e="caps"] b{font-weight:600}
/* a shade under the words on a busy photograph: the Munro opening's own (.mnr-heroby in _place.css), on the line only */
.p26 .hero .w.wgl-shade .wgl,.p26 .hero .w.wgl-shade .wgl-say,.p26 .hero .w.wgl-shade .wgl-corner{text-shadow:0 0 2px rgba(8,10,14,.85),0 1px 12px rgba(8,10,14,.75)}
/* built: the same shade on the walk page, where the opening has no class of its own for it */
.p26 .hero .w:has(.wgl) .wgl,.p26 .hero .w:has(.wgl) .rg{text-shadow:0 0 2px rgba(8,10,14,.85),0 1px 12px rgba(8,10,14,.75)}
/* W3, the sentence: the house standfirst (.fx.b4) as it stands on every other opening */
.p26 .hero p.wgl-say{margin-top:calc(var(--wgl-gap, 14) * 1px)}
/* each sentence its own line, so the walk and the practical never run into one another */
.p26 .hero p.wgl-say span{display:block}
/* W4, the caption in the corner: the facts stacked at the photograph's right foot like a gallery label, the name
   making room for it */
.p26 .hero .w .in.wgl-has-corner{position:relative}
.p26 .hero .wgl-has-corner h1{max-width:calc(100% - 300px)}
.p26 .hero .wgl-corner{position:absolute;right:var(--edge);bottom:0;width:250px;margin:0;font:400 14.5px/1.55 var(--sans);letter-spacing:.01em;color:var(--shell)}
.p26 .hero .wgl-corner span{display:block}
.p26 .hero .wgl-corner span + span{opacity:.85}
/* W5, the walk under the name and the practical facts on the forest bar, over the buttons */
.p26 .bkr .wgl-bar{margin:0 0 18px;font:400 15px/1.5 var(--sans);letter-spacing:.01em;color:var(--on-forest,#F1EDE8)}
.p26 .bkr .wgl-bar i{font-style:normal;opacity:.6}
@media (max-width:760px){.p26 .hero .wgl-has-corner h1{max-width:none}
.p26 .hero .wgl-corner{position:static;width:auto;margin-top:14px;font-size:14px}
.p26 .hero .wgl p.wgl-b{font-size:calc(var(--wgl-size2) * .94px)}}