/* The gallery. Same broadsheet system as the journeys and the journal, and
   the same custom properties, so the Look screen moves this too.

   Phone first in the places that matter: one column of pictures, taps that
   are 48px or bigger, and a viewer that fills the screen and closes with a
   thumb rather than a mouse. */

.al-gal{
  --ink:var(--al-ink,#1A120B);
  --soft:var(--clay,#6B4A32);
  --faint:color-mix(in srgb, var(--clay,#6B4A32) 68%, var(--cream,#F7F0E3));
  --brand:var(--terracotta,#B4522E);
  --deep:var(--terracotta-deep,#9E4526);
  --rule:rgba(26,18,11,.18);
  --hair:rgba(26,18,11,.1);
  --paper:var(--cream,#F7F0E3);
  --raised:var(--sand,#E7D8BE);
  --face:var(--display,"Marcellus",Georgia,serif);
  --sans-face:var(--body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  --base:var(--al-base,18px);
  background:var(--paper);color:var(--ink);font-family:var(--sans-face);
  font-size:var(--base);line-height:1.7;padding-bottom:72px;
}

.al-gal .al-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,5vw,48px)}

/* ---- the head ---- */
.al-gal-head{padding:clamp(32px,6vw,64px) 0 clamp(20px,3vw,30px);border-bottom:1px solid var(--rule);
  margin-bottom:clamp(24px,4vw,40px)}
.al-gal-eyebrow{margin:0 0 12px;font:700 11px/1 var(--sans-face);letter-spacing:.24em;
  text-transform:uppercase;color:var(--brand)}
.al-gal-head h1{margin:0;font-family:var(--face);font-weight:400;line-height:1.02;
  font-size:clamp(2.4rem,6.4vw,4.4rem);letter-spacing:-.01em}
.al-gal-lede{margin:16px 0 0;max-width:58ch;color:var(--soft);font-size:1.05rem;line-height:1.65}
.al-gal-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0;
  font:700 11px/1 var(--sans-face);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.al-gal-back{margin:22px 0 0;font:700 11px/1 var(--sans-face);letter-spacing:.2em;text-transform:uppercase}
.al-gal-back a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.al-gal-back a:hover{color:var(--deep);border-color:var(--deep)}

/* ---- the filter bar ---- */
.al-gal-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin:0 0 clamp(20px,3vw,32px)}
.al-gal-count{margin:0;font:700 11px/1 var(--sans-face);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.al-gal-picks{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.al-gal .al-pick{display:flex;align-items:center;gap:8px;background:transparent;
  border:1px solid var(--rule);border-radius:2px;padding:0 12px;min-height:48px}
.al-gal .al-pick span{font:700 10px/1 var(--sans-face);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.al-gal .al-pick select{border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;
  min-height:46px;padding-right:4px}
.al-gal-go{min-height:48px;padding:0 18px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font:700 11px/1 var(--sans-face);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.al-gal-clear{align-self:center;color:var(--soft);font:700 11px/1 var(--sans-face);letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.al-gal-empty{margin:40px 0 0;color:var(--soft)}

/* ---- the sections, as cards ---- */
.al-gal-grid{display:grid;gap:clamp(18px,2.6vw,34px);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){
  .al-gal-grid{grid-template-columns:repeat(3,1fr)}
  .al-gal-card.is-lead{grid-column:span 3}
  .al-gal-card.is-lead .al-gal-frame{aspect-ratio:21/9}
  .al-gal-card.is-lead .al-gal-name{font-size:clamp(1.7rem,2.6vw,2.4rem)}
}
.al-gal-grid.is-small{grid-template-columns:repeat(3,1fr)}
.al-gal-card{display:block;text-decoration:none;color:inherit;min-width:0}
.al-gal-frame{display:block;position:relative;overflow:hidden;background:var(--raised);aspect-ratio:4/3}
.al-gal-frame img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.al-gal-card:hover .al-gal-frame img{transform:scale(1.04)}
.al-gal-noshot{position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,rgba(26,18,11,.05) 0 10px,transparent 10px 20px)}
.al-gal-film{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:999px;
  background:rgba(26,18,11,.62);backdrop-filter:blur(2px)}
.al-gal-film::after{content:"";position:absolute;left:13px;top:10px;border-style:solid;
  border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.al-gal-say{display:block;padding:14px 2px 0}
.al-gal-where{display:block;font:700 10px/1 var(--sans-face);letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);margin-bottom:7px}
.al-gal-name{display:block;font-family:var(--face);font-weight:400;line-height:1.14;
  font-size:clamp(1.15rem,2.2vw,1.5rem)}
.al-gal-card:hover .al-gal-name{color:var(--deep)}
.al-gal-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;
  font:700 10px/1.4 var(--sans-face);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ---- one section: the pictures ---- */
/* A grid rather than columns, so the order somebody set in the dashboard
   is the order it reads on the page, left to right. */
.al-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px)}
.al-mosaic .al-tile{display:block;position:relative;width:100%;margin:0;padding:0;border:0;
  background:transparent;cursor:zoom-in;text-decoration:none;color:inherit;text-align:left}
.al-frame{display:block;position:relative;overflow:hidden;background:var(--raised);aspect-ratio:4/3}
.al-frame img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.al-mosaic .al-tile:hover .al-frame img{transform:scale(1.04)}
.al-mosaic .al-tile.is-film{cursor:pointer}
.al-mosaic .al-tile.is-film.is-blank .al-frame{background:var(--ink)}
.al-tile-say{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;text-align:left;
  font:500 13px/1.4 var(--sans-face);color:#fff;
  background:linear-gradient(to top,rgba(10,7,4,.78),transparent);
  opacity:0;transition:opacity .25s ease}
.al-tile:hover .al-tile-say,.al-tile:focus-visible .al-tile-say{opacity:1}
.al-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:999px;background:rgba(10,7,4,.55);
  border:1px solid rgba(255,255,255,.5);transition:background .25s ease,transform .25s ease}
.al-play::after{content:"";position:absolute;left:25px;top:19px;border-style:solid;
  border-width:13px 0 13px 20px;border-color:transparent transparent transparent #fff}
.al-tile.is-film:hover .al-play{background:var(--deep);transform:translate(-50%,-50%) scale(1.06)}

.al-gal-more{margin:34px 0 0;font:700 11px/1 var(--sans-face);letter-spacing:.18em;text-transform:uppercase}
.al-gal-more a{color:var(--deep);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.al-gal-next{margin-top:clamp(40px,6vw,72px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--rule)}
.al-gal-next h2{margin:0 0 22px;font-family:var(--face);font-weight:400;font-size:clamp(1.4rem,3vw,2rem)}

/* ---- the viewer ---- */
.al-view{position:fixed;inset:0;z-index:999;display:grid;
  grid-template-rows:auto 1fr auto;background:#0C0906;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.al-view[hidden]{display:none}
/* Signed in, WordPress puts its own bar over everything, including a
   viewer that fills the screen, so the viewer starts under it. */
body.admin-bar .al-view{top:46px}
@media (min-width:783px){body.admin-bar .al-view{top:32px}}
.al-view-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.al-view-count{margin:0;color:rgba(255,255,255,.72);font:700 11px/1 var(--sans-face);letter-spacing:.2em}
.al-view-shut{width:48px;height:48px;border:0;background:transparent;cursor:pointer;position:relative}
.al-view-shut::before,.al-view-shut::after{content:"";position:absolute;left:13px;top:23px;width:22px;height:2px;
  background:#fff}
.al-view-shut::before{transform:rotate(45deg)}
.al-view-shut::after{transform:rotate(-45deg)}
.al-view-stage{grid-column:1/-1;display:grid;place-items:center;min-height:0;padding:8px 0}
.al-view-stage img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.al-view-stage iframe{width:min(100%,1100px);aspect-ratio:16/9;border:0;background:#000}
.al-view-say{grid-column:1/-1;margin:0;text-align:center;color:rgba(255,255,255,.8);
  font-size:14px;min-height:1.4em;padding:0 8px}
.al-view-step{position:fixed;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(10,7,4,.5);cursor:pointer;z-index:2}
.al-view-step::after{content:"";position:absolute;left:21px;top:19px;width:14px;height:14px;
  border-left:2px solid #fff;border-bottom:2px solid #fff}
.al-view-step.is-prev{left:10px}
.al-view-step.is-prev::after{transform:rotate(45deg)}
.al-view-step.is-next{right:10px}
.al-view-step.is-next::after{left:17px;transform:rotate(-135deg)}
.al-view-step:hover{background:rgba(180,82,46,.85)}
html.al-view-open,html.al-view-open body{overflow:hidden}

@media (max-width:900px){
  .al-mosaic{grid-template-columns:repeat(2,1fr)}
  .al-gal-grid.is-small{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:620px){
  .al-gal{font-size:17px}
  .al-mosaic{grid-template-columns:1fr;gap:20px}
  .al-frame{aspect-ratio:3/2}
  .al-gal-grid,.al-gal-grid.is-small{grid-template-columns:1fr;gap:26px}
  .al-gal-frame{aspect-ratio:3/2}
  .al-gal-bar{flex-direction:column;align-items:stretch}
  .al-gal-picks{flex-direction:column;align-items:stretch}
  .al-gal .al-pick{justify-content:space-between}
  .al-gal-go{width:100%}
  /* The caption is only on hover with a mouse, so on a phone it is simply
     there, under the picture, where it can be read. */
  .al-tile-say{position:static;opacity:1;background:none;color:var(--soft);padding:8px 2px 0;font-size:13.5px}
  .al-view-step{width:52px;height:52px;top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:none}
  .al-view-step.is-prev{left:14px}
  .al-view-step.is-next{right:14px}
  .al-view-say{padding-bottom:58px}
}

@media (prefers-reduced-motion:reduce){
  .al-gal-frame img,.al-frame img,.al-play{transition:none}
}