/*
Theme Name: Paizo kai Mathaino
Author: Webits
Description: Custom theme for Paizo kai Mathaino
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paizokaimathaino
*/

/* #ANCHOR Resets */

@layer resets {

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

figure {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,h2,h3,p, ul, ol {
    margin-block: 0;
}

button {
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

}

/* #ANCHOR Variables */

@layer global {

:root {

    --color-white: hsl(0 0% 100%);
    --color-black: hsl(0 0% 0%);
    --color-aqua: #64C8C9;
    --color-aqua-dark: #449FAA;
    --color-aqua-darker: #2B6269;
    --color-aqua-light: #B3E4E5;
    --color-aqua-lighter: hsl(181, 49%, 90%);
    --color-brick-light: #FCEEE9;
    --color-brick: hsl(3, 61%, 75%);
    --color-brick-dark: #B65954;
    --color-gray: #E7F0F2;
    --color-gray-dark: #505050;
    --color-mud: #BDB8B0;
    --color-pink-orange: #F5C6B4;
    --color-yellow: hsl(42, 95%, 75%);
    --color-yellow-light: hsl(42, 95%, 82%);
    --color-yellow-lighter: hsl(42, 96%, 90%);
    --color-yellow-lightest: hsl(42, 30%, 97%);

    --theme-color-canvas: var(--color-white);
    --theme-color-ink: var(--color-gray-dark);
    --theme-color-ink-dark: var(--color-black);
    --theme-color-primary: var(--color-aqua);
    --theme-color-primary-dark: var(--color-aqua-dark);
    --theme-color-primary-darker: var(--color-aqua-darker);
    --theme-color-primary-light: var(--color-aqua-light);
    --theme-color-primary-lighter: var(--color-aqua-lighter);
    --theme-color-secondary: var(--color-brick);
    --theme-color-secondary-light: var(--color-brick-light);
    --theme-color-secondary-dark: var(--color-brick-dark);
    --theme-color-tertiary: var(--color-pink-orange);
    --theme-color-neutral: var(--color-gray);
    --theme-color-neutral-dark: var(--color-mud);
    --theme-color-accent: var(--color-yellow);
    --theme-color-accent-light: var(--color-yellow-light);
    --theme-color-accent-lighter: var(--color-yellow-lighter);
    --theme-color-accent-lightest: var(--color-yellow-lightest);

    --font-heading: 'BPkinder', sans-serif;
    --font-body: 'Commissioner', sans-serif;
    --font-alt: 'PF Universal', sans-serif;
    --font-ui: 'PF Universal', sans-serif;

    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    --spacing-xxxl: 7rem;

    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-lg: 2rem;
    --border-radius-xl: 3rem;
    
    --minimum-content-padding: 1.5rem;
    --content-max-width: 64rem;

    /* https://utopia.fyi/clamp/calculator?a=320,1024,52%E2%80%9480 */

    --font-size-h1: clamp(3.25rem, 2.3409rem + 4.5455vw, 5.25rem);

    --font-size-lg: 1.5rem;

    --block-spacing: var(--spacing-xxxl);

    --inner-gap: var(--spacing-lg);

    --svg-clouds-overlap: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzIyIDM3NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4yIiBkPSJNNjUxLjgyMiAzMDcuNjc2TDIwMC42MjEgMjYwLjU4MUwxLjY0Mzc2IDIzOS44MTJDLTguOTEzODQgMjE0LjI5NyA2NC43NDQ3IDE2MC4wMTQgMTI5LjU1NCAxNzIuNDEzQzEzMy4xMTUgMTIwLjIwMyAyMjkuNjA4IDgyLjM4NzQgMjY3LjM1MyAxMDkuODAxQzI3Mi4yMDEgNjMuMzU5MiAzMDAuOTU1IDI4LjgwMjIgMzYyLjk1NiAzNS4yNzM3QzQ0Mi4zNiA0My41NjE3IDQ1MC4yMTIgNjcuODU1MiA0NjkuMTMyIDEzMC44NjJDNDcwLjI5NiAxMTkuNzE2IDUxMi41MDUgODguNDQxNiA1NDYuODQ1IDkyLjAyNTlDNjE2Ljg3NiA5OS4zMzU1IDYxMS4zMSAxNzEuMDU0IDYwNC4zMyAyMzcuOTMxQzYzNS41MzQgMjUwLjIwMiA2NDguOTkzIDI4OS41NDEgNjUxLjgyMiAzMDcuNjc2WiIgZmlsbD0iIzY0QzhDOSIvPgo8cGF0aCBkPSJNNzAyLjkxOCAzNzMuMTk4TDM3MS4wMzQgMzM4LjU1N0wyMjQuNjc2IDMyMy4yOEMyMTYuOTEgMzA0LjUxMyAyNzEuMDkgMjY0LjU4NCAzMTguNzYxIDI3My43MDRDMzIxLjM4MSAyMzUuMzAxIDM5Mi4zNTYgMjA3LjQ4NiA0MjAuMTIgMjI3LjY1QzQyMy42ODUgMTkzLjQ4OSA0NDQuODM2IDE2OC4wNzEgNDkwLjQ0MSAxNzIuODMxQzU0OC44NDcgMTc4LjkyNyA1NTQuNjIyIDE5Ni43OTYgNTY4LjU0IDI0My4xNDJDNTY5LjM5NSAyMzQuOTQzIDYwMC40NDIgMjExLjkzOSA2MjUuNzAxIDIxNC41NzVDNjc3LjIxMyAyMTkuOTUyIDY3My4xMTkgMjcyLjcwNSA2NjcuOTg1IDMyMS44OTZDNjkwLjkzNyAzMzAuOTIyIDcwMC44MzcgMzU5Ljg1OCA3MDIuOTE4IDM3My4xOThaIiBmaWxsPSIjRkJGNEYwIi8+Cjwvc3ZnPgo=");

    
}

@view-transition {
    navigation: auto;
}

/* #ANCHOR Global layout */

#main-page-content,
#global-footer {
    /** TRACK WIDTHS **/
  --full-max-width: 1fr;
  
  /** TRACK SIZES **/
  --full: minmax( var(--minimum-content-padding), 1fr );
  --content: min( var(--content-max-width), 100% - var(--minimum-content-padding) * 2 );
  
  display: grid;
  grid-template-columns: 
    [full-start]
    var(--full)
        [content-start]
        var(--content)
        [content-end]
    var(--full)
    [full-end];

    > * {
        grid-column: content;
    }
}

#main-page-content {
    row-gap: var(--block-spacing);
    overflow-x: clip;

    & > * {
        container-type: inline-size;
    }
}

/* #ANCHOR HTML tags */

    :root {
        scroll-behavior: smooth;

        @media (prefers-reduced-motion) {
            scroll-behavior: auto;
          }
    }

    h1, h2 {
        font-family: var(--font-heading);
        font-weight: bold;
        color: var(--theme-color-primary-dark);
    }

    h1 {
        font-size: var(--font-size-h1);
        line-height: 1.2;
    }

    h2 {
        font-size: calc(var(--font-size-h1) * 0.6);
        line-height: 1.3;
    }


/* #ANCHOR Global components */

/* menu breakpoint: 982px */

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--theme-color-ink);
    background-color: var(--theme-color-canvas);
    background-image: linear-gradient(to right, var(--theme-color-accent-lightest) 0%, transparent 25%, transparent 75%, var(--theme-color-accent-lightest) 100%);
    @media (width < 982px) {
        &:has(#global-nav-container.open) {
            overflow: hidden;
            &::after {
                content: "";
                position: fixed;
                inset: 0;
                background-color: var(--theme-color-primary-dark);
                z-index: 999;
                animation: fade-in 0.3s ease-out;
                opacity: 0.9;
            }
        }
    }
}

