/* The comp gallery (chat 20): designer F's "Fly the Comp", with D's lift-out viewer and an all-tasks view.
   Built by tools/v4_comp_gallery.py. Site tokens only (v2.css, styles.css).
   Motion: transform and opacity only; nothing loops; reduced motion and no JS show the finished page. */

.gf{--gf-ease:cubic-bezier(.2,.8,.2,1);--n:7;--gf-col:calc(100% / var(--n))}
.gf *{box-sizing:border-box}
.gf h1,.gf h2,.gf h3,.gf p,.gf ol,.gf figure{margin:0}

/* the nav lies over the lead photo, as on the home opening */
.page-wrap:has(>#v4-main>.gf-lead)>nav:not(.v2-nav-pinned){position:absolute;top:0;left:0;right:0;z-index:40;background:none}

/* ---------------------------------------------------------------- the lead */
.gf-lead{position:relative;isolation:isolate;display:flex;align-items:flex-end;height:clamp(340px,52svh,470px);padding:0 var(--edge-x,var(--gutter)) 1.1rem;overflow:hidden}
.gf-lead-media{position:absolute;inset:0;z-index:-2}
.gf-lead-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.gf-lead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,21,25,.72) 0%,rgba(20,21,25,.18) 26%,rgba(20,21,25,.12) 48%,rgba(20,21,25,.7) 82%,var(--bg) 100%)}
.gf-lead-copy{position:relative;width:100%}
.gf-back{display:inline-flex;align-items:center;gap:.45rem;min-height:32px;font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-light);text-decoration:none}
.gf-back:hover,.gf-back:focus-visible{color:var(--white)}
.gf-kicker{font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:.2rem 0 .35rem}
.gf-name{font-family:var(--font-display);font-weight:700;font-size:clamp(3.4rem,15vw,9rem);line-height:.9;letter-spacing:-.035em;color:var(--white);padding-bottom:.17em}
.gf-name span{font-size:.24em;font-weight:600;letter-spacing:0;color:var(--gray-light);margin-left:.15em;vertical-align:.2em}
.gf-facts{display:flex;flex-wrap:wrap;gap:.15rem .9rem;margin-top:.15rem;font-size:var(--fs-small);color:rgba(246,244,244,.84)}
.gf-facts span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--gray);margin:0 .9rem 0 0;vertical-align:.22em}
.gf-facts span:nth-child(3)~span::before{display:none}
@media (max-width:820px){
  .gf-lead{height:clamp(300px,46svh,420px)}
  .gf-back{display:none}
  .gf-facts span:nth-child(3){flex-basis:100%}
  .gf-facts span:nth-child(3)::before{display:none}
  .gf-facts span:nth-child(3)~span{display:none}
}
@media (min-width:821px){
  .gf-lead{height:clamp(460px,58vh,700px);padding-bottom:1.4rem}
  .gf-facts{font-size:var(--fs-body)}
  .gf-facts span:nth-child(3)~span::before{display:inline-block}
}

/* ---------------------------------------------------------------- the task line (sticky) */
.gf-body{position:relative}
.gf-line{position:sticky;top:0;z-index:30;
  background:url("img/dither.webp") 0 0/128px 128px repeat,rgba(20,21,25,.96);
  border-bottom:1px solid var(--line);transition:transform .38s var(--gf-ease)}
