/* Reset text rendering and hyphenation on common text elements */
body, p, h2, h3, h4, h5, h6, a, li, span {
    hyphens: none;
}

/* Ensure full viewport height */
html,
body {
    min-height: 100vh;
}

/* Colour variables */
:root {
    --bg: #050505;
    --text: #d8d8d8;
    --logo: #ececec;

    /* Frame geometry */
    --frame-gap: 2rem;              /* mirrored outer frame gap (left/right/bottom) */
    --text-inset-mobile: 2rem;      /* mobile content inset */
    --text-inset-wide: 4rem;        /* default desktop text inset */
    --text-inset-mid: 6rem;         /* middle desktop inset to balance logo/image gap */

    /* Vertical composition (optical centring) */
    --top-inset-desktop-mid: 8.5rem;
    --top-inset-desktop-wide: 15rem;

    /* Text measure */
    --measure-mid-min: 60ch;
    --measure-mid-max: 72ch;
    --measure-wide: 74ch;

    /* Micro spacing */
    --contact-indent: 1rem;
    --contact-indent-wide: 1.25rem;
}

/* Base background + root type control */
html {
    background: var(--bg);
    font-size: 93.75%; /* 15px relative to 16px default */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Body base styles */
body {
    margin: 0 auto;
    padding: 0;
    font-size: 1rem;
    font-family: Helvetica, Arial, "Helvetica Neue", sans-serif; /* Helvetica > Arial > Helvetica Neue */
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main content container */
main {
    width: auto;
    margin: 0 auto;
    border: 0;
    padding: 1rem var(--text-inset-mobile) 2rem var(--text-inset-mobile);
}

/* Contact section spacing and alignment */
#contact {
    margin-top: 3rem;
    text-align: left;
}

#contact p {
    margin-left: var(--contact-indent);
}

/* Aside styling */
aside {
    width: 100%;
    max-width: calc(100vw - var(--frame-gap));
    margin: 0 auto;
    padding: 1rem 0 0 0;
    background-color: transparent;
    margin-bottom: 1.5rem;
}

/* Footer styling */
footer {
    margin: 0 0 1rem var(--text-inset-mobile);
    padding: 0;
    text-transform: uppercase;
    letter-spacing: normal; /* prevent inheritance into logo */
    background: transparent;
}

/* Main heading defaults */
h1 {
    display: none;
    margin: 0;
    padding: 0;
}

/* Logo styling isolated to footer h1 */
footer h1 {
    display: none; /* hidden on smallest viewport */
    margin: 0;
    padding: 0;
    color: var(--logo);
    font-size: 1rem;
    font-weight: 700;
	font-synthesis: none;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Secondary headings */
h2 {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.05rem;
    margin: 2rem 0 1rem 0;
    text-transform: none;
}

/* Paragraphs */
p {
    color: var(--text);
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    line-height: calc(5 / 4); /* 1.25 */
    margin: 0;
}

/* Vertical rhythm between paragraphs */
p + p {
    margin-top: calc(7 / 10 * 1rem); /* 0.75rem */
}

/* Links */
a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 212, 212, 0.28);
    padding-bottom: 0.04em;
}

a:hover {
    border-bottom-color: rgba(212, 212, 212, 0.48);
    color: var(--logo);
}

/* Images */
img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Medium screens and up */
@media only screen and (min-width: 800px) {
    footer h1 {
        display: block;
    }

    main {
        padding: 2rem var(--text-inset-wide) 2rem var(--text-inset-wide);
    }

    footer {
        margin-left: var(--text-inset-wide);
    }
}

/* Desktop split layout (middle viewport behaviour) */
@media only screen and (min-width: 900px) {
    body {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
    }

    aside {
        height: calc(100vh - calc(var(--frame-gap) * 2));
        max-height: 100vh;
        background-color: transparent;
        padding: var(--frame-gap) var(--frame-gap) 0 0; /* right frame gap mirrored */
        margin: 0;
        flex: 1;
    }

    main {
        /* Optical centring for middle desktop composition */
        padding: var(--top-inset-desktop-mid) var(--text-inset-wide) 4rem var(--text-inset-mid);
        margin: 0;
        text-align: left;
        flex: 1;
    }

    /* Vertical logo, vertically centred on middle desktop viewports */
    footer {
        position: fixed;
        left: var(--frame-gap);
        top: 50%;
        bottom: auto;
        right: auto;
        width: auto;
        margin: 0;
        background-color: transparent;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: translateY(-50%) rotate(180deg);
        transform-origin: center center;
        text-align: left;
    }

    footer h1 {
        white-space: nowrap;
    }

    #bio,
    #contact {
        max-width: clamp(var(--measure-mid-min), 70%, var(--measure-mid-max));
    }
}

/* Extra large screens (largest viewport behaviour) */
@media only screen and (min-width: 1500px) {
    #bio {
        max-width: var(--measure-wide);
        margin: 0 auto;
        text-align: left;
    }

    #contact {
        max-width: var(--measure-wide);
        margin: 2.5rem auto 0 auto;
        text-align: left;
    }

    #contact p {
        margin-left: var(--contact-indent-wide);
    }

    /* Horizontal logo, mirrored to image frame margins */
    footer {
        position: fixed;
        left: var(--frame-gap);   /* exact mirror of image right gap */
        bottom: var(--frame-gap); /* exact mirror of image bottom gap */
        top: auto;
        right: auto;
        width: auto;
        margin: 0;
        background-color: transparent;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        transform: none;
        text-align: left;
    }

    footer h1 {
        white-space: nowrap;
    }

    /* Optical centring for widest composition */
    main {
        padding: var(--top-inset-desktop-wide) var(--text-inset-wide) 4rem var(--text-inset-wide);
    }
}