/* The views of the map (brief 133, on the owner's pick of 10 October): the corner square that turns the map's paper into
   the satellite picture in place, and the sentence under the map that opens the forecast's own page. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* The corner square: a small picture of the newest kept day from space at the map's bottom-left corner, its words with
   it; its size follows the map's frame (--corner, set as the map is drawn). Two faces, one word apart on the button
   (data-face): "card", the house's default since the key study's naive read of 10 October found the drawing's dark square
   possibly broken, a framed print with its date beneath in the page's ink; and "band", the drawing's own face, the picture
   to the edges with its words on a dark band across its foot. */
.map-space-switch{--corner:66px;position:absolute;left:10px;bottom:10px;z-index:3;padding:0;overflow:hidden;cursor:pointer;text-align:left}
.map-space-switch[hidden]{display:none}
/* The bottom-right corner, where a mark lies under the bottom-left one (cornerPlace in app.js). */
.map-space-switch[data-corner=right]{left:auto;right:10px}
.map-space-face{position:absolute;inset:0}
.map-space-thumb,.map-space-paper{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transition:opacity .28s ease}
.map-space-paper{opacity:0;background:var(--paper)}
.map-space-paper .p-land{fill:var(--map);stroke:var(--paper);stroke-width:.6}
.map-space-paper .p-lake{fill:var(--water);stroke:none}
.map-space-switch.is-on .map-space-thumb{opacity:0}
.map-space-switch.is-on .map-space-paper{opacity:1}
.map-space-word{font:600 9px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.map-space-switch[data-face=band]{width:calc(var(--corner) * 76 / 66);height:var(--corner);border:2px solid var(--white);border-radius:4px;background:#24302a;box-shadow:0 1px 6px #0007;color:#fff}
.map-space-switch[data-face=band] .map-space-word{position:absolute;left:0;right:0;bottom:0;padding:2px 4px 3px;background:#000000a6;color:#fff}
.map-space-switch[data-face=card]{width:calc(var(--corner) * 1.55);padding:3px 3px 0;border:1px solid var(--line);border-radius:3px;background:var(--white);box-shadow:0 1px 5px #0005;color:var(--ink)}
.map-space-switch[data-face=card] .map-space-face{position:relative;display:block;width:100%;aspect-ratio:2/1;overflow:hidden;border-radius:1px;background:#24302a}
.map-space-switch[data-face=card] .map-space-word{display:block;padding:2px 1px 3px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* By night the print keeps its light paper, a picture on the dark map rather than a dark tile (the cold read). */
body.night .map-space-switch[data-face=card]{background:#efe9d8;border-color:#cfc8b0;color:#253b31}
.map-space-switch:hover{box-shadow:0 2px 12px #000a}
.map-space-switch:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Pressed before its picture has arrived: the square says so at once, so the press is answered in the first frame. */
.map-space-switch.is-opening .map-space-face{opacity:.6}
/* Closer in than the far and area views the satellite is not drawn, and the square steps aside (the house's default),
   or, in the look built beside it, shrinks to a chip that takes the map back out to the area view with the satellite on. */
.map-panel[data-corner-close=hide] .map-space-switch.is-close{display:none}
.map-panel[data-corner-close=chip] .map-space-switch.is-close{width:auto;height:auto;padding:5px 9px;border:1px solid #fff6;border-radius:14px;background:#000000b3;color:#fff}
.map-panel[data-corner-close=chip] .map-space-switch.is-close .map-space-face{display:none}
.map-panel[data-corner-close=chip] .map-space-switch.is-close .map-space-word{position:static;padding:0;background:none;font-size:11px;white-space:nowrap}

/* The picture under the map: laid in by its box under the same circles, names and dates, faded in and out; its edges
   soften into the paper where a frame reaches past the picture. */
.map-space-layer{pointer-events:none;overflow:visible}
.map-space-picture{display:block;width:100%;height:100%;opacity:0;transition:opacity .32s ease;will-change:opacity}
.map-space-picture.is-soft{--w:0px;--e:0px;--n:0px;--s:0px;-webkit-mask:linear-gradient(90deg,transparent,#000 var(--w),#000 calc(100% - var(--e)),transparent),linear-gradient(180deg,transparent,#000 var(--n),#000 calc(100% - var(--s)),transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 var(--w),#000 calc(100% - var(--e)),transparent),linear-gradient(180deg,transparent,#000 var(--n),#000 calc(100% - var(--s)),transparent);mask-composite:intersect}
#map-host.is-space .map-space-picture{opacity:1}
/* Over the picture the map's names and dates turn light with a dark edge, as the picture's own names are on the From space
   page. They turn in one step at the fade's midpoint (is-space-names), when the ground under them is half paper and half
   picture: changing the colour of every name frame by frame cost the fade its smoothness (the feel test, item 1). */
#map-host.is-space-names .map-drawing .map-place-label{fill:#f8f4e7;stroke:#050b08c4}
#map-host.is-space-names .map-drawing .map-region-name{fill:#f8f4e7;opacity:.78}
#map-host.is-space-names .map-drawing :is(.map-water-label,.map-region-label){fill:#eef1ea;opacity:.9}
#map-host.is-space-names .map-drawing .map-destination-dot{fill:#f8f4e7}
#map-host.is-space-names .map-drawing .b-day{fill:#fff;stroke:#050b08c4}
#map-host.is-space-names .map-drawing .b-day.is-old{fill:#e4e6dc}
#map-host.is-space-names .map-drawing .map-target.b-faint{fill:#000;fill-opacity:.45;stroke:#f8f4e7;opacity:1}
#map-host.is-space-names .map-drawing .map-target:is(.b-edge,.b-ring){stroke:#f8f4e7}
#map-host.is-space-names .map-drawing .map-space-note{visibility:visible}
.map-space-note{fill:#f8f4e7;font:600 9.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;paint-order:stroke;stroke:#050b08d9;stroke-width:3px;stroke-linejoin:round;visibility:hidden}
/* Over cloud the light names and dates need a firmer dark edge (the cold read of 10 October lost grey dates and
   "Laurentides" in white cloud). */
#map-host.is-space-names .map-drawing :is(.map-water-label,.map-region-label,.map-region-name){paint-order:stroke;stroke:#050b08b8;stroke-width:2.6px;stroke-linejoin:round}
#map-host.is-space-names .map-drawing .b-day{stroke:#050b08e6;stroke-width:3.4px}
#map-host.is-space-names~.map-north{color:#f8f4e7;text-shadow:0 0 3px #050b08}

/* The band under the map while the picture shows: the day in serif, the kept sentence cut short, and the way to the whole
   region large. With no key under the map (the owner's pick of 11 October) it takes the credit's line and the peak
   sentence's room together (app.js cornerState sets its foot), the credit and the sentence keeping their places unseen,
   so nothing under the map moves. */
.finder .map-key{position:relative}
.map-key.is-space .map-key-words,.map-key.is-space #map-credit,.map-peak.is-under-space{visibility:hidden}
.map-key-space{position:absolute;left:0;right:0;top:6px;bottom:0;display:flex;flex-direction:column;min-width:0;overflow:hidden;visibility:visible}
.map-key-space[hidden]{display:none}
.map-key-space-words{overflow:hidden;min-height:0}
.map-key-space-words b{font:400 1.18em/1 FieldSerif,Georgia,serif;color:var(--ink)}
.map-key-space-foot{flex:none;display:flex;align-items:baseline;gap:12px;min-width:0}
.map-key-space-page{flex:0 1 auto;min-width:0;color:var(--accent);text-underline-offset:2px}
.map-key-space-credit{flex:none;margin-left:auto;font-size:8px}

@media (prefers-reduced-motion:reduce){.map-space-thumb,.map-space-paper,.map-space-picture{transition:none}}

/* The viewer's own pages beside the finder (brief 133): the From space page and the forecast's page, under the finder's
   compact header, the page on show marked in the nav. */
@media(min-width:901px){
  .view-page-body .site-header{height:46px;padding-top:0;padding-bottom:0;gap:18px}
  .view-page-body .site-header .wordmark{font-size:24px;gap:8px}
  .view-page-body .site-header .wordmark svg{width:20px;height:24px}
}
.site-header nav a[aria-current=page]{text-decoration:underline;text-underline-offset:4px}
main.view-page{max-width:1580px;padding:10px 24px 32px}
/* On a phone these pages keep their nav, wrapped under the wordmark, so each page reaches the others and the finder (the
   finder's own phone header keeps release 11's). */
@media(max-width:760px){
  .view-page-body .site-header{flex-wrap:wrap;row-gap:6px}
  .view-page-body .site-header nav{flex-wrap:wrap;gap:6px 14px;margin-left:0;width:100%}
  .view-page-body .site-header nav>a{display:inline}
  .view-page-body .site-header nav>button{margin-left:auto}
}
.view-page h1{font:400 34px/1.05 FieldSerif,Georgia,serif;letter-spacing:-.8px;margin:3px 0 0}
.view-page h1:focus{outline:none}

/* The From space page: the picture at about three quarters of the width, sized to the window's height so the title, the
   day, the kept days and the picture fit one screen; the sentence and the named places beside it, the list scrolling in
   its own column; stacked on a narrow screen. */
.space-page{display:grid;grid-template-columns:minmax(0,auto) minmax(260px,1fr);gap:0 28px;align-items:stretch}
.space-page-main{min-width:0}
.space-page-date{font:400 22px/1.2 FieldSerif,Georgia,serif;margin:6px 0 8px}
.space-page-days [role=group]{display:flex;flex-wrap:wrap;gap:6px}
.space-page-days button{padding:6px 12px;min-height:34px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums}
.space-page-days button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.space-page-figure{margin:10px 0 0;max-width:none}
.space-page-figure .space-frame{width:min(calc(75vw - 48px),calc((100vh - 238px) * 1450 / 850));width:min(calc(75vw - 48px),calc((100dvh - 238px) * 1450 / 850))}
.space-page-figure figcaption{margin-top:6px}
.space-page-figure .space-credit{margin-top:0}
.space-side{display:flex;flex-direction:column;min-height:0;padding-top:20px}
.space-side .space-sentence{font:15px/1.5 FieldSerif,Georgia,serif;margin:0 0 14px}
.space-side-title{font:400 18px/1.2 FieldSerif,Georgia,serif;margin:0}
.space-side-count{font-size:11px;color:var(--muted);margin:2px 0 8px}
.space-places{list-style:none;margin:0;padding:0 6px 14px 0;display:grid;align-content:start;gap:8px;flex:1 1 0;min-height:120px;overflow-y:auto;overscroll-behavior:contain;-webkit-mask:linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
.space-place-button{display:flex;gap:10px;align-items:center;width:100%;padding:0;border:0;background:none;text-align:left;color:inherit;cursor:pointer}
.space-place-button img{width:96px;height:64px;object-fit:cover;flex:none;background:#17261e}
.space-place-words{min-width:0}
.space-place-words b{display:block;font-size:13px;font-weight:600}
.space-place-words span{font-size:11px;color:var(--muted)}
.space-place-button:hover b,.space-place-button:focus-visible b{text-decoration:underline;text-underline-offset:3px}
.space-page-line{font-size:11px;line-height:1.5;color:var(--muted);margin:10px 0 0;flex:none}
.space-page .space-after{grid-column:1/-1;max-width:none;margin:0}
.space-page .space-note{margin:14px 0 0}
.space-page-missing{grid-column:1/-1;font-size:13px}
.space-bartlett{margin-top:30px}
.space-bartlett .overhead-section{margin-top:0}
.space-bartlett-link{font-size:12px;margin:10px 0 0}
@media(max-width:900px){
  .space-page{display:block}
  .space-page-figure .space-frame{width:100%}
  .space-side{display:block;padding-top:14px}
  .space-places{flex:none;overflow:visible;min-height:0;-webkit-mask:none;mask:none}
  .space-page-figure .space-frame{width:100%}
}

/* The sentence under the map (brief 133, item 4): how many places are at their peak this week, in the page's serif with
   the number in rust, across the map's column on one line, set off by a clear gap and a rust edge at its left, which
   stands between it and the column's captions beside it (the house's note of 10 October from the key study's naive read:
   a caption's bold date and the sentence were read together). */
.map-peak{flex:none;align-self:stretch;max-width:none;margin:9px 0 0;padding:1px 0 1px 10px;border-left:3px solid #b2451f;font:14px/1.4 FieldSerif,Georgia,serif;color:var(--ink)}
body.night .map-peak{border-left-color:#e0734a}
.map-peak[hidden]{display:none}
.map-peak b{color:#b2451f;font-weight:700}
body.night .map-peak b{color:#e0734a}
.map-peak a{color:var(--accent);text-underline-offset:3px;white-space:nowrap}
@media(max-width:900px){.map-peak{font-size:13.5px}}

/* "More mountain views", the three summit cameras that stood at the foot of the trip section, keep their place before
   the White Mountains section; their rules came from calendar.css, which the main page no longer loads. */
.nearby-views{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.nearby-views h3{font:26px FieldSerif,Georgia,serif}
.nearby-view-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px;margin-top:10px}
.nearby-view{padding:16px 0;border-bottom:1px solid var(--line)}
.nearby-view h4{margin:0 0 6px;font:19px FieldSerif,Georgia,serif}
.nearby-view p{font-size:12px;color:var(--muted)}
@media(max-width:760px){.nearby-view-list{grid-template-columns:1fr}}

/* The forecast's own page (brief 133, item 4): the map with the estimates as discs at the left; beside it the legend, the
   visit date, the data line and the thirty rules as notes, one line each, opening to the whole rule and its sources. */
.peak-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);grid-template-areas:"top top" "map side" "missing missing";gap:6px 28px;align-items:start}
.peak-top{grid-area:top}
.peak-lede{font-size:13px;line-height:1.45;color:var(--muted);margin:6px 0 4px;max-width:920px}
.peak-lede b{color:#b2451f}
body.night .peak-lede b{color:#e0734a}
.peak-figure{grid-area:map;margin:0;min-width:0}
.peak-map svg{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--paper)}
.peak-map .map-region-name{font-size:9.5px}
.peak-disc{stroke:#fff;stroke-width:1.1;stroke-opacity:.9;cursor:pointer}
body.night .peak-disc{stroke:#0d1712}
.peak-disc:hover,.peak-disc:focus-visible{stroke:var(--ink);stroke-width:2.2;outline:none}
.peak-disc.is-chosen{stroke:var(--ink);stroke-width:2.6}
.peak-pick{font-size:12px;line-height:1.45;color:var(--muted);margin-top:6px;min-height:2.9em}
.peak-pick b{color:var(--ink)}
.peak-side{grid-area:side;min-width:0}
.peak-legend{border:1px solid var(--line);background:var(--white);padding:8px 12px 7px}
.peak-legend-title{font-weight:600;font-size:12px;margin:0 0 5px}
.peak-legend ul{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:12px}
.peak-legend li{display:flex;align-items:center;gap:7px}
.peak-legend i{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 0 1px #fff8}
.peak-legend-note{font-size:10px;color:var(--muted);margin:5px 0 0}
.peak-visit{margin-top:10px}
.peak-visit-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.peak-visit-label{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:var(--muted)}
.peak-visit input{min-height:32px;padding:3px 8px;font-size:13px;border:1px solid var(--line);background:var(--white);color:var(--ink)}
.peak-weekends{display:flex;gap:6px}
.peak-weekends button{padding:3px 7px;font-size:11px;border:1px solid var(--line);background:none;color:var(--ink)}
.peak-visit-line{font-size:12px;line-height:1.45;color:var(--muted);margin:6px 0 0}
.peak-data{font-size:10.5px;line-height:1.5;color:var(--muted);margin:8px 0 0}
.peak-rules{margin-top:10px;border-top:1px solid var(--line);padding-top:7px}
.peak-rules h2{font:400 17px/1.2 FieldSerif,Georgia,serif;margin:0}
.peak-rules-note{font-size:11px;line-height:1.45;color:var(--muted);margin:3px 0 6px}
.peak-group>summary,.peak-rule>summary{display:block;cursor:pointer;list-style:none}
.peak-group>summary::-webkit-details-marker,.peak-rule>summary::-webkit-details-marker{display:none}
.peak-group>summary::before,.peak-rule>summary::before{content:"▸";display:inline-block;width:1.1em;color:var(--muted)}
.peak-group[open]>summary::before,.peak-rule[open]>summary::before{content:"▾"}
.peak-group>summary{font-size:12.5px;line-height:1.5;padding:1px 0}
.peak-group-count{color:var(--muted);font-size:11px}
.peak-group ul{list-style:none;margin:2px 0 6px;padding:0 0 0 14px}
.peak-rule>summary{font:13px/1.4 FieldSerif,Georgia,serif;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peak-rule[open]>summary{white-space:normal}
.peak-rule p{font-size:12px;line-height:1.45;margin:3px 0 6px 1.1em}
.peak-rule-sources{color:var(--muted);font-size:11px}
.peak-missing{grid-column:1/-1;font-size:13px}
.peak-calendar{margin-top:28px}
@media(max-width:900px){.peak-page{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "map" "side" "missing"}}

/* The picture circles keep their photographs, dated captions and readable counts. */
.map-drawing .b-arc{stroke:var(--paper);stroke-width:.7}
.map-drawing .b-arc-whole{fill:none}
.map-drawing .map-target.b-edge{fill:none;stroke:var(--ink);stroke-width:1;stroke-opacity:.8}
.map-marker:hover .map-target.b-edge,.map-marker:focus .map-target.b-edge{stroke:var(--ink);stroke-width:2.6;stroke-opacity:1}
.map-drawing .map-halo{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 2.4;opacity:.85}
.map-marker.is-result:not(.is-selected) .map-target.b-edge{fill:none;stroke-width:1.5;stroke-opacity:1}
.map-drawing .b-day{fill:var(--ink);font:700 8.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;paint-order:stroke;stroke:var(--map);stroke-width:2.8px;stroke-linejoin:round;pointer-events:none}
.map-drawing .b-day.is-old{font-weight:400;fill:var(--muted)}
.map-drawing .map-target.b-faint{fill:var(--paper);fill-opacity:.3;stroke:var(--muted);stroke-width:1.6;opacity:.9}
body.night .map-drawing .map-target.b-faint{stroke:#d3d1bb;opacity:1}
body.night .map-drawing .b-day.is-old{fill:#cfcdb7}
.map-drawing .map-marker.is-faded:is(:hover,:focus) .map-target.b-faint{opacity:1;stroke:var(--ink);stroke-width:2}
/* Carried from field-guide.css, which the whole page no longer loads (the reviewer's read of 3ee77d82e): the key's line
   about the detailed map stays hidden while that map loads, and a search dims every mark but its results. */
.map-detail-note.is-waiting{visibility:hidden}
.map-drawing.has-lit .map-marker:not(.is-result):not(.is-selected){opacity:.42}
.map-drawing.has-lit .map-marker.is-faded:not(.is-result):not(.is-selected) .map-target.b-faint{opacity:1}
.map-drawing image[data-new-picture]{opacity:var(--new-picture-opacity)}
.map-drawing .map-target.b-near-ring{fill-opacity:.6;opacity:1}
body.night .map-drawing .map-target.b-near-ring{fill-opacity:.22}
.map-drawing .map-marker:is(:hover,:focus) .map-target.b-near-ring{stroke:var(--ink);stroke-width:2}
.map-drawing .b-photo-box{overflow:visible}
.map-drawing .b-photo{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.map-drawing .map-target.b-plain{stroke-width:1.4;stroke-opacity:1}
.map-marker.is-selected .map-target.b-edge{fill:none}
.map-drawing .b-pill rect{fill:var(--ink);stroke:var(--paper);stroke-width:.8}
.map-drawing .b-pill text{fill:var(--paper);font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;pointer-events:none}
.map-drawing .b-pill.is-far text{font-size:9.5px}
.map-drawing .b-rim-grey{stroke:#9a9d8a}
.map-drawing .b-play{fill:var(--muted);pointer-events:none}
.map-drawing .no-colour{fill:var(--paper)}
.map-drawing .b-grey{fill:#9a9a8c}
.map-drawing .b-hollow{fill:var(--paper);fill-opacity:.85}
.map-drawing .b-hollow+.map-target.b-edge{stroke:var(--muted);stroke-width:1.2}
.map-drawing .b-sat-edge{fill:none;stroke:var(--paper);stroke-width:1.3}
.map-drawing .b-sat-days{display:none}
.map-drawing .b-sat-days.is-showing{display:inline}
.map-drawing .map-tier-name{font-size:10px}
.map-drawing .b-tier-hover{display:none}
.map-drawing .b-tier-hover.is-showing{display:inline}
.map-drawing .b-sat-day{fill:var(--ink);font:600 8.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;paint-order:stroke;stroke:var(--map);stroke-width:2.8px;stroke-linejoin:round}
body.night .map-drawing :is(.map-target.b-ring,.b-hollow){fill-opacity:.22}
.map-drawing .b-observer-gap{fill:none;stroke:var(--paper);stroke-width:2.2}
.map-drawing .b-observer{fill:none;stroke:var(--accent);stroke-width:2.4}
.map-drawing .b-hit{fill:transparent;stroke:none;pointer-events:all}
.map-marker.is-resting .map-target.b-edge,.map-marker.is-resting .map-target.b-faint,.map-marker.is-resting .map-target.b-ring{stroke:var(--ink);stroke-width:2.8;stroke-opacity:1}
.map-marker.is-resting{filter:drop-shadow(0 0 2.5px #f7d48a) drop-shadow(0 0 5px #e9a63c)}
.map-marker.is-selected{filter:drop-shadow(0 0 2.5px #f7d48a) drop-shadow(0 0 5px #e9a63c)}
.map-marker.is-selected .map-target.b-edge{stroke:var(--ink);stroke-width:2.8;stroke-opacity:1}
.map-drawing text.is-cut{visibility:hidden}

/* The main page keeps its map and its two independent controls within one window. */
body.whole-page { --panel-width: 33.333vw; --bar-height: 132px; --header-height: 64px; overflow: hidden; height: 100dvh; background: var(--paper); }
.whole-page .site-header { height: var(--header-height); max-width: none; padding: 10px 22px; gap: 18px; position: relative; z-index: 20; background: var(--paper); }
.whole-page .site-header h1 { margin: 0; font: inherit; letter-spacing: normal; }
.whole-page .wordmark { font-size: 28px; gap: 9px; }
.whole-page .wordmark span { font-size: 25px; color: var(--accent); }
.whole-page .site-header nav { gap: clamp(12px, 1.8vw, 28px); font-size: 13px; white-space: nowrap; }
.whole-page .site-header nav [aria-current] { border-bottom: 1px solid var(--accent); padding-bottom: 5px; }
.whole-page main.map-page { position: relative; max-width: none; margin: 0; padding: 0; height: calc(100dvh - var(--header-height)); overflow: hidden; }
.whole-page #map-panel { position: absolute; inset: 0; max-width: none; width: auto; margin: 0; padding: 0; background: var(--water); border: 0; }
.whole-page #map-host { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; aspect-ratio: auto; overflow: hidden; touch-action: pinch-zoom; background: var(--water); }
.whole-page #map-host > .map-drawing { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; z-index: 2; }
.whole-page #map-host .map-detail .map-drawing { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
.whole-page #map-host .map-detail { position: absolute; inset: 0; }
.whole-page .map-tools { position: absolute; top: 14px; left: calc(var(--panel-width) + 16px); right: 18px; display: flex; justify-content: space-between; align-items: start; gap: 14px; pointer-events: none; z-index: 5; font-size: 12px; }
.whole-page .map-tools > * { pointer-events: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 2px 10px #17251d12; }
.whole-page #show-layers summary { cursor: pointer; padding: 9px 13px; }
.whole-page #map-count { margin-left: 8px; color: var(--muted); }
.whole-page #show-layers > div { display: grid; padding: 4px 13px 12px; gap: 9px; }
.whole-page .layer-key { list-style: none; margin: -4px 0 2px 22px; padding: 0; display: grid; gap: 2px; font-size: 10.5px; color: var(--muted); }
.whole-page .layer-key li { display: flex; align-items: center; gap: 6px; }
.whole-page .layer-key i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.whole-page .layer-key .k-now { background: #b2451f; } .whole-page .layer-key .k-soon { background: #c98a2a; }
.whole-page .layer-key .k-later { background: #6d7f3a; } .whole-page .layer-key .k-past { background: #7a5a3a; }
.whole-page #ground-control { border: 0; background: transparent; box-shadow: none; }
.whole-page .ground-control { position: static; margin: 0; }
.whole-page #overview-control { --overview-bottom: calc(var(--bar-height) + 26px); }
.whole-page .foliage-overview-map svg { width: 148px; height: 110px; }
.whole-page .foliage-mark, .whole-page .map-weather-since, .whole-page .map-estimate { pointer-events: none; }
.whole-page .picture-panel { position: absolute; inset: 0 auto 0 0; width: var(--panel-width); z-index: 10; display: flex; flex-direction: column; background: var(--paper); border-right: 1px solid var(--line); box-shadow: 5px 0 18px #18251f12; }
.whole-page .panel-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.whole-page .panel-intro { padding: 22px 20px 10px; }
.whole-page .panel-intro > p { font: 18px/1.48 FieldSerif, Georgia, serif; margin-bottom: 18px; }
.whole-page #guide-search { display: block; padding: 0; margin: 0; position: relative; }
.whole-page #guide-search label { font-size: 11px; letter-spacing: .02em; color: var(--muted); }
.whole-page .search-row { display: flex; border-bottom: 1px solid var(--ink); margin-top: 4px; }
.whole-page #guide-place { min-width: 0; width: 100%; background: transparent; border: 0; padding-left: 0; font-size: 13px; }
.whole-page .search-row > button { width: 38px; }
.whole-page #guide-suggestions { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; max-height: 250px; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.whole-page #guide-suggestions button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 10px; font-size: 13px; }
.whole-page #guide-suggestions button:hover, .whole-page #guide-suggestions [aria-selected=true] { background: var(--surface); }
.whole-page #guide-suggestions small { color: var(--muted); font-size: 10px; padding-top: 3px; }
.whole-page #peak-sentence { display: block; margin: 13px 0 0; font-size: 11px; line-height: 1.45; white-space: normal; overflow-wrap: break-word; color: var(--accent); }
.whole-page #search-clear { font-size: 12px; padding: 6px 0 0; }
.whole-page .panel-foot { padding: 13px 20px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; }
.whole-page #sources-line { font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.whole-page .gathered-line { font-size: 10px; color: var(--muted); margin: 0 0 3px; }
.whole-page .gathered-line:empty { display: none; }
.whole-page #panel-toggle { position: absolute; left: var(--panel-width); top: 45%; width: 27px; height: 56px; background: var(--paper); border: 1px solid var(--line); border-left: 0; border-radius: 0 5px 5px 0; font-size: 24px; z-index: 11; }
.whole-page #time-bar { position: absolute; left: var(--panel-width); right: 0; bottom: 0; z-index: 8; height: var(--bar-height); margin: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--paper); }
.whole-page .space-corner { position: absolute; left: calc(var(--panel-width) + 16px); bottom: calc(var(--bar-height) + 26px); width: 82px; height: 82px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); z-index: 5; text-decoration: none; }
.whole-page .space-corner img { width: 100%; height: 100%; object-fit: cover; }
.whole-page .space-corner > span { position: absolute; inset: auto 0 0; font-size: 10px; line-height: 1.4; padding: 3px 5px; color: #fff; background: #15261ddd; }
.whole-page .space-corner time { display: block; font-size: 9px; }
.whole-page .map-controls { position: absolute; top: 58px; bottom: auto; right: 18px; z-index: 6; padding: 0; align-items: end; }
.whole-page .map-controls button { min-height: 38px; min-width: 38px; font-size: 20px; }
.whole-page #map-home { width: auto; height: 32px; background: var(--paper); }
.whole-page #map-home span { display: block; font-size: 10px; }
.whole-page #map-key { position: absolute; bottom: var(--bar-height); left: calc(var(--panel-width) + 12px); right: 12px; height: 22px; margin: 0; padding: 3px 0; border: 0; z-index: 4; font-size: 9px; }
.whole-page #map-credit { font-size: 9px; margin-left: auto; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--paper) 85%, transparent); }
/* On the satellite ground the days under the circles take the names' treatment: light type in a dark halo. */
.whole-page #map-host.is-satellite-ground .foliage-mark-date, .whole-page #map-host.is-satellite-ground .b-sat-day { fill: #fff; paint-order: stroke; stroke: #050b08c4; stroke-width: 2.8px; stroke-linejoin: round; }
.whole-page #map-detail-note { max-width: 65%; font-size: 9px; }
.whole-page #data-error { position: absolute; top: 15%; left: 40%; z-index: 40; padding: 20px; background: var(--paper); }
.whole-page.panel-hidden { --panel-width: 0px; }
.whole-page.panel-hidden .picture-panel { transform: translateX(-100%); width: 33.333vw; visibility: hidden; }
.whole-page .b-hit { fill: transparent; stroke: none; }
.whole-page .map-marker.is-result .b-edge, .whole-page .map-marker.is-result .map-target { stroke: var(--accent); stroke-width: 3px; }
@media(max-width: 1000px) and (min-width: 761px) {
  body.whole-page { --panel-width: 36vw; }
  .whole-page .site-header { padding-inline: 12px; gap: 12px; }
  .whole-page .site-header nav { gap: 12px; font-size: 11px; }
  .whole-page .panel-intro { padding: 16px 14px 10px; }
  .whole-page .panel-intro > p { font-size: 16px; }
}
@media(max-width: 760px) {
  body.whole-page { --panel-width: 0px; --header-height: 94px; --bar-height: 150px; --sheet-peek: 46px; }
  .whole-page .site-header { flex-wrap: wrap; align-content: center; padding: 7px 12px; gap: 0 12px; }
  .whole-page .wordmark { font-size: 25px; }
  .whole-page .site-header .icon-button { margin-left: auto; }
  .whole-page .site-header nav { order: 3; width: 100%; overflow-x: auto; padding: 9px 1px 3px; gap: 18px; font-size: 12px; }
  .whole-page #map-host { inset: 0; }
  .whole-page .picture-panel, .whole-page.panel-hidden .picture-panel { position: absolute; inset: auto 0 0; width: 100%; height: 53%; transform: translateY(100%); visibility: hidden; border: 0; border-top: 1px solid var(--line); }
  .whole-page.sheet-open .picture-panel { transform: none; visibility: visible; }
  .whole-page #panel-toggle { top: auto; bottom: 0; left: 0; width: 100%; height: var(--sheet-peek); border: 0; border-top: 1px solid var(--line); border-radius: 12px 12px 0 0; font-size: 14px; }
  .whole-page.sheet-open #panel-toggle { bottom: 53%; }
  .whole-page #time-bar { bottom: var(--sheet-peek); height: var(--bar-height); }
  .whole-page.sheet-open #time-bar { bottom: calc(53% + var(--sheet-peek)); }
  .whole-page .map-tools { left: 12px; top: 10px; right: 12px; font-size: 10px; }
  .whole-page #overview-control { --overview-bottom: calc(var(--bar-height) + var(--sheet-peek) + 25px); }
  .whole-page #show-layers summary { padding: 8px; }
  .whole-page .space-corner { left: 12px; bottom: calc(var(--bar-height) + var(--sheet-peek) + 25px); width: 62px; height: 62px; }
  .whole-page .map-controls { top: 52px; right: 12px; }
  .whole-page .map-controls button { min-width: 36px; min-height: 36px; }
  .whole-page #map-home { width: 26px; height: 26px; min-width: 26px; min-height: 26px; border-radius: 50%; font-size: 17px; align-self: center; }
  .whole-page #map-home span { display: none; }
  .whole-page #map-key { bottom: calc(var(--bar-height) + var(--sheet-peek)); left: 12px; }
  .whole-page .panel-intro { padding: 12px 16px 8px; }
  .whole-page .panel-intro > p { font-size: 16px; margin-bottom: 10px; }
  .whole-page .panel-foot { padding: 8px 16px; }
  .whole-page #data-error { left: 10%; right: 10%; }
}

@media(max-width:760px){.whole-page .site-header nav > a{display:block}.whole-page #panel-toggle{touch-action:none}}

/* The phone, from the look at 3ee77d82e (item 8): the nav and the date chips scroll sideways with their last words
   reachable past a fade that says there is more; the striped-land note leaves the narrow map; the From space corner is
   one line; a merged cluster's title is two lines at most. */
@media (max-width: 760px) {
  .whole-page .site-header nav, .whole-page .time-bar__chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 28px; }
  .whole-page .ground-coverage-note { display: none; }
  .whole-page .space-corner > span { white-space: nowrap; font-size: 9px; padding: 2px 4px; }
  .whole-page .space-corner time { display: none; }
  .whole-page .picture-panel .panel-results-heading h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  /* While the sheet is open the map is a band of about 156 pixels above it. The Show box, the grounds and the
     Northeast button stay within reach there, since a visitor reading the sheet still turns a layer off or changes the
     ground, but they move up to the band's top edge in one row at a smaller size, the Northeast button at its right
     end, so the band keeps most of its map (the house's look at the second preview, 21:09 on 15 October, in place of
     hiding them). */
  .whole-page.sheet-open .map-tools { top: 4px; right: 44px; gap: 6px; font-size: 9px; }
  .whole-page.sheet-open #show-layers summary { padding: 4px 7px; }
  .whole-page.sheet-open .ground-control button { padding: 4px 5px; }
  .whole-page.sheet-open .map-controls { top: 4px; right: 12px; padding: 0; }
}