html.v2-nav-up .gf-line.is-stuck{transform:translateY(var(--v2-nav-h,5rem))}
.gf-line-in{position:relative;max-width:var(--measure);margin:0 auto;padding:0;overflow:hidden}
@media (max-width:820px){.gf-line-in{margin:0 var(--gutter)}}
.gf-tps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.gf-tp a{position:relative;display:flex;flex-direction:column;align-items:center;padding:30px 0 9px;min-height:44px;color:var(--gray);text-decoration:none;text-align:center;-webkit-tap-highlight-color:transparent}
.gf-tp b{font-family:var(--font-body);font-weight:600;font-size:12px;line-height:1.2;color:var(--gray-light);white-space:nowrap;margin-top:9px}
.gf-tp-d{font-size:11px;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
.gf-tp-s{display:none;font-size:var(--fs-small);line-height:1.3;white-space:nowrap}
.gf-tp-s>span{display:none}
.gf-tp[data-state=photos] [data-s=photos],.gf-tp[data-state=today] [data-s=today],.gf-tp[data-state=coming] [data-s=coming],.gf-tp[data-state=soon] [data-s=soon]{display:inline}
.gf-tp.is-open b{color:var(--white)}
.gf-tp.is-open .gf-tp-d{color:var(--gray-light)}
.gf-tp a:hover b,.gf-tp a:focus-visible b{color:var(--white)}
.gf-tp a:focus-visible{outline:1px solid var(--orange);outline-offset:-1px}
/* the turnpoints: on the line, at the column's middle */
.gf-dot{position:absolute;left:50%;top:26px;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--bg);border:1px solid var(--edge-hi);transition:transform .3s var(--gf-ease)}
.gf-tp[data-state=photos] .gf-dot{background:var(--gray-light);border-color:var(--gray-light)}
.gf-tp[data-state=today] .gf-dot{background:var(--orange);border-color:var(--orange)}
.gf-tp[data-state=coming] .gf-dot{border-color:var(--gray-light)}
.gf-tp[data-state=soon] .gf-dot{border-style:dashed;border-color:var(--edge)}
.gf-tp.is-open .gf-dot{transform:scale(1.35)}
.gf-tp.is-open[data-state=photos] .gf-dot{background:var(--white);border-color:var(--white)}
/* the track: from the first turnpoint to the last; orange as far as the comp has flown */
.gf-track{position:absolute;left:calc(var(--gf-col) / 2);right:calc(var(--gf-col) / 2);top:26px;height:1px;margin-top:-.5px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--edge) 0 4px,transparent 4px 8px)}
.gf-flown{position:absolute;inset:0;background:var(--orange);transform-origin:0 50%;transform:scaleX(calc(var(--flown) / max(1, var(--n) - 1)))}
/* the glider: one small layer, moved by transform only */
.gf-glw{position:absolute;left:0;top:8px;width:100%;height:14px;pointer-events:none;will-change:transform;
  transform:translateX(calc((var(--open) + .5) * 100% / var(--n)))}
.gf-glider{position:absolute;left:-11px;top:0;width:22px;height:14px;color:var(--white);will-change:transform}
.gf-glider svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:821px){
  .gf-tp a{padding:38px 0 14px}
  .gf-dot,.gf-track{top:32px}
  .gf-glw{top:12px}
  .gf-tp b{font-size:var(--fs-body-s);margin-top:12px}
  .gf-tp-d{font-size:var(--fs-small)}
  .gf-tp-s{display:block;margin-top:.15rem;color:var(--gray)}
  .gf-tp[data-state=today] .gf-tp-s{color:var(--orange)}
  .gf-tp.is-open .gf-tp-s{color:var(--gray-light)}
}

/* ---------------------------------------------------------------- a day */
.gf-days{max-width:var(--measure);margin:0 auto;padding:0}
@media (max-width:820px){.gf-days{margin:0 var(--gutter)}}
.gf-day{padding:1.1rem 0 2.5rem;scroll-margin-top:84px}
.gf-day+.gf-day{border-top:1px solid var(--line)}
.gf-js .gf-day:not(.is-open){display:none}
.gf-js .gf-day+.gf-day{border-top:0}
.gf-dh{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;margin-bottom:.8rem}
.gf-dh h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,7.5vw,3rem);line-height:1;letter-spacing:-.02em;color:var(--white)}
.gf-dh-r{display:flex;flex-wrap:wrap;gap:.1rem .8rem;font-size:var(--fs-small);color:var(--gray-light)}
.gf-dh-n{display:none;color:var(--gray)}
.gf-day[data-state=photos] .gf-dh-n[data-s=photos],.gf-day[data-state=today] .gf-dh-n[data-s=today],.gf-day[data-state=coming] .gf-dh-n[data-s=coming],.gf-day[data-state=soon] .gf-dh-n[data-s=soon]{display:inline}
.gf-day[data-state=today] .gf-dh-n[data-s=today]{color:var(--white)}
.gf-dh-o{display:none}
@media (min-width:821px){.gf-dh-o{display:inline}}

