/* ==========================================================================
   Son "Sean" Pham — a static rebuild of the Squarespace site
   (a-study-of-street.squarespace.com / phamanhson.com)

   Values here were measured from the live site's computed styles so the
   rendered result matches the original template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Proxima Nova — the original typeface — comes from Adobe Fonts, loaded by
   the kit <link> in each page's head (kit rkw6yhk, weights 100–900 with
   italics). Adobe web projects are domain-locked, so the allowed-domains
   list on the project has to include wherever the site is served from.

   Asap is declared below as the fallback: freely licensed, self-hosted, and
   measured to within 3.6% of Proxima Nova on width, x-height, cap-height and
   descender (body text within 0.1%), with Vietnamese coverage. Browsers only
   fetch it if the kit fails to load, so it costs nothing in the normal case.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/asap-vietnamese-italic.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/asap-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/asap-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/asap-vietnamese-normal.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/asap-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/asap-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: 'proxima-nova', 'Asap', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;

  --text: #666;
  --heading: #121212;
  --title: #000;
  --muted: #aaa;
  --nav: #a3a3a3;
  --nav-hover: #1f1f1f;
  --date: #919191;
  --control: #222;

  --sidebar-width: 180px;
  --canvas-pad: 50px;
  --block-gutter: 17px;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6em;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd, pre { margin: 0; }
ul, ol { padding: 0; }
img { border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   Canvas / shell
   -------------------------------------------------------------------------- */
#canvasWrapper { max-width: 1233px; }
#canvas { padding: var(--canvas-pad); min-width: 900px; }

#headerWrapper {
  position: fixed;
  top: var(--canvas-pad);
  left: var(--canvas-pad);
  width: var(--sidebar-width);
  z-index: 999;
}
#header, #page { padding: 0; }
#headerWrapper::after, #pageWrapper::after { content: ""; display: block; clear: both; }

#page { position: relative; }
#pageWrapper { width: auto; margin-left: 250px; }
.collection-type-gallery #pageWrapper { margin-left: 230px; }
.collection-type-gallery #page { position: static; }

/* --------------------------------------------------------------------------
   Logo + navigation
   -------------------------------------------------------------------------- */
#logo { margin-bottom: 30px; }
#logo .logo.site-title {
  margin: 0;
  display: inline-block;
  font-size: 27px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2em;
  letter-spacing: .01em;
  color: var(--title);
}
#logo .logo-subtitle {
  margin-top: .5em;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: .04em;
  color: var(--muted);
}

#topNav { margin-bottom: 20px; }

.main-nav { overflow: hidden; font-size: 16px; }
.main-nav ul { margin: 0; padding: 0; list-style: none; }
.main-nav a {
  display: block;
  padding: .2em;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.6em;
  letter-spacing: 0;
  color: var(--nav);
  transition: color 120ms ease-out;
}
.main-nav .active-link > a { color: var(--title); }
.main-nav a:hover { color: var(--nav-hover); }
.main-nav + .main-nav { margin-top: 20px; }

.main-nav#secondaryNavigation { font-size: 13px; }
.main-nav#secondaryNavigation a {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6em;
  letter-spacing: .02em;
}

#mobileMenuLink { display: none; margin: 15px 0 0; }
#mobileNav { height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Content typography (shared by page blocks, post bodies and the sidebar)
   -------------------------------------------------------------------------- */
.sqs-html-content h1, .sqs-block-markdown h1,
.sqs-html-content h2, .sqs-block-markdown h2,
.sqs-html-content h3, .sqs-block-markdown h3,
.sqs-html-content h4, .sqs-block-markdown h4,
.sqs-html-content h5, .sqs-block-markdown h5,
.sqs-html-content h6, .sqs-block-markdown h6 {
  color: var(--heading);
  font-weight: 500;
  font-style: normal;
  line-height: 1.2em;
  letter-spacing: .01em;
}
.sqs-html-content h1, .sqs-block-markdown h1 { font-size: 26px;   margin: 26px 0; }
.sqs-html-content h2, .sqs-block-markdown h2 { font-size: 20.8px; margin: 20.8px 0; }
.sqs-html-content h3, .sqs-block-markdown h3 { font-size: 15.6px; margin: 15.6px 0; }
.sqs-html-content h4, .sqs-block-markdown h4 { font-size: 14px;   margin: 14px 0; }
.sqs-html-content h5, .sqs-block-markdown h5 { font-size: 12px;   margin: 12px 0; }
.sqs-html-content h6, .sqs-block-markdown h6 { font-size: 11px;   margin: 11px 0; }

.sqs-html-content p, .sqs-block-markdown p { margin: 0 0 14px; }

