/*

  CSS doesn't have proper DPI-based units. mm/inch/pt etc are implemented as pixel constants.

  If we want to define a font size that's readable on all devices, the closest we can get is vw.
  This has it's limits, though, and fonts will still be physically smaller on physically smaller
  screens.

  This is dumb, but we can work around this with a trick using the em unit.

  Media queries can reference DPI. We'll use media query branching to set font size based upon DPI.
  The unit 'em' will be based on this font size.

  This effectively turns 'em' into a 'dp'-type unit. It can be used for things other than font!

  This has the limitation that it has defined bounds and resolution.

*/

@media only screen and (min-resolution: 0.1dppx) { body { font-size: 1px !important; } }
@media only screen and (min-resolution: 0.2dppx) { body { font-size: 2px !important; } }
@media only screen and (min-resolution: 0.3dppx) { body { font-size: 3px !important; } }
@media only screen and (min-resolution: 0.4dppx) { body { font-size: 4px !important; } }
@media only screen and (min-resolution: 0.5dppx) { body { font-size: 5px !important; } }
@media only screen and (min-resolution: 0.6dppx) { body { font-size: 6px !important; } }
@media only screen and (min-resolution: 0.7dppx) { body { font-size: 7px !important; } }
@media only screen and (min-resolution: 0.8dppx) { body { font-size: 8px !important; } }
@media only screen and (min-resolution: 0.9dppx) { body { font-size: 9px !important; } }
@media only screen and (min-resolution: 1.0dppx) { body { font-size: 10px !important; } }
@media only screen and (min-resolution: 1.1dppx) { body { font-size: 11px !important; } }
@media only screen and (min-resolution: 1.2dppx) { body { font-size: 12px !important; } }
@media only screen and (min-resolution: 1.3dppx) { body { font-size: 13px !important; } }
@media only screen and (min-resolution: 1.4dppx) { body { font-size: 14px !important; } }
@media only screen and (min-resolution: 1.5dppx) { body { font-size: 15px !important; } }
@media only screen and (min-resolution: 1.6dppx) { body { font-size: 16px !important; } }
@media only screen and (min-resolution: 1.7dppx) { body { font-size: 17px !important; } }
@media only screen and (min-resolution: 1.8dppx) { body { font-size: 18px !important; } }
@media only screen and (min-resolution: 1.9dppx) { body { font-size: 19px !important; } }
@media only screen and (min-resolution: 2.0dppx) { body { font-size: 20px !important; } }
@media only screen and (min-resolution: 2.1dppx) { body { font-size: 21px !important; } }
@media only screen and (min-resolution: 2.2dppx) { body { font-size: 22px !important; } }
@media only screen and (min-resolution: 2.3dppx) { body { font-size: 23px !important; } }
@media only screen and (min-resolution: 2.4dppx) { body { font-size: 24px !important; } }
@media only screen and (min-resolution: 2.5dppx) { body { font-size: 25px !important; } }
@media only screen and (min-resolution: 2.6dppx) { body { font-size: 26px !important; } }
@media only screen and (min-resolution: 2.7dppx) { body { font-size: 27px !important; } }
@media only screen and (min-resolution: 2.8dppx) { body { font-size: 28px !important; } }
@media only screen and (min-resolution: 2.9dppx) { body { font-size: 29px !important; } }
@media only screen and (min-resolution: 3.0dppx) { body { font-size: 30px !important; } }
@media only screen and (min-resolution: 3.1dppx) { body { font-size: 31px !important; } }
@media only screen and (min-resolution: 3.2dppx) { body { font-size: 32px !important; } }
@media only screen and (min-resolution: 3.3dppx) { body { font-size: 33px !important; } }
@media only screen and (min-resolution: 3.4dppx) { body { font-size: 34px !important; } }
@media only screen and (min-resolution: 3.5dppx) { body { font-size: 35px !important; } }
@media only screen and (min-resolution: 3.6dppx) { body { font-size: 36px !important; } }
@media only screen and (min-resolution: 3.7dppx) { body { font-size: 37px !important; } }
@media only screen and (min-resolution: 3.8dppx) { body { font-size: 38px !important; } }
@media only screen and (min-resolution: 3.9dppx) { body { font-size: 39px !important; } }
@media only screen and (min-resolution: 4.0dppx) { body { font-size: 40px !important; } }
@media only screen and (min-resolution: 4.1dppx) { body { font-size: 41px !important; } }
@media only screen and (min-resolution: 4.2dppx) { body { font-size: 42px !important; } }
@media only screen and (min-resolution: 4.3dppx) { body { font-size: 43px !important; } }
@media only screen and (min-resolution: 4.4dppx) { body { font-size: 44px !important; } }
@media only screen and (min-resolution: 4.5dppx) { body { font-size: 45px !important; } }
@media only screen and (min-resolution: 4.6dppx) { body { font-size: 46px !important; } }
@media only screen and (min-resolution: 4.7dppx) { body { font-size: 47px !important; } }
@media only screen and (min-resolution: 4.8dppx) { body { font-size: 48px !important; } }
@media only screen and (min-resolution: 4.9dppx) { body { font-size: 49px !important; } }
@media only screen and (min-resolution: 5.0dppx) { body { font-size: 50px !important; } }

