/* Public site styles. Every adjustable value comes from a CSS variable that
   site.js sets from the design settings. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg, #fff); }
body {
  font-family: var(--text-font); font-weight: var(--text-weight); color: var(--text-color);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }
.sn-fallback { display: none; }

/* ---------- header ---------- */

.sn-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--bg); }
.sn-logo { position: absolute; left: var(--logo-x); top: var(--logo-y); text-decoration: none; z-index: 2; line-height: 1; }
.sn-logo-img { height: var(--logo-h); width: auto; }
.sn-logo-text {
  font-family: var(--logo-font); font-weight: var(--logo-weight); font-size: var(--logo-size);
  color: var(--logo-color); letter-spacing: var(--logo-spacing); text-transform: var(--logo-case); white-space: nowrap;
}
.sn-menu {
  position: absolute; left: 0; right: 0; top: var(--menu-y); padding: 0 var(--logo-x);
  display: flex; flex-wrap: wrap; justify-content: var(--menu-align); align-items: center;
  column-gap: var(--menu-gap); row-gap: 6px;
  font-family: var(--menu-font); font-weight: var(--menu-weight); font-size: var(--menu-size);
  letter-spacing: var(--menu-spacing); text-transform: var(--menu-case);
}
.sn-menu a { color: var(--menu-color); text-decoration: none; position: relative; white-space: nowrap; transition: color .2s; }
.sn-menu a:hover { color: var(--menu-hover); }
.sn-menu a.is-active { color: var(--menu-active); }
.sn-marker-bullet .sn-menu a.is-active::before {
  content: ''; position: absolute; left: -0.6em; top: 50%; width: 3px; height: 3px; margin-top: -1px;
  border-radius: 50%; background: currentColor;
}
.sn-marker-underline .sn-menu a.is-active { text-decoration: underline; text-underline-offset: 4px; }
.sn-spacer { width: var(--spacer); }
.sn-menu-toggle { display: none; }

/* Side layout: logo and a vertical menu in a column on the left. */
.sn-layout-side .sn-header { bottom: 0; right: auto; width: var(--side-w); height: auto; overflow-y: auto; }
.sn-layout-side .sn-logo-img { max-width: calc(var(--side-w) - var(--logo-x) - 20px); height: auto; max-height: var(--logo-h); }
.sn-layout-side .sn-logo { position: relative; display: inline-block; left: auto; top: auto; margin: var(--logo-y) 0 0 var(--logo-x); }
.sn-layout-side .sn-menu {
  position: relative; top: auto; flex-direction: column; align-items: flex-start; flex-wrap: nowrap;
  row-gap: calc(var(--menu-gap) / 2.5); margin-top: var(--menu-y); padding: 0 0 40px var(--logo-x);
}
.sn-layout-side .sn-spacer { width: auto; height: calc(var(--spacer) / 2); }
.sn-layout-side .sn-main { margin-left: var(--side-w); }
.sn-layout-side .sn-main { --top: var(--img-mt); }

/* ---------- main area ---------- */

.sn-main { --top: calc(var(--header-h) + var(--img-mt)); padding: var(--top) var(--img-mx) 0; min-height: 100vh; }
.sn-fade-in .sn-main > * { animation: sn-fade .6s ease both; }
@keyframes sn-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- slideshow ---------- */

