@media (min-width: 1025px) {

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
    }

    body {
        font-family: "Segoe UI", sans-serif;

        background: #735A52;
        background-image: url("assets/texture.png");
        background-repeat: repeat;
        color: #a09564;
    }

    a {
        color: #a09463;
        text-decoration: none;
    }

    a:hover {
        color: #c0ad68;
        text-decoration: underline;
    }

    a:visited {
        color: #85794b;
    }

    a:active {
        color: #a09463;
    }

    /* ─────────────────────────────────────────
    Header
   ───────────────────────────────────────── */

    .site-header {
        height: 72px;

        display: flex;
        align-items: center;

        padding: 0 2rem;
        background: #3b25084f;
        border-bottom: 3px solid #30200b;
    }

    .site-header h1 {
        font-size: 18px;
        font-weight: 500;
    }


    /* ─────────────────────────────────────────
    Page layout
   ───────────────────────────────────────── */

    .page-layout {
        display: flex;

        height: calc(100vh - 72px);
    }

    .content {
        flex: 1;

        padding: 2rem;

        overflow-y: auto;
    }


    /* ─────────────────────────────────────────
    Main content card
   ───────────────────────────────────────── */

    .content-card {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 2rem;

        width: 100%;
        min-height: 100%;

        padding: 1rem;

        background: #3b25084f;
        border: 3px solid #30200b;
    }


    /* ─────────────────────────────────────────
    Profile
   ───────────────────────────────────────── */

    .profile {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        min-width: 0;
        padding: 1.5rem;

        background: #4b381f;
        border: 3px solid #30200b;
    }

    .profile-image {
        width: 100%;
        height: 250px;

        display: block;

        object-fit: cover;
        object-position: center 30%;

        border: 3px solid #30200b;
        border-radius: 8px;
    }

    /* ─────────────────────────────────────────
    Profile info section
   ───────────────────────────────────────── */

    .profile-info {
        flex: 1;

        display: flex;
        flex-direction: column;
        gap: 1.25rem;

        padding: 1.5rem;
    }

    .profile-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .profile-label {
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #a09564;
    }

    .profile-value {
        font-size: 14px;
        line-height: 1.5;
        color: #c4bc9b;
        overflow-wrap: anywhere;
    }

    /* ─────────────────────────────────────────
    About section
   ───────────────────────────────────────── */

    .about {
        min-width: 0;
        padding: 1.5rem;

        background: #4b381f;
        border: 3px solid #30200b;

        overflow-y: auto;
    }

    .about h2 {
        margin-bottom: 1rem;

        font-size: 16px;
        font-weight: 500;
    }

    .about p {
        margin-bottom: 1rem;

        font-size: 14px;
        line-height: 1.8;

        color: #c4bc9b;
        white-space: pre-line;
    }

    /* ─────────────────────────────────────────
    About quote
   ───────────────────────────────────────── */

    .about-quote {
        padding: 1.25rem;
        border-left: 3px solid #a09564;

        background-color: #a0956444;

        color: #a09564;
    }

    .about-quote p {
        font-size: 14px;
        font-style: italic;
        line-height: 1.7;

        white-space: pre-line;
    }

    .about-quote cite {
        display: block;

        margin-top: 0.75rem;

        font-size: 12px;
        font-style: normal;
        color: #a09564;
    }

    /* ─────────────────────────────────────────
    Projects sidebar
   ───────────────────────────────────────── */

    .projects {
        width: 200px;
        flex-shrink: 0;

        padding: 1.5rem;

        background: #3b25084f;
        border-left: 3px solid #30200b;

        overflow-y: auto;
    }

    .projects h2 {
        margin-bottom: 1rem;

        font-size: 14px;
        font-weight: 500;

        text-transform: uppercase;
        letter-spacing: 0.5px;

        color: #a09564;
    }

    .projects-list {
        list-style: none;
    }

    .projects-list li {
        margin-bottom: 0.5rem;
    }

    .projects-list a {
        display: block;

        padding: 0.75rem 1rem;

        font-size: 14px;
        border-radius: 6px;
        background: #4b381f;
        border: 3px solid #30200b;
    }

    .projects-list a:hover {
        background: #6b502d;
    }

    /* ─────────────────────────────────────────
    Work in progress page
   ───────────────────────────────────────── */

    .wip-page {
        min-height: calc(100vh - 72px);

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 2rem;
    }

    .wip-card {
        width: 100%;
        max-width: 500px;

        padding: 3rem;

        text-align: center;

        background: #4b381fb9;
        border: 3px solid #30200b;
        border-radius: 8px;
    }

    .wip-icon {
        display: block;

        margin-bottom: 1.5rem;

        font-size: 40px;
    }

    .wip-card h2 {
        margin-bottom: 1rem;

        font-size: 22px;
        font-weight: 500;
    }

    .wip-card p {
        margin-bottom: 0.75rem;

        font-size: 14px;
        line-height: 1.7;

        color: #c4bc9b;
    }

    .back-link {
        display: inline-block;

        margin-top: 1.5rem;

        font-size: 14px;
    }
}
































