/* document */
html {
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-height) + var(--gutter) / 2);
    accent-color: var(--color-accent);
    caret-color: var(--color-accent);
    text-rendering: geometricPrecision;
}

@media (hover: none) {
    html {
        touch-action: manipulation;
    }
}

body {
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--color-canvas);
    min-inline-size: 32rem;

    color: var(--color-canvastext);
    font-weight: normal;
    font-size: var(--font-size-sm);
    line-height: 1.625;
    font-family: var(--font-main);
    letter-spacing: -0.00875em;

    tab-size: inherit;
    -webkit-tap-highlight-color: inherit;
    -webkit-text-size-adjust: inherit;
    text-size-adjust: inherit;
    text-rendering: inherit;
    overflow-wrap: inherit;
}

body > footer {
    margin-block-start: auto;
}

/* headlines */
:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4) {
    display: block;
    margin-block: 0;
    margin-block-end: 0.425em;
    inline-size: fit-content;
    max-inline-size: 64ch;
    color: inherit;
    font-weight: regular;
    line-height: 1.15;
    font-family: var(--font-alt);
    -webkit-hyphens: auto;
    hyphens: auto;
    letter-spacing: -0.01875em;
}

:where(h1, .h1) {
    font-size: var(--font-size-xxl);
}

:where(h2, .h2) {
    font-size: var(--font-size-lg);
}

:where(h4, .h4) {
    font-size: var(--font-size-md);
}

[data-page="default"] #content :where(h2, .h2) {
    font-size: var(--font-size-xl);
}

[data-page="default"] #content :where(h3, .h3) {
    font-size: var(--font-size-lg);
}

[data-page="sub"] #content :where(h1, .h1) {
    font-size: var(--font-size-xl);
}

[data-page="sub"] #content :where(h2, .h2) {
    color: var(--color-accent);
    font-size: var(--font-size-md);
}

[data-page="sub"] #content :where(h3, .h3) {
    color: var(--color-accent);
    font-size: calc(var(--font-size-md) * 0.9);
}

[data-page="sub"] #content > header ~ * {
    margin-block: var(--gutter);
}

[data-page="sub"] #content > header ~ *:nth-child(2) {
    margin-block-start: 0;
}

[data-page="sub"] #content > header ~ *:last-child {
    margin-block-end: 0;
}

:where(#content) :any-link:not(.button) {
    display: inline-block;
    transition: color var(--transition);
    color: inherit;
    text-decoration: underline;
}

:where(#content) :any-link:not(.button):where(:hover, :focus-visible) {
    color: var(--color-accent);
    text-decoration: none;
}

:where(#content) :any-link:not(.button):is(.page)::after {
    display: inline-block;
    margin-inline-start: 0.225em;
    content: "»";
}

:where(#content)
    :where(
        .button,
        button,
        input:where([type="button"], [type="reset"], [type="submit"])
    ) {
    display: inline-block;
    appearance: none;
    transition:
        background-color var(--transition),
        color var(--transition);
    cursor: pointer;
    border: #fff0;
    border: var(--border-line) var(--color-accent);
    background-color: transparent;
    padding: calc(var(--gutter) * 3 / 5);
    color: var(--color-accent);
    font-weight: 400;
    text-align: center;
    text-decoration: none;
}

:where(#content)
    :where(
        .button,
        button,
        input:where([type="button"], [type="reset"], [type="submit"])
    ):is(:hover, :focus-visible) {
    background-color: var(--color-accent);
    color: var(--color-canvas);
}

:where(blockquote, em, i) {
    padding-inline-end: 0.05em;
    font-style: italic;
}

:where(p, li, figcaption) {
    max-inline-size: 72ch;
}

:where(p, dl, ol, ul) {
    margin-block-start: 0;
    margin-block-end: 1.25em;
}

:where(:is(p, dl, ol, ul):last-child) {
    margin-block-end: 0;
}

:where(:is(ol, ul):not([role="list"], [role="tablist"])) {
    padding-inline-start: 1.5em;
}

:where(:is(ol, ul):not([role="list"], [role="tablist"]) > :not(:last-child)) {
    margin-block-end: 0.625em;
}

:where(img, video) {
    object-fit: cover;
    object-position: center;
}

:where(video) {
    aspect-ratio: auto 16 / 9;
}

:where(.logo :is(img, svg)) {
    view-transition-name: logo;
}

:where(hr) {
    opacity: 1;
    margin-block: var(--gutter);
    border: none;
    border-block-start: var(--border-line) var(--color-accent);
}

:where(header) {
    inline-size: fit-content;
}

/* lists */
::marker {
    color: var(--color-canvastext);
}

#content li li {
    list-style-type: "– ";
}

/* utility */
address {
    font-style: normal;
}

address :any-link {
    display: inline-block;
    margin-block-end: 0.5em;
    text-decoration: underline;
}

address .icon-fa {
    vertical-align: middle;
    font-size: 1.5em;
}

main {
    padding-block-start: var(--header-height);
}

#main {
    display: grid;
    gap: var(--gutter);
}