.sn-slideshow { position: relative; }
.sn-stage {
  position: relative; height: calc(100vh - var(--top) - var(--img-mb)); height: calc(100svh - var(--top) - var(--img-mb));
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
.has-filmstrip .sn-stage { height: calc(100svh - var(--top) - var(--img-mb) - 90px); }
.sn-arrow-cursor { cursor: var(--cursor-next); }
.sn-arrow-cursor.is-left { cursor: var(--cursor-prev); }
.sn-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--speed) ease, transform var(--speed) ease, visibility 0s linear var(--speed);
}
.sn-slide.is-current { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--speed) ease, transform var(--speed) ease, visibility 0s; }
.sn-home .sn-slide { transition-duration: var(--home-speed), var(--home-speed), 0s; transition-delay: 0s, 0s, var(--home-speed); }
.sn-home .sn-slide.is-current { transition-delay: 0s; }
.sn-t-none .sn-slide { transition: none; }
.sn-t-slide .sn-slide { opacity: 1; }
.sn-t-slide .sn-slide.to-left { transform: translateX(-100%); visibility: visible; }
.sn-t-slide .sn-slide.to-right { transform: translateX(100%); visibility: visible; }
.sn-t-slide .sn-slide.is-current.from-right { animation: sn-in-right var(--speed) ease both; }
.sn-t-slide .sn-slide.is-current.from-left { animation: sn-in-left var(--speed) ease both; }
@keyframes sn-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sn-in-left { from { transform: translateX(-100%); } to { transform: none; } }

.sn-figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.sn-img-wrap { position: relative; max-width: 100%; }
.sn-stage { --maxh: calc(100svh - var(--top) - var(--img-mb) - var(--cap-reserve)); }
.has-filmstrip .sn-stage { --maxh: calc(100svh - var(--top) - var(--img-mb) - 90px - var(--cap-reserve)); }
/* Photos scale up or down to fit the space, keeping their proportions. */
.sn-stage .sn-figure { width: 100%; }
.sn-stage .sn-img-wrap { width: min(100%, calc(var(--maxh) * var(--r))); }
.sn-stage .sn-img { width: 100%; height: auto; border: var(--img-border); }
.sn-caption {
  margin-top: var(--cap-gap); font-family: var(--cap-font); font-weight: var(--cap-weight); font-size: var(--cap-size);
  color: var(--cap-color); text-align: var(--cap-align); letter-spacing: var(--cap-spacing); align-self: stretch; line-height: 1.4;
}
.sn-text-slide { width: 100%; max-width: var(--text-w); margin: 0 auto; }

