/* 12FPS.TV: static rebuild of the 12FPS.TV WordPress theme by Anagram (anagr.am).
   Layout, sizes and colours follow the original theme; Bootstrap 3, jQuery, Isotope and
   Font Awesome are replaced by the plain CSS below and assets/site.js. Category colours
   are generated by build.py and appended to this file. */

@font-face { font-family: "Merriweather"; src: url(fonts/merriweather.woff2) format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url(fonts/merriweather-italic.woff2) format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url(fonts/roboto-condensed.woff2) format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --bg: #fff;
  --ink: #000;
  --link: #dc234e;
  --grey: #ccc;
  --toggle: #3377dd;
  --sidebar: 250px;
  --serif: "Merriweather", Georgia, serif;
  --condensed: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --k: #ccc;                      /* category colour, set per project */
  --ka: rgba(0, 0, 0, .7);        /* the same colour at 70%, for the tile overlay */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { margin: 0; font: 14px/1.428571429 var(--serif); color: var(--ink); background: var(--bg);
  overflow-wrap: break-word; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: none; }
p { margin: 0 0 10px; }
h1, h2, h3 { margin: 20px 0 10px; font-weight: 500; line-height: 1.1; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--toggle); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -40px; z-index: 2000; padding: 6px 12px; background: #fff; }
.skip:focus { top: 8px; }
.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }

/* Sidebar: Start Bootstrap "Simple Sidebar" behaviour, as in the theme --------------------- */
#wrapper { position: relative; padding-left: 0; overflow-x: clip; transition: padding-left .5s ease; }
#wrapper.toggled { padding-left: var(--sidebar); }
#sidebar { position: fixed; z-index: 1000; top: 0; left: 0; width: 0; height: 100%;
  overflow-x: hidden; overflow-y: auto; background: var(--bg); visibility: hidden;
  transition: width .5s ease, visibility 0s .5s; }
#wrapper.toggled #sidebar { width: var(--sidebar); visibility: visible; transition: width .5s ease; }
#content { width: 100%; padding: 15px; }
#wrapper.toggled #content { position: absolute; margin-right: calc(-1 * var(--sidebar)); }
@media (min-width: 768px) {
  #wrapper { padding-left: var(--sidebar); }
  #wrapper.toggled { padding-left: 0; }
  #sidebar { width: var(--sidebar); visibility: visible; transition: width .5s ease; }
  #wrapper.toggled #sidebar { width: 0; visibility: hidden; transition: width .5s ease, visibility 0s .5s; }
  #content { padding: 20px; }
  #wrapper.toggled #content { position: relative; margin-right: 0; }
}
.sidebar-inner { display: flex; flex-direction: column; width: var(--sidebar); min-height: 100%; }
.logo img { display: block; width: 200px; margin: 20px 20px 20px 30px; }
.fps-info { padding: 0 15px 0 20px; line-height: 1.5em; }
.social { margin: 4px 0 8px; }
.social a { display: inline-block; margin-right: 8px; font-size: 20px; }
.social a:hover, .fps-info a:hover { color: var(--ink); }
.site-footer { margin-top: auto; padding: 20px 10px 10px; font-size: 12px; }
.site-footer img { width: 38px; }
.site-footer img.anagram { width: 60px; vertical-align: middle; }

/* The blue show/hide button; its arrow points the way the sidebar will move */
.showhide { float: left; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0 2px 2px 0; padding: 0; border: 0;
  border-right: 1px solid #fff; background: var(--toggle); color: #fff; cursor: pointer; }
.showhide:hover { color: var(--ink); }
.showhide .icon { width: 14px; height: 22px; }
.showhide .i-right { display: none; }
#wrapper.toggled .showhide .i-left { display: none; }
#wrapper.toggled .showhide .i-right { display: block; }
@media (max-width: 767px) {
  .showhide .i-left { display: none; }
  .showhide .i-right { display: block; }
  #wrapper.toggled .showhide .i-left { display: block; }
  #wrapper.toggled .showhide .i-right { display: none; }
}

/* Filters ----------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0 0 30px; list-style: none; }
.filters > li > button, .more > summary { display: block; height: 32px; padding: 0 10px; border: 0;
  font-size: 12px; line-height: 32px; letter-spacing: 1px; color: #fff; background: var(--k);
  cursor: pointer; }
.filters button:hover, .filters button[aria-pressed="true"], .more > summary:hover,
.more[open] > summary { color: var(--ink); }
.more { position: relative; }
.more > summary { padding: 0 15px; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more ul { position: absolute; z-index: 20; top: 100%; right: 0; min-width: 160px; max-height: 70vh;
  overflow-y: auto; margin: 0; padding: 5px 0; list-style: none; text-align: right;
  background: var(--grey); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
.more ul button { display: block; width: 100%; padding: 2px 10px; border: 0; font-size: 12px;
  line-height: 1.4; letter-spacing: 1px; text-align: right; color: #fff; background: none; cursor: pointer; }
.filters .all > button, .more ul button { --k: var(--grey); }

/* Portfolio grid: 263 x 197 tiles, showcase tiles 530 x 398, 4px gutters (the Isotope layout) */
.works-wrap { container: works / inline-size; clear: both; }
#works { display: grid; grid-template-columns: repeat(auto-fill, 263px); grid-auto-rows: 197px;
  grid-auto-flow: dense; gap: 4px; }
