/* ============================================================
   My Work — album index and album pages
   Loads after home-custom.css, which supplies the font, .brandmark,
   .page_nav and .filmgrain. Same palette as About and Contact.
   ============================================================ */

:root {
    --ink: #1f2b27;
    --paper: #ffb03f;
    --line: rgba(255, 176, 63, 0.20);
    --chip: rgba(255, 176, 63, 0.09);
    --chip2: rgba(255, 176, 63, 0.14);
    --chip3: rgba(255, 176, 63, 0.24);
}

html, body.work_page {
    margin: 0;
    min-height: 100%;
    background: var(--ink);
    color: var(--paper);
}
body.work_page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem 4rem;
    box-sizing: border-box;
}
/* Lift the content above the grain layer. Listed explicitly rather than as
   `> *:not(.filmgrain)`, because that selector computes to 0-2-1 specificity
   (the :not argument counts) and would beat .lightbox's own `position: fixed`,
   dropping the overlay into the page flow. */
.work_page .c-top,
.work_page .page_logo,
.work_page .wrap,
.work_page .work_foot { position: relative; }
body.work_page a { color: inherit; }

/* header: centred nav then centred wordmark, matching Contact */
.work_page .c-top {
    width: 100%; max-width: 1100px;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 4.5rem;
}
.work_page .page_logo {
    /* --header-logo-scale: see the note on --logo-scale in home-custom.css */
    width: min(calc(200px * var(--header-logo-scale, 1)),
               calc(44vw * var(--header-logo-scale, 1)));
    margin: 1rem 0 5rem; color: var(--paper);
    background: var(--chip); padding: 0.5rem 0.9rem; border-radius: 12px;
    box-sizing: content-box;
}
.work_page .page_logo .brandmark { width: 100%; }

.work_page .wrap { width: 100%; max-width: 1180px; text-align: center; }
.work_page h1 {
    text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 1.5rem; font-weight: normal; margin: 0;
    display: inline-block; background: var(--chip2);
    padding: 0.5em 1.1em; border-radius: 999px;
}
.work_page .count, .work_page .crumb {
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    margin: 0;
}
/* The title keeps the pill. These two are signposts, not destinations, so they
   sit quietly above and below it. */
.work_page .crumb { margin: 0 0 1.1rem; opacity: 0.62; }
.work_page .crumb a {
    text-decoration: none; padding: 0.35em 0.2em;
    border-bottom: 1px solid transparent; transition: border-color 0.25s ease, opacity 0.25s ease;
}
.work_page .crumb a:hover, .work_page .crumb a:focus-visible { border-bottom-color: currentColor; }
.work_page .count { margin: 0.9rem 0 2.6rem; opacity: 0.55; }
.work_page .empty {
    line-height: 1.9; background: var(--chip);
    padding: 1.2rem 1.3rem; border-radius: 14px; display: inline-block;
}

/* ---- album index ---- */
.album_grid {
    list-style: none; padding: 0;
    /* The title above is a pill, so its rounded edge sits closer to whatever
       follows than a flat baseline would. Without this the cards crowd it. */
    margin: 2.6rem 0 0;
    display: grid; gap: 1.6rem;
    /* auto-fit with a max width and centred tracks, so one or two albums sit in
       the middle of the page instead of stranded at the left edge, while a
       larger set still fills the row */
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    justify-content: center;
}
/* Cards fill their grid row, so an album whose name runs to two lines does not
   leave its neighbours short. */
