/**
 * =====================================================================
 * home.css — Cosmic Home Page
 *
 * Extends the blog.css design system (must load after blog.css).
 * Palette: deep space dark · green accent · warm amber highlights
 * Personality: galaxies · black holes · national parks · Yosemite
 *
 * TOC:
 * 01. Body & scroll
 * 02. Transparent nav (becomes solid on scroll)
 * 03. Hero — full-viewport, milky-way bg, star canvas
 * 04. Section scaffolding
 * 05. About — profile, bio, interest badges, skills, CTA
 * 06. Journey — timeline highlights
 * 07. Explore — three link cards
 * 08. Footer — warm, personal
 * 09. Animations & keyframes
 * 10. Responsive
 * =====================================================================
 */


/* =====================================================================
 * 01. Body & scroll
 * ===================================================================== */
.home-page {
    scroll-behavior: smooth;
}


/* =====================================================================
 * 02. Transparent nav (becomes solid on scroll)
 * ===================================================================== */

/* Override blog.css solid default so hero shows through */
.home-page header {
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background 0.45s ease, border-color 0.45s ease,
                backdrop-filter 0.45s ease !important;
}

.home-page header.nav-solid {
    background: rgba(13, 13, 13, 0.93) !important;
    border-bottom-color: var(--sk-border-sub) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

[data-theme="light"] .home-page header.nav-solid {
    background: rgba(238, 236, 230, 0.95) !important;
}

/* Logo visible against both dark hero and light theme */
.home-page header .logo a {
    color: #f0ede6 !important;
    transition: color 0.3s ease !important;
}

.home-page header .logo a svg {
    stroke: #f0ede6 !important;
    transition: stroke 0.3s ease !important;
}

.home-page header.nav-solid .logo a {
    color: var(--sk-accent) !important;
}

.home-page header.nav-solid .logo a svg {
    stroke: var(--sk-accent) !important;
}

.home-page .main-navigation li a {
    color: rgba(240, 237, 230, 0.75) !important;
}

.home-page header.nav-solid .main-navigation li a {
    color: var(--sk-text-dim) !important;
}

.home-page .main-navigation li a:hover,
.home-page .main-navigation li.current a {
    color: var(--sk-accent) !important;
}


/* =====================================================================
 * 03. Hero
 * ===================================================================== */
.home-hero {
    position: relative;
    height: 100vh;
    min-height: 62rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #080b18 url('../images/milky_way_001.jpg') center / cover no-repeat;
}

/* Star-canvas lives just above the photo, below content */
.star-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Gradient overlay — keep photo visible but readable */
.home-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 11, 24, 0.65) 0%,
        rgba(8, 11, 24, 0.48) 45%,
        rgba(10, 13, 26, 0.78) 100%
    );
    z-index: 2;
}

/* Content */
.home-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 2.4rem;
    max-width: 80rem;
    width: 100%;
}

.home-hero__eyebrow {
    display: block;
    font-family: var(--sk-head);
    font-size: 1.25rem;
    letter-spacing: 0.42rem;
    text-transform: uppercase;
    color: var(--sk-accent);
    margin-bottom: 1.8rem;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.3s;
}

.home-hero__name {
    font-family: var(--sk-head);
    font-size: clamp(5.2rem, 10vw, 9.6rem);
    font-weight: 700;
    color: #f0ede6;
    margin: 0 0 1.2rem;
    line-height: 1.04;
    letter-spacing: -0.03em;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.5s;
}

.home-hero__role {
    font-family: var(--sk-head);
    font-size: 1.65rem;
    letter-spacing: 0.26rem;
    text-transform: uppercase;
    color: rgba(240, 237, 230, 0.62);
    margin-bottom: 3.2rem;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.7s;
}

.home-hero__quote {
    font-family: var(--sk-body);
    font-size: 1.6rem;
    font-style: italic;
    color: rgba(240, 237, 230, 0.48);
    line-height: 1.7;
    max-width: 56rem;
    margin: 0 auto 3.8rem;
    min-height: 3.6rem; /* prevent layout shift */
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 0.9s;
}

.home-hero__cta {
    display: inline-block;
    font-family: var(--sk-head);
    font-size: 1.2rem;
    letter-spacing: 0.22rem;
    text-transform: uppercase;
    color: var(--sk-accent) !important;
    border: 1px solid var(--sk-accent);
    padding: 1.2rem 3.2rem;
    border-radius: 3rem;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease,
                transform 0.3s ease;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards 1.1s;
}