/* Full-screen home page: photos fill the whole window behind the menu. */
.sn-home-fullscreen.sn-view-home .sn-main { padding: 0; }
.sn-home-fullscreen.sn-view-home .sn-header { background: transparent; }
.sn-fullbleed .sn-stage { height: 100vh; height: 100svh; }
.sn-fullbleed .sn-figure, .sn-fullbleed .sn-stage .sn-img-wrap { width: 100%; height: 100%; max-height: none; }
.sn-fullbleed .sn-stage .sn-img { width: 100%; height: 100%; object-fit: cover; border: 0; }
.sn-fullbleed .sn-caption { position: absolute; left: 0; right: 0; bottom: 24px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* Pinterest save button, shown on hover. */
.sn-pin {
  position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 4px;
  background: #e60023; color: #fff; font: 600 11px/1 Helvetica, Arial, sans-serif; padding: 5px 8px 5px 6px; border-radius: 3px;
  opacity: 0; transition: opacity .2s; cursor: pointer;
}
.sn-pin svg { width: 12px; height: 12px; fill: #fff; }
.sn-img-wrap:hover .sn-pin { opacity: 1; }
@media (hover: none) { .sn-pin { display: none; } }

/* ---------- filmstrip ---------- */

.sn-filmstrip { display: flex; gap: 8px; overflow-x: auto; height: 70px; margin-top: 20px; scrollbar-width: none; }
.sn-filmstrip::-webkit-scrollbar { display: none; }
.sn-strip-item { flex: none; height: 100%; opacity: .45; transition: opacity .2s; }
.sn-strip-item.is-current, .sn-strip-item:hover { opacity: 1; }
.sn-strip-item img { height: 100%; width: auto; }
.sn-strip-item span { display: flex; align-items: center; height: 100%; padding: 0 12px; font-size: 11px; color: var(--cap-color); }

/* ---------- toolbar and footer ---------- */

.sn-toolbar {
  position: fixed; z-index: 15; left: 10px; bottom: 8px; display: flex; gap: 14px; align-items: center;
  font-family: var(--menu-font); font-weight: 300; font-size: var(--tool-size); color: var(--tool-color);
}
.sn-tool { display: flex; align-items: center; gap: 5px; transition: color .2s; }
.sn-tool:hover { color: var(--tool-hover); }
.sn-fs-icon { width: 9px; height: 7px; border: 1px solid currentColor; }
.sn-footer {
  position: fixed; z-index: 15; right: 22px; bottom: 8px; display: flex; align-items: center; gap: 8px;
  font-family: var(--foot-font); font-size: var(--foot-size); color: var(--foot-color);
}
.sn-social { display: block; width: var(--social-size); height: var(--social-size); color: var(--social-color); transition: color .2s; }
.sn-social:hover { color: var(--social-hover); }
.sn-social svg { width: 100%; height: 100%; fill: currentColor; }
.sn-copyright { margin-right: 4px; }

/* ---------- grid, masonry, stack ---------- */

.sn-gallery-scroll { padding-bottom: calc(var(--img-mb) + 30px); }
.sn-gallery-intro { max-width: var(--text-w); margin: 0 auto 40px; }
.sn-grid { display: flex; flex-wrap: wrap; gap: var(--thumb-gap); }
.sn-thumb { position: relative; display: block; overflow: hidden; background: rgba(127,127,127,.08); cursor: zoom-in; }
.sn-thumb::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .25s; pointer-events: none; }
.sn-thumb:hover::after { opacity: var(--thumb-hover); }
.sn-thumb-img { width: 100%; height: 100%; object-fit: cover; border: var(--img-border); }
.sn-grid-grid.sn-shape-original .sn-thumb { height: var(--thumb); }
.sn-grid-filler { flex-grow: 100; }
.sn-grid-grid.sn-shape-square, .sn-grid-grid.sn-shape-landscape {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--thumb), 1fr));
}
.sn-shape-square .sn-thumb { aspect-ratio: 1; }
.sn-shape-landscape .sn-thumb { aspect-ratio: 3 / 2; }
.sn-grid-masonry { display: block; columns: var(--thumb); column-gap: var(--thumb-gap); }
.sn-grid-masonry .sn-thumb { width: 100%; margin-bottom: var(--thumb-gap); break-inside: avoid; }
.sn-grid-masonry .sn-thumb-img { height: auto; }
.sn-grid-text { flex-basis: 100%; grid-column: 1 / -1; column-span: all; padding: 20px 0; }
.sn-stack { display: flex; flex-direction: column; gap: var(--stack-gap); align-items: center; }
.sn-stack .sn-figure { max-height: none; }
.sn-stack .sn-img { max-width: 100%; max-height: calc(100svh - var(--top) - var(--img-mb)); width: auto; height: auto; border: var(--img-border); }

/* ---------- lightbox (opened from grid thumbnails) ---------- */

.sn-lightbox { position: fixed; inset: 0; z-index: 50; background: var(--bg); padding: 0 var(--img-mx); --top: var(--img-mt); }
.sn-lightbox-open { overflow: hidden; }
.sn-lightbox-close {
  position: absolute; z-index: 2; top: 10px; right: 18px; font-size: 32px; line-height: 1; font-weight: 200; color: var(--tool-color);
}
.sn-lightbox-close:hover { color: var(--tool-hover); }

/* ---------- text pages and contact form ---------- */

.sn-page { max-width: var(--text-w); margin: 0 auto; padding-bottom: 80px; }
.sn-page-title {
  font-family: var(--title-font); font-weight: var(--title-weight); font-size: var(--title-size);
  color: var(--title-color); margin: 0 0 24px; line-height: 1.2;
}
.sn-page-img { width: 100%; height: auto; margin-bottom: 24px; border: var(--img-border); }
.sn-text { font-size: var(--text-size); line-height: var(--text-lh); color: var(--text-color); }
.sn-text a { color: var(--link-color); }
.sn-form { display: flex; flex-direction: column; gap: 22px; margin-top: 16px; }
.sn-field { display: flex; flex-direction: column; gap: 6px; font-size: calc(var(--text-size) - 1px); color: var(--text-color); }
.sn-field input, .sn-field textarea {
  font: inherit; font-size: var(--text-size); color: var(--text-color); background: transparent;
  border: 0; border-bottom: 1px solid var(--field-color); padding: 6px 0; border-radius: 0; outline: none; resize: vertical;
}
.sn-field textarea { border: 1px solid var(--field-color); padding: 8px; }
.sn-field input:focus, .sn-field textarea:focus { border-color: var(--text-color); }
.sn-button {
  align-self: flex-start; background: var(--btn); color: var(--btn-text); padding: 9px 26px;
  font-size: calc(var(--text-size) - 1px); letter-spacing: .04em; transition: opacity .2s;
}
.sn-button:hover { opacity: .8; }
.sn-form-status { min-height: 1.4em; margin: 0; font-size: var(--text-size); }
.sn-hp { display: none; }
.sn-empty { text-align: center; padding: 80px 0; color: var(--cap-color); }
.sn-protect img { -webkit-touch-callout: none; }

