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

@font-face {
  font-family:"Bold";   
  src: url("Bold.woff")  format("woff"),
       url("Bold.woff2")  format("woff2");
  font-weight: normal;
  font-style: normal;
  }
@font-face {
      font-family: "Heavy";   
      src: url("Heavy.woff")  format("woff"),
           url("Heavy.woff2")  format("woff2");
      font-weight: normal;
      font-style: bold;
      }
     
h1 {
  font-family: "Heavy";
  color: #000;
  line-height: 1.7;
  font-size:  clamp(0.9rem, 1vw, 1rem);
  text-transform: uppercase;
}

h2 {
  font-family: "Heavy";
  color: #000;
  line-height: 1.7;
  text-transform: uppercase;
  font-size:  clamp(1.5rem, 1.7vw, 1.7rem); 
}

h3 {
  font-family: "Bold";
  color: #000;
  line-height: 2;
  font-size:  clamp(0.8rem, 1vw, 1rem);
}

h4 {
  font-family: "Bold";
  color: #000;
  line-height: 2;
  font-size:  clamp(0.6rem, 7vw, 0.7rem)
}

h5 {
  font-family: "Heavy";
  color: #000;
  line-height: 2;
  font-size:  clamp(0.7rem, 0.8vw, 0.8rem);
}

h6 {
  font-family: "Heavy";
  color: #ffffff;
  line-height: 1.7;
  font-size:  clamp(0.9rem, 1vw, 1rem);
  text-transform: uppercase;
}




html, body {
  width: auto;
  height: auto;
  font-family: "Heavy";
  color: #000;
  background: #fff;
  line-height: 1.7;
  font-size:  clamp(0.9rem, 1vw, 1rem);
  min-height:100vh;
  overflow-y: scroll;
}


:root {
  --G: clamp(0.5rem, 2vw, 1.5rem); /* outer gutter */
  --I: 1rem;                   /* inner indent  */
}

.frame {
  width: 100%;
  margin: 0  auto 0 0;
  padding: 0 var(--G);
}

.terminal {
  /* wipe out any left/right padding here */
  margin-top: 4rem;
  padding: 0 0 4px;            /* only 4px bottom for the underline gap */
  display: flex;
  justify-content: flex-start; /* items flow from the left gutter */
  align-items: baseline;
}

.content {
  /* starts at G + I */
  max-width: 1400px;
  margin-left: calc(var(--G) + var(--I));
}

.content section {
  margin-block: 5rem; /* shorthand for top & bottom */
}

.responsive-video {
  width: 100%;
  height: auto;
  /* Enforces a 16:9 box */
  aspect-ratio: 16 / 9;
  object-fit: contain; /* or cover */
}

.fullwidth-media {
  /* cancel the frame & content padding/margin for this block */
  margin-block: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  display: block;
}
.fullwidth-media video {
  width: 100%;
}
.hover-media {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;        /* for video */
  transition: transform 0.3s ease,
              filter 0.3s ease,
              opacity 0.3s ease;
}

.media-link {
  display: block;
  overflow: hidden;         /* hide the scaled edges */
  position: relative;
  margin-block: 2rem;
}

.media-link:hover .hover-media {
  transform: scale(1.05);   /* slight zoom */
  background: rgba(255, 255, 255, 0.957); /* white at 50% opacity */
  opacity: 0.2;
}


.media-link::after {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  opacity: 0;

  pointer-events: none;     /* let clicks pass through */
}
.media-link:hover::after {
  opacity: 1;
}

.white-bar {
  font-family: "Heavy", Arial, sans-serif;
  font-size:  clamp(0.9rem, 1vw, 1rem);
  line-height: 0.7;
  position: static;
  text-decoration: none;
  top: auto; 
  left: auto;
  right: auto;
  height: 25px;      
  background: #ffffff;
  color: #000000;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  z-index: auto;
  transition: background 0.2s ease, color 0.2s ease;
  overflow: hidden;
}
.white-bar::before {
  content: '';
  position: absolute;
  align-items: center;
  height:40%;
  width: auto;
  left:0;
  right:0;
  background-color: #000000;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.10s ease;
}

.white-bar:hover {
  color: #ffffff; 
}

.white-bar:hover::before {
  opacity: 1;
}

.white-bar span {
  position: relative;
  z-index: 1;
}


.black-bar {
  font-family: "Heavy", Arial, sans-serif;
  font-size:  clamp(0.9rem, 1vw, 1rem);
  line-height: 0.7;
  position: static;
  text-decoration: none;
  top: auto; 
  left: auto;
  right: auto;
  height: 25px;      
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  z-index: auto;
  transition: background 0.2s ease, color 0.2s ease;
  overflow: hidden;
}

.black-bar::before {
  content: '';
  position: absolute;
  align-items: center;
  height:50%;
  width: auto;
  left:0;
  right:0;
  background-color: #fff;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.10s ease;
}

.black-bar:hover {
  color: #000; 
}

.black-bar:hover::before {
  opacity: 1;
}

.black-bar span {
  position: relative;
  z-index: 1;
}

.clip-wrapper {
  margin-block: 20px;
  overflow:visible;
  position: relative;
  height: 100%; /* or set a specific height if needed */
  width: 100%;
  z-index:0;
  left: 0;
  right: 0;
}

.content-holder {
  position: relative;
  will-change: clip-path;
  transition: clip-path 0.8s ease-in-out;
  width: 100%;
  min-height: 300px; 
  background: #ffffff;
  height: auto;
  z-index:1;
  left: 0;
  right: 0;
}
.responsive-image {
  width: 100%;
  height: auto;
  top: 5px solid #ffffff; 
  bottom: 0;
  right: 0;
  left: 0;
  display: block; /* removes whitespace below image */
}

.cv-link {
  color: inherit;         /* use the surrounding text color instead of blue */
  text-decoration: none;  /* remove the underline */
}

/* (Optional) add a subtle hover effect if you still want feedback on hover) */
.cv-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  /* color: #333;  or whatever darker shade you prefer */
}

.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index:1000;
}

.header {
  position: fixed;
  top: 0;
  right: 0 ;
  left: 0 ;
  z-index:1000;

}

/* Works in WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: clamp(0.2rem, 0.8vw, 0.4rem);         /* vertical scrollbar width */
  height: 100vh;              /* horizontal scrollbar height */
}

::-webkit-scrollbar-track {
  background: #ffffff;         /* the track (background) */
}

::-webkit-scrollbar-thumb {
       /* the scroll thumb (the handle) */
  background: #000000; 
}

::-webkit-scrollbar-thumb:hover {
  background: #000000;
}