:root {
  --nearwhite: oklch(99% 0.005 60);
  --offwhite: oklch(98% 0.01 60);
  --brown:    oklch(30% 0.07 60);
  --brown-highlight: oklch(35% 0.07 60);
  --lightbrown: oklch(75% 0.03 60);
  --verylightbrown: oklch(94% 0.015 60);
  --red:      oklch(42% 0.15 30);
  --orange:   oklch(60% 0.15 60);
  --avocado:  oklch(50% 0.13 130);
  --teal:     oklch(50% 0.07 210);
  --purple:   oklch(45% 0.1 300);

  --next-disabled: oklch(80% 0.01 60);
  
  --header-height: clamp(2.5rem, 11vw, 3rem);
  --border-thickness: calc(var(--header-height) / 6);
}

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  src: url("Inter-subset.woff2") format("woff2");
}

body {
  margin: 0;
  width: 100%;
  min-width: 20rem;
  background-color: var(--offwhite);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 450;
}

a:link {
  text-underline-offset: 0.09em;
}

details summary {
  cursor: pointer;
}

header {
  background-color: var(--brown);
  display: grid;
  grid-template-columns: auto minmax(12rem, 40rem) 8rem auto;
  
  width: 100%;
  height: var(--header-height);

  position: relative;
  border-bottom: var(--border-thickness) solid var(--red);
}
header::after {
  position: absolute;
  display: block;
  content: '';
  border-bottom: calc(var(--border-thickness) + 2px) solid var(--orange);
  margin-top: calc(var(--border-thickness) - 2px);
  height: 100%;
  width: 100%;
  z-index: -1;
}

header>nav {
  display: flex;
  column-gap: 1.5rem;
  justify-content: right;
}

header>nav>a {
  align-items: center;
  display: flex;
  padding: 0 1rem 0 1rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--nearwhite);
}
header>nav>a:hover, header>nav>a:focus {
  background-color: var(--brown-highlight);
  color: white;
}
header>a:hover, header>a:focus {
  background-color: var(--brown-highlight);
  fill: white;
}

header>nav>a>svg {
  height: calc(var(--header-height) - 1rem);
  width: calc(var(--header-height) - 1rem);
  padding-left: 0.5rem;
}
.headerwide {
  display:none;
}

#wordmark {
  grid-column: 2;
  height: var(--header-height);
  width: min-content;
}
#wordmark>svg {
  height: calc( var(--header-height) - 1rem);
  width: auto;
  aspect-ratio: 8 / 1;
  fill: var(--nearwhite);
  margin-left: 0.5rem;
  padding: 0.5rem;
}

@media (max-width:22rem) {
  #wordmark>svg {
    margin-left: 0;
  }
  header>nav>a>svg {
    margin-right: -0.5rem;
  }
}

main {
  margin: 1.5rem auto 0 auto;
  padding: 0 1rem;
  max-width: 58rem;
  min-width: 18rem;
}


h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

#date, #location {
  display:none;
}
#datelocation {
  text-align: center;
}
#datelocation>h1 {
  color: var(--teal);
}
#section-one p {
  font-size: 1.5rem;
  margin: 0;
  padding: 0.375rem 0 0 0;
}


.placename {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.375em;
  padding-left: 2rem;
  margin: 0;
  text-indent: -2rem;
  text-align: left;
}
#placename-en {
  font-size: 1.375rem;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}
#placename-ww {
  font-size: 1.125rem;
  padding-bottom: 1rem;
}
#placename-ww .langmark {
  font-size: 0.875rem;
}
#placename-ww summary {
  margin-left: 2rem;
  text-indent: initial;
}
.placename>a:link, .placename>a:visited {
  color:black;
  text-decoration-color: var(--lightbrown);
}
.placename>a:hover, .placename>a:focus {
  text-decoration-color: black;
  background-color: var(--verylightbrown);
}

#satellite {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  
  border-radius: 7.5%/12%;
  border-color: var(--orange);
  border-width: clamp(0.25rem, 1.25vw, 0.375rem);
  border-style: solid;

  padding: clamp(0.1rem, 0.5vw, 0.15rem);
}