/* ─────────────────────────────────────────
    Mobile
   ───────────────────────────────────────── */

@media (max-width: 1024px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body {
        min-height: 100%;
    }

    body {
        font-family: "Segoe UI", sans-serif;

        background: #735A52;
        background-image: url("assets/texture.png");
        background-repeat: repeat;

        color: #a09564;
    }

    a {
        color: #a09463;
        text-decoration: none;
    }

    a:hover {
        color: #c0ad68;
        text-decoration: underline;
    }

    a:visited {
        color: #85794b;
    }

    a:active {
        color: #a09463;
    }

    /* ─────────────────────────────────────────
        Header
       ───────────────────────────────────────── */

    .site-header {
        min-height: 60px;

        display: flex;
        align-items: center;

        padding: 0 1rem;

        background: #3b25084f;
        border-bottom: 3px solid #30200b;
    }

    .site-header h1 {
        font-size: 17px;
        font-weight: 500;
    }

    /* ─────────────────────────────────────────
        Page
       ───────────────────────────────────────── */

    .page-layout {
        display: block;
        min-height: calc(100vh - 60px);
    }

    .content {
        padding: 1rem;
    }

    /* ─────────────────────────────────────────
        Main card
       ───────────────────────────────────────── */

    .content-card {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        width: 100%;
        min-height: auto;

        padding: 0.75rem;

        background: #3b25084f;
        border: 3px solid #30200b;
    }

    /* ─────────────────────────────────────────
        Profile
       ───────────────────────────────────────── */

    .profile {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        padding: 1rem;

        background: #4b381f;
        border: 3px solid #30200b;
    }

    .profile-image {
        width: 100%;
        height: 220px;

        display: block;

        object-fit: cover;
        object-position: center 30%;

        border: 3px solid #30200b;
        border-radius: 8px;
    }

    .profile-info {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        padding: 0;
    }

    .profile-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .profile-label {
        font-size: 10px;
        font-weight: 500;

        text-transform: uppercase;
        letter-spacing: 0.5px;

        color: #a09564;
    }

    .profile-value {
        font-size: 14px;
        line-height: 1.5;

        color: #c4bc9b;
        overflow-wrap: anywhere;
    }

    /* ─────────────────────────────────────────
        About
       ───────────────────────────────────────── */

    .about {
        padding: 1rem;

        background: #4b381f;
        border: 3px solid #30200b;
    }

    .about h2 {
        margin-bottom: 1rem;

        font-size: 16px;
        font-weight: 500;
    }

    .about p {
        margin-bottom: 1rem;

        font-size: 14px;
        line-height: 1.7;

        color: #c4bc9b;
        white-space: pre-line;
    }

    /* ─────────────────────────────────────────
        Quote
       ───────────────────────────────────────── */

    .about-quote {
        padding: 1rem;

        border-left: 3px solid #a09564;

        background-color: #a0956444;

        color: #a09564;
    }

    .about-quote p {
        font-size: 14px;
        font-style: italic;
        line-height: 1.7;
    }

    .about-quote cite {
        display: block;

        margin-top: 0.75rem;

        font-size: 12px;
        font-style: normal;

        color: #a09564;
    }

    /* ─────────────────────────────────────────
        Projects
       ───────────────────────────────────────── */

    .projects {
        width: auto;

        padding: 1rem;

        background: #3b25084f;
        border-top: 3px solid #30200b;
    }

    .projects h2 {
        margin-bottom: 0.75rem;

        font-size: 14px;
        font-weight: 500;

        text-transform: uppercase;
        letter-spacing: 0.5px;

        color: #a09564;
    }

    .projects-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        list-style: none;
    }

    .projects-list li {
        margin-bottom: 0;
    }

    .projects-list a {
        display: block;

        padding: 0.75rem 1rem;

        font-size: 14px;

        border-radius: 6px;
        background: #4b381f;
        border: 3px solid #30200b;
    }

    .projects-list a:hover {
        background: #6b502d;
    }

    /* ─────────────────────────────────────────
        WIP page
       ───────────────────────────────────────── */

    .wip-page {
        min-height: calc(100vh - 60px);

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 1rem;
    }

    .wip-card {
        width: 100%;

        padding: 2rem 1.5rem;

        text-align: center;

        background: #4b381fb9;
        border: 3px solid #30200b;
        border-radius: 8px;
    }

    .wip-icon {
        display: block;

        margin-bottom: 1.25rem;

        font-size: 36px;
    }

    .wip-card h2 {
        margin-bottom: 1rem;

        font-size: 20px;
        font-weight: 500;
    }

    .wip-card p {
        margin-bottom: 0.75rem;

        font-size: 14px;
        line-height: 1.7;

        color: #c4bc9b;
    }

    .back-link {
        display: inline-block;

        margin-top: 1.25rem;

        font-size: 14px;
    }
}