/* ============================================================
   photos.css: the photograph collection pages under /photos.

   Extracted from photos/events/index.html when a second collection arrived.
   Two pages carrying the same three hundred lines inline is not a design, it
   is a copy. Everything here is built from shell.css tokens, so it follows
   light and dark and the type scale without knowing about them.

   The markup these rules style is generated by
   scripts/generate_photo_pages.py; the rules themselves are hand-written.
   ============================================================ */

/* ---------- index line ---------- */
.census {
   list-style: none;
   margin: clamp(26px, 3vw, 40px) 0 0;
   padding-block: clamp(18px, 2vw, 26px);
   padding-inline: 0;
   border-top: 1px solid var(--rule-2);
   border-bottom: 1px solid var(--rule-2);
   display: flex;
   flex-wrap: wrap;
   gap: clamp(24px, 4vw, 64px);
}

.census div {
   min-width: 84px;
}

.census dt {
   font-family: var(--sans);
   font-size: var(--t-eyebrow);
   font-weight: 600;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--ink-3);
}

.census dd {
   font-family: var(--serif);
   font-size: var(--t-h3);
   line-height: 1.1;
   margin: 6px 0 0;
}

/* ---------- year rule ---------- */
.year {
   margin-top: var(--movement);
   display: flex;
   align-items: baseline;
   gap: clamp(14px, 2vw, 28px);
   border-top: 1px solid var(--rule);
   padding-top: clamp(14px, 1.6vw, 22px);
}

.year h2 {
   font-size: var(--t-h2);
   line-height: 1;
}

.year p {
   font-family: var(--sans);
   font-size: var(--t-small);
   color: var(--ink-3);
   margin: 0;
   margin-left: auto;
   text-align: right;
}

/* ---------- occasion ----------
   One event, one header, then its frames. Before the collection had
   events contributing five frames apiece, every figure carried its
   own caption; five copies of the same venue and title read as a
   stutter, so the metadata moved up here and the frames below it are
   left to be pictures. */
.occasion {
   margin-top: clamp(34px, 3.8vw, 58px);
}

.occ-head {
   max-width: var(--read);
}

.occ-head > * {
   margin: 0;
}

.occ-head .f-title {
   font-size: var(--t-h3);
   line-height: 1.16;
   margin-top: 7px;
}

.occ-head .f-note {
   margin-top: 7px;
}

/* ---------- contact sheet ----------
   Column count follows the number of frames, so a single frame is
   shown at a size worth looking at instead of sitting in the first
   of three columns with two empty ones beside it. */
.sheet {
   margin-top: clamp(16px, 1.8vw, 24px);
   columns: 3 288px;
   column-gap: clamp(16px, 1.8vw, 26px);
}

.sheet[data-frames="1"] {
   columns: 1;
   max-width: min(100%, 680px);
}

.sheet[data-frames="2"] {
   columns: 2 320px;
}

/* .figure carries the site's media-protection overlay and the
   img sizing; .frame only re-flows it for the column context. */
.sheet .frame {
   margin: 0 0 clamp(24px, 2.8vw, 40px);
   break-inside: avoid;
   -webkit-column-break-inside: avoid;
}

.sheet .frame img {
   /* height:auto is load-bearing. The width and height attributes are
      there so the column flow reserves the right space before the
      file arrives, and shell.css sets width:100% on figure images
      without touching height, so the attribute would otherwise render
      as a literal pixel height and stretch every frame. The same trap
      is documented on .relic img in interests.html. */
   height: auto;
   border: 1px solid var(--rule);
   cursor: zoom-in;
   transition: opacity 0.25s ease;
}

.sheet .frame:hover img {
   opacity: 0.9;
}

.sheet .frame figcaption {
   max-width: none;
   margin-top: 9px;
}

/* A credit exists only where the file says who took the frame. Three
   of the MSIS frames carry EXIF Artist: MATT HAGEN; the derivatives
   are written without EXIF, so the credit has to be visible here or
   it does not survive at all. */
.f-credit {
   font-family: var(--sans);
   font-size: 0.78rem;
   letter-spacing: 0.05em;
   color: var(--ink-3);
}

/* Not every note under a frame is a credit. A credit names a person; this one
   describes what the photograph is of. Same size and colour, but without the
   letter-spacing, which suits a name and not a sentence. */