.home-hero__cta:hover {
    background: var(--sk-accent);
    color: #080b18 !important;
    box-shadow: 0 0 28px var(--sk-accent-glow);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Social icons at the bottom center */
.home-hero__social {
    position: absolute;
    bottom: 3.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    animation: heroFadeIn 0.8s ease forwards 1.4s;
}

.home-hero__social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 1.5rem;
    text-decoration: none;
    transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease,
                transform 0.28s ease;
    backdrop-filter: blur(4px);
}

.home-hero__social li a:hover {
    background: var(--sk-accent);
    border-color: var(--sk-accent);
    color: #080b18 !important;
    transform: translateY(-3px);
}

/* Scroll indicator line */
.home-hero__scroll-hint {
    position: absolute;
    bottom: 3.8rem;
    right: 5rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    opacity: 0;
    animation: heroFadeIn 1s ease forwards 1.6s;
}

.home-hero__scroll-hint span {
    font-family: var(--sk-head);
    font-size: 0.88rem;
    letter-spacing: 0.28rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    writing-mode: vertical-rl;
}

.home-hero__scroll-line {
    width: 1px;
    height: 4.8rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0.28), transparent);
    animation: scrollDrop 2.4s ease infinite;
}


/* =====================================================================
 * 04. Section scaffolding
 * ===================================================================== */
.home-section {
    padding: 10rem 0;
}

.home-section--alt {
    position: relative;
}

.home-section--alt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(18, 20, 30, 0.45);
    pointer-events: none;
}

[data-theme="light"] .home-section--alt::before {
    background: rgba(235, 232, 226, 0.55);
}

.home-section--alt .sk-row { position: relative; z-index: 1; }

.section-eyebrow {
    display: block;
    font-family: var(--sk-head);
    font-size: 1.1rem;
    letter-spacing: 0.30rem;
    text-transform: uppercase;
    color: var(--sk-accent);
    margin-bottom: 1.4rem;
}

.home-section h2 {
    font-family: var(--sk-head);
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    color: var(--sk-heading);
    line-height: 1.18;
    margin-bottom: 0;
}

.section-desc {
    font-family: var(--sk-body);
    font-size: 1.75rem;
    color: var(--sk-text-dim);
    line-height: 1.75;
    max-width: 60rem;
    margin-top: 1.4rem;
}

/* =====================================================================
 * 05. About
 * ===================================================================== */
.home-about__grid {
    display: grid;
    grid-template-columns: 28rem 1fr;
    gap: 7rem;
    align-items: start;
    margin-top: 5.5rem;
}

/* Left column — photo + bio + badges */
.home-about__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.8rem;
}

.home-about__photo-frame {
    position: relative;
    width: 19rem;
    height: 19rem;
    flex-shrink: 0;
}

.home-about__photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--sk-border);
    box-shadow: 0 0 0 8px var(--sk-accent-dim), var(--sk-shadow-lg);
    position: relative;
    z-index: 1;
}

/* Slow-spinning conic gradient ring */
.home-about__photo-frame::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--sk-accent-dim) 0deg,
        transparent 100deg,
        var(--sk-accent-dim) 220deg,
        transparent 360deg
    );
    animation: ringRotate 18s linear infinite;
    pointer-events: none;
}

.home-about__lead {
    font-family: var(--sk-body);
    font-size: 1.65rem;
    color: var(--sk-text);
    line-height: 1.78;
    text-align: center;
}

.interest-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}

.interest-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sk-head);
    font-size: 1.1rem;
    letter-spacing: 0.05rem;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-sub);
    color: var(--sk-text-dim);
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
    cursor: default;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.interest-badge:hover {
    border-color: var(--sk-border);
    color: var(--sk-accent);
    background: var(--sk-accent-dim);
}

/* Right column — profile details, skills, CTAs */
.home-about__right {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
    padding-top: 0.4rem;
}

.home-about__block-label {
    font-family: var(--sk-head);
    font-size: 1.05rem;
    letter-spacing: 0.22rem;
    text-transform: uppercase;
    color: var(--sk-text-faint);
    margin-bottom: 1.6rem;
}

