/* Portfolio page — the photo strip and the profile polish. */

/* ==========================================================================
   Portfolio — the page where somebody decides whether to trust the person.
   Built to be read: a sticky section nav, roles that open, and filters that
   work in the browser so nobody loses their place.
   ========================================================================== */

/* ---------- hero ---------- */
.pf-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(26px, 4vw, 44px); background: var(--hero-bg); }
.pf-hero-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3.5vw, 46px); align-items: center; }
.pf-avatar-wrap { display: grid; justify-items: center; gap: 12px; }
.pf-avatar { width: clamp(120px, 15vw, 172px); height: clamp(120px, 15vw, 172px); flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: var(--brand-grad); display: grid; place-items: center; border: 4px solid var(--surface);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.55); }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar span { font: 800 2.6rem/1 var(--font); color: var(--on-accent); }
.pf-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .78rem;
  font-weight: 700; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 5px 12px; }
.pf-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: pf-live 2.4s ease-out infinite; }
@keyframes pf-live { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

.pf-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.pf-hero-main h1 { margin: 0 0 6px; font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -.03em; }
.pf-headline { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--text-2); font-weight: 600; margin: 0 0 16px; }
.pf-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 0 0 22px;
  font-size: .87rem; color: var(--muted); }
.pf-meta li { display: inline-flex; align-items: center; gap: 7px; }
.pf-meta svg { color: var(--accent); flex-shrink: 0; }
.pf-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-cta .is-copied { border-color: var(--ok); color: var(--ok); }

/* On a phone the hero was a column of centred blocks with a 170px portrait on top, and it ran well
   past the first screen before a single word of substance. Side by side is the fix: the photo sits
   next to the name at a size that reads as a portrait rather than as a banner, and the facts below
   it line up left, the way the rest of the page does. */
@media (max-width: 760px) {
  .pf-hero { padding: 22px 0 20px; }
  .pf-hero-grid { grid-template-columns: auto 1fr; gap: 14px; align-items: center; text-align: left; }
  .pf-avatar-wrap { justify-items: start; gap: 8px; align-self: start; }
  .pf-avatar { width: 92px; height: 92px; border-width: 3px; }
  .pf-avatar span { font-size: 1.8rem; }
  .pf-status { font-size: .7rem; padding: 4px 9px; gap: 5px; }
  .pf-eyebrow { font-size: .68rem; letter-spacing: .1em; margin-bottom: 6px; }
  .pf-hero-main h1 { font-size: clamp(1.45rem, 6.4vw, 2rem); align-self: center; }
  .pf-headline { font-size: .95rem; margin: 12px 0 0; }
  /* display:contents dissolves the text wrapper so its children become grid items in their own
     right. The photo then spans the name block beside it, and the facts and buttons below claim
     the full width instead of being squeezed into the narrow column next to the photo. */
  /* Both wrappers dissolve, so the photo, the availability chip and each line of text are grid
     items in their own right. That matters because the chip is wider than the photo: while they
     shared a column, the chip set that column's width and shoved the name halfway across the
     screen. Apart, the photo column is exactly as wide as the photo. */
  .pf-hero-main, .pf-avatar-wrap { display: contents; }
  .pf-avatar { grid-column: 1; grid-row: 1 / span 2; }
  .pf-status { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  /* the sentence explaining what he does needs the whole width, or it breaks into four short lines */
  .pf-headline, .pf-meta, .pf-cta { grid-column: 1 / -1; }
  .pf-meta { gap: 6px 16px; margin: 4px 0 14px; font-size: .82rem; }
  /* the action people actually came for gets its own full-width row; the rest pair up */
  .pf-cta { gap: 8px; }
  .pf-cta .btn { flex: 1 1 calc(50% - 4px); }
  .pf-cta .btn-primary { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .pf-avatar { width: 78px; height: 78px; }
  .pf-status { font-size: .66rem; }
}

/* ---------- sticky section nav ---------- */
.pf-nav { position: sticky; top: var(--header-h, 64px); z-index: 12; background: var(--surface);
  border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.4) blur(8px); }
.pf-nav-in { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); overflow-x: auto;
  scrollbar-width: none; padding-block: 11px; }
