/* ==========================================
   ULC v2 – Base Styles
   Notes:
   - Relies on CSS custom properties (e.g., --ulc-font-*) defined elsewhere.
   - Organized into semantic sections. Redundant rules merged without changing output.
   - Keep selector names unchanged to avoid breaking existing HTML.
   ========================================== */

/* Base document styling */

/* We don't need because we use Lenis
/*html {
    scroll-behavior: smooth;
}*/

body {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--ulc-font-sm) !important;
    color: var(--ulc-lite);
    background-color: var(--ulc-bg);
}

/* ------------------------------------------
   LAYOUT
   ------------------------------------------ */
.row {
    display: flex;
    flex-wrap: wrap;
    transition: all 0.5s ease-in-out;
}

/* Section spacing offsetting fixed headers */
.section {
    padding-top: calc(3rem + 75px);
}

/* ------------------------------------------
   FILTER BUTTONS
   ------------------------------------------ */
.btn{
    padding-left:12px;
    padding-right:12px;
    border-radius: 100px;
    background-color: #0000;
    color: #afafaf;
    border: 0;
}

.btn.active {
  background-color: white;
  color: black;
  font-weight: 700;
}

.btn:hover {
    background-color: #282828;
    color:white;
}

.btn.active:hover {
  background-color: #e1e1e1;
   color:black;
}

/* ------------------------------------------
   TYPOGRAPHY
   ------------------------------------------ */
/* Shared heading typography */
h2, h3, h4 {
    font-family: "ProtoMono", monospace !important;
    color: #fff !important;
}

.lead {
font-size: var(--ulc-font-md);
}

/* Individual heading sizes */
h3 { font-size: 20px; }
h4 { font-size: 1rem !important; }


a {
  color: var(--ulc-lite);
  text-decoration: underline;
  text-decoration-thickness: 0.1px !important;
  text-underline-offset: 3px;
}

a:hover {
  color: #FFF;
}

/*li {
    margin-left: 0.5rem;
}*/


/* ==========================================
   PROJECT LAYOUT
   ========================================== */

.ulc-project-page {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.ulc-project-title {
  font-weight: 500;
  text-align: center !important;
}

/* Body text defaults for project content and lead text */
.ulc-project-description,
.ulc-project-summary,
.lead {
/*
  text-align: justify;
*/
  text-wrap: pretty;
  hyphens: auto;
  hyphenate-limit-chars: 7;
}

.ulc-project-description
{
scroll-margin-top: 80px;
}

.ulc-project-summary {
  color: #d7d7d7;
  font-size: 0.85rem;
}

.ulc-col-md-6, .ulc-col-3 {
  position: relative;
  width: 100%;
}

.ulc-col-3 {
  flex: 0 0 auto;
  width: 20%;
}


/* ==========================================
   MEDIA QUERIES
   ========================================== */


/* Consolidated small-screen rules */
@media screen and (max-width: 768px) {
  /* Reduce masthead avatar size on small screens */
  .masthead .masthead-avatar { width: 18rem; }
  /* Slightly smaller lead text on small screens */
  .lead { font-size: var(--ulc-font-sm); }
  /* Project summary tweaks on small screens */
  .ulc-project-summary {
    font-size: 0.8rem;
    text-wrap: initial !important;
/*
    text-align: left;
*/
  }
}

.video-container-hd, .video-container-square {
  position: relative;
  width: 100%;
}

.video-container-hd {
  padding-bottom: 56.25%;
}

.video-container-square {
  padding-bottom: 100%;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================
   AWARDS
   ========================================== */
/* Awards strip opacity behavior: 50% normally, 100% on hover with 0.5s transition */

.awards-row{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.awards-logo {
    opacity: 0.8;
    transition: all var(--ulc-hover-highlight-duration) ease-in-out;
}

.awards-logo:hover {
    opacity: 1;
}

@media screen and (min-width: 765px) {

    .awards-row {
       gap: 64px;
    }
    .masthead-icons{
        gap:64px;
        margin-top: 3rem;
    }
    .awards-logo {
        width: 72px !important;
        height: 72px !important;
    }
}

@media screen and (max-width: 765px) {

    .awards-row {
       gap: 20px;
    }
    .masthead-icons{
        gap:24px;
        margin-top: 1.5rem !important;
    }
    .awards-logo {
        width: 42px !important;
        height: 42px !important;
    }
}

@media (min-width: 513px) {
#side-info {
  border-left: 0.1px solid gray;
/*
  padding-left: 12px;
*/
  position:sticky;
  top: 109px;
}
}

#side-info
{
    scroll-margin-top: 80px;
}
/* Create a scroll timeline linked to the page scroll */
@scroll-timeline fade-logo {
  source: auto;
  scroll-offsets: 0%, 300px;
}

/* Animate the logo */
.logo {
  animation: fade-out 1 fade-logo linear both;
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Footer */
footer {
margin-top:4rem;
padding-bottom:4rem;
padding-top:4rem;
border-top: 1px solid #2d2d2d;
text-align:center;
}

/* ==========================================
   SOCIAL FOR TEAM MEMBERS
   ========================================== */
ul.social {
    width: 75%;
    justify-self: center;
}

/* li whose parent is .social */
.social > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bi {
 color: white !important;
 mix-blend-mode: screen;
 opacity: 0.7;
 transition: all var(--ulc-hover-highlight-duration) ease-in-out;
}

.bi:hover {
    opacity: 1;
}


/* ===========
SAFARI VIDEO FIX
============ */

/* Hide the big start/play overlay button on iOS Safari */
#bg-video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* Extra guard rails: ensure no native controls sneak in */
#bg-video::-webkit-media-controls { display: none !important; }
#bg-video::-webkit-media-controls-enclosure { display: none !important; }

/* Optional: avoid a flash of button by hiding until ready */
#bg-video.is-hidden { visibility: hidden; }
#bg-video.is-ready  { visibility: visible; }


/* About page – sticky down arrow fade */
#ulc-about .about-arrow-stick {
  position: sticky;
  bottom: 24px; /* distance from bottom of viewport while stuck */
  display: inline-block;
}

#ulc-about .about-arrow {
  opacity: var(--about-arrow-opacity, 1);
  transition: opacity 220ms ease;
}

/* Track */
::-webkit-scrollbar-track {
    background: #000000;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.award-subcategory-list::marker {
  content: "- ";
}

.bio-link
{
    transition: all 0.5s ease-in-out;
}

.bio-link:hover
{
    color:white;
}