/* Page composition for the gallery example (Harbour Lights photo essay). A lead photo across the full
   width, then a sequence of pairs and mixed rows on a 12-column grid, a contact sheet, and a lightbox
   for every photo built on :target, with no script. */
@layer page {
  .pe-head { display: grid; gap: 1.6rem; padding-block: 7rem 4rem; }
  .pe-head h1 { font-family: var(--font-display, var(--font)); font-size: 7rem; line-height: 1; font-weight: 600; }
  .pe-fig { display: grid; gap: 1.2rem; margin: 0; }
  .pe-open { display: block; cursor: zoom-in; }
  .pe-fig svg, .pe-fig img { display: block; inline-size: 100%; block-size: auto; }
  .pe-fig figcaption { font-size: var(--small-size); line-height: 1.5; color: var(--muted); }
  .pe-fig figcaption b { color: var(--ink); font-weight: 650; }
  .pe-n { display: inline-grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; margin-inline-end: .8rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-display, var(--font)); font-size: 1.3rem; }
  .pe-t { margin-inline-end: .6rem; font-family: var(--font-display, var(--font)); color: var(--accent); }
  .pe-lead .pe-fig { grid-template-columns: minmax(0, 1fr) 30rem; align-items: end; gap: 4rem; padding-inline-end: var(--space-inline); }
  .pe-seq { display: grid; gap: 8rem; padding-block: 8rem; }
  .pe-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; align-items: end; }
  .pe-interlude { max-inline-size: 70rem; justify-self: center; font-size: 2.6rem; line-height: 1.55; font-style: italic; text-align: center; }
  .pe-solo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
  .pe-solo .pe-fig { grid-column: 2; }
  .pe-mix { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
  .pe-mix .pe-fig:last-child { margin-block-start: 16rem; }
  .pe-last { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: 4rem; inline-size: 84%; }
  .pe-missing img { aspect-ratio: 500 / 420; background: repeating-linear-gradient(-45deg, var(--surface) 0 1.2rem, var(--paper) 1.2rem 2.4rem); border: .1rem dashed var(--line); color: var(--muted); font-size: var(--small-size); }
  .pe-sheet { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1rem; margin-block-start: 1.6rem; padding: 1.6rem; background: var(--ink); border-radius: .4rem; }
  .pe-sheet a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; outline: .1rem solid color-mix(in srgb, var(--paper) 30%, transparent); }
  .pe-sheet svg { display: block; inline-size: 100%; block-size: 100%; }
  .pe-sheet span { position: absolute; inset-block-end: .4rem; inset-inline-start: .6rem; color: var(--paper); font-family: var(--font-display, var(--font)); font-size: 1.3rem; text-shadow: 0 0 .4rem var(--ink); }
  .pe-lb { position: fixed; z-index: 50; inset: 0; display: none; grid-template-rows: minmax(0, 1fr) auto; gap: 2rem; padding: 4rem var(--space-inline); background: color-mix(in srgb, var(--ink) 97%, transparent); color: var(--paper); }
  .pe-lb:target { display: grid; }
  .pe-lb figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1.6rem; justify-items: center; margin: 0; min-block-size: 0; }
  .pe-lb svg { max-inline-size: 100%; max-block-size: 100%; block-size: 100%; inline-size: auto; }
  .pe-lb figcaption { max-inline-size: 80rem; text-align: center; font-size: var(--text-size); }
  .pe-lb .pe-t { color: var(--paper); opacity: .7; }
  .pe-lb-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; }
  .pe-lb-nav a { color: var(--paper); }
  .pe-lb-nav a:last-child { justify-self: end; }
  .pe-close { padding: .6rem 1.8rem; border: .1rem solid currentColor; border-radius: 3rem; text-decoration: none; }
  @media (width <= 50em) {
    .pe-head { padding-block: 4rem 3rem; }
    .pe-head h1 { font-size: 4.8rem; }
    .pe-lead .pe-fig { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-inline: 0; }
    .pe-lead figcaption { padding-inline: var(--space-inline); }
    .pe-seq { gap: 5rem; padding-block: 5rem; }
    .pe-pair, .pe-mix, .pe-last, .pe-solo { grid-template-columns: minmax(0, 1fr); gap: 4rem; inline-size: auto; }
    .pe-solo .pe-fig { grid-column: 1; }
    .pe-mix .pe-fig:last-child { margin-block-start: 0; }
    .pe-interlude { font-size: 2.4rem; }
    .pe-sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pe-lb { padding: 3rem var(--space-inline); }
  }
  @media (height <= 30em) {
    .pe-head h1 { font-size: min(7rem, 11vh); }
    .pe-head { padding-block-start: 2.4rem; }
  }
}