/* Styles for the hi/ landing pages. The palette and type are copied from
   ../../resume/assets/resume.css rather than imported, since the two pages
   share no components. Every greeting renders through this one sheet,
   however long or short its markdown. */

:root {
    --hi-sans: -apple-system, "Segoe UI", Roboto, sans-serif;
    --hi-mono: "Fira Code", "Cascadia Code", Fixedsys, ui-monospace, "SF Mono",
        "Cascadia Mono", Menlo, Consolas, monospace;

    --page-bg: #e9edf2;
    --surface: #d9e1e8;
    --accent: #1fa8c9;
    --heading: #1c4d63;
    --on-accent: #ffffff;
    --text: #1c2229;
    --muted: #5b6672;
    --border: #c3ccd4;
    --link: #1fa8c9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #12161b;
        --surface: #1c222a;
        --accent: #35d0ef;
        --heading: #7fd8ef;
        --on-accent: #0b1116;
        --text: #e4e9ee;
        --muted: #9aa5b1;
        --border: #333c46;
        --link: #7fd8ef;
    }
}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: "Fira Code";
    src: url("../../fount/Fira_Code_v6.2/woff2/FiraCode-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    background-color: var(--page-bg);
    color: var(--text);
    font-family: var(--hi-sans);
    line-height: 1.5;
}

/* The page is exactly as wide as the greeting's longest body line.
   --hi-cols is that line's length in characters, set per page by index.php,
   and 1ch is one character because the font here is the monospace stack the
   body prose uses. content-box (against the global border-box) keeps padding
   outside that measurement, so the column count stays true and the padding
   can change at any breakpoint without disturbing it. Everything inside is
   width:auto and hugs this one number. */
.hi-page {
    /* One offset for both .hi-photo and .hi-greeting, so their top edges
       land on the same line regardless of what it's set to. */
    --hi-top-pad: 0;
    --hi-photo-size: 8.5rem;
    --hi-photo-gutter: 2.25rem;

    container-type: inline-size;

    box-sizing: content-box;
    font-family: var(--hi-mono);
    width: calc(var(--hi-cols, 74) * 1ch);
    max-width: calc(100% - 3rem);
    margin: 0 auto;
    padding: 4rem 1.5rem 5rem;
    text-align: left;
}

/* The floated photo would otherwise eat into the body's column count and
   re-wrap prose whose line breaks are deliberate, so the page grows by the
   photo's whole footprint and the text keeps its --hi-cols characters. */
.hi-page:has(.hi-photo) {
    width: calc(
        var(--hi-cols, 74) * 1ch + var(--hi-photo-size) + var(--hi-photo-gutter)
    );
}

/* object-position favors the top so a portrait source keeps the face when
   the frame is square. */
.hi-photo {
    float: right;
    width: var(--hi-photo-size);
    /* height: 18.5rem; */
    margin: var(--hi-top-pad) 0 1rem var(--hi-photo-gutter);
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 3px solid var(--surface);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* The greeting and the link chips stay in the sans stack. Only the body
   prose is monospace; .hi-page wears the monospace font so its 1ch means a
   body character, and these two opt back out. */
.hi-greeting {
    margin: var(--hi-top-pad) 0 0;
    color: var(--heading);
    font-family: var(--hi-sans);
    font-size: 2rem;
    line-height: 1.2;
}

.hi-body {
    margin-top: 0.75rem;
}

/* pre-wrap keeps the two spaces after each sentence, which are already in
   the markup and would otherwise be collapsed to one on render. Text still
   wraps normally; the only thing preserved is runs of spaces. Newlines
   cannot smuggle in extra breaks here, because a paragraph's own line
   breaks arrive as <br> rather than as literal newlines. */
.hi-body > p {
    color: var(--muted);
    white-space: pre-wrap;
}

.hi-body a {
    color: var(--link);
    text-decoration: underline;
}

.hi-body img,
.hi-body video {
    max-width: 100%;
    height: auto;
    max-height: 25rem;
}

.hi-body table {
    width: max-content;
    max-width: 100%;
    border-collapse: collapse;
}

.hi-body th,
.hi-body td {
    padding: 0.4rem 0.6rem;
    text-align: left;
}

.hi-body pre {
    overflow-x: auto;
    padding: 0.75rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
}

/* clear drops the row below the photo, so a short greeting cannot leave the
   chips tucked up beside it. */
.hi-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    clear: both;
    gap: 0.6rem;
    margin-top: 2.5rem;
    font-family: var(--hi-sans);
}

/* Page-wide default so a link renders consistently wherever it turns up in
   a greeting's prose. .hi-link still wins for the chips. */
a {
    color: var(--link);
    text-decoration: underline;
    font-size: smaller;
}

@container (max-width: 50rem) {
    .hi-body > p br {
        display: none;
    }
}

@container (max-width: 32rem) {
    .hi-page:has(.hi-photo) {
        width: auto;
    }

    .hi-photo {
        display: block;
        float: none;
        margin: 0 0 1rem;
    }

    .hi-page {
        padding: 2.5rem 1rem 3rem;
    }

    .hi-greeting {
        font-size: 1.6rem;
    }
}