/* ==========================================================================
   Homepage
   Loaded only on the front page.

   Design rules, in order of priority:

   1. One fact, one place. If something here repeats what the paragraph above
      already said, delete it rather than styling it.
   2. Whitespace is the layout. The old version filled the width with a facts
      card because 608px were empty. Empty is allowed.
   3. Three type sizes and two text colours. Nothing is set in opacity, because
      opacity on small dark text measured under 3:1 contrast.
   4. Hairlines instead of boxes. Sections are separated by a 1px rule, not by
      shadowed cards stacked on shadowed cards.
   5. Mobile first. One breakpoint at 640px, one at 900px. Nothing fixed-width,
      so nothing can overflow a phone.
   ========================================================================== */

:root {
    --home-ink: #09090b;      /* headings */
    --home-body: #27272a;     /* paragraphs */
    --home-muted: #52525b;    /* secondary text, measured 7.3:1 on #f4f4f5 */
    --home-line: #e4e4e7;     /* hairlines */
    --home-live: #15803d;     /* availability dot */
}

/* Screen-reader-only text: gives repeated links ("Source on GitHub") a unique
   accessible name without printing the project name twice. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- The column ----------------------------------------------------------
   The sitewide container is 1144px. Text is not more readable at 1144px, so
   an earlier version left the right-hand 600px empty and it read as a broken
   layout rather than as restraint.

   The homepage is now a deliberate 720px column, centred. Empty space sits
   symmetrically on both sides, which the eye reads as a decision. Everything
   on the page lives inside it, at one width, so there is a single left edge
   from the name down to the footer. */

.home main > .container {
    max-width: 720px;
}

/* --- Hero ----------------------------------------------------------------
   A single left-aligned column. Not a grid, not two columns, no side card.
   Reading order top to bottom is: who, where, what she does, when she is
   free, one thing to click. */

.hero {
    margin-bottom: 4rem;
}

/* Bigger than the sitewide avatar. This is the only image on the page and it
   is the first thing a recruiter looks at, so it gets the room. */
.hero .author-avatar {
    width: 6rem;
    height: 6rem;
    padding: 0;
    box-shadow: none;
    border: 1px solid var(--home-line);
    margin-bottom: 1.75rem;
}

.hero-name {
    font-size: clamp(2.125rem, 8vw, 3.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--home-ink);
}

.hero-role {
    margin-top: 0.625rem;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--home-muted);
}

.hero-sep {
    margin: 0 0.4em;
    color: #a1a1aa;
}

.hero-bio {
    margin-top: 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--home-body);
    /* Past ~60 characters the eye loses the start of the next line. */
    max-width: 60ch;
}

/* Two short lines, not one run-on sentence. What she wants, then when.
   Both date ranges on one line after "open to a junior iOS role" measured as
   an unreadable 25-word sentence in a 15px grey. */
.hero-available {
    margin-top: 1.5rem;
}

.hero-status {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 550;
    line-height: 1.5;
    color: var(--home-ink);
}

.hero-status-detail {
    /* Lines up with the status text above, past the dot. */
    padding-left: 1.05rem;
    margin-top: 0.2rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--home-muted);
}

.hero-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    /* baseline alignment puts a bare circle too low; nudge it onto the x-height */
    transform: translateY(-0.15em);
    border-radius: 50%;
    background: var(--home-live);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.14);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

/* --- Buttons -------------------------------------------------------------
   Exactly one filled button per screen. Everything else is a quiet text
   link, so there is never a question about where to click first. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* 44px minimum touch target: below that, thumbs miss. */
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 550;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.btn svg,
.btn-quiet svg {
    flex: 0 0 auto;
}

.btn-primary {
    background: var(--home-ink);
    color: #ffffff;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(9, 9, 11, 0.18);
}

.btn-quiet {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--home-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.btn-quiet:hover {
    color: var(--home-ink);
    border-bottom-color: currentColor;
}

.btn:focus-visible,
.btn-quiet:focus-visible {
    outline: 2px solid var(--home-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Sections ------------------------------------------------------------
   A hairline sets the rhythm. No section is a box. */

.home-section {
    margin-top: 3.5rem;
    padding-top: 3.5rem;
    border-top: 1px solid var(--home-line);
}

.section-head {
    margin-bottom: 2rem;
}

.section-head h2 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--home-ink);
}

.section-note {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--home-muted);
    max-width: 58ch;
}

/* --- Work ----------------------------------------------------------------
   Teaser only: name, one line of what it is, one short paragraph, the stack,
   the repo. The feature bullets that used to live here are on the CV page.
   A homepage card that has to be scrolled is not a card. */

