.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

/* Organic Shapes */
.organic-shape-1 { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
.organic-shape-2 { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.organic-shape-3 { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }

/* Scrapbook effects */
.scrapbook-image {
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1), 8px 8px 20px rgba(0,0,0,0.1);
    transform: rotate(-2deg);
    transition: transform 0.3s ease;
}
.scrapbook-image:hover {
    transform: rotate(1deg) scale(1.02);
    z-index: 10;
}
.scrapbook-image-alt {
    box-shadow: -4px 4px 0px rgba(0,0,0,0.1), -8px 8px 20px rgba(0,0,0,0.1);
    transform: rotate(3deg);
    transition: transform 0.3s ease;
}
.scrapbook-image-alt:hover {
    transform: rotate(-1deg) scale(1.02);
    z-index: 10;
}

/* Tape effect */
.tape {
    position: absolute;
    background-color: rgba(255,255,255,0.4);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    backdrop-filter: blur(2px);
    z-index: 20;
}

/* Noise texture overlay */
.texture-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
}

.glass {
    background: rgba(252, 249, 244, 0.6);
    backdrop-filter: blur(16px);
}

/* Site nav: fixed over the hero on every page, gains a dark-green
   translucent backdrop once the user scrolls past ~60 px so it stays
   readable on light content. The .is-scrolled class is toggled by
   assets/js/layout.js. */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease;
}
.site-nav.is-scrolled {
    background-color: rgba(1, 45, 29, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Subpage hero: dark-green overlay over a tropical background photo.
   Used by every non-home page header so the whole site shares the same
   atmospheric entry. */
.subpage-hero {
    position: relative;
    background-color: #012d1d;
    overflow: hidden;
}
.subpage-hero::after {
    /* Gradient overlay on top of the background image. Slightly darker
       at the top-left (where the text sits) so headlines stay legible
       even on very bright photos. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        135deg,
        rgba(1, 45, 29, 0.95) 0%,
        rgba(1, 45, 29, 0.85) 50%,
        rgba(1, 45, 29, 0.78) 100%
    );
    z-index: 1;
    pointer-events: none;
}
.subpage-hero > .subpage-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.subpage-hero > .subpage-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.subpage-hero > .subpage-hero__content {
    position: relative;
    z-index: 2;
}

/* Mobile menu */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.mobile-menu.open { transform: translateX(0); }

/* Form fields per design (Warm Sand 20% fill, focus border primary) */
.input-jungle {
    background-color: rgba(125, 86, 45, 0.12);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 16px;
    color: #1c1c19;
    width: 100%;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.input-jungle:focus {
    outline: none;
    border-color: #012d1d;
    background-color: rgba(125, 86, 45, 0.18);
}
.input-jungle::placeholder { color: #717973; }

/* Tape decoration helpers */
.rotate-1n { transform: rotate(-1deg); }
.rotate-2n { transform: rotate(-2deg); }

/* Section heading number background */
.section-number {
    position: absolute;
    top: -3rem;
    left: -1.5rem;
    font-size: 120px;
    font-weight: 700;
    color: #ebe8e3;
    opacity: 0.6;
    z-index: -1;
    font-family: 'Literata', serif;
}

/* Process step numbers — outlined editorial watermark.
   Die Kontur blendet diagonal aus: oben-links gut sichtbar, nach
   unten-rechts hin immer durchsichtiger — dort überlappt der Titel.
   Puffer per padding (v.a. oben + rechts für die kursive Serif-Glyphe),
   mit negativem margin ausgeglichen → Position bleibt gleich, die ganze
   Glyphe liegt in der Masken-Fläche und wird nirgends abgeschnitten. */
.step-number {
    color: transparent;
    -webkit-text-stroke: 2px #7d562d; /* secondary */
    line-height: 1;
    padding: 0.22em 0.42em 0.06em 0.1em;
    margin: -0.22em 0 0 -0.1em;
    -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.05) 88%);
    mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.05) 88%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    user-select: none;
    pointer-events: none;
}

/* FAQ accordion */
details.faq-item summary { list-style: none; cursor: pointer; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary .chevron { transition: transform 0.3s ease; }
details.faq-item[open] summary .chevron { transform: rotate(180deg); }

/* Image lightbox (created on demand by layout.js) */
#img-lightbox .img-lightbox__stage {
    -webkit-overflow-scrolling: touch;
    touch-action: pinch-zoom;
}
#img-lightbox .img-lightbox__img {
    max-height: calc(100vh - 4rem);
    object-fit: contain;
}
@media (max-width: 767px) {
    #img-lightbox .img-lightbox__img {
        max-height: calc(100vh - 2rem);
    }
}