/* ---------------------------------------------------------------
   One-pager layout for Juergen List's solo page.
   Kept separate from styles.css (which still holds the shared
   header/footer/toggle-list/box/citation styles) so this can be
   revised independently while content is still being finalised.
--------------------------------------------------------------- */

html {
    scroll-padding-top: 94px;
}

/* styles.css sets a 14px base; headings/etc are sized in em off of
   that, so bumping this up scales the whole site to a normal
   reading size instead of overriding sizes one by one. */
body {
    font-size: 16px;
}

/* The shared .masthead rule pulls itself up under the fixed header
   (top:-100px) so the teaser image deliberately overlaps the logo -
   that clearance used to come from the old .container__main's
   margin-top:200px, which the one-pager doesn't have anymore since
   .jurgen-onepager replaced it. Reapply the same clearance here so
   the teaser sits below the header (including the un-shrunk, full
   size logo shown before the page is scrolled) instead of behind it. */
.masthead {
    top: 0;
    margin-bottom: 0;
    margin-top: 200px;
}

/* .header__logo's shared left:130px offset (styles.css, @850+) is a
   leftover from the old layout and doesn't line up with the actual
   content edge used by .contact/.container elsewhere on this page. */
@media (min-width: 850px) {
    .header__logo {
        left: 0;
    }
}

/* Likewise .mainmenu__wrapper .content__main just centers a fixed
   420px/663px column instead of spanning to the real container edge,
   so the right-aligned nav links fall well short of where the rest
   of the page's content/map actually ends. */
.mainmenu__wrapper .content__main {
    width: 100%;
    max-width: 1280px;
    box-sizing: border-box;
    padding: 35px 30px;
    margin: 0 auto;
}

.jurgen-onepager {
    max-width: 882px;
    margin: 0 auto;
    padding: 0 20px;
}

.jp-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: 60px 0 40px;
}

/* Below 850px .masthead (the teaser image, which normally clears the
   fixed header for everything after it) is display:none, so without
   this the hero would be the first in-flow content and would render
   right under/behind the fixed header's logo instead of below it. */
@media (max-width: 849px) {
    .jp-hero {
        padding-top: 200px;
    }
}

.jp-hero__image img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
}

.jp-hero__subtitle {
    font-weight: normal;
    color: #666;
    margin-top: -10px;
}

.jp-hero__intro {
    max-width: 640px;
    text-align: left;
}

.jp-section {
    padding: 40px 0;
    border-top: 1px solid #e4e5db;
}

.jp-section--alt {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
}

.jp-section--alt .jp-section__image img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
}

.jp-section--alt .jp-section__text {
    text-align: left;
    max-width: 640px;
}

@media (min-width: 850px) {
    .jp-hero {
        flex-direction: row;
        text-align: left;
        gap: 60px;
    }

    .jp-hero__image img {
        width: 280px;
        height: 280px;
    }

    .jp-hero__intro {
        max-width: none;
    }

    .jp-section--alt {
        flex-direction: row;
        text-align: left;
    }
}

/* The contact map's .content__left/.content__right columns come from
   the old two-person layout; .content__left here only ever held a
   decorative border image (removed from the markup) and .content__main
   had a hardcoded width (420px/663px) meant to leave room for it. Let
   the map fill that space instead of sitting in a narrow center strip. */
.contact .content__wrapper {
    flex: 1;
}

.contact .content__main {
    width: auto;
    flex: 1;
}

/* The contact section used to be a JS-toggled overlay (hidden by
   default, shown via .visible). On the one-pager it is just a
   normal in-flow section reached by anchor scroll. */
.contact-container {
    display: block;
    position: static;
    z-index: auto;
    background-color: transparent;
    padding-top: 40px;
}