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

body {
    background: #111;
    color: #bbb;
    font-family: ui-monospace, 'Cascadia Code', 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 14px;
    line-height: 1.6;
}

a { color: #7aaa7a; text-decoration: none; }
a:hover { color: #aad4aa; }

/* ── NAV ── */
.nav-bar {
    background: #161616;
    border-bottom: 1px solid #252525;
    padding: 0 32px;
    display: flex;
    align-items: stretch;
    height: 48px;
}

.nav-site {
    display: flex;
    align-items: center;
    padding-right: 24px;
    border-right: 1px solid #242424;
    margin-right: 24px;
    flex-shrink: 0;
}

.nav-site a { color: #ccc; font-size: 14px; letter-spacing: 0.04em; }
.nav-site a:hover { color: #eee; }
.nav-site .prompt { color: #484848; margin-left: 2px; }

.nav-breadcrumb {
    display: flex;
    align-items: center;
    font-size: 12px;
    overflow: hidden;
    flex: 1;
    white-space: nowrap;
    gap: 4px;
}

.nav-breadcrumb a.seg { color: #5a8a5a; }
.nav-breadcrumb .sep { color: #404040; }
.nav-breadcrumb .seg-dim { color: #4a4a4a; font-style: italic; }

.nav-links {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-links a {
    color: #626262;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 0 18px;
    height: 48px;
    display: flex;
    align-items: center;
    border-left: 1px solid #202020;
    transition: color 0.12s, background 0.12s;
}

.nav-links a:hover { color: #aaa; background: #191919; }
.nav-links a.active { color: #999; background: #151515; border-bottom: 2px solid #5a8a5a; }

/* ── CONTAINERS ── */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 32px 56px;
}

.container-wide {
    max-width: 1500px;
    margin: 0 auto;
    padding: 40px 32px 56px;
}

/* ── SECTION LABEL ── */
.section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #585858;
    margin-bottom: 14px;
}

/* ── HOME ── */
.home-split {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: start;
}

.home-about p { color: #888; line-height: 1.8; font-size: 13px; }

.home-right-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.home-right-label .section-label { margin-bottom: 0; }

.home-right-label a { color: #585858; font-size: 10px; letter-spacing: 0.08em; }
.home-right-label a:hover { color: #7aaa7a; }

.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.home-grid a { display: block; }
.home-grid img {
    width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
    filter: brightness(0.88); transition: filter 0.18s;
}
.home-grid a:hover img { filter: brightness(1.0); }

/* ── GALLERY ── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }

.gallery-item { position: relative; aspect-ratio: 1; overflow: hidden; background: #161616; }

.gallery-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: brightness(0.88); transition: filter 0.18s;
}

.gallery-item:hover img { filter: brightness(1.0); }

.gallery-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.88));
    padding: 24px 10px 9px; font-size: 10px;
    opacity: 0; transition: opacity 0.18s; line-height: 1.5;
}

.gallery-item:hover .gallery-caption { opacity: 1; }

.caption-cat { color: #999; }
.caption-date { color: #666; margin-left: 5px; }
.caption-alg { color: #5a8a5a; font-size: 9px; margin-top: 2px; }

/* ── DETAIL CARD ── */
.detail-card {
    display: grid;
    grid-template-columns: 1fr 240px;
    border: 1px solid #1e1e1e;
}

.detail-card-image { background: #111; align-self: start; }
.detail-card-image img { width: 100%; display: block; }

.detail-card-meta {
    background: #181818;
    border-left: 1px solid #242424;
    padding: 24px 20px;
    align-self: stretch;
}

.meta-row { margin-bottom: 22px; }

.meta-label {
    font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.22em; color: #585858; margin-bottom: 5px;
}

.meta-value { font-size: 13px; color: #888; }
.meta-value.primary { color: #aaa; }

.algo-list { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }

.algo-tag {
    background: #202020; border: 1px solid #2c2c2c;
    color: #5a8a5a; font-size: 11px; padding: 3px 10px; display: inline-block;
}

.meta-identifier {
    font-size: 10px; color: #4a4a4a; line-height: 1.8;
    word-break: break-all; margin-top: 4px;
}

.back-link {
    display: inline-block; margin-bottom: 22px;
    font-size: 11px; color: #5a5a5a; letter-spacing: 0.05em;
}
.back-link:hover { color: #7aaa7a; }

/* ── CONTENT PAGE (about) ── */
.content-body {
    max-width: 640px;
    margin: 0 auto;
}
.content-body h2 {
    font-size: 10px; font-weight: normal;
    text-transform: uppercase; letter-spacing: 0.2em;
    color: #585858; margin-bottom: 14px; margin-top: 36px;
}
.content-body h2:first-child { margin-top: 0; }
.content-body p { color: #888; line-height: 1.8; margin-bottom: 16px; }

/* description text inside detail panel */
.detail-card-meta p { font-size: 12px; color: #777; line-height: 1.7; margin: 0; }

/* ── CV ── */
.cv-body { max-width: 700px; margin: 0 auto; padding: 40px 0; }
.cv-section { margin-bottom: 48px; }

.cv-year-group { margin-bottom: 28px; }

.cv-year {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
    color: #585858; padding-bottom: 6px;
    border-bottom: 1px solid #222; margin-bottom: 4px;
}

.cv-entry {
    display: grid;
    grid-template-columns: 2fr 1fr 130px;
    gap: 12px;
    padding: 6px 0; border-bottom: 1px solid #1a1a1a;
    font-size: 13px; align-items: baseline;
}

.cv-entry-title { color: #aaa; }
.cv-entry-venue { color: #666; font-size: 12px; }
.cv-entry-dates { color: #585858; font-size: 11px; text-align: right; white-space: nowrap; }
.cv-empty { color: #484848; font-size: 13px; }

/* ── FOOTER ── */
.footer {
    border-top: 1px solid #1e1e1e;
    padding: 14px 32px; color: #484848; font-size: 11px;
}

/* ── RESPONSIVE ── */
@media (min-width: 640px)  { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .gallery-grid { grid-template-columns: repeat(5, 1fr); } }

@media (max-width: 639px) {
    .nav-bar { padding: 0 12px; }
    .nav-site { padding-right: 12px; margin-right: 12px; }
    .nav-site a { font-size: 13px; }
    .nav-links a { padding: 0 10px; font-size: 11px; }

    .container, .container-wide { padding: 24px 16px 40px; }

    .home-split { grid-template-columns: 1fr; gap: 28px; }

    .detail-card { grid-template-columns: 1fr; }
    .detail-card-meta { border-left: none; border-top: 1px solid #242424; align-self: auto; }
}

/* landscape images stack earlier — panel would overtop short image at mid widths */
@media (min-width: 640px) and (max-width: 849px) {
    .detail-card.landscape { grid-template-columns: 1fr; }
    .detail-card.landscape .detail-card-meta {
        border-left: none; border-top: 1px solid #242424; align-self: auto;
    }
}