/* Hero Section */
.hero {
    height: 300px;
    background: linear-gradient(180deg, #0a0a1a 0%, #0d1b2a 40%, #1b263b 70%, #1b3a4b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* Aurora Background */
.aurora-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 160px 120px, #fff, transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 250px 35px, #fff, transparent),
        radial-gradient(2px 2px at 300px 90px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 350px 25px, #fff, transparent),
        radial-gradient(2px 2px at 400px 110px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 450px 45px, #fff, transparent),
        radial-gradient(2px 2px at 500px 130px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 550px 70px, #fff, transparent),
        radial-gradient(2px 2px at 600px 20px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 650px 100px, #fff, transparent),
        radial-gradient(2px 2px at 700px 60px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 750px 140px, #fff, transparent),
        radial-gradient(2px 2px at 800px 85px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 850px 55px, #fff, transparent),
        radial-gradient(2px 2px at 900px 95px, rgba(255,255,255,0.8), transparent);
    animation: twinkle 4s ease-in-out infinite alternate;
}

.aurora {
    position: absolute;
    width: 200%;
    height: 100%;
    left: -50%;
    filter: blur(50px);
    opacity: 0.7;
    mix-blend-mode: screen;
}

.aurora-1 {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 119, 182, 0.5) 20%, rgba(0, 150, 199, 0.6) 40%, rgba(72, 202, 228, 0.3) 60%, transparent 80%);
    animation: aurora-wave 8s ease-in-out infinite;
    top: -20%;
}

.aurora-2 {
    background: linear-gradient(180deg, transparent 0%, rgba(124, 58, 237, 0.4) 25%, rgba(139, 92, 246, 0.5) 50%, rgba(91, 33, 182, 0.3) 70%, transparent 85%);
    animation: aurora-wave 12s ease-in-out infinite reverse;
    top: -10%;
    animation-delay: -4s;
}

.aurora-3 {
    background: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.35) 30%, rgba(52, 211, 153, 0.4) 50%, transparent 70%);
    animation: aurora-wave 10s ease-in-out infinite;
    top: -15%;
    animation-delay: -2s;
}

@keyframes aurora-wave {
    0%, 100% { transform: translateX(-15%) skewX(-5deg) scaleY(1); }
    25% { transform: translateX(5%) skewX(3deg) scaleY(1.15); }
    50% { transform: translateX(15%) skewX(-3deg) scaleY(0.9); }
    75% { transform: translateX(-5%) skewX(5deg) scaleY(1.1); }
}

.shooting-star {
    position: absolute;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, #fff, transparent);
    border-radius: var(--radius-full);
    top: 15%;
    left: 70%;
    animation: shoot 5s ease-out infinite;
    opacity: 0;
}

.shooting-star.s2 { top: 35%; left: 85%; animation-delay: 2.5s; width: 80px; }
.shooting-star.s3 { top: 55%; left: 50%; animation-delay: 4s; width: 100px; }

@keyframes shoot {
    0% { transform: translateX(0) translateY(0) rotate(-45deg); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateX(-350px) translateY(350px) rotate(-45deg); opacity: 0; }
}

.moon {
    position: absolute;
    width: 45px;
    height: 45px;
    background: radial-gradient(circle at 36% 34%, #FFFDF4, #EDE6CB 55%, #C9C2A6 100%);
    border-radius: var(--radius-full);
    top: 15%;
    right: 12%;
    box-shadow: 0 0 36px rgba(255, 250, 225, .35), 0 0 90px rgba(255, 250, 225, .12);
}

@keyframes moon-glow {
    0% { box-shadow: 0 0 40px rgba(255, 213, 79, 0.6), 0 0 80px rgba(255, 213, 79, 0.3); }
    100% { box-shadow: 0 0 50px rgba(255, 213, 79, 0.8), 0 0 100px rgba(255, 213, 79, 0.4); }
}

/* the horizon: two soft ridges across the full width, the near one darker. The byline pill
   sits on them. (This replaced five CSS triangles and a 200px tiled tree strip.) */
.ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 130px; display: block; z-index: 1; }
.ridge-far { fill: #151D48; }
.ridge-near { fill: #0B1130; }

@keyframes shine {
    to { background-position: 200% center; }
}

/* Stats Section - moved to after portfolio-btn */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.week {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.day {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-xs);
    background: var(--color-gray-200);
    cursor: pointer;
    transition: transform var(--d-fast), box-shadow var(--d-fast);
}

.day:hover {
    transform: scale(1.3);
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    z-index: 1;
    position: relative;
}

/* Profile Section */
.profile-section {
    flex: 1;
    background: var(--gradient-ocean-135);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

@keyframes ocean-wave {
    0%, 100% { transform: translateX(-25%) rotate(2deg); }
    50% { transform: translateX(0%) rotate(-2deg); }
}

/* Bubbles */
.bubbles .bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    animation: bubble-rise 6s ease-in infinite;
}

.bubbles .bubble:nth-child(1) { width: 8px; height: 8px; left: 20%; bottom: -20px; animation-delay: 0s; }
.bubbles .bubble:nth-child(2) { width: 12px; height: 12px; left: 40%; bottom: -20px; animation-delay: 1.5s; }
.bubbles .bubble:nth-child(3) { width: 6px; height: 6px; left: 60%; bottom: -20px; animation-delay: 3s; }
.bubbles .bubble:nth-child(4) { width: 10px; height: 10px; left: 75%; bottom: -20px; animation-delay: 2s; }
.bubbles .bubble:nth-child(5) { width: 7px; height: 7px; left: 85%; bottom: -20px; animation-delay: 4s; }

@keyframes bubble-rise {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-250px) scale(0.5); opacity: 0; }
}

.profile-avatar {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#category-pie {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.category-blocks {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    flex: 1;
    flex-wrap: nowrap;
    position: relative;
    z-index: 1;
}

.category-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: var(--transition-fast);
    border-top: 3px solid var(--cat-color);
    width: 80px;
    flex-shrink: 0;
    text-align: center;
}

.category-block:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.02);
}

