/* public/styles.css */
:root{
    /* Type */
    --font-display: "new-spirit", serif;
    --font-text: "apertura", sans-serif;

    /* Colours */
    --bg: #f7f7f5;
    --text: #111111;
    --muted: #4b4b4b;
    --rule: rgba(17, 17, 17, 0.08);

    /* Layout */
    --max: 1080px;
    --pad: clamp(20px, 4vw, 44px);
    --top: clamp(120px, 14vh, 220px);

    /* Type scale */
    --h1: clamp(2.2rem, 3.2vw, 3.2rem);
    --body: 1.0625rem;
    --small: 0.95rem;
}

*{ box-sizing: border-box; }

body{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-text);
    font-size: var(--body);
    line-height: 1.6;

    /* If Apertura variable supports 425, it will use it.
       If not, the browser falls back to the nearest available weight. */
    font-weight: 425;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.page{
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--pad);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header{
    padding-top: 18px;
}

.brand{
    font-weight: 500;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
    opacity: 0.75;
}

.hero{
    padding-top: var(--top);
    padding-bottom: clamp(46px, 8vh, 90px);
}

.hero__title{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--h1);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 18px 0;
    max-width: 18ch;

    /* Better headline breaks on supported browsers */
    text-wrap: balance;
}

.hero__supporting{
    margin: 0 0 22px 0;
    max-width: 62ch;
}

.hero__availability{
    margin: 0 0 26px 0;
    font-size: var(--small);
    line-height: 1.55;
    color: var(--muted);
}

.hero__contact{
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    max-width: 62ch;
}

.meta{
    margin: 10px 0 0 0;
    font-size: var(--small);
    line-height: 1.55;
}

.link{
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.link:hover{
    text-decoration-thickness: 2px;
}

.trust{
    margin: 18px 0 0 0;
    font-size: var(--small);
    line-height: 1.55;
    color: var(--muted);
}

.footer{
    margin-top: auto;
    padding: 18px 0 10px 0;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: var(--small);
}