/* the photos: justified rows at their own ratio, in the order shot; no crop, no shop */
.gf-grid{display:flex;flex-wrap:wrap;gap:4px;--h:114px}
.gf-grid::after{content:"";flex-grow:999}
.gf-ph{position:relative;flex-grow:var(--r);flex-basis:calc(var(--r) * var(--h));min-width:0;background:color-mix(in srgb,var(--c) 34%,var(--bg));transition:opacity .25s var(--gf-ease)}
.gf-ph a{display:block;-webkit-tap-highlight-color:transparent}
.gf-ph img{display:block;width:100%;height:auto;aspect-ratio:var(--r)}
.gf-ph a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.gf-ph figcaption{font-size:var(--fs-micro);color:var(--gray);padding:.2rem 0 .3rem;letter-spacing:.04em}
.gf-js .gf-ph figcaption{display:none}
.gf-ph.is-last a::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--white);opacity:0;animation:gf-last 1.4s var(--gf-ease)}
@keyframes gf-last{20%{opacity:1}100%{opacity:0}}
@media (min-width:821px){.gf-grid{--h:270px;gap:6px}}
@media (min-width:1600px){.gf-grid{--h:320px}}

/* a day with no photos yet: it must look meant */
.gf-wait{display:none;position:relative;padding:2.2rem 1.4rem;border:1px solid var(--line);text-align:center;
  background:linear-gradient(180deg,rgba(180,180,180,.03),transparent)}
.gf-day:not([data-state=photos]) .gf-wait{display:block}
.gf-day[data-state=photos] .gf-wait,.gf-day:not([data-state=photos]) .gf-grid{display:none}
.gf-wait>div{display:none}
.gf-day[data-state=today] .gf-wait>[data-s=today],.gf-day[data-state=coming] .gf-wait>[data-s=coming],.gf-day[data-state=soon] .gf-wait>[data-s=soon]{display:block}
.gf-wait-t{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,4vw,1.9rem);line-height:1.2;color:var(--white);margin-bottom:.4rem}
.gf-wait p+p,.gf-wait-t+p{font-size:var(--fs-body-s);color:var(--gray-light);max-width:34ch;margin:0 auto}
.gf-tally{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:.55rem;vertical-align:.18em}
.gf-latest{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin-top:1rem;color:var(--white);font-size:var(--fs-body-s);font-weight:500;text-decoration:none;border-bottom:1px solid var(--edge-hi)}
.gf-latest:hover,.gf-latest:focus-visible{border-color:var(--orange)}
.gf-latest[hidden]{display:none}
@media (min-width:821px){.gf-wait{padding:4.5rem 2rem}}

/* next leg */
.gf-df{display:flex;justify-content:space-between;gap:1rem;margin-top:1.4rem;font-size:var(--fs-body-s)}
.gf-df a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:var(--gray-light);text-decoration:none}
.gf-df a:hover,.gf-df a:focus-visible{color:var(--white)}
.gf-df-n{margin-left:auto;text-align:right;color:var(--white)!important}
.gf-df-n i{color:var(--orange)}

.gf-cta{margin-top:2rem}