/* Info list (Profile card) */
.about-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-info-list li {
    display: flex;
    align-items: baseline;
    gap: 1.6rem;
    font-size: 1.6rem;
    color: var(--sk-text);
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--sk-border-sub);
}

.about-info-list li:last-child { border-bottom: none; }

.about-info-list strong {
    font-family: var(--sk-head);
    font-size: 1.0rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    color: var(--sk-text-faint);
    flex-shrink: 0;
    min-width: 9rem;
}

.about-info-list a { color: var(--sk-accent) !important; }
.about-info-list a:hover { color: var(--sk-accent-hi) !important; }

/* Skill tags */
.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.skill-tag {
    font-family: var(--sk-head);
    font-size: 1.1rem;
    letter-spacing: 0.05rem;
    background: var(--sk-accent-dim);
    border: 1px solid var(--sk-border);
    color: var(--sk-accent);
    padding: 0.4rem 1.1rem;
    border-radius: var(--sk-r);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.skill-tag:hover {
    background: rgba(125, 194, 75, 0.18);
    box-shadow: 0 0 8px var(--sk-accent-glow);
}

/* CTA buttons */
.about-cta-row {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sk-head);
    font-size: 1.2rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    background: var(--sk-accent);
    color: #080b18 !important;
    padding: 1.15rem 2.6rem;
    border-radius: var(--sk-r);
    text-decoration: none;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.btn-primary:hover {
    background: var(--sk-accent-hi);
    box-shadow: 0 0 20px var(--sk-accent-glow);
    transform: translateY(-1px);
    text-decoration: none;
    color: #080b18 !important;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sk-head);
    font-size: 1.2rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    background: transparent;
    color: var(--sk-accent) !important;
    border: 1px solid var(--sk-border);
    padding: 1.15rem 2.6rem;
    border-radius: var(--sk-r);
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s ease;
}

.btn-outline:hover {
    border-color: var(--sk-accent);
    background: var(--sk-accent-dim);
    box-shadow: 0 0 14px var(--sk-accent-glow);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--sk-accent) !important;
}


/* =====================================================================
 * 06. Journey — timeline highlights
 * ===================================================================== */
.journey-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 5rem;
}

.journey-all-link {
    font-family: var(--sk-head);
    font-size: 1.15rem;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    color: var(--sk-text-faint) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}

.journey-all-link:hover {
    color: var(--sk-accent) !important;
    border-bottom-color: var(--sk-border);
    gap: 1rem;
}

/* The timeline track */
.journey-track {
    position: relative;
    padding-left: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.journey-track::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: 1.2rem;
    bottom: 1.2rem;
    width: 1px;
    background: linear-gradient(to bottom, var(--sk-border), transparent 90%);
}

