/* Posters & films: the gallery, the full-size viewer, and each piece's own page.
   Depends on cf-shell.css, cf.css and page.css. */

/* Gallery: one row per collection. The name sits in the margin column, the pieces beside it. */
.gal-hero{padding-bottom:clamp(32px,4vw,52px)}
.gal-hero .h1{max-width:9.5em}
.gal-hero .lede{text-wrap:pretty}
.gal-group.band{padding-block:clamp(40px,5.2vw,68px)}
.gal-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(28px,5vw,64px);align-items:start}
.gal-grid>*{min-width:0}
.gal-head .kicker{margin-bottom:14px}
.gal-head .h3{font-size:clamp(28px,2.4vw,34px);line-height:1.1}
.gal-head .h3 em{display:block}
.gal-head .small{margin-top:16px;max-width:26em}
.gal-count{margin-top:16px;font-size:15.5px;line-height:1.4;color:var(--cf-muted)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px;align-items:start;list-style:none;margin:0;padding:0}
.tiles li{position:relative;min-width:0;scroll-margin-top:72px}
.tile{display:block;text-decoration:none;font-size:16.5px;line-height:1.35}
.tile-art{position:relative;display:block;margin-bottom:11px}
.tile-art img{display:block;width:100%;height:auto;background:var(--cf-stone);box-shadow:0 0 0 1px var(--cf-line);transition:transform .2s ease}
.tile:hover .tile-art img{transform:translateY(-3px)}
.tile strong{display:block;text-wrap:balance}
.tile-meta{display:block;margin-top:2px;font-size:15.5px;color:var(--cf-muted)}
.tile .play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--cf-paper);box-shadow:0 2px 14px rgba(16,44,68,.35);display:flex;align-items:center;justify-content:center;padding-left:3px}
.tile-text{display:block}
.tile-hook{display:none}
.tile--film .tile-art img{border-radius:10px;box-shadow:none}
.tiles li:target .tile-art img{outline:3px solid var(--cf-green);outline-offset:4px}

/* Short films: the one dark band on the page */
.gal-films.band{background:var(--cf-ink);color:var(--cf-on-ink);border-top:0;padding-block:clamp(48px,6vw,80px)}
.gal-films .kicker,.gal-films h2 em{color:var(--cf-mint)}
.gal-films .small,.gal-films .gal-count,.gal-films .tile-meta{color:var(--cf-on-ink-muted)}
.gal-films a{color:var(--cf-on-ink)}
.gal-films a:hover{color:var(--cf-mint)}
.gal-films :focus-visible{outline-color:var(--cf-mint)}
.gal-films .tiles li:target .tile-art img{outline-color:var(--cf-mint)}
.tiles--films{grid-template-columns:repeat(3,minmax(0,230px));gap:26px}

.gal-foot .copy{margin-top:16px}
.gal-foot .notes a{font-weight:700}

/* Viewer: additions to the shared .lightbox */
.gal-viewer .lightbox-inner{grid-template-columns:minmax(0,1fr) 340px;min-height:min(560px,calc(100dvh - 32px))}
.gal-viewer .lightbox-side h2{font-size:28px;text-wrap:balance}
.gal-viewer .lightbox-side .viewer-hook{font-family:var(--cf-serif);font-size:20px;line-height:1.3;color:var(--cf-ink)}
.viewer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.viewer-actions button,.viewer-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--cf-ink);background:transparent;color:var(--cf-ink);font:inherit;font-size:16.5px;font-weight:700;text-decoration:none;cursor:pointer}
.viewer-actions .is-main,.viewer-actions .is-main:hover{background:var(--cf-ink);color:var(--cf-on-ink);border-color:var(--cf-ink)}
.viewer-actions button:hover,.viewer-actions a:hover{border-color:var(--cf-green);color:var(--cf-green)}
.viewer-actions .is-main:hover{background:var(--cf-green);border-color:var(--cf-green);color:var(--cf-on-ink)}
.copy-status{min-height:1.5em;font-size:15.5px;line-height:1.5;font-weight:700;color:var(--cf-green);overflow-wrap:anywhere}
.gal-viewer .lightbox-side .copy-status{margin-top:-6px;color:var(--cf-green)}
.gal-viewer .lightbox-nav button{flex:1}

/* A piece's own page */
.piece-page .page-hero.piece{padding-top:clamp(28px,4vw,56px)}
.piece-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5.5vw,76px);align-items:start}
.piece-grid>*{min-width:0}
.piece-media{position:sticky;top:calc(var(--cf-header) + 24px)}
.piece-media img,.piece-media video{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - var(--cf-header) - 56px);box-shadow:0 0 0 1px var(--cf-line);background:var(--cf-ink)}
.piece-media--film video{border-radius:10px;box-shadow:none}
.piece-body .kicker{flex-wrap:wrap;gap:4px 14px;margin-bottom:18px}
.piece-what{font-weight:400;color:var(--cf-muted)}
.piece-body .h2{font-size:clamp(34px,4.2vw,56px)}
.piece-hook{margin-top:20px;font-family:var(--cf-serif);font-size:clamp(22px,2.2vw,28px);line-height:1.28;max-width:24em}
.piece-body .copy{margin-top:16px}
.piece-body .cf-btn-row{margin-top:28px}
.piece-body .copy-status{margin-top:10px}
.piece-sources,.full-caption{margin-top:30px;padding-top:18px;border-top:1px solid var(--cf-ink)}
.piece-sources h2,.full-caption h2{font-family:var(--cf-sans);font-size:15.5px;font-weight:700;letter-spacing:.02em;line-height:1.4;margin:0 0 12px;text-wrap:initial}
.piece-sources ul{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0;padding:0;font-size:17px}
.piece-sources a{font-weight:700}
.full-caption p{max-width:40em;font-size:17px;line-height:1.6;color:var(--cf-muted)}
.full-caption p+p{margin-top:12px}
.piece-back{padding-bottom:clamp(28px,4vw,44px);margin-top:-8px}