:root {
  /*--trump-accent: #aca690;*/
  --trump-accent: #9f9478;
  --trump-accent-lowsat: #9f9b90;
}

* { margin: 0; padding: 0; border-width:0; z-index:100; position:relative;  }

body {
  min-width: 300px;
  font-size: 10px;
}

a { color: #9097ac; }

/* ==== Header styling ==== */

@font-face {
  font-family: ryan_name;
  src: url("font/BebasNeue-Regular.ttf");
}

@font-face {
  font-family: ryan_subname;
  /*src: url("font/Unbounded-VariableFont_wght.ttf");*/
  src: url("font/RobotoSlab-VariableFont_wght.ttf");
}


/* Handle edge case: when window gets too narrow, image starts to repeat.
   At a certain aspect ratio we need to enforce the limit aspect ratio.

   We can't always do this because we want the text to track the image as
   closely as possible. */
@media (max-aspect-ratio: 0.7/1) {
  .header {
    display:flex !important;
    flex-direction:column;
    justify-content:end;

    padding-top:0 !important;
    aspect-ratio: 1.6 / 1 !important;
    object-fit:cover !important; /* workaround for desktop safari to support aspect-ratio */
  }
}

#header {
  padding-top:25%;
  width:100%;
  display:inline-block;

  padding-bottom: 2em;
  border-bottom: 1em;
  border-color: #111;
  border-style: solid;
}

#headerbg {
  position: fixed;
  z-index:0;
  background-image: url("img/bw-trumpcolor.jpg");
  background-size:100%;
  width:100%;
  background-color:#333;
  height:100%;
  min-width: 300px;
}

#header #name {
  /*color: #ddd;*/
  color: var(--trump-accent);
  text-align: center;
  font-size:clamp(4em,8em,16vw);
  font-family: ryan_name;
  font-weight:normal;
  text-shadow: 0 0 0.1em #000,
               0 0 0.2em #000,
               0 0 0.5em #000,
               0 0 0.5em #000;
}

#header #subname {
  color: #ccc;
  text-align: center;
  font-size:clamp(1.5em, 2.5em, 6vw);
  font-family: ryan_subname;
  font-weight: normal;
  text-shadow: 0 0 0.1em #000,
               0 0 0.1em #000,
               0 0 0.1em #000,
               0 0 0.2em #000,
               0 0 0.2em #000,
               0 0 0.4em #000;
}

#header #schools {
  display:flex;
  flex-direction: row;
  justify-content:center;

  color: #ccc;
  text-align:center;
  font-size:clamp(1em, 1.2vw, 1.5em);
  font-weight: bold;
  text-shadow: 2px 0 0.1em #000,
               -2px 0 0.1em #000,
               0 2px 0.1em #000,
               0 -2px 0.1em #000;
  margin-top:1em;
}

#header #schools div:before {
  background-color: #000;
  position:absolute;
  left:0;
  content:"";
  width:100%;
  height:100%;
  z-index: -1;
  filter: blur(40px);
  /*backdrop-filter: brightness(50%) blur(10px);
  border-radius: 20px;*/
}

#header #schools .school {
  font-size:clamp(0.75em, 0.5vw, 1.25em);
}

#header #schools #dot {
  align-self: center;
  margin-left:0.5em;
  margin-right:0.5em;
  font-size:clamp(1em, 1.2vw, 1.5em);
}

#header .subnameline {
  width: calc(clamp(1.5em, 2.5em, 6vw) * 8); /* subname font size * width in characters */
  height:0.2em;
  background-color: #eee;
  background-color: var(--trump-accent);
  margin:auto;
  margin-bottom: 0.4em;
  margin-top: 0.7em;
}

