/*
  musem.io: the commercial site wears the app's gallery look. Pages are quiet paper and ink; the bands where works
  hang are painted gallery walls in green, and works carry wall labels with their titles in italic serif, as museums
  print them. The tokens and type below are the app's own (Musem.App/wwwroot/css/site.css), without Bootstrap.
*/

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/eb-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/instrument-sans-latin-400-italic.woff2") format("woff2"); }

:root {
  --musem-paper: #fafaf8;
  --musem-paper-deep: #f0f0ec;
  --musem-ink: #22282c;
  --musem-stone: #6a6e69;
  --musem-rule: #dcdcd6;
  --musem-wall: #2f4a42;
  --musem-wall-deep: #243a34;
  --musem-gilt: #a88a45;
  --musem-on-wall: rgba(250, 250, 248, .85);
  --musem-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --musem-sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --measure: 40rem;
  --page: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --shadow-hung: 0 1px 0 rgba(34, 40, 44, .06), 0 .5rem 1.25rem -.75rem rgba(34, 40, 44, .35);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--musem-paper);
  color: var(--musem-ink);
  font-family: var(--musem-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Headings are set like exhibition titles: serif, regular weight, a little tight. */
h1, h2, h3, h4 {
  font-family: var(--musem-serif);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.15;
  margin: 0 0 .75rem;
}

h2 {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
}

h3 {
  font-size: 1.5rem;
}

p {
  margin: 0 0 1rem;
}

b, strong {
  font-weight: 600;
}

a {
  color: var(--musem-wall);
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--musem-wall-deep);
}

:focus-visible {
  outline: 2px solid var(--musem-gilt);
  outline-offset: 2px;
}

/* The museum prints the names of works in italics. */
.work-title {
  font-family: var(--musem-serif);
  font-style: italic;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  padding: .5rem .75rem;
  background: var(--musem-ink);
  color: var(--musem-paper);
}

.skip-link:focus {
  top: 1rem;
}

.container {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Buttons: the wall green for actions, square-cornered like a printed sign. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: .125rem;
  font: 500 1rem/1.4 var(--musem-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
  background: var(--musem-wall);
  border-color: var(--musem-wall);
  color: var(--musem-paper);
}

.btn-primary:hover {
  background: var(--musem-wall-deep);
  border-color: var(--musem-wall-deep);
  color: var(--musem-paper);
}

.btn-outline {
  border-color: var(--musem-rule);
  color: var(--musem-ink);
  background: transparent;
}

.btn-outline:hover {
  background: #ecece7;
  border-color: #c9c9c2;
  color: var(--musem-ink);
}

.btn-sm {
  padding: .4rem .9rem;
  font-size: .9375rem;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 248, .94);
  border-bottom: 1px solid var(--musem-rule);
}

@supports (backdrop-filter: blur(6px)) {
  .site-header {
    background: rgba(250, 250, 248, .82);
    backdrop-filter: blur(6px);
  }
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 4.5rem;
}

.brand {
  font-family: var(--musem-serif);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--musem-ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--musem-ink);
}

/* The logo, as published at www.widepurple.com, stands for the name in the header. Its white square needs the
   hairline to show on the paper. */
.site-header .brand {
  display: block;
}

.brand-mark {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--musem-rule);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu .nav-cta {
  margin-left: auto;
}

.nav-link {
  color: var(--musem-ink);
  text-decoration: none;
}

.nav-link:hover {
  color: var(--musem-wall);
}

.nav-link[aria-current="page"] {
  color: var(--musem-wall);
  text-decoration: underline;
  text-decoration-color: var(--musem-gilt);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: .5rem;
  background: none;
  border: 1px solid var(--musem-rule);
  border-radius: .125rem;
  color: var(--musem-ink);
  cursor: pointer;
}

.nav-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* The language switcher: each language's code, named in that language for screen readers. It stays in the header
   bar on phones too, outside the menu, so a visitor in the wrong language never has to hunt for it. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: .125rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
}

.lang-switch a {
  padding: .35rem .4rem;
  color: var(--musem-stone);
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--musem-wall);
}

.lang-switch a[aria-current="page"] {
  color: var(--musem-ink);
  text-decoration: underline;
  text-decoration-color: var(--musem-gilt);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}

/* The header folds into a menu below 1120px: that is where the longest menu, the English one, stops fitting.
   Keep the width in step with the matchMedia query in js/main.js. */