.cat-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.cat-name {
    font-size: 0.65rem;
    color: var(--color-gray-900);
    font-weight: 500;
    line-height: 1.2;
    word-break: keep-all;
}

.cat-pct {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--cat-color);
}

.stat-chart {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 40%;
    pointer-events: none;
    z-index: 0;
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

/* Home Series & Tags Section */
.home-series-tags {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.home-series-wrap {
    min-width: 0;
}

.home-series-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.home-series-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-xl);
    text-decoration: none;
    overflow: hidden;
    transition: var(--transition-fast);
}

@keyframes seriesFlow {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.home-series-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.series-icon {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
    background: var(--color-white);
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.series-info {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.series-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.series-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 0.15rem;
}

.tag-row {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    min-height: 1.6rem;
}

.cloud-tag {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
    background: var(--color-white);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cloud-tag:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.posts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.posts-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.posts-header h2 svg {
    width: 18px;
    height: 18px;
    color: var(--color-gray-800);
}

.posts-header .view-all {
    font-size: 0.8rem;
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color var(--d-base);
}

.posts-header .view-all:hover {
    color: var(--color-primary);
}

/* Tag colors defined in base.css */

/* Home Projects Section */
.home-projects {
    margin-top: 2rem;
}

/* Responsive - Tablet (900px) */
@media (max-width: 1024px) {
    .ocean-bg .wave-1 {
        bottom: -30%;
    }
    .ocean-bg .wave-2 {
        bottom: -40%;
    }
    .ocean-bg .wave-3 {
        display: none;
    }

    .home-dashboard {
        flex-direction: column;
        gap: 0.75rem;
    }

    .profile-section {
        min-height: 200px;
    }

    .stats-section {
        flex: none;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .charts-section {
        flex: none;
    }

    .chart-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .category-wrap {
        flex-wrap: wrap;
        justify-content: center;
    }

    .category-blocks {
        flex-wrap: wrap;
        justify-content: center;
    }

    .visitor-wrap {
        flex-wrap: wrap;
    }

    .home-series-tags {
        grid-template-columns: 1fr;
    }

    .home-series-grid {
        grid-template-columns: repeat(3, 1fr);
    }

.nav-btn-post,
    .nav-btn-hobby,
    .nav-btn-apps {
        display: none;
    }
}

/* Responsive - Large Phone (600px) */
@media (max-width: 600px) {
    .home-series-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .home-series-card {
        padding: 0.6rem 0.75rem;
    }

    .series-icon {
        width: 32px;
        height: 32px;
    }

    .series-name {
        font-size: 0.8rem;
    }

    .ocean-bg .wave-1 {
        bottom: -40%;
    }
    .ocean-bg .wave-2 {
        display: none;
    }

    .hero {
        height: 180px;
        border-radius: var(--radius-lg);
    }

    .hero-content h1 {
        font-size: 1.4rem;
    }

    .hero-content p {
        font-size: 0.85rem;
    }

    .moon {
        width: 30px;
        height: 30px;
        top: 10%;
        right: 8%;
    }

    .home-dashboard {
        gap: 0.5rem;
    }

    .profile-section {
        min-height: 180px;
    }

    .profile-avatar {
        width: 60px;
        height: 60px;
    }

    .profile-name {
        font-size: 1rem;
    }

    .profile-role {
        font-size: 0.75rem;
    }

    .portfolio-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
    }

    .profile-social {
        gap: 0.4rem;
    }

    .social-icon {
        width: 28px;
        height: 28px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.65rem;
        margin-top: 0.25rem;
    }

    .category-wrap,
    .visitor-wrap {
        padding: 0.5rem 0.75rem;
        flex-direction: column;
        align-items: stretch;
    }

    #category-pie {
        width: 70px;
        height: 70px;
        margin: 0 auto;
    }

    .category-blocks {
        justify-content: center;
    }

    .category-block {
        width: 60px;
        padding: 0.4rem;
    }

    .cat-icon {
        font-size: 1rem;
    }

    .cat-name {
        font-size: 0.6rem;
    }

    .visitor-stats {
        width: 100%;
        text-align: center;
    }

    .visitor-today {
        justify-content: center;
    }

    .visitor-meta {
        justify-content: center;
    }

    .visitor-meta span {
        font-size: 0.75rem;
    }

    #visitor-chart {
        width: 100%;
        height: 50px;
    }

    .nav-btn {
        width: 60px;
        padding: 0.4rem 0.75rem;
        font-size: 0.65rem;
    }

    .nav-btn svg {
        width: 16px;
        height: 16px;
    }

    .posts-header h2 {
        font-size: 0.9rem;
    }

.posts-header h2 {
        font-size: 1rem;
    }

}

/* Responsive - Small Phone (480px) */
@media (max-width: 480px) {
    .home-series-grid {
        grid-template-columns: 1fr;
    }

    .profile-avatar {
        width: 50px;
        height: 50px;
        margin-bottom: 0.3rem;
    }

    .profile-avatar img {
        border-width: 2px;
    }

    .profile-name {
        font-size: 0.95rem;
        margin-bottom: 0.1rem;
    }

    .profile-role {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
    }

    .stats-grid {
        gap: 0.4rem;
    }

    .stat-card {
        padding: 0.6rem 0.4rem;
        border-radius: var(--radius-lg);
    }

    .stat-number {
        font-size: 1.3rem;
    }

    .stat-label {
        font-size: 0.6rem;
    }

    .chart-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .category-wrap {
        flex: 1 1 100%;
    }

    .visitor-wrap {
        flex: 1 1 100%;
    }

    .nav-btn {
        flex: 1;
        width: auto;
    }

    .category-block {
        width: 55px;
    }

}

/* ---------------------------------------------------------------------------
   Home, brought onto the same palette as the post cover and the Toss-style rails.
   The hero keeps its night scene but uses the cover's sky ramp; the stat tiles
   drop their saturated gradients for quiet surfaces with one accent each.
--------------------------------------------------------------------------- */
.hero{background:linear-gradient(180deg,#0B1030 0%,#1D2260 46%,#3A3C86 78%,#6B5AA6 100%)}

/* Home tag cloud (not the card's tags) */
.home-tags-wrap { min-width: 0; display: flex; align-items: stretch; }
.home-tags-cloud {
    display: flex; flex-direction: column; justify-content: center;
    gap: 0.35rem; padding: 0.6rem; width: 100%; min-height: 200px;
    overflow: hidden; border-radius: var(--radius-xl); background: transparent;
}
@media (max-width: 600px) { .home-tags-wrap { display: none; } }

/* series card keeps the lift it shared with the post card */
.home-series-card{border-radius:14px;transition:transform var(--d-base) cubic-bezier(.2,.8,.2,1),box-shadow var(--d-base)}
.home-series-card:hover{transform:translateY(-2px);box-shadow:var(--s-lift)}

/* ===========================================================================
   Home — the observatory.

   One panorama, one instrument line, then the light. The sky is the blog's
   identity (every post cover uses it), so it gets the whole width and the
   wordmark sits in it like a title card; the profile is the byline under it,
   over the mountains. The numbers are not four boxes but one line of
   instruments on the same dark, read left to right. Colour is kept for the
   things that carry meaning — the category ring and the series marks.
=========================================================================== */
:root {
    --obs-night: #0F1436;
    --obs-ink: #F1F3FF;
    --obs-dim: rgba(241, 243, 255, .62);
    --obs-faint: rgba(241, 243, 255, .40);
    --obs-line: rgba(255, 255, 255, .12);
    --obs-col: 1300px;
    --obs-gutter: 32px;
}

/* ---- the sky ---- */
.hero {
    height: clamp(380px, 38vw, 480px);
    border-radius: 0;
    box-shadow: none;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
}
.hero .moon {
    box-shadow:
        0 0 32px 10px rgba(255, 233, 168, .35),
        0 0 90px 30px rgba(255, 233, 168, .16),
        inset -6px -6px 18px rgba(190, 150, 60, .28);
}
/* the sky settles into the strip's navy at the bottom, so the two are one surface */
.hero::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 46%;
    background: linear-gradient(180deg, rgba(15, 20, 54, 0), rgba(15, 20, 54, .92));
    pointer-events: none; z-index: 0;
}
.hero-inner {
    position: relative; z-index: 1;
    width: 100%; max-width: var(--obs-col); margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) var(--obs-gutter) 32px;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    color: var(--obs-ink);
}
.hero-eyebrow {
    margin: 0 0 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
    color: #A9C0FF;
}
.hero-title {
    margin: 0;
    font-size: clamp(44px, 6vw, 80px);
    font-weight: 800; line-height: .98; letter-spacing: -.035em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero-sub {
    margin: 16px 0 0;
    font-size: 15px; font-weight: 500; letter-spacing: .02em;
    color: var(--obs-dim);
}

/* ---- the byline, over the mountains ---- */
.hero-byline {
    margin-top: auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px;
}
.byline-avatar {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 6px 18px rgba(0, 0, 0, .35);
}
.byline-who { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.byline-who b { font-size: 15px; font-weight: 700; color: #fff; }
.byline-who span { font-size: 12.5px; color: var(--obs-dim); }
.byline-actions { display: flex; gap: 6px; margin-left: 10px; }
.byline-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 14px; border-radius: 10px;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
    color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
    backdrop-filter: blur(8px);
    transition: background .12s ease-out, border-color .12s ease-out;
}
.byline-btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .28); }
.byline-btn.primary { background: #fff; color: #0F1436; border-color: #fff; }
.byline-btn.primary:hover { background: #E8EEFF; }
.byline-btn svg { width: 15px; height: 15px; }
.byline-social { display: flex; gap: 2px; margin-left: auto; }
.byline-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; color: var(--obs-dim);
    transition: background .12s ease-out, color .12s ease-out;
}
.byline-social a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.byline-social svg { width: 17px; height: 17px; }

/* ---- the instrument line ---- */
.strip { background: var(--obs-night); color: var(--obs-ink); }
.strip-inner {
    max-width: var(--obs-col); margin: 0 auto;
    padding: 22px var(--obs-gutter) 26px;
    box-sizing: border-box;
    display: flex; align-items: center; gap: 0;
    border-top: 1px solid var(--obs-line);
}
.strip-stat {
    display: flex; align-items: center; gap: 14px;
    padding: 0 34px 0 0; margin-right: 34px;
    border-right: 1px solid var(--obs-line);
}
.strip-stat > div { display: flex; flex-direction: column; }
.strip-stat b, .strip-stat > div b {
    font-size: clamp(28px, 2.4vw, 38px); font-weight: 800; line-height: 1;
    letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums;
}
.strip-stat i, .strip-stat > div i {
    margin-top: 7px;
    font-size: 10.5px; font-weight: 700; font-style: normal;
    letter-spacing: .16em; text-transform: uppercase; color: var(--obs-faint);
}
.strip-stat { flex-direction: column; align-items: flex-start; }
.strip-stat.has-ring { flex-direction: row; align-items: center; }
.strip-stat.has-ring > div { align-items: flex-start; }
#category-pie { width: 52px; height: 52px; flex: none; }
#category-pie path { stroke: var(--obs-night); }

/* ---- the light ---- */
.home-series-tags { margin-top: 40px; }
.home-series-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    padding: 16px;
    background: #fff; border: 1px solid #E9ECEF; border-radius: 14px;
    text-decoration: none;
    transition: border-color .1s ease-out, box-shadow .16s ease, transform .16s ease;
}
.home-series-card:hover { border-color: #D6E4F7; box-shadow: 0 4px 14px rgba(9, 30, 66, .06); transform: translateY(-1px); }
.series-icon { width: 44px; height: 44px; object-fit: contain; flex: none; filter: none; }
.series-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.series-name {
    margin: 0; font-size: 14.5px; font-weight: 700; color: #333D4B; text-shadow: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.series-count { font-size: 12px; color: #6B7684; font-variant-numeric: tabular-nums; }
.series-count em { font-style: normal; color: #8B95A1; }
.series-share { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: #EEF1F4; overflow: hidden; }
.series-share i { display: block; height: 100%; width: var(--share, 0%); border-radius: 2px; background: #3182F6; }

.home-tags-wrap { min-width: 0; display: flex; flex-direction: column; }
.home-tags-cloud {
    flex: 1; min-height: 0;
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
    padding: 14px; background: #fff; border: 1px solid #E9ECEF; border-radius: 14px;
}
.cloud-tag {
    height: 26px; display: inline-flex; align-items: center;
    padding: 0 10px; border-radius: 8px; border-width: 1px;
    font-size: 12px; font-weight: 600; letter-spacing: -.01em; background: #fff;
}

@media (max-width: 1100px) {
    .strip-inner { flex-wrap: wrap; gap: 18px 0; }
}
@media (max-width: 760px) {
    :root { --obs-gutter: 16px; }
    .hero { height: auto; min-height: 400px; }
    .hero-title { font-size: 40px; }
    .byline-actions { margin-left: 0; flex-basis: 100%; }
    .byline-social { margin-left: 0; }
    .strip-stat { padding-right: 18px; margin-right: 18px; }
    .strip-stat:nth-child(2n) { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .home-series-card, .byline-btn { transition: none; } .home-series-card:hover { transform: none; } }

/* Shadows, quieted. The moon was throwing a 100px glow that pulsed to .8 alpha, the
   avatar and buttons carried 15–20px drops at .3, and every lift was 20px. Nothing on
   the page needs more than a whisper; the sky is already the drama. */
.hero .moon {
    box-shadow: 0 0 22px 6px rgba(255, 233, 168, .22), 0 0 56px 18px rgba(255, 233, 168, .08);
    animation: none;
}
.hero-title { text-shadow: 0 1px 12px rgba(0, 0, 0, .18); }
.byline-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.byline-btn, .byline-btn:hover { box-shadow: none; }
.home-series-card:hover { box-shadow: 0 2px 8px rgba(9, 30, 66, .05); }

/* ---- composition: the title block sits in the middle of the sky, not pinned to the top ---- */
.hero-inner { padding-top: 0; }
.hero-head { margin: auto 0; padding: 24px 0; }
.hero .moon { width: 64px; height: 64px; top: 14%; right: 9%; }

/* ---- motion ----
   A page-load sequence, then nothing that moves on its own. The sky's own stars and
   shooting stars stay; the moon no longer pulses. */
@keyframes obs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes obs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes obs-grow { from { width: 0; } }

.hero-eyebrow, .hero-title, .hero-sub, .hero-byline {
    animation: obs-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
.hero-eyebrow { animation-delay: .05s; }
.hero-title { animation-delay: .14s; }
.hero-sub { animation-delay: .24s; }
.hero-byline { animation-delay: .38s; }

.strip-stat, .strip-visitors { animation: obs-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.strip-stat:nth-child(1) { animation-delay: .45s; }
.strip-stat:nth-child(2) { animation-delay: .52s; }
.strip-stat:nth-child(3) { animation-delay: .59s; }
.strip-stat:nth-child(4) { animation-delay: .66s; }

/* the share bars grow in, one after another */
.series-share i { animation: obs-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.home-series-grid .home-series-card:nth-child(1) .series-share i { animation-delay: .5s; }
.home-series-grid .home-series-card:nth-child(2) .series-share i { animation-delay: .58s; }
.home-series-grid .home-series-card:nth-child(3) .series-share i { animation-delay: .66s; }
.home-series-grid .home-series-card:nth-child(4) .series-share i { animation-delay: .74s; }
.home-series-grid .home-series-card:nth-child(5) .series-share i { animation-delay: .82s; }
.home-series-grid .home-series-card:nth-child(6) .series-share i { animation-delay: .90s; }

/* hover: the category mark leans in */
.series-icon { transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.home-series-card:hover .series-icon { transform: scale(1.08) rotate(-3deg); }
.byline-btn { transition: background .12s ease-out, border-color .12s ease-out, transform .12s ease-out; }
.byline-btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow, .hero-title, .hero-sub, .hero-byline, .strip-stat, .strip-visitors, .series-share i { animation: none; }
    .series-icon { transition: none; }
    .home-series-card:hover .series-icon { transform: none; }
}

/* ===========================================================================
   Third look. Two decisions:
   1. The landscape is symmetric — mountains, a moon — so the title stands in
      the middle of it, and the byline is one centred line beneath.
   2. The instrument line gets a signature: the week's visitor pulse runs faintly
      across the whole strip behind the five readings. The ring's colours flow
      down into the series bars, so the strip and 시리즈 read as one instrument.
=========================================================================== */
.hero { height: clamp(360px, 34vw, 440px); text-align: center; }
.hero-inner { align-items: center; padding-bottom: 28px; }
.hero-head { padding: 0; }
.hero-title { font-size: clamp(34px, 3.6vw, 50px); letter-spacing: -.03em; }
.hero-eyebrow { font-size: 11px; letter-spacing: .26em; }
.hero-sub { margin-top: 10px; font-size: 14px; }
.hero::after { height: 62%; background: linear-gradient(180deg, rgba(15, 20, 54, 0) 0%, rgba(15, 20, 54, .55) 55%, var(--obs-night) 100%); }

/* ---- the byline: one line, centred, on a glass bar ---- */
.hero-byline {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 14px;
    padding: 8px 10px 8px 8px;
    border-radius: 999px;
    background: rgba(15, 20, 54, .45);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
}
.byline-avatar { width: 40px; height: 40px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.byline-who { text-align: left; }
.byline-who b { font-size: 14px; }
.byline-who span { font-size: 12px; }
.byline-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .14); }
.byline-actions { margin-left: 0; gap: 4px; }
.byline-btn { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 999px; background: transparent; border-color: transparent; }
.byline-btn:hover { background: rgba(255, 255, 255, .10); border-color: transparent; }
.byline-btn.primary { background: #fff; color: #0F1436; }
.byline-btn.primary:hover { background: #E8EEFF; }
.byline-social { margin-left: 0; }
.byline-social a { width: 30px; height: 30px; }

/* ---- the strip: five readings, the pulse behind them ---- */
.strip { position: relative; overflow: hidden; }
.strip-inner {
    position: relative;
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0; padding: 26px var(--obs-gutter) 30px; border-top: 0;
}
.strip-stat {
    flex-direction: column; align-items: center; text-align: center;
    padding: 0; margin: 0; border-right: 0;
    border-left: 1px solid var(--obs-line);
}
.strip-stat:first-child { border-left: 0; }
.strip-stat.has-ring { flex-direction: row; justify-content: center; gap: 12px; }
.strip-stat.has-ring > div { align-items: flex-start; text-align: left; }
.strip-stat b, .strip-stat > div b { font-size: clamp(26px, 2.2vw, 34px); }
.strip-stat i, .strip-stat > div i { margin-top: 6px; letter-spacing: .14em; }
.strip-today b { display: inline-flex; align-items: baseline; gap: 6px; }
.strip-today b em { font-size: 12px; font-weight: 700; font-style: normal; letter-spacing: 0; }
.strip-today b em.up { color: #6EE7A0; }
.strip-today b em.down { color: #FF8A80; }
.strip-today i { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11.5px; color: var(--obs-dim); }
#category-pie { width: 44px; height: 44px; }
.strip::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 100%; height: 120px;
    background: linear-gradient(180deg, rgba(15, 20, 54, .06), rgba(15, 20, 54, 0));
    pointer-events: none;
}

/* ---- the light ---- */
.home-series-tags { margin-top: 28px; gap: 16px; grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); }
.posts-header { margin-bottom: 14px; align-items: baseline; }
.posts-header h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #191F28; gap: 8px; }
.posts-header h2 svg { width: 17px; height: 17px; color: #8B95A1; }
.posts-header .view-all { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: #8B95A1; transition: color .1s ease-out, gap .12s ease-out; }
.posts-header .view-all:hover { color: #3182F6; gap: 6px; }
.home-projects { margin-top: 36px; }
.home-cards-grid { gap: 14px; }

.home-series-grid { gap: 12px; }
.home-series-card { padding: 14px 16px; gap: 14px; border-radius: 14px; }
.series-icon { width: 40px; height: 40px; }
.series-name { font-size: 14px; }
.series-count { font-size: 12px; }
.series-share { height: 4px; border-radius: 3px; background: #F2F4F6; }
.series-share i { background: var(--bar, #3182F6); }

/* ---- tag cloud: five centred rows, fading in place ---- */
.home-tags-cloud {
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    padding: 14px 12px; min-height: 0; flex: 1;
    background: #fff; border: 1px solid #E9ECEF; border-radius: 14px;
}
.tag-row { display: flex; justify-content: center; flex-wrap: nowrap; gap: 6px; min-height: 28px; width: 100%; overflow: hidden; }
.cloud-tag {
    height: 28px; display: inline-flex; align-items: center;
    padding: 0 11px; border-radius: 8px;
    border: 1px solid #E9ECEF; background: #F9FAFB; color: #4E5968;
    font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
    text-decoration: none; box-sizing: border-box; overflow: hidden;
    transition: opacity .32s ease, width .34s cubic-bezier(.2, .8, .2, 1), background .1s ease-out, color .1s ease-out, border-color .1s ease-out;
}
.cloud-tag:hover { background: #E8F3FF; color: #3182F6; border-color: #CFE1FD; transform: none; box-shadow: none; }
.cloud-tag.out { opacity: 0; }

@media (max-width: 1100px) {
    .strip-inner { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
    .strip-stat:nth-child(4) { border-left: 0; }
    .home-series-tags { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .hero-byline { flex-wrap: wrap; justify-content: center; border-radius: 16px; }
    .byline-sep { display: none; }
    .strip-inner { grid-template-columns: repeat(2, 1fr); }
    .strip-stat:nth-child(odd) { border-left: 0; }
    .strip-stat:nth-child(4) { border-left: 1px solid var(--obs-line); }
    .strip-today { grid-column: 1 / -1; border-left: 0; }
}
/* two rules from earlier passes were still winning: the cloud kept flex-wrap:wrap (in a
   column that packs rows into a left-aligned line the width of the widest row), and the
   pulse kept its old 200x44 size by id */
.home-tags-cloud { flex-wrap: nowrap; align-items: stretch; }
/* the old #visitor-chart rule also set position:relative by id, which kept the pulse in
   flow and pushed the strip to 626px tall */
.strip-inner { z-index: 1; }

/* ===========================================================================
   Additions: a sky that knows the hour, and the
   instruments pinned under the bar once you scroll past them.
=========================================================================== */
.strip-stat { position: relative; }

/* the sky: two properties the script sets, everything else derives */
.hero { --sky-day: 0; --sky-twilight: 0; }
.hero .aurora-bg::before {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(150, 190, 255, .55), rgba(150, 190, 255, 0) 70%),
        linear-gradient(0deg, rgba(255, 140, 90, .38), rgba(255, 140, 90, 0) 45%);
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero[data-phase="day"] .aurora-bg::before { opacity: calc(var(--sky-day) * .8); }
.hero[data-phase="twilight"] .aurora-bg::before { opacity: calc(var(--sky-twilight) * .9); }
.hero[data-phase="day"] .moon { opacity: calc(1 - var(--sky-day) * .75); box-shadow: none; }
.hero[data-phase="day"] .stars, .hero[data-phase="day"] .shooting-star { opacity: calc(1 - var(--sky-day)); }
.hero[data-phase="twilight"] .stars { opacity: .6; }

/* the pinned copy of the strip */
.strip-mini {
    position: fixed; left: 0; right: 0; top: var(--h-topbar); z-index: 40;
    background: rgba(15, 20, 54, .92); backdrop-filter: blur(10px);
    color: var(--obs-ink);
    transform: translateY(-100%); opacity: 0;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
    pointer-events: none;
}
.strip-mini.on { transform: none; opacity: 1; pointer-events: auto; }
.strip-mini-inner {
    max-width: var(--obs-col); margin: 0 auto; padding: 0 var(--obs-gutter);
    display: flex; align-items: center; height: 44px; gap: 28px;
}
.strip-mini-inner span { display: inline-flex; align-items: baseline; gap: 6px; }
.strip-mini-inner b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.strip-mini-inner i { font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--obs-faint); }
@media (prefers-reduced-motion: reduce) { .strip-mini { transition: none; } .hero .aurora-bg::before { transition: none; } }


.strip-today[hidden] { display: none; }