.work-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.work-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--home-line);
    border-radius: 1rem;
    background: var(--color-primary);
    /* minmax(0,1fr) plus this keeps a long unbroken token, like a repo URL,
       from pushing the grid wider than the screen. */
    min-width: 0;
    overflow-wrap: anywhere;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.work-card:hover {
    border-color: #c4c4cc;
    transform: translateY(-2px);
}

.work-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--home-ink);
}

.work-card-tagline {
    margin-top: 0.3rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--home-muted);
}

.work-card-summary {
    margin-top: 0.9rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--home-body);
}

.work-card-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin-top: 1.1rem;
}

/* The root scale is 87.5% on desktop, so rem values render smaller than they
   read in the stylesheet: 0.75rem was 10.5px and 0.8125rem was still 11.4px.
   0.875rem is the first step that clears 12px, the floor for chip text. */
.work-card-stack li,
.post-grid .post-tag {
    font-size: 0.875rem;
    font-weight: 550;
    line-height: 1.4;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--home-line);
    color: var(--home-muted);
}

/* The sitewide post tag is uppercase, the project tags are not. Two tag
   styles on one page reads as two designers. Uppercase also mangles the
   framework names ("SWIFTUI"), so the homepage keeps real casing. */
.post-grid .post-tag {
    text-transform: none;
    letter-spacing: 0;
    /* "Swift and Concurrency" wrapped to two lines inside the pill, which made
       the chip twice as tall as the project tags beside it. */
    white-space: nowrap;
    /* The sitewide chip carries margin-left for an inline position after the
       title. On the homepage it starts its own row, so the indent is wrong. */
    margin-left: 0;
}

.work-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    /* Pushes the link to the bottom so two cards of different length still
       line their links up. */
    margin-top: auto;
    padding-top: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--home-ink);
}

.work-card-link span {
    border-bottom: 1px solid var(--home-line);
}

.work-card-link:hover span {
    border-bottom-color: currentColor;
}

.work-card-link:focus-visible {
    outline: 2px solid var(--home-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Writing grid --------------------------------------------------------
   The sitewide blog index lays .post-grid out in four columns. The homepage
   shows two posts, so on the front page that produced two 158px-wide cards
   with 342px of dead space beside them, and both titles were clamped
   mid-sentence ("Swift 6.2 MainActor by Default: What Chan...").
   Measured on production at 1440px, not guessed.

   Two columns here, not one like the project cards: the writing is secondary
   to her actual work, and full-width note cards would outweigh the projects a
   recruiter came to see. */
.post-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Sitewide the title is clamped to two lines with a fixed max-height. At the
   homepage width the current titles fit, but leaving the clamp means the next
   long title silently truncates again. Three lines, height follows the text. */
.post-grid .post-card-title {
    -webkit-line-clamp: 3;
    max-height: none;
}

/* --- Contact -------------------------------------------------------------
   The closing block, not a shouting banner. Same hairline as every other
   section, so the page ends calmly. */

.home-contact h2 {
    font-size: clamp(1.375rem, 4vw, 1.75rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--home-ink);
    max-width: 32ch;
}

.home-contact p {
    margin-top: 0.9rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--home-body);
    max-width: 54ch;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.75rem;
}

/* --- Larger screens ------------------------------------------------------ */

@media (min-width: 640px) {
    .hero {
        margin-bottom: 5rem;
    }

    .hero .author-avatar {
        width: 7.5rem;
        height: 7.5rem;
    }

    /* Deliberately NOT two columns. Inside a 720px column two project cards
       would be ~340px each, which orphans the last stack tag on its own line
       and squeezes the summary to four words a line. One card per row, full
       width, is calmer and lets each project be read rather than scanned. */
    .work-grid {
        gap: 1.25rem;
    }

    .work-card {
        padding: 1.75rem;
    }

    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .home-section {
        margin-top: 4.5rem;
        padding-top: 4.5rem;
    }
}

@media (min-width: 900px) {
    /* The content column is ~1144px wide. Text does not get more readable
       at 1144px, so the hero and the section intros stay narrow and the
       right-hand space is left alone on purpose. */
    .section-head h2 {
        font-size: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .work-card {
        transition: none;
    }

    .btn-primary:hover,
    .work-card:hover {
        transform: none;
    }
}

/* --- Print --------------------------------------------------------------- */

@media print {
    .hero-actions,
    .contact-links,
    .work-card-link {
        display: none;
    }

    .work-card {
        border: 1px solid #999;
        break-inside: avoid;
    }
}