/* Hello Page - A Free Design by Bryant Smith (bryantsmith.com)
   A small homepage built as a split screen: a big greeting on the left,
   a short introduction and a line of links on the right.
   Every colour and spacing value used on the page is gathered here.
   Look for the section headings below to find what you want to change. */


/* ---- RESET & BODY: the warm desk behind the page ---- */

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

body {
    background: #eceae4;
    color: #24263f;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 17px;
    line-height: 1.7;
    padding: 56px 20px;             /* 8px scale */
    -webkit-font-smoothing: antialiased;
}


/* ---- PAGE SHELL: the centred card, with a soft shadow ---- */

#page {
    background: #fbf9f5;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(28, 27, 58, 0.08),
                0 28px 60px rgba(28, 27, 58, 0.14);
    margin: 0 auto;                 /* centres the card in the window */
    max-width: 900px;
    overflow: hidden;               /* lets the panels take the rounded corners */
}


/* ---- TOP BAR: brand mark on the left, menu on the right ---- */

#topbar {
    align-items: center;
    border-bottom: 1px solid #e7e3da;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    padding: 22px 40px;
}

.brand {
    align-items: center;
    color: #16152f;
    display: inline-flex;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    gap: 10px;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
}

.brand::before {                   /* the small accent dot */
    background: #ff6a4d;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 12px;
    width: 12px;
}

.brand:hover {
    color: #ff6a4d;
}

#menu {
    display: flex;
    flex-wrap: wrap;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    gap: 22px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

#menu a,
#menu a:visited {
    border-bottom: 2px solid transparent;
    color: #6b6e85;
    padding-bottom: 2px;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#menu a:hover,
#menu a:focus {
    border-bottom-color: #ff6a4d;
    color: #16152f;
}


/* ---- SPLIT: the two panels side by side ---- */

#split {
    display: flex;
}


/* ---- LEFT PANEL: the large greeting, centred with flex ---- */

#hello {
    align-items: center;
    background: radial-gradient(circle at 20% 12%, #3a3168 0%, #211f43 46%, #16152f 100%);
    color: #fdfbf7;
    display: flex;
    flex: 0 0 44%;
    flex-direction: column;
    justify-content: center;        /* vertical centring */
    overflow: hidden;
    padding: 88px 40px;
    position: relative;
    text-align: center;             /* horizontal centring */
}

#hello::after {                    /* decorative ring, pure CSS */
    border: 2px solid rgba(255, 106, 77, 0.38);
    border-radius: 50%;
    bottom: -70px;
    content: "";
    height: 180px;
    position: absolute;
    right: -70px;
    width: 180px;
}

.kicker {
    color: #b7b2dc;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

#hello h1 {
    color: #fdfbf7;
    font-size: clamp(64px, 12vw, 118px);   /* fluid, but never tiny */
    font-weight: normal;
    letter-spacing: -3px;
    line-height: 0.95;
}

#hello h1 .dot {
    color: #ff6a4d;
}

.hello-sub {
    color: #cfcae8;
    font-size: 18px;
    font-style: italic;
    margin-top: 24px;
}


/* ---- RIGHT PANEL: the owner's words, links and how-to ---- */

#intro {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding: 56px 48px;
}

.lead {
    color: #2c2e49;
    font-size: 20px;
    line-height: 1.75;
    margin-bottom: 28px;
}

.lead strong {
    color: #16152f;
}

.favourites {
    border-bottom: 1px solid #e7e3da;
    border-top: 1px solid #e7e3da;
    color: #8b8ea8;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 1.9;
    margin-bottom: 32px;
    padding: 16px 0;
}

.favourites .label {
    color: #a2a4bb;
    font-size: 10px;
    letter-spacing: 2px;
    margin-right: 10px;
    text-transform: uppercase;
}

.favourites a,
.favourites a:visited {
    border-bottom: 1px solid #d9d5cc;
    color: #24263f;
    padding-bottom: 1px;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;            /* keep each link on one line */
}

.favourites a:hover,
.favourites a:focus {
    border-bottom-color: #ff6a4d;
    color: #ff6a4d;
}

.sep {
    color: #c8c4bb;
    margin: 0 7px;
}

.howto {
    background: #f3f1ea;
    border-left: 3px solid #ff6a4d;
    border-radius: 0 8px 8px 0;
    padding: 18px 22px;
}

.howto h2 {
    color: #24263f;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.howto p {
    color: #555873;
    font-size: 14px;
    line-height: 1.65;
}


/* ---- FOOTER: the required credit link ---- */

#footer {
    border-top: 1px solid #e7e3da;
    color: #9a9db2;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 22px 40px 26px 40px;
    text-align: center;
    text-transform: uppercase;
}

#footer a,
#footer a:visited {
    border-bottom: 1px solid #d9d5cc;
    color: #6b6e85;
    text-decoration: none;
}

#footer a:hover {
    border-bottom-color: #ff6a4d;
    color: #ff6a4d;
}


/* ---- TABLETS: stack the two panels into one column ---- */

@media (max-width: 780px) {
    #split {
        flex-direction: column;
    }

    #hello {
        flex: 0 0 auto;
        padding: 72px 32px;
    }

    #intro {
        padding: 48px 32px;
    }
}


/* ---- SMALL SCREENS: tighten padding and type on phones ---- */

@media (max-width: 640px) {
    body {
        padding: 24px 12px;
    }

    #topbar {
        padding: 18px 22px;
    }

    #menu {
        font-size: 10px;
        gap: 14px;
    }

    #hello {
        padding: 56px 24px;
    }

    #intro {
        padding: 36px 24px;
    }

    .lead {
        font-size: 18px;
    }
}


/* ---- PRINT: drop the shadows and tints for clean paper ---- */

@media print {
    body {
        background: #ffffff;
        padding: 0;
    }

    #page {
        border-radius: 0;
        box-shadow: none;
        max-width: 100%;
    }

    #topbar {
        display: none;
    }

    #split {
        display: block;
    }

    #hello {
        background: #ffffff;
        border-bottom: 2px solid #000000;
        color: #000000;
        padding: 24px 0;
    }

    #hello h1,
    #hello h1 .dot,
    .kicker,
    .hello-sub {
        color: #000000;
    }
}