/* The original template distinguishes links by colour alone — no underline. */
.sqs-html-content a, .sqs-block-markdown a {
  color: var(--title);
  text-decoration: none;
  transition: opacity 120ms ease-out;
}
.sqs-html-content a:hover, .sqs-block-markdown a:hover { opacity: .65; }

.sqs-html-content ul, .sqs-block-markdown ul,
.sqs-html-content ol, .sqs-block-markdown ol { margin: 14px 0; padding-left: 40px; }
.sqs-html-content li, .sqs-block-markdown li { margin: 0; }

.sqs-html-content blockquote, .sqs-block-markdown blockquote {
  margin: 21px 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  line-height: 1.6em;
  letter-spacing: .02em;
  color: var(--text);
}

.sqs-html-content code, .sqs-block-markdown code {
  font-family: var(--font-mono);
  font-size: .92em;
}
.sqs-html-content pre, .sqs-block-markdown pre {
  margin: 14px 0;
  padding: 14px 17px;
  overflow-x: auto;
  background: rgba(0, 0, 0, .04);
  line-height: 1.5em;
}
.sqs-html-content pre code, .sqs-block-markdown pre code {
  font-size: 13px;
  letter-spacing: 0;
}

.sqs-html-content hr, .sqs-block-markdown hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

.sqs-html-content img, .sqs-block-markdown img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sqs-html-content table, .sqs-block-markdown table {
  width: 100%;
  margin: 14px 0;
  border-collapse: collapse;
}
.sqs-html-content th, .sqs-block-markdown th,
.sqs-html-content td, .sqs-block-markdown td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  text-align: left;
}

/* Squarespace trims the outer margins of every block's content. */
.sqs-block-content > *:first-child,
.sqs-html-content > *:first-child { margin-top: 0; }
.sqs-block-content > *:last-child,
.sqs-html-content > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Block layout grid (Squarespace 12-column rows)
   -------------------------------------------------------------------------- */
.sqs-row { margin: 0 -17px; }
.sqs-row::after { content: ""; display: block; clear: both; }
.sqs-row > .col { float: left; }

/* Column widths are fractions of the layout's grid, which `sqs-grid-N`
   declares: the 12-column page/post grid, and the single-column grid the
   sidebar and header block fields use. */
.sqs-col-1  { width: 8.3333%; }
.sqs-col-2  { width: 16.6667%; }
.sqs-col-3  { width: 25%; }
.sqs-col-4  { width: 33.3333%; }
.sqs-col-5  { width: 41.6667%; }
.sqs-col-6  { width: 50%; }
.sqs-col-7  { width: 58.3333%; }
.sqs-col-8  { width: 66.6667%; }
.sqs-col-9  { width: 75%; }
.sqs-col-10 { width: 83.3333%; }
.sqs-col-11 { width: 91.6667%; }
.sqs-col-12 { width: 100%; }

.sqs-grid-1 .sqs-col-1 { width: 100%; }

.sqs-block { position: relative; padding: 17px; }
[class*="sqs-col"] .sqs-block { padding-left: 17px; padding-right: 17px; }

.sqs-layout .sqs-row .sqs-block:first-child { padding-top: 0; }
.sqs-layout .sqs-row .sqs-block:first-child:last-child { padding-bottom: 0; }
.sqs-layout .sqs-block + .sqs-row .sqs-block:first-child,
.sqs-layout .sqs-row + .sqs-row .sqs-block:first-child { padding-top: 17px; }
.sqs-layout .sqs-block + .sqs-row .sqs-block:first-child:last-child,
.sqs-layout .sqs-row + .sqs-row .sqs-block:first-child:last-child { padding-bottom: 17px; }
.sqs-layout .sqs-block + .sqs-row .sqs-block:last-child,
.sqs-layout .sqs-row + .sqs-row:not(:last-child) .sqs-block:last-child { padding-bottom: 17px; }

.sqs-block-spacer .sqs-block-content { overflow: hidden; }
.sqs-block-spacer.vsize-1 .sqs-block-content { height: 34px; }
.sqs-block-spacer.vsize-2 .sqs-block-content { height: 68px; }
.sqs-block-spacer.vsize-3 .sqs-block-content { height: 102px; }

/* --------------------------------------------------------------------------
   Image blocks
   -------------------------------------------------------------------------- */
.sqs-block-image .image-block-outer-wrapper { position: relative; }
.sqs-block-image figure { margin: 0; }
/* Images that open a lightbox are wrapped in a button; it has to behave like
   a block so the aspect-ratio padding below resolves against the full width. */