/* A single item */
.journey-item {
    position: relative;
    opacity: 0;
    transform: translateX(-1.6rem);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.journey-item.visible {
    opacity: 1;
    transform: translateX(0);
}

.journey-item:nth-child(2) { transition-delay: 0.1s; }
.journey-item:nth-child(3) { transition-delay: 0.2s; }
.journey-item:nth-child(4) { transition-delay: 0.3s; }
.journey-item:nth-child(5) { transition-delay: 0.4s; }

/* Dot — left is set so that translateX(-50%) centers it on the track line (left:0.55rem) */
.journey-item::before {
    content: '';
    position: absolute;
    left: calc(-3rem + 0.55rem);   /* line offset 0.55rem; translateX(-50%) puts center on line */
    top: 1.35rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid var(--sk-text-faint);
    background: var(--sk-bg);
    transform: translateX(-50%);
    transition: border-color 0.25s ease, background 0.25s ease;
    z-index: 1;
}

.journey-item--work::before    { border-color: #e07c64; }
.journey-item--edu::before     { border-color: #5ba3d9; }
.journey-item--project::before { border-color: #d4a843; }

.journey-item:hover::before { background: currentColor; }
.journey-item--work:hover::before    { background: #e07c64; }
.journey-item--edu:hover::before     { background: #5ba3d9; }
.journey-item--project:hover::before { background: #d4a843; }

/* Card */
.journey-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-sub);
    border-radius: var(--sk-r-lg);
    padding: 2.4rem 2.8rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.journey-item:hover .journey-card {
    border-color: var(--sk-border);
    box-shadow: var(--sk-shadow);
}

.journey-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}

.journey-card__period {
    font-family: var(--sk-head);
    font-size: 1.05rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    color: var(--sk-text-faint);
}

.journey-card__type {
    font-family: var(--sk-head);
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    padding: 0.25rem 0.9rem;
    border-radius: 2rem;
}

.journey-item--work    .journey-card__type {
    background: rgba(224, 124, 100, 0.12);
    color: #e07c64;
    border: 1px solid rgba(224, 124, 100, 0.25);
}

.journey-item--edu     .journey-card__type {
    background: rgba(91, 163, 217, 0.12);
    color: #5ba3d9;
    border: 1px solid rgba(91, 163, 217, 0.25);
}

.journey-item--project .journey-card__type {
    background: rgba(212, 168, 67, 0.12);
    color: #d4a843;
    border: 1px solid rgba(212, 168, 67, 0.25);
}

.journey-card h3 {
    font-family: var(--sk-head);
    font-size: 1.95rem;
    color: var(--sk-heading);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.journey-card__org {
    font-family: var(--sk-head);
    font-size: 1.35rem;
    letter-spacing: 0.04rem;
    color: var(--sk-text-faint);
    margin-bottom: 1rem;
}

.journey-card__desc {
    font-size: 1.55rem;
    color: var(--sk-text-dim);
    line-height: 1.7;
    margin: 0;
}


/* =====================================================================
 * 07. Explore — three link cards
 * ===================================================================== */
.home-explore {
    padding: 10rem 0 12rem;
    position: relative;
    overflow: hidden;
}

/* Subtle radial glow from top */
.home-explore::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--sk-accent-dim) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.home-explore > .sk-row { position: relative; z-index: 1; }

.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
    margin-top: 4.5rem;
}

.explore-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-sub);
    border-radius: var(--sk-r-lg);
    padding: 3.2rem;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(2.4rem);
}

.explore-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.55s ease, transform 0.55s ease,
                box-shadow 0.3s ease, border-color 0.3s ease;
}

.explore-card:nth-child(2).visible { transition-delay: 0.12s; }
.explore-card:nth-child(3).visible { transition-delay: 0.24s; }

/* Top accent line */
.explore-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.explore-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sk-shadow-lg);
    border-color: var(--sk-border);
    text-decoration: none;
}

.explore-card:hover::before { opacity: 1; }

.explore-card--blog::before     { background: var(--sk-accent); }
.explore-card--exp::before      { background: #5ba3d9; }
.explore-card--resources::before { background: #d4a843; }

.explore-card__icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 2.2rem;
}

.explore-card--blog     .explore-card__icon { background: rgba(125, 194,  75, 0.12); }
.explore-card--exp      .explore-card__icon { background: rgba( 91, 163, 217, 0.12); }
.explore-card--resources .explore-card__icon { background: rgba(212, 168,  67, 0.12); }

.explore-card h3 {
    font-family: var(--sk-head);
    font-size: 2.1rem;
    color: var(--sk-heading);
    margin-bottom: 1rem;
}

.explore-card p {
    font-size: 1.55rem;
    color: var(--sk-text-dim);
    line-height: 1.72;
    margin-bottom: 2.6rem;
}

.explore-card__cta {
    font-family: var(--sk-head);
    font-size: 1.1rem;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    color: var(--sk-text-faint);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.25s ease, color 0.25s ease;
}

.explore-card:hover .explore-card__cta             { gap: 1.2rem; color: var(--sk-accent); }
.explore-card--exp:hover .explore-card__cta        { color: #5ba3d9; }
.explore-card--resources:hover .explore-card__cta  { color: #d4a843; }


/* =====================================================================
 * 08. Home footer
 * ===================================================================== */
footer.home-footer {
    padding: 5rem 0 4rem;
    border-top: 1px solid var(--sk-border-sub);
}

.home-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2.8rem;
}

.home-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.home-footer__logo {
    font-family: var(--sk-head);
    font-size: 2.2rem;
    letter-spacing: 0.1rem;
    color: var(--sk-accent);
}

.home-footer__tagline {
    font-family: var(--sk-body);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--sk-text-faint);
}

.home-footer__social {
    display: flex;
    gap: 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-footer__social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-sub);
    color: var(--sk-text-faint) !important;
    font-size: 1.4rem;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.home-footer__social li a:hover {
    border-color: var(--sk-border);
    color: var(--sk-accent) !important;
    background: var(--sk-accent-dim);
}

.home-footer__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    text-align: right;
}