.pf-nav-in::-webkit-scrollbar { display: none; }
.pf-nav a { white-space: nowrap; font-size: .88rem; font-weight: 650; color: var(--muted);
  padding: 5px 0; border-bottom: 2px solid transparent; }
.pf-nav a:hover { color: var(--text); }
.pf-nav a.on { color: var(--accent); border-color: var(--accent); }
.pf-nav-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--accent) !important; }

/* ---------- about ---------- */
.pf-about { display: grid; grid-template-columns: 1.5fr .85fr; gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.pf-h3 { margin-top: 32px; font-size: 1.15rem; }
.pf-steps { counter-reset: pfs; list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.pf-steps li { counter-increment: pfs; position: relative; padding-left: 46px; color: var(--muted);
  line-height: 1.7; }
.pf-steps li b { color: var(--text); }
.pf-steps li::before { content: counter(pfs); position: absolute; left: 0; top: 1px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent-bg); color: var(--accent);
  font-weight: 800; font-size: .85rem; }
.pf-side { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h, 64px) + 64px); }
.pf-contact-card p { margin-bottom: 14px; }
@media (max-width: 900px) { .pf-about { grid-template-columns: 1fr; } .pf-side { position: static; } }

/* ---------- experience ---------- */
.pf-timeline { display: grid; gap: 12px; margin-top: 8px; }
.pf-role { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pf-role[open], .pf-role:hover { border-color: var(--accent); box-shadow: 0 14px 34px -26px rgba(0,0,0,.5); }
.pf-role summary { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; cursor: pointer;
  list-style: none; }
.pf-role summary::-webkit-details-marker { display: none; }
.pf-role-dot { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent); }
.pf-role-head { display: grid; gap: 2px; min-width: 0; }
.pf-role-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-role-head b { font-size: 1.02rem; }
.pf-org { font-weight: 650; color: var(--text-2); font-size: .93rem; }
.pf-when { font-size: .81rem; color: var(--muted); }
.pf-now { flex-shrink: 0; }
.pf-chev { margin-left: auto; color: var(--muted); flex-shrink: 0; transition: transform .2s var(--ease); }
.pf-role[open] .pf-chev { transform: rotate(180deg); }
.pf-role-body { padding: 0 18px 18px 64px; font-size: .94rem; }
.pf-role-body ul { margin: 0; padding-left: 18px; }
@media (max-width: 560px) { .pf-role-body { padding-left: 18px; } .pf-now { display: none; } }

/* ---------- filters shared by skills and projects ---------- */
.pf-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 22px; }
.pf-search { display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px; min-width: 230px; }
.pf-search svg { color: var(--muted); flex-shrink: 0; }
.pf-search input { border: 0; background: none; font: inherit; font-size: .9rem; color: var(--text);
  width: 100%; outline: none; }
/* 16px on touch, or iOS Safari zooms the page in the moment the field is tapped */
@media (max-width: 900px), (pointer: coarse) { .pf-search input { font-size: 16px; } }
.pf-count { display: inline-block; margin-left: 5px; font-size: .74rem; opacity: .7; }
.pf-empty { text-align: center; color: var(--muted); margin-top: 22px; }

/* ---------- skills ---------- */
.pf-skill-head { display: flex; align-items: center; gap: 12px; }
.pf-skill-head .card-icon { margin: 0; width: 40px; height: 40px; flex-shrink: 0; }
.pf-skill-head h3 { margin: 0; font-size: 1.02rem; }

/* ---------- projects ---------- */
.pf-client { color: var(--accent); font-weight: 650; }
.pf-card-foot { margin-top: auto; padding-top: 12px; }
.pf-card h3 a { color: inherit; }

/* ---------- credentials ---------- */
.pf-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
.pf-tab { font: 650 .88rem/1 var(--font); padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.pf-tab:hover { color: var(--text); }
.pf-tab.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.pf-creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.pf-cred { display: flex; gap: 12px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.pf-cred-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent); }
.pf-cred b { display: block; font-size: .95rem; line-height: 1.35; }
.pf-cred small { display: block; color: var(--muted); font-size: .82rem; margin-top: 3px; }

