/* The pages' frame in the Map page's manner (brief 165, section 5): the map's top bar, a column at the left at the map
   panel's width that scrolls inside itself, and a stage filling the rest of the window to its bottom edge, with a strip
   along the stage's foot where a page has one. Every measurement and colour here is the map page's own, copied under the
   frame's names so a change made for the map never moves these pages by surprise; NOTES.md beside this file names the
   map rule each block copies, and frame.test.mjs holds the shared figures to the map's stylesheets. */
@font-face{font-family:FieldSerif;src:local("Iowan Old Style"),local("Palatino Linotype"),local("Book Antiqua");font-display:swap}

/* The palette and type: viewer/style.css lines 2 to 4 (day, night, body). */
.manner-page{--paper:#eee9d9;--ink:#253b31;--muted:#666b55;--line:#c9c6ae;--surface:#e4e2cf;--white:#f6f2e5;--accent:#965732;--manner-serif:FieldSerif,Georgia,serif;--manner-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--manner-column:33.333vw;--manner-bar:64px;--manner-peek:46px;--manner-sheet:53%;color-scheme:light;margin:0;height:100vh;height:100dvh;overflow:hidden;background:var(--paper);color:var(--ink);font:14px/1.55 var(--manner-sans)}
.manner-page.night{--paper:#18251f;--ink:#ebe5ce;--muted:#b4b69f;--line:#455444;--surface:#22342a;--white:#26392e;--accent:#dea76c;color-scheme:dark}
.manner-page *,.manner-page *::before,.manner-page *::after{box-sizing:border-box}
.manner-page [hidden]{display:none!important}
.manner-page button,.manner-page input,.manner-page select{font:inherit;color:inherit}
.manner-page button,.manner-page a,.manner-page summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.manner-page button{cursor:pointer;background:none;border:0;padding:0}
.manner-page a{color:inherit;text-underline-offset:4px}
.manner-page :focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.manner-page h1,.manner-page h2,.manner-page h3,.manner-page p{margin:0}
.manner-page .skip{position:absolute;top:-60px;left:20px;z-index:30;background:var(--paper);padding:12px}
.manner-page .skip:focus{top:10px}

/* The top bar: viewer/style.css line 6 and viewer/views.css lines 265 to 270. */
.manner-page .site-header{position:relative;z-index:20;display:flex;align-items:center;gap:18px;height:var(--manner-bar);padding:10px 22px;border-bottom:1px solid var(--line);background:var(--paper)}
.manner-page .wordmark{display:flex;align-items:center;gap:9px;font:400 28px/1.55 var(--manner-serif);letter-spacing:-.7px;text-decoration:none}
.manner-page .wordmark span{font-size:25px;color:var(--accent)}
.manner-page .site-header nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px);margin-left:auto;font-size:13px;white-space:nowrap}
.manner-page .site-header nav a{text-decoration:none}
.manner-page .site-header nav [aria-current]{border-bottom:1px solid var(--accent);padding-bottom:5px}
.manner-page .site-header .icon-button{font-size:24px;line-height:1.55;padding:2px 7px}

/* The window below the bar: the column and the stage side by side (views.css lines 264, 271 and 292). */
.manner-main{position:relative;display:grid;grid-template-columns:var(--manner-column) minmax(0,1fr);height:calc(100vh - var(--manner-bar));height:calc(100dvh - var(--manner-bar));overflow:hidden}