@media only screen and (min-width: 1000px) {
  #header .subnameline {
    width: calc(clamp(1.5em, 2.5em, 6vw) * 14); /* subname font size * width in characters */
  }
}

/* ==== End header styling ==== */

/* ==== Content styling ==== */


#content-wrap {
  padding-left: 2vw;

  background: #222;
  background: linear-gradient(45deg, #222 00%, #000 100%);
}

#content {
  position: relative;

  width:100%;
  color: #aaa;

  /* Hide a 1px line that chrome on android produces with borders */
  margin-top:-1px;

  padding-top:clamp(1em,0.75vh,2.5em);
  padding-bottom:4em;

  display:flex;
  flex-wrap: wrap;
  margin-left:-2vw;
  row-gap: 3em;
}

#content #sil {
  position: absolute;
  top: 0;
  background-image: url("img/ryan_sil_2.svg");
  background-size: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: -0.8vw 0px;
  width:100%;
  height: 100%;
  z-index: 90;
  opacity: 0.35;
  filter: blur(0.5em);
}

#content p {
  /*padding-left: clamp(1.5em, 2vw, 3em);
  padding-right: clamp(1.5em, 2vw, 3em);*/
  margin-top: clamp(0.5em,2vh,2.5em);
  margin-bottom: 1.5em;

  /*text-indent: calc(clamp(1.2em, 3vw, 2em)*1.5);*/
}

#content .content-block p {
  margin-bottom:0;
}

#content #bio {
  background: none !important;
  /*display:block;*/
  /*color: var(--trump-accent-lowsat);*/
  /*max-width: 55em;*/
  /*font-size: clamp(1.4em, 1.75vw, 2em);
  font-style: italic;
  font-family: "Helvetica";*/
  padding:1.5vw;
  padding-top:0;

  /*flex-basis:30em;
  flex-shrink: 1;
  flex-grow: 1;
  flex-direction: row;*/

  /*margin-left: auto;
  margin-right: auto;*/

  /*margin-top: calc(3vw - 1.5em);*/
}

/* Ryan's 'Jazz On-Air' video embed */
#vimvid {
 margin: 0;
 margin-top: 3vw;
 margin-right: 3vw;
 flex-basis:50em;
 flex-shrink: 1;
 flex-grow: 1;
}

/* Content block */
#content .content-block {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;

  min-height: 100%;

  background-color:rgba(25,20,10,0.5);

  flex-basis: 25em;
  flex-shrink: 1;
  flex-grow: 1;

  margin-left: 2vw;
  /*margin:3vw;
  margin-left:clamp(0.5em,auto, 5em);
  margin-right:clamp(0.5em,auto, 5em);*/

  font-weight:normal;
  font-family: "Helvetica";
  font-size: clamp(1.2em, 1.3vw, 1.7em);
  padding: 3vw;

  padding-top: 0;
  padding-bottom: 3em;

  border-radius: 20px;

  container-name: content-block;
  container-type: inline-size;
}

@container content-block (width > 100px) {.school-subtitle { font-size: clamp(0.70em,4px, 1em); }}
@container content-block (width > 150px) {.school-subtitle { font-size: clamp(0.70em,6px, 1em); }}
@container content-block (width > 200px) {.school-subtitle { font-size: clamp(0.70em,8px, 1em); }}
@container content-block (width > 300px) {.school-subtitle { font-size: clamp(0.70em,12px,1em); }}
@container content-block (width > 350px) {.school-subtitle { font-size: clamp(0.70em,14px,1em); }}
@container content-block (width > 400px) {.school-subtitle { font-size: clamp(0.70em,16px,1em); }}
@container content-block (width > 450px) {.school-subtitle { font-size: clamp(0.70em,18px,1em); }}
@container content-block (width > 500px) {.school-subtitle { font-size: clamp(0.70em,20px,1em); }}
@container content-block (width > 550px) {.school-subtitle { font-size: clamp(0.70em,22px,1em); }}
@container content-block (width > 600px) {.school-subtitle { font-size: clamp(0.70em,24px,1em); }}
@container content-block (width > 650px) {.school-subtitle { font-size: clamp(0.70em,26px,1em); }}
@container content-block (width > 700px) {.school-subtitle { font-size: clamp(0.70em,28px,1em); }}
@container content-block (width > 750px) {.school-subtitle { font-size: clamp(0.70em,30px,1em); }}
@container content-block (width > 800px) {.school-subtitle { font-size: clamp(0.70em,32px,1em); }}
@container content-block (width > 850px) {.school-subtitle { font-size: clamp(0.70em,34px,1em); }}
@container content-block (width > 900px) {.school-subtitle { font-size: clamp(0.70em,36px,1em); }}
@container content-block (width > 950px) {.school-subtitle { font-size: clamp(0.70em,38px,1em); }}