.pf-band-lead { max-width: 640px; margin: 0 auto 28px; }

/* ---------- reveal ---------- */
.pf-rise { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pf-rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pf-rise { opacity: 1; transform: none; transition: none; }
  .pf-status i { animation: none; }
}


/* ==========================================================================
   Photo strip — your own pictures.

   It does not move on its own. A strip that drifts is hard to look at: the
   photo you want slides away while you are reading it, and on a phone you end
   up fighting it. This one sits still and is dragged with a finger or a
   trackpad, snapping each photo to the middle as it goes, so it always lands
   somewhere deliberate rather than halfway between two pictures.

   The cards are taller than they are wide, because a photo taken on a phone is
   taller than it is wide. A portrait fills the card the way it was shot; a
   landscape sits centred inside the same card. Nothing is cropped and nothing
   is hidden behind blurred filler.
   ========================================================================== */
.pf-gallery { position: relative; padding: clamp(18px, 2.5vw, 30px) 0 clamp(12px, 2vw, 18px);
  background: var(--surface-2); border-block: 1px solid var(--border); }

.pf-rail {
  display: flex; gap: clamp(10px, 1.5vw, 16px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-behavior: smooth;
  /* the strip runs to both screen edges, but the first and last cards still
     line up with the page text */
  padding: 6px clamp(16px, 4vw, 40px) 14px; scroll-padding-inline: clamp(16px, 4vw, 40px);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.pf-rail::-webkit-scrollbar { height: 6px; }
.pf-rail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
.pf-rail::-webkit-scrollbar-track { background: transparent; }

/* a hint that there is more to the side, without covering a photo */
.pf-gallery::before, .pf-gallery::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: clamp(24px, 5vw, 76px); z-index: 2; pointer-events: none; }
.pf-gallery::before { left: 0; background: linear-gradient(90deg, var(--surface-2), transparent); }
.pf-gallery::after { right: 0; background: linear-gradient(270deg, var(--surface-2), transparent); }

.pf-shot { position: relative; flex: 0 0 auto; scroll-snap-align: center; cursor: pointer;
  display: flex; flex-direction: column; padding: 0; margin: 0; text-align: left;
  width: clamp(168px, 44vw, 244px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease); }
.pf-shot:hover, .pf-shot:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lg);
  border-color: var(--accent); outline: none; }
.pf-shot:active { transform: translateY(-2px) scale(.985); }

/* 3:4 — the shape of a phone photo, so a portrait fills it and a landscape is
   centred in it. contain, so no face is ever cut off at the edge of the card. */
.pf-shot img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain;
  background: var(--surface-2); }
.pf-shot-cap { display: block; padding: 9px 12px; font-size: .78rem; font-weight: 600; color: var(--text-2);
  border-top: 1px solid var(--border); }
button.pf-shot::after { content: "\2921"; position: absolute; top: 9px; right: 9px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 9px; background: rgba(10,18,34,.72); color: #fff;
  font-size: .82rem; opacity: 0; transition: opacity .2s var(--ease); }
button.pf-shot:hover::after, button.pf-shot:focus-visible::after { opacity: 1; }

/* Cards arrive one after another the first time the strip is scrolled past —
   the only animation here, and it runs once. */
.pf-shot.pf-in { animation: pf-shot-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 65ms); }
@keyframes pf-shot-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

.pf-rail-hint { display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0; padding: 0 20px; font-size: .78rem; color: var(--muted); }
.pf-rail-hint svg { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .pf-rail { scroll-behavior: auto; }
  .pf-shot { transition: none; }
  .pf-shot:hover { transform: none; }
  .pf-shot.pf-in { animation: none; }
}