@media (max-width: 1119px) {
  .site-header .container {
    gap: .75rem;
  }

  /* Last in the bar, after the languages; it stays before the menu it opens in the tab order. */
  .nav-toggle {
    display: block;
    margin-left: 0;
    order: 1;
  }

  .lang-switch {
    margin-left: auto;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.25rem;
    background: var(--musem-paper);
    border-bottom: 1px solid var(--musem-rule);
    box-shadow: 0 .75rem 1.25rem -1rem rgba(34, 40, 44, .35);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu .nav-link {
    display: block;
    padding: .75rem 0;
    border-bottom: 1px solid var(--musem-rule);
  }

  .nav-menu .nav-cta {
    margin: 1rem 0 0;
  }

  .nav-menu .nav-cta .btn {
    width: 100%;
  }
}

/* Sections */

.section {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.section + .section {
  border-top: 1px solid var(--musem-rule);
}

.section-head {
  max-width: var(--measure);
  margin-bottom: 3rem;
}

.lead {
  font-family: var(--musem-serif);
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--musem-stone);
}

/* The small caps line over a title, like a room number painted beside a doorway. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--musem-stone);
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--musem-gilt);
}

/* The entrance: the hero, on paper, with a wall of works under it. */
.entrance {
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.entrance-title {
  max-width: 14ch;
  font-size: calc(2.75rem + 2.5vw);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
  .entrance-title {
    font-size: 5.5rem;
  }
}

.entrance-title em {
  color: var(--musem-wall);
}

.entrance .lead {
  max-width: 36rem;
  margin-bottom: 2rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Painted gallery walls: the green bands where works hang. */
.wall {
  background: var(--musem-wall);
  color: var(--musem-on-wall);
  position: relative;
}

.wall h2, .wall h3 {
  color: var(--musem-paper);
}

.wall .eyebrow {
  color: var(--musem-on-wall);
}

.wall a:not(.btn) {
  color: var(--musem-paper);
}

/* Works on paper: a framed image, a white mount inside a thin gilt fillet. */
.framed {
  background: #fff;
  padding: .5rem;
  border: 1px solid var(--musem-gilt);
  box-shadow: var(--shadow-hung);
}

.framed svg {
  width: 100%;
  height: auto;
}

/* Two sides of one museum */
.sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}

@media (max-width: 760px) {
  .sides {
    grid-template-columns: 1fr;
  }
}

.side {
  padding-top: 1.5rem;
  border-top: 1px solid var(--musem-ink);
}

.side-for {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--musem-gilt);
  margin-bottom: .5rem;
}

/* Feature rooms: copy on one side, a piece of the app on the other. */
.room {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.room-reverse > :first-child {
  order: 2;
}

@media (max-width: 860px) {
  .room {
    grid-template-columns: 1fr;
  }

  .room-reverse > :first-child {
    order: 0;
  }
}

.points {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.points li {
  position: relative;
  padding: .75rem 0 .75rem 1.75rem;
  border-top: 1px solid var(--musem-rule);
}

.points li:last-child {
  border-bottom: 1px solid var(--musem-rule);
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.4rem;
  width: .75rem;
  height: 1px;
  background: var(--musem-gilt);
}

/* Specimens: pieces of the app drawn as the app draws them, set in a browser-like frame. */
.specimen {
  background: var(--musem-paper);
  border: 1px solid var(--musem-rule);
  border-radius: .25rem;
  box-shadow: 0 1.5rem 3rem -1.75rem rgba(34, 40, 44, .45);
  overflow: hidden;
  font-size: .875rem;
}

.specimen-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--musem-rule);
  background: #fff;
}

.specimen-bar .brand {
  font-size: 1.25rem;
}

.specimen-nav {
  display: flex;
  gap: 1rem;
  color: var(--musem-ink);
}

.specimen-nav .is-current {
  color: var(--musem-wall);
  text-decoration: underline;
  text-decoration-color: var(--musem-gilt);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}

.specimen-body {
  padding: 1.25rem;
}

/* The collection's carousel: one work at a time on a painted wall, with the list of works beside it. */
.carousel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: 1rem;
}

@media (max-width: 520px) {
  .carousel {
    grid-template-columns: 1fr;
  }

  .carousel-list {
    display: none;
  }
}

.carousel-stage {
  background: var(--musem-wall);
  padding: 1.75rem 2.25rem 1rem;
  color: var(--musem-on-wall);
}

.carousel-stage .framed {
  max-width: 15rem;
  margin: 0 auto;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: .8125rem;
}

.carousel-controls .arrow {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 250, 248, .4);
}

.dots {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: .75rem;
}

.dots span {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: rgba(250, 250, 248, .35);
}

.dots .is-current {
  background: var(--musem-gilt);
}

.carousel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
}

.carousel-list li {
  display: flex;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--musem-rule);
}

.carousel-list .num {
  color: var(--musem-stone);
  min-width: 1rem;
}

.carousel-list .is-current {
  color: var(--musem-wall);
  font-weight: 500;
}

/* The inventory's record of an asset: details as a label's fine print. */
.record {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.25rem;
}

@media (max-width: 520px) {
  .record {
    grid-template-columns: 1fr;
  }

  .record .framed {
    max-width: 10rem;
  }
}

.record h4 {
  font-size: 1.375rem;
  margin-bottom: .25rem;
}

.fine-print {
  display: grid;
  grid-template-columns: minmax(6.5rem, max-content) 1fr;
  column-gap: 1rem;
  row-gap: .3rem;
  margin: .75rem 0 0;
}