.home-footer__email {
    font-family: var(--sk-head);
    font-size: 1.3rem;
    letter-spacing: 0.04rem;
    color: var(--sk-text-dim) !important;
    text-decoration: none;
    transition: color 0.25s ease;
}

.home-footer__email:hover { color: var(--sk-accent) !important; }

.home-footer__copy {
    font-size: 1.2rem;
    color: var(--sk-text-faint);
    font-family: var(--sk-head);
    letter-spacing: 0.04rem;
}


/* =====================================================================
 * 09. Animations & keyframes
 * ===================================================================== */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(2.2rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes scrollDrop {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50%       { opacity: 0.7; transform: scaleY(1.05); }
}


/* =====================================================================
 * 10. Responsive
 * ===================================================================== */
@media screen and (max-width: 1100px) {
    .home-about__grid {
        grid-template-columns: 1fr;
        gap: 4.5rem;
    }

    .home-about__left {
        flex-direction: row;
        align-items: flex-start;
        gap: 3.2rem;
    }

    .home-about__lead { text-align: left; }
    .interest-badges  { justify-content: flex-start; }

    .explore-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 768px) {
    .home-hero__name { font-size: clamp(4.4rem, 13vw, 6.8rem); }

    .home-hero__scroll-hint { display: none; }

    .home-section, .home-explore { padding: 7rem 0; }

    .home-about__left {
        flex-direction: column;
        align-items: center;
    }

    .home-about__lead  { text-align: center; }
    .interest-badges   { justify-content: center; }
    .about-info-list strong { min-width: 7.5rem; }

    .explore-grid {
        grid-template-columns: 1fr;
    }

    .journey-header { flex-direction: column; align-items: flex-start; }

    .home-footer__inner { flex-direction: column; align-items: flex-start; }
    .home-footer__meta  { align-items: flex-start; text-align: left; }
}

@media screen and (max-width: 480px) {
    .home-hero__social { gap: 1.2rem; }
    .home-hero__cta    { padding: 1rem 2.4rem; }
    .journey-track     { padding-left: 2.4rem; }
    .journey-item::before { left: calc(-2.4rem + 0.55rem); } /* keepstransform:translateX(-50%) from base */
}


/* =====================================================================
 * 11. Fix: override main.css white #about background
 * ===================================================================== */

/* main.css sets #about { background: #FFFFFF } with id specificity (100).
   .home-page #about has class+id (110), which wins without !important.     */
.home-page #about,
.home-page .home-section,
.home-page .home-section--alt {
    background-color: var(--sk-bg);
}

/* Ensure all h-tags inside home sections use the theme colour, not main.css defaults */
.home-page .home-section h1,
.home-page .home-section h2,
.home-page .home-section h3,
.home-page .home-section h4,
.home-page .home-section h5,
.home-page .home-section h6 {
    color: var(--sk-heading);
}

.home-page .home-section p,
.home-page .home-section li,
.home-page .home-section span {
    color: inherit;
}


/* =====================================================================
 * 12. Navigation — desktop horizontal, mobile dropdown
 *
 *  main.css keeps .main-navigation { display: none } with no desktop
 *  breakpoint that shows it horizontally. We fix that here.
 * ===================================================================== */

/* --- Desktop (≥769px): show nav inline, hide hamburger -------------- */
@media screen and (min-width: 769px) {

    /* Flatten the absolutely-positioned top-bar into a flex row */
    .home-page header .row        { min-height: 6.6rem; }
    .home-page header .top-bar {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 4rem;
        min-height: 6.6rem;
        width: 100%;
        min-width: 0;
        background: transparent;
    }

    .home-page header .logo {
        float: none !important;
        margin: 0 !important;
    }

    /* Show the nav as a horizontal flex row */
    .home-page #main-nav-wrap {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center;
    }

    .home-page .main-navigation {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        width: auto;
        height: auto;
        clear: none;
    }

    .home-page .main-navigation > li {
        display: inline-flex !important;
    }

    .home-page .main-navigation li a {
        padding: 0.4rem 1.2rem !important;
        line-height: normal;
        display: block;
    }

    /* Hide the hamburger entirely on desktop */
    .home-page .menu-toggle {
        display: none !important;
    }
}

