/* Root domain homepage (justinhankins.com) — standalone static page.
 * Real classes/tokens throughout (see css/tokens.css) — no inline styles,
 * no invented one-off variables. Breakpoints follow the theme's two
 * sanctioned values: 950px (desktop/tablet) and 600px (mobile). See
 * CLAUDE.md CSS Standards + zLocalDevFiles/Blockhank-Master-Reference-2026.md.
 */

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

body {
    /* Matches css/blocparty.css's real body rule exactly (font-weight:light,
       line-height:1.6 literal) — this page had drifted from it (was using
       the default * font-weight reset instead of light, --line-height-normal
       (1.5) instead of the real 1.6, and a -webkit-font-smoothing override
       the real theme doesn't set at all — that override was making text
       render visibly thinner than production at the same font-weight). */
    font-family: var(--font-sans);
    font-weight: var(--font-weight-light);
    color: var(--text-dark);
    background: var(--bg-light);
    letter-spacing: var(--letter-spacing-body);
    line-height: 1.6;
}

a {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: 1px solid var(--link-underline);
    transition: var(--transition-border);
}
a:hover {
    border-bottom-color: var(--link-underline-hover);
}

/* ============================================
   HEADER
   ============================================ */
.root-home__header {
    background: var(--bg-dark);
    min-height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-lg);
}

.root-home__header-logo {
    border-bottom: none;
    display: flex;
    align-items: center;
}
.root-home__header-logo img {
    /* Mirrors css/nav.css .nav__logo-img sizing (75px tall, intentionally
       taller than --nav-height/the header's min-height, per the theme's
       nav pattern). Our logo asset is already white, so no invert filter
       needed here. */
    display: block;
    height: 75px;
    width: auto;
}

/* Mirrors css/nav.css .nav__link / .nav__link--cta — kept here since this
   page ships standalone and can't @import that file. */
.root-home__header-cta {
    background-color: var(--color-highlight);
    color: var(--text-white);
    font-family: var(--font-sans);
    font-size: var(--font-size-common-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    border-bottom: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.root-home__header-cta:hover {
    background-color: var(--color-highlight-hover);
}
.root-home__header-cta::after {
    content: " ⟩";
    margin-left: 8px;
}

/* ============================================
   HERO
   ============================================ */
.root-home__hero {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
    display: grid;
    grid-template-columns: minmax(0,400px) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: stretch;
}

.root-home__portrait {
    /* No fixed aspect-ratio: align-items:stretch above lets this column
       match the intro column's full height (h1 + paragraph + ventures).
       position:relative + the img below being position:absolute takes the
       img out of normal flow entirely, so it contributes NO intrinsic
       height of its own to the grid row's auto-height calculation — only
       the text column does. Without this, the img's own natural photo
       ratio would still get used as a size floor once the text column
       shrinks shorter than that ratio, and the photo would stop shrinking
       with it. */
    position: relative;
    background: var(--bg-white);
    overflow: hidden;
}
.root-home__portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.root-home__portrait--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-lightest-gray);
    color: var(--text-light-gray);
    font-size: var(--font-size-xs);
    text-align: center;
    padding: var(--space-sm);
}

.root-home__intro {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.root-home__h1 {
    font-family: var(--font-serif-heading);
    font-weight: var(--font-weight-normal);
    font-size: clamp(1.65rem, 2.6vw, 2.1rem);
    font-size: clamp(1.48rem, 2.34vw, 1.89em);
    font-size: clamp(2.475rem, 3.9vw, 3.15em);
    font-size: clamp(2.06rem, 3.25vw, 2.625em);
    line-height: var(--line-height-heading);
    color: var(--text-dark);
    text-wrap: pretty;
}

.root-home__intro-text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-body);
    color: var(--text-dark);
    text-wrap: pretty;
}

/* Venture link rows */
.root-home__ventures {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-top: var(--space-xs);
}

.root-home__venture {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-lg);
    display: grid;
    grid-template-columns: minmax(0, 215px) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: center;
}

.root-home__venture-mark {
    display: flex;
    align-items: center;
    border-bottom: none;
    opacity: 1;
    transition: var(--transition-base);
}
.root-home__venture-mark:hover {
    opacity: 0.6;
}

.root-home__venture-mark--weddings img {
    height: auto;
    width: 100%;
    max-width: 200px;
    display: block;
    object-fit: contain;
    filter: brightness(0);
    opacity: 0.88;
}

