styles.css

/* ===================================
   CSS Custom Properties (Variables)
   =================================== */
:root {
    /* Colors */
    --color-primary: #000000;
    --color-secondary: #727272;
    --color-accent: #f6bd60;
    --color-background: #ffffff;
    --color-text: #000000;
    --color-gray: darkgray;

    /* Spacing */
    --spacing-xs: 0.5vw;
    --spacing-sm: 1vw;
    --spacing-md: 2vw;
    --spacing-lg: 4vw;
    --spacing-xl: 8vw;

    /* Typography */
    --font-family: 'IBM Plex Mono', monospace;
    /* Serif rule: the serifs are reserved for things that speak to the
       artistic / humanities side of the work (writing, photography,
       reflective questions, the motto). Engineering and utility content
       stays in IBM Plex Mono. Display is for large titles; Text is the
       same family drawn for small sizes (~20px and under). */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-text: 'DM Serif Text', Georgia, serif;
    --font-size-base: 12px;
    --font-size-large: 1.5vw;
    --font-size-heading: 2vw;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* Layout */
    --grid-gap: 1vw;
    --grid-row-gap: 2vw;
    --gallery-gap: 2vw;
    --gallery-border: 1px solid black;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;

    /* Z-index layers */
    --z-base: 0;
    --z-sticky: 2;
    --z-dropdown: 10;
    --z-overlay: 11;
    --z-hover: 15;
}

/* ===================================
   Base Styles
   =================================== */
* {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    z-index: var(--z-base);
    box-sizing: border-box;
}

*::selection {
    background-color: var(--color-accent);
}

img::selection {
    background-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
}

/* ===================================
   Typography
   =================================== */
p {
    margin: 0;
    line-height: 1.6;
}

a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    margin: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary);
}

a:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.heading {
    font-size: var(--font-size-heading);
    font-weight: 900;
    margin: 0;
}

/* ===================================
   Header & Navigation
   =================================== */
#time {
    right: var(--spacing-md);
    transform: translateY(-0.3vh);
    position: fixed;
    z-index: var(--z-sticky);
}

#bar {
    display: flex;
    gap: var(--spacing-sm);
    margin-left: var(--spacing-xl);
    right: var(--spacing-xl);
    position: fixed;
    z-index: var(--z-overlay);
}

#letterhead {
    margin-left: var(--spacing-sm);
    margin-top: var(--spacing-md);
    margin-right: var(--spacing-sm);
}

.letterhead-name {
    font-family: var(--font-text);
    font-weight: var(--font-weight-normal);
    font-size: 1.12rem;
    line-height: 1;
}

/* ===================================
   Grid Layout
   =================================== */
#image_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--grid-gap);
    row-gap: var(--grid-row-gap);
    max-width: 100%;
    margin: var(--spacing-sm);
    margin-right: calc(var(--spacing-md) + 9.9px);
    margin-left: var(--spacing-md);
}

.grid-item {
    position: relative;
}

.grid-item img {
    width: 100%;
    height: auto;
    max-height: calc((100vw / 6) * 3);
    object-fit: cover;
    object-position: center;
    z-index: var(--z-base);
    transition: z-index var(--transition-fast);
}

.grid-item img:hover {
    z-index: var(--z-hover);
}

.grid-item p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===================================
   Index Page Styles
   =================================== */
/* Timeline Styles */
#timeline {
    grid-column: 1 / 2;
    grid-row: 1 / span 3;
    align-self: start;
    z-index: var(--z-sticky);
    color: var(--color-gray);
    padding: 8px;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: var(--spacing-md);
}

#montagna {
    grid-column: 2 / span 5;
    grid-row: 1;
}

#montagna:hover {
    z-index: var(--z-overlay);
}

#wowCL {
    grid-column: 2 / 4;
    grid-row: 2;
}

#wowCL:hover {
    z-index: var(--z-overlay);
}

#discovery {
    grid-column: 4 / span 3;
    grid-row: 2;
}

.timeline-row {
    display: flex;
    gap: 8px;
}

/* The label doubles as the open/close control (see initializeTimelineToggle).
   Below desktop it just reads as the old "Timeline:" heading. */