.btn {
    --btn-bg-color: var(--theme-color-accent);
    --btn-text-color: var(--theme-color-primary-darker);
    --btn-border-color: var(--theme-color-primary-dark);
    --btn-shadow-color: var(--theme-color-tertiary);
    filter: drop-shadow(0rem 0.3em 0 var(--btn-shadow-color));
    display: inline-block;
    border-radius: 1.5em;
    line-height: 1.3;
    padding-block: 1.4em;
    padding-inline: 2em;
    font-family: var(--font-ui);
    font-weight: bold;
    text-box: trim-both ex alphabetic;
    text-decoration: none;
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
    border: 0.1rem solid var(--btn-border-color);
    transition: all 0.1s ease-out;

    &:hover, &:focus {
       --btn-bg-color: color-mix(in oklab, var(--theme-color-secondary) 10%, var(--theme-color-accent));
       transform: translateY(0.1em);
       filter: drop-shadow(0rem 0.2em 0 var(--theme-color-tertiary));
    }
}

.btn-secondary {
    --btn-bg-color: var(--theme-color-primary-lighter);

    &:hover, &:focus {
        --btn-bg-color: color-mix(in oklab, var(--theme-color-primary) 10%, var(--theme-color-primary-lighter));
    }
}

@media (max-width: 982px) {

    .headroom {
        position: sticky;
        top: 0;
        z-index: 1000;
        transition: all 0.3s ease-out;
    }

    .headroom--not-top {
        opacity: 0;
        &.headroom--pinned {
            opacity: 1;
        }
    }
    

    .headroom--not-top.headroom--pinned:not(:has(#global-nav-container.open)) {
        background-color: var(--theme-color-canvas);
        box-shadow: 0 0.2em 2em color-mix(in srgb, var(--theme-color-neutral-dark), transparent 70%);
    }

    #global-header.headroom--not-top.headroom--pinned {
        inset-block-start: calc(var(--spacing-md) * -0.75);
        padding-block-end: calc(var(--spacing-md) * 0.5);
        margin-block-end: calc(var(--spacing-md) * 0.5);
    }

    .headroom--not-top.headroom--pinned:has(#global-nav-container.open) {
        #main-logo {
            opacity: 0;
        }
    }

    .headroom:has(#global-nav-container.open) {
        transition: none;
        background-color: color-mix(in srgb,var(--theme-color-primary-dark), white 10%);
    }
    
}



#global-header {
    padding-inline: var(--minimum-content-padding);
    margin-inline: auto;
    max-width: calc(var(--content-max-width) * 1.35);
    padding-block: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

#main-logo {
    width: clamp(10%, 17rem, 50%);
    aspect-ratio: 2.4;
    object-position: center 30%;
    object-fit: cover;
}

#main-logo__link {
    display: contents;
}

#global-nav-container {
    display: none;
    opacity: 0;
    position: fixed;
    z-index: 1000;
    inset-block: var(--spacing-md);
    inset-inline: var(--spacing-md);
    flex-direction: column;
    align-items: flex-end;
    padding: var(--spacing-md);
    border-radius: 2rem;
    transition: all 0.3s ease-out;
    transform-origin: top right;
    background-color: color-mix(in oklab, 
                                var(--theme-color-primary-light), 
                                var(--theme-color-canvas));
    &.open {
        display: flex;
        opacity: 1;
        animation: rotate-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        
        @starting-style {
            opacity: 0;
        }

        #global-nav {
            animation: fade-up 0.3s ease-out 0.2s;
            animation-fill-mode: backwards;
        }
    }

    @media (width >= 982px) {
        opacity: 1;
        display: flex;
    }
}


#global-nav-close {
    background-color: var(--theme-color-primary-light);
    line-height: 0;
    text-box: unset;
    padding: 1em;
    svg {
      width: 1.5em;
      aspect-ratio: 1;
    }
}

#global-nav-open {
    --btn-shadow-color: var(--theme-color-primary-dark);
    --btn-border-color: var(--theme-color-primary-darker);
    --btn-bg-color: var(--theme-color-canvas);
    --btn-color: var(--theme-color-primary-darker);
    text-transform: lowercase;
    padding: 0.85em 1.5em;
    transition: all 0.1s ease-out;

    
    body:has(#global-nav-container.open) & {
        opacity: 0;
        pointer-events: none;
    }
}

#main-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
    list-style-type: none;
    padding: 0;
    padding-block-start: var(--spacing-xl);

    a {
      display: block;
      text-decoration: none;
      border: 0.1rem solid currentColor;
      padding: 0.25em 1em;
      border-radius: var(--border-radius-md);
      color: var(--theme-color-primary-darker);
      background-color: var(--theme-color-canvas);
      font-family: var(--font-alt);
      font-weight: bold;

      &:hover, &:active {
        background-color: var(--theme-color-accent-light);
      }

      .current-menu-item & {
        background-color: var(--theme-color-accent);
      }

    }
}

@media (width>= 982px) {

    #global-nav-container {
        display: block;
        position: static;
        padding: 0;
        background-color: transparent;
    }

    #global-nav-open,
    #global-nav-close {
        display: none;
    }

    #main-menu {
        flex-direction: row;
        gap: var(--spacing-md);
        padding-block: 0;
    }

}