#content .fit-content {
  min-height: auto;
  height: fit-content !important;
}

#content .content-block h1 {
  color: var(--trump-accent);
  padding-top: 1em;
  font-size: 1.8em;
}

#content .content-block h2 {
  color: #ccc;
  /*font-size: 80%;*/
  font-style: italic;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

#content .content-block .bottom {
  position: absolute;
  vertical-align: bottom;
  bottom:0;
  left:0;
  width:100%;
  padding-bottom: 1.5em;
}

.fill {
  flex-grow: 100;
  width:100%;
}

#content .center {
  text-align: center;
}

#content .bold {
  font-weight: bold;
}
/* End content block */

/* Gallery */

@keyframes fadein {
  0% {opacity: 0.0;}
  100% {opacity: 1.0;}
}

@keyframes fadeout {
  0% {opacity: 1.0;}
  100% {opacity: 0.0;}
}

.gallery {
  display:block;
  display:flex;
  flex-wrap: wrap;

  min-width: 10em;
  flex-basis: 150em;
  flex-shrink: 1;
  flex-grow: 1;
  margin-left: 2vw;
 /* margin-top: 3vw;*/
}

.gallery .view {
  position: relative;
  display: block;
  aspect-ratio: 1.3/1;
  object-fit:cover !important; /* workaround for desktop safari to support aspect-ratio */

  width: clamp(10em,100vw, 100vw);
  min-width: 10em;

  flex-basis: 40em;
  flex-shrink: 1;
  flex-grow: 1;
}

.gallery .view input {
  position: absolute;
  top:0;
  left:0;
  opacity: 0.0;

  color: #fff;
  background-color: #fff;
  animation-name: fadeout;
  animation-duration: 1s;
  border:0;

  width:100%;
  aspect-ratio: 1.3/1;
  object-fit:cover !important; /* workaround for desktop safari to support aspect-ratio */
  background-size: cover;
}

.gallery .view input:focus {
  color: #0000;
  background-color: #000;
  animation-name: fadein;
  opacity: 1.0;
  animation-duration: 1s;
  border:0;
  outline: none;
}

.gallery .view #gal0 {background-image: url("img/gallery/1.jpg"); opacity: 1.0 !important;}
.gallery .view #gal1 {background-image: url("img/gallery/1.jpg");}
.gallery .view #gal2 {background-image: url("img/gallery/2.jpg");}
.gallery .view #gal3 {background-image: url("img/gallery/3.jpg");}
.gallery .view #gal4 {background-image: url("img/gallery/4.jpg");}
.gallery .view #gal5 {background-image: url("img/gallery/5.jpg");}
.gallery .view #gal6 {background-image: url("img/gallery/6.jpg");}
.gallery .view #gal7 {background-image: url("img/gallery/7.jpg");}
.gallery .view #gal8 {background-image: url("img/gallery/8.jpg");}
.gallery .view #gal9 {background-image: url("img/gallery/9.jpg");}

.gallery .thumbs {
  display:inline-grid;
  grid-template-columns: 3fr 3fr 3fr;
  grid-row-gap: 0;
  grid-column-gap: 0;
  /*clear:right;*/

  width: clamp(10em,100vw, 100vw);
  min-width: 10em;

  flex-basis: 40em;
  flex-shrink: 1;
  flex-grow: 1;

  line-height:0;
}

.gallery .thumbs label {
  width:100%;
  height:100%;
  object-fit: cover;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gallery .thumbs label img {
  width:100%;
  height:auto;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(90%);
  aspect-ratio: 1.3/1;
  object-fit:cover !important; /* workaround for desktop safari to support aspect-ratio */
}

.gallery .thumbs label img:hover {
  filter: grayscale(0%);
}

/* End gallery */

/* ==== End content styling ==== */

/* ==== Footer ====*/

#footer {
  display:flex;
  flex-wrap: wrap;
  flex-direction:row;
  justify-content:space-between;

  background-color: #111;
  color: #aaa;
  font-size: 1.4em;
  padding: 0.3em;
}

/* ==== End footer ==== */