.album_card { display: flex; }
.album_card a {
    display: flex; flex-direction: column; width: 100%; text-decoration: none;
    background: var(--chip); padding: 10px; border-radius: 14px;
    transition: background 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.album_card a:hover, .album_card a:focus-visible {
    background: var(--chip2); transform: translateY(-4px);
}
.album_cover {
    display: block; position: relative;
    aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
}
.album_cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(0.2); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.album_card a:hover .album_cover img { transform: scale(1.05); filter: grayscale(0); }
/* Stacked and centred, not a row. As a row the count took its share of the
   width and left the name about 180px, so "Product / Campaign" wrapped and made
   that one card taller than the others. Stacked, the name has the whole card to
   itself and centring matches the pills the rest of the site is built from. */
.album_meta {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.85rem 0.35rem 0.35rem; text-align: center;
}
.album_title {
    text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem;
    line-height: 1.25; text-wrap: balance;
}
.album_count { font-size: 0.66rem; letter-spacing: 0.1em; opacity: 0.65; white-space: nowrap; }

/* ---- one album: justified rows ----
   Each item's flex-grow is its aspect ratio, so a row's widths come out
   proportional to each photo's shape and every photo in that row lands on the
   same height (height = width / ar, and width is proportional to ar). flex-wrap
   forms the rows, so they re-flow with the viewport and nothing needs computing
   at build time. --rowh is the target height, set per album; --ar is per photo. */
/* Rows the artist arranged, not rows the browser happened to wrap. Which photos
   share a row is a composition decision, and wrapping took it away: adding one
   photo could re-flow every row after it. */
.photo_rows {
    display: flex; flex-direction: column; gap: 10px;
    --rowh: 380px;
}
.photo_row {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 10px;
    /* Caps the row's WIDTH, not its height. Height is what a cap wants to
       control - a row holding one portrait photo would otherwise be taller than
       the screen - but clamping height with an aspect-ratio set would crop, and
       not cropping is the whole point of sizing by shape. Capping width holds
       the height down and leaves the row short of the full width, sitting left.
       --sum is the row's total aspect ratio, written in by the generator. */
    max-width: calc(var(--sum, 3) * var(--rowh) * 1.35);
    /* A row that hits the cap is narrower than the column. Without this it pins
       itself to the left edge, and a page of mixed rows reads as ragged rather
       than composed. */
    margin-inline: auto;
}
.photo_row > li {
    /* Widths in proportion to shape, so the row lands on one height.

       The grow factor is the photo's share of the row, not its raw shape. Per
       the flexbox spec, factors summing to less than 1 hand out only that
       fraction of the free space - so a row holding one portrait photo (0.67)
       left a third of itself empty. Dividing by the row's total makes the
       factors sum to exactly 1 whatever the row holds.

       The basis is proportional too rather than zero, so the same ratio applies
       whether the row has space to give out or has to shrink. */
    flex-grow: calc(var(--ar) / var(--sum, 3));
    flex-shrink: calc(var(--ar) / var(--sum, 3));
    flex-basis: calc(var(--ar) * 100px);
    aspect-ratio: var(--ar);
    min-width: 0;
    margin: 0;
}
.shot {
    display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0;
    background: rgba(0, 0, 0, 0.25); cursor: pointer;
    overflow: hidden; border-radius: 4px;
}
.shot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: opacity 0.3s ease;
}
.shot:hover img, .shot:focus-visible img { opacity: 0.86; }
.shot:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.album_nav {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;
    margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--chip2);
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.album_nav a { text-decoration: none; transition: background 0.25s ease; }
.nav_side { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5em 0.9em; border-radius: 12px; }
.nav_side:hover, .nav_side:focus-visible { background: var(--chip); }
.nav_prev { justify-self: start; text-align: left; }
.nav_next { justify-self: end; text-align: right; }
.nav_side .dir { font-size: 0.62rem; opacity: 0.55; }
.nav_side .nm { font-size: 0.82rem; letter-spacing: 0.06em; }
.nav_all {
    grid-column: 2; background: var(--chip); padding: 0.55em 1.1em; border-radius: 999px;
}
.nav_all:hover, .nav_all:focus-visible { background: var(--chip2); }
@media (max-width: 640px) {
    /* Stacked, so two long album names cannot squeeze each other into slivers. */
    .album_nav { grid-template-columns: 1fr; justify-items: center; gap: 0.6rem; }
    .nav_prev, .nav_next { justify-self: center; text-align: center; }
    .nav_all { grid-column: 1; order: -1; }
}

.work_foot {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    justify-content: center; margin-top: 4rem;
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.work_foot > * { background: var(--chip); padding: 0.5em 0.9em; border-radius: 999px; }
.work_foot a { text-decoration: none; transition: background 0.25s ease; }
.work_foot a:hover { background: var(--chip2); }

/* ---- lightbox ---- */
.lightbox {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 16, 15, 0.94);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lb_img {
    max-width: min(92vw, 1400px); max-height: 86vh;
    width: auto; height: auto; display: block;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.lightbox button {
    position: absolute; border: 0; cursor: pointer;
    background: rgba(255, 176, 63, 0.12); color: var(--paper);
    width: 46px; height: 46px; border-radius: 50%;
    font-size: 1.5rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s ease;
}
.lightbox button:hover { background: rgba(255, 176, 63, 0.26); }
.lightbox button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.lb_close { top: 1.1rem; right: 1.1rem; }
.lb_prev { left: 1.1rem; top: 50%; transform: translateY(-50%); }
.lb_next { right: 1.1rem; top: 50%; transform: translateY(-50%); }
.lb_count {
    position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
    margin: 0; font-size: 0.7rem; letter-spacing: 0.14em;
    background: var(--chip); padding: 0.45em 0.9em; border-radius: 999px;
}
/* stop the page behind scrolling while the lightbox is open */
body.lb_open { overflow: hidden; }

@media (max-width: 640px) {
    body.work_page { padding: 1.5rem 1rem 3rem; }
    .work_page .c-top { margin-bottom: 2.6rem; }
    .work_page .page_logo { margin: 0.5rem 0 2.6rem; }
    /* capped tracks rather than 1fr, so justify-content:center still centres a
       lone album instead of parking it in the left column */
    .album_grid { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); gap: 1rem; }
    /* shorter target height on a phone, so a row is 1-2 photos not 4 */
    .photo_rows { --rowh: 200px; gap: 6px; }
    /* A row of four would be four slivers on a phone. Stack instead: the
       arrangement is a composition for a wide screen, and there is no width here
       to compose across. */
    .photo_row { flex-direction: column; max-width: none; gap: 6px; }
    .lb_prev { left: 0.5rem; }
    .lb_next { right: 0.5rem; }
    .lightbox button { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .album_card a, .album_cover img, .shot img { transition: none; }
}