/* CSS's original box model was utterly stupid. Border-inclusive or GTFO. */
* { box-sizing: border-box; }

body {
  /* Full bleed. */
  margin: 0 0;

  /* Padding will actually be set by @media queries based on aspect ratio;
   * we only ever have one image wide, and if the aspect ratio is too wide, we
   * will pillarbox the display. If tall, the display might show 1, 2 or 3
   * photos at once, and apply padding as required.
   */
  padding: 0 0;

  /* Start from dark. Less jarring than white on emissive displays. */
  background: black;

  /* Don't scroll, just capture full viewport. */
  width: 100vw; height: 100vh;
}

/* Image stack for z-index:
 *
 *   15  p.location
 *   10  img.overlay
 *    6  .page p
 *    5  .shadow
 *    3  div.overlay
 *    2  h1, h2, h3
 *    1  img
 */


div.overlay {
  z-index: 3;
}

/* What sort of devices should this design support?
 *  9:20 (0.45) - Tallscreen phone display
 *  9:18 (0.50) - Average phone display, portrait
 *  3:6         - Also three 35mm frames stacked vertically
 *  9:16 (0.56) - Vertical HDTV (wtf who does this, your polarisation is /wrong/)
 *  2:3  (0.66) - 35mm full frame shot like phone video
 *  3:4  (0.75) - Ye Olde CRT
 *  3:4         - Also two 35mm frames stacked vertically
 *  1:1  (1.00) - Square displays. Basically non-existent.
 *  4:3  (1.33) - Ye Olde CRT (VGA, SVGA)
 *  3:2  (1.50) - Native size of 35mm full frame (as shot in this gallery)
 * 16:9  (1.78) - "Standard" HDTV aspect ratio.
 * 18:9  (2.00) - Average phone display, landscape
 * 20:9  (2.22) - Pixel 9 Pro display
 * 47:20 (2.39) - 35mm anamorphic
 * 32:9  (3.56) - Ultrawide (2x HD) screens
 */

/* If the display is wider than a 1:2 ratio.. */
@media (min-aspect-ratio: 4/2) {
  body {
    /* For ultra-wide aspect ratios, cap at 2:1 by pillarboxing */
    padding: 0 calc(50vw - 100vh);
  }
}

@media (max-aspect-ratio: 2/1) {
  body {
    /* Experiment: extreme letterboxing */
    padding: calc(50vh - 33.333vw) 0;
  }
}

@media (max-aspect-ratio: 3/2) {
  .page { max-height: 66.667vw; }
}

@media (max-aspect-ratio: 3/4) {
  body {
    /* Experiment: extreme letterboxing */
    padding: calc(50vh - 66.667vw) 0;
  }
}

/* If the display is narrower than a 1:2 ratio.. */
@media (max-aspect-ratio: 3/6) {
  body {
    /* Fit a maximum of 3 frames on screen if they'll fit. */
    padding: calc(50vh - 100vw) 0;
  }
}

/* Split between images is on a 15° angle, sloped forward. */

/* All of these are static based on the width, since we have no pillarbox. */
.left15.p45 { clip-path: polygon(0% 0%, calc(45% + 8.93%) 0%, calc(45% - 8.93%) 100%, 0% 100%); }
.left15.p40 { clip-path: polygon(0% 0%, calc(40% + 8.93%) 0%, calc(40% - 8.93%) 100%, 0% 100%); }
.left15.p30 { clip-path: polygon(0% 0%, calc(30% + 8.93%) 0%, calc(30% - 8.93%) 100%, 0% 100%); }
.left15.p25 { clip-path: polygon(0% 0%, calc(25% + 8.93%) 0%, calc(25% - 8.93%) 100%, 0% 100%); }
.left15.p20 { clip-path: polygon(0% 0%, calc(20% + 8.93%) 0%, calc(20% - 8.93%) 100%, 0% 100%); }
.left15.p15 { clip-path: polygon(0% 0%, calc(15% + 8.93%) 0%, calc(15% - 8.93%) 100%, 0% 100%); }
.left15.p10 { clip-path: polygon(0% 0%, calc(10% + 8.93%) 0%, calc(10% - 8.93%) 100%, 0% 100%); }

/* Split between images is on a 15° angle, sloped forward. This is for the right side. */
.right15.p20 { clip-path: polygon(100% 0%, calc(80% + 8.93%) 0%, calc(80% - 8.93%) 100%, 100% 100%); }
.right15.p25 { clip-path: polygon(100% 0%, calc(75% + 8.93%) 0%, calc(75% - 8.93%) 100%, 100% 100%); }
.right15.p30 { clip-path: polygon(100% 0%, calc(70% + 8.93%) 0%, calc(70% - 8.93%) 100%, 100% 100%); }
.right15.p40 { clip-path: polygon(100% 0%, calc(60% + 8.93%) 0%, calc(60% - 8.93%) 100%, 100% 100%); }

h1 { font-size: calc(100vw / 15); text-shadow: 0 0 13px rgba(0,0,0,0.3); }
h2 { font-size: calc(100vw / 25); }
.page p.location { font-size: calc(100vw / 40); }

