/* breakpoints */
/* 24rem  = 384  = XS  */
/* 48rem  = 768  = S  */
/* 64rem  = 1024 = M  */
/* 80rem  = 1280 = L  */
/* 120rem = 1800 = XL */

:root {
  --c-black: #000;
  --c-gray: #999;
  --t-indent: 1.5em;
}

/* defaults */

* {
  box-sizing: border-box;
}

body {
  font-family: "Unica77";
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  color: var(--c-black);
}

a { 
  color: var(--c-black); 
  text-decoration: underline; 
}
a:hover           { text-decoration: none; }
a.underline       { text-decoration: underline; }
a.underline:hover { text-decoration: none; }
a.noline          { text-decoration: none; }
a.noline:hover    { text-decoration: underline;}

em {
  font-style: italic;
}

@keyframes blink {
  0%  { content: "—"; }
  25% { content: "/"; }
  50% { content: "|"; }
  75% { content: "\\"; }
}

/* type utils */

.t-sm {
  font-size: 0.8125rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
}
.t-md {
  font-size: 1rem;
  line-height: 1.2;
}
@media only screen and (min-width: 24rem) { .t-md { font-size: 1.125rem; } }
@media only screen and (min-width: 64rem) { .t-md { font-size: 1rem; } }
@media only screen and (min-width: 80rem) { .t-md { font-size: 1.125rem; } }

.t-right { text-align: right; }
.t-center { text-align: center; }

span.no-br { white-space: nowrap; }
span.indent { padding-left: var(--t-indent); }

/* layout utils */

.g-container { 
  display: grid; 
  column-gap: 1.5rem;
}
.g-col-2,
.g-col-3,
.g-col-4 { grid-template-columns: 1fr; }
@media only screen and (min-width: 48rem) { 
  .g-col-2 { grid-template-columns: 1fr 1fr; } 
  .g-col-3 { grid-template-columns: 1fr 1fr; } 
}
@media only screen and (min-width: 64rem) {
  .g-col-3 { grid-template-columns: 1fr 1fr 1fr; } 
  .g-col-4 { grid-template-columns: 1fr 1fr 1fr; }
}
@media only screen and (min-width: 180rem) {
  .g-col-4 { grid-template-columns: 1fr 1fr 1fr 1fr;}
}
.g-span-2 { 
  grid-column-end: span 2; 
}

.l-flex {
  display: flex;
}
.l-flex-space-between {
  justify-content: space-between;
}
.l-scroll-x {
  overflow-x: scroll;
}

/* spacing utils */