#page-header {
    --header-col-gap: var(--spacing-lg);
    --header-img-width: 40cqi;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--header-col-gap);

    &::before {
        content: "";
        position: absolute;
        aspect-ratio: 858/714;
        inset-block-end: -8rem;
        inset-inline-start: -25cqi;
        inline-size: 115%;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODU4IiBoZWlnaHQ9IjcxNCIgdmlld0JveD0iMCAwIDg1OCA3MTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04MzcuMjAzIDY0NS4wNzZMNDc3LjgwMyA2MDcuNTYzTDMxOS4zMSA1OTEuMDJDMzEwLjkgNTcwLjY5NiAzNjkuNTcyIDUyNy40NTggNDIxLjE5NiA1MzcuMzM0QzQyNC4wMzIgNDk1Ljc0NiA1MDAuODkyIDQ2NS42MjUgNTMwLjk1OCA0ODcuNDYxQzUzNC44MTkgNDUwLjQ2OCA1NTcuNzIzIDQyMi45NDIgNjA3LjEwOSA0MjguMDk3QzY3MC4zNTggNDM0LjY5OSA2NzYuNjEyIDQ1NC4wNDkgNjkxLjY4MyA1MDQuMjM3QzY5Mi42MSA0OTUuMzU5IDcyNi4yMzEgNDcwLjQ0NyA3NTMuNTg0IDQ3My4zMDJDODA5LjM2NyA0NzkuMTI1IDgwNC45MzMgNTM2LjI1MiA3OTkuMzczIDU4OS41MjFDODI0LjIyOSA1OTkuMjk2IDgzNC45NDkgNjMwLjYzMSA4MzcuMjAzIDY0NS4wNzZaIiBmaWxsPSIjRURDN0I0IiBmaWxsLW9wYWNpdHk9IjAuMiIvPgo8Y2lyY2xlIG9wYWNpdHk9IjAuMiIgY3g9IjMyNSIgY3k9IjMyNSIgcj0iMzI1IiBmaWxsPSIjRkNEOTg1Ii8+CjxwYXRoIGQ9Ik02OTcuMjAzIDcxMy4wNzZMMzM3LjgwMyA2NzUuNTYzTDE3OS4zMSA2NTkuMDJDMTcwLjkgNjM4LjY5NiAyMjkuNTcyIDU5NS40NTggMjgxLjE5NiA2MDUuMzM0QzI4NC4wMzIgNTYzLjc0NiAzNjAuODkyIDUzMy42MjUgMzkwLjk1OCA1NTUuNDYxQzM5NC44MTkgNTE4LjQ2OCA0MTcuNzIzIDQ5MC45NDIgNDY3LjEwOSA0OTYuMDk3QzUzMC4zNTggNTAyLjY5OSA1MzYuNjEyIDUyMi4wNDkgNTUxLjY4MyA1NzIuMjM3QzU1Mi42MSA1NjMuMzU5IDU4Ni4yMzEgNTM4LjQ0NyA2MTMuNTg0IDU0MS4zMDJDNjY5LjM2NyA1NDcuMTI1IDY2NC45MzMgNjA0LjI1MiA2NTkuMzczIDY1Ny41MjFDNjg0LjIyOSA2NjcuMjk2IDY5NC45NDkgNjk4LjYzMSA2OTcuMjAzIDcxMy4wNzZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: -1;

        @container (width >= 43.75rem) {
           inset-block-start: -1rem;
           inset-inline-start: -20cqi;
           inline-size: 80%;
           block-size: 40rem;
        }
    }

    &::after {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        transform: translateX(50%);
        inline-size: 20rem;
        aspect-ratio: 489/335;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDg5IDMzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQ1OS4wOTYgMTI5Ljg1MkwyNjguNjcgMTA5Ljk3NkwxODQuNjk0IDEwMS4yMTFDMTgwLjIzOCA5MC40NDIyIDIxMS4zMjUgNjcuNTMyNiAyMzguNjc4IDcyLjc2NTJDMjQwLjE4IDUwLjczMDQgMjgwLjkwNCAzNC43NzA4IDI5Ni44MzQgNDYuMzQwNkMyOTguODggMjYuNzQwMiAzMTEuMDE2IDEyLjE1NTcgMzM3LjE4MiAxNC44ODY5QzM3MC42OTQgMTguMzg0OCAzNzQuMDA4IDI4LjYzNzcgMzgxLjk5MyA1NS4yMjkzQzM4Mi40ODQgNTAuNTI1MiA0MDAuMjk4IDM3LjMyNTkgNDE0Ljc5MSAzOC44Mzg3QzQ0NC4zNDcgNDEuOTIzNiA0NDEuOTk4IDcyLjE5MiA0MzkuMDUyIDEwMC40MTdDNDUyLjIyMiAxMDUuNTk1IDQ1Ny45MDIgMTIyLjE5OCA0NTkuMDk2IDEyOS44NTJaIiBmaWxsPSIjRURDN0I0IiBmaWxsLW9wYWNpdHk9IjAuMiIvPgo8cGF0aCBkPSJNNDcwLjY5MiAzMzQuMTdMMTQ0Ljg3MiAzMDAuMTYyTDEuMTg3MzcgMjg1LjE2NEMtNi40MjYwMiAyNjYuNjQgNDYuNzkwNSAyMjcuMTg3IDkzLjU4ODQgMjM2LjE2M0M5Ni4xODIyIDE5OC4yNDYgMTY1Ljg4MiAxNzAuNzQzIDE5My4xMjggMTkwLjYzNUMxOTYuNjQ5IDE1Ni45MDcgMjE3LjQyOSAxMzEuNzk5IDI2Mi4yMDEgMTM2LjQ3MkMzMTkuNTM5IDE0Mi40NTcgMzI1LjIgMTYwLjA5NSAzMzguODM2IDIwNS44NDRDMzM5LjY4MSAxOTcuNzQ5IDM3MC4xNzYgMTc1LjAxOSAzOTQuOTc0IDE3Ny42MDdDNDQ1LjU0NSAxODIuODg2IDQ0MS40OTUgMjM0Ljk3MSA0MzYuNDI1IDI4My41NDFDNDU4Ljk1NCAyOTIuNDM5IDQ2OC42NTcgMzIxLjAwMSA0NzAuNjkyIDMzNC4xN1oiIGZpbGw9IiNFREM3QjQiIGZpbGwtb3BhY2l0eT0iMC4yIi8+Cjwvc3ZnPgo=");
        z-index: -2;

        @container (width >= 43.75rem) {
            inset-block-start: 10rem;
            inset-inline-end: 0;
            transform: translateX(50%);
            inline-size: 30rem;

        }
    }

    
}

#hero-img__wrapper {
    min-height: max(8rem, calc(60cqi - 9.5rem));
    height: 20rem;
    position: relative;
    width: 100%;
    margin-block-end: 2rem;

    @container (width >= 43.75rem) {
        width: var(--header-img-width);
        align-self: flex-start;
        margin-inline-start: auto;
        order: 2;
        height: unset;
        max-height: 90vh;
        margin-block-end: 0;
    }
}

