/*
 * DERHALLER public layout system.
 * One token-driven 12-column grid for every area, detail page and shared component.
 */

[data-inline-layout-root] {
    --area-header-height: var(--ds-header-height, 5rem);
    --area-page-offset: 0rem;
    --area-page-gutter: var(--ds-gutter, clamp(1.25rem, 5vw, 4.5rem));
    --area-content-gutter: var(--ds-gutter, clamp(1.25rem, 5vw, 4.5rem));
    --area-hero-top: clamp(3rem, 7vh, 6rem);
    --area-hero-bottom: clamp(5.5rem, 9vh, 7.5rem);
    --area-title-size: var(--ds-step-5, clamp(3rem, 2rem + 4vw, 5.75rem));
    --area-section-title-size: var(--ds-step-4, clamp(2.35rem, 1.65rem + 2.8vw, 4.25rem));
}

body.inline-editor-active [data-inline-layout-root] { --area-page-offset: 4.75rem; }
body.is-preview [data-inline-layout-root] { --area-page-offset: 3rem; }

:is(.person-topbar, .development-topbar, .projects-topbar, .photography-topbar, .fitness-topbar, .contact-topbar) {
    height: var(--area-header-height);
    min-height: var(--area-header-height);
    padding-inline: var(--area-page-gutter);
}

.area-hero {
    position: relative;
    min-height: calc(100svh - var(--area-header-height) - var(--area-page-offset));
    margin-top: calc(var(--area-header-height) + var(--area-page-offset));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ds-grid-gap, clamp(.9rem, 1.8vw, 1.5rem));
    align-items: center;
    isolation: isolate;
    overflow: clip;
    padding: var(--area-hero-top) var(--area-page-gutter) var(--area-hero-bottom);
}

@supports (height: 100dvh) {
    .area-hero {
        min-height: calc(100dvh - var(--area-header-height) - var(--area-page-offset));
    }
}

.area-hero__content {
    position: relative;
    z-index: 3;
    grid-column: 1 / span 8;
    width: 100%;
    max-width: 58rem;
    min-width: 0;
    padding-left: clamp(1rem, 2.4vw, 2.25rem);
}