/* ---------- phones and tablets ---------- */

.sn-layout-mobile .sn-header { height: calc(var(--m-logo-h) + 32px); }
.sn-layout-mobile .sn-logo { left: 16px; top: 16px; }
.sn-layout-mobile .sn-logo-img { height: var(--m-logo-h); }
.sn-layout-mobile .sn-logo-text { font-size: calc(var(--m-logo-h) * .85); }
.sn-layout-mobile .sn-menu-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 10px; z-index: 3;
}
.sn-layout-mobile .sn-menu-toggle span { display: block; height: 1px; background: var(--menu-active); transition: transform .25s; }
.sn-menu-open .sn-layout-mobile .sn-menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.sn-menu-open .sn-layout-mobile .sn-menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.sn-layout-mobile .sn-menu {
  position: fixed; inset: 0; top: calc(var(--m-logo-h) + 32px); padding: 24px 16px 60px; background: var(--m-menu-bg);
  flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; row-gap: 14px;
  font-size: calc(var(--menu-size) + 5px); overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s;
}
.sn-menu-open .sn-layout-mobile .sn-menu { opacity: 1; visibility: visible; transition: opacity .25s; }
.sn-layout-mobile .sn-spacer { height: 6px; }
.sn-layout-mobile .sn-main { --top: calc(var(--m-logo-h) + 32px + 16px); padding: var(--top) var(--m-img-mx) 0; }
.sn-layout-mobile .sn-footer { position: static; justify-content: center; padding: 30px 16px 24px; }
.sn-layout-mobile .sn-stage { height: calc(100svh - var(--top) - 70px); }
.sn-layout-mobile .sn-stage { --maxh: calc(100svh - var(--top) - 70px - var(--cap-reserve)); }
.sn-layout-mobile .sn-stack .sn-img { max-height: none; width: 100%; }
.sn-layout-mobile .sn-grid-grid.sn-shape-original .sn-thumb { height: calc(var(--thumb) * .5); }
.sn-layout-mobile .sn-page { padding-top: 8px; }
.sn-layout-mobile .sn-arrow-cursor { cursor: default; }
.sn-layout-mobile.sn-view-gallery .sn-footer { padding-bottom: 50px; }

/* Thumbnail button: four squares shown when hovering the middle of a photo. */
.sn-thumbs-btn {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 16px; margin: -8px 0 0 -11px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; pointer-events: none;
  opacity: 0; transition: opacity .2s; filter: drop-shadow(0 0 2px rgba(0,0,0,.35));
}
.sn-thumbs-btn i { background: rgba(255,255,255,.85); border-radius: 1px; }
.sn-stage.is-center { cursor: pointer; }
.sn-stage.is-center .sn-slide.is-current .sn-thumbs-btn { opacity: 1; }
@media (hover: none) { .sn-stage .sn-slide.is-current .sn-thumbs-btn { opacity: .7; } }
.sn-thumb-text { display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 12px;
  font-family: var(--title-font); font-size: calc(var(--title-size) * .6); color: var(--title-color); background: transparent; cursor: pointer; }
.sn-grid-grid .sn-thumb-text { height: var(--thumb); flex-basis: var(--thumb); }