/* PhotoSwipe 5.4.4 core styles (MIT) */
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}


/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}


/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 0.85;
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
	outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}


/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}


/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}


/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}


/* chipstandiferphotography.com: a gallery with rooms. Each portfolio is a room with its wall text and matted prints;
   Bio and Contact are the front desk. The lightbox can use its own wall colour. */
:root {
  --wall: #f1f1ee;        /* page / lightbox ground */
  --mat: #fafaf8;         /* the mat each print sits on */
  --ink: #1c1b19;         /* primary text */
  --muted: #6a675f;       /* label secondary text */
  --rule: #dad8d2;        /* hairlines */
  --gilt: #8f6f2e;        /* gold-leaf accent: catalog numbers, links, focus */
  --shadow: rgba(28, 27, 25, .10);

  --font-display: "Josefin Sans", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 300;     /* Josefin Sans Light for names and titles */
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: .8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall: #151412; --mat: #1e1d1a; --ink: #ecebe6; --muted: #a39f95;
    --rule: #34322d; --gilt: #cfa95e; --shadow: rgba(0, 0, 0, .45); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wall: #151412; --mat: #1e1d1a; --ink: #ecebe6; --muted: #a39f95;
  --rule: #34322d; --gilt: #cfa95e; --shadow: rgba(0, 0, 0, .45); color-scheme: dark;
}

body {
  background: var(--wall);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }

/* Header */
.site-head { padding-block: 28px 0; }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.name { font: var(--display-weight) var(--step-2)/1.1 var(--font-display); letter-spacing: .03em; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; }
.nav-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.menu-btn {
  display: none; font: 500 var(--step--1)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 9px 14px; cursor: pointer;
}
@media (max-width: 760px) {
  .site-head .wrap { align-items: center; }
  .menu-btn { display: inline-block; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 18px; padding-block: 10px 6px; border-top: 1px solid var(--rule); padding-top: 18px; }
  .nav.open { display: flex; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 16px; font-size: var(--step-0); }
}
.nav a { text-decoration: none; color: var(--muted); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gilt); }
.wall-toggle {
  font: 500 var(--step--1)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: 7px 12px; cursor: pointer;
}
.wall-toggle:hover { color: var(--ink); border-color: var(--muted); }

/* Page heading + wall text */
.page-head { padding-block: clamp(40px, 7vw, 88px) clamp(28px, 4vw, 48px); }
.eyebrow { display: block; font: 400 var(--step--1)/1 var(--font-mono); color: var(--gilt); letter-spacing: .06em; margin-bottom: 18px; }
.page-head h1 { font: var(--display-weight) var(--step-3)/1.1 var(--font-display); letter-spacing: .01em; margin: 0 0 20px; max-width: 20ch; text-wrap: balance; }
.wall-text { max-width: 62ch; color: var(--muted); }
.wall-text p { margin: 0 0 1em; }
.wall-text p:first-child { font-size: var(--step-1); line-height: 1.5; }
.wall-text p:last-child { margin-bottom: 0; }
.todo { color: var(--gilt); font-style: italic; }