.timeline-toggle {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-weight: var(--font-weight-black);
    color: var(--color-primary);
}

.timeline-toggle::after {
    content: ":";
}

.timeline-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Desktop homepage: the photos take the page, and the timeline is squeezed
   into the left page margin as a single word running up it. Clicking opens
   it to a full column, pushing the photos over. */
@media (min-width: 1025px) {
    #image_grid:has(> #timeline) {
        --timeline-open: 16vw;
        position: relative;
        grid-template-columns: repeat(5, 1fr);
        transition: padding-left var(--transition-medium);
    }

    #image_grid:has(> #timeline.is-open) {
        padding-left: calc(var(--timeline-open) + var(--grid-gap));
    }

    #image_grid:has(> #timeline) #montagna { grid-column: 1 / -1; }
    #image_grid:has(> #timeline) #wowCL { grid-column: 1 / 3; }
    #image_grid:has(> #timeline) #discovery { grid-column: 3 / -1; }

    /* Out of the grid flow: collapsed, it fills the page margin beside the
       photos; open, it takes the space the grid's padding clears for it. */
    #timeline {
        /* An absolute grid item with a grid placement is positioned inside
           that grid area (past the padding); `auto` makes it use the grid's
           padding box, so left: 0 really is the cleared space. */
        grid-column: auto;
        grid-row: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(-1 * var(--spacing-md));
        width: var(--spacing-md);
        margin: 0;
        padding: 0;
        align-items: center;
        /* Clip sideways while it animates, but never cut off the bottom rows. */
        overflow-x: clip;
        color: var(--color-text);
        transition: left var(--transition-medium), width var(--transition-medium);
    }

    #timeline.is-open {
        left: 0;
        width: var(--timeline-open);
        align-items: flex-start;
    }

    /* Fixed width so rows don't rewrap while it's animating open. */
    #timeline .timeline-row {
        flex-shrink: 0;
        width: var(--timeline-open);
    }

    #timeline:not(.is-open) .timeline-row {
        display: none;
    }

    /* Collapsed, the label fills the margin strip so the whole thing is clickable. */
    .timeline-toggle {
        flex: 1;
        align-self: center;
        cursor: pointer;
        color: var(--color-primary);
        /* Reads bottom-to-top (letter tops face left); `end` keeps the word
           at the top of the strip once it's flipped. */
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        text-align: end;
    }

    .timeline-toggle:hover {
        color: var(--color-secondary);
    }

    /* ∇ after the word reads as an arrow: pointing at the photos while
       collapsed (it turns with the sideways label), back toward the margin
       once open. */
    #timeline .timeline-toggle::after {
        font-family: var(--font-display);
    }

    #timeline:not(.is-open) .timeline-toggle::after {
        content: "\00a0\2207";
    }

    #timeline.is-open .timeline-toggle::after {
        content: "\2207";
        display: inline-block;
        margin-left: 0.5em;
        transform: rotate(90deg);
    }

    #timeline.is-open .timeline-toggle {
        flex: none;
        align-self: flex-start;
        writing-mode: horizontal-tb;
        transform: none;
        text-align: left;
    }
}

.timeline-year {
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    width: 1uw;
    text-align: left;
}

.timeline-details {
    text-align: left;
    flex-grow: 1;
}

.match-timeline {
    text-decoration: none;
    color: inherit;
}

/* ===================================
   Projects Page Styles
   =================================== */
#projectFilters {
    grid-column: 1;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    margin: 0;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5vw;
}

.filter-btn,
.year-btn {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0.25vw 0.6vw;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-medium);
    text-transform: lowercase;
}

.filter-btn:hover,
.year-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-background);
}

.filter-btn.active,
.year-btn.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.filter-btn:focus,
.year-btn:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

#filterCount {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    margin-top: 0.5vw;
}

#projectList {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    margin: 0;
    perspective: 700px;
}

#projectList a {
    transition: opacity var(--transition-medium), transform var(--transition-medium);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#projectList a.filtered-out {
    opacity: 0;
    transform: translateX(-10px);
    height: 0;
    overflow: hidden;
    margin: 0;
    pointer-events: none;
}

