:root {
        --bs-primary: #ebac2d;
        --bs-primary-rgb: 235, 172, 45;
        --bs-nav-link-font-size: 18px;

        
        --bs-link-color: #ebac2d;
        --bs-link-color-rgb: 235, 172, 45;
        --bs-link-hover-color: #d19220;
        --bs-link-hover-color-rgb: 209, 146, 32;


        --bs-secondary: #888888;
        --bs-secondary-rgb: 136, 136, 136;
        --bs-nav-link-font-size: 18px;

        --bs-danger: #fe3d50;
        --bs-danger-rgb: 254, 61, 80;
      }

/* =========================================================
   BASE / RESET
========================================================= */

/* html { height: 100%; } */

body {
  margin: 0;
  padding: 0;
  min-height: 100%;

  font-family: "effra-cc-variable", sans-serif;
  color: #FFFFFF;

  background: #212121;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1 {
  font-variation-settings: 'wght' 300;
}

h2 {
  color: #989898;
  font-variation-settings: 'wght' 200;
}

h3 {
  color: #929292;
  font-variation-settings: 'wght' 100;
}

p {
  color: #DADADA;
  font-size: 18px;
  font-variation-settings: 'wght' 200;
}

.lead {
  max-width: 620px;
  margin: 0 auto 50px;
  font-variation-settings: 'wght' 200;
}

blockquote p  { position: relative;

  &:before,
  &:after   { position: absolute; margin-top: .5em; opacity: .25; font-weight: 700; }

  &:before  { content: "\201C";/* font-size: 2em; line-height: .5em; vertical-align: bottom; */ transform: translateX(-150%) scale(2); }
  &:after   { content: "\201D"; transform: translateX(50%) scale(2); }

}

.text-shadow  { text-shadow: rgba(0,0,0,.25) 0 1px 5px; }

/* =========================================================
   LAYOUT / UTILITIES
========================================================= */

.container {
  max-width: 972px;
}

.stickable {
  top: -1px;
}

/* =========================================================
   HEADER
========================================================= */

header { display: flex; align-items: center; position: relative; z-index: 2; font-variation-settings: 'wght' 800; box-shadow: rgba(10,10,10,.25) 0 1px 3px; transition: transform .2s ease-out; }

body.glightbox-open header { transform: translateY(-50%); }

@media (min-width: 501px) {

/* header state: not stuck */
  header:not(.stuck) {
    height: 70px;
    transition: height .1s ease-out;
  }

  /* header state: stuck */
  header.stuck {
    height: 44px;
    transition: height .3s ease-out;
  }

}

@media (max-width: 500px) {

  header  { height: auto; }

  .navbar-brand { width: 100%; padding-top: 1rem;

    a { padding: 0; }

  }

}

/* dropdown items */
header .dropdown-item { font-variation-settings: 'wght' 400; }

/* container inside header */
header .container { position: relative; z-index: 3; }

/* navbar brand */
header .container .navbar-brand { font-variation-settings: 'wght' 100; transition: flex-grow .1s ease-out;

  /*a { background:
    radial-gradient(circle at top, #FFF, var(--bs-primary)),
    radial-gradient(circle at top, #FFF, var(--bs-primary));
    background-clip: text; color: transparent !important; }*/

}

/* frosted overlay */
.frosted { position: absolute; inset: 0; z-index: 1; width: 100%; height: 200%; background-color: rgba(15,15,15,.5);

  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);

  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0% 50%,
    transparent 50% 100%
  );

  mask-image: linear-gradient(
    to bottom,
    black 0% 50%,
    transparent 50% 100%
  );
}

/* frosted transitions (state-dependent) */
/*header:not(.stuck) .frosted {
  transition: border-radius .2s ease-in,
              margin .2s cubic-bezier(0.100, 1.650, 0.255, 1.005);
}

header.stuck .frosted {
  transition: border-radius .2s ease-in,
              margin .2s ease-out;
}*/

/* svg mask */
.svg-mask {
  position: absolute;
  inset: 0;
  width: 100%;
}

/* =========================================================
   TEXT / INLINE ELEMENTS
========================================================= */

del {
  position: relative;
  border-radius: 2px;

  text-decoration-thickness: .6em;
  font-weight: bold;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

del::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  min-width: 20px;
  height: 1.05em;

  z-index: 1;

  background-color: #FFF;
  border-radius: 2px;

  transform: rotateZ(.75deg) scale(1.1);
}

del:nth-child(2)::before {
  transform: rotateZ(-.5deg) skewX(-6deg);
}

/* =========================================================
   MEDIA / GRID HELPERS
========================================================= */

.row img[class*="col"],
.row a[class*="col"].glightbox {
  margin-top: calc(var(--bs-gutter-x) * .5);
  margin-bottom: calc(var(--bs-gutter-x) * .5);
}

.row a.glightbox img {
  display: block;
  width: 100%;
}

/* =========================================================
   HOME
========================================================= */