.sqs-block-image .sqs-block-image-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: inherit;
}
.sqs-block-image .sqs-block-image-button.lightbox { cursor: zoom-in; }
.sqs-block-image .image-block-wrapper { position: relative; overflow: hidden; }
.sqs-block-image .sqs-image-shape-container-element {
  position: relative;
  height: 0;
  overflow: hidden;
}
.sqs-block-image .sqs-image-shape-container-element img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sqs-block-image .image-caption-wrapper { padding-top: 18px; }
.sqs-block-image .image-caption-wrapper p { margin: 0; }
.sqs-block-image .layout-caption-hidden .image-caption-wrapper { display: none; }

/* --------------------------------------------------------------------------
   Gallery blocks (grid design, used inside pages)
   -------------------------------------------------------------------------- */
.sqs-block-gallery { padding: 17px; }
.sqs-gallery { margin-right: -10px; }
.sqs-gallery::after { content: ""; display: block; clear: both; }
.sqs-gallery-block-grid { overflow: hidden; }

.sqs-gallery-block-grid .slide { float: left; }
.sqs-gallery-thumbnails-per-row-1 .slide { width: 100%; }
.sqs-gallery-thumbnails-per-row-2 .slide { width: 50%; }
.sqs-gallery-thumbnails-per-row-3 .slide { width: 33.3333%; }
.sqs-gallery-thumbnails-per-row-4 .slide { width: 25%; }

.sqs-gallery-block-grid .margin-wrapper { position: relative; margin: 0 10px 10px 0; }

.sqs-gallery-block-grid .image-slide-anchor {
  display: block;
  position: relative;
  height: 0;
  overflow: hidden;
  background-color: rgba(175, 175, 175, .1);
}
.sqs-gallery-aspect-ratio-square .image-slide-anchor { padding-bottom: 100%; }
.sqs-gallery-aspect-ratio-standard .image-slide-anchor { padding-bottom: 66.6667%; }
.sqs-gallery-aspect-ratio-standard-vertical .image-slide-anchor { padding-bottom: 150%; }
.sqs-gallery-aspect-ratio-wide .image-slide-anchor { padding-bottom: 56.25%; }

.sqs-gallery-block-grid .image-slide-anchor img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Blocks configured without a lightbox render an anchor with no href; those
   stay non-interactive, exactly as on the original. */
.sqs-gallery-block-grid a.image-slide-anchor[href] { cursor: zoom-in; }
.sqs-gallery-block-grid a.image-slide-anchor[href]:hover img { opacity: .9; }
.v6-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Gallery collections (Commute / Escalators / Trains / Vietnam / Scrapbook)
   -------------------------------------------------------------------------- */
#galleryWrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/* 100% of the viewport-height gallery wrapper, less the 40px margins above
   and below, so the fitted image is centred in what's actually visible. */
#slideshowWrapper {
  position: relative;
  height: calc(100% - 80px);
  margin: 40px;
  margin-left: 280px;
}
#slideshowWrapper::selection { background-color: transparent; }

/* Fitted single-image view */
#slideshow { position: relative; height: 100%; overflow: hidden; }
#slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
#slideshow .slide.sqs-active-slide { display: block; }
#slideshow .slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Masonry thumbnail view */
/* content-box so the height the masonry sets is the height of the grid, with
   the trailing 50px added below it rather than eaten out of it. */
#thumbnails {
  position: relative;
  box-sizing: content-box;
  margin: 10px;
  padding-bottom: 50px;
}
#thumbnails .thumb {
  position: absolute;
  width: 300px;
  cursor: pointer;
  background-color: rgba(175, 175, 175, .1);
  transition: top 50ms ease-out, left 50ms ease-out;
}
#thumbnails .thumb img { display: block; width: 100%; height: 100%; }
#thumbnails .thumb img:hover { opacity: .9; }

/* View switching */
.collection-type-gallery #thumbnails { display: none; }
.collection-type-gallery.thumbnail-view #thumbnails { display: block; }
.collection-type-gallery.thumbnail-view #slideshow,
.collection-type-gallery.thumbnail-view .meta { display: none !important; }
.collection-type-gallery.thumbnail-view .overlay-controls { display: none; }

.overlay-controls { position: absolute; top: 0; height: 100%; z-index: 998; }
.overlay-controls.left-control   { left: 0;   width: 40%; cursor: w-resize; }
.overlay-controls.center-control { left: 40%; width: 20%; cursor: n-resize; }
.overlay-controls.right-control  { left: 60%; width: 40%; cursor: e-resize; }
.single-image .overlay-controls { display: none !important; }

.meta {
  position: absolute;
  left: 50px;
  bottom: 50px;
  width: 180px;
  z-index: 999;
}
.meta #imageData .slide { display: none; }
.meta #imageData .slide.sqs-active-slide { display: block; }
.meta .slide-meta-wrapper .meta-title { color: var(--heading); font-weight: 500; }
.meta .slide-meta-wrapper .meta-description p { margin: 0 0 7px; }