#satellite-details {
  font-size: 0.75rem;
  max-width: 80%;
  margin: 0.25rem 0 0.25rem auto;
}
#satellite-details>summary {
  font-weight: 600;
}

a.prev-next-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

a.prev-next-button:hover, a.prev-next-button:focus {
  text-decoration-color: black;
  background-color: var(--verylightbrown);
}

svg.prev-next-button {
  height:2rem;
  width:auto;
  aspect-ratio: 4 / 7;
  color: var(--brown);
}
#section-one {
  display: grid;
  grid-template-columns: 1.5rem auto 1.5rem;
}

footer {
  background-color: var(--brown);
  color: var(--nearwhite);
  position: relative;
  border-top: var(--border-thickness) solid var(--red);

  margin: 2rem auto 0 auto;
  padding: 1rem;
}
footer::before {
  position: absolute;
  display: block;
  content: '';
  border-top: calc(var(--border-thickness) + 2px) solid var(--orange);
  margin-top: calc(-2 * var(--border-thickness) - 1rem);
  margin-left: -1rem;
  height: 0;
  width: 100%;
  z-index: -1;
}



#mapandlinks {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

#maplinks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 0rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}

#maplinks>li {
  margin: 0;
  padding: 0;
}
#maplinks>li>a {
  display:flex;
  align-items: center;
  width: max-content;
  height: 2.5rem;
  font-size: 1rem;
  color:black;
  text-decoration-color: var(--lightbrown);
  padding-right: 0.5rem;
}

#maplinks>li>a:hover, #maplinks>li>a:focus {
  text-decoration-color: black;
  background-color: var(--verylightbrown);
}
#maplinks svg {
  height: 1.5rem;
  width: 1.5rem;
  padding: 0.5rem;
}

.placename details>summary {
  text-decoration: dotted underline var(--lightbrown);
}
.placename details, .placename details>summary {
  display:inline;
}

@media (max-width: 22rem) {
  #maplinks {
    justify-content: left;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 34.9rem) {
  #maplinks {
    grid-template-columns: repeat(3, max-content);
  }
}

@media (min-width:39.9rem) {
  header {
    grid-template-columns: auto minmax(17rem, 37rem) 23rem auto;
  }
  .headerwide {
    display: flex;
  }
}


@media (min-width: 47.9rem) {
  #mapandlinks {
    grid-template-columns: auto 12rem;
  }
  .placename {
    grid-column: 1 / span 2;
    text-align:center;
    padding: 0;
    text-indent: 0;
  }
  #placename-en {
    padding: 1.5rem 0 0.5rem 0;
    font-size: 1.5rem;
  }
  #placename-ww {
    padding: 0 0 1.5rem 0;
    font-size: 1.25rem;
  }
  #placename-ww .langmark {
    font-size: 1rem;
  }
  #placename-ww summary {
    margin-left: 0;
  }
  #satellite {
    grid-row: 3;
    grid-column: 1;
  }
  #satellite-details {
    grid-row: 4;
    grid-column: 1;
  }
  #maplinks {
    grid-row: 3;
    grid-column: 2;
    width: max-content;
    height: max-content;
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
    margin: auto 0 auto 0.5rem;
  }

  #section-one {
    display:grid;
    grid-template-columns: 2rem max-content max-content 2rem;
    margin: 0 auto;
    justify-content: center;
    column-gap: clamp(1.5rem, calc(10vw - 3.4rem), 2.5rem);
    max-width: 55rem;
    margin: 0 auto;
  }
  #section-one h1 {
    font-size: 1.375rem;
  }
  #date, #location {
    display:flex;
    align-items: center;
  }
  #datelocation {
    display:none;
  }
  #date>h1 {
    color: var(--teal);
  }
  #location>h1 {
    color: var(--avocado);
  }
  #section-one p {
    font-size: 1.375rem;
    padding: 0 clamp(0.75rem, calc(5vw - 1.7rem), 1.25rem);
  }


}