/* ==========================================================================
   eddysvensson.se — main theme
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- Tokens --------------------------------------------------------------- */
:root {
    --bg:       #fafaf8;
    --surface:  #efeeea;
    --text:     #1a1a18;
    --muted:    rgba(26, 26, 24, 0.5);
    --border:   rgba(26, 26, 24, 0.14);
    --accent:   #1a1a18;

    --font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --base:     clamp(1rem, 0.8rem + 0.3vw, 1.25rem);
    --lede:     clamp(1.0625rem, 0.85rem + 0.4vw, 1.5rem);
    --small:    clamp(0.875rem, 0.7rem + 0.25vw, 1.0625rem);
    --nav:      clamp(1.15rem, 0.9rem + 0.6vw, 1.875rem);
    --lh:       1.5;

    --unit:     1.25rem;
    --pad:      clamp(1.25rem, 3vw, 3.5rem);
    --radius:   0;
    --gutter:   0px;
    --measure:  40rem;

    --ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --speed:    0.15s;
}

html:not(.is-light) {
    --bg:       #141413;
    --surface:  #1e1e1c;
    --text:     #eeeeea;
    --muted:    rgba(238, 238, 234, 0.5);
    --border:   rgba(238, 238, 234, 0.16);
    --accent:   #eeeeea;
}

/* --- Reset / base --------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; background: var(--bg); }
body {
    font-family: var(--font);
    font-size: var(--base);
    font-weight: 500;
    line-height: var(--lh);
    letter-spacing: -0.01em;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--text); color: var(--bg); }

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

/* --- Shell ---------------------------------------------------------------- */
.site {
    min-height: 100vh;
    padding: var(--pad);
}

/* --- Header: slash navigation, top-left ----------------------------------- */
.site-header { margin-bottom: clamp(2.5rem, 9vh, 6rem); }

.site-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.site-nav a {
    color: var(--muted);
    font-size: var(--base);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    transition: color var(--speed) var(--ease);
}
.site-nav a:hover,
.site-nav a.is-active { color: var(--text); }

.site-nav a + a::before {
    content: '/';
    display: inline-block;
    margin: 0 0.4em;
    color: var(--muted);
    opacity: 0.5;
}
/* the slash belongs to the muted colour, not the hover colour */
.site-nav a + a { display: inline-flex; }

/* --- Main: indented to a left gutter on wide screens ---------------------- */
.site-main {
    max-width: 56rem;
    animation: fadeIn 0.5s var(--ease) both;
}
.site-main.page-photos,
.site-main.page-lab,
.site-main.page-log {
    max-width: none;
}

/* --- Type ----------------------------------------------------------------- */
.site-main h1 {
    font-size: var(--nav);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: calc(var(--unit) * 1.25);
}

/* The first paragraph under the h1 is the statement */
.site-main h1 + p {
    font-size: var(--lede);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    max-width: 34em;
    margin-bottom: calc(var(--unit) * 2);
}
.site-main h1 + p a { border-bottom-color: var(--border); }

/* Index: every paragraph matches the statement */
.site-main.page-home p {
    font-size: var(--lede);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    max-width: 34em;
}

.site-main h2 {
    font-size: var(--base);
    font-weight: 700;
    margin: calc(var(--unit) * 2.5) 0 var(--unit);
}

.site-main h3 {
    font-size: var(--small);
    font-weight: 600;
    color: var(--muted);
    margin: calc(var(--unit) * 2.5) 0 calc(var(--unit) * 0.6);
    padding-top: calc(var(--unit) * 0.6);
    border-top: 1px solid var(--border);
    max-width: var(--measure);
}

.site-main p {
    max-width: var(--measure);
    margin-bottom: var(--unit);
    line-height: 1.5;
}

.site-main em { font-style: italic; color: var(--muted); }

.site-main a {
    border-bottom: 1px solid var(--border);
    transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.site-main a:hover { border-bottom-color: var(--text); }

.site-main hr {
    border: none;
    height: 1px;
    background: var(--border);
    margin: calc(var(--unit) * 2) 0;
}

.site-main img { border-radius: var(--radius); }

/* --- Contact links -------------------------------------------------------- */
.contact-links { margin-bottom: var(--unit); }
.contact-links li { padding: 0.15rem 0; }

/* --- Now: reading / listening / playing ----------------------------------- */
.now-section {
    margin-top: calc(var(--unit) * 1.5);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--unit);
    max-width: 40rem;
}
.now-item { min-width: 0; }

.site-main .now-link { border-bottom: 0; display: block; color: var(--text); }

.now-cover-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--surface);
    margin-bottom: 0.6rem;
}
.now-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--speed) var(--ease);
}
.now-link:not(.now-link--empty):hover .now-cover { opacity: 0.8; }

