/* ============================================================
   PPUZZL.dev — Zen Brutalist Editorial Stylesheet
   Palette: Travertine and Iron
   Typography: IBM Plex Mono + Space Mono
   ============================================================ */

/* ---------- CSS custom properties ---------- */
:root {
    --bg-primary:     #f5f0e8;
    --text-primary:   #1a1209;
    --text-secondary: #2c2520;
    --accent-mid:     #8b6f52;
    --accent-pale:    #c4a882;
    --accent-deep:    #3d2b1f;
    --surface-light:  #e8dfd0;
    --surface-warm:   #c4a882;
    --dark-bg:        #1a1209;
    --dark-text:      #f5f0e8;
    --mid-dark:       #5c4a38;
}

/* ---------- reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: auto;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    overflow-x: hidden;
}

/* ---------- sections ---------- */
.section {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.section-1 {
    background: var(--bg-primary);
}

.section-2 {
    background: var(--surface-warm);
}

.section-3 {
    background: var(--bg-primary);
}

.section-4 {
    background: var(--surface-light);
}

.section-5 {
    background: var(--bg-primary);
}

.section-6 {
    background: var(--dark-bg);
    color: var(--dark-text);
}

/* ---------- section inner layout: 3-column grid ---------- */
.section-inner {
    display: grid;
    grid-template-columns: 80px 1fr 280px;
    min-height: 100vh;
    position: relative;
    border-left: 1px solid var(--surface-light);
    border-right: 1px solid var(--surface-light);
}

/* ---------- margin left ---------- */
.margin-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 48px;
    position: relative;
    border-right: 1px solid var(--surface-light);
}

.margin-label {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--accent-mid);
    text-transform: uppercase;
    line-height: 1;
}

/* ---------- content zone ---------- */
.content-zone {
    padding: 64px 48px 80px 56px;
    position: relative;
    max-width: 680px;
}

/* ---------- silence right ---------- */
.silence-right {
    position: relative;
    border-left: 1px solid var(--surface-light);
    padding: 48px 24px;
}

/* ---------- typography ---------- */
.site-title {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 42px;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
}

.threshold-silence {
    height: 8vh;
}

.descriptor {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.8;
    letter-spacing: 0.02em;
    max-width: 480px;
}

.body-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin-bottom: 1.6em;
}

.body-text:last-child {
    margin-bottom: 0;
}

.section-header {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 28px;
    color: #5c4a38;
    line-height: 1.2;
    margin-bottom: 40px;
    text-align: left;
}

/* ---------- pulled quote ---------- */
.quote-block {
    position: relative;
    padding: 32px 0;
    overflow: hidden;
}

.marble-vein {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pulled-quote {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 24px;
    color: var(--text-primary);
    line-height: 1.5;
    text-align: left;
    letter-spacing: 0;
    padding: 24px 0;
    position: relative;
    z-index: 1;
    quotes: none;
}

/* ---------- horizontal rules ---------- */
.rule {
    border: none;
    display: block;
    width: 100%;
}

.rule-thin {
    height: 1px;
    background: var(--text-secondary);
    margin: 0;
}

.rule-major {
    height: 3px;
    background: var(--accent-deep);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* ---------- section numerals ---------- */
.section-numeral {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 120px;
    color: var(--accent-pale);
    opacity: 0.35;
    line-height: 1;
    display: block;
    position: absolute;
    bottom: 48px;
    right: 24px;
    text-align: right;
    pointer-events: none;
    user-select: none;
}

.numeral-exit {
    color: var(--accent-pale);
    opacity: 0.2;
}

/* ---------- cracked line SVG ---------- */
.cracked-line {
    width: 2px;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100% - 80px);
}

.cracked-column {
    width: 2px;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    height: calc(100% - 80px);
}

.margin-cracked {
    position: relative;
}

/* ---------- fragment photo (section 2) ---------- */
.fragment-zone {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 64px;
    padding-left: 0;
}

.fragment-photo {
    width: 340px;
    margin-left: -40px;
    flex-shrink: 0;
}

.photo-inner {
    width: 100%;
    aspect-ratio: 5 / 3;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--accent-deep);
    filter: contrast(1.15) brightness(0.92) grayscale(1);
    position: relative;
    overflow: hidden;
}

.photo-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.photo-1 {
    background-color: #7a7065;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='240'%3E%3Cdefs%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.6' intercept='0.2'/%3E%3CfeFuncG type='linear' slope='0.55' intercept='0.18'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/defs%3E%3Crect width='400' height='240' filter='url(%23g)'/%3E%3Cline x1='0' y1='60' x2='400' y2='80' stroke='%23555' stroke-width='0.5' opacity='0.3'/%3E%3Cline x1='0' y1='120' x2='400' y2='110' stroke='%23444' stroke-width='0.5' opacity='0.3'/%3E%3Cline x1='0' y1='180' x2='400' y2='175' stroke='%23555' stroke-width='0.3' opacity='0.25'/%3E%3C/svg%3E");
}