.hero-img {
    position: absolute;
    inset: 0;
    object-fit: contain;
    block-size: 100%;
    max-width: 100%;
    transform-origin: bottom left;
    margin-inline: auto;
}

#page-title {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    color: var(--theme-color-secondary);
    text-box: trim-both ex alphabetic;
    line-height: 1.2;
    text-transform: lowercase;
    margin-block-end: 1em;
    text-shadow: -0.05em 0.05em var(--theme-color-accent-light);
    --fade-up-offset: 3rem;
    animation: fade-up 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);

    @container (width >= 43.75rem) {
        margin-block-start: 8rem;
    }

    @media (width >= 75rem) {
        &:has(span) {
            margin-inline-start: -0.5em;
        }
    }
     
     span {
        color: var(--theme-color-primary-dark);
        text-shadow: none;
        font-size: 0.8em;
        font-weight: normal;
        line-height: 1.1;
    }

    & > span+b {
        margin-inline-start: 0.5em;
    }

    & > b:not(:first-child)+span {
        margin-inline-start: 1em;
    }

}

#page-title__group {
    align-self: start;
    display: flex;
    flex-direction: column;

    #page-title {
        margin-block-end: 0.25em;
        @container (width >= 43.75rem) {
            max-inline-size: calc(100cqi - var(--header-img-width) - var(--header-col-gap));
        }
    }

    p {
        font-size: var(--font-size-lg);
        color: var(--theme-color-primary-dark);
        font-family: var(--font-alt);
        border-block-start: 0.2rem dotted var(--theme-color-primary);
        padding-block-start: 0.5em;
    }
}

.cta-section {
    --img-size: min(15rem, 40vw);
    margin-block-start: calc(var(--img-size) / 2);
    display: flex;
    flex-direction: column;
    gap: var(--inner-gap);
    align-items: center;
    background-color: var(--theme-color-secondary-light);
    padding: var(--spacing-lg);
    padding-block: var(--spacing-xl);
    padding-block-start: max(var(--spacing-xl), calc(var(--img-size) / 2));
    text-align: center;
    aspect-ratio: 2.4;
    place-content: center;
    border-radius: var(--border-radius-lg);
    position: relative;

    p {
        font-size: var(--font-size-lg);
        color: var(--theme-color-primary-dark);
    }

    .cta-img {
        position: absolute;
        width: var(--img-size);
        aspect-ratio: 1;
        inset-block-start: 0;
        transform: translateY(-50%);
    }
}

#global-footer {
    overflow-x: clip;
}

#global-footer__content {
    margin-block-start: var(--block-spacing);
    padding-block: var(--spacing-md);
    border-block-start: 0.3rem dotted var(--theme-color-primary-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--spacing-lg);

    @media (width >= 64rem) {
        display: grid;
        gap: var(--spacing-lg);
        row-gap: var(--spacing-xxl);
        grid-template-areas: 'nav contact brand'
                              'copy copy brand';
                              
        nav {
            grid-area: nav;
            align-self: start;

            #secondary-nav {
                align-items: start;
            }


        }

        #global-footer__contact-plus-social {
            grid-area: contact;
            align-items: start;
            gap: 0.5em;

            > ul {
                display: contents;
            }

            a {
                --icon-gap: 1em;
                flex-direction: row;
            }
        }

        #global-footer__brand {
            grid-area: brand;
            align-self: end;
            transform: translateY(var(--spacing-md));
        }

        #global-footer__copy {
            grid-area: copy;
            background: none;
            color: unset;
            justify-content: flex-start;

            &::after {
                display: none;
            }
        }


    }
}

#secondary-nav {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0;
    list-style-type: none;
    gap: 0.25em;

    a {
        display: block;
        padding-block: 0.25em;
        color: var(--theme-color-primary-darker);
        text-decoration-color: var(--theme-color-accent);
    }
}

#global-footer__contact-plus-social {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    column-gap: var(--spacing-md);
    row-gap: 2em;
    justify-content: center;

    a {
        flex-direction: column;
    }

}

#global-footer__contact-info  {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    --icon-bg-color: var(--theme-color-accent-light);
}

#global-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
}

.contact-info,
#global-footer__social,
#social {
    padding: 0;
    list-style-type: none;

    a {
        display: block;
        padding-block: 0.25em;
        text-decoration: none;
        color: var(--theme-color-primary-darker);
    }
}

#global-footer__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block-start: var(--spacing-md);

    &::before {
        content: "";
        aspect-ratio: 657/242;
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 50%;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjU3IDI0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4yIiBkPSJNNjU2LjEgMjQxLjMwOUgyMDIuNDQ3SDIuMzg5MzhDLTEwLjc2IDIxNy4wMjggNTYuODY1MiAxNTUuMzkyIDEyMi42MTIgMTYwLjk5NUMxMjAuNzMzIDEwOC42OTcgMjEyLjc3OSA2MS4wNjkzIDI1My4xNjYgODQuNDE2NUMyNTMuMTY2IDM3LjcyMjIgMjc4LjE3OCAwLjM2Njc4MiAzNDAuNTE1IDAuMzY2ODIxQzQyMC4zNTEgMC4zNjY4NzEgNDMwLjY4MiAyMy43MTQgNDU2LjA0MiA4NC40MTY1QzQ1Ni4wNDIgNzMuMjA5OSA0OTQuNzc2IDM3LjcyMjIgNTI5LjMwMiAzNy43MjIyQzU5OS43MTQgMzcuNzIyMiA2MDEuNjI0IDEwOS42MzEgNjAxLjYyNCAxNzYuODcxQzYzMy45MzQgMTg1LjgzNiA2NTEuNDAzIDIyMy41NjUgNjU2LjEgMjQxLjMwOVoiIGZpbGw9IiM2NEM4QzkiLz4KPC9zdmc+Cg==");
        z-index: -1;
        inline-size: 50rem;
        transform: translateX(-55%);
        transform-origin: center bottom;
    }

}

#global-footer__logo {
    width: 15rem;
}

#footer-kids {
    aspect-ratio: 780/300;
    width: 20rem;
}

#global-footer__copy {
    position: relative;
    background-color: var(--theme-color-primary-darker);
    color: var(--theme-color-canvas);
    text-align: center;
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;

    &::after {
        position: absolute;
        content: '';
        inset-block: calc(-1 * var(--spacing-lg));
        height: 7rem;
        background-color: var(--theme-color-primary-darker);
        z-index: -1;
        width: 100vw;
    }
}