/* full-size view */
.pf-lightbox { border: 0; padding: 0; background: transparent; max-width: min(94vw, 1100px); max-height: 92vh; }
.pf-lightbox::backdrop { background: rgba(8,12,22,.86); backdrop-filter: blur(3px); }
.pf-lightbox img { display: block; max-width: 100%; max-height: 82vh; border-radius: 14px; object-fit: contain; }
.pf-lightbox p { margin: 12px 0 0; text-align: center; color: #e8ebf2; font-size: .9rem; }
.pf-lb-close { position: absolute; top: -6px; right: -6px; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: #fff; color: #0A1222; font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); }

@media (max-width: 560px) { .pf-shot { width: 190px; } }
@media (prefers-reduced-motion: reduce) {
  /* no drifting: lay the photos out as a plain, scrollable row */
  .pf-rail-track { animation: none; }
  .pf-rail { overflow-x: auto; }
  .pf-rail::before, .pf-rail::after { display: none; }
  .pf-shot { transition: none; }
  .pf-shot:hover { transform: none; }
}


/* project cards: the same fit-don't-crop treatment for uploaded covers */
.pf-cover { position: relative; overflow: hidden; }
.pf-cover .pf-fit { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.pf-cover .pf-shot-fill { filter: blur(20px) saturate(1.2); opacity: .55; }
/* the hex pattern is there to fill an empty cover — with a real photo it is just noise */
.pf-cover:has(.pf-fit)::after { display: none; }

/* a face sits in the top half of a portrait photo, so bias the crop upwards */
.pf-avatar img { object-position: center 28%; }


/* ==========================================================================
   Photo slider ("Moments"). Every photo keeps its real shape: the photos sit
   in one row at a fixed height, so the section never changes size whatever
   the photo, and the current one is centred with its neighbours dimmed at the
   sides. Nothing is cropped, stretched or padded out to a landscape box.
   A scroll-snap row underneath, so swiping is native; portfolio.js adds
   autoplay, arrows, dots (the active one fills up as the next photo comes)
   and arrow keys.
   ========================================================================== */
.pf-show { --pf-h: clamp(380px, 40vw, 520px); --pf-r: 18px;
  padding: clamp(28px, 4vw, 48px) 0 clamp(18px, 2.5vw, 28px);
  background: var(--surface-2); border-block: 1px solid var(--border); }
.pf-show-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.pf-show-title { margin: 4px 0 0; font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.pf-show-ctrl { display: flex; gap: 8px; flex: none; }
.pf-show-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease); }
.pf-show-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.pf-show-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-show-btn[data-show="prev"] svg { transform: rotate(180deg); }
/* pause / play glyphs drawn in CSS so they match the stroke icons */
.pf-i-pause { width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.pf-show.is-paused .pf-i-pause { width: 0; height: 0; border-inline: 0; margin-left: 3px;
  border-left: 12px solid currentColor; border-block: 7px solid transparent; }
.pf-show.no-auto [data-show="play"] { display: none; }
.pf-show:not(.js) .pf-show-ctrl, .pf-show:not(.js) .pf-show-dots { display: none; }

.pf-show-frame { position: relative; }
.pf-show-track { position: relative; display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; outline: none;
  /* room above and below for the photo's shadow, which a scrolling row would otherwise cut off */
  padding: 18px 0 44px; }
.pf-show-track::-webkit-scrollbar { display: none; }
/* spacers, so the first and the last photo can also come to the middle */
.pf-show-track::before, .pf-show-track::after { content: ""; flex: 0 0 50%; }
.pf-show-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pf-slide { position: relative; flex: 0 0 auto; margin: 0; scroll-snap-align: center; scroll-snap-stop: always;
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.pf-show.js .pf-slide:not(.is-active) { opacity: .38; transform: scale(.92); }
.pf-slide-media { display: block; padding: 0; margin: 0; border: 0; background: none;
  border-radius: var(--pf-r); cursor: zoom-in; }
.pf-show.js .pf-slide:not(.is-active) .pf-slide-media { cursor: pointer; }
.pf-slide-media:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* one fixed height, width from the photo itself, so a portrait stays a portrait.
   contain only matters for a very wide panorama, which is fitted rather than cropped. */
.pf-slide-img { display: block; height: var(--pf-h); width: auto; max-width: min(88vw, 960px);
  object-fit: contain; border-radius: var(--pf-r); background: var(--surface);
  box-shadow: 0 18px 38px -20px rgba(14, 24, 48, .45); }
/* a small "open full size" mark on the photo in the middle */
.pf-zoom::after { content: "\2921"; position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 10px; background: rgba(10,18,34,.7); color: #fff;
  font-size: .95rem; opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; }
.pf-slide.is-active .pf-zoom:hover::after, .pf-slide.is-active .pf-zoom:focus-visible::after { opacity: 1; }

.pf-slide-cap, .pf-slide-count { position: absolute; z-index: 2; bottom: 12px; pointer-events: none;
  background: rgba(10,18,34,.72); color: #fff; backdrop-filter: blur(4px); transition: opacity .3s var(--ease); }
.pf-slide-cap { left: 12px; max-width: calc(100% - 92px); padding: 7px 12px; border-radius: 10px;
  font-size: .85rem; font-weight: 600; line-height: 1.4; }
.pf-slide-count { right: 12px; padding: 5px 10px; border-radius: 99px; font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pf-show.js .pf-slide:not(.is-active) :is(.pf-slide-cap, .pf-slide-count) { opacity: 0; }

/* dots; the current one fills up while the photo is showing, so people can see it will move on */
.pf-show-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 0; }
.pf-show-dots button { position: relative; overflow: hidden; width: 9px; height: 9px; padding: 0; border: 0;
  border-radius: 99px; cursor: pointer; background: var(--border-strong); transition: width .3s var(--ease); }
.pf-show-dots button[aria-current="true"] { width: 30px; }
.pf-show-dots button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; background: var(--accent); }
.pf-show.is-running .pf-show-dots button[aria-current="true"]::after {
  right: auto; width: 0; animation: pf-fill var(--pf-dur, 5s) linear forwards; }
@keyframes pf-fill { to { width: 100%; } }
.pf-show-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 760px) {
  .pf-show { --pf-h: min(60vh, 440px); --pf-r: 14px; }
  .pf-show-btn { width: 38px; height: 38px; }
  .pf-slide-cap { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-show-track { scroll-behavior: auto; }
  .pf-slide, .pf-show-dots button { transition: none; }
}

/* the slideshow: one photo at a time, the next slides in from the right (from the left going back) */
.pf-show.js.is-slideshow .pf-show-track, .pf-show.js.is-single .pf-show-track {
  display: block; position: relative; overflow: hidden; scroll-snap-type: none;
  height: calc(var(--pf-h) + 62px); touch-action: pan-y; }
.pf-show.js.is-slideshow .pf-show-track::before, .pf-show.js.is-slideshow .pf-show-track::after,
.pf-show.js.is-single .pf-show-track::before, .pf-show.js.is-single .pf-show-track::after { content: none; }
.pf-show.js.is-slideshow .pf-slide, .pf-show.js.is-single .pf-slide {
  position: absolute; top: 18px; left: 0; right: 0; width: fit-content; max-width: 100%; margin: 0 auto;
  transition: transform .6s var(--ease), opacity .6s var(--ease); }
.pf-show.js.is-slideshow .pf-slide:not(.is-active) { opacity: 0; transform: translateX(70px); pointer-events: none; }
.pf-show.js.is-slideshow .pf-slide.is-leaving { transform: translateX(-70px); }
.pf-show.js.is-slideshow.is-back .pf-slide:not(.is-active) { transform: translateX(-70px); }
.pf-show.js.is-slideshow.is-back .pf-slide.is-leaving { transform: translateX(70px); }
.pf-show.js.is-slideshow .pf-slide.is-active, .pf-show.js.is-single .pf-slide { opacity: 1; transform: none; z-index: 1; }
/* reduced motion: still changes every 3 seconds, as a soft cross-fade instead of a slide */
@media (prefers-reduced-motion: reduce) {
  .pf-show.js.is-slideshow .pf-slide { transition: opacity .5s linear; }
  .pf-show.js.is-slideshow .pf-slide:not(.is-active),
  .pf-show.js.is-slideshow.is-back .pf-slide:not(.is-active),
  .pf-show.js.is-slideshow .pf-slide.is-leaving { transform: none; }
}

/* full size: keep the close button inside the view, where it can't be cut off,
   and never show a photo smaller than it already looked in the slider */
.pf-lightbox { overflow: visible; }
.pf-lb-close { top: 10px; right: 10px; z-index: 2; }
@media (min-width: 761px) { .pf-lightbox img { min-height: min(72vh, 560px); width: auto; } }