/* The place page (place.html, src/place.js); the rest comes from about.css. */
.place-subtitle{
display:flex;
flex-wrap:wrap;
gap:6px 18px;
margin:-8px 0 20px;
color:#b8c7cc;
font:400 14px/1.4 var(--font-mono)}
/* The city seeker's icons from the sprite in place.html, stroked in the text colour. */
.place-sprite{
position:absolute;
width:0;
height:0;
overflow:hidden}
.place-icon{
width:16px;
height:16px;
flex:none;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round}
.place-fact{
display:inline-flex;
align-items:center;
gap:6px}
.place-fact-line{
display:flex;
align-items:center;
gap:8px}
.place-figure{
margin:0 0 24px}
.place-figure .place-embed{
margin:0 0 6px}
.place-lead{
font-size:18px;
line-height:1.6}
.place-note{
color:#b8c7cc;
font-size:14px}
.place-section{
margin-top:32px}
.place-schedule{
margin:0;
padding:0;
list-style:none;
border-left:2px solid #ffcf52}
.place-schedule li{
display:grid;
grid-template-columns:6.5em 1fr;
gap:12px;
padding:8px 0 8px 14px;
border-bottom:1px solid rgba(255,255,255,.12)}
.place-schedule time{
color:#ffcf52;
font-family:var(--font-mono)}
/* The card of the city seeker; the slot holds about its height until the card comes in. */
.place-seeker-card{
max-width:420px;
min-height:220px}
.place-seeker-card.is-filled{
min-height:0}
/* The name is an h3 here, under the heading of the section; the article gives h3 a margin. */
.place-seeker-card .city-seeker__name{
margin:0}
/* A step behind the terrain: it happens, but not in view here. Grey as an eclipse in the past. */
.place-schedule__hidden,.place-schedule__hidden time{
color:#8fa3aa}
/* The embeds keep the size the insert window proposes: 400 high, 320 on a phone. */
.place-embed{
display:block;
box-sizing:border-box;
width:100%;
max-width:640px;
margin:8px 0 20px;
border:1px solid var(--line);
border-radius:6px;
background:#000}
.place-embed--point,.place-embed--fixed{
height:400px}
/* Until the visitor asks for it, an embed is a box of its own size with the link of the stills
   on Historical eclipses (src/place.js), so nothing moves when the embed comes in. */
.place-embed-start{
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:16px 16px 72px;
text-align:center;
background:#000 center/cover no-repeat;
background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),var(--place-embed-picture,none)}
.place-embed-start__title{
margin:0;
color:#fff;
font-size:18px;
text-shadow:0 1px 3px #000,0 0 12px #000}
.place-table-wrap{
overflow-x:auto}
.place-table{
width:100%;
border-collapse:collapse;
font-size:14px}
.place-table th,.place-table td{
padding:6px 8px;
border-bottom:1px solid rgba(255,255,255,.12);
text-align:start}
.place-table td:nth-child(n+3){
font-family:var(--font-mono)}
.place-table__next td{
color:#ffcf52}
.place-table__past td{
color:#8fa3aa}
/* A date links to the page for that eclipse in the colour of its row; the row of this page is bold. */
.place-table td a{
color:inherit}
.place-table__current td{
font-weight:700}
.place-table__past.place-table__current td{
color:inherit}
.place-links{
display:flex;
flex-wrap:wrap;
gap:8px 20px}
/* Above the heading; it holds its line before the script fills it, so the heading stays put. */
.place-crumbs{
min-height:1.4em;
margin:0 0 4px;
color:#b8c7cc;
font-size:14px;
line-height:1.4}
.place-top-links{
align-items:center;
margin:0 0 18px}
.about .place-globe{
display:inline-flex;
align-items:center;
min-height:44px;
padding:8px 16px;
border-radius:6px;
background:#ffcf52;
color:#03101d;
font-weight:700;
text-decoration:none}
.about .place-globe:hover{
background:#ffda63}
.about .place-globe:focus-visible{
outline:2px solid #fff;
outline-offset:2px}
@media (max-width:560px){
.place-schedule li{
grid-template-columns:5em 1fr}
.place-embed--point,.place-embed--fixed{
height:320px}
.place-table th:nth-child(5),.place-table td:nth-child(5){
display:none}
}
.place-retry{
min-height:38px;
padding:6px 14px;
border:1px solid var(--aqua);
border-radius:19px;
background:transparent;
color:var(--aqua);
font:13px var(--font-text);
cursor:pointer}