* {--link: black;
  --link-act: white;
  --brand-color: hsl(280, 45%, 75%);
}

html {scroll-behavior: smooth;}
body {
  font-family: helvetica, sans-serif;
  margin: 0;
  cursor:default;
}

hr {margin-top: 1rem; margin-bottom: 2rem; margin-left: 1rem; margin-right: 1rem; border: none; border-bottom: 2px dotted black}

h1 { /*main superlightness banner*/
 white-space: nowrap;
 overflow: hidden;
 text-overflow: clip;
 margin-top: -0.16em;
 margin-left: -0.12em;
 margin-bottom: -0.5em;
 font-size: clamp(5rem, 9vw, 9rem);
 font-family: helvetica, sans-serif;
 font-weight: 700;
 font-style: italic;
 color: var(--brand-color);
 line-height: 1;
}

h2 { /*used for subtitles*/
  margin-top: 3rem;
  margin-left: 2rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

@font-face {
  font-family: 'helvetica';
  src: url('h.woff2') format('woff2');
  font-weight:400;
  font-display: swap;}
@font-face {
  font-family: 'helvetica';
  src: url('h-bold.woff2') format('woff2');
  font-weight:700;
  font-display: swap;}
@font-face {
  font-family: 'helvetica';
  src: url('h-bold-it.woff2') format('woff2');
  font-weight:700;
  font-style: italic;
  font-display: swap;}
@font-face {
  font-family: 'helvetica';
  src: url('h-it.woff2') format('woff2');
  font-weight:400;
  font-style: italic;
  font-display: swap;}

.navbar {
 display: flex;
 gap: 1em;
 list-style: none;
 font-family: helvetica, sans-serif;
 font-size: clamp(1.6666rem, 3vw, 3rem);
 font-weight: 700;
 color: var(--link);
 margin-left: -2.6rem;
 margin-right: 0rem;
 margin-bottom: -0.5em;
 overflow: hidden;
 white-space: nowrap;
}

.navbar-button {
 display: none;
 font-size: 4rem;
 background: none;
 border: none;
 cursor: ne-resize;
 margin-left: -2.3rem;
 margin-top: -3.5rem;
 padding: 2rem;
 color: var(--link);
}
.navbar a {text-decoration: none}

p {
 font-family: helvetica, sans-serif;
 font-weight: 400;
 font-style: none;
 line-height: 1.5;
 margin: 0;
}

a {color: inherit; text-decoration: none; text-decoration: underline dotted; text-decoration-thickness: 2px;}
a:hover {color: var(--link-act); font-style: italic; cursor: ne-resize}
.active {color: var(--link-act); font-style: italic;}

.pagetitle {
 font-family: helvetica, sans-serif;
 font-size: 4rem;
 font-weight: 700;
 font-style: italic;
 color: var(--brand-color);
 overflow: hidden;
 white-space: nowrap;
}

.titlecaption {
  margin-left: 2rem;
  margin-right: 2rem;
}

/*various image classes*/
.imagefull {
  width: 100%;
  height: clamp(25rem, 40vw, 55rem);
  max-width: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.focal-bottom { object-position: 50% 75%;}
.focal-top { object-position: 50% 40%;}

.bgimage {
 background-image: var(--bg-image);
 position: fixed;
 inset: 0;
 z-index: -1;
 filter: contrast(.2) saturate(0%) brightness(1.8);
 background-size: cover;
 background-position: right top;
}

/*displays a list as a grid used for main content usually,
can add classes (.col-2 etc) to define grid*/
.grid {
  display: grid;
  align-items: start;
  list-style: none;
  padding: 0;
  margin-left: 2rem;
  margin-right: 2rem;
  grid-auto-rows: auto;
}

.col-2 {
  grid-template-columns: clamp(200px, 20vw, 300px) 1fr;
  gap: 1rem;
}

.cell{position: relative;}

.cell img {
  display: block;
  max-width: 100%;
  height: auto;
}
.sticky {position: sticky; top: 1rem;}

/*scrollable carousel gallery*/
.carousel {
 list-style: none;
 display: flex;
 overflow-x: auto;
 overflow-y: hidden;
 height: 35rem;
}

.carousel img {
 height: 100%;
 width: auto;
 display: inline-block;
 object-fit: cover;
 margin-right: -0.3rem;
 flex-shrink: 0;
 margin-bottom: -0.25rem;
 cursor: zoom-in;
}

.caption {font-size: 1rem; line-height: 2rem;}
.indent {margin-left: 2rem; margin-right: clamp(2rem,10vw,40rem);}
.about {
 margin: 2rem;
 margin-top: 10rem;
 max-width: clamp(30rem, 50vw, 50rem)
}

.lightbox {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.75);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 999;
}
.lightbox img {max-width: 95%; max-height: 95%; touch-action: pan-y; cursor: zoom-out}
.lightbox.open {display: flex;}

.lightboxnav {
  position: absolute;
  background: none;
  border: none;
  padding: 2rem;
  font-size: 2rem;
  color: white;
  mix-blend-mode: difference;
  opacity: 0.7;
  cursor: pointer;}
.exit {top: 0; right: 0}
.prev {left: 0}
.next {right: 0}

/*loading fade*/
section {opacity: 1; transition: 1s ease;}
section.loading {opacity: 0;}

/* mobile or narrow window styles */
@media (max-width: 768px) {
h1 {font-size: 4rem; letter-spacing: 0rem; white-space: normal;}
h2 {margin-left: 1rem;}
.grid {margin: 0}
.col-2 {grid-template-columns: 100%; margin: 0.5rem;}
.carousel {height: 20rem;}
.carousel img {max-width: 80vw; object-fit: cover}
.imagefull {max-height: 20rem}
.indent {margin-left: 1rem; margin-right: 1rem;}
.caption {font-size: 0.65rem; line-height: 1em;}
.about {margin: 1rem; margin-top: 4rem}
.navbar-button {display: flex;}
.navbar {
 flex-direction: column;
 gap: 0;
 list-style: none;
 font-family: helvetica, sans-serif;
 font-size: 2rem;
 font-weight: 700;
 color: black;
 margin-left: -2.6rem;
 margin-top: -3rem;
 margin-bottom: -3rem;
 max-height: 0rem;
 overflow: hidden;
 transition: max-height 0.3s ease;
}
nav.open .navbar {max-height: 9.5rem;}
.pagetitle {
 white-space: wrap;
 overflow: hidden;
 font-size: 3rem;
 margin-left: 1rem;
}
.titlecaption {margin: 1rem;}

}