[data-page="default"] #main {
    grid-template-areas: "content";
    text-align: center;
}

[data-page="default"] #content > .frame-type-group {
    padding-block: var(--block-padding);
}

[data-page="default"] #content > .frame-type-group > * > :where(header, p) {
    margin-inline: auto;
}

[data-page="sub"][data-menu="true"] #main {
    grid-template-areas:
        "aside"
        "content";
    padding-block: var(--block-padding);
}

[data-page="sub"][data-menu="false"] #main {
    grid-template-areas: "content";
    padding-block: var(--block-padding);
}

@media (min-width: 960px) {
    [data-page="sub"][data-menu="true"] #main {
        grid-template-columns: 1fr 2fr;
        grid-template-areas: "aside content";
    }
    [data-page="sub"][data-menu="false"] #main {
        grid-template-columns: 1fr;
        grid-template-areas: "content";
    }
}

#aside {
    grid-column: aside;
}

#content {
    grid-column: content;
}

strong {
    font-weight: bold;
}

:where([frame="color-bg"], [data-frame="color-bg"]) {
    --color-accent: var(--color-white);
    --color-canvas: var(--color-gold);
    --color-canvastext: var(--color-white);
    --color-selection: var(--color-white);

    background: linear-gradient(
        to bottom,
        var(--color-ocher),
        var(--color-gold)
    );
    color: var(--color-white);
}

:where([frame="color-bg"], [data-frame="color-bg"]) ::selection {
    --color-selection: var(--color-white);
}

[id="nav-skip"] {
    position: fixed;
    z-index: 15;
    margin: calc(var(--gutter) / 3);
    inset: 0 auto auto 0;
    border: var(--border-dots) var(--color-gold);
    border-radius: calc(var(--gutter) / 8);
    background-color: var(--color-canvas);
    padding: calc(var(--gutter) / 3);
    max-inline-size: calc(var(--viewport-width) - var(--gutter) * 4 / 3);
}

[id="nav-skip"] :any-link {
    color: var(--color-accent);
    text-decoration: none;
}

#hero {
    inline-size: 100%;
}

[data-page="default"] #hero {
    min-block-size: calc(var(--content-height) + 0.1rem);
}

[data-page="sub"] #hero {
    padding-block: calc(var(--block-padding) / 1.5);
}

@media (min-width: 744px) {
    [data-page="sub"] #hero {
        padding-block: calc(var(--block-padding) / 2);
    }
}

#hero > * {
    inline-size: 100%;
}

#hero {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

#hero .media {
    position: absolute;
    z-index: -1;
}

#hero .media img {
    inline-size: 100%;
    block-size: calc(var(--content-height) + 0.1rem);
    object-position: center;
}

#hero .content {
    block-size: 100%;
    color: var(--color-canvas);
}

