/* Layout variables */

:root {
    --top-margin: 2rem;
    --bottom-margin: 2rem;
    --left-margin: 2rem;
    --right-margin: 2rem;
    --footer-vertical-margin: 1rem;
    --content-vertical-margin: 3rem;
    --menu-label-gap: -1.5rem;
}

/* Body layout */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

/* Header layout*/

.home-header {
  flex-shrink: 0;
  padding-top: var(--top-margin);
  padding-right: var(--right-margin);
}

.header-subtitle {
    width: min(56ch, 60vw);
    max-width: 56ch;
    margin-left: auto;
    margin-right: 0;
    margin-top: 0.5rem;
}

/* Menu layout */

.main-menu {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 1000;
  padding-top: var(--top-margin);
  padding-right: var(--right-margin);
  padding-bottom: var(--bottom-margin);
  padding-left: var(--left-margin);
}

.main-menu:has(li.active),
.main-menu.returning {
    z-index: 1;
}

.main-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
}

.main-menu-list li {
    position: relative;
}

.main-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 14rem;
    height: 14rem;
}

.main-menu-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-label {
    position: absolute;
    right: 0;
    bottom: var(--menu-label-gap);
}

/* Back button layout */

#back-button {
    position: absolute;
    left: var(--left-margin);
    top: 50%;
    transform: translateY(-50%);
}

/* Main content layout */

.main-content {
    flex: 1;
    min-height: 0;
    z-index: 1000;
    display: grid;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--left-margin);
    padding-right: var(--right-margin);
}

/* Section layout */

.content-section {
    /* All sections occupy the same grid cell and overlay each other */
    grid-column: 1;
    grid-row: 1;
    width: min(90ch, 60vw);
    overflow-y: auto;
    margin-left: auto;
    margin-right: 0;
    padding-top: var(--content-vertical-margin);
    padding-bottom: var(--content-vertical-margin);
}

/* WIP section layout */

.content-section.wip {
    position: absolute;
    right: var(--right-margin);
    top: 50%;
    transform: translateY(-50%);
}

/* Footer layout */

.page-footer {
    flex-shrink: 0;
    padding-right: var(--right-margin);
    padding-top: var(--footer-vertical-margin);
    padding-bottom: var(--footer-vertical-margin);
}

/* Link preview layout */

.link-preview {
    position: fixed;
    left: var(--left-margin);
    top: 50%;
    transform: translateY(-50%);
    width: min(38vw, 420px);
    height: min(65vh, 600px);
    z-index: 2000;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.link-preview-close {
    align-self: flex-start;
    margin-top: 0.75rem;
}

.link-preview--video {
    width: min(38vw, 420px);
    height: auto;
}

.link-preview--video .link-preview-frame {
    flex: none;
    aspect-ratio: 16 / 9;
    height: auto;
}

.link-preview--image {
    width: min(38vw, 420px);
    height: auto;
}

.link-preview--audio {
    width: min(38vw, 420px);
    height: auto;
    padding: var(--left-margin);
}

.link-preview--audio .audio-player {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Contact card layout */

.contact-card {
    position: fixed;
    right: var(--right-margin);
    bottom: calc(var(--bottom-margin) + 2 * var(--footer-vertical-margin));
    z-index: 1001;
}

.contact-card dl {
    margin: 0;
}

.contact-card dt {
    margin: 0 0 0.15rem auto;
    padding: 0.15rem 0.15rem 0 0.15rem;
}

.contact-card dd {
    margin: 0 0 0.75rem auto;
    padding: 0.15rem 0.15rem 0 0.15rem;
}