.root-home__venture-mark--nicepart {
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.root-home__nicepart-word {
    font-family: "playfair-display", Georgia, serif;
    font-size: clamp(1.5rem, 16cqw, 2.3rem);
    line-height: 1.02;
    letter-spacing: -0.005em;
    white-space: nowrap;
}
.root-home__nicepart-word .is-muted { font-weight: 400; color: var(--text-gray); }
.root-home__nicepart-word .is-accent { font-weight: 900; font-style: italic; color: var(--text-dark); }
.root-home__nicepart-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
    color: var(--text-gray);
}

.root-home__venture-desc {
    min-width: 0;
    font-size: var(--font-size-common);
    line-height: var(--line-height-relaxed);
    color: var(--text-gray);
}

/* ============================================
   BIO (dark section)
   ============================================ */
.root-home__bio--dark {
    background: var(--bg-dark);
    color: var(--text-white);
}
.root-home__bio--dark a {
    color: var(--text-white);
    border-bottom-color: var(--link-underline-on-dark);
}
.root-home__bio--dark a:hover {
    border-bottom-color: var(--link-underline-hover-on-dark);
}

.root-home__bio-wrap {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: var(--space-2xl);
    align-items: center;
}

.root-home__bio-text {
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);
    color: var(--overlay-white-opaque);
    text-wrap: pretty;
}

.root-home__bio-photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   INFO GRID (Currently / Previously / Education / Featured In)
   ============================================ */
.root-home__info {
    background: var(--bg-white);
}

.root-home__info-grid {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    display: grid;
    grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
    gap: 0 var(--space-2xl);
    align-items: start;
}

.root-home__info-row {
    border-top: 1px solid var(--border-color);
    padding: var(--space-lg) 0;
}
.root-home__info-grid > .root-home__info-row:nth-child(-n+2) {
    border-top: none;
    padding-top: 0;
}

/* Mirrors css/blocparty.css .meta-label — kept here since this page ships
   standalone and can't @import that file. Keep in sync with the source. */
.root-home__eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var( --font-size-common-sm);
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    color: var(--text-light-gray);
}

/* Mirrors css/contact-form.css .contact-layout__thank-you ul/li/::marker —
   the theme's existing "bulleted content list" pattern (muted marker color
   rather than the accent orange, per the theme's restrained accent use). */
.root-home__info-list {
    list-style: disc;
    margin: 0;
    padding-left: var(--space-md);
    font-size: var(--font-size-common);
    line-height: var(--line-height-body);
    color: var(--text-dark);
}
.root-home__info-list li {
    margin-bottom: 6px;
}
.root-home__info-list li:last-child {
    margin-bottom: 0;
}
.root-home__info-list li::marker {
    color: var(--text-light-gray);
}

.root-home__history {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.root-home__history-item {
    display: flex;
    gap: var(--space-md);
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
}
.root-home__history-role {
    font-family: var(--font-serif-heading);
    font-size: var(--font-size-md);
    color: var(--text-gray);
}
.root-home__history-dates {
    font-size: var(--font-size-sm);
    letter-spacing: 0.08em;
    color: var(--text-light-gray);
}

.root-home__logo-grid {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}
.root-home__logo-grid--education { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.root-home__logo-grid--featured { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }

.root-home__logo-slot { height: 100px; }
.root-home__logo-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Source PNGs are white-on-transparent (same base asset the press-logos
       block uses). Mirrors css/press-logos.css's light/white-background
       treatment: invert white logos to dark so they read on this section's
       light bg, instead of shipping separate light/dark asset variants. */
    filter: invert(1) opacity(0.6);
    transition: filter 0.3s ease;
}
.root-home__logo-slot img:hover {
    filter: invert(1) opacity(0.8);
}

/* ============================================
   FOOTER — mirrors css/blocparty.css .footer-bloc* (Follow + Contact
   columns only, per footer.php). Kept here since this page ships
   standalone and can't @import that file; keep in sync with the source.
   ============================================ */
.footer-bloc {
    background-color: var(--bg-foot);
    color: var(--text-lightest-gray);
    border-top: 1px solid var(--border-lightest-gray);
}

.footer-bloc__top {
    max-width: var(--container-wide);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 2rem;
    padding: 3rem;
}

.footer-bloc__title {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-normal);
    font-size: var(--space-sm);
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: var(--space-xs);
}

.footer-bloc__social {
    display: flex;
    gap: var(--space-sm);
}
.footer-bloc__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--social-bg);
    color: var(--text-lightest-gray);
    text-decoration: none;
    border-bottom: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}
.footer-bloc__social-link:hover {
    background-color: var(--social-hover);
    color: var(--text-white);
    transform: translateY(-2px);
}