/* ---------- archive section (section 4) ---------- */
.section-inner-archive {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    min-height: 100vh;
    border-left: 1px solid var(--surface-light);
    border-right: 1px solid var(--surface-light);
}

.archive-photo {
    width: 100%;
    height: 45vh;
    min-height: 300px;
    overflow: hidden;
}

.photo-2 {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    background-color: #5a5248;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='500'%3E%3Cdefs%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='6' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.55' intercept='0.15'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.13'/%3E%3CfeFuncB type='linear' slope='0.45' intercept='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/defs%3E%3Crect width='1200' height='500' filter='url(%23g2)'/%3E%3Cline x1='0' y1='100' x2='1200' y2='130' stroke='%23666' stroke-width='1' opacity='0.2'/%3E%3Cline x1='0' y1='250' x2='1200' y2='240' stroke='%23555' stroke-width='0.8' opacity='0.2'/%3E%3Cline x1='0' y1='380' x2='1200' y2='370' stroke='%23666' stroke-width='0.6' opacity='0.15'/%3E%3Crect x='200' y='80' width='150' height='200' fill='%23444' opacity='0.15'/%3E%3Crect x='600' y='120' width='200' height='250' fill='%23333' opacity='0.12'/%3E%3C/svg%3E");
    filter: contrast(1.15) brightness(0.92) grayscale(1);
    border: none;
}

.archive-content {
    display: grid;
    grid-template-columns: 80px 1fr 280px;
    flex: 1;
}

/* ---------- definition list (section 5) ---------- */
.definition-list {
    list-style: none;
    margin-bottom: 48px;
}

.def-pair {
    padding: 20px 0;
}

.def-term {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 15px;
    color: var(--accent-mid);
    letter-spacing: 0.15em;
    text-transform: lowercase;
    margin-bottom: 8px;
    display: block;
}

.def-desc {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.8;
    letter-spacing: 0.02em;
    display: block;
    padding-left: 0;
}

/* ---------- framed thought ---------- */
.framed-thought {
    border: 1px solid var(--text-secondary);
    padding: 24px 28px;
    margin-top: 40px;
}

.framed-thought .body-text {
    margin-bottom: 0;
}

/* ---------- exit section ---------- */
.exit-domain {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 11px;
    color: var(--dark-text);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0;
}

.exit-silence {
    height: 12vh;
}

.exit-contact {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 15px;
    color: var(--dark-text);
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin-bottom: 1em;
    opacity: 0.7;
}

.exit-note {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 11px;
    color: var(--dark-text);
    letter-spacing: 0.15em;
    line-height: 1.8;
    margin-bottom: 20px;
    opacity: 0.5;
}

.exit-link {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 15px;
    color: var(--dark-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    letter-spacing: 0.02em;
}

.exit-link:hover {
    opacity: 0.7;
}

.exit-subscribe {
    display: block;
    margin-top: 0;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.exit-deep-silence {
    height: 40vh;
}

.exit-label {
    color: var(--accent-pale);
    opacity: 0.7;
}

/* ---------- section 6 content adjustments ---------- */
.section-6 .content-zone {
    color: var(--dark-text);
}

.section-6 .margin-left {
    border-right: 1px solid rgba(196, 168, 130, 0.2);
}

.section-6 .silence-right {
    border-left: 1px solid rgba(196, 168, 130, 0.2);
}

/* ---------- section 2: warm panel adjustments ---------- */
.section-2 .body-text {
    color: var(--text-primary);
}

.section-2 .margin-left {
    border-right: 1px solid rgba(44, 37, 32, 0.2);
}

.section-2 .silence-right {
    border-left: none;
}

.section-2 .section-inner {
    border-color: rgba(44, 37, 32, 0.2);
}

/* ---------- spring animation (data-spring elements) ---------- */
[data-spring] {
    transform: translateY(24px);
    opacity: 0;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease;
}

[data-spring].is-arrived {
    transform: translateY(0);
    opacity: 1;
}

/* ---------- caption / label text ---------- */
.caption {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 11px;
    color: var(--accent-mid);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ---------- grid structure lines in silence ---------- */
.silence-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background: var(--surface-light);
}

/* ---------- section 4 archive: silence right doesn't apply ---------- */
.section-4 .silence-right {
    display: none;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .section-inner {
        grid-template-columns: 48px 1fr 180px;
    }

    .fragment-photo {
        width: 220px;
        margin-left: -20px;
    }

    .section-numeral {
        font-size: 80px;
    }

    .pulled-quote {
        font-size: 20px;
    }
}

@media (max-width: 640px) {
    .section-inner {
        grid-template-columns: 40px 1fr;
    }

    .silence-right {
        display: none;
    }

    .section-numeral {
        display: none;
    }

    .fragment-zone {
        display: none;
    }

    .content-zone {
        padding: 48px 24px 64px 32px;
    }

    .site-title {
        font-size: 28px;
    }

    .pulled-quote {
        font-size: 17px;
    }

    .archive-content {
        grid-template-columns: 40px 1fr;
    }

    .archive-content .silence-right {
        display: none;
    }
}