/* The preference study in four panels */
.panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,64px) clamp(32px,6vw,80px)}
.panel{min-width:0;padding-top:20px;border-top:2px solid var(--cf-ink)}
.panel .kicker{margin-bottom:14px}
.panel .h3{font-size:clamp(26px,2.5vw,34px)}
.panel p{margin-top:14px;font-size:17px;line-height:1.6}
.panel .choice-boundary,.panel .choice-source{font-size:16.5px;line-height:1.55;color:var(--cf-muted)}
.panel .choice-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.panel .choice-models h3{font-family:var(--cf-sans);font-size:15.5px;font-weight:700;letter-spacing:.02em;color:var(--cf-green)}
.panel .choice-models strong{display:block;font-family:var(--cf-serif);font-weight:400;font-size:clamp(40px,4.4vw,58px);line-height:1.05;margin-top:4px}
.panel .choice-models p{margin-top:2px;font-size:17px}
.panel .cmp-wrap{margin-top:18px}
.panel .choice-not-included{color:var(--cf-chip-against-ink)}
.panel .choice-hypothesis{margin-top:20px;padding-left:18px;border-left:3px solid var(--cf-green)}
.panel .choice-hypothesis span{font-size:15.5px;font-weight:700;letter-spacing:.02em;color:var(--cf-green)}
.panel .choice-hypothesis p,.panel blockquote{margin:6px 0 0;font-family:var(--cf-serif);font-size:24px;line-height:1.25}
.panel blockquote{margin-top:20px;padding-left:18px;border-left:3px solid var(--cf-green)}
.panel .choice-tagline{font-family:var(--cf-serif);font-size:24px;color:var(--cf-green)}
.panel .choice-action{display:inline-block;margin-top:14px;font-weight:700}

@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gal-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .gal-head .h3 em{display:inline}
  .gal-head .small{max-width:36em}
  .tiles--films{grid-template-columns:repeat(3,minmax(0,220px))}
}
@media (max-width:900px){
  .gal-viewer .lightbox-inner{grid-template-columns:minmax(0,1fr);min-height:0}
  /* Phones: Previous, Next and Close sit in a bar above the picture, so they never cover it or move. */
  .gal-viewer .lightbox-media{padding-top:64px}
  .gal-viewer .lightbox-nav{position:absolute;top:10px;left:10px;z-index:2;margin:0;padding:0;gap:8px}
  .gal-viewer .lightbox-nav button{flex:none;background:var(--cf-paper)}
  .piece-grid{grid-template-columns:minmax(0,1fr)}
  .piece-media{position:static}
  .piece-media img,.piece-media video{max-height:78dvh;margin-inline:auto}
  .panels{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .tiles--films{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .tiles--films .tile{font-size:15.5px}
  .tile .play{width:40px;height:40px;margin:-20px 0 0 -20px}
  /* An odd poster at the end of a row sits beside its own caption instead of beside a gap. */
  .tiles:not(.tiles--films) li:last-child:nth-child(odd){grid-column:1 / -1}
  .tiles:not(.tiles--films) li:last-child:nth-child(odd) .tile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
  .tiles:not(.tiles--films) li:last-child:nth-child(odd) .tile-art{margin-bottom:0}
  .tiles:not(.tiles--films) li:last-child:nth-child(odd) .tile-hook{display:block;margin-top:6px;font-size:15.5px;line-height:1.45;color:var(--cf-muted)}
  .viewer-actions button,.viewer-actions a{flex:1 1 auto}
}

/* The two-column "what each group compared" table is small enough to stay a real table on phones,
   instead of the stacked cards used for the big comparison tables. */
.panel .cmp caption{caption-side:top;text-align:left;padding:0 20px 10px;font-size:15.5px;font-weight:700;letter-spacing:.02em;color:var(--cf-green)}
@media (max-width:900px){
  .panel .cmp{display:table;width:100%}
  .panel .cmp caption{display:table-caption;padding:0 0 10px}
  .panel .cmp thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:table-header-group}
  .panel .cmp tbody{display:table-row-group}
  .panel .cmp tr{display:table-row;padding:0;border:0}
  .panel .cmp th,.panel .cmp td{display:table-cell;padding:12px 10px 12px 0;border:0;border-bottom:1px solid var(--cf-line);font-family:var(--cf-sans);font-size:16px;line-height:1.4;width:auto}
  .panel .cmp tbody th{font-weight:700;font-size:16px;width:44%}
  .panel .cmp thead th{font-size:15px}
  .panel .cmp td::before{content:none;display:none}
}