/* Shell: a slim top bar, one centered column on a plain white page. */

.app {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.main {
  position: relative;
  z-index: 1; /* above the backdrop */
  flex: 1;
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
}

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

.page {
  padding-block: var(--s-7) var(--s-8);
  animation: fade-in var(--dur-slow) var(--ease) both;
}

.narrow {
  max-width: var(--narrow);
  margin-inline: auto;
}

/* Brand */

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--text);
}
.brand svg {
  color: var(--taupe);
}

/* Top bar */

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-4);
  max-width: var(--page-max);
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.header__nav {
  display: none;
  gap: var(--s-6);
}

.header__link {
  padding-block: var(--s-2);
  color: var(--text-soft);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.header__link:hover {
  color: var(--text);
}
.header__link[aria-current='page'] {
  color: var(--accent);
}

.header__end {
  justify-self: end;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--text-soft);
  font-size: var(--small);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.avatar:hover {
  color: var(--text);
  background: var(--surface-sunk);
}
.avatar[aria-current] {
  color: var(--accent);
}

/* Bottom navigation (phones) */

.bottomnav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}

.bottomnav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}
.bottomnav__link[aria-current='page'] {
  color: var(--accent);
}
.bottomnav__link:focus-visible {
  outline-offset: -4px;
}

/* The welcome page is bare: no navigation, as in the original design */
.app[data-page='welcome'] .header__nav,
.app[data-page='welcome'] .bottomnav {
  display: none;
}
.app[data-page='welcome'] .main {
  padding-bottom: 0;
}

/*
  The marble bust: faint and fixed, behind the content. On wide screens it
  sits to the right; on phones it is centred. Its edges dissolve into the
  page so there is no visible box, only a soft ghost of the sculpture.
*/

.backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.backdrop__img {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, 34rem);
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  filter: grayscale(0.7) contrast(1.3) brightness(1.08);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 30%, transparent 100%);
}
.backdrop__img.is-loaded {
  opacity: calc(var(--bust-opacity) * 0.75);
}

/* Photographs are dark: in dark mode they need no help, in light they are a ghost */
:root[data-theme='dark'] .backdrop__img {
  mix-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .backdrop__img {
    mix-blend-mode: screen;
  }
}

/* Status: a soft, brief message */

.status {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottomnav-h) + var(--s-5) + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: min(90vw, 26rem);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-size: var(--small);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.5rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.status:empty {
  display: none;
}
.status.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Larger screens: navigation moves to the top, the bust moves to the right */

@media (min-width: 760px) {
  .main {
    padding-bottom: 0;
  }
  .header__inner {
    grid-template-columns: 1fr auto 1fr;
  }
  .header__end {
    grid-column: 3;
  }
  .header__nav {
    display: flex;
  }
  .bottomnav {
    display: none;
  }
  .status {
    bottom: var(--s-6);
  }
  .page {
    padding-block: var(--s-8) var(--s-9);
  }
}

@media (min-width: 1000px) {
  .backdrop__img {
    left: auto;
    right: calc(var(--bust-width) * -0.06);
    width: var(--bust-width);
    transform: none;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 32%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 32%, transparent 100%);
  }
  .backdrop__img.is-loaded {
    opacity: var(--bust-opacity);
  }
}