.f-caption {
   font-family: var(--sans);
   font-size: 0.78rem;
   line-height: 1.5;
   color: var(--ink-3);
}

/* A credit may name a person and link to them, so it needs the same
   link treatment as .f-note. Without this the global a{color:inherit}
   leaves the link indistinguishable from the text around it. */
.f-credit a,
.f-caption a {
   color: var(--accent);
   border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Venue is the label, the talk is the line people read, the rest is
   the fine print. Three weights, one column. */
.f-venue {
   display: block;
   font-family: var(--sans);
   font-size: var(--t-eyebrow);
   font-weight: 600;
   letter-spacing: 0.13em;
   text-transform: uppercase;
   color: var(--ink-2);
}

.f-title {
   display: block;
   font-family: var(--serif);
   font-size: 1.06rem;
   line-height: 1.32;
   color: var(--ink);
   margin-top: 6px;
}

.f-note {
   display: block;
   font-size: 0.86rem;
   line-height: 1.45;
   color: var(--ink-3);
   margin-top: 5px;
}

.f-note a {
   color: var(--accent);
   border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------- viewer ----------
   Opened by click on a frame. Kept page-local: no other page has a
   contact sheet, so shell.css has no reason to carry this. */
.lb[hidden] {
   display: none;
}

.lb {
   position: fixed;
   inset: 0;
   z-index: 200;
   background: color-mix(in srgb, #0b0c0e 92%, transparent);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   display: grid;
   place-items: center;
   padding: clamp(16px, 4vw, 56px);
}

.lb-stage {
   margin: 0;
   max-width: min(1100px, 100%);
   max-height: 100%;
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.lb-stage img {
   max-width: 100%;
   max-height: 76vh;
   width: auto;
   margin: 0 auto;
   object-fit: contain;
   background: #0b0c0e;
}

.lb-stage figcaption {
   font-family: var(--sans);
   font-size: 0.9rem;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.72);
   text-align: center;
}

/* The caption is a clone of the occasion header, so it arrives with
   the sheet's three-part structure. Recolour it for the dark stage. */
.lb-stage .occ-head {
   max-width: 68ch;
   margin: 0 auto;
}

.lb-stage .f-venue {
   color: rgba(255, 255, 255, 0.5);
}

.lb-stage .f-title {
   color: #fff;
   font-size: 1.12rem;
}

.lb-stage .f-note {
   color: rgba(255, 255, 255, 0.55);
}

.lb-stage .f-credit,
.lb-stage .f-caption {
   display: block;
   color: rgba(255, 255, 255, 0.45);
   margin-top: 8px;
}

.lb-count {
   font-family: var(--sans);
   font-size: 0.76rem;
   letter-spacing: 0.16em;
   color: rgba(255, 255, 255, 0.4);
   margin: 10px 0 0;
}

.lb-stage .f-note a,
.lb-stage .f-credit a,
.lb-stage .f-caption a {
   color: #7dc4f5;
   border-bottom-color: rgba(125, 196, 245, 0.4);
}

.lb button {
   position: absolute;
   background: none;
   border: 1px solid rgba(255, 255, 255, 0.24);
   border-radius: 999px;
   color: #fff;
   font-family: var(--sans);
   font-size: 1.4rem;
   line-height: 1;
   width: 46px;
   height: 46px;
   display: grid;
   place-items: center;
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease;
}

.lb button:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.5);
}

.lb-x {
   top: clamp(14px, 2.4vw, 30px);
   right: clamp(14px, 2.4vw, 30px);
}

.lb-prev {
   left: clamp(10px, 2vw, 26px);
   top: 50%;
   transform: translateY(-50%);
}

.lb-next {
   right: clamp(10px, 2vw, 26px);
   top: 50%;
   transform: translateY(-50%);
}

/* On a phone the side arrows sit on top of the picture. Move them
   under it, as a pair, where a thumb reaches them. */
@media (max-width: 620px) {
   .lb-prev,
   .lb-next {
      top: auto;
      bottom: clamp(14px, 4vw, 26px);
      transform: none;
   }

   .lb-prev {
      left: 28%;
   }

   .lb-next {
      right: 28%;
   }
}