@keyframes pod_in  { from { transform: translateY(10%); opacity: 0; } }

body#home {  /*background-blend-mode: hard-light;*/

/* Gradient version */
/*  background-color: rgb(168,102,148);*/
  background:
  /* warm glow, upper left */
  radial-gradient(
    circle at 0% 0%,
    #f07b58 0%,
    rgba(240,123,88,.85) 0%,
    rgba(240,123,88,0) 60%
  ),

  radial-gradient(
    circle at 75% 0,
    rgba(168,102,148) 0%,
    rgba(168,102,148,.85) 0%,
    rgba(168,102,148,0) 60%
  ),

  /* red glow, lower left */
  radial-gradient(
    circle at 0% 100%,
    #b11235 0%,
    rgba(177,18,53,.9) 0%,
    rgba(177,18,53,0) 65%
  ),

  /* magenta center field */
  radial-gradient(
    circle at 40% 35%,
    #c14679 0%,
    rgba(193,70,121,.8) 0%,
    rgba(193,70,121,0) 70%
  ),

  /* base */
  #4a2b63;
  background-attachment: fixed;

/* Image version: */
/*background-color: color(srgb 0.2822 0.1335 0.3654); background-image: url("/images/colors.png"); background-attachment: fixed; background-repeat: no-repeat; background-size: 200% 200%; background-position: bottom right;*/

  header  { display: none; }

  > .container { display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; padding-top: 3rem !important; }

  h1  { font-variation-settings: 'wght' 700; }

  h1 + p  { gap: .33ch;

    span strong  { text-shadow: none; }

  }

  strong  { font-variation-settings: 'wght' 400; }

  .row:has(.card:hover) .card:not(:hover) { background-color: rgba(200,200,200,.1); /*transform: scale(.98);*/

    .card-title { color: hsl(from var(--bs-primary) h 50% l) !important; }

  }

.col-sm-4:nth-child(1) .card  { animation-delay: .2s; }
.col-sm-4:nth-child(2) .card  { animation-delay: .3s; }
.col-sm-4:nth-child(3) .card  { animation-delay: .4s; }

  .card  { /*background: #222 radial-gradient(circle at bottom, #444, #222); background-image: url("/images/colors.png"); background-size: 210% 210%; background-position: bottom right; background-blend-mode: screen; background-attachment: fixed; background-repeat: no-repeat;*/ border: none !important; background: rgba(255,255,255,.15); /*box-shadow: none !important;*/ /*box-shadow: rgba(255,255,255,.075) 0 0 30px inset;*/ animation: pod_in .6s cubic-bezier(.6,.65,.3,1) backwards; transition: background-color .6s ease-out, transform .2s ease-out;

    &:has(.stretched-link:hover) { background-color: rgba(255,255,255,.25); transition: background-color 0s, transform 0s; transform: scale(1.02); }

    .card-title { font-size: 22px; font-variation-settings: 'wght' 600; transition: color .2s ease-out; }

    .stretched-link { height: 0; }

  }

}



/* =========================================================
   GLIGHTBOX
========================================================= */

.glightbox-container  {

  .goverlay { background: rgba(17,17,17,.9); -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px); }

  .gslide-image img, 
  .gslide-media { box-shadow: none; }

  /* TEMPORARY: Hide description in glightbox until I figure out how to make it good */
  .gslide-description { display: none; }

  .gcontainer  {

    .gslide-description,
    .gdesc-inner {
      background: none;
      color: inherit;
      font: inherit;
      line-height: inherit;
  /*    padding: 0;*/
      max-width: none;
    }

    .gslide-title {
      display: none;
    }

    .gslide-description {
      color: inherit;
      font: inherit;
      line-height: inherit;
      /*max-width: none !important;
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      background-image: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.25));*/

  /*    -webkit-backdrop-filter: blur(50px);
      backdrop-filter: blur(50px);
  */

      .gslide-desc  { padding: .5rem 1rem; text-align: center; color: #777; font-family: "effra-cc-variable", sans-serif; }

    }

  }

}

/* =========================================================
   COMMENTED / DISABLED CODE (PRESERVED)
========================================================= */

/*
html { height: 100%; }

header .frosted .svg-mask { width: 972px; }
header .svg-mask rect { rx: 10px; transition: rx 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

header.stuck .svg-mask { width: 100%; }
header.stuck .svg-mask rect { rx: 0; transition: rx 1s ease-out; }

img { transition: transform .4s ease-out; }
img:hover { transition: transform .1s ease-out; transform: scale(1.02); }

header .frosted {
  background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent);
}

body {
  filter: contrast(170%) brightness(100%);
  background:
    radial-gradient(circle at -18% 50%, rgba(168,0,255,1), rgba(8,8,8,0)),
    radial-gradient(circle at 150% -50%, rgba(111,30,30,1), rgba(230,189,0,1)),
    url("data:image/svg+xml,...");
}
*/