/* Shared "paper" look: unfolded wrapper, loose rope, back button (portfolio + info pages) */
:root {
        --paper: #dddddd;
        --card: #ececE6;
        --ink: #1a1a1a;
        --crease: 2px dotted var(--ink);
    }
    * { box-sizing: border-box; }
    body {
        margin: 0;
        padding: 48px 20px 140px;
        background: #d1d1d1;
        color: var(--ink);
        font-family: Janson, 'Times New Roman', Times, serif;
        min-height: 100vh;
    }

    /* ---- the unfolded wrapper: a centre panel with four flaps folded out ---- */
    .sheet {
        position: relative;
        display: grid;
        grid-template-columns: 120px minmax(0, 560px) 120px;
        grid-template-rows: 90px auto 90px;
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .18));
    }
    /* flaps: outline comes from stacked 1px drop-shadows, so any clipped shape gets a crisp edge */
    .flap {
        filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink))
                drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink));
    }
    .flap::before { content: ''; display: block; width: 100%; height: 100%; background: var(--paper); }
    .flap-top    { grid-column: 2; grid-row: 1; }
    .flap-bottom { grid-column: 2; grid-row: 3; }
    .flap-left   { grid-column: 1; grid-row: 2; }
    .flap-right  { grid-column: 3; grid-row: 2; }
    .flap-top::before    { clip-path: polygon(0 100%, 50% 0, 100% 100%); }
    .flap-bottom::before { clip-path: polygon(0 0, 50% 100%, 100% 0); }
    .flap-left::before   { clip-path: polygon(100% 0, 0 90px, 0 calc(100% - 90px), 100% 100%); }
    .flap-right::before  { clip-path: polygon(0 0, 100% 90px, 100% calc(100% - 90px), 0 100%); }

    .panel {
        grid-column: 2; grid-row: 2;
        background: var(--paper);
        border: var(--crease);
        padding: 22px 26px 34px;
        position: relative;
    }
    h1 {
        margin: 0 0 22px;
        padding-bottom: 16px;
        border-bottom: var(--crease);
        font-size: 2.1rem;
        font-weight: normal;
        text-align: center;
    }

    /* the rope lies loose on the paper, as if just untied (the bow is for a still-folded package) */
    .rope { position: absolute; pointer-events: none; z-index: 20; user-select: none; }
    .rope { width: 430px; left: 40px; bottom: -150px; transform: rotate(4deg); }

    @media (max-width: 860px) {
        body { padding: 28px 12px 130px; }
        .sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px auto 56px; width: 100%; }
        .flap-left, .flap-right { display: none; }
        .flap-top, .flap-bottom, .panel { grid-column: 1; }
        .panel { padding: 18px 14px 28px; }
        h1 { font-size: 1.6rem; }
        .rope { width: 280px; left: -10px; bottom: -110px; }
    }

    /* back button (folded-envelope glyph, bottom left) */
    .back-button {
        position: fixed; bottom: 20px; left: 20px;
        width: 180px; height: 180px;
        transform: rotate(-90deg);
        z-index: 1000;
    }
    .back-button svg { display: block; width: 100%; height: 100%; }
    @media (max-width: 768px) { .back-button { width: 120px; height: 120px; } }
    @media (max-width: 480px) { .back-button { width: 64px; height: 64px; bottom: 12px; left: 12px; } }