#hero .content > * {
    margin-inline: auto;
    margin-block-end: calc(var(--header-height) / 2);
    inline-size: fit-content;
}

#hero .content header > * {
    max-inline-size: 24ch;
    font-size: var(--font-size-xxl);
    text-align: center;
    text-wrap: pretty;
}

/* top link */
#nav-top {
    position: absolute;
    inset-block-start: 0;
    block-size: var(--header-height);
}

#top-link {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    opacity: 0.75;
    transition:
        transform var(--transition),
        opacity var(--transition);
    inset-block-end: 5.25%;
    inset-inline-end: var(--content-padding);
    box-shadow: 0 0.25em 0.5em -0.25em var(--color-canvas);
    background-color: var(--color-accent);
    inline-size: 2em;
    block-size: 2em;
    color: var(--color-canvas);
    font-size: calc(125% + min(0.375vb, 25%));
    text-decoration: none;
}

#top-link:where(:hover, :focus-visible) {
    transform: translateY(-1.25%) scale(107.5%);
    opacity: 1;
}

#top-link[inert] {
    opacity: 0;
}

/* frame spaces */
:where(.space-before-extra-small, .frame-space-before-extra-small) {
    margin-block-start: calc(var(--gutter) * 1);
}

:where(.space-before-small, .frame-space-before-small) {
    margin-block-start: calc(var(--gutter) * 2);
}

:where(.space-before-medium, .frame-space-before-medium) {
    margin-block-start: calc(var(--gutter) * 3);
}

:where(.space-before-large, .frame-space-before-large) {
    margin-block-start: calc(var(--gutter) * 4);
}

:where(.space-before-extra-large, .frame-space-before-extra-large) {
    margin-block-start: calc(var(--gutter) * 5);
}

:where(.space-after-extra-small, .frame-space-after-extra-small) {
    margin-block-end: calc(var(--gutter) * 1);
}

:where(.space-after-small, .frame-space-after-small) {
    margin-block-end: calc(var(--gutter) * 2);
}

:where(.space-after-medium, .frame-space-after-medium) {
    margin-block-end: calc(var(--gutter) * 3);
}

:where(.space-after-large, .frame-space-after-large) {
    margin-block-end: calc(var(--gutter) * 4);
}

:where(.space-after-extra-large, .frame-space-after-extra-large) {
    margin-block-end: calc(var(--gutter) * 5);
}

[class*="space-before-"] > hr {
    margin-block-start: unset;
}

[class*="space-after-"] > hr {
    margin-block-end: unset;
}

/* ce-row */
.ce-gallery {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gutter) / 2);
}

@media (min-width: 744px) {
    .ce-gallery {
        flex-direction: row;
        gap: var(--gutter);
    }
}

.ce-gallery .ce-row {
    flex-grow: 1;
}

.ce-gallery .ce-row .image {
    margin: 0;
    inline-size: 100%;
}

.ce-gallery .ce-row .image * {
    inline-size: 100%;
}

.address-list {
    border-block-start: var(--border-line) var(--color-accent);
}

.address-list > .address-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gutter) / 2);
    border-block-end: var(--border-line) var(--color-accent);
    padding-block: calc(var(--gutter) / 2);
    max-inline-size: revert;
}

@media (min-width: 744px) {
    .address-list > .address-item {
        flex-direction: row;
        gap: var(--gutter);
        padding-block: var(--gutter);
    }

    .address-list > .address-item:nth-child(2n) {
        flex-direction: row-reverse;
    }
}

.address-list .address-item .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    text-align: start;
}

.address-list .address-item .media {
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-list .content .icon-fa {
    margin-inline-end: 0.25em;
}

.address-list .address-image {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100vmax;
    background-color: var(--color-canvastext);
    aspect-ratio: 1/1;
    inline-size: 20rem;
    max-inline-size: revert;
    block-size: auto;
    color: var(--color-black);
    font-size: 5.5em;
}

@media (min-width: 960px) {
    .address-list .address-image {
        inline-size: 30rem;
    }
}