/* ============================================================
   Portfolio — main stylesheet
   Kept lean: only selectors that match a real element on a
   real page. Original dogma.name stylesheet trimmed.
   ============================================================ */

/* --- normalize.css (subset we actually rely on) --- */
html  { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body  { margin: 0; }
h1    { font-size: 2em; margin: 0.67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr    { box-sizing: content-box; height: 0; overflow: visible; }
a     { background-color: transparent; -webkit-text-decoration-skip: objects; }
b, strong { font-weight: bolder; }
img   { border-style: none; }
button, input, optgroup, select, textarea {
  font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0;
}
button { border: 0; background-color: transparent; }
[hidden], template { display: none; }

/* --- reset --- */
*, *::before, *::after {
  padding: 0; margin: 0; list-style: none; box-sizing: border-box; outline: none;
}

/* --- base typography --- */
html, body {
  width: 100%;
  font-size: 16px;
  line-height: 1.875rem;
}
@media (min-width: 1024px) and (min-height: 768px) {
  html, body { font-size: calc(16px + 0.3vh); }
}
html { height: 100%; }
body {
  display: flex; flex-flow: column nowrap; justify-content: flex-start;
  min-height: 100%;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  font-family: "Times New Roman", Georgia, serif;
  color: #000;
}
body, h1, h2 { margin: 0 auto; font-weight: 400; }
h1, h2 { line-height: 1; }
h1 {
  font-size: 1.375rem; letter-spacing: 4px; text-transform: uppercase;
}
h2 {
  font-size: 1rem; line-height: 2; font-style: italic;
}
h2 span { display: block; font-style: normal; }
p { margin-bottom: 20px; line-height: 1.3rem; }
b, strong { font-weight: 700; }
a, button { color: #000; cursor: pointer; }
a { text-decoration: none; }
p a {
  text-decoration: underline; text-decoration-skip-ink: auto;
  -webkit-text-decoration-skip: ink;
}
p a:hover { text-decoration: none; }
img {
  max-width: 100%; width: 100%; height: auto; line-height: 0;
}
::selection { background-color: #000; color: #fff; }
footer p { margin: 0 auto; }

/* --- page chrome --- */
main {
  flex: 2 1 auto;
  padding-top: calc(3vh + 2rem + 4.5rem);
  padding-bottom: 3vh;
  transition: background-color 0.2s;
}
.home main { display: flex; }
.container { max-width: 600px; width: 100%; margin: 0 auto; padding: 0 20px; }
@media (min-height: 660px) {
  .container { max-width: calc(100vh - 6vh - 8rem - 4.5rem); }
}
.about p { text-align: justify; }

/* --- fixed header --- */
header {
  width: 100%; padding-top: 3vh;
  background-color: #fff; text-align: center;
  position: fixed; top: 0; left: 0; z-index: 9;
  transition: background-color 0.2s;
}
header h1, header nav {
  margin-bottom: 1.5rem; line-height: 1rem;
}
header h1 { margin-top: 1.5rem; }
nav ul li {
  display: inline-block; margin: 0; padding: 0;
  font-size: 1.0625rem;
}
nav ul li:not(:last-child)::after {
  content: "/"; display: inline-block; margin: 0 0 0 7px;
}
nav ul li.current_page_item a { font-style: italic; }

/* --- Wallop slider (project pages) --- */
.Wallop { width: 100%; height: auto; margin: 0 auto; position: relative; }
@media (min-height: 660px) {
  .Wallop:not(.Wallop--single-project) { margin-top: 2rem; }
}
.Wallop--single-project {
  flex: 4 1 auto;
}
.Wallop-list { width: 100%; margin: 0 auto; position: relative; overflow: hidden; }
.Wallop-list img { min-width: 100%; height: auto; }
.Wallop-item {
  display: block; width: 100%; height: auto; text-align: center; position: relative;
}
.Wallop-item h2 { margin-bottom: 1rem; }
.Wallop-item p  { margin-bottom: 0; }
.Wallop-item figure { margin: 0; line-height: 0; }
.Wallop-item figcaption { margin-top: 1rem; }
.Wallop-item figcaption h2 { margin-bottom: 1rem; line-height: 1rem; }
.Wallop-item figcaption p  { line-height: 1.2rem; }
.Wallop-captions { margin-top: 1rem; }
.Wallop-caption { display: none; text-align: center; }
.Wallop-caption h2 { margin-bottom: 1rem; line-height: 1rem; }
.Wallop-caption p  { margin-bottom: 0; line-height: 1.2rem; }
.Wallop-caption--current { display: block; }

.Wallop-counter {
  flex: 1 0 auto; width: 100%;
  margin: 0.5rem auto; line-height: 1rem; text-align: center;
}
.Wallop--single .Wallop-counter { display: none; }

.Wallop-buttonNext, .Wallop-buttonPrevious {
  width: 30%; height: 100%;
  background-color: transparent; background-repeat: no-repeat; background-size: 25px;
  position: absolute; top: 0; z-index: 3;
}
@media (min-width: 600px) {
  .Wallop:not(.Wallop--touch) .Wallop-buttonNext,
  .Wallop:not(.Wallop--touch) .Wallop-buttonPrevious {
    background-image: none;
  }
}
@media (min-width: 1080px) {
  .Wallop-buttonNext, .Wallop-buttonPrevious { width: 35%; }
}
.Wallop--single .Wallop-buttonNext,
.Wallop--single .Wallop-buttonPrevious { display: none; }

.Wallop-buttonPrevious {
  left: -17px;
  background-image: url(arrow-left.png); background-position: 0;
}
.Wallop--single-project .Wallop-buttonPrevious {
  background-position: left 0.2rem; left: 0;
}
@media (min-width: 600px) {
  .Wallop:not(.Wallop--touch) .Wallop-buttonPrevious {
    left: -20px; cursor: url(arrow-left.png), pointer;
  }
}
@media (min-width: 1080px) {
  .Wallop:not(.Wallop--touch) .Wallop-buttonPrevious { left: -5vw; }
}
.Wallop-buttonNext {
  right: -17px;
  background-image: url(arrow-right.png); background-position: 100%;
}
.Wallop--single-project .Wallop-buttonNext {
  right: 0; background-position: right 0.2rem;
}
@media (min-width: 600px) {
  .Wallop:not(.Wallop--touch) .Wallop-buttonNext {
    right: -20px; cursor: url(arrow-right.png), pointer;
  }
}
@media (min-width: 1080px) {
  .Wallop:not(.Wallop--touch) .Wallop-buttonNext { right: -5vw; }
}
.Wallop--touch .Wallop-buttonPrevious {
  left: -17px; background-image: url(arrow-left.png); background-position: 0;
}
.Wallop--touch.Wallop--single-project .Wallop-buttonPrevious {
  left: 0; background-position: left 0.2rem;
}
.Wallop--touch .Wallop-buttonNext {
  right: -17px; background-image: url(arrow-right.png); background-position: 100%;
}
.Wallop--touch.Wallop--single-project .Wallop-buttonNext {
  right: 0; background-position: right 0.2rem;
}

/* --- slider container (project pages) --- */
.slider-container {
  display: flex; flex: 2 1; flex-direction: column;
}
.slider-container > div { flex-basis: auto; }
.slider-container > div:first-child { flex: 0 1; }
.slider-container > div:last-child  { flex: 2 0; }

/* --- project page wrapper --- */
.project, .project .container { display: flex; }
.project .container { flex-direction: column; }
.project__title { text-align: center; }