.work { position: relative; overflow: hidden; background: #eee; }
.work[hidden] { display: none; }
.work.larger { grid-column: span 2; grid-row: span 2; }
.work .thumb, .work .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@container works (max-width: 533px) {
  #works { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: auto; }
  .work { aspect-ratio: 263 / 197; }
  .work.larger { grid-column: auto; grid-row: auto; }
  .overlay .title { font-size: 16px; }
}
@container works (max-width: 379px) {
  #works { grid-template-columns: 1fr; }
  .overlay .title { font-size: 20px; }
}

/* Tile overlay: slides in from the side the pointer entered (the theme's hoverdir) */
.overlay { position: absolute; inset: 0; color: #fff; background: var(--ka);
  transform: translateX(100%); transition: transform .2s ease-in-out; }
.overlay[data-from="0"] { transform: translateY(-100%); }
.overlay[data-from="2"] { transform: translateY(100%); }
.overlay[data-from="3"] { transform: translateX(-100%); }
.overlay.in, .work:focus-within .overlay, html:not(.js) .work:hover .overlay { transform: none; }
.overlay .client { height: 32px; padding: 10px 10px 0; font-size: 12px; }
.overlay .title { margin: 0; padding: 10px; font: 400 20px/1.2 var(--condensed); }
.overlay .title a { color: #fff; }
.overlay .title a::after { content: ""; position: absolute; inset: 0; }
.overlay .links { position: absolute; z-index: 1; bottom: 22px; left: 10px; display: flex;
  flex-wrap: wrap; gap: 5px; max-width: calc(100% - 20px); }
.overlay .links button { display: inline-flex; align-items: center; justify-content: center;
  width: 35px; height: 35px; padding: 0; border: 0; border-radius: 50%; color: var(--k);
  background: #fff; cursor: pointer; }
.overlay .links button:hover { color: var(--ink); }
.overlay .links .icon { width: 18px; height: 18px; }
.overlay .cats { position: absolute; bottom: 5px; left: 10px; font-size: 12px; letter-spacing: 1px; }

/* Project pages ------------------------------------------------------------------------ */
.back { display: inline-block; height: 32px; margin-bottom: 30px; padding: 0 10px; font-size: 14px;
  line-height: 32px; letter-spacing: 1px; color: #fff; background: var(--grey); }
.back:hover { color: var(--ink); }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; clear: both; }
.col { width: 100%; padding: 0 15px; }
@media (min-width: 992px) {
  .c3 { width: 25%; }
  .c6 { width: 50%; }
}
.media-item { margin-bottom: 10px; }
.embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.gone { display: flex; align-items: center; justify-content: center; aspect-ratio: auto;
  min-height: 90px; padding: 20px; text-align: center; color: #555; background: #eee; }
.bar { display: grid; gap: 0 10px; padding: 5px 10px; color: #fff; background: var(--k); }
.bar .cat { font: 700 14px/1.43 var(--condensed); }
.bar .cap { text-align: center; }
.bar .cap:only-child { grid-column: 1 / -1; }
@media (min-width: 992px) {
  .bar { grid-template-columns: repeat(3, 1fr); }
  .bar .tags { text-align: right; }
}
.single-image { text-align: center; }
.single-image img { margin: 0 auto 10px; }
.info, .client { padding: 0 10px; }
.client { text-align: right; }
.info h1, .client h2 { margin: 20px 0 10px; font: 700 24px/1.1 var(--condensed); color: var(--k); }
.client h2 a { color: var(--k); }
.client h2 a:hover { color: var(--ink); }
.info .date { font-size: 14px; font-style: italic; color: var(--k); }
.info .credit { padding-top: 10px; font-size: 14px; }
.description { margin-top: 20px; }
.description p:first-child::first-letter { color: var(--k); }
.gallery { width: 100%; margin: 30px 24px; padding-top: 1px; }
.gallery hr { margin: 20px 0; border: 0; border-top: 1px solid var(--k); }
.gallery .col { margin-bottom: 20px; }
.gallery a { display: block; cursor: zoom-in; }
.gallery img { width: auto; max-width: min(100%, 300px); max-height: 300px; }   /* WordPress "medium" */
.notfound { clear: both; padding-top: 20px; }

/* Media viewer (the theme's remodal) -------------------------------------------------- */
#viewer { width: min(1100px, 92vw); max-width: none; max-height: none; padding: 0; overflow: visible;
  border: 0; background: transparent; }
#viewer::backdrop { background: rgba(33, 36, 46, .95); }
body:has(#viewer[open]) #wrapper { filter: blur(3px); }
#viewer .embed { width: 100%; }
#viewer img { display: block; max-width: 100%; max-height: 85vh; margin: 0 auto; }
#viewer .close { position: absolute; z-index: 1; top: -14px; left: -14px; display: flex;
  align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: 50%; color: #000; background: #fff; cursor: pointer; }
#viewer .close .icon { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Category colours (generated from content/site.json) */
.k-technology { --k: #ffcc66; --ka: rgba(255, 204, 102, .7); }
.k-adventure { --k: #339955; --ka: rgba(51, 153, 85, .7); }
.k-music { --k: #3377dd; --ka: rgba(51, 119, 221, .7); }
.k-food-drink { --k: #339955; --ka: rgba(51, 153, 85, .7); }
.k-fashion { --k: #3377dd; --ka: rgba(51, 119, 221, .7); }
.k-education { --k: #ffcc66; --ka: rgba(255, 204, 102, .7); }
.k-art { --k: #3377dd; --ka: rgba(51, 119, 221, .7); }