.stickers {
    position: relative;
    display: grid;
    container-type: inline-size;
    --img-inset: 5cqi;
    --border-width: 3.3cqi;
    --sticker-size: 25cqi;

    &::before {
        content: "";
        grid-column: 1/1;
        grid-row: 1/1;
        inset: 0;
        border-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNjAyXzM3OTIpIj4KPHJlY3Qgb3BhY2l0eT0iMC41IiB5PSI4ODAiIHdpZHRoPSI0Ny4xNDMxIiBoZWlnaHQ9IjE3MC4zNjIiIHRyYW5zZm9ybT0icm90YXRlKC00NSAwIDg4MCkiIGZpbGw9IiM2NEM4QzkiLz4KPHJlY3Qgb3BhY2l0eT0iMC41IiB4PSI4NDYiIHk9IjMzIiB3aWR0aD0iNDcuMTQzMSIgaGVpZ2h0PSIxNzAuMzYyIiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgODQ2IDMzKSIgZmlsbD0iIzY0QzhDOSIvPgo8cmVjdCBvcGFjaXR5PSIwLjUiIHg9IjEyMiIgd2lkdGg9IjQ1IiBoZWlnaHQ9IjE3MC4zNjIiIHRyYW5zZm9ybT0icm90YXRlKDQ1Ljk2NjMgMTIyIDApIiBmaWxsPSIjRkNEOTg1Ii8+CjxyZWN0IG9wYWNpdHk9IjAuNSIgeD0iOTY5IiB5PSI4NDkiIHdpZHRoPSI0NSIgaGVpZ2h0PSIxNzAuMzYyIiB0cmFuc2Zvcm09InJvdGF0ZSg0NS45NjYzIDk2OSA4NDkpIiBmaWxsPSIjRkNEOTg1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNjAyXzM3OTIiPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=") 15.5%;
        border-image-width: var(--sticker-size);
        z-index: 1;
    }

    img {
        grid-column: 1/1;
        grid-row: 1/1;
        object-fit: cover;
        width: calc(100% - 2 * var(--img-inset));
        margin: var(--img-inset);
        border: var(--border-width) solid white;
        box-shadow: 0px 0.6cqi 0.6cqi 0px rgba(0, 0, 0, 0.25);    
    }
}

#to-top-btn {
    --size: 2rem;
    transition: all 0.3s ease-out;
    position: fixed;
    inset-block-end: 2rem;
    inset-inline-end: 2rem;
    display: grid;
    place-content: center;
    border-radius: 50%;
    padding: calc(var(--size) / 2);
    opacity: 0;

    filter: drop-shadow(0rem 0.3em 0 var(--btn-shadow-color));

    body:has(.headroom--not-top.headroom--pinned):not(:has(#global-nav-container.open)) & {
        opacity: 1;
    }

    svg {
        width: var(--size);
        height: var(--size);
    }
}

}


/* #ANCHOR Utilities */

@layer utilities {

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


a:has(.dashicons) {
    display: flex;
    justify-content: var(--justify-content, center);
    text-align: var(--text-align, center);
    flex-wrap: var(--flex-wrap, wrap);
    align-items: var(--align-items, center);
    gap: var(--icon-gap, 0.5em);

    .dashicons {
        --size: 2em;
        background-color: var(--icon-bg-color, var(--theme-color-primary-light));
        border-radius: 50%;
        inline-size: var(--size);
        block-size: var(--size);
        place-content: center;
        flex-shrink: 0;
    }
}

}

/* keep this outside of layers to overide dashicons css */

a .dashicons {
    inline-size: var(--size);
    block-size: var(--size);
}


/* #ANCHOR Pages */ 

