:root{
  font-family:"Gill Sans","Gill Sans MT","Myriad Pro","DejaVu Sans Condensed",Helvetica,Arial,sans-serif
}

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0
}

body{
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  background: #000;
  color:#0c0c0d;;
  padding-top:10vh;
  padding-bottom:4rem;
  /*line-height:1.6;*/
}

/* ===================== NAV ===================== */

nav {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  font-size: 1.3em;
  z-index: 1000;
}

nav a {
  text-decoration: none;
  color: white;
}

nav a:hover {
  color: #FFD700;
}

#main-nav a {
  color: #fff;
}

/* ===================== DROPDOWN ===================== */

.dropdown {
  position: relative; /* anchor first-level dropdown */
}

#rubric-menu {
  display: none;
  position: absolute;   /* MUST stay absolute */
  top: 100%;            /* open downward */
  left: 0;
  background: #000;
  list-style: none;
  font-size: .9rem;
  padding: .5rem 0;
  margin: 0;
  min-width: 180px;
  text-align: center;
  border-radius: 0 0 .5rem .5rem;
  box-shadow: 0 4px 12px #0008;
  z-index: 1500;
}

/* show first-level dropdown */
.dropdown:hover > #rubric-menu,
#rubric-menu:hover {
  display: block;
}


/* ===================== SUBMENUS ===================== */

.submenu-parent {
  position: relative; /* anchor submenu */
}

.submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;         /* open to the right */
  background: #000;
  border-radius: 0 .5rem .5rem 0;
  box-shadow: 0 4px 12px #0008;
  padding: .3rem 0;
  min-width: 180px;
  list-style: none;
  z-index: 2000;
}

.submenu-parent:hover > .submenu,
.submenu:hover {
  display: block;
}

.submenu li a {
  color:#fff;
  font-size:.9rem;
}

.submenu li a:hover {
  color:#FFD700;
}

/* list items must render */
#rubric-menu li,
.submenu li {
  display: block;
  padding: .2rem 1rem;
}


/* ===================== PORTFOLIO GRID ===================== */

#portfolio-head{
  font-size:1.8rem;
  font-weight:normal;
  text-align:center;
  margin:2rem 0 1rem;
  color:#f5f5f5
}

#grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.5rem;
  width:min(90rem,95%);
  margin-inline:auto
}

.thumb{
  position:relative;
  overflow:hidden;
  border-radius:1.2rem;
  cursor:zoom-in;
  box-shadow:0 4px 18px #0008;
  transition:transform .3s;
  background:#000
}

.thumb img,
.thumb video{
  width:100%;
  height:14rem;
  object-fit:cover;
  display:block;
  transition:transform .3s
}

.thumb video{
  pointer-events:none
}

.thumb figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:.6rem .8rem;
  font-size:.85rem;
  color:#fff;
  background:linear-gradient(#0000 10%, #000c 90%);
  opacity:0;
  transition:opacity .25s ease
}

.thumb:hover figcaption{
  opacity:1
}

@media(max-width:834px){
  .thumb figcaption{
    opacity:1;
    font-size:.60rem
  }
}

.thumb:hover img,
.thumb:hover video{
  transform:scale(1.05)
}

.thumb:hover{
  transform:translateY(-4px)
}

/* ===================== LIGHTBOX ===================== */

dialog{
  border:none;
  padding:0;
  background:#0000;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:10vh
}

dialog::backdrop{
  background:#000c;
  backdrop-filter:blur(4px)
}

.light-img,
.light-vid{
  max-width:90vw;
  max-height:80vh;
  border-radius:1.2rem;
  box-shadow:0 6px 24px #000
}

.light-img[hidden],
.light-vid[hidden]{
  display:none
}

.ctrl,
.close-btn{
  position:fixed;
  background:none;
  border:none;
  color:#f5f5f5;
  font-size:2rem;
  padding:1rem;
  cursor:pointer;
  opacity:.85
}

.ctrl:hover,
.close-btn:hover{
  opacity:1
}

.ctrl.left{
  left:1.2rem;
  top:50%;
  transform:translateY(-50%)
}

.ctrl.right{
  right:1.2rem;
  top:50%;
  transform:translateY(-50%)
}

.close-btn{
  top:1.2rem;
  right:1.2rem
}

dialog:not([open]) .ctrl,
dialog:not([open]) .close-btn,
dialog:not([open]) .light-img,
dialog:not([open]) .light-vid{
  display:none
}

/* ===================== FOOTER ===================== */

footer{
  width:100%;
  height:15vh;
  background:#000;
  display:flex;
  justify-content:center;
  align-items:center
}

/* ===================== RESPONSIVE ===================== */

@media(max-width:600px){
  #grid{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:1rem
  }
  .thumb img,
  .thumb video{
    height:11rem
  }
}

/* ===================== FINAL MENU COLOR AUTHORITY ===================== */

#main-nav a {
  color: #fff;
  transition: color .2s ease-in-out;
}

#main-nav a:hover {
  color: #FFD700;
}

#rubric-menu a,
.submenu a {
  font-weight: 500;
}