#simpleControls {
  padding-top: 15px;
  font-size: 12px;
  line-height: 1.2em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
#simpleControls .control { color: var(--control); cursor: pointer; }
#simpleControls .control:hover { color: var(--nav-hover); }

.meta .thumbnail-toggle {
  margin-top: 15px;
  font-size: 12px;
  line-height: 1.2em;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.meta .thumbnail-toggle:hover { color: var(--nav-hover); }

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.collection-type-blog #sidebarWrapper {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
}
.collection-type-blog .main-content { margin-right: 250px; }

#sidebar .sqs-html-content h1 { margin: 0 0 26px; }

article.hentry header { margin: 0 0 14px; }
.entry-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: .01em;
  color: var(--heading);
}
.entry-title a { color: var(--heading); }
.entry-title a:hover { color: var(--title); }
.entry-info { margin: 0; }
.entry-info .published a { color: var(--date); }
.entry-info .published a:hover { color: var(--nav-hover); }
.body.entry-content { margin: 14px 0; }

.post-divider { height: 1px; margin: 50px 0; }

nav.pagination {
  margin: 50px 0 0;
  font-size: 12px;
  line-height: 1.2em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
nav.pagination a { color: var(--control); }
nav.pagination a:hover { color: var(--nav-hover); }

/* --------------------------------------------------------------------------
   Lightbox (gallery blocks inside pages)
   -------------------------------------------------------------------------- */
.sqs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .93);
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.sqs-lightbox.is-open { opacity: 1; }
.sqs-lightbox img {
  max-width: calc(100% - 120px);
  max-height: calc(100% - 120px);
  object-fit: contain;
}
.sqs-lightbox-close,
.sqs-lightbox-prev,
.sqs-lightbox-next {
  position: absolute;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  padding: 20px;
  font-size: 24px;
  line-height: 1;
  transition: color 120ms ease-out;
}
.sqs-lightbox-close:hover,
.sqs-lightbox-prev:hover,
.sqs-lightbox-next:hover { color: #fff; }
.sqs-lightbox-close { top: 10px; right: 14px; font-size: 28px; }
.sqs-lightbox-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.sqs-lightbox-next { right: 10px; top: 50%; transform: translateY(-50%); }
.sqs-lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
body.lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Narrow desktop
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1023px) {
  #canvas { min-width: 0; }
  .collection-type-blog .main-content { margin-right: 0; }
  .collection-type-blog #sidebarWrapper { display: none; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 800px) {
  #canvas { padding: 0; }

  #headerWrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    padding: 20px;
  }

  #logo { margin-right: 80px; margin-bottom: 1em; }
  #logo .logo.site-title { margin: 0; display: inline-block; }

  #topNav { margin-bottom: 0; }
  .desktop-nav { display: none; }

  #mobileMenuLink {
    display: block !important;
    position: absolute;
    top: -20px;
    right: 0;
    bottom: auto;
  }
  #mobileMenuLink ul li { margin: 0; display: inline-block; }
  #mobileMenuLink a {
    cursor: pointer;
    padding: 20px;
    display: inline-block;
    margin: 0;
    font-size: 15px !important;
    color: var(--title);
  }

  #mobileNav { background: #000; transition: height 200ms ease-out; }
  #mobileNav .wrapper { padding: 2em 0; }
  #mobileNav nav + nav { margin: 0; }
  #mobileNav nav ul li { display: block; text-align: center; float: none !important; }
  #mobileNav a, #mobileNav a:visited {
    color: rgba(255, 255, 255, .7);
    font-size: 18px !important;
    line-height: 2.5em !important;
    display: block;
  }
  #mobileNav .active-link a { color: #fff; }
  #mobileNav li a:hover { color: #fff; }

  #pageWrapper { margin: 0 !important; padding: 20px !important; }
  .collection-type-gallery #page { position: static !important; }
  .collection-type-blog .main-content { margin: 0; }

  /* Gallery collections collapse to a simple stacked list. */
  #galleryWrapper { position: static !important; width: auto; height: auto; }
  #slideshowWrapper { margin: 0 !important; height: auto !important; }
  #slideshow { height: auto; overflow: visible; }
  #slideshow .slide {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 20px;
  }
  #slideshow .slide img {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .collection-type-gallery.thumbnail-view #thumbnails { display: none !important; }
  .collection-type-gallery.thumbnail-view #slideshow { display: block !important; }
  .collection-type-gallery.thumbnail-view .meta,
  .meta { display: none !important; }
  .overlay-controls { display: none !important; }

  .sqs-lightbox img { max-width: calc(100% - 40px); max-height: calc(100% - 120px); }
}

@media only screen and (max-width: 640px) {
  .sqs-row > .col { float: none; width: 100% !important; }
  .sqs-block-spacer { display: none; }
}