@media (min-aspect-ratio: 3/2) {
  h1 { font-size: calc(150vh / 15); }
  h2 { font-size: calc(150vh / 25); }
  .page p.location { font-size: calc(150vh / 40); }

  /* Tweak based on viewport height, since we do funny things with cropping. */
  .left15.p45 { clip-path: polygon(0% 0%, calc(45% + 13.4vh) 0%, calc(45% - 13.4vh) 100%, 0% 100%); }
  .left15.p40 { clip-path: polygon(0% 0%, calc(40% + 13.4vh) 0%, calc(40% - 13.4vh) 100%, 0% 100%); }
  .left15.p30 { clip-path: polygon(0% 0%, calc(30% + 13.4vh) 0%, calc(30% - 13.4vh) 100%, 0% 100%); }
  .left15.p25 { clip-path: polygon(0% 0%, calc(25% + 13.4vh) 0%, calc(25% - 13.4vh) 100%, 0% 100%); }
  .left15.p20 { clip-path: polygon(0% 0%, calc(20% + 13.4vh) 0%, calc(20% - 13.4vh) 100%, 0% 100%); }
  .left15.p15 { clip-path: polygon(0% 0%, calc(15% + 13.4vh) 0%, calc(15% - 13.4vh) 100%, 0% 100%); }
  .left15.p10 { clip-path: polygon(0% 0%, calc(10% + 13.4vh) 0%, calc(10% - 13.4vh) 100%, 0% 100%); }

  /* Split between images is on a 15° angle, sloped forward. This is for the right side. */
  .right15.p20 { clip-path: polygon(100% 0%, calc(80% + 13.4vh) 0%, calc(80% - 13.4vh) 100%, 100% 100%); }
  .right15.p25 { clip-path: polygon(100% 0%, calc(75% + 13.4vh) 0%, calc(75% - 13.4vh) 100%, 100% 100%); }
  .right15.p30 { clip-path: polygon(100% 0%, calc(70% + 13.4vh) 0%, calc(70% - 13.4vh) 100%, 100% 100%); }
  .right15.p40 { clip-path: polygon(100% 0%, calc(60% + 13.4vh) 0%, calc(60% - 13.4vh) 100%, 100% 100%); }

}


.left15 img { left: 0; right: auto; }
.right15 img { left: auto; right: 0 }

.p10 img { width: 20%; }
.p15 img { width: 30%; }
.p20 img { width: 40%; }
.p25 img { width: 50%; }
.p30 img { width: 60%; }
.p35 img { width: 70%; }
.p40 img { width: 80%; }
.p45 img { width: 90%; }

@media (max-aspect-ratio: 4/5), (aspect-ratio: 4/5) {
  .top15_20 { clip-path: polygon(0% 0%, 100% 0%, 100% calc(20% - 13.4vw), 0% calc(20% + 13.4vh)); }
  .bottom15_20 { clip-path: polygon(0% 100%, 100% 100%, 100% calc(80% - 13.4vw), 0% calc(80% + 13.4vh)); }
}

/* img:not([alt]) { border: 10px solid orange; } */

img, div.overlay {
  /* Always fill parent element. */
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;

}

img {
  /* Always centre and maintain aspect ratio. */
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 1;
}

img.op100 { object-position: 100% 50%; }
img.op90 { object-position: 90% 50%; }
img.op80 { object-position: 80% 50%; }
img.op70 { object-position: 70% 50%; }
img.op60 { object-position: 60% 50%; }
img.op50 { object-position: 50% 50%; }
img.op40 { object-position: 40% 50%; }
img.op30 { object-position: 30% 50%; }
img.op20 { object-position: 20% 50%; }
img.op10 { object-position: 10% 50%; }
img.op0 { object-position: 0% 50%; }

img.overlay {
  z-index: 10;
  position: absolute; 
}


body, h1, h2, h3, p {
  font-family: "Andale Mono", monospace;
  color: white;
}


h1 {
  position: absolute;
  top: 10%;
  left: 1em;
  margin: 0 0; padding: 0 0;
  text-transform: lowercase;
  z-index: 2;
}

.mode_chapter {
  color: white;
  background: rgb(158, 99, 97);
}

:nth-child(3n of .mode_chapter) { background: hsl(2, 24%, 50%); }
:nth-child(3n+1 of .mode_chapter) { background: hsl(265, 24%, 50%); }
:nth-child(3n+2 of .mode_chapter) { background: hsl(93, 24%, 50%); }

.mode_chapter h1 {
  left: 0; right: 0; top: calc(50% - 1em); bottom: 0;
  text-align: center;
  text-transform: none;
  text-shadow: rgba(0,0,0, 0.3) 0px 0.08em 0.1em;
}

.shadow { opacity: 0.3; z-index: 5; }

h1, h2, h3, h4, h5, h6 { margin: 0 0; }

h2 {
  position: absolute;
  bottom: 30%;
  left: 1em;
  margin: 0 0; padding: 0 0;
  text-transform: lowercase;
  z-index: 2;
}


h3 {
  line-height: 1;
  position: absolute;
  bottom: 2em;
  right: 2em;
  text-align: right;
  z-index: 2;
}

.scroller {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

.page {
  scroll-snap-align: start;
  position: relative;
  height: 100vh;
}

.page p {
  position: absolute;
  bottom: 10%;
  left: 20%;
  right: 30%;
  font-size: 24pt;
  color: white;
  z-index: 6;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

p.location {
  position: absolute;
  right: 4em;
  bottom: 2em;
  text-align: right;
  z-index: 15;
}

p.location::before { content: '> '; }