.fine-print dt {
  color: var(--musem-stone);
}

.fine-print dd {
  margin: 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .75rem;
}

.tag {
  padding: .1rem .5rem;
  border: 1px solid var(--musem-rule);
  font-size: .75rem;
  font-weight: 500;
}

/* The curators' list of collections, with each one's status. */
.listing {
  width: 100%;
  border-collapse: collapse;
}

.listing th {
  text-align: left;
  font-weight: 500;
  color: var(--musem-stone);
  border-bottom: 1px solid var(--musem-ink);
  padding: .5rem .5rem .5rem 0;
}

.listing td {
  padding: .7rem .5rem .7rem 0;
  border-bottom: 1px solid var(--musem-rule);
  vertical-align: top;
}

.listing .work-title {
  font-size: 1.0625rem;
}

.listing .period {
  display: block;
  color: var(--musem-stone);
  font-size: .75rem;
}

.status {
  display: inline-block;
  padding: .05rem .45rem;
  border: 1px solid var(--musem-rule);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}

.status-published {
  border-color: var(--musem-wall);
  color: var(--musem-wall);
}

.status-upcoming {
  border-color: var(--musem-gilt);
  color: #806629;
}

.status-hidden {
  color: var(--musem-stone);
}

/* Roles: who opens which part of the museum. */
.roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--musem-ink);
}

@media (max-width: 960px) {
  .roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .roles {
    grid-template-columns: 1fr;
  }
}

.roles li {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--musem-rule);
}

.roles h3 {
  margin-bottom: .5rem;
}

.roles .count {
  display: block;
  margin-bottom: .75rem;
  font-family: var(--musem-serif);
  font-style: italic;
  color: var(--musem-gilt);
}

.roles p {
  margin: 0;
  color: var(--musem-stone);
}

/* The four promises reuse the roles' ruled columns; their titles lead to the sections that keep each promise. */
.promises h3 a {
  color: var(--musem-ink);
  text-decoration: none;
}

.promises h3 a:hover {
  color: var(--musem-wall);
  text-decoration: underline;
  text-decoration-color: var(--musem-gilt);
}

/* Languages: the same welcome, as the museum prints it in each language. */
.languages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1rem;
  background: var(--musem-rule);
  border: 1px solid var(--musem-rule);
}

@media (max-width: 760px) {
  .languages {
    grid-template-columns: 1fr;
  }
}

.language {
  padding: 1.75rem;
  background: var(--musem-paper);
}

.language .code {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--musem-gilt);
}

.language .greeting {
  margin: .5rem 0 .25rem;
  font-family: var(--musem-serif);
  font-size: 1.75rem;
  line-height: 1.15;
}

.language p:last-child {
  margin: 0;
  color: var(--musem-stone);
  font-size: .9375rem;
}

/* Care of the collection: the guarantees, three columns of fine print on paper. */
.care {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 860px) {
  .care {
    grid-template-columns: 1fr;
  }
}

.care h3 {
  font-size: 1.375rem;
  padding-top: 1rem;
  border-top: 1px solid var(--musem-ink);
}

.care p {
  color: var(--musem-stone);
}

/* The invitation at the foot of the page: a wall with one framed card on it. */
.invitation {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 6px solid var(--musem-wall-deep);
}

.invitation .container {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

@media (max-width: 860px) {
  .invitation .container {
    grid-template-columns: 1fr;
  }
}

.invitation .lead {
  color: var(--musem-on-wall);
}

.invitation-card {
  background: var(--musem-paper);
  color: var(--musem-ink);
  padding: 2rem;
  border: 1px solid var(--musem-gilt);
  outline: .5rem solid #fff;
  box-shadow: 0 1.5rem 2.5rem -1rem rgba(0, 0, 0, .55);
}

.invitation-card h3 {
  color: var(--musem-ink);
  font-style: italic;
}

.invitation-card .points {
  margin: 1rem 0 1.5rem;
}

.invitation-card .points li {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.invitation-card .points li::before {
  top: 1.15rem;
}

.invitation-card small {
  display: block;
  margin-top: 1rem;
  color: var(--musem-stone);
}

/* Footer */

.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--musem-rule);
  color: var(--musem-stone);
  font-size: .875rem;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.site-footer a {
  color: inherit;
}

.maker {
  display: inline-flex;
  text-decoration: none;
}

/* The Wide Purple wordmark is wide and short (64×15); keep its proportions. */
.maker img {
  width: auto;
  height: 15px;
}

/* Not found: an empty wall, with only its label left. */
.missing {
  padding: clamp(4rem, 10vw, 8rem) 0;
}

.missing .container {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
}

@media (max-width: 640px) {
  .missing .container {
    grid-template-columns: 1fr;
  }
}

.empty-frame {
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--musem-gilt);
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(168, 138, 69, .08) 10px 11px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition: none !important;
  }
}