:root { --bg: #fff; --text: #1a1a1a; --muted: #555; --link: #1a3fa0; --link-hover: #b3261e; --line: #ccc; --sidebar-width: 15rem; --content-width: 46rem; } /* Cinema theme — applied to while the Photography panel is open */ body.theme-dark { --bg: #0a0a0a; --text: #ededed; --muted: #9a9a9a; --link: #cfcfcf; --link-hover: #ffffff; --line: rgba(255, 255, 255, 0.16); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; color: var(--text); background: var(--bg); font-family: Helvetica, Arial, "Helvetica Neue", sans-serif; font-size: 15px; line-height: 1.55; } body, .sidebar, .sidebar__group-title, .panel > h2, a { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } a { color: var(--link); text-decoration: underline; } a:hover { color: var(--link-hover); } img { display: block; max-width: 100%; } /* ---- Layout: left sidebar + right content ---- */ .site-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); align-items: start; } .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: 1.6rem 1.2rem; border-right: 1px solid var(--line); } .sidebar__toggle { display: none; } .sidebar__nav { display: flex; flex-direction: column; } .sidebar__group-title { margin: 1.4rem 0 0.35rem; padding-bottom: 0.2rem; border-bottom: 1px solid var(--line); color: var(--text); font-size: 0.95rem; font-weight: bold; } .sidebar__group-title:first-child { margin-top: 0; } .sidebar__nav a { padding: 0.28rem 0; color: var(--link); text-decoration: none; font-size: 0.95rem; } .sidebar__nav a:hover { text-decoration: underline; } .sidebar__nav a.is-active { text-decoration: underline; } .sidebar__links { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; } .sidebar__links a { display: block; padding: 0.15rem 0; } /* ---- Right content ---- */ .content { width: 100%; max-width: calc(var(--content-width) + 6rem); padding: 1.8rem 3rem 4rem; } .panel { display: none; } .panel.is-active { display: block; } .panel > h2 { margin: 0 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); font-size: 1.5rem; font-weight: bold; } .panel p { max-width: var(--content-width); margin: 0 0 0.9rem; } .panel h3 { margin: 1.4rem 0 0.3rem; font-size: 1.05rem; font-weight: bold; } .meta { color: var(--muted); font-style: italic; font-size: 0.9rem; } /* Home profile */ .profile { display: flex; gap: 1.4rem; align-items: flex-start; margin-bottom: 1.2rem; } .profile__photo { width: 9rem; flex: none; border: 1px solid var(--line); } /* Simple lists (interests, publications, writing) */ .list { max-width: var(--content-width); margin: 0 0 1rem; padding-left: 1.2rem; } .list li { margin: 0.2rem 0; } .entries { max-width: var(--content-width); } .entry { margin: 0 0 1.3rem; } .entry h3 { margin: 0 0 0.15rem; } .entry p { margin: 0.2rem 0; } .film { display: flex; gap: 1.2rem; align-items: flex-start; margin: 0 0 1.6rem; } .film__poster { width: 9rem; flex: none; border: 1px solid var(--line); } img.film__poster { cursor: zoom-in; } .film__poster--empty { display: flex; align-items: flex-end; height: 12rem; padding: 0.6rem; background: #efefef; color: var(--muted); font-style: italic; } /* Masonry gallery. CSS-columns is the fallback; JS upgrades to ordered (row-wise, shortest-column) masonry via .js-masonry. */ .photo-grid { column-width: 340px; column-gap: 6px; } .photo { margin: 0 0 6px; break-inside: avoid; } .photo img { display: block; width: 100%; height: auto; /* preserve aspect ratio (height attr would otherwise stretch it) */ cursor: zoom-in; } .photo-grid.js-masonry { display: flex; gap: 6px; align-items: flex-start; } .photo-col { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 6px; } .js-masonry .photo { margin: 0; } /* Hover badge showing the photo id (for curation) */ .photo[data-id] { position: relative; } .photo[data-id]::after { content: attr(data-id); position: absolute; top: 5px; left: 5px; padding: 1px 6px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.72rem; letter-spacing: 0.03em; border-radius: 3px; opacity: 0; transition: opacity 0.12s ease; pointer-events: none; } .photo[data-id]:hover::after { opacity: 1; } /* Any gallery panel breaks out to full width */ body.gallery-wide .content { width: 100%; max-width: none; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.95); } .lightbox[hidden] { display: none; } .lightbox__img { max-width: 92vw; max-height: 92vh; object-fit: contain; } .lightbox__close, .lightbox__nav { position: absolute; padding: 0.4rem 1rem; border: 0; background: none; color: #ccc; font-size: 2.6rem; line-height: 1; cursor: pointer; } .lightbox__close:hover, .lightbox__nav:hover { color: #fff; } .lightbox__close { top: 0.4rem; right: 0.8rem; font-size: 2.2rem; } .lightbox__prev { top: 50%; left: 0.4rem; transform: translateY(-50%); } .lightbox__next { top: 50%; right: 0.4rem; transform: translateY(-50%); } .lightbox__caption { position: absolute; bottom: 0.7rem; left: 50%; transform: translateX(-50%); color: #bbb; font-size: 0.85rem; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; } .contact-table td { padding: 0.2rem 1.2rem 0.2rem 0; vertical-align: top; } .contact-table td:first-child { color: var(--muted); } /* Callout link (e.g. the Van build entry in the Life panel) */ .callout { margin: 1.2rem 0; font-weight: bold; } /* Standalone Van build page */ .vanpage { max-width: 1100px; margin: 0 auto; padding: 1.8rem 1.5rem 4rem; } .vanpage__top { margin: 0 0 1.6rem; } .vanpage__back { color: var(--muted); text-decoration: none; } .vanpage__back:hover { color: var(--text); } .vanpage h1 { margin: 0 0 0.3rem; font-size: 1.6rem; font-weight: bold; } .vanpage__status { margin: 0 0 1rem; color: var(--muted); font-style: italic; } .vanpage p { max-width: 46rem; } /* Build-journal sections on the Van page */ .journal { margin: 2.6rem 0; } .journal h2 { margin: 0 0 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--line); font-size: 1.25rem; font-weight: bold; } .journal p { max-width: 46rem; margin: 0 0 1rem; } .journal p.journal-date { margin: 0 0 0.7rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* ---- Responsive ---- */ @media (max-width: 800px) { .site-shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .content { padding: 1.4rem 1.4rem 3rem; } .profile, .film { flex-direction: column; } }