body {

    margin: 0;

    background-color: rgb(222, 221, 213);

}

:root {

    --background: #ffffff;

    --text: #000000;

    --content-width: 760px;

    --section-gap: 120px;

}

@font-face {
    font-family: "Monofonto";
    src: url("fonts/monofonto rg.otf");
}

@font-face {
    font-family: "monocode-light";
    src: url("fonts/monocode-light.ttf");
}

@font-face {
    font-family: "monocode-semibold";
    src: url("fonts/monocode-semibold.ttf");
}

@font-face {
    font-family: "monocode-regular";
    src: url("fonts/monocode-regular.ttf");
}

.process-item {

    font-family: "monocode-semibold", monospace;

    font-size: 16px;

    text-align: left;

    margin: 0 0 8px 0;

    opacity: 0.75;

    letter-spacing: 0.5px;

}

.process-description {

    font-family: "monocode-light", monospace;

    font-size: 14px;

    line-height: 1.7;

    text-align: left;

    margin: 0 0 28px 0;

    opacity: 0.8;

}

.hero-work {

    position: relative;

    display: grid;

    grid-template-columns: 100%;

    margin-top: -40px;

}

.hero-bg {

    grid-column: 1;

    grid-row: 1;

    width: 100vw;

    min-width: 0;

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    z-index: -1;

}

.hero-bg img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.hero-content {

    grid-column: 1;

    grid-row: 1;

    padding-top: 90px;

    min-width: 0;

}

/* Sections with their own background image (process, pricing, requirements, about):
   the photo always keeps its real proportions (never stretched, never cropped
   top/bottom). The section is exactly as tall as the photo renders at full
   viewport width; if the text is shorter than that, the extra photo just shows
   below the text. Only if the text needs MORE height than the photo naturally
   gives at that width do the left/right edges get cropped, so the photo can
   grow to match — this only kicks in on narrow/tall screens. The background
   still starts flush with no gap against the section above. */

.has-bg {

    margin-top: 0px;

    display: grid;

    grid-template-columns: 100%;

}

.has-bg .section-bg {

    grid-column: 1;

    grid-row: 1;

    width: 100vw;

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    z-index: -1;

}

.has-bg .section-bg img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.has-bg .section-content {

    grid-column: 1;

    grid-row: 1;

    padding-top: 60px;

    min-width: 0;

}

.has-bg .section-content > section:first-child {

    margin-top: 0;

}

.hero-subtitle{

    font-family:"monocode-light";

    font-size:22px;

    text-align:center;

    margin:0 0 50px 0;
}

html {

    scroll-behavior: smooth;

}

nav {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    padding: 24px;

    display: flex;

    justify-content: center;

    gap: 36px;

    background: rgba(222, 221, 213, 0.7);

    backdrop-filter: blur(6px);

}

nav a {

    color: inherit;

    text-decoration: none;

    font-family: "monocode-light", Arial, sans-serif;

    font-size: 14px;

    letter-spacing: 1px;

}

nav a:hover {

    text-decoration: underline;

}

.nav-links {

    display: contents;

}

.menu-toggle {

    display: none;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    width: 22px;

    height: 22px;

    padding: 0;

    border: none;

    background: none;

    cursor: pointer;

}

.menu-toggle span {

    display: block;

    width: 100%;

    height: 2px;

    background: var(--text);

}

@media (max-width: 800px) {

    nav {

        gap: 20px;

    }

    .menu-toggle {

        display: flex;

    }

    .nav-links {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 20px;

        position: absolute;

        top: 100%;

        left: 50%;

        transform: translateX(-50%);

        margin-top: 12px;

        padding: 24px 32px;

        width: max-content;

        background: rgba(222, 221, 213);

        backdrop-filter: blur(6px);

        z-index: 1000;

        visibility: hidden;

        opacity: 0;

        pointer-events: none;

    }

    .nav-links.open {

        visibility: visible;

        opacity: 1;

        pointer-events: auto;

    }

}

main {

    max-width: var(--content-width);

    margin: 0 auto;

    padding: 90px 40px 0 40px;

    background: transparent;

    backdrop-filter: none;

    text-align: center;

}

h1 {

    font-family: "monofonto", Arial, sans-serif;
    font-size: 56px;
    letter-spacing: 3px;
    margin: 0 0 12px 0;

}

@media (max-width: 360px) {

    h1 {

        font-size: clamp(28px, calc((100vw - 80px) * 0.2), 56px);

    }

}

p {

    font-size: 22px;

    margin: 0 0 28px 0;

}

section {

    position: relative;

    margin-top: 60px;

}

.section-title {

    margin: 0 0 48px 0;

    font-family: "monocode-light", monospace;

    font-size: 18px;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0.7;

}

.section-text {

    max-width: 680px;

    margin: 0 auto 20px auto;

    font-family: "monocode-light", Arial, sans-serif;

    font-size: 14px;

    line-height: 1.8;

    text-align: left;

}

.section-text a {

    color: inherit;

    text-decoration: underline;

}

audio {
    margin-top: 8px;
    width: 100%;
    max-width: 420px;
    opacity: 0.8;
}

.track {
    margin-top: 20px;
    padding: 16px 0;
    border-top: none;
    border-bottom: none;
}

.track-title {
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    opacity: 0.85;
}

audio {
    width: 100%;
    max-width: 420px;

    margin: 0 auto;
    display: block;

    filter: grayscale(1);
}

.play-button {

    font-family: "Monocode-SemiBold";

    font-size: 18px;

    user-select: none;

}

audio {

    display: none;

}

.progress {

    width: 100%;

    margin-top: 20px;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    cursor: pointer;

}

.player-width {

    width: 100%;

    max-width: 320px;

    margin: 0 auto;

}

.progress::-webkit-slider-runnable-track {

    height: 1px;

    background: rgba(0,0,0,0.25);

}

.progress::-webkit-slider-thumb {

    appearance: none;
    -webkit-appearance: none;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: black;

    border: none;

    margin-top: -6px;

    cursor: pointer;

    transition: transform 0.15s ease;

}

.progress::-webkit-slider-thumb:hover {

    transform: scale(1.2);

}

.time {

    margin-top: 10px;

    display: flex;

    justify-content: space-between;

    font-family: "Monocode-Light";

    font-size: 12px;

    opacity: 0.7;

}

.track-header {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    cursor: pointer; 
    
    transition: opacity 0.15s ease;

    margin-bottom: 18px;

}

.track-header:hover {

    opacity: 0.6;

}


.track-title {

    font-family: "Monocode-SemiBold";

    font-size: 15px;

    letter-spacing: 1px;

    opacity: 0.8;

    margin: 0;

}

.track-info {

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 0;

}

.track-comment {

    font-family: "Monocode-Light";

    font-size: 11px;

    opacity: 0.55;

    margin-top: 3px;

    letter-spacing: 0.5px;

}

.pdf-menu {

    max-width: 680px;

    margin: 0 auto 20px auto;

    padding-left: 20px;

    text-align: left;

    font-family: "monocode-regular", monospace;

}

.pdf-menu li {

    margin-bottom: 14px;

    font-size: 14px;

    line-height: 1.6;

}

.pdf-menu a {

    color: inherit;

    text-decoration: underline;

}

.pdf-menu a:hover {

    opacity: 0.6;

}

.pdf-time {

    opacity: 0.55;

    margin-left: 6px;

    font-size: 12px;

}