/* The landing shell, September 2026.

   landing-head.txt and landing-extra.txt, in their own order: the sky
   header, the finder and its four panels, the cards and rails a landing page
   lays out with, the centred reading, the magazine block and the email band.

   Skipped: the tokens and the face, which the shared sheet holds; the bar
   and menu rules the shared components carry (but not header.site.glass -
   a sky header needs the bar to have no ground, and the shared sheet has
   never had that); and anything the shared sheet already says identically.

   One sheet for all six landing pages: they are the same shell with
   different bodies, and the handover asks for it that way.                */

/* ---- landing-head.txt ---- */
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
.sc{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);transition:color .3s;white-space:nowrap}
.sc:hover{color:var(--moss)}
.forest .sc{color:var(--on-forest)}
.flow a i{position:absolute;left:0;top:100%;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:14.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-75);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.flow a:hover i{opacity:1;transform:none}
header.site.glass{background:transparent;color:#fff}
header.site.glass .flow a,header.site.glass .menu-word{color:#fff}
header.site.glass .mk img{filter:invert(1) brightness(2)}
@media(max-width:700px){.flow{display:none}}
@keyframes rise{to{opacity:1;transform:none}}
/* ---- the sky ---- */
.hero{position:relative;height:clamp(620px,92vh,960px);margin-top:calc(-1*var(--bar));overflow:hidden;background:var(--forest);color:#fff}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:drift 16s linear both}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,24,20,.42) 0,rgba(20,24,20,0) 30%,rgba(20,24,20,0) 45%,rgba(20,24,20,.62) 100%)}
.hero .in{position:absolute;left:0;right:0;bottom:clamp(120px,18vh,180px)}
.hero h1{font-family:var(--face);font-weight:400;font-size:min(clamp(42px,6vw,88px), 28px + (clamp(42px,6vw,88px) - 28px) * 0.6);line-height:1;letter-spacing:-.012em;max-width:13ch;text-wrap:balance}
.hero h1 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em;letter-spacing:0}
.hero .where{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.5vw,21px);line-height:1.45;max-width:54ch;color:rgba(255,255,255,.92)}
.hero .cap{position:absolute;right:var(--edge);bottom:clamp(120px,18vh,180px);color:rgba(255,255,255,.8)}
.hero .cap b{color:#fff}
@media(max-width:820px){.hero .cap{display:none}}
/* ---- the page ---- */
.band{padding:clamp(64px,10vh,120px) 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(26px,4vh,40px)}
.c{display:block;position:relative;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);color:#fff}
.c .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0,rgba(0,0,0,.14) 44%,rgba(0,0,0,0) 64%);pointer-events:none}
.c.big h3{font-family:var(--face);font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6)}
.c .price{position:absolute;top:14px;right:14px;padding:9px 12px;background:rgba(251,249,246,.92);color:var(--forest);font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.reading{max-width:40rem;margin:0 auto;padding:0 clamp(20px,5vw,24px);text-align:center}
.reading h2{font-family:var(--face);font-weight:400;font-size:min(clamp(30px,3vw,42px), 28px + (clamp(30px,3vw,42px) - 28px) * 0.6);line-height:1.08;text-wrap:balance}
.reading p{margin-top:22px;font-family:var(--serif);font-size:clamp(18px,1.4vw,20px);line-height:1.72;text-align:justify;text-align-last:center;hyphens:auto}
.reading p b{font-weight:500}
.join2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,90px);align-items:center}
.join2 .ph{aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);max-width:420px}
.join2 .ph img{width:100%;height:100%;object-fit:cover}
.join2 h2{font-family:var(--face);font-weight:400;font-size:min(clamp(40px,5vw,76px), 28px + (clamp(40px,5vw,76px) - 28px) * 0.6);line-height:1;letter-spacing:-.01em;color:#fff;max-width:12ch;text-wrap:balance}
.join2 h2 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}
.join2 p{margin-top:20px;font-family:var(--serif);font-size:19px;line-height:1.6;max-width:44ch}
.form{display:flex;margin-top:28px;max-width:520px}
.form input{flex:1;min-width:0;height:50px;padding:0 18px;background:rgba(241,237,232,.1);font-family:var(--serif);font-size:16px;color:#fff}
.form input::placeholder{color:var(--on-forest-55)}
.form button{height:50px;padding:0 24px;background:var(--paper);color:var(--forest);font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.form button:hover{background:#fff}
.join2 .fine{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--on-forest-55)}
@media(max-width:820px){.join2{grid-template-columns:1fr}.join2 .ph{max-width:300px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---- landing-extra.txt ---- */
.c.wide{aspect-ratio:var(--wide)}
.c.wide h3{font-family:var(--face);font-size:min(clamp(28px,3vw,44px), 28px + (clamp(28px,3vw,44px) - 28px) * 0.6);line-height:1.04;max-width:16ch}
.c.wide .t{left:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.4vw,32px)}
@media(max-width:700px){.g-row{grid-template-columns:1fr 1fr}.g-row .c.wide{grid-column:1/-1}}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vh,32px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;border:1px solid var(--paper);color:var(--forest);background:var(--paper);transition:background .22s,color .22s}
.btn:hover{background:#fff}
.btn.quiet{background:transparent;color:var(--on-forest);border-color:rgba(241,237,232,.55)}
.btn.quiet:hover{background:var(--on-forest);color:var(--forest)}
@media(max-width:1100px){#five{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:700px){#five{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ---- the magazine block, from places.html ---- */
.mag2 .btns{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.mag2 .btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:50px;padding:0 26px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;border:1px solid var(--paper);color:var(--forest);background:var(--paper);transition:background .22s,color .22s}
.mag2 .btn:hover{background:#fff}
.mag2 .btn.quiet{background:transparent;color:var(--on-forest,#F1EDE8);border-color:rgba(241,237,232,.55)}
.mag2 .btn.quiet:hover{background:#F1EDE8;color:var(--forest)}
.stone .mag2 h2{color:var(--ink)}
.stone .mag2 .btn{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.stone .mag2 .btn:hover{background:var(--moss);border-color:var(--moss)}
.stone .mag2 .btn.quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.stone .mag2 .btn.quiet:hover{background:var(--ink);color:var(--paper)}
.mag2{display:grid;grid-template-columns:minmax(240px,.4fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center}
.mag2 .cover{max-width:380px;justify-self:end}
.mag2 .cover img{width:100%;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.mag2 h2{font-family:var(--face);font-weight:400;font-size:min(clamp(36px,4.4vw,66px), 28px + (clamp(36px,4.4vw,66px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;max-width:12ch;text-wrap:balance;color:#fff}
.mag2 h2 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}
.mag2 p{margin-top:20px;font-family:var(--serif);font-size:19px;line-height:1.6;max-width:44ch}
@media(max-width:820px){.mag2{grid-template-columns:1fr}.mag2 .cover{justify-self:start;max-width:280px}}

/* ==== the finder, second draft, from finder.html ==== */

/* ---- the strip, second draft ---- */
/* the strip */
.finder-wrap{position:relative;z-index:6;margin-top:-64px}
.finder{max-width:1400px;margin:0 auto;padding:0 var(--edge)}
.finder .row{display:grid;grid-template-columns:var(--cols,repeat(4,minmax(0,1fr)) auto);background:var(--paper);box-shadow:0 30px 80px rgba(65,64,66,.22)}
.finder .f{display:flex;flex-direction:column;justify-content:center;gap:5px;height:88px;padding:0 clamp(18px,2vw,28px);transition:background .25s}
.finder .f:hover,.finder .f.open{background:var(--stone)}
.finder .f small{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75)}
.finder .f b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(17px,1.4vw,20px);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finder .go{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:150px;height:88px;padding:0 clamp(22px,2.4vw,40px);background:var(--forest);color:var(--paper);font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;transition:background .22s}
.finder .go:hover{background:var(--moss)}
.finder .go i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--on-forest-55)}
@media(max-width:900px){.finder .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.finder .go{grid-column:1/-1;flex-direction:row;gap:14px;height:64px}}

/* ---- the panels as words, redrawn 6 September ---- */
.panel .in-p{position:relative}
.words .dates .btn{min-height:36px;padding:0 14px;margin-left:8px}
/* the panels: tiles, no words of explanation */
.panel{max-width:1400px;margin:0 auto;padding:0 var(--edge)}
.panel .in-p{background:var(--paper);box-shadow:0 30px 80px rgba(65,64,66,.22);border-top:1px solid var(--stone-2);padding:clamp(20px,2.6vw,32px)}
.where-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.tiles{display:grid;gap:10px}
.tiles.regions{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.kinds{grid-template-columns:repeat(5,minmax(0,1fr))}
.tiles.months{grid-template-columns:repeat(6,minmax(0,1fr))}
.tiles .tile{position:relative;display:flex;flex-direction:column;background:var(--stone);color:var(--ink);padding:14px;min-height:96px;border:1px solid transparent;text-align:left;transition:background .25s,color .25s}
.tiles .tile:hover{border-color:var(--ink)}
.tiles .tile.on{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.tiles .tile img,.tiles .tile .ph{width:calc(100% + 28px);margin:-14px -14px 12px;aspect-ratio:1337/1080;object-fit:cover;background:var(--stone-2);display:block;max-height:110px}
.tiles .tile b{font-family:var(--face);font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.1}
.tiles .tile span{margin-top:4px;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.35;color:var(--ink-75)}
.tiles .tile.on span{color:var(--on-forest)}
.tiles .tile i{margin-top:auto;padding-top:6px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--ink-55)}
.tiles .tile.on i{color:var(--on-forest-55)}
.tiles .tile.any{justify-content:center;background:var(--paper);border-color:var(--ink)}
.tiles .tile.any.on{background:var(--forest);border-color:var(--forest)}
.tiles .tile.month{min-height:120px}
.tiles .tile.month b{font-size:clamp(19px,1.7vw,24px)}
.words{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(18px,2.4vw,34px)}
.words button{font-family:var(--face);font-size:min(clamp(20px,2vw,28px), 28px + (clamp(20px,2vw,28px) - 28px) * 0.6);line-height:1.15;color:var(--ink-35);transition:color .25s;padding:2px 0}
.words .on{color:var(--ink)}
.words button:hover{color:var(--ink-75)}
.words.small{margin-top:14px;padding-top:14px;border-top:1px solid var(--stone-2)}
.words.small button{font-size:clamp(18px,1.6vw,22px)}
.words .dates{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-75)}
.words .dates input{width:8.4em;border-bottom:1px solid var(--ink);padding:2px 0;font-family:var(--serif);font-style:normal;font-size:17px;color:var(--ink)}
@media(max-width:1000px){.where-grid{grid-template-columns:1fr}.map{max-width:260px}.tiles.regions,.tiles.kinds{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.months{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.tiles.regions,.tiles.kinds,.tiles.months{grid-template-columns:1fr 1fr}}
.scot path{fill:var(--stone)}
.scot .dot circle{fill:var(--forest);stroke:var(--paper);stroke-width:1.5}
.panel .map .scot{width:100%;height:auto;max-width:260px}
/* the tiles as the finder has them, fixed: the same height in a row, the picture a fixed band, the line two lines at most */
.tiles{align-items:stretch}
.tiles .tile{min-height:0;height:100%;padding:14px 16px 16px}
.tiles .tile img,.tiles .tile .ph{height:120px;max-height:none;aspect-ratio:auto;width:calc(100% + 32px);margin:-14px -16px 12px}
.tiles .tile b{font-size:clamp(17px,1.4vw,20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiles .tile span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.tiles .tile i{margin-top:auto;padding-top:8px}
.tiles .tile.any{border-color:transparent;background:var(--stone)}
.tiles.regions{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.months{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--stone)}
.tiles.months .tile{min-height:0}
.tiles.months .tile span{min-height:0}
.tiles.who{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.who .tile span{min-height:0}
.tiles.kinds{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.also-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles .tile.small{min-height:56px;padding:14px 16px;justify-content:center}
.tiles .tile.small b{font-size:17px}
@media(max-width:1000px){.tiles.regions,.tiles.kinds,.tiles.who,.tiles.also-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.months{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.tiles.regions,.tiles.kinds,.tiles.who,.tiles.also-tiles,.tiles.months{grid-template-columns:1fr 1fr}}
.panel .in-p{padding:clamp(24px,3vw,40px)}
.where-grid{grid-template-columns:240px minmax(0,1fr)}
.search{display:flex;gap:10px;margin-bottom:clamp(18px,2.4vh,28px)}
.search button{min-height:54px;padding:0 22px;border:1px solid var(--ink);font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.search button:hover{background:var(--ink);color:var(--paper)}
.search input{flex:1 1 auto;min-width:0;height:54px;padding:0 18px;background:var(--stone);font-family:var(--serif);font-size:17px;color:var(--ink)}
.search input::placeholder{color:var(--ink-55)}
.words.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px clamp(18px,2vw,32px)}
.words.cols button{text-align:left}
.words.stack{display:grid;grid-template-columns:1fr;gap:2px}
.words.stack button{text-align:left}
.words.small button{font-size:clamp(18px,1.6vw,22px)}
.words button.on::after{content:" ·";color:var(--forest)}
.months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px clamp(18px,2vw,32px);margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--stone)}
.month{display:flex;flex-direction:column;text-align:left;padding:6px 0}
.month b{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.8vw,26px), 28px + (clamp(20px,1.8vw,26px) - 28px) * 0.6);line-height:1.15;color:var(--ink-35);transition:color .25s}
.month i{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-35);margin-top:2px}
.month:hover b,.month:hover i{color:var(--ink-75)}
.month.on b{color:var(--ink)}
.month.on i{color:var(--ink-55)}
.own{margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--stone)}
.own .kick{margin-bottom:12px}
.dates{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.dates label{display:flex;flex-direction:column;gap:6px;flex:1 1 180px}
.dates label span{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.dates input{height:54px;padding:0 18px;background:var(--stone);font-family:var(--serif);font-size:17px;color:var(--ink)}
.dates .btn{align-self:flex-end;min-height:54px}
.fine{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-55)}
.counts{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--stone)}
.counts .kick{flex-basis:100%;margin-bottom:0}
.count{display:flex;align-items:center;gap:14px}
.count span{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-75);min-width:64px}
.count button{width:40px;height:40px;background:var(--stone);font-family:var(--face);font-size:22px;line-height:1}
.count b{font-family:var(--face);font-weight:400;font-size:24px;min-width:24px;text-align:center}
.also{margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--stone)}
.also .kick{margin-bottom:6px}
.what-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.what-grid .kick{margin-bottom:8px}
@media(max-width:900px){.months{grid-template-columns:repeat(3,minmax(0,1fr))}.what-grid{grid-template-columns:1fr}.words.cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.months{grid-template-columns:1fr 1fr}.words.cols{grid-template-columns:1fr}}
.scot .dot circle{fill:var(--stone-2);stroke:var(--paper);stroke-width:1.2;transition:fill .2s}
.scot .dot:hover circle,.scot .dot.on circle{fill:var(--forest)}
/* ---- the phone: one question a screen ---- */
@media(max-width:560px){
.pstrip{padding:16px;background:var(--paper);box-shadow:0 20px 40px rgba(65,64,66,.18);position:relative;z-index:2}
.pstrip small{display:block;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-75)}
.pstrip b{display:block;margin-top:4px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px}
.pstrip span{display:block;margin-top:12px;background:var(--forest);color:var(--paper);font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:14px}
.psheet{flex:1 1 auto;display:flex;flex-direction:column;padding:16px}
.ptop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.ptop .kick{margin:0}
.ptop button{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.psheet .tiles{flex:1 1 auto;overflow:hidden;align-content:start}
.psheet .tile{min-height:80px;padding:10px}
.psheet .tile img,.psheet .tile .ph{margin:-10px -10px 8px;width:calc(100% + 20px);max-height:64px}
.psheet .tile b{font-size:15px}
.psheet .tile i{font-size:8.5px}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--stone-2)}
.pfoot span{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-75)}
.pfoot .btn{min-height:44px;padding:0 20px}
}

/* Not in the mock, and the only other rule here that is not.

   The mock draws all four panels open at once, one under each sample, so it
   never had to say what a shut panel looks like. On the site three of them
   are shut. `display:none` is what the first draft used and what the
   component still toggles with `.open`.                                   */
.panel{display:none}
.panel.open{display:block}

/* Not in the mock, and measured rather than decided.

   A bare <button> is centred by the browser, and the mock's own reset does
   not say otherwise - it never had to, because in a page with no other
   stylesheet the buttons that matter all carry their own alignment. Under
   _shared.css and the built app.css this page's do not, so probe.js read the
   mock at `left` and the page at `center` on the strip's fields, the chips
   and the List/Map switch: labels centred in their column instead of sitting
   at the padding edge.

   The value is the mock's own computed one. Nothing here is a design
   decision; if a later reset makes it unnecessary, probe.js will say so.  */
.finder .f,.tiles .tile,.words button,.chips button,
.switch button,.door{text-align:left}

/* Except the Show me, which both mocks centre.

   `.finder .go` was in the list above and should never have been: it is a
   button with a word over a count, and finder-panels.html computes `center`
   on it, as munros.html does. The line was taking this page away from its own
   mock in order to match a rule written for the fields beside it.          */
.finder .go,.finder .go i{text-align:center}

/* And the map is drawn inline in the mock.

   app.css - the 2023 design, in the bundle and served before this sheet -
   resets every svg to `display:block`, and the mock's ground does not. The
   events sheet carries the same line for the same reason. Measured on
   finder-panels.html, where the map beside the regions computes inline.    */
.scot{display:inline}

/* Not in the mock, and the reason it is not.

   The mock draws the phone twice: the strip as one line, and a field opened
   as a sheet - both inside a 320px picture of a phone on a lab page. Inside
   a picture of a phone there is no question about which of the two strips a
   browser should show, and a sheet is a box in a frame rather than the
   screen. On a real phone both have to be answered.

   So: one markup, and the width decides which strip is drawn. The sheet's
   own head and foot are drawn always and hidden on a desk, because the
   alternative is two components that can drift apart. Every value here is
   the mock's own; what is added is only which of its two drawings applies.

   560px is the mock's own phone line - the width at which its tiles go two
   across.                                                                */
.pstrip{display:none}
.ptop,.pfoot{display:none}

@media(max-width:560px){
  .finder .row{display:none}
  .pstrip{display:block}
  .pstrip > button{display:block;width:100%;text-align:left}
  .ptop,.pfoot{display:flex}

  /* A sheet is the screen, from under the bar down. The mock's phone draws
     the bar above the sheet and the shared sheet already knows how tall it
     is, so `--bar` rather than a number: at inset:0 the sheet's own head sat
     behind the mark and the two sets of words printed over each other. */
  .panel.open{position:fixed;inset:var(--bar,76px) 0 0 0;z-index:130;
    max-width:none;margin:0;padding:0;overflow:auto;background:var(--paper)}
  .panel.open .in-p{box-shadow:none;border-top:0;min-height:100%;
    display:flex;flex-direction:column;padding:16px}
  .panel.open .where-grid{grid-template-columns:1fr}
  .panel.open .map{display:none}
  .panel.open .tiles{align-content:start}
}