/* ---------------------------------------------------------------- the viewer */
.gfv{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;background:#0e0f12;color:var(--white);overflow:hidden;opacity:0;transition:opacity .22s var(--gf-ease),background-color .28s var(--gf-ease)}
.gfv[open]{display:flex;flex-direction:column}
.gfv.is-in{opacity:1}
.gfv::backdrop{background:transparent}
.gfv-top{flex:none;display:flex;align-items:center;gap:.5rem;padding:.75rem var(--gutter) .25rem;position:relative;z-index:3}
.gfv-pos{min-width:4.5rem;text-align:center;font-size:var(--fs-small);color:var(--gray-light);font-variant-numeric:tabular-nums}
.gfv-nav,.gfv-x{width:44px;height:44px;border-radius:50%;border:1px solid rgba(246,244,244,.26);background:rgba(20,21,25,.5);color:var(--white);display:grid;place-items:center;padding:0;cursor:pointer;transition:border-color .2s var(--gf-ease)}
.gfv-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gfv-nav:disabled{opacity:.3;cursor:default}
.gfv-x{margin-left:auto;position:relative}
.gfv-x::before,.gfv-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1px;margin-left:-7px;background:var(--white);transform:rotate(45deg)}
.gfv-x::after{transform:rotate(-45deg)}
.gfv-nav:not(:disabled):hover,.gfv-nav:focus-visible,.gfv-x:hover,.gfv-x:focus-visible{border-color:var(--orange);outline:none}
.gfv-stage{flex:1;min-height:0;position:relative;display:grid;place-items:center;touch-action:none;overflow:hidden}
.gfv-stage img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;user-select:none;-webkit-user-drag:none;cursor:zoom-in;transform-origin:center;transform:scale(.97);transition:transform .2s var(--gf-ease),opacity .2s var(--gf-ease)}
.gfv.is-in .gfv-stage img{transform:none}
.gfv.is-zoomed .gfv-stage img{cursor:grab}
.gfv.is-drag .gfv-stage img{cursor:grabbing;transition:opacity .2s var(--gf-ease)}
.gfv-foot{flex:none;display:grid;grid-template-columns:1fr;gap:.6rem;padding:.7rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom));position:relative;z-index:2;background:linear-gradient(180deg,transparent,rgba(14,15,18,.6) 30%)}
.gfv-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .7rem;min-width:0}
.gfv-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);letter-spacing:.01em;color:var(--white)}
.gfv-where{font-size:var(--fs-small);color:var(--gray-light)}
.gfv-acts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:center}
.gfv-acts .btn-lines,.gfv-acts .btn-solid{min-height:46px;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;text-decoration:none}
.gfv-acts .btn-solid{border:0;cursor:pointer;font-family:inherit}
.gfv-save.is-busy{color:var(--gray-light)}
.gfv-terms{font-size:var(--fs-micro);line-height:1.5;color:var(--gray)}
@media (min-width:821px){
  .gfv-top{padding:1rem 1.25rem .25rem}
  .gfv-stage{padding:0 4.5rem}
  .gfv-foot{grid-template-columns:1fr auto;grid-template-areas:"meta acts" "terms acts";align-items:center;column-gap:2rem;row-gap:.2rem;padding:.9rem 1.5rem 1.1rem}
  .gfv-meta{grid-area:meta}.gfv-acts{grid-area:acts;grid-template-columns:auto auto;gap:1.4rem}.gfv-terms{grid-area:terms}
  .gfv-acts .btn-lines{padding-left:1rem;padding-right:1rem}
}

/* the original: a small sheet inside the viewer */
.gfv-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;transform:translateY(104%);visibility:hidden;
  transition:transform .32s var(--gf-ease),visibility 0s linear .32s}