@layer pages {



    /* #ANCHOR Homepage */

    body.home {


            #balloon {
                --aspect-ratio: 2281.37/3835.36;
                max-width: none;
                aspect-ratio: var(--aspect-ratio);
                transform: rotate(20deg) translateX(20%) translateY(-12%);
                width: 175cqi;
                height: auto;
                inset-block-start: unset;
                inset-inline-start: unset;
                z-index: -1;

                @container (width >= 30rem) {
                    width: 100cqi;
                    transform: rotate(10deg) translateX(20%) translateY(-0%);
                    inset-block-end: 0;
                }
                
                @container (width >= 43.75rem) {
                    width: 70cqi;
                    transform: rotate(10deg) translateX(18%) translateY(-8%);
                }
                
            }

            #page-title {
                animation-delay: 0.45s;
                animation-fill-mode: backwards;
            }

            

            #page-header {

                &::before {
                    inset-block-end: -4rem;
                }

                @media (width >= 43.75rem) {
                    min-height: 40rem;
                }
                
            }

            #hero-img__wrapper {
                animation: move-in 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
                animation-fill-mode: backwards;
            }

            #home-intro {
                display: flex;
                flex-direction: column;
                gap: var(--inner-gap);
                align-items: flex-start;
                text-wrap: pretty;

                strong {
                    font-family: var(--font-alt);
                    font-size: 1.2em;
                    line-height: 1.3;
                    color: var(--theme-color-primary-dark);
                }

                @media (width >= 43.75rem) {
                    max-width: 40rem;
                }

                @media (width >= 60rem) {
                    margin-block-start: calc(var(--block-spacing) * -1.25);
                }
            }

            #intro-photos {
                display: flex;
                flex-direction: column;
                width: 100%;
                margin-block-start: var(--block-spacing);

                > * {
                    flex: 1;
                    margin-block-start: -2rem;
                }

                > *:nth-child(even) {
                    transform: rotate(-8deg);
                }
                > *:nth-child(odd) {
                    transform: rotate(8deg);
                }

                @container (width >= 40rem) {
                    flex-direction: row;
                    align-items: flex-start;
                    margin-block-start: 0;

                    > * {
                        margin-block-start: 0;
                    }
                    > *:nth-child(1) {
                        transform: rotate(8deg) translateX(10rem);
                    }
                    > *:nth-child(2) {
                        margin-block-start: -3rem;
                        transform: rotate(-8deg) translateX(6rem);
                        z-index: 1;
                    }
                    > *:nth-child(3) {
                        margin-block-start: -7rem;
                    }
                }
            }

            #difficulties-list {
                display: flex;
                flex-direction: column;
                gap: var(--inner-gap);
                container-type: inline-size;

                .link-group {
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--inner-gap);
                }

                ul {

                    column-count: 2;
                    column-gap: var(--spacing-xl);
                    column-width: 15rem;

                    padding-inline-start: 1.5rem;

                    li {
                        margin-block-end: var(--spacing-xl);
                        break-inside: avoid;
                        &::marker {
                            font-size: 2.5em;
                            line-height: 0;
                            color: var(--theme-color-secondary);
                        }

                        &:nth-child(2n+2) {
                            &::marker {
                                color: var(--theme-color-primary);
                            }
                        }

                        &:nth-child(3n+3) {
                            &::marker {
                                color: var(--theme-color-accent);
                            }
                        }
                    }

                    h3 {
                        color: var(--theme-color-primary-darker);
                        line-height: 1.3;
                        font-family: var(--font-alt);
                        transform: translateY(-0.5em);
                        margin-block-end: -0.4em;
                    }

                }

                @media (width >= 43.75rem) {
                    display: grid;
                    column-gap: var(--spacing-xl);
                    grid-template-areas:  "img title"
                                        "img list"
                                        "img buttons";
            
                    h2 {
                        grid-area: title;
                    }

                    ul {
                        grid-area: list;
                    }

                    .link-group {
                        grid-area: buttons;
                    }

                    #difficulties__img-wrap {
                        display: grid;
                        padding-block-start: var(--spacing-lg);
                        grid-area: img;
                        block-size: 100%;
                    }

                    #services-hero {
                        width: 15rem;
                        position: sticky;
                        inset-block-start: calc(var(--spacing-lg) + 9rem);
                        margin-block-end: var(--spacing-xxxl);
                        grid-column: 1 / -1;
                        grid-row: 1 / span 1;
                    }
            
                }

            }

            #difficulties__img-wrap {
                position: relative;
                &::before {
                    content: "";
                    position: absolute;
                    inset-block-start: 10rem;
                    inset-inline-start: 0;
                    aspect-ratio: 489/335;
                    inline-size: 100%;
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-image: var(--svg-clouds-overlap);
                    z-index: -1;

                    @media (width >= 43.75rem) {
                        grid-column: 1 / -1;
                        position: sticky;
                        inset-block-start: 24rem;
                        margin-block-end: var(--spacing-xxxl);
                        grid-row: 1 / span 1;
                        inset-inline-start: -5rem;
                        margin-block-start: 12rem;
                        width: 17rem;
                        transform: translateX(20%) scale(2);
                    }
                }
            }

            #services-hero {
                --aspect-ratio: 366/411;
                aspect-ratio: var(--aspect-ratio);
            
            }

            #testimonials {
                padding-block: var(--spacing-xl);

                ul {
                    list-style-type: none;
                    padding-inline-start: 0;
                }

                li {
                    position: relative;
                    background-color: var(--theme-color-secondary-light);
                    padding-block: var(--spacing-xl);
                    padding-inline: max(var(--spacing-lg), 10%);
                    border-radius: var(--border-radius-lg);
                    container-type: inline-size;

                    &::before,&::after {
                        position: absolute;
                        font-family: var(--font-heading);
                        font-size: 10rem;
                        font-weight: bold;
                        line-height: 1;
                    }

                    &::before {
                        content: '“';
                        inset-inline-start: 0;
                        inset-block-start: -0.25em;
                        color: var(--theme-color-secondary);
                    }

                    &::after {
                        content: '”';
                        inset-inline-end: 0;
                        inset-block-end: -0.75em;
                        color: var(--theme-color-accent);
                    }
                }

                li:not(:first-child) {
                    display: none;
                }

                blockquote {
                    margin-inline: 0;
                    color: var(--theme-color-primary-darker);

                    @container (width >= 43.75rem) {
                        font-size: 1.3em;
                    }
                }

                footer {
                    color: var(--theme-color-secondary-dark);
                    
                    span {
                        display: block;

                        &:first-child {
                            font-weight: bold;
                        }
                    }
                }
            }

            #blog-teaser {
                display: flex;
                flex-direction: column;
                gap: var(--inner-gap);
                align-items: flex-start;
                text-wrap: pretty;

                @media (width >= 43.75rem) {
                    display: grid;
                    grid-template-areas: 'title img'
                                        'text img'
                                        'button img';
                    grid-template-columns: 2.5fr 1fr;

                    h2 {
                        grid-area: title;
                    }

                    p {
                        grid-area: text;
                    }

                    svg {
                        grid-area: img;
                        width: 20rem;
                    }

                    & > a {
                        grid-area: button;
                        margin-inline-end: auto;
                    }
                }
            }

            #blog-hero {
                aspect-ratio: 400/294;
                padding-block-end: 3rem;
                background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzIyIDM3NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4yIiBkPSJNNjUxLjgyMiAzMDcuNjc2TDIwMC42MjEgMjYwLjU4MUwxLjY0Mzc2IDIzOS44MTJDLTguOTEzODQgMjE0LjI5NyA2NC43NDQ3IDE2MC4wMTQgMTI5LjU1NCAxNzIuNDEzQzEzMy4xMTUgMTIwLjIwMyAyMjkuNjA4IDgyLjM4NzQgMjY3LjM1MyAxMDkuODAxQzI3Mi4yMDEgNjMuMzU5MiAzMDAuOTU1IDI4LjgwMjIgMzYyLjk1NiAzNS4yNzM3QzQ0Mi4zNiA0My41NjE3IDQ1MC4yMTIgNjcuODU1MiA0NjkuMTMyIDEzMC44NjJDNDcwLjI5NiAxMTkuNzE2IDUxMi41MDUgODguNDQxNiA1NDYuODQ1IDkyLjAyNTlDNjE2Ljg3NiA5OS4zMzU1IDYxMS4zMSAxNzEuMDU0IDYwNC4zMyAyMzcuOTMxQzYzNS41MzQgMjUwLjIwMiA2NDguOTkzIDI4OS41NDEgNjUxLjgyMiAzMDcuNjc2WiIgZmlsbD0iIzY0QzhDOSIvPgo8cGF0aCBkPSJNNzAyLjkxOCAzNzMuMTk4TDM3MS4wMzQgMzM4LjU1N0wyMjQuNjc2IDMyMy4yOEMyMTYuOTEgMzA0LjUxMyAyNzEuMDkgMjY0LjU4NCAzMTguNzYxIDI3My43MDRDMzIxLjM4MSAyMzUuMzAxIDM5Mi4zNTYgMjA3LjQ4NiA0MjAuMTIgMjI3LjY1QzQyMy42ODUgMTkzLjQ4OSA0NDQuODM2IDE2OC4wNzEgNDkwLjQ0MSAxNzIuODMxQzU0OC44NDcgMTc4LjkyNyA1NTQuNjIyIDE5Ni43OTYgNTY4LjU0IDI0My4xNDJDNTY5LjM5NSAyMzQuOTQzIDYwMC40NDIgMjExLjkzOSA2MjUuNzAxIDIxNC41NzVDNjc3LjIxMyAyMTkuOTUyIDY3My4xMTkgMjcyLjcwNSA2NjcuOTg1IDMyMS44OTZDNjkwLjkzNyAzMzAuOTIyIDcwMC44MzcgMzU5Ljg1OCA3MDIuOTE4IDM3My4xOThaIiBmaWxsPSIjRkJGNEYwIi8+Cjwvc3ZnPgo=");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center bottom;

        
            }

        

    }

    /* #ANCHOR About */

    #page-about {
        #hero-img__wrapper {
            max-height: none; 
            height: unset;
            transform: rotate(-10deg) translateX(10%);
            max-height: 40rem;
        }

        #team-members {
            container-type: inline-size;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xxxl);
            list-style-type: none;
            padding-inline-start: 0;
        }
        
        .team-member {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            grid-template-rows: auto 1fr;

            figure {
                transform: rotate(5deg);
                max-width: 20rem;
            }

            &:nth-child(even) {
                figure {
                    transform: rotate(-5deg);
                }
            }

            @container (width >= 43.75rem) {
                --img-column: 20rem;
                position: relative;
                display: grid;
                gap: var(--spacing-lg);
                column-gap: var(--spacing-xl);
                grid-template-areas: 'img title'
                                        'img text';
                grid-template-columns: var(--img-column) 1fr;
                align-items: start;

                figure {
                    grid-area: img;
                }

                .team-member__header {
                    grid-area: title;
                }

                .team-member__text {
                    grid-area: text;
                }

                &::before {
                    content: '';
                    position: absolute;
                    aspect-ratio: 489/335;
                    display: block;
                    inset-block-end: 0;
                    inset-inline-start: 100%;
                    transform: translateX(-20%);
                    background-repeat: no-repeat;
                    background-size: contain;
                    width: 30rem;
                    z-index: -1;
                    background-image: var(--svg-clouds-overlap);
                }
            
            }
        }

        .team-member:nth-child(even) {
            @container (width >= 43.75rem) {
                column-gap: var(--spacing-lg);
                grid-template-areas: 'title img'
                                        'text img';
                grid-template-columns: 1fr var(--img-column);
            }

            &::before {
                inset-inline-start: unset;
                inset-inline-end: 100%;
                transform: translateX(20%);
            }
        }

        .team-member__header {
            p {
                color: var(--theme-color-secondary-dark);
                font-family: var(--font-alt);
                font-size: 1.2em;
                line-height: 1.3;
            }
        }


        .team-member__text > * + * {
            margin-block-start: 1em;
        }
    }

    /* #ANCHOR Services */

    #page-services {

        #services-hero {
            --aspect-ratio: 366/411;
            aspect-ratio: var(--aspect-ratio);
        
        }

        #services {
            display: flex;
            flex-direction: column;
            row-gap: var(--block-spacing);
            list-style-type: none;
            padding-inline-start: 0;
            text-wrap: pretty;
            
            li > * + * {
                margin-block-start: var(--spacing-lg);
            }

            @media (width >= 43.75rem) {
                padding-inline: 7%;
                
                .service {
                    max-width: 85%;
                    position: relative;

                    &:nth-child(even) {
                        margin-inline-start: auto;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        aspect-ratio: 489/335;
                        display: block;
                        inset-block-end: 0;
                        inset-inline-start: 100%;
                        transform: translateX(-20%);
                        background-repeat: no-repeat;
                        background-size: contain;
                        width: 30rem;
                        z-index: -1;
                        background-image: var(--svg-clouds-overlap);
                    }

                    &:nth-child(even)::before {
                        inset-inline-start: unset;
                        inset-inline-end: 100%;
                        transform: translateX(20%);
                    }
                }
            }
        }

        .service__text {
            & > * + * {
                margin-block-start: var(--spacing-lg);
            }

            &::first-letter {
                @supports (initial-letter: 2 2) {
                    initial-letter: 2 2;
                    margin-inline-end: 0.5em;
                    color: var(--theme-color-tertiary);
                    font-family: var(--font-alt);
                    font-weight: bold;
                }
            }

            strong {
             
                color: var(--theme-color-primary-darker);
            }

            ul {
                list-style-type: disc;
                padding-inline-start: 1em;

                column-count: 2;
                column-width: 15rem;
                column-gap: var(--spacing-lg);
                width: fit-content;
                
                li {

                    break-inside: avoid;

                    &::marker {
                        color: var(--theme-color-secondary);
                    }

                    &:nth-child(2n+2) {
                        &::marker {
                            color: var(--theme-color-primary);
                        }
                    }

                    &:nth-child(3n+3) {
                        &::marker {
                            color: var(--theme-color-accent);
                        }
                    }

                    &:not(:last-child) {
                        margin-block-end: var(--spacing-md);
                    }
                }
            }
        }

    }

    /* #ANCHOR Blog index */

    #page-blog {
        
        #blog-articles {
            list-style-type: none;
            padding-inline-start: 0;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xxxl);
        }

        .blog-article {
            display: flex;
            flex-direction: column;
            gap: var(--inner-gap);

            & > .btn {
                align-self: start;
            }

            figure {
                transform: rotate(5deg);
                max-width: 20rem;
            }

            &:nth-child(even) {
                figure {
                    transform: rotate(-5deg);
                }
            }

            @media (width >= 43.75rem) {
                display: grid;
                gap: var(--spacing-lg);
                grid-template-areas: 'img title'
                                    'img text'
                                    'img button';
                grid-template-columns: 1fr 2fr;
                align-items: start;

                figure {
                    grid-area: img;
                }

                h2 {
                    grid-area: title;
                }

                .blog-article__text {
                    grid-area: text;
                }

                .btn {
                    grid-area: button;
                    width: fit-content;
                }

                &:nth-child(even) {
                    grid-template-areas: 'title img'
                                        'text img'
                                        'button img';
                    grid-template-columns: 2fr 1fr;
                }
            }

        }
        

    }

    /* #ANCHOR Blog single */

    #page-single-post {

        #hero-img__wrapper {
            max-height: none; 
            height: unset;
            max-height: 40rem;
            @container (width >= 43.75rem) {
                transform: rotate(5deg) translateX(10%);
            }
        }

        #page-title {
            margin-block-start: var(--spacing-lg);
            line-height: 1.1;
            font-size: calc(var(--font-size-h1) * 0.85);
        }

        .breadcrumb {
            inline-size: 100%;
            margin-block-start: var(--spacing-md);
            border-block-end: 0.2em dotted var(--theme-color-primary);

            a {
                display: inline-block;
                font-family: var(--font-alt);
                font-size: var(--font-size-lg);
                color: var(--theme-color-primary-dark);
                padding-block-end: var(--spacing-sm);
                text-decoration-color: var(--theme-color-tertiary);
                text-underline-offset: 0.1em;
            }
        }

        #post-content {
            container-name: post-content;
            margin-block-start: calc(var(--block-spacing) * -1);
            display: grid;
            row-gap: var(--spacing-lg);
            grid-template-columns: [full-start] 1fr 
                                        [content-start]
                                            minmax(0, 40rem) 
                                        [content-end] 
                                        1fr 
                                    [full-end];
    
            & > * {
                grid-column: content;
            }

            p {
                text-wrap: pretty;
            }

            & > p:first-child {
                &::first-letter {
                    @supports (initial-letter: 2 2) {
                        initial-letter: 2 2;
                        margin-inline-end: 0.5em;
                        color: var(--theme-color-tertiary);
                        font-family: var(--font-alt);
                        font-weight: bold;
                    }
                }
            }

            blockquote {
                text-wrap: pretty;
                grid-column: full;
                font-size: var(--font-size-lg);
                color: var(--theme-color-primary-dark);
                margin: 0;
                position: relative;
                padding-block: var(--spacing-xl);
                margin-block: var(--spacing-lg);
                padding-inline: max(var(--spacing-lg), 10%);
                border-radius: var(--border-radius-lg);
                container-type: inline-size;

                &::before,&::after {
                    position: absolute;
                    font-family: var(--font-heading);
                    font-size: 10rem;
                    font-weight: bold;
                    line-height: 1;
                }

                &::before {
                    content: '“';
                    inset-inline-start: 0;
                    inset-block-start: -0.25em;
                    color: var(--theme-color-secondary);
                }

                &::after {
                    content: '”';
                    inset-inline-end: 0;
                    inset-block-end: -0.75em;
                    color: var(--theme-color-accent);
                }

                @container (width < 43.75rem) {
                    font-size: calc(var(--font-size-lg) * 0.85);
                    grid-column: content;
                }
            }

            figure {
                position: relative;
                display: grid;
                container-type: inline-size;
                --caption--size: 4rem;
                --img-inset: 5cqi;
                --border-width: 3.3cqi;
                --sticker-size: 25cqi;

                &::before {
                    grid-column: 1/1;
                    grid-row: 1/1;
                    content: "";
                    z-index: 1;
                    inset: 0;
                    border-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNjAyXzM3OTIpIj4KPHJlY3Qgb3BhY2l0eT0iMC41IiB5PSI4ODAiIHdpZHRoPSI0Ny4xNDMxIiBoZWlnaHQ9IjE3MC4zNjIiIHRyYW5zZm9ybT0icm90YXRlKC00NSAwIDg4MCkiIGZpbGw9IiM2NEM4QzkiLz4KPHJlY3Qgb3BhY2l0eT0iMC41IiB4PSI4NDYiIHk9IjMzIiB3aWR0aD0iNDcuMTQzMSIgaGVpZ2h0PSIxNzAuMzYyIiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgODQ2IDMzKSIgZmlsbD0iIzY0QzhDOSIvPgo8cmVjdCBvcGFjaXR5PSIwLjUiIHg9IjEyMiIgd2lkdGg9IjQ1IiBoZWlnaHQ9IjE3MC4zNjIiIHRyYW5zZm9ybT0icm90YXRlKDQ1Ljk2NjMgMTIyIDApIiBmaWxsPSIjRkNEOTg1Ii8+CjxyZWN0IG9wYWNpdHk9IjAuNSIgeD0iOTY5IiB5PSI4NDkiIHdpZHRoPSI0NSIgaGVpZ2h0PSIxNzAuMzYyIiB0cmFuc2Zvcm09InJvdGF0ZSg0NS45NjYzIDk2OSA4NDkpIiBmaWxsPSIjRkNEOTg1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNjAyXzM3OTIiPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=") 15.5%;
                    border-image-width: var(--sticker-size);
                }
            
                img {
                    grid-column: 1/1;
                    grid-row: 1/1;
                    object-fit: cover;
                    width: calc(100% - 2 * var(--img-inset));
                    margin: var(--img-inset);
                    border: var(--border-width) solid white;
                    box-shadow: 0px 0.6cqi 0.6cqi 0px rgba(0, 0, 0, 0.25);    
                }

                figcaption {
                    grid-column: 1/1;
                    grid-row: 2/2;
                    inset-block-end: 0;
                    inset-inline: 0;
                    text-align: center;
                    padding-inline: var(--img-inset);
                    padding-block-start: 1.5em;
                    padding-block-end: 2.5em;
                }

            }

            .outro {
                border-block-start: 0.2rem dotted var(--theme-color-primary);
                padding-block-start: var(--spacing-md);
                font-style: italic;
                color: var(--theme-color-secondary-dark);
                text-align: center;
            }

        }

    }

    /* #ANCHOR Contact page */

    #page-contact {

        #contact-page__content {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xl);
            margin-block-start: calc(-1 * var(--block-spacing));

            @media (width >= 43.75rem) {
                display: grid;
                grid-template-rows: auto 1fr;
                grid-template-columns: 1fr 1.5fr;
                column-gap: var(--spacing-lg);
                grid-template-areas: 'info form'
                                      'social form';
                align-items: start;

                #contact-info {
                    grid-area: info;
                }

                #contact-form {
                    grid-area: form;
                }

                #social {
                    grid-area: social;
                }
            }
            
        }

        #contact-form {
            & > * {
                width: 100%;
            }
        }

        .contact-info,
        #social {
            display: flex;
            flex-direction: column;
            align-items: start;
            text-align: left;
            gap: 1em;
            
            a {
                --align-items: center;
            }
        }
        
        .contact-info {
            --icon-bg-color: var(--theme-color-accent-light);
        }

        a:has(.dashicons) {
            flex-direction: var(--flex-direction, row);
            --flex-wrap: nowrap;
            --text-align: left;
            --align-items: start;
            --icon-gap: 1em;
            --justify-content: start;
        }

        section {
            display: flex;
            flex-direction: column;
            gap: var(--inner-gap);
            align-items: start;
            text-align: left;
        }

        .wpcf7-form {
            display: flex;
            flex-direction: column;
            gap: var(--inner-gap);
            align-items: start;
            text-align: left;

            label {
                color: var(--theme-color-primary-darker);
            }
            p {
                width: 100%;
            }
        }

        input:is([type="text"],[type="email"],[type="tel"]), textarea {
            font-size: 1.1em;
            appearance: none;
            width: 100%;
            padding-block: 1em;
            padding-inline: 0.75em;
            border: 1px solid var(--theme-color-primary-darker);
            border-radius: var(--border-radius-sm);
            margin-block-start: 0.5em;
        }
    }
    

}

/* #ANCHOR Keyframes */



@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(var(--fade-up-offset, 1rem));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoom-fade-in {
    from {
        opacity: 0;
        transform:  translateY(1rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes rotate-in {
    from {
        transform: rotate(-10deg);
    }
    to {
        transform: rotate(0);
    }
}

@keyframes move-in {
    from {
        transform: translateY(-10rem) translateX(10rem) rotate(-10deg) scale(0.8);
    }
    to {
        transform: translateY(0);
    }
}