/* The column: the map's picture panel (views.css lines 292 to 295 and 307). */
.manner-column{position:relative;z-index:10;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--paper);border-right:1px solid var(--line);box-shadow:5px 0 18px #18251f12}
.manner-column-scroll{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
/* A column item marked manner-column-end, such as a count the page's strip answers to, sits at the column's foot above the
   site's foot when the column has room, so the column reads to its foot, and stays in sight there while a longer column
   scrolls under it (brief 165, section 12, item 4). Written under .manner-page, since such an item may be a paragraph. */
.manner-page .manner-column-end{margin-top:auto;position:sticky;bottom:0;z-index:1;background:var(--paper)}
.manner-intro{padding:22px 20px 10px}
.manner-intro h1{margin:0 0 8px;font:400 24px/1.15 var(--manner-serif);letter-spacing:-.3px}
/* A rule for an element the base rules above name (p, a, button) is written under .manner-page, so it outranks them. */
.manner-page .manner-sentence{margin:0 0 14px;font:18px/1.48 var(--manner-serif)}
.manner-fold{margin:0 0 4px;font-size:12px;line-height:1.5;color:var(--muted)}
.manner-fold summary{cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.manner-fold[open] summary{white-space:normal}
.manner-foot{padding:13px 20px;border-top:1px solid var(--line);font-size:11px;line-height:1.5}
.manner-foot .page-footer{display:flex;flex-wrap:wrap;gap:2px 14px}
.manner-foot .page-footer p{flex-basis:100%;margin:2px 0 0;font-size:10px;color:var(--muted)}

/* The column's moves (the press contract in NOTES.md): rows in two columns, the count beside each name, the one the stage
   shows in the leaf colour. The rows copy the map's old place list (style.css, .place-option). */
.manner-moves{padding:4px 20px 12px}
.manner-moves ul{list-style:none;margin:0;padding:0;columns:2;column-gap:22px}
.manner-moves li{break-inside:avoid}
.manner-moves a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0 6px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.3;text-decoration:none}
.manner-moves a:hover,.manner-moves a[aria-current]{color:var(--accent)}
.manner-moves a[aria-current]{border-bottom-color:var(--accent)}
.manner-count{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}

/* The column's picture, small, as the map panel draws one (panel.css, .panel-picture and its caption). */
.manner-picture{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:12px;align-items:start;margin:6px 20px 18px}
.manner-picture-well{position:relative;aspect-ratio:16/11;border-radius:.25rem;overflow:hidden;background:var(--surface)}
.manner-picture-well img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .16s ease}
.manner-picture-well img[data-loading]{opacity:.35}
.manner-picture figcaption{display:flex;flex-direction:column;gap:2px;min-width:0}
.manner-picture-label{font-size:9px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.manner-picture-title{font:500 .93rem/1.25 var(--manner-serif);overflow-wrap:anywhere}
.manner-page .manner-picture-when,.manner-page .manner-picture-credit{font-size:.72rem;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}

/* The stage: the map's place in the window, here a scrolling stage, and the strip along its foot (the map's time bar,
   views.css line 312). */
.manner-stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.manner-stage-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.manner-strip{flex:none;border-top:1px solid var(--line);background:var(--paper)}
.manner-stage [tabindex="-1"]:focus{outline:none}
.manner-stage [tabindex="-1"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.manner-page .manner-sheet-tab{display:none}

/* Narrower windows: views.css lines 331 to 336. */
@media(max-width:1000px) and (min-width:761px){
  .manner-page{--manner-column:36vw}
  .manner-page .site-header{padding-inline:12px;gap:12px}
  .manner-page .site-header nav{gap:12px;font-size:11px}
  .manner-intro{padding:16px 14px 10px}
  .manner-page .manner-sentence{font-size:16px}
  .manner-moves{padding-inline:14px}
  .manner-picture{margin-inline:14px}
  .manner-foot{padding-inline:14px}
}

/* The phone, the viewer's own breakpoint: views.css lines 338 to 366 and 371 to 372. The bar wraps to two rows with the
   page words scrolling sideways past a fade; the stage takes the whole window; the column becomes the sheet that rises
   from the tab at the foot and covers 53 per cent of the window. The sheet scrolls whole, its foot with it: the pages'
   foot runs to three or four lines where the map's runs to three short ones, and held in place it would leave the sheet
   too little room to open on the column's own list. */
@media(max-width:760px){
  .manner-page{--manner-column:0px;--manner-bar:94px}
  .manner-page .site-header{flex-wrap:wrap;align-content:center;gap:0 12px;padding:7px 12px}
  .manner-page .wordmark{font-size:25px}
  .manner-page .site-header nav{order:3;width:100%;margin-left:0;overflow-x:auto;gap:18px;padding:9px 28px 3px 1px;font-size:12px}
  .manner-page .site-header nav>a{display:block}
  /* Map stays pinned at the row's left edge while the row scrolls (brief 194; 191-phone-read.md, finding 6: on Trips and
     All places the row opened scrolled to their own word and Map lay off the screen). The page's own word is still
     scrolled into view at the right; once the row is scrolled the words pass under Map's own paper, behind a thin rule
     and a fade, as a table's first column stays while its other columns scroll. */
  .manner-page .site-header nav>a:first-child{position:sticky;left:0;z-index:2;margin-left:-1px;padding:0 0 0 1px;background:var(--paper)}
  .manner-page .site-header.manner-row-scrolled nav>a:first-child{padding-right:9px;box-shadow:1px 0 0 var(--line)}
  .manner-page .site-header.manner-row-scrolled nav>a:first-child::after{content:'';position:absolute;top:0;bottom:0;left:calc(100% + 1px);width:26px;background:linear-gradient(90deg,var(--paper) 30%,transparent);pointer-events:none}
  .manner-page .site-header .icon-button{position:absolute;top:7px;right:12px}
  .manner-page .site-header::after{content:'';position:absolute;top:46px;bottom:1px;right:12px;width:28px;background:linear-gradient(90deg,transparent,var(--paper));pointer-events:none}
  .manner-page .site-header::before{content:'';position:absolute;top:46px;bottom:1px;left:12px;z-index:1;width:36px;background:linear-gradient(270deg,transparent,var(--paper) 55%);pointer-events:none;opacity:0;transition:opacity .16s ease}
  .manner-page .site-header.manner-row-scrolled::before{opacity:1}
  .manner-main{display:block}
  .manner-stage{position:absolute;inset:0;padding-bottom:var(--manner-peek)}
  .manner-column{position:absolute;inset:auto 0 0;width:100%;height:var(--manner-sheet);transform:translateY(100%);border:0;border-top:1px solid var(--line);box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
  .manner-column-scroll{flex:none;overflow:visible}
  .manner-page .manner-column-end{position:static}
  .manner-sheet-open .manner-column{transform:none}
  .manner-page .manner-sheet-tab{display:block;position:absolute;left:0;right:0;bottom:0;z-index:11;width:100%;height:var(--manner-peek);border-top:1px solid var(--line);border-radius:12px 12px 0 0;background:var(--paper);font-size:14px;touch-action:none}
  .manner-page.manner-sheet-open .manner-sheet-tab{bottom:var(--manner-sheet)}
  .manner-intro{padding:12px 16px 8px}
  .manner-page .manner-sentence{font-size:16px;margin-bottom:10px}
  .manner-moves{padding-inline:16px}
  .manner-picture{margin-inline:16px}
  .manner-foot{padding:8px 16px}
}

@media(prefers-reduced-motion:reduce){
  .manner-page *,.manner-page *::before,.manner-page *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}