.rotate-ccw { 
    animation: rotateCCWAnimation 120s linear infinite, pulsateAnimation 6s linear infinite;
}
.rotate-cw { 
    animation: rotateCWAnimation 120s linear infinite, pulsateAnimation 6s linear infinite;
}

@keyframes rotateCCWAnimation {
    from { transform: rotate(0deg) rotate(0) }
    to   { transform: rotate(0deg) rotate(-360deg) }
}
@keyframes rotateCWAnimation {
    from { transform: rotate(0deg) rotate(0deg) }
    to   { transform: rotate(360deg) rotate(0deg) }
}
@keyframes pulsateAnimation {
    from { opacity: 1.00; }
    40%  { opacity: 0.80; }
    50%  { opacity: 0.66; }
    60%  { opacity: 0.80; }
    to   { opacity: 1.00; }
}

.wooh-background-change {
    animation: woohColorChangeAnimation 4s ease-in-out infinite;
}
@keyframes woohColorChangeAnimation {
    0%   { background: var(--baseDark); outline-color: var(--baseLight); }
    50%  { background: var(--baseDarker); outline-color: var(--baseDarker); } 
    100% { background: var(--baseDark); outline-color: var(--baseLight); }
}


:root {

    --red: #ed1f24;
    --greyF8F8F8: #f8f8f8;
    --imprint-email1: "awi";
    --imprint-email2: "de";

    header {
        padding-inline: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(auto, 735px)); /* 2 x 735px = 1470px cap */
        grid-template-areas:
            "header-logo header-nav";
        align-items: center;
        justify-content: center; /* center the grid tracks inside the full-width header */
        position: sticky;
        top: 0;
        z-index: 1015;
        background-color: var(--baseDarker);
        height: var(--headerHeight);
        box-shadow: 0 5px 5px 0 rgba(0,0,0,0.25);
        transition: height 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
    }

    #header-logo {
        grid-column: 1;
        justify-self: start;
    }

    #header-nav {
        grid-column: 2;
        justify-self: end;
        padding-right: 0;
    }

    #header-logo img {
        padding-left: 0.25em;
        height: 60px;
        padding-top: 5px;
        transition: opacity 0.5s,height 0.25s ease, padding-top 0.25s ease;
    }

    article {
        height: auto;
        min-height: 100vh;
        background-color: var(--greyF8F8F8);
    }
    main {
        overflow: visible;
    }
    main#mainFullPage::before {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-image: none;  
        background-color: transparent;      
        filter: none;
        z-index: -2;
        pointer-events: none;
    }
    main#mainFullPage::after {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-image: none; 
        background-color: transparent; 
        opacity: 1;
        z-index: -1;
        pointer-events: none;
    }
    #mainFullPage #contentWrapperFullPage {
        background-color: white;
    }

    /* Allow footer to size to its content instead of a fixed height */
    footer {
        height: auto;
        min-height: 0;
        padding: 0.75em 0 2.25em 0;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(3, minmax(auto, 490px)); /* match header max content width */
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "footer-slogan footer-slogan footer-slogan"
            "footer-col-1 footer-col-2 footer-col-3";
        justify-content: center;
        justify-items: stretch;
        align-items: start;        
        row-gap: 0.5rem;
        background-color: var(--baseDarker);
        background-image:
            linear-gradient(
                to bottom,
                rgb(77, 77, 77) 0%,
                rgb(77, 77, 77) 20%,
                rgba(77, 77, 77, 0.80) 80%,
                rgba(77, 77, 77, 0.60) 100% 
            ),
            url("../pics/photos/Eppinger_TUM_Herschel-Island-Yukon-Canada_2022_Polygon-Field.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    

    .gtnp-email-part1::after {
        content: "\0040" var(--imprint-email1);
    }
    .gtnp-email-part2::before {
        content: ".";
    }
    .gtnp-email-part2::after {
        content: var(--imprint-email2);
    }


    /* Make footer logos white; skip opt-out class */
    footer .footer-col.c2 img:not(.keep-color),
    footer .footer-col.c3 img:not(.keep-color) {
        filter: brightness(0) invert(1);
    }

    footer img {        
        transition: opacity 0.5s;
    }
    footer img:hover {
        opacity: 0.66;
    }  
    
    /* slogan spans all columns */
    footer .footer-slogan {
        grid-area: footer-slogan;
        padding: 0 2rem 0.5rem 2rem;
        font-size: 1.1rem;
        line-height: 1.5;
        font-weight: var(--font-semi-bold);
        text-align: center;
        color: var(--whiteYellow);
        border-bottom: solid 4px var(--red);
    }

    /* three footer elements */
    footer .footer-col {
        margin-top: 2rem;
        padding: 0 1rem 1rem 2rem;
        align-self: stretch;
    }
    footer .footer-col.c1 {
        grid-area: footer-col-1;
        padding: 0 2rem 1rem 2rem;
    }
    footer .footer-col.c2 {
        grid-area: footer-col-2;
        padding: 0 2rem 1rem 2rem;        
        border-left: solid 4px var(--whiteYellow);        
        border-right: solid 4px var(--whiteYellow);
        text-align: center;
    }
    footer .footer-col.c3 {
        grid-area: footer-col-3;
        padding: 0 2rem 1rem 2rem;
        text-align: right;
    }
    
    footer p {
        color: var(--whiteYellow);
    }
    footer .footer-col p {
        margin-top: 0;
    }

    footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    footer ul  li {
        margin: 0 0 1rem 0;
    }
    footer ul li a {
        font-size: 1.4rem;
        color: var(--whiteYellow);
        text-decoration: none;
        font-weight: bold;
        border-bottom: none;
        transition: border-color 0.25s ease;
    }
    footer ul li a:hover,
    footer ul li a:focus {
        text-decoration: none;
        border-bottom: solid 2px var(--red);
    }

    /* Compact state driven by JS */
    header.header--compact,
    body.scrolled header {
        height: 3rem;
        box-shadow: 0 3px 4px rgba(0,0,0,0.25);
        grid-template-columns: repeat(2, minmax(auto, 735px)); /* keep centered max-width layout */
        justify-content: center;
        align-items: stretch;
    }
    header.header--compact #header-logo img,
    body.scrolled #header-logo img {
        height: 40px !important;
        padding-top: 4px !important;
        padding-left: 0.25rem !important;
        transition: opacity 0.5s, height 0.25s ease, padding-top 0.25s ease;
    }
    header.header--compact #header-controls,
    header.header--compact #header-nav,
    header.header--compact #header-logo,
    body.scrolled #header-controls,
    body.scrolled #header-nav,
    body.scrolled #header-logo {
        align-self: stretch;
    }
    header.header--compact #header-nav,
    body.scrolled #header-nav {
        position: static;
        height: 100%;
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
    }
    header.header--compact #header-nav ul,
    body.scrolled #header-nav ul {
        height: 100%;
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        margin: 0;
    }
    header.header--compact #header-nav li,
    body.scrolled #header-nav li {
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
    }
    header.header--compact #header-nav li a,
    body.scrolled #header-nav li a,
    header.header--compact #header-nav li button,
    body.scrolled #header-nav li button {
        height: 3rem;
        line-height: 3rem;
        padding: 0 0.75em;
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin: 0;
        border: 0;
        transition:
            text-decoration-color 0.25s ease,
            background-color 0.5s ease,
            height 0.25s ease,
            line-height 0.25s ease,
            padding 0.25s ease;
    }


    /* Smooth transitions without overriding base link effects */
    #header-nav ul li a,
    #header-nav ul li button {
        transition:
            text-decoration-color 0.25s ease,
            background-color 0.5s ease,
            height 0.25s ease,
            line-height 0.25s ease,
            padding 0.25s ease;
    }

    #mainFullPage #contentWrapperFullPage  {
        padding: 0;
    }
    #mainFullPage #contentWrapperFullPage .outer img {
        background-color: var(--greyDDD);
    }

    #mainFullPage #contentWrapperFullPage .inner {
        padding: 1rem 2rem;
    }

    /* When a .outer class exists before the .inner class */
    #mainFullPage #contentWrapperFullPage .outer ~ .inner {
        padding: 0.5rem 2rem 1rem 2rem;
    }

    .outer .fullimage-wrapper {
        height: 47vh;
        overflow: hidden; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        width: 100%;
    }
    .outer img.fullimage {
        width: 100%; 
        height: 100%;
        object-fit: cover; 
        display: block; 
    }    
    /* Optional top-align variant to crop from bottom only */
    .outer img.fullimage.crop-from-bottom {
        object-position: center top;
    }
    .outer img.fullimage.crop-from-bottom-fourth {
        object-position: center 25%;
    } 
    .outer img.fullimage.crop-from-top {
        object-position: center bottom;
    }
    .outer .caption {
        font-size: 0.95em;
        color: var(--grey777);
        text-align: right;
        margin-top: 0.5rem;
        padding-right: 0.75rem;
        font-weight: var(--font-semi-bold);
    }

    /* Reusable floating media block with caption */
    .float-media {
        margin: 0 0 1rem 1.5rem;
    }
    .float-media.float-right {
        float: right;
        margin-left: 1.5rem;
        margin-right: 0;
    }
    .float-media.float-left {
        float: left;
        margin-right: 1.5rem;
        margin-left: 0;
    }
    .float-media img  {
        width: 100%;
        height: auto;
        display: block;        
        box-shadow: 0 0 5px 0 var(--black-20);
        border-radius: 6px;
        border: solid 3px white;
    }
    .float-media img.noshadow {
        box-shadow: none;
        border-radius: none;
        border: none;
    }
    .float-media .caption {
        font-size: 0.95em;
        color: var(--grey777);
        text-align: center;
        margin-top: 0.35rem;
        padding-right: 0;
        margin-bottom: 0 !important;
    }
    /* Utility to clear floated media blocks */
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
    .right-column .float-media img {
        width: 80%;
        height: auto;
        margin: 0.25rem 10% 0 10%;
        box-shadow: 0 0 5px 0 var(--black-10);
        border-radius: 6px;
        border: solid 3px white;
    }
    .right-column .float-media {
        margin: 0;
    }

    /* Side-by-side person block: photo left, text right */
    .person-entry {
        display: flex;
        gap: 1.5rem;
        align-items: flex-start;
        margin: 0 0 1.5rem 0;
        padding: 1.5rem;
        background: white;
        border: 1px solid var(--greyE8E8E8);
        box-shadow: 0 0 5px 0 var(--black-10);
        border-radius: 4px;
    }
    .person-entry.grey-background {
        background-color: var(--greyF8F8F8);
    }
    .person-entry img.profile-photo {
        width: 190px;
        height: auto;
        max-width: 100%;
        border-radius: 100%;
        border: solid 4px white;
        box-shadow: 0 0 5px 0 var(--black-10);
        transition: all 0.5s ease;
    }
    .person-entry img.profile-photo:hover {
        box-shadow: 0 0 5px 0 var(--black-20);
        border: solid 4px var(--red);
    }
    .person-entry .person-body p {
        margin: 0 0 0.4rem 0;
    }
    .inner .caption {
        font-size: 1em;
        color: var(--grey777);
        text-align: left;
        margin: 0.5rem 0 1.5rem 0;
        font-weight: var(--font-semi-bold);
    }

    /* sub navigation (project) */
    #nav-sub {
        margin: 0.5rem 1rem 2rem 1rem;
        border-top: solid 4px var(--red);
        padding-top: 1rem;
        border-bottom: solid 4px var(--red);
        padding-bottom: 1rem;
    }
    #nav-sub ul {
        list-style-type: none;
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin: 0;
        padding: 0;
        font-size: 1.5rem;
        font-weight: var(--font-semi-bold);
    }
    #nav-sub li {
        display: inline-block;
    }
    #nav-sub a {
        text-decoration: none;
        display: block;
        padding: 8px 14px; 
        transition: background-color 0.3s, color 0.3s;
        color: var(--text);
        border-radius: 0.5rem;
        background-color: var(--greyDDD);
    }
    #nav-sub a.current:hover {
        background-color: var(--greyDDD);
        color: var(--text);
    }
    #nav-sub a:hover, #nav-sub a.current {
        background-color: var(--red);
        color: white;
    }

    #nav-sub hr {
        margin: 1rem 10% 2rem 10%;
        border-top: 3px solid var(--text);
    }

    .link-button a {
        text-decoration: none;
        padding: 8px 14px;
        transition: background-color 0.3s, color 0.3s;
        color: var(--text);
        border-radius: 0.5rem;
        background-color: var(--greyDDD);
        font-weight: var(--font-semi-bold);
    }
    .link-button a:hover {
        background-color: var(--red);
        color: white;
    }
    p.link-button {
        margin-top: 0.5rem; 
        margin-bottom: 1.75rem;
    }
    .right-column p.link-button {
        text-align: center;
        margin-top: 1.5rem;
    }


    /* Two-column layout inside .inner */
    .inner .columns.two-columns {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* 2/3 left, 1/3 right */
        gap: 2rem;
        /*align-items: start;
        padding: 1rem 0;*/
    }
    .inner .columns.two-columns.equal-width {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* equal width columns */
    }

    .inner .columns.two-columns > * {
        min-width: 0; /* allow content to shrink without overflow */
    }

    .inner .columns.two-columns > .left-column,
    .inner .columns.two-columns > .right-column {
        padding: 0.25rem 1.5rem 0.25rem 1.5rem;
        margin-bottom: 1rem;
        box-shadow: 0 0 5px 0 var(--black-10);
        border: solid 1px var(--greyE8E8E8);
        border-radius: 4px;
        background-color: var(--greyF8F8F8);
    }

    /* Three-column layout inside .inner */
    .inner .columns.three-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); /* 3 equal columns */
        gap: 2rem;
        /*align-items: start;
        padding: 1rem 0;*/
    }
    .inner .columns.three-columns.equal-width {
        /* grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);  equal width columns */
    }

    .inner .columns.three-columns > * {
        min-width: 0; /* allow content to shrink without overflow */
    }

    .inner .columns.three-columns > .left-column,
    .inner .columns.three-columns > .center-column,
    .inner .columns.three-columns > .right-column {
        padding: 0.25rem 1.5rem 0.25rem 1.5rem;
        margin-bottom: 1rem;
        box-shadow: 0 0 5px 0 var(--black-10);
        border: solid 1px var(--greyE8E8E8);
        border-radius: 4px;
        background-color: var(--greyF8F8F8);
    }


    /* Reusable cards grid (2x2, collapses on mobile) */
    .info-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        margin: 1.5rem 0;
    }
    .info-card {
        background: white;
        border: 1px solid var(--greyE8E8E8);
        border-left: solid 4px var(--red);
        box-shadow: 0 0 5px 0 var(--black-10);
        border-radius: 4px;
        padding: 1rem 1.25rem;
        transition: background-color 0.3s ease;
    }
    /* Person card: reuse info-card shell with a flex row layout */
    .info-card:hover {
        background-color: var(--greyF8F8F8);
    }
    .info-card h3 {
        margin: 0.75rem 0 0 0;
    }

    /* Number cards: 3-up flex grid with circular counts */
    #gtnp-numbers {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 1.5rem 1.25rem;
        margin: 1.75rem 0 2.5rem 0;
    }

    #gtnp-numbers .number-card {
        flex: 1 1 calc(33.333% - 1.25rem);
        max-width: 320px;
        min-width: 220px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        text-align: center;
    }

    #gtnp-numbers .number-card h3 {
        margin: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 2.4rem;
        font-weight: var(--font-bold, 800);
        line-height: 1;
        color: var(--baseDark);
        background: var(--greyF8F8F8);
        box-shadow: 0 0 7px white;
        border: solid 4px white;
        transition: box-shadow 0.3s ease;
    }
    #gtnp-numbers .number-card h3:hover {
        box-shadow: 0 0 7px var(--greyCCC);
    }

    #gtnp-numbers .number-card h4 {
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.4;
        font-weight: var(--font-semi-bold);
    }

    /* Pastel palette; cycle for a soft "random" mix */
    #gtnp-numbers .number-card:nth-child(6n + 1) h3 { background: rgba(251, 180, 174, 0.85); }
    #gtnp-numbers .number-card:nth-child(6n + 2) h3 { background: rgba(179, 205, 227, 0.85); }
    #gtnp-numbers .number-card:nth-child(6n + 3) h3 { background: rgba(204, 235, 197, 0.85); }
    #gtnp-numbers .number-card:nth-child(6n + 4) h3 { background: rgba(222, 203, 228, 0.85); }
    #gtnp-numbers .number-card:nth-child(6n + 5) h3 { background: rgba(254, 217, 166, 0.85); }
    #gtnp-numbers .number-card:nth-child(6n + 6) h3 { background: rgba(255, 255, 204, 0.85); }

    h1 {
        font-size: 2.1em;  
        margin-top: 0;     
    }
    h2 {
        font-size: 1.6em;
        margin-top: 1.5em;
    }
    h3 {
        font-size: 1.4em;
        margin-top: 1em;
    }
    h4 {
        font-size: 1.2em;
        margin-top: 1em;
    }
    h1.doubleline, h2.doubleline, h3.doubleline, h4.doubleline {        
        border-bottom: 4px solid var(--red);
        border-top: 4px solid var(--red);
        border-radius: 4px;
        padding: 4px 0.75rem 6px 0.75rem;
        margin-top: 1.25rem;
        background-color: white !important;
        margin-top: 3rem !important;
    }
    :is(h1, h2, h3, h4).doubleline:not(:is(.columns *)) {
        background-color: var(--greyF8F8F8) !important;
    }
    h1.line, h2.line, h3.line, h4.line {
        border-bottom: 4px solid var(--red);
        padding: 0 0 6px 0;
    }
    .columns h1 {
        padding-top: 1.5rem;
    }
    .columns h2:first-of-type {
        margin-top: 1.5rem;
    }

    p {
        font-size: 1.2em;
        line-height: 1.6;
    }
    .news-meta {
        font-variant: small-caps;
        letter-spacing: 0.05em;
        color: var(--grey777);
        font-weight: var(--font-semi-bold);
        margin-bottom: 0;
        font-size: 1.2em;
    }
    .news-meta + p {
        margin-top: 0.5rem;
    }
    .news-date {
        color: var(--grey777);
        font-weight: var(--font-semi-bold);
    }

    a {
        color: var(--red);
        font-weight: var(--font-semi-bold);
    }
    a:hover,
    a:focus {
        text-decoration-color: var(--red);
    }

    .more {
        font-weight: var(--font-semi-bold);
        white-space: nowrap;
    }
    .right-column hr, .inner hr {
        border-top: 4px solid var(--red)
    }

    .highlight-box {
        font-weight: var(--font-semi-bold);
        color: var(--baseDarker);
        background: white;
        border: 5px solid var(--red);
        padding: 1rem 1rem 1rem 1rem;
        margin: 1.5rem 0;
        box-shadow: 3px 3px 5px var(--black-10);
        border-radius: 4px;
    }
    .highlight-box p {
        margin: 0 0 1rem 0;
    }
    p.highlight {
        font-size: 1.5rem;
        font-style: italic;
        font-weight: var(--font-semi-bold);
        color: var(--baseDarker);
        background: white;
        border-left: 5px solid var(--red);
        padding: 1.75rem 1rem 1.75rem 1.5rem;
        margin: 1.75rem 0;
        box-shadow: 3px 3px 5px var(--black-10);
        border-radius: 4px;
    }

    a.gtnp-platform {
        color: var(--baseLight);        
        font-size: 140%;
        font-weight: 700;
        border-top: solid 3px var(--highlightRed);
        border-bottom: solid 3px var(--highlightRed);
        padding: 2px 0;
        text-transform: uppercase;
        text-decoration: none;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
    }
    a.gtnp-platform:hover {
        color: white;
        text-decoration: none;
        border-top: solid 3px var(--baseLight);
        border-bottom: solid 3px var(--baseLight);
    }

    cite {
        font-size: 0.85em;
        font-variant: small-caps;
        font-style: normal;
    }
    cite a {
        font-weight: normal;
    }

    .inner ul, .inner ol {
        font-size: 1.2em;
        line-height: 1.6;
        margin-top: 0;
        color: var(--text);
    }
    .inner li {
        list-style-type: square;
    }
    .references cite {
        font-style: normal;
        font-variant: normal;
        font-size: 0.9em;
    }
    ol.references  {
        padding-inline-start: 1rem;
        margin-left: 0;
    }
    .references li {
        padding-bottom: 0.5rem;
        font-size: 0.9em;
    }
    
    .inner li::marker {
        color: var(--red);
    }

    #gtnp-maps {
        position: relative;
        min-height: 320px;
    }
    #gtnp-maps img {
        -webkit-filter: drop-shadow(0 0 7px white);
        filter: drop-shadow(0 0 7px white);
        position: relative;
        display: block;
        transition: -webkit-filter 0.3s ease;
        transition: filter 0.3s ease;
    }
    #gtnp-maps img:hover {
        -webkit-filter: drop-shadow(0 0 5px var(--greyCCC));
        filter: drop-shadow(0 0 5px var(--greyCCC));
        cursor: pointer;
    }
    #gtnp-maps img.north {
        width: 62%;
        max-width: 640px;
        position: relative;
        z-index: 1;
    }
    #gtnp-maps img.south {
        width: 40%;
        max-width: 360px;
        position: absolute;
        right: 0;
        top: 38%; /* sit lower and overlap */
        z-index: 2;
        transform: translateY(-10%);
    }

    .fly-in {
        opacity: 0;
        transition: opacity 1s ease-out, transform 1s ease-out;
        will-change: opacity, transform;
    }
    .fly-in.left {
        transform: translateX(-100px);
    }
    .fly-in.right {
        transform: translateX(100px); 
    }
    .fly-in.bottom {
        transform: translateY(100px); 
    }
    .fly-in.top {
        transform: translateY(-100px); 
    }
    .fly-in.visible {
        opacity: 1;
        transform: translateX(0); 
    }

    /* Disable fly-in transforms on mobile to prevent horizontal overflow */
    @media (max-width: 750px) {
        .fly-in.left,
        .fly-in.right {
            transform: translateX(0);
        }
        .fly-in.visible {
            transform: translateX(0);
        }
    }

    abbr::after {
        content: '';
        display: none;
    }


    @media (max-width: 1500px) {
        #header-logo {
            padding-left: 1rem;
        }
        #header-nav {
            padding-right: 1.5rem;
        }
    }

    @media (max-width: 1250px) {
        .three-columns .person-entry {
            display: block;
        }
    }

    @media (max-width: 1100px) {
        #header-logo {
            padding-left: 0;
        }
        #header-nav {
            padding-right: 0;
        }
        #header-nav ul li a {
            font-size: 1.6rem;
            padding: 0 1.5rem;
        }        
        .outer .caption {
            font-size: 0.85em;
            margin-top: 0.25rem;
            padding-right: 0.5rem;
        }
        .inner .columns.two-columns {
            grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        }
        .inner .columns.three-columns {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        }
        .three-columns .person-entry img.profile-photo {
            width: 140px;
        }
        
        h1 {
            font-size: 1.6rem;       
        }
        h2 {
            font-size: 1.4rem;
            margin-top: 0.75em;
        }
        h3 {
            font-size: 1.2rem;
            margin-top: 1em;
        }
        h4 {
            font-size: 1.1rem;
            margin-top: 1em;
        }
        p, .inner ul, .news-meta {
            font-size: 1.1rem;
            line-height: 1.5;
        }
        p.highlight {
            font-size: 1.3rem;
        }

        #gtnp-numbers {
            gap: 1.25rem 1rem;
        }
        #gtnp-numbers .number-card {
            flex: 1 1 calc(50% - 1rem);
        }
        #gtnp-numbers .number-card h3 {
            width: 175px;
            height: 175px;
            font-size: 2.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    }

    @media (max-width: 925px) {
        .outer .fullimage-wrapper {
            height: 40vh;
        }
        #header-logo img#logo-gtnp {
            height: 60px;
        }
        .person-entry img.profile-photo {
            width: 140px;
        }
        .person-entry {
            display: block;
        }
        .inner .columns.two-columns {
            grid-template-columns: 1fr;
            grid-template-areas:
                "left-column"
                "right-column";
        }
        .inner .columns.two-columns.right-on-mobile-first {
            grid-template-columns: 1fr;
            grid-template-areas:
                "right-column"
                "left-column";
        }

        .inner .columns.two-columns > .left-column {
            grid-area: left-column;
        }
        .inner .columns.two-columns > .right-column {
            grid-area: right-column;
        }
        .inner .columns.two-columns > .right-column {
            border-left: 1px solid var(--greyDDD);
            padding-left: 1.25rem;
        }

        .inner .columns.three-columns {
            grid-template-columns: 1fr;
            grid-template-areas:
                "left-column"
                "center-column"
                "right-column";
        }

        .inner .columns.three-columns > .left-column {
            grid-area: left-column;
        }
        .inner .columns.three-columns > .center-column {
            grid-area: center-column;
        }
        .inner .columns.three-columns > .right-column {
            grid-area: right-column;
        }
        .inner .columns.three-columns > .right-column {
            border-left: 1px solid var(--greyDDD);
            padding-left: 1.25rem;
        }
        #header-nav ul li a {
            padding: 0 1.25rem;
        }

        .float-media,
        .float-media.float-right {
            float: none;
            margin: 1rem auto;
            max-width: 100%;
        }
        .float-media .caption {
            text-align: center;
        }

        /* Stack sub navigation vertically on medium screens */
        #nav-sub ul {
            flex-direction: column;
            align-items: stretch;
            gap: 0.5rem;
        }
        #nav-sub li {
            width: 100%;
        }
        #nav-sub a {
            text-align: center;
            
        }
    }

    @media (max-width: 750px) {
        .outer .caption {
            font-size: 0.8em;
        }
        h1 {
            font-size: 1.5rem;
            margin-top: 0.75em;
        }
        h2 {
            font-size: 1.3rem;
            margin-top: 0.75em;
        }
        h3 {
            font-size: 1.1rem;
            margin-top: 1em;
        }
        h4 {
            font-size: 1.1rem;
            margin-top: 1em;
        }
        p, .inner ul, .news-meta {
            font-size: 1.1rem;
            line-height: 1.5;
        }
        p.highlight {
            font-size: 1.3rem;
            padding: 1rem 0.75rem 1rem 1.25rem;
            margin: 1.5rem 0;
        }
        
        .inner .columns.two-columns > .left-column, .inner .columns.two-columns > .right-column{
            padding: 0.25rem 1rem 0.25rem 1rem;
        }
        .inner .columns.two-columns {
            gap: 0.5rem;
        }   
        .inner .columns.two-columns.right-on-mobile-first  {
            grid-template-columns: 1fr;
            grid-template-areas:
                "right-column"
                "left-column";
        }
        .inner .columns.two-columns.equal-width {
            grid-template-columns: 1fr;
        }
        .inner .columns.two-columns > .left-column {
            grid-area: left-column;
        }
        .inner .columns.two-columns > .right-column {
            grid-area: right-column;
        }

        .inner .columns.three-columns > .left-column, .inner .columns.three-columns > .center-column, .inner .columns.three-columns > .right-column {
            padding: 0.25rem 1rem 0.25rem 1rem;
        }
        .inner .columns.three-columns {
            gap: 0.5rem;
        }

        .inner .columns.three-columns.equal-width {
            grid-template-columns: 1fr;
        }
        .inner .columns.three-columns > .left-column {
            grid-area: left-column;
        }
        .inner .columns.three-columns > .center-column {
            grid-area: center-column;
        }
        .inner .columns.three-columns > .right-column {
            grid-area: right-column;
        }
        .inner  {
            padding: 0;
        }     
        #mainFullPage #contentWrapperFullPage .outer ~ .inner {
            padding: 0.5rem 1rem 0.66rem 1rem;
        }
        #header-nav ul li a {
            padding: 0;
        }
        #header-nav ul li a {
            font-size: 1.4rem;
        }
        
        #gtnp-numbers {
            gap: 1rem;
        }
        #gtnp-numbers .number-card {
            flex: 1 1 100%;
            max-width: 100%;
            min-width: 0;
        }
        #gtnp-numbers .number-card h3 {
            width: 150px;
            height: 150px;
            font-size: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #gtnp-numbers .number-card h4 {
            font-size: 1rem;
        }
        
        .person-entry {
            flex-direction: column;
            align-items: flex-start;
        }

        #gtnp-maps {
            min-height: 0;
        }
        #gtnp-maps .caption {
            padding-top: 1rem;
        }

        /* Keep burger visible and nav hidden when header shrinks */
        header.header--compact #menu-toggle,
        body.scrolled header #menu-toggle {
            display: block;
            position: relative;
            top: 13px; /* nudge down inside compact header */
        }
        header.header--compact #header-nav,
        body.scrolled #header-nav {
            display: none;
            position: absolute;
            top: 14.9rem; /* align dropdown just below compact header */
            right: 0;
            background: var(--baseDarker);
            width: 170px;
            box-shadow: 0 5px 5px rgba(0,0,0,0.3);
        }
        header.header--compact #header-nav.show,
        body.scrolled #header-nav.show {
            display: block;
        }
        header.header--compact #header-nav ul,
        body.scrolled #header-nav ul {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        header.header--compact #header-nav li,
        body.scrolled #header-nav li {
            width: 100%;
            text-align: right;
            background-color: var(--baseDarker);
        }
        header.header--compact #header-nav li a,
        body.scrolled #header-nav li a,
        header.header--compact #header-nav li button,
        body.scrolled #header-nav li button {
            width: 100%;
            padding: 0.75rem 1rem;
            text-align: right;
        }

        /* Stack footer areas vertically on small screens */
        footer {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto;
            grid-template-areas:
                "footer-slogan"
                "footer-col-1"
                "footer-col-2"
                "footer-col-3";
            padding: 0.75em 0 0.25em 0;
        }
        footer .footer-col.c1, footer .footer-col.c3 {
            text-align: center;
        }
        footer .footer-col.c2 {
            border-left: none;
            border-right: none;
        }
        footer .footer-col {
            margin-top: 0;
        }
        footer .footer-col.c1, footer .footer-col.c2 {
            padding: 1rem 2rem 0.5rem 2rem;
        }

        .info-cards {
            grid-template-columns: 1fr;
        }
        
    }

}