.hdr {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 20;
display: flex;
align-items: flex-end;
gap: var(--space-s);
block-size: var(--hdr-h);
padding-inline: var(--space-gutter);
background: var(--color-bg);
view-transition-name: site-header;
}
.hdr::after,
.nav[data-part="main"]::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 1;
block-size: var(--gold-line-width);
background: var(--gold-line);
background-attachment: fixed;
pointer-events: none;
}
.hdr-brand {
display: flex;
align-self: center;
min-inline-size: 0;
margin: 0;
margin-inline-end: auto;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.nav {
display: flex;
align-items: flex-end;
align-self: stretch;
flex: none;
}
.nav[data-part="main"] {
position: relative;
view-transition-name: site-nav;
}
.nav[data-part="main"]::after {
z-index: 3;
}
.hdr-divider {
display: none;
flex: none;
align-self: flex-end;
margin-block-end: calc((var(--tab-h) - var(--hdr-divider-height)) / 2);
inline-size: var(--hdr-divider-width);
block-size: var(--hdr-divider-height);
margin-inline-start: var(--hdr-tools-gap);
margin-inline-end: var(--hdr-tools-gap);
background: linear-gradient(to bottom, var(--color-gold-deep), var(--selector-icon) 30%, var(--selector-icon-active) 50%, var(--selector-icon) 70%, var(--color-gold-deep));
}
@media (min-width: 72em) {
.hdr-divider {
display: block;
}
}
@media (prefers-contrast: more) {
.hdr-divider {
background: var(--gold-line);
}
}
@media (forced-colors: active) {
.hdr-divider {
background: CanvasText;
}
}
.hdr-tools {
display: flex;
align-items: flex-end;
align-self: stretch;
flex: none;
gap: var(--space-2xs);
}
.main {
inline-size: 100%;
max-inline-size: var(--size-content-max);
margin-inline: auto;
padding-block: var(--space-xl);
padding-inline: var(--space-gutter);
view-transition-name: site-main;
}
.main:focus {
outline: none;
}
.page {
display: flex;
flex-direction: column;
padding-block-start: var(--hdr-h);
}
.page > .main {
flex: 1 0 auto;
}
@media (min-width: 48em) {
.page-content {
max-block-size: var(--content-max);
}
.page-content[role="region"] {
overflow-y: auto;
overscroll-behavior: contain;
}
}
.page[data-page="home"] .main {
display: flex;
flex-direction: column;
padding-block: var(--space-m);
}
.page[data-page="home"] .page-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.ftr {
position: relative;
padding-block: var(--space-m) var(--space-s);
padding-inline: var(--space-gutter);
view-transition-name: site-footer;
}
.ftr::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 0;
block-size: var(--gold-line-width);
background: var(--gold-line);
pointer-events: none;
}
.ftr-inner {
display: grid;
gap: var(--space-2xs);
max-inline-size: var(--size-content-max);
margin-inline: auto;
}
.about-bio,
.proj-section,
.col-section,
.play-section,
.form-section,
.legal-section,
.page-section {
max-inline-size: var(--size-text-max);
margin-block-end: var(--space-xl);
}
.lang-root {
max-inline-size: var(--size-measure);
}