.footer-bloc__contact-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-bottom: 0.75rem;
    font-size: var(--font-size-sm);
}
.footer-bloc__contact-item span {
    color: var(--text-light-gray);
    flex-shrink: 0;
}
.footer-bloc__contact-item a {
    color: var(--text-lightest-gray);
    text-decoration: none;
    border-bottom: none;
}
.footer-bloc__contact-item a:hover {
    color: var(--text-white);
}

.footer-bloc__bottom {
    background-color: #111317;
    padding: 1.5rem 3rem;
    text-align: center;
    border-top: 1px solid #444;
}
.footer-bloc__copyright {
    font-size: 0.8rem;
    color: var(--text-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}
.footer-bloc__copyright a {
    color: var(--text-lightest-gray);
    text-decoration: none;
    border-bottom: none;
    transition: color 0.2s ease;
}
.footer-bloc__copyright a:hover {
    color: var(--text-white);
}

/* ============================================
   RESPONSIVE — 950px (theme's primary breakpoint)
   ============================================ */
@media (max-width: 950px) {
    .root-home__hero {
        grid-template-columns: minmax(0, 1fr);
    }
    .root-home__portrait {
        /* Stacked layout: no sibling row to stretch against here. The
           absolutely-positioned img (base rule) needs a genuinely definite
           box to fill — aspect-ratio alone was too fragile combined with
           grid stretch at this breakpoint, so set an explicit width/height
           pair instead (240 x 360 = the --ratio-portrait 2:3 ratio). */
        width: 240px;
        height: 360px;
        max-width: 100%;
        margin: 0 auto;
    }
    .root-home__venture {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
        border-top-color: var(--overlay-white-subtle);
    }
    .root-home__ventures > .root-home__venture:first-child {
        border-top: none;
        padding-top: 0;
    }
    .root-home__venture-mark {
        /* Center the single logo/wordmark within the now-full-width
           stacked row. Row-flex (weddings mark): justify-content governs
           the horizontal axis. Column-flex (nicepart mark): justify-content
           governs the vertical axis, so this is a harmless no-op there —
           align-items:center (already set) is what centers it. */
        justify-content: center;
    }
    /* Ventures go dark from this breakpoint down (covers both the medium
       stacked layout and small mobile) — same "--dark implies white text on
       children" convention as .root-home__bio--dark / css/base.css, just
       applied conditionally here rather than via a permanent class since
       it's a viewport-only change. */
    .root-home__ventures {
        /* Bleed to the hero container's own edges (cancel its horizontal
           padding), not just sit inset — matches --space-lg here since
           that's .root-home__hero's padding at this breakpoint range; the
           600px query below overrides this to match its own --space-md
           hero padding instead. */
        background: var(--bg-dark);
        margin: 0 calc(-1 * var(--space-lg));
        padding: var(--space-lg);
    }
    .root-home__venture-desc {
        color: var(--overlay-white-opaque);
    }
    /* Weddings mark: on light bg this is forced black via brightness(0)
       filter (the raw SVG is white). On this dark bg the raw white asset
       is exactly what we want, so drop the filter instead. */
    .root-home__venture-mark--weddings img {
        filter: none;
        opacity: 0.95;
    }
    .root-home__nicepart-word .is-muted { color: var(--text-lightest-gray); }
    .root-home__nicepart-word .is-accent { color: var(--text-white); }
    .root-home__nicepart-eyebrow {
        color: var(--text-lightest-gray);
    }
    .root-home__bio-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
    .root-home__bio-photo {
        max-width: 320px;
        margin: 0 auto;
    }
    .root-home__info-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .root-home__info-grid > .root-home__info-row:nth-child(-n+2) {
        border-top: 1px solid var(--border-color);
        padding-top: var(--space-md);
    }
    .root-home__info-grid > .root-home__info-row:first-child {
        border-top: none;
        padding-top: 0;
    }
}

/* ============================================
   RESPONSIVE — 600px (theme's secondary/mobile breakpoint)
   ============================================ */
@media (max-width: 600px) {
    .root-home__header {
        padding: 0 var(--space-md);
    }
    .root-home__hero,
    .root-home__bio-wrap,
    .root-home__info-grid {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    .footer-bloc__top {
        padding: var(--space-lg) var(--space-md);
        gap: var(--space-lg);
    }
    .root-home__logo-grid--education { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .root-home__logo-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .root-home__ventures {
        margin: 0 calc(-1 * var(--space-md));
        padding: var(--space-lg) var(--space-md);
    }
}