@keyframes flap-in {
    0%   { opacity: 0; transform: rotateX(-90deg); }
    45%  { opacity: 1; }
    70%  { transform: rotateX(6deg); }
    100% { opacity: 1; transform: rotateX(0deg); }
}

#projectList a.flap-in {
    animation: flap-in var(--transition-medium) both;
    will-change: transform, opacity;
}

#writings {
    grid-column: 4 / span 2;
    grid-row: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
    padding: 0;
    margin: 0;
}

#preview {
    grid-column: 4 / -1;
    grid-row: 2 / span 2;
}

/* Back link used at the top of the log / blog pages */
.page-back {
    display: inline-block;
    margin: var(--spacing-md);
    margin-bottom: 0;
    color: var(--color-secondary);
}

/* Currently / work-in-progress block — sits atop the project-list column */
#currently {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0 0 var(--spacing-sm);
    padding: 0;
}

.current-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    line-height: 1.2;
}

.current-item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}

.current-focus {
    color: var(--color-secondary);
    margin: 0;
}

/* Cap the preview image so small source files aren't upscaled (and blurred) */
#preview img {
    max-width: 460px;
    max-height: 620px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ===================================
   Photos/Gallery Page Styles
   =================================== */
#galleryGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    margin: var(--spacing-md) calc(var(--spacing-md) + 9.9px) var(--spacing-md) var(--spacing-md);
}

.gallery-card {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    border: var(--gallery-border);
    padding: 1vw;
    background: var(--color-background);
}

.gallery-cover {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: var(--gallery-border);
}

.gallery-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25vw;
}

.gallery-title {
    font-family: var(--font-text);
    font-weight: var(--font-weight-normal);
    font-size: 1.35rem;
    line-height: 1.15;
}

.gallery-description {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ===================================
   Image Interactions
   =================================== */
img {
    width: 100%;
    height: auto;
    object-position: center;
    z-index: var(--z-base);
}

img:hover {
    z-index: var(--z-hover);
}

/* Homepage photos (with their captions) that are still loading start hidden
   and fade in once they arrive (class added by JS, so they still show if
   scripts don't run). The transition lives only on the loaded state so
   hiding is instant. */
.grid-item.fade-in {
    opacity: 0;
}

.grid-item.fade-in.is-loaded {
    opacity: 1;
    transition: opacity 1.6s ease;
}

.flip {
    cursor: e-resize;
    z-index: var(--z-base);
}

.flip:hover {
    z-index: var(--z-hover);
}

/* ===================================
   Utility Classes
   =================================== */
.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ===================================
   Footer
   =================================== */
footer {
    text-align: center;
    margin-top: 20px;
    padding: var(--spacing-md);
    color: var(--color-gray);
}

/* Quiet footer easter-egg link — inherits footer color so it stays hidden */
.motto-link {
    color: inherit;
    font-family: var(--font-text);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    font-size: 1.1rem;
}

.motto-link:hover {
    color: inherit;
}

/* ===================================
   Responsive Design - Mobile
   =================================== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 14px;
        --spacing-xl: 4vw;
    }

    #bar {
        margin-left: var(--spacing-lg);
        right: var(--spacing-lg);
    }

    #image_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    #timeline {
        grid-column: 1 / -1;
        grid-row: 1;
        position: static;
        margin-left: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    #wowCL {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #montagna {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #discovery {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #projectFilters {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #projectList {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #writings {
        grid-column: 1 / -1;
        grid-row: auto;
        align-items: flex-start;
        text-align: left;
    }

    #preview {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #galleryGrid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        margin: var(--spacing-lg);
    }

    .gallery-card {
        padding: 3vw;
    }

}

/* ===================================
   Responsive Design - Tablet
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    #image_grid {
        grid-template-columns: repeat(4, 1fr);
    }

    #timeline {
        grid-column: 1 / -1;
        grid-row: 1;
        position: static;
    }

    #wowCL {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    #montagna {
        grid-column: 3 / -1;
        grid-row: auto;
    }

    #discovery {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    #galleryGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
   Accessibility
   =================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    a {
        text-decoration: underline;
    }

    a:focus {
        outline-width: 3px;
    }
}

/* ===================================
   Print Styles
   =================================== */
@media print {
    #bar,
    #time {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    a {
        text-decoration: underline;
    }
}