/* --- Mobile (<769px): hamburger right-aligned, dropdown on click ---- */
@media screen and (max-width: 768px) {

    .home-page header .row        { min-height: 6rem; }
    .home-page header .top-bar {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 2.4rem;
        min-height: 6rem;
        width: 100%;
        min-width: 0;
        background: transparent;
    }

    /* Logo on left */
    .home-page header .logo {
        float: none !important;
        margin: 0 !important;
        order: 1;
    }

    /* Hamburger on right */
    .home-page .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        order: 2;
        float: none !important;
        margin: 0 !important;
        position: static !important;
    }

    /* Nav panel slides down below header, full-width, dark glass */
    .home-page #main-nav-wrap {
        position: fixed !important;
        top: 6rem !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 799;
        border-top: 1px solid var(--sk-border-sub);
    }

    .home-page .main-navigation {
        display: none !important;
        flex-direction: column !important;
        background: rgba(10, 12, 22, 0.97) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        padding: 2rem 3.2rem 3rem !important;
        width: 100%;
    }

    /* blog.js adds .open to #main-nav-wrap when hamburger clicked */
    .home-page #main-nav-wrap.open .main-navigation {
        display: flex !important;
    }

    [data-theme="light"] .home-page .main-navigation {
        background: rgba(238, 236, 230, 0.98) !important;
    }

    .home-page .main-navigation > li {
        display: block !important;
        width: 100%;
    }

    .home-page .main-navigation li a {
        padding: 1.2rem 0 !important;
        display: block !important;
        border-bottom: 1px solid var(--sk-border-sub);
    }

    .home-page .main-navigation li:last-child a {
        border-bottom: none;
    }
}


/* =====================================================================
 * 13. Hero — text is always light regardless of theme.
 *
 *  The hero has a fixed dark background image + dark overlay. In light
 *  theme the CSS variables would otherwise flip heading colours dark.
 *  We lock the hero content colours to their dark-mode values.
 * ===================================================================== */
.home-hero,
[data-theme="light"] .home-hero {
    /* background image does not change */
}

/* Nav over the hero: keep text light even in light theme */
[data-theme="light"] .home-page header:not(.nav-solid) .logo a {
    color: #f0ede6 !important;
}

[data-theme="light"] .home-page header:not(.nav-solid) .main-navigation li a {
    color: rgba(240, 237, 230, 0.75) !important;
}

[data-theme="light"] .home-page header:not(.nav-solid) .main-navigation li a:hover,
[data-theme="light"] .home-page header:not(.nav-solid) .main-navigation li.current a {
    color: var(--sk-accent) !important;
}


/* =====================================================================
 * 14. Social icons — rounded squares instead of circles (both hero & footer)
 * ===================================================================== */
.home-hero__social li a,
.home-hero__social li a:hover,
.home-footer__social li a,
.home-footer__social li a:hover {
    border-radius: 0.9rem;   /* rounded square, was 50% (circle) */
}


/* =====================================================================
 * 15. Section ribbon — fixed vertical nav dots on right side
 * ===================================================================== */
.section-ribbon {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 490;          /* below theme toggle (900), above regular content */
}

.section-ribbon ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    align-items: center;
}

.ribbon-dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
}

.ribbon-dot:hover {
    background: var(--sk-accent);
    border-color: var(--sk-accent);
    transform: scale(1.5);
    box-shadow: 0 0 10px var(--sk-accent-glow);
    text-decoration: none;
}

.ribbon-dot.active {
    background: var(--sk-accent);
    border-color: var(--sk-accent);
    transform: scale(1.4);
    box-shadow: 0 0 8px var(--sk-accent-glow);
}

/* Tooltip label — slides left on hover */
.ribbon-label {
    position: absolute;
    right: calc(100% + 1rem);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--sk-head);
    font-size: 1.0rem;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    color: var(--sk-text-dim);
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-sub);
    padding: 0.3rem 0.9rem;
    border-radius: 0.35rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ribbon-dot:hover .ribbon-label {
    opacity: 1;
}

/* In dark sections where bg is close to ribbon colour */
[data-theme="light"] .ribbon-dot {
    background: rgba(0, 0, 0, 0.18);
    border-color: rgba(0, 0, 0, 0.14);
}

/* Hide on small screens (touch users scroll naturally) */
@media screen and (max-width: 900px) {
    .section-ribbon { display: none; }
}