.now-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.now-label { font-size: var(--small); color: var(--muted); }
.now-text { display: flex; flex-direction: column; min-width: 0; }
.now-title,
.now-meta {
    font-size: var(--small);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.now-meta, .now-empty { color: var(--muted); font-size: var(--small); }

.now-archive-link { margin-top: var(--unit); font-size: var(--small); }

/* --- Photos --------------------------------------------------------------- */
.year-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: calc(var(--unit) * 1.5);
}
.year-nav-link {
    font-size: var(--nav);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--muted);
    transition: color var(--speed) var(--ease);
}
.year-nav-sep {
    font-size: var(--nav);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--muted);
    margin: 0 0.6em;
    opacity: 0.6;
}
.site-main .year-nav-link { border-bottom: 0; }
a.year-nav-link:hover,
.year-nav-link.is-active { color: var(--text); }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 0.9rem);
}
.photo-item {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    cursor: pointer;
    background: var(--surface);
}
.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--speed) var(--ease);
}
.photo-item:hover img { opacity: 0.8; }
.no-photos { color: var(--muted); }

/* --- Lightbox ------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1003;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), visibility 0.2s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox-img-wrap { display: flex; align-items: center; justify-content: center; }
.lightbox-img {
    max-width: 88vw;
    max-height: 82vh;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.2s var(--ease);
}
.lightbox.is-open .lightbox-img.is-loaded { opacity: 1; }

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: none;
    border: none;
    color: var(--muted);
    font-family: var(--font);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: var(--pad);
    transition: color var(--speed) var(--ease);
    z-index: 10;
    user-select: none;
}
.lightbox-close { top: 0; right: 0; }
.lightbox-prev  { left: 0;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 0; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { color: var(--text); }

.lightbox-counter,
.lightbox-date {
    position: absolute;
    bottom: var(--pad);
    font-size: var(--small);
    color: var(--muted);
}
.lightbox-counter { left: var(--pad); }
.lightbox-date    { right: var(--pad); }

body.lightbox-active,
body.nav-active { overflow: hidden; }

/* --- Lists: lab + log ----------------------------------------------------- */
.lab-list,
.log-list { max-width: 46rem; }

.lab-list li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}
.lab-list li:first-child { border-top: 1px solid var(--border); }
.site-main .lab-list a { border-bottom: 0; }
.lab-list a:hover { color: var(--muted); }

.lab-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 0.9rem);
    margin-top: calc(var(--unit) * 2);
}
.lab-item { overflow: hidden; aspect-ratio: 1; background: var(--surface); cursor: pointer; }
.lab-item img, .lab-item video { width: 100%; height: 100%; object-fit: cover; }
.lab-item:hover { opacity: 0.8; }
.lab-item--video { cursor: default; }
.lab-item--video:hover { opacity: 1; }
.lab-empty { color: var(--muted); grid-column: 1 / -1; font-size: var(--small); }

.log-list-item {
    display: flex;
    align-items: baseline;
    gap: var(--unit);
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}
.log-list-item:first-child { border-top: 1px solid var(--border); }

.log-list-tag {
    width: 6em;
    flex-shrink: 0;
    font-size: var(--small);
    color: var(--muted);
}
.site-main .log-list-link {
    display: flex;
    gap: 0.6em;
    min-width: 0;
    border-bottom: 0;
}
.log-list-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-list-sub { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-list-link:hover .log-list-title { color: var(--muted); }
.log-list-date {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--small);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.log-empty { color: var(--muted); font-size: var(--small); }

/* --- Theme toggle (sits at the end of the slash nav) ---------------------- */
.theme-toggle {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: color var(--speed) var(--ease);
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { display: block; }
.nav-theme-toggle { margin-left: 1.25rem; }
.theme-toggle .icon-moon { display: none; }
html.is-light .theme-toggle .icon-sun  { display: none; }
html.is-light .theme-toggle .icon-moon { display: block; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { display: none; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
    :root { --gutter: 0px; }
    .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .site-header { margin-bottom: 3rem; }
    .photo-grid,
    .lab-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .log-list-sub { display: none; }
    .log-list-tag { width: auto; min-width: 4.5em; }
    .now-section { grid-template-columns: 1fr; gap: 0.75rem; }
    .now-item .now-link { display: flex; gap: 0.75rem; align-items: center; }
    .now-cover-wrap { width: 64px; flex-shrink: 0; margin-bottom: 0; }
    .lightbox-img { max-width: 95vw; max-height: 78vh; }
}

/* --- Link color ----------------------------------------------------------- */
:root { --link: #6e67b2; --link-hover: #4a4390; }
html:not(.is-light) { --link-hover: #9a94d6; }

a,
a:visited,
.site-nav a,
.site-nav a.is-active,
.site-main a,
.site-main .now-link,
.contact-links a,
.year-nav-link,
.lab-list a { color: var(--link) !important; }

a:hover,
.site-nav a:hover,
.site-main a:hover,
.site-main .now-link:hover,
.contact-links a:hover,
a.year-nav-link:hover,
.lab-list a:hover { color: var(--link-hover) !important; }

.site-main a:hover { border-bottom-color: var(--link-hover); }