/* Grid of prints */
.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: calc(clamp(28px, 3.5vw, 48px) * var(--row-gap-scale, 1)) calc(clamp(16px, 2.5vw, 36px) * var(--col-gap-scale, 1));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
@media (max-width: 520px) { .grid { grid-template-columns: minmax(0, 1fr); gap: calc(36px * var(--row-gap-scale, 1)); } }
.piece { min-width: 0; }
.piece a { display: block; text-decoration: none; }
.mat {
  background: var(--mat); padding: 7%;
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px -12px var(--shadow);
  transition: box-shadow .35s ease;
}
.frame { position: relative; aspect-ratio: 1; max-width: 100%; }
.frame img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.piece a:hover .mat { box-shadow: 0 2px 4px var(--shadow), 0 18px 36px -14px var(--shadow); }
.piece a:hover .frame img { transform: scale(1.015); }
.label { padding-top: 14px; display: grid; gap: 2px; justify-items: center; text-align: center; }
.label .t { font-weight: 500; line-height: 1.35; text-wrap: balance; }
.label .m { font: 400 var(--step--1)/1.4 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.label .m .cat { color: var(--gilt); }
.label .s { font-size: var(--step--1); color: var(--muted); }

.next-room { margin-top: clamp(56px, 8vw, 96px); padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.next-room a { text-decoration: none; display: grid; gap: 4px; }
.next-room .k { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.next-room .v { font: 400 var(--step-1)/1.2 var(--font-display); }
.next-room a:last-child { text-align: right; margin-left: auto; }

/* Bio */
.bio-cols { display: grid; gap: 48px 72px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
@media (max-width: 900px) { .bio-cols { grid-template-columns: minmax(0, 1fr); } }
.bio-text p { margin: 0 0 1.1em; max-width: 62ch; }
.bio-text p:first-child { font-size: var(--step-1); line-height: 1.5; }
.h3 { font: 500 var(--step--1)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.ex { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ex li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 12px; padding-block: 11px; border-bottom: 1px solid var(--rule); font-size: .9375rem; line-height: 1.45; }
.ex .yr { font-family: var(--font-mono); color: var(--gilt); font-size: var(--step--1); padding-top: 2px; }
.ex a { text-decoration-color: var(--gilt); text-underline-offset: 3px; }
.ex a:hover { color: var(--gilt); }
.ex .ext { font-size: .75em; color: var(--gilt); margin-left: 4px; }
.ex .work-link { font-style: italic; text-decoration-style: dotted; text-decoration-thickness: 1px; }

/* Contact */
.contact { display: grid; gap: 6px; font-size: var(--step-1); }
.contact .addr { font-family: var(--font-mono); font-size: var(--step-0); user-select: all; }

.foot { padding-block: 88px 40px; color: var(--muted); font-size: var(--step--1); }
.foot .wrap > div { border-top: 1px solid var(--rule); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* Lightbox: same wall colour, icons and caption from the page tokens */
.pswp {
  --pswp-bg: var(--wall);
  --pswp-placeholder-bg: var(--mat);
  --pswp-icon-color: var(--ink);
  --pswp-icon-color-secondary: var(--wall);
  --pswp-icon-stroke-color: var(--wall);
  --pswp-icon-stroke-width: 2px;
  --pswp-error-text-color: var(--muted);
  font-family: var(--font-body);
}
/* The lightbox can use its own wall, independent of the page */
.pswp[data-wall="dark"] {
  --wall: #151412; --mat: #1e1d1a; --ink: #ecebe6; --muted: #a39f95;
  --rule: #34322d; --gilt: #cfa95e; --shadow: rgba(0, 0, 0, .45);
}
.pswp[data-wall="light"] {
  --wall: #f1f1ee; --mat: #fafaf8; --ink: #1c1b19; --muted: #6a675f;
  --rule: #dad8d2; --gilt: #8f6f2e; --shadow: rgba(28, 27, 25, .10);
}
.pswp__counter { font: 400 var(--step--1)/44px var(--font-mono); color: var(--muted); text-shadow: none; opacity: 1; }
.pswp__wall-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px max(20px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  text-align: center; color: var(--ink); pointer-events: none;
}
.pswp__wall-label .t { font: 400 var(--step-1)/1.3 var(--font-display); }
.pswp__wall-label .m { font-size: var(--step--1); color: var(--muted); margin-top: 4px; }
.pswp__wall-label .nw { white-space: nowrap; }
.pswp__wall-label .cat { font-family: var(--font-mono); color: var(--gilt); }

@media (prefers-reduced-motion: reduce) {
  .mat, .frame img { transition: none; }
  .piece a:hover .frame img { transform: none; }
}

.grid .label .t, .ex em { overflow-wrap: anywhere; }