.gfv.is-buy .gfv-sheet{transform:none;visibility:visible;transition:transform .32s var(--gf-ease),visibility 0s}
.gfv-sheet-in{max-width:34rem;margin:0 auto;padding:1.3rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom));background:url("img/dither.webp") 0 0/128px 128px repeat,#1b1c21;border-top:1px solid var(--edge)}
@media (min-width:821px){.gfv-sheet{left:auto;right:1.5rem;bottom:5.6rem;width:min(30rem,calc(100vw - 3rem))}.gfv-sheet-in{border:1px solid var(--edge);padding:1.5rem 1.7rem;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}}
.gfv-sheet-k{font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.gfv-sheet-t{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.2;margin:.2rem 0 .8rem;outline:none}
.gfv-ref{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.1rem .8rem;padding:.55rem .8rem;border:1px solid var(--edge);margin-bottom:.8rem}
.gfv-ref span{grid-column:1 / -1}
.gfv-ref span{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.gfv-ref b{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);letter-spacing:.02em}
.gfv-copy{min-height:36px;padding:.2rem .7rem;background:none;border:1px solid var(--edge-hi);color:var(--white);font:inherit;font-size:var(--fs-small);cursor:pointer}
.gfv-copy:hover,.gfv-copy:focus-visible{border-color:var(--orange);outline:none}
.gfv-sheet-p{font-size:var(--fs-body-s);line-height:1.6;color:var(--gray-light)}
.gfv-sheet-a{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin:1rem 0 .7rem}
.gfv-sheet-a .btn-solid,.gfv-sheet-a .btn-lines{min-height:46px;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;font-family:inherit}
.gfv-sheet-a .btn-lines{background:none;border-left:0;border-right:0;color:var(--white);font-size:.95rem}
.gfv-paynote{font-size:var(--fs-micro);line-height:1.5;color:var(--gray);transition:color .2s var(--gf-ease)}
.gfv-paynote.is-lit{color:var(--white)}

/* ---------------------------------------------------------------- reduced motion: the finished page, no moves */
@media (prefers-reduced-motion:reduce){
  .gf-line,.gf-dot,.gf-ph,.gfv,.gfv-stage img,.gfv-sheet,.gfv.is-buy .gfv-sheet{transition:none!important}
  .gf-ph.is-last a::after{animation:none}
}

/* the task's story and its videos (Piedrahita) */
.gf-story{flex-basis:100%;font-size:var(--fs-body-s);color:var(--gray-light);max-width:60ch}
.gf-vids{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;margin:0 0 1rem}
@media (min-width:821px){.gf-vids{grid-template-columns:repeat(2,minmax(0,1fr));max-width:56rem}}
.gf-vids figure{margin:0}
.gf-vids figcaption{font-size:var(--fs-small);color:var(--gray-light);margin-top:.35rem}

/* one task at a time, or every task on one page (from D, Proof Sheet) */
.gf-mode{display:none;justify-content:flex-end;margin:.6rem 0 -.4rem}
.gf-js .gf-mode{display:flex}
.gf-mode button{min-height:44px;padding:0;background:none;border:0;color:var(--gray-light);font:inherit;font-size:var(--fs-small);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--edge-hi);cursor:pointer}
.gf-mode button:hover,.gf-mode button:focus-visible{color:var(--white);text-decoration-color:var(--orange);outline:none}
.gf-mode [data-m=one]{display:none}
.gf.is-all .gf-mode [data-m=one]{display:inline}
.gf.is-all .gf-mode [data-m=all]{display:none}
.gf-js .gf.is-all .gf-day[data-state=photos]{display:block}
.gf-js .gf.is-all .gf-day[data-state=photos]~.gf-day[data-state=photos]{border-top:1px solid var(--line)}
.gf.is-all .gf-df{display:none}
.gf.is-all .gf-glw{opacity:.35}

/* the viewer's lift-out (from D): the photo leaves its cell and goes back to it, by transform only */
.gfv.is-lift .gfv-stage img{transition:none}
.gfv.is-lift-out{opacity:1;background-color:rgba(14,15,18,0)}
.gfv-top,.gfv-foot{transition:opacity .2s var(--gf-ease)}
.gfv.is-lift-out .gfv-top,.gfv.is-lift-out .gfv-foot{opacity:0}
.gf-cred{margin-top:.5rem;font-size:var(--fs-micro);letter-spacing:.03em;color:rgba(246,244,244,.66)}
.gf-mode[hidden]{display:none!important}