.area-hero .area-hero__title {
    max-width: 13ch;
    margin: 0;
    font-family: var(--ds-font-display, Georgia, "Times New Roman", serif);
    font-size: var(--area-title-size);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.042em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.area-hero__lead {
    max-width: 42rem;
    margin: clamp(1.25rem, 3vh, 2rem) 0 0;
    color: var(--ds-color-text-soft, #d6d0c7);
    font-size: var(--ds-step-1, clamp(1.08rem, .98rem + .45vw, 1.32rem));
    line-height: 1.55;
    text-wrap: pretty;
}

.area-hero__intro {
    max-width: 42rem;
    margin: var(--ds-space-4, 1rem) 0 0;
    color: var(--ds-color-muted, #a7a9ad);
    font-size: var(--ds-step-0, 1rem);
    line-height: 1.72;
    text-wrap: pretty;
}

.area-hero .area-hero__scroll {
    position: absolute;
    z-index: 12;
    right: var(--area-page-gutter);
    bottom: max(clamp(1.15rem, 2.5vh, 2rem), env(safe-area-inset-bottom));
    display: grid;
    min-width: 4.75rem;
    justify-items: center;
    gap: .7rem;
    padding: .5rem .4rem .2rem;
    color: color-mix(in srgb, var(--accent, var(--ds-color-accent, #c69a62)) 74%, var(--ds-color-text, #f4efe8));
    text-align: center;
    text-decoration: none;
    transition: color var(--ds-duration-fast, 160ms) ease, transform var(--ds-duration-fast, 160ms) ease;
}

.area-hero .area-hero__scroll span {
    display: block;
    font-family: var(--ds-font-sans, sans-serif);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.area-hero .area-hero__scroll i {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    animation: area-scroll-cue 2.2s ease-in-out infinite;
}

.area-hero .area-hero__scroll:hover,
.area-hero .area-hero__scroll:focus-visible {
    color: var(--ds-color-text, #fff);
    outline: none;
    transform: translateY(.18rem);
}

.area-hero .area-hero__scroll:focus-visible {
    border-radius: var(--ds-radius-sm, .4rem);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #c69a62) 65%, transparent);
}

@keyframes area-scroll-cue {
    0%, 100% { translate: 0 0; opacity: .68; }
    50% { translate: 0 .34rem; opacity: 1; }
}

.area-content,
.area-footer {
    width: min(var(--inline-content-max, var(--ds-container, 92rem)), calc(100% - (var(--area-content-gutter) * 2)));
    margin-inline: auto;
}

.area-content {
    min-width: 0;
}

.area-content :where(p, li) { text-wrap: pretty; }
.area-content :where(section, article, [id]) { scroll-margin-top: calc(var(--area-header-height) + 1rem); }
.area-hero__content > :first-child { margin-top: 0; }
.area-hero__content > :last-child { margin-bottom: 0; }

.area-section__heading {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ds-grid-gap, 1rem);
    align-items: start;
    margin-bottom: clamp(2rem, 4.5vw, 3.75rem);
}

.area-section__heading > span {
    grid-column: 1 / span 1;
    padding-top: .55rem;
    color: color-mix(in srgb, var(--accent, var(--ds-color-accent, #c69a62)) 78%, var(--ds-color-text, #fff));
    font-family: var(--ds-font-sans, sans-serif);
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.area-section__heading > :is(h2, div) {
    grid-column: 2 / -1;
    min-width: 0;
}

.area-section__heading h2 {
    margin: 0;
    font-family: var(--ds-font-display, Georgia, serif);
    font-size: var(--area-section-title-size);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.area-section__heading p {
    max-width: 48rem;
    margin: .8rem 0 0;
    color: var(--ds-color-muted, #a7a9ad);
    line-height: 1.7;
}

/* Fitness overview has a second hero navigation. It receives its own lane. */
.fitness-hero { padding-bottom: max(var(--area-hero-bottom), 9rem); }
.fitness-jump-nav {
    position: absolute;
    z-index: 13;
    left: var(--area-page-gutter);
    right: calc(var(--area-page-gutter) + 8rem);
    bottom: max(clamp(1.15rem, 2.5vh, 2rem), env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .5rem;
    max-width: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}
.fitness-jump-nav::-webkit-scrollbar { display: none; }
.fitness-jump-nav a { flex: 0 0 auto; }

.contact-availability-wrap {
    position: relative;
    z-index: 4;
    width: min(var(--inline-content-max, var(--ds-container, 92rem)), calc(100% - (var(--area-content-gutter) * 2)));
    margin: clamp(-4.5rem, -6vh, -3rem) auto 0;
    display: flex;
    justify-content: flex-end;
}
.contact-availability-wrap .contact-availability {
    position: static;
    width: min(23rem, 100%);
    margin: 0;
}

/* Shared related-area grid. */
.area-related-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ds-grid-gap, 1rem);
}

.area-related-card {
    position: relative;
    grid-column: span 4;
    min-height: clamp(15rem, 23vw, 20rem);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--ds-color-line, rgba(255,255,255,.1));
    border-radius: var(--ds-radius-lg, 1rem);
    color: var(--ds-color-text, #f3eee7);
    background: var(--ds-color-surface, #0a0d11);
    text-decoration: none;
    box-shadow: var(--ds-shadow-sm, 0 1.3rem 3.5rem rgba(0,0,0,.18));
}

.area-related-card__media,
.area-related-card__shade { position: absolute; inset: 0; }
.area-related-card__media {
    z-index: -2;
    background-image: var(--related-image), linear-gradient(145deg, var(--ds-color-surface-raised, #24282d), var(--ds-color-bg, #090b0e) 70%);
    background-size: cover;
    background-position: center;
    filter: saturate(.68) brightness(.72);
    transform: scale(1.015);
    transition: transform var(--ds-duration-slow, 620ms) var(--ds-ease-emphasized, ease), filter var(--ds-duration-slow, 620ms) ease;
}
.area-related-card__shade {
    z-index: -1;
    background: linear-gradient(180deg, rgba(4,6,8,.08) 15%, rgba(4,6,8,.34) 48%, rgba(4,6,8,.96) 100%);
}
.area-related-card__copy {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem 1rem;
    align-items: end;
    padding: clamp(1.25rem, 2.4vw, 1.8rem);
}
.area-related-card__copy small {
    grid-column: 1 / -1;
    color: color-mix(in srgb, var(--related-accent, #c69a62) 78%, #fff);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.area-related-card__copy strong {
    font-family: var(--ds-font-display, Georgia, serif);
    font-size: var(--ds-step-2, clamp(1.32rem, 1.1rem + .9vw, 1.85rem));
    font-weight: 400;
    line-height: 1.08;
}
.area-related-card__copy > span {
    grid-column: 1 / -1;
    color: var(--ds-color-muted, #b4b7bb);
    font-size: var(--ds-step--1, .84rem);
    line-height: 1.55;
}
.area-related-card__copy i {
    grid-column: 2;
    grid-row: 2;
    color: var(--related-accent, #c69a62);
    font-style: normal;
    font-size: 1.1rem;
}
.area-related-card:hover .area-related-card__media,
.area-related-card:focus-visible .area-related-card__media {
    transform: scale(1.06);
    filter: saturate(.9) brightness(.82);
}

/* Shared professional public footer. */
.area-footer {
    display: grid;
    margin-top: clamp(4rem, 8vw, 7rem);
    padding: 0;
    overflow: hidden;
    color: var(--ds-color-muted, #b8bec5);
    font-size: var(--ds-step-0, 1rem);
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    border: 1px solid var(--ds-color-line, rgba(255,255,255,.09));
    border-bottom: 0;
    border-radius: var(--ds-radius-lg, 1rem) var(--ds-radius-lg, 1rem) 0 0;
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent, #c69a62) 10%, transparent), transparent 25rem),
        color-mix(in srgb, var(--ds-color-surface, #0a0d11) 78%, transparent);
    backdrop-filter: blur(18px);
}
.area-footer__main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ds-grid-gap, 1rem);
    padding: clamp(2rem, 4vw, 3.5rem);
}
.area-footer__identity { grid-column: span 5; max-width: 31rem; }
.area-footer__brand {
    display: inline-block;
    color: color-mix(in srgb, var(--accent, #c69a62) 70%, #fff);
    text-decoration: none;
    font-family: var(--ds-font-display, Georgia, serif);
    font-size: var(--ds-step-1, 1.25rem);
    letter-spacing: .24em;
}
.area-footer__identity p {
    margin: 1rem 0 0;
    color: var(--ds-color-muted, #9299a1);
    font-size: var(--ds-step--1, .9rem);
    line-height: 1.7;
}
.area-footer__areas {
    grid-column: 7 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem 1.25rem;
    align-content: start;
}
.area-footer__areas a,
.area-footer__links a {
    color: var(--ds-color-muted, #b8bec5);
    text-decoration: none;
    transition: color var(--ds-duration-fast, 160ms) ease, background var(--ds-duration-fast, 160ms) ease;
}
.area-footer__areas a {
    display: flex;
    align-items: center;
    min-height: 2.8rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ds-color-line, rgba(255,255,255,.1)) 55%, transparent);
    font-family: var(--ds-font-display, Georgia, serif);
    font-size: 1rem;
}
.area-footer__areas a::after { content: "→"; margin-left: auto; color: var(--accent, #c69a62); }
.area-footer__areas a:hover,
.area-footer__areas a:focus-visible { color: #fff; background: rgba(255,255,255,.025); outline: none; }
.area-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.15rem clamp(1.4rem,4vw,3.5rem) max(1.15rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--ds-color-line, rgba(255,255,255,.08));
    background: rgba(2,4,7,.28);
}
.area-footer__links { display: flex; flex-wrap: wrap; gap: .45rem 1rem; }
.area-footer__links a { font-size: .72rem; }
.area-footer__links a:hover,
.area-footer__links a:focus-visible { color: color-mix(in srgb, var(--accent, #c69a62) 72%, #fff); outline: none; text-decoration: underline; text-underline-offset: .3em; }
.area-footer__meta { color: var(--ds-color-subtle, #737b84); font-size: .7rem; white-space: nowrap; }

@media (max-width: 1320px) {
    .development-terminal { display: none; }
}

@media (max-width: 960px) {
    .area-hero__content { grid-column: 1 / span 9; }
    .fitness-hero { padding-bottom: 10rem; }
    .fitness-jump-nav { right: var(--area-page-gutter); bottom: 4.7rem; }
    .area-related-card { grid-column: span 6; }
    .area-footer__identity { grid-column: span 5; }
    .area-footer__areas { grid-column: 6 / -1; }
}

@media (max-width: 760px) {
    :root { --ds-header-height: 4.4rem; --ds-gutter: 1.15rem; }
    [data-inline-layout-root] {
        --area-header-height: 4.4rem;
        --area-page-gutter: 1.15rem;
        --area-content-gutter: 1rem;
        --area-hero-top: clamp(2.25rem, 5vh, 3.5rem);
        --area-hero-bottom: 5.5rem;
        --area-title-size: clamp(2.45rem, 10.2vw, 3.8rem);
        --area-section-title-size: clamp(1.9rem, 8vw, 3rem);
    }
    body.inline-editor-active [data-inline-layout-root] { --area-page-offset: 4.25rem; }
    body.is-preview [data-inline-layout-root] { --area-page-offset: 3.7rem; }

    .area-hero {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        min-height: calc(100svh - var(--area-header-height) - var(--area-page-offset));
        padding-bottom: var(--area-hero-bottom);
    }
    @supports (height: 100dvh) {
        .area-hero { min-height: calc(100dvh - var(--area-header-height) - var(--area-page-offset)); }
    }
    .area-hero__content { grid-column: 1 / -1; width: 100%; padding-left: .9rem; }
    .area-hero__lead { font-size: clamp(1rem, 4.35vw, 1.2rem); }
    .area-hero__intro { font-size: .95rem; line-height: 1.62; }
    .area-hero .area-hero__scroll { right: 1.15rem; bottom: max(.9rem, env(safe-area-inset-bottom)); }
    .area-hero .area-hero__scroll span { font-size: .56rem; }

    .area-section__heading { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; margin-bottom: 2rem; }
    .area-section__heading > span { grid-column: 1 / span 1; padding-top: .35rem; }
    .area-section__heading > :is(h2, div) { grid-column: 2 / -1; }

    .fitness-hero { padding-bottom: 9.5rem; }
    .fitness-jump-nav { left: 1.15rem; right: 1.15rem; bottom: 4.25rem; }
    .fitness-jump-nav a { padding: .56rem .66rem; }

    .contact-availability-wrap { width: calc(100% - 2rem); margin-top: -1.5rem; }
    .area-related-card { grid-column: 1 / -1; min-height: 13.5rem; }

    .area-footer { width: calc(100% - 2rem); }
    .area-footer__main { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem; padding: 2rem 1.25rem; }
    .area-footer__identity,
    .area-footer__areas { grid-column: 1 / -1; }
    .area-footer__areas { grid-template-columns: 1fr 1fr; }
    .area-footer__bottom { align-items: flex-start; flex-direction: column; padding-inline: 1.25rem; }
    .area-footer__meta { white-space: normal; }
}

@media (max-width: 430px) {
    .area-footer__areas { grid-template-columns: 1fr; }
}

@media (max-height: 700px) and (min-width: 761px) {
    .area-hero { padding-top: 2.4rem; padding-bottom: 5.4rem; }
    .area-hero .area-hero__title { font-size: clamp(2.75rem, 5vw, 4.6rem); }
    .area-hero__lead { margin-top: .9rem; }
    .area-hero__intro { margin-top: .65rem; line-height: 1.5; }
    .fitness-hero { padding-bottom: 7.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .area-hero .area-hero__scroll i { animation: none; }
    .area-related-card__media { transition: none; }
}


/* v0.19.4: mobile rendering stability for fixed surfaces and decorative motion. */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
    :is(
        .person-topbar,
        .development-topbar,
        .projects-topbar,
        .photography-topbar,
        .fitness-topbar,
        .contact-topbar,
        .search-topbar
    ).is-scrolled,
    .is-preview :is(
        .person-topbar,
        .development-topbar,
        .projects-topbar,
        .photography-topbar,
        .fitness-topbar,
        .contact-topbar,
        .search-topbar
    ) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(6, 9, 13, .97);
    }

    .area-footer {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(8, 11, 15, .98);
    }

    .contact-page::before {
        display: none;
    }

    :is(
        .search-scroll-cue i,
        .person-scroll-cue i,
        .development-scroll-cue i,
        .photography-scroll-cue i,
        .projects-scroll-cue i,
        .fitness-scroll-cue i,
        .contact-orbit i:nth-child(2),
        .fitness-live-pulse
    ) {
        animation: none;
    }

    :is(
        .area-related-card__media,
        .development-related-media,
        .photography-card-media,
        .photography-selection-item img,
        .photography-related-media,
        .photography-masonry-item img,
        .fitness-featured-media,
        .fitness-article-media,
        .fitness-related-media,
        .projects-related-media,
        .project-gallery-item img,
        .contact-related-media
    ) {
        transition-property: transform, opacity;
    }
}