.m-1 { margin: 1rem; }
.m-2 { margin: 2rem; }
.ml-1 { margin-left: 1rem; }
.mr-1 { margin-right: 1rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

.p-h { padding: 0.5rem; }
.p-3q { padding: 0.75rem; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.pl-1 { padding-left: 1rem; }
.pl-2 { padding-left: 2rem; }
.pr-1 { padding-right: 1rem; }
.pr-2 { padding-right: 2rem; }
.pt-q { padding-top: 0.25rem; }
.pt-h { padding-top: 0.5rem; }
.pt-1 { padding-top: 1rem; }
.pt-2 { padding-top: 2rem; }
.pt-3 { padding-top: 3rem; }
.pt-4 { padding-top: 4rem; }
.pt-4 { padding-top: 4rem; }
.pt-8 { padding-top: 8rem; }

.pb-q { padding-bottom: 0.25rem; }
.pb-h { padding-bottom: 0.5rem; }
.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-3 { padding-bottom: 3rem; }
.pb-4 { padding-bottom: 4rem; }
.pb-6 { padding-bottom: 6rem; }
.pb-7 { padding-bottom: 7rem; }
.pb-8 { padding-bottom: 8rem; }

/* responsive padding */
.rpt-1 { padding-top: 0.75em; }
.rpb-1 { padding-bottom: 0.75em; }
.rpl-1 { padding-left: 0.75em; }
.rpr-1 { padding-right: 0.75em; }
@media only screen and (min-width: 24rem) { 
  .rpt-1 { padding-top: 1em; }
  .rpb-1 { padding-bottom: 1em; }
  .rpl-1 { padding-left: 1em; }
  .rpr-1 { padding-right: 1em; }
}

/* header */

header nav { 
  position: absolute; 
  right: 1rem;
}
@media only screen and (min-width: 64rem) {
  header nav { position: static; }
}

/* nav */

nav ol { 
  counter-reset: item; 
}
nav ol li { 
  display: block; 
  counter-increment: item;
  margin-left: 2em;
}
nav ol li a       { text-decoration: none; }
nav ol li a:hover { text-decoration: underline; }

nav ol li:before { 
  position: absolute;
  content: counter(item) ". ";
  margin-left: -2em;
}
nav ol li.current:before {
  width: 1em;
  margin-left: -2.2em;
  text-align: center;
  content: "—";
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
nav ol li {
  padding-bottom: 0.33rem;
}
@media only screen and (min-width: 48rem) {
  nav ol li {
    padding-bottom: 0.25rem;
  }
}

/* article */

@media only screen and (min-width: 64rem) {
  article h1, article h2 {
    margin-left: var(--t-indent);
    text-indent: calc(var(--t-indent) * -1);
  }
}
article h2 { padding-top: 1em; }
@media only screen and (min-width: 64rem) {
  article h2 { padding-top: 0; }
}

article h1 p:nth-child(2), article h2 p:nth-child(2) { margin-left: calc(var(--t-indent)); }
@media only screen and (min-width: 64rem) {
  article h1 p:nth-child(2), article h2 p:nth-child(2) { margin-left:0; }
}

/* section */
section.body h1 {
  padding-top: 1em;
}
section.body blockquote {
  padding-top: 1em;
  padding-left: 1em;
  margin-left: 0.25em;
}
section.body h1 + blockquote,
section.body blockquote blockquote {
  padding-top: 0;
}
section.body p + p,
section.body blockquote + p,
section.body ul + p {
  padding-top: 1em;
}
section.body ul li {
  padding-left: var(--t-indent);
  text-indent: calc(var(--t-indent) * -1);
}
section.body ul li a { text-decoration: none; }
section.body ul li a:hover { text-decoration: underline; }

section.body + section.body {
  padding-top: max(16em, 50vh);
}
section.body + section.body:before {
  content: "—";
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  position: absolute;
  width: 10em;
  text-align: center;
  margin-top: calc(((max(16em, 50vh) / 2) + 2em ) * -1);
  left: 50%;
  margin-left: -5em;
}
section.pagenum h3 {
  text-align: center;
  margin-top: max(2em, calc(25vh - 4em));
  margin-bottom: max(8em, 25vh);
}
section.pagenum.home {
  display: none;
}
section.pagenum span.s-1 {
  display: inline-block;
  width: 0.065em;
}
section.body .desc { order: 2; }
@media only screen and (min-width: 64rem) { 
  section.body .desc { order: -1; } 
}
section.meta { padding-bottom: 2rem; }
@media only screen and (min-width: 64rem) { 
  section.meta { padding-bottom: 4rem; } 
}
section .credit a {
  text-decoration: none;
}
section .credit a:hover {
  text-decoration: underline;
}
section .credit ul li:before {
  display: none;
}
/* control line length in XL */
@media only screen and (min-width: 120rem) { 
  section.body .desc {
    padding-right: 10vh;
  }
}

/* figure */

figure img { 
  width: 100%; 
  background-color: rgba(0,0,0,0.05);
  border-radius: 2vw;
  transition: border-radius 0.2s;
}
img.is-dark {
  filter: brightness(0.965);
}
@keyframes corners {
  0%  { border-radius: 1vw 0 0 0; }
  25% { border-radius: 0 1vw 0 0; }
  50% { border-radius: 0 0 1vw 0; }
  75% { border-radius: 0 0 0 1vw; }
}
figure > div {
  border-radius: 2vw;
  overflow:hidden;
}
@media only screen and (min-width: 24rem) { 
  figure > div, figure img {
    border-radius: 1vw;
  }
}

/* carousel */
.carousel {
  width: 100%;
}
/* @media only screen and (min-width: 48rem) { 
  .carousel
} */
.carousel > div > a > img {
  transition: transform 2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.carousel > div:nth-child(odd)  > a > img:hover  { transform: rotate3d(1,1,0, 30deg); }
.carousel > div:nth-child(even) > a > img:hover  { transform: rotate3d(-1,0.5,0, 30deg); }

.carousel > div > a, .carousel > div > a > img {
  display: block;
  width: calc(100vw - 4rem);
}
@media only screen and (min-width: 48rem) { 
  .carousel > div > a, .carousel > div > a > img {
    width: auto;
    height: min(50vw, 50vh);
  }
}
@media only screen and (min-width: 64rem) { 
  .carousel > div > a, .carousel > div > a > img {
    width: auto;
    min-height: 32rem;
    max-height: 64rem;
  }
}

/* lightbox */

.lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* A bit of padding around image */
  padding: 0rem;

  /* Translucent background */
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(75px) saturate(1000%);
  backdrop-filter: blur(75px) saturate(1000%);
}
@media only screen and (min-width: 24rem) { .lightbox { padding: 2rem; }}
@media only screen and (min-width: 64rem) { .lightbox { padding: 3rem; }}
@media only screen and (min-width: 120rem) { .lightbox { padding: 8rem; }}

/* Unhide the lightbox when it's the target */
@media only screen and (min-width: 48rem) {
  .lightbox:target {
    display: block;
  }
}

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.lightbox p {
  position: absolute;
  width: calc(100%);
  bottom: 1rem;
}
@media only screen and (min-width: 24rem) { .lightbox p { width: calc(100% - 2rem * 2); }}
@media only screen and (min-width: 64rem) { .lightbox p { width: calc(100% - 4rem * 2); }}
@media only screen and (min-width: 120rem) { .lightbox p { width: calc(100% - 8rem * 2); }}