/* Inter Regular */
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_24pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  /* Inter Light */
  @font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_24pt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  /* Inter Medium */
  @font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_24pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  /* Inter SemiBold */
  @font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  
  /* Inter Bold */
  @font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_24pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Inter Medium */
  }
  
  




  /*
Theme Name: Portfolio Eli Henriksen Child
Theme URI: https://example.com
Description: Blank child theme for Eli's portfolio
Author: Eli Henriksen
Version: 1.0
Text Domain: portfolio-eli-henriksen-child
*/

/* --- Global reset / box model --- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: #212121;
  color: #ffffff;
  font-family: 'Inter', sans-serif;  line-height: 1.4;
  overflow-y: auto;
}

/* ---------- Fixed background layers ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("https://media.elihenriksen.com/projects/general/grain.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.04;
}

body::before {
  content: "";
  position: fixed;
  inset: -1px;                 /* overscan avoids 1px seam on first composite */
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.175) 0%,
    rgba(0, 0, 0, 0.49) 50%,
    rgba(0, 0, 0, 0.56) 100%
  );
  will-change: opacity;
}

/* Keep site content above fixed bg */
.site, .site-main { position: relative; z-index: 2; }

/* =================== Tokens (timing/ease) =================== */
:root{
  --t-bubble: 220ms;
  --t-intro: 420ms;
  --ease-out: cubic-bezier(.17,.67,.31,1);
  --ease-spring: cubic-bezier(.2,.8,.2,1.2);
}


/* ========================== NAV BAR ========================= */
.nav-wrap {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

/* Nav Bar Container: 4 stacked fills */
.nav-bar {
  position: relative;
  display: inline-flex;
  height: 64px;
  padding: 8px 14px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 22px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  /* Elliptical glow vars */
  --glow-rx: 65%;
  --glow-ry: 70%;
  --glow-cx: 50%;
  --glow-cy: 50%;

  background-image:
    linear-gradient(180deg, rgba(44,44,44,0.36) 0%, rgba(14,14,14,0.117) 100%),
    radial-gradient(
      ellipse var(--glow-rx) var(--glow-ry) at var(--glow-cx) var(--glow-cy),
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(255,255,255,0.02) 65%,
      rgba(255,255,255,0) 98%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(0deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07)),
    linear-gradient(0deg, rgba(20,20,20,0.30), rgba(20,20,20,0.30));
  background-clip: padding-box, padding-box, padding-box, padding-box;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: center bottom, center center, center center, center center;

  transform-origin: center;
}

/* Intro bubble (JS toggles classes below) */
.nav-bar.nav-intro {
  animation: barSpringIn var(--t-intro) var(--ease-spring) both;
}
@keyframes barSpringIn {
  0%   { transform: scale(0.94); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1.00); }
}
html.needs-intro .nav-bar{ transform: scale(0.94); opacity: 0; }
html.intro-run   .nav-bar{ animation: barSpringIn var(--t-intro) var(--ease-spring) both; }

/* Active pill (not a flex item) */
.nav-active-pill {
  position: absolute;
  top: 8px;   /* match .nav-bar padding-top */
  left: 14px; /* match .nav-bar padding-left */
  width: 51px;    /* same as .nav-btn */
  height: 44px;   /* same as .nav-btn */
  border-radius: 15px;
  pointer-events: none;
  z-index: 0;
}

/* ===================== NAV BUTTONS ===================== */
.nav-btn {
  display: flex;
  width: 51px;
  height: 44px;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 15px;
  text-decoration: none;

  position: relative;
  isolation: isolate;          /* create local stacking context */
  line-height: 0;
  transform: translateZ(0);
  will-change: transform;

  --btn-glow-cx: 50%;
  --btn-glow-cy: 50%;
  --btn-glow-rx: 55%;
  --btn-glow-ry: 55%;

  transform-origin: center;
  transition: transform 160ms var(--ease-out), opacity 120ms var(--ease-out);
  outline: 1px solid transparent; /* cleans compositing edges on Safari */
}
.nav-btn:hover,
.nav-btn:focus-visible {
  transform: scale(1.03); /* centered growth only */
  outline: none;
}
.nav-btn:active { transform: scale(0.98); }         /* tactile press */
.nav-btn:not(.is-active) { opacity: 0.4; }          /* inactive dim */

/* Icon stays crisp/white (above the blur layer) */
.nav-btn .icon {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  z-index: 1;                                        /* above ::before blur */
}

/* Fill layer & active blur live on ::before (keeps icon crisp) */
.nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  will-change: transform, opacity;
  transform-origin: center;
  z-index: 0;                                        /* under icon */
  background-clip: padding-box;
}

/* Active fill + blur (moved off the anchor itself) */
.nav-btn.is-active {
  -webkit-backdrop-filter: none;  /* ensure no blur on anchor box */
  backdrop-filter: none;
  opacity: 1;
}
.nav-btn.is-active::before {
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  background-image:
    radial-gradient(
      ellipse var(--btn-glow-rx, 70%) var(--btn-glow-ry, 85%)
      at var(--btn-glow-cx, 50%) var(--btn-glow-cy, 50%),
      rgb(255 255 255 / 0.09) 0%,
      rgb(255 255 255 / 0) 100%
    ),
    linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  box-shadow: none; /* gradient stroke handles ring */
}

/* During swap, the incoming/emerging button must be fully opaque */
.nav-btn.is-emerging { opacity: 1; }

/* ========================= BUTTON STROKE (gated) ========================= */
.stroke-button {
  --stroke-b-width: 1.2px;
  --stroke-b-angle: 135deg; /* TL → BR */
  --b-stop0: rgba(255,255,255,0.30) 0%;
  --b-stop1: rgba(255,255,255,0.00) 33%;
  --b-stop2: rgba(255,255,255,0.00) 66%;
  --b-stop3: rgba(255,255,255,0.20) 100%;
  position: relative;
  isolation: isolate;
}
.stroke-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(var(--stroke-b-angle), var(--b-stop0), var(--b-stop1), var(--b-stop2), var(--b-stop3));
  padding: var(--stroke-b-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0; /* off by default */
}
.nav-btn.is-active.stroke-button::after { opacity: 1; } /* on only when active */

/* ==================== BUBBLE SWAP (OUT + IN) ==================== */
:root { --t-out: 360ms; }

@keyframes fillShrinkFadeOut {
  0%   { transform: scale(1.00); opacity: 1; }
  50%  { transform: scale(0.86); opacity: 0.75; }
  100% { transform: scale(0.56); opacity: 0; }
}
@keyframes iconDimToInactive {
  0%   { opacity: 1; }
  60%  { opacity: 0.55; }
  100% { opacity: 0.4; } /* matches .nav-btn:not(.is-active){opacity:.4} */
}
@keyframes bubblePopIn {
  0%   { transform: scale(0.65); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1.00); opacity: 1; }
}

.nav-btn.bubble-pop::before,
.nav-btn.bubble-pop.stroke-button::after {
  animation: fillShrinkFadeOut var(--t-out) var(--ease-out) both;
  will-change: transform, opacity;
  transform-origin: center;
}
.nav-btn .icon { position: relative; z-index: 2; }
.nav-btn.bubble-pop .icon { animation: iconDimToInactive var(--t-out) var(--ease-out) both; }

.nav-btn::before { z-index: 0; }        /* fill layer */
.stroke-button::after { z-index: 1; }   /* stroke layer */

.nav-btn.is-emerging::before,
.nav-btn.is-emerging.stroke-button::after {
  animation: bubblePopIn var(--t-bubble) var(--ease-spring) both;
}
.nav-btn.is-emerging { opacity: 1; }
.nav-btn.is-emerging::before {
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  background-image:
    radial-gradient(
      ellipse var(--btn-glow-rx, 70%) var(--btn-glow-ry, 85%)
      at var(--btn-glow-cx, 50%) var(--btn-glow-cy, 50%),
      rgb(255 255 255 / 0.09) 0%,
      rgb(255 255 255 / 0) 100%
    ),
    linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  box-shadow: none;
}

/* ======================= CONTAINER STROKE UTILITY ======================= */
.stroke-container {
  --stroke-c-width: 1.2px;
  --stroke-c-angle: 135deg; /* TL → BR */
  --c-stop0: rgba(255,255,255,0.25) 0%;
  --c-stop1: rgba(255,255,255,0.00) 33%;
  --c-stop2: rgba(255,255,255,0.00) 66%;
  --c-stop3: rgba(255,255,255,0.15) 100%;
  position: relative;
  isolation: isolate;
}
.stroke-container::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(var(--stroke-c-angle), var(--c-stop0), var(--c-stop1), var(--c-stop2), var(--c-stop3));
  padding: var(--stroke-c-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 1;
}

/* =========================== SHARED CARD UI =========================== */
/* Title row */
.card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Title text */
.card-title.selected-item{
  margin: 0;
  color: var(--card-text, #B3B4B4);
  font-size: var(--card-title-size, 22px);
  font-weight: var(--card-title-weight, 500);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

/* “Open” button – nav-bar clone (glass fill + diagonal stroke) */
.card-open{
  width: 75px;
  height: 35px;
  border-radius: 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: var(--card-text, #B3B4B4);
  font-size: var(--card-button-size, 14px);
  font-weight: var(--card-title-weight, 500);
  line-height: 1;

  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  --glow-rx: 65%;
  --glow-ry: 70%;
  --glow-cx: 50%;
  --glow-cy: 50%;

  background-image:
    linear-gradient(180deg, rgba(44,44,44,0.36) 0%, rgba(14,14,14,0.117) 100%),
    radial-gradient(
      ellipse var(--glow-rx) var(--glow-ry) at var(--glow-cx) var(--glow-cy),
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(255,255,255,0.02) 65%,
      rgba(255,255,255,0.00) 98%,
      rgba(255,255,255,0.00) 100%
    ),
    linear-gradient(0deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07)),
    linear-gradient(0deg, rgba(20,20,20,0.30), rgba(20,20,20,0.30));
  background-clip: padding-box, padding-box, padding-box, padding-box;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: center bottom, center center, center center, center center;

  transition: transform 140ms cubic-bezier(.17,.67,.31,1), opacity 120ms ease;
  outline: 1px solid transparent;
}
.card-open:hover,
.card-open:focus-visible { transform: scale(1.03); }
.card-open:active { transform: scale(0.98); }

/* Card-open gradient stroke ring */
.card-open::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.00) 33%,
    rgba(255,255,255,0.00) 66%,
    rgba(255,255,255,0.15) 100%
  );
  padding: 1.2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  outline: 1px solid transparent;
}

/* ---------- Image frame with masked gradient stroke ring ---------- */
.img-frame{
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--img-radius, 18px);
  aspect-ratio: 866.67 / 468.74;            /* ~1.849 from Figma */
  width: 100%;
  overflow: visible;                         /* inner handles clipping */
  isolation: isolate;                        /* clean stacking */
}

/* The gradient ring — uses locally scoped CSS vars for angle/stops */
.img-frame.stroke-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    var(--stroke-card-angle, 135deg),
    var(--card-stop0, rgba(255,255,255,0.25) 0%),
    var(--card-stop1, rgba(255,255,255,0.00) 33%),
    var(--card-stop2, rgba(255,255,255,0.00) 66%),
    var(--card-stop3, rgba(255,255,255,0.15) 100%)
  );
  padding: var(--stroke-card-width, 1.2px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 1;
  z-index: 2;                                 /* above the image */
  outline: 1px solid transparent;             /* AA helper */
}

/* Inner clipping wrapper — inset by the ring thickness to avoid AA seams */
.img-inner{
  position: absolute;
  inset: var(--stroke-card-width, 1.2px);
  border-radius: calc(var(--img-radius, 18px) - var(--stroke-card-width, 1.2px));
  overflow: hidden;                           /* hard clip for the photo */
  z-index: 1;                                 /* under the ring */
  background: #141414;                        /* safety backdrop under photo */
}
.img-inner > img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay mode: let the gradient ring sit ON the image edge */
.img-frame.stroke-card.stroke-overlay .img-inner{
  inset: 0;                              /* no inset – photo fills the frame */
  border-radius: inherit;                /* same radius as outer */
}
.img-frame.stroke-card.stroke-overlay::after{
  outline: 1px solid transparent;        /* small AA helper */
  will-change: opacity;
}

/* ============================ HOME CARDS ============================ */
/* Scope card variables here so they don't clash with shorts */
.home-cards{
  --content-max: 1200px;         /* page max width */
  --page-pad-block: 120px;       /* top/bottom page padding */
  --page-gutter: 120px;          /* left/right page gutter */
  --card-gap: 120px;             /* space between cards */
  --card-text: #B3B4B4;
  --card-title-size: 22px;
  --card-title-weight: 500;
  --card-button-size: 14px;

  --img-radius: 18px;

  /* Home page image stroke — vertical (top highlight → fades to 0) */
  --stroke-card-width: 1.2px;
  --stroke-card-angle: 180deg;                     /* top → bottom */
  --card-stop0: rgba(255,255,255,0.25) 0%;
  --card-stop1: rgba(255,255,255,0.00) 45%;
  --card-stop2: rgba(255,255,255,0.00) 100%;
  /* stop3 not used in this vertical style */
  padding: var(--page-pad-block) var(--page-gutter);
}

.cards-stack{
  width: min(var(--content-max, 1200px), 100%);
  margin-inline: auto;
  display: grid;
  gap: var(--card-gap, 120px);
}

.card{
  display: grid;
  gap: 24px; /* space between header row and image */
}




:root{
  /* matches the big-screen gutter you use on .projects */
  --page-gutter-rail: 120px;
  /* you already define --content-max: 1200px elsewhere; leaving a fallback */
  --content-max: 1200px;
}
/* match your .projects breakpoint that switches gutters */
@media (max-width: 960px){
  :root{ --page-gutter-rail: 28px; }
}





/* =========================
   Full-screen reel (shorts)
   ========================= */
:root{
  --content-max: 1200px;

  /* Slide motion */
  --slide-ease: cubic-bezier(.2,.6,.2,.8);
  --slide-fade: 200ms;
  --slide-move: 520ms;

  /* Card typography/colors (keeps your palette) */
  --card-text: #B3B4B4;
  --card-title-size: 24px;
  --card-title-weight: 500;
  --card-button-size: 14px;

  /* Image frame + stroke */
  --img-radius: 18px;
  --stroke-card-width: 1.2px;
  --stroke-card-angle: 135deg; /* diagonal TL → BR */
  --card-stop0: rgba(255,255,255,0.25) 0%;
  --card-stop1: rgba(255,255,255,0.00) 33%;
  --card-stop2: rgba(255,255,255,0.00) 66%;
  --card-stop3: rgba(255,255,255,0.15) 100%;
}

/* Put reel above fixed background layers */
.site, .site-main { position: relative; z-index: 2; }

/* ----- Reel container (scrollable viewport) ----- */
.shorts{
  position: relative;
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

/* Reduced motion = softer behavior */
@media (prefers-reduced-motion: reduce){
  .shorts{ scroll-behavior: auto; scroll-snap-type: y proximity; }
}

/* ----- Each slide fills the viewport ----- */
.shorts-slide{
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  position: relative;
}

/* Card layout inside a slide */
.shorts-slide .card{
  width: min(var(--content-max), 100%);
  display: grid;
  gap: 18px;
  margin-inline: auto;
}



/* Base: under 1000px */
.shorts-slide{
  padding: clamp(60px, 6vh, 100px) clamp(28px, 9vw, 140px);
}

/* Desktop: 1000px and up (only widen the sides) */
@media (min-width: 1000px){
  .shorts-slide{
    padding-inline: clamp(72px, 16vw, 320px);
  }
}



/* Title row (left title, right button) */
.card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Title */
.card-title.selected-item{
  margin: 0;
  color: var(--card-text);
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

/* ===== card-open = nav-bar clone (glass fill + diagonal stroke) ===== */
.card-open{
  width: 75px;
  height: 35px;
  border-radius: 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: var(--card-text, #B3B4B4);
  font-size: var(--card-button-size);
  font-weight: var(--card-title-weight, 500);
  line-height: 1;

  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  /* same 4-layer glass as your .nav-bar */
  --glow-rx: 65%;
  --glow-ry: 70%;
  --glow-cx: 50%;
  --glow-cy: 50%;

  background-image:
    linear-gradient(180deg, rgba(44,44,44,0.36) 0%, rgba(14,14,14,0.117) 100%),
    radial-gradient(
      ellipse var(--glow-rx) var(--glow-ry) at var(--glow-cx) var(--glow-cy),
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(255,255,255,0.02) 65%,
      rgba(255,255,255,0.00) 98%,
      rgba(255,255,255,0.00) 100%
    ),
    linear-gradient(0deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07)),
    linear-gradient(0deg, rgba(20,20,20,0.30), rgba(20,20,20,0.30));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: transform 140ms cubic-bezier(.17,.67,.31,1), opacity 120ms ease;
  outline: 1px solid transparent;
}
.card-open:hover,
.card-open:focus-visible{ transform: scale(1.03); }
.card-open:active{ transform: scale(0.98); }

/* masked gradient stroke (clone of .stroke-container ring) */
.card-open::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.00) 33%,
    rgba(255,255,255,0.00) 66%,
    rgba(255,255,255,0.15) 100%
  );
  padding: 1.2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  outline: 1px solid transparent;
}

/* ---------- NAV-STYLE image frame with stroke overlay ---------- */
.img-frame{
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--img-radius);
  aspect-ratio: 866.67 / 468.74;
  width: 100%;
  overflow: visible;
  isolation: isolate;
}

/* Gradient ring (top bright → middle zero), lays OVER the photo */
.img-frame.stroke-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(
    var(--stroke-card-angle),
    var(--card-stop0),
    var(--card-stop1),
    var(--card-stop2),
    var(--card-stop3)
  );
  padding: var(--stroke-card-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  z-index: 2;
  outline: 1px solid transparent;
}

/* Inner clipping wrapper (so the image doesn't sit under the ring edge) */
.img-inner{
  position:absolute;
  inset: var(--stroke-card-width);
  border-radius: calc(var(--img-radius) - var(--stroke-card-width));
  overflow:hidden;
  z-index:1;
  background:#141414;
}
.img-frame.stroke-card.stroke-overlay .img-inner{
  inset: 0;                 /* overlay mode: ring sits directly on image edge */
  border-radius: inherit;
}
.img-inner > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}

/* ---------- Slide fade choreography ---------- */
.shorts-slide .card-head,
.shorts-slide .img-frame{
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition:
    opacity var(--slide-fade) var(--slide-ease),
    transform var(--slide-move) var(--slide-ease);
  will-change: opacity, transform;
}
.shorts-slide.is-active .card-head,
.shorts-slide.is-active .img-frame{
  opacity: 1;
  transform: none;
}
.shorts-slide.is-leaving .card-head,
.shorts-slide.is-leaving .img-frame{
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transition-duration: 360ms;
}



/* ============ Custom Scrollbars (Chromium/Safari + Firefox) ============ */
:root{
  /* Tweak these to taste */
  --sb-size: 12px;                 /* thickness on desktop */
  --sb-radius: 10px;               /* thumb rounding */
  --sb-thumb: rgba(255,255,255,0.16);
  --sb-thumb-hover: rgba(255,255,255,0.24);
  --sb-thumb-active: rgba(255,255,255,0.32);
  --sb-stroke-inner: rgba(0,0,0,0.25);   /* inner dark ring (glass feel) */
  --sb-stroke-outer: rgba(255,255,255,0.08); /* subtle outer highlight */
}

/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar{
  width: var(--sb-size);
  height: var(--sb-size);
}
*::-webkit-scrollbar-track{
  /* Transparent so your page gradient/grain shows */
  background: transparent;
}
*::-webkit-scrollbar-thumb{
  border-radius: var(--sb-radius);
  /* Thumb fill uses your same dark-on-dark vibe */
  background:
    linear-gradient(180deg, rgba(44,44,44,0.36) 0%, rgba(14,14,14,0.117) 100%),
    linear-gradient(0deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07));
  /* “Stroke” illusion for crisp edges on dark backgrounds */
  box-shadow:
    inset 0 0 0 1px var(--sb-stroke-inner),
    0 0 0 1px var(--sb-stroke-outer);
}
*::-webkit-scrollbar-thumb:hover{  background-color: var(--sb-thumb-hover); }
*::-webkit-scrollbar-thumb:active{ background-color: var(--sb-thumb-active); }
*::-webkit-scrollbar-corner{ background: transparent; }

/* Firefox */
html{
  /* thin | auto also works; thin looks closest to overlay bars */
  scrollbar-width: thin;
  /* thumb color | track color (transparent to let bg show) */
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
/* If you want .shorts to always use the thin style in Firefox too: */
.shorts{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}

/* Optional: slightly larger thumb when user is actively hovering on desktops */
@media (hover:hover){
  *::-webkit-scrollbar-thumb{ transition: background-color 160ms cubic-bezier(.17,.67,.31,1); }
}








.shorts{
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;   /* safety net */
}
.shorts-slide{
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}






/* --- Card-open overlay behavior (fade-in only, no slide) --- */
.img-frame { position: relative; }  /* already present */

.img-frame .card-open{
  position: absolute;
  right: var(--open-offset, 14px);
  bottom: var(--open-offset, 14px);
  z-index: 3;                 /* above the ring (::after is z-index:2) */

  /* fade-only reveal */
  opacity: 0;
  transform: none;            /* <— no translateY */
  pointer-events: none;

  transition:
    opacity 180ms var(--ease-out, cubic-bezier(.17,.67,.31,1)),
    transform 140ms var(--ease-out, cubic-bezier(.17,.67,.31,1)); /* for hover scale */
  will-change: opacity, transform;
}

/* Reveal on hover/focus without moving */
.img-frame:hover .card-open,
.img-frame:focus-within .card-open,
.card-open:focus-visible{
  opacity: 1;
  pointer-events: auto;
}

/* Keep the same hover/press growth as before */
.card-open:hover,
.card-open:focus-visible { transform: scale(1.03); outline: none; }
.card-open:active        { transform: scale(0.98); }

/* Touch fallback: always visible (no hover on coarse pointers) */
@media (hover: none) and (pointer: coarse){
  .img-frame .card-open{
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Optional: corner + offset (unchanged) */
.img-frame .card-open{ border-radius: 12px; }


/* Hide .card-open on mobile */
@media (max-width: 768px){
  .card-open{
    display: none !important;
  }
}








/* Clickable overlay link covering the whole image area */
.img-frame .img-link{
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  z-index: 1;              /* above .img-inner, below the ring (::after) */
  pointer-events: auto;
  text-indent: -9999px;    /* hide text if you include any */
}
.img-frame .img-link:focus-visible{
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 4px;
}

/* Make the title look/act like a link but keep your styling */
.card-title a{
  color: inherit;
  text-decoration: none;

}
.card-title a:focus-visible{
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 3px;
}































/* ========================
   Project Page Styling
   ======================== */
.project-page{
  /* Match homepage layout tokens */
  --content-max: 1200px;
  --page-pad-block: 120px;  /* top/bottom page padding */
  --page-gutter: 120px;     /* left/right page gutter */
  --proj-gap: 80px;         /* spacing between sections */

  /* Image frame tokens (same as home) */
  --img-radius: 18px;
  --stroke-card-width: 1.2px;
  /* Use the same vertical stroke style as home-cards (top highlight → fade) */
  --stroke-card-angle: 180deg;                     
  --card-stop0: rgba(255,255,255,0.25) 0%;
  --card-stop1: rgba(255,255,255,0.00) 45%;
  --card-stop2: rgba(255,255,255,0.00) 100%;

  /* Page padding matches home; content width controlled by .project-wrap */
  padding: var(--page-pad-block) var(--page-gutter);
}

/* Inner width wrapper (matches home: min(content-max)) */
.project-page .project-wrap{
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  display: grid;
  gap: var(--proj-gap);
}

/* ------------------------
   Intro: centered container
   ------------------------ */
.project-page .project-intro{
  /* Center the intro block itself, keep text left-aligned */
  margin-inline: auto;
  width: min(900px, 100%);   /* intro is narrower than the image */
  text-align: left;
}

/* Title: slightly smaller + vertical gradient text */
.project-page .project-title{
  margin: 0 0 20px 0;
  font-weight: 600;
  line-height: 1.08;
  font-size: clamp(36px, 5vw, 56px);

  /* Gradient text: #C3C3C3 (top) → #9E9E9E (bottom) */
  background: linear-gradient(180deg, #C3C3C3 0%, #9E9E9E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */
}

/* Body copy color */
.project-page .project-description{
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: #D7D7D7;
}

/* ------------------------------------------
   proj-frame: duplicate of img-frame (no CTA)
   ------------------------------------------ */
.project-page .proj-frame{
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--img-radius);
  aspect-ratio: 866.67 / 468.74;   /* ~1.849:1 — same as home */
  width: 100%;
  overflow: visible;                /* inner wrapper does clipping */
  isolation: isolate;
}

/* Gradient ring overlay (same variables/feel as home) */
.project-page .proj-frame.stroke-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    var(--stroke-card-angle),
    var(--card-stop0),
    var(--card-stop1),
    var(--card-stop2)
  );
  padding: var(--stroke-card-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  z-index: 2;                             /* above the image */
  outline: 1px solid transparent;         /* AA helper */
}

/* Inner clipping wrapper — avoids AA seam at ring edge */
.project-page .proj-inner{
  position: absolute;
  inset: var(--stroke-card-width);
  border-radius: calc(var(--img-radius) - var(--stroke-card-width));
  overflow: hidden;                       /* hard clip for photo/content */
  z-index: 1;
  background: #141414;                    /* safety under image */
}

/* Overlay mode: ring sits directly on image edge */
.project-page .proj-frame.stroke-card.stroke-overlay .proj-inner{
  inset: 0;
  border-radius: inherit;
}

/* Image inside frame */
.project-page .proj-inner > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Image inside frame (direct img or picture > img) */
.project-page .proj-inner > img,
.project-page .proj-inner > picture,
.project-page .proj-inner > picture > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.project-page .proj-inner > picture{
  pointer-events: none;
}
.project-page .proj-inner > picture > img{
  pointer-events: auto;
}

/* -----------------------
   Optional small-screen tweak
   (keeps intro comfy on mobile)
   ----------------------- */
@media (max-width: 640px){
  .project-page{
    --proj-gap: 56px;
  }
  .project-page .project-title{
    font-size: clamp(30px, 7vw, 44px);
  }
}



html, body {
  scrollbar-gutter: stable both-edges;
}







/* =========================================
   Projects page (normal scroll, no shorts)
   ========================================= */
.projects-page{
  /* Match Home page margins/gutters */
  --content-max: 1200px;
  --page-pad-block: 120px;
  --page-gutter: 120px;

  /* Frame tokens cloned from your home card */
  --img-radius: 30px;
  --stroke-card-width: 1.2px;
  /* Vertical ring: top highlight → fade */
  --stroke-card-angle: 180deg;
  --card-stop0: rgba(255,255,255,0.25) 0%;
  --card-stop1: rgba(255,255,255,0.00) 45%;
  --card-stop2: rgba(255,255,255,0.00) 100%;

  padding: var(--page-pad-block) var(--page-gutter);
}

/* Intro block: center the section, left-align the text inside */
.proj-intro{
  width: min(900px, 100%);
  margin: 0 auto 48px;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Giant title with vertical gradient (C3 → 9E) */
.proj-title{
  font-size: clamp(40px, 6.5vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 14px;

  color: #C3C3C3; /* fallback for very old browsers */
  background: linear-gradient(180deg, #C3C3C3 0%, #9E9E9E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Lede/body text color for readability */
.proj-lede{ color: #D7D7D7; margin: 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; }
.projects-page p{ color: #D7D7D7; }

/* Body content width follows page max (wider than intro) */
.proj-body{ margin-top: 64px; }
.proj-body-inner{
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  padding-inline: clamp(0px, 2vw, 8px);
}

/* =========================
   Projects image/container
   ========================= */
/* Outer frame (duplicate of your img-frame, new class name) */
.proj-frame{
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--img-radius);
  aspect-ratio: 866.67 / 468.74;          /* ~1.849 */
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  overflow: visible;
  isolation: isolate;
}

/* Gradient ring ON TOP of content edge */
.proj-frame.stroke-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    var(--stroke-card-angle),
    var(--card-stop0),
    var(--card-stop1),
    var(--card-stop2)
  );
  padding: var(--stroke-card-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  z-index: 2;
  outline: 1px solid transparent; /* AA helper */
}

/* Inner clipping wrapper (no Open button/link here) */
.proj-inner{
  position: absolute;
  inset: var(--stroke-card-width);
  border-radius: calc(var(--img-radius) - var(--stroke-card-width));
  overflow: hidden;
  z-index: 1;
  background: #141414;
}
.proj-frame.stroke-card.stroke-overlay .proj-inner{
  inset: 0;
  border-radius: inherit;
}

/* Media fills the frame */
.proj-inner > img,
.proj-media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}


/* Media fills the frame (direct img, picture, or picture > img) */
.proj-inner > img,
.proj-inner > picture,
.proj-inner > picture > img,
.proj-media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.proj-inner > picture{
  pointer-events: none;
}
.proj-inner > picture > img{
  pointer-events: auto;
}

/* Section spacing if you add more frames/blocks */
.proj-section{ margin-top: 36px; }

/* Responsive gutters GUTTERS FOR PROJECT PAGE */
@media (max-width: 960px){
  .projects-page{
    --page-gutter: 28px;
    --page-pad-block: clamp(140px, 14vh, 180px);
  }
  .proj-intro{ margin-bottom: 36px; }
}

/* =========================================================
   Nav bar additions: “middle” button width + pop animation
   (These complement your existing nav CSS.)
   ========================================================= */
.nav-bar{
  --btnW: 51px;
  --gap: 4px;
  --padX: 14px;
  --nav-2w: calc((2 * var(--btnW)) + (1 * var(--gap)) + (2 * var(--padX)));
  --nav-3w: calc((3 * var(--btnW)) + (2 * var(--gap)) + (2 * var(--padX)));
  min-width: var(--nav-2w);
  transition: min-width 280ms var(--ease-out, cubic-bezier(.17,.67,.31,1));
}

/* If header’s early script set this, pre-reserve width before paint */
html.nav-prelength-3 .nav-bar{ min-width: var(--nav-3w); }

/* Middle button starts hidden; reveal with a pop when “live” */
.nav-btn-middle{
  display: none;
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 200ms var(--ease-out, cubic-bezier(.17,.67,.31,1)),
              transform 220ms var(--ease-spring, cubic-bezier(.2,.8,.2,1.2));
}
html.nav-middle-live .nav-btn-middle{
  display: flex;
  opacity: 1;
  transform: none;
}









/* =========================
   Projects page scaffolding
   ========================= */
.projects{
  /* Reuse home page spacing so margins/gutters match */
  --content-max: 1000px;
  --page-pad-block: 50px;   /* top/bottom */
  --page-gutter: 0px;      /* left/right */
  --block-gap: 80px;
  --item-gap: 50px;

  padding: var(--page-pad-block) var(--page-gutter);
}

.projects-list{
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  display: grid;
  gap: var(--item-gap);
}

.project{
  display: grid;
  gap: 24px;
}

.project-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.project-name{
  margin: 0;
  color: var(--card-text, #B3B4B4);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.project-name a{
  color: inherit;
  text-decoration: none;
}
.project-name a:focus-visible{
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 3px;
}

/* =========================
   Intro block (centered box,
   left-aligned text inside)
   ========================= */
.projects-intro{
  width: min(720px, 92%);
  margin: 0 auto var(--block-gap);
  text-align: left;                 /* text left */
}
.projects-title{
  margin: 0 0 16px;
  font-size: clamp(44px, 5vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.02em;

  /* vertical gradient: #C3C3C3 → #9E9E9E */
  background: linear-gradient(180deg, #C3C3C3 0%, #9E9E9E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.projects-lede{
  margin: 0;
  color: #D7D7D7;                    /* requested body text color */
  font-size: clamp(17px, 1.8vw, 18px);
  line-height: 1.55;
  max-width: 72ch;                   /* keep lines readable */
}

/* =========================
   Duplicated frame (proj-*)
   Same aspect & stroke as .img-frame
   ========================= */
.proj-frame{
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--img-radius, 18px);
  aspect-ratio: 866.67 / 468.74;           /* same ratio as home cards */
  width: 100%;
  overflow: visible;
  isolation: isolate;
}

/* Gradient ring sits on top (same stroke-card utility you already use) */
.proj-frame.stroke-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    var(--stroke-card-angle, 180deg),
    var(--card-stop0, rgba(255,255,255,0.25) 0%),
    var(--card-stop1, rgba(255,255,255,0.00) 45%),
    var(--card-stop2, rgba(255,255,255,0.00) 100%),
    var(--card-stop3, rgba(255,255,255,0.00) 100%)
  );
  padding: var(--stroke-card-width, 1.2px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 1;
  z-index: 2;
  outline: 1px solid transparent;
}

/* Inner clip to avoid AA seam under the ring (overlay mode uses full bleed) */
.proj-inner{
  position: absolute;
  inset: var(--stroke-card-width, 1.2px);
  border-radius: calc(var(--img-radius, 18px) - var(--stroke-card-width, 1.2px));
  overflow: hidden;
  z-index: 1;
  background: #141414;
}
.proj-inner > img,
.proj-inner > picture,
.proj-inner > picture > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.proj-inner > picture{
  pointer-events: none;
}
.proj-inner > picture > img{
  pointer-events: auto;
}


/* Overlay variant identical to home */
.proj-frame.stroke-card.stroke-overlay .proj-inner{
  inset: 0;
  border-radius: inherit;
}

/* Full-image overlay link (optional; no button) */
.proj-frame .proj-link{
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: 3;
  text-indent: -9999px;
}


/* Video inside the same proj-inner frame (match img behavior) */
.proj-inner > video,
.proj-inner > video.proj-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}





/* -------------------------
   Responsive tweaks (match
   your existing rhythm)
   ------------------------- */

@media (max-width: 640px){
  .projects{ padding: clamp(60px,6vh,100px) clamp(28px,9vw,140px); }
  .projects-title{ font-size: clamp(36px, 9vw, 56px); }
}









/* =====================================
   NAV bar width choreography (clean)
   ===================================== */
.nav-bar{
  --btn-w: 51px; --btn-h: 44px; --btn-gap: 4px; --pad-x: 14px;
  --btn-count: 2;
  width: calc(var(--pad-x)*2 + var(--btn-w)*var(--btn-count) + var(--btn-gap)*(var(--btn-count) - 1));
  transition: width var(--t-out, 360ms) var(--ease-out, cubic-bezier(.17,.67,.31,1));
  overflow: hidden;
}
.nav-bar[data-btn-count="3"]{ --btn-count: 3; }

/* First paint as 3-wide if head snippet flagged it */
html.nav-prelength-3 .nav-bar{
  width: calc(var(--pad-x)*2 + var(--btn-w)*3 + var(--btn-gap)*2) !important;
}

/* Stability during inline width animations */
.nav-bar.nav-resizing{ will-change: width; }
.nav-bar{ min-width: unset !important; }
html.nav-prelength-3 .nav-bar{ min-width: unset !important; }

/* =====================================
   Middle spacer (animated)
   ===================================== */
.nav-slot{
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h, 44px);
  width: 0;                         /* start closed */
  overflow: visible;                 /* allow glass/blur to bleed while opening */
  margin-left:  calc(-0.5 * var(--btn-gap, 4px));  /* cancel extra flex gap (half) */
  margin-right: calc(-0.5 * var(--btn-gap, 4px));
  transition:
    width var(--t-out, 360ms) var(--ease-out, cubic-bezier(.17,.67,.31,1)),
    margin-left var(--t-out, 360ms) var(--ease-out, cubic-bezier(.17,.67,.31,1)),
    margin-right var(--t-out, 360ms) var(--ease-out, cubic-bezier(.17,.67,.31,1));
  flex: 0 0 auto;
  min-width: 0;
  contain: layout;                   /* IMPORTANT: no 'paint' here to avoid clipping */
}

/* Feather the slot edges while animating so no razor seams are visible */
.nav-slot.is-animating{
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  -webkit-mask-mode: luminance;
          mask-mode: luminance;
}


/* While slot is tiny (opening) hold off the button's blur/ring effects */
.nav-slot.effects-hold .nav-btn::before,
.nav-slot.effects-hold .nav-btn.stroke-button::after{
  opacity: 0 !important;
  animation: none !important;
}

/* During close, hide effects + clip icon while width -> 0 */
.nav-slot.is-collapsing{ overflow: hidden; }
.nav-slot.is-collapsing .nav-btn::before,
.nav-slot.is-collapsing .nav-btn.stroke-button::after{
  opacity: 0 !important;
  animation: none !important;
}

/* Avoid any button flash on pages that pre-reserve 3-wide */
html.nav-prelength-3 .nav-slot .nav-btn{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Icon fade/shrink during slot close (3→2 collapse only) */
.nav-btn .icon{ will-change: transform, opacity; }
@keyframes iconFadeOutShrink{
  0%   { opacity: 1;   transform: scale(1);   }
  60%  { opacity: .35; transform: scale(.85); }
  100% { opacity: 0;   transform: scale(.65); }
}
.nav-slot.is-collapsing .nav-btn .icon{
  animation: iconFadeOutShrink var(--t-out, 360ms)
            var(--ease-out, cubic-bezier(.17,.67,.31,1)) both;
}

/* =====================================
   Bubble swap (OUT + IN)
   ===================================== */
:root{ --nav-inactive: .4; } /* single source of truth for dim level */

/* Base: inactive dim (whole button) */
.nav-btn:not(.is-active){ opacity: var(--nav-inactive); }

/* OUTGOING: keep whole button fully lit; only its layers/icons animate */
.nav-btn.bubble-pop{
  transition:
    transform 160ms var(--ease-out, cubic-bezier(.17,.67,.31,1));
  contain: paint; /* isolate compositing a bit more */
}

/* OUTGOING fill + stroke shrink/fade */
@keyframes fillShrinkFadeOut{
  0%   { transform: scale(1.00); opacity: 1; }
  50%  { transform: scale(0.86); opacity: 0.75; }
  100% { transform: scale(0.56); opacity: 0; }
}
.nav-btn.bubble-pop::before,
.nav-btn.bubble-pop.stroke-button::after{
  animation: fillShrinkFadeOut var(--t-out, 360ms) var(--ease-out, cubic-bezier(.17,.67,.31,1)) both;
  will-change: transform, opacity;
  transform-origin: center;
}
.nav-btn.bubble-pop.stroke-button::after{ opacity: 1; } /* keep ring visible while shrinking */

/* OUTGOING icon — animate to inactive (default path) */
@keyframes iconDimToInactive{
  0%   { opacity: 1; }
  60%  { opacity: 0.55; }
  100% { opacity: var(--nav-inactive); }
}
.nav-btn.bubble-pop .icon{
  animation: iconDimToInactive var(--t-out, 360ms) var(--ease-out, cubic-bezier(.17,.67,.31,1)) both;
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* INCOMING Projects button — suppress heavy effects during first frames.
   (Your JS adds/removes .is-activating; keeping this prevents the “re-light”.) */
.nav-btn.is-activating::before,
.nav-btn.is-activating.stroke-button::after{
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  animation: none !important;
}

/* =====================================
   Compatibility with your JS patch
   ===================================== */
/* Your inline JS injects a scoped patch for 2→3:
   .nav-btn.is-active.is-leaving { opacity: .4; transition: opacity 160ms ... }
   .nav-btn.to-projects.bubble-pop .icon { animation:none; opacity:1; }
   .nav-btn.to-projects.bubble-pop::before { backdrop-filter:none; }
   We DO NOT override those here; they’ll win and prevent double-dimming.
*/





















/* Page fade scaffolding */
.preload .fade-section {
  opacity: 0 !important;
  transition: none !important;
}

.fade-section {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  will-change: opacity;
}

.fade-section.is-visible {
  opacity: 1;
}






















/* =========================
   Project pager (fixed top)
   ========================= */
.proj-pager{
  z-index: 9999;                 /* same layer as your nav */
  pointer-events: none;          /* container ignores clicks */
}
.proj-pager .proj-nav-btn{
  pointer-events: auto;          /* the buttons are clickable */
}

/* =========================
   1:1 clone of .card-open
   (duplicated on purpose)
   ========================= */
.proj-nav-btn{
  width: 75px;
  height: 40px;
  border-radius: 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: #FFFFFF;
  font-size: var(--card-button-size, 14px);
  font-weight: 400;
  line-height: 1;

  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);

  /* same 4-layer glass stack */
  --glow-rx: 65%;
  --glow-ry: 70%;
  --glow-cx: 50%;
  --glow-cy: 50%;

  background-image:
    linear-gradient(180deg, rgba(44,44,44,0.36) 0%, rgba(14,14,14,0.117) 100%),
    radial-gradient(
      ellipse var(--glow-rx) var(--glow-ry) at var(--glow-cx) var(--glow-cy),
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(255,255,255,0.02) 65%,
      rgba(255,255,255,0.00) 98%,
      rgba(255,255,255,0.00) 100%
    ),
    linear-gradient(0deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07)),
    linear-gradient(0deg, rgba(20,20,20,0.30), rgba(20,20,20,0.30));
  background-clip: padding-box, padding-box, padding-box, padding-box;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: center bottom, center center, center center, center center;

  transition: transform 140ms cubic-bezier(.17,.67,.31,1), opacity 120ms ease;
  outline: 1px solid transparent;
}
.proj-nav-btn:hover,
.proj-nav-btn:focus-visible{ transform: scale(1.03); outline: none; }
.proj-nav-btn:active{ transform: scale(0.98); }

/* gradient stroke ring (masked) */
.proj-nav-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.00) 33%,
    rgba(255,255,255,0.00) 66%,
    rgba(255,255,255,0.15) 100%
  );
  padding: 1.2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  outline: 1px solid transparent;
}




/* Ensure width animates when .nav-resizing is applied */
.nav-bar.nav-resizing { transition: width 220ms cubic-bezier(.17,.67,.31,1); }

/* Ensure slot width/margins animate */
.nav-slot {
  transition:
    width 220ms cubic-bezier(.17,.67,.31,1),
    margin-left 220ms cubic-bezier(.17,.67,.31,1),
    margin-right 220ms cubic-bezier(.17,.67,.31,1);
}


/* =========================
   Project pager (fixed top)
   — aligned to .projects column
   ========================= */

/* Variables (match your .projects gutters/breakpoints) */
:root{
  --content-max: 1000px;                 /* same as your site */
  --pager-gutter: 120px;                 /* base padding-inline for .projects */
  --pager-edge-gap: 40px;                 /* ← set to 20px to move buttons in */
}
@media (max-width: 1000px){
  :root{ --pager-gutter: clamp(64px, 14vw, 280px); }
}
@media (max-width: 640px){
  :root{ --pager-gutter: clamp(28px, 9vw, 140px); }
}

.proj-pager{
  position: fixed;
  top: max(40px, env(safe-area-inset-top) + 10px);

  /* Same column math as .projects-list / .proj-frame */
  left:  max(var(--pager-gutter), calc((100% - var(--content-max)) / 2));
  right: max(var(--pager-gutter), calc((100% - var(--content-max)) / 2));

  z-index: 9999;         /* same layer as your nav */
  pointer-events: none;  /* container ignores clicks */
  will-change: left, right;
}

/* Buttons: reuse .card-open visuals; only position here */
.proj-pager .proj-nav-btn{
  position: absolute;
  pointer-events: auto;
}
.proj-pager .proj-prev{
  left:  max(var(--pager-edge-gap), env(safe-area-inset-left));
}
.proj-pager .proj-next{
  right: max(var(--pager-edge-gap), env(safe-area-inset-right));
}

/* Small-screen top tweak only */
@media (max-width: 560px){
  .proj-pager{ top: max(20px, env(safe-area-inset-top) + 8px); }
}

/* Fallback for older engines that lack max() on inset properties */
@supports not (left: max(1px, 2px)){
  .proj-pager{
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    inline-size: min(var(--content-max), calc(100% - 2 * var(--pager-gutter)));
  }
  .proj-pager .proj-prev{ left:  var(--pager-edge-gap); }
  .proj-pager .proj-next{ right: var(--pager-edge-gap); }
}


/* Fix clipped bottom on gradient H1 */
.projects-title{
  /* give the glyphs room to breathe */
  line-height: 1.12;                 /* was 1.02 */
  padding-bottom: .3em;             /* tiny safety pad */
  display: inline-block;             /* avoids line-box clipping */
  overflow: visible;                  /* just in case */

  /* Safari/WebKit quirk: expands glyph raster bounds slightly */
  -webkit-text-stroke: .001px transparent;
	    font-size: clamp(36px, 5vw, 42px);  /* was clamp(44px, 6vw, 96px) */
	
}

.projects-title--center {
  text-align: center;
  width: 100%;
}

.projects-appendix-titlewrap {
  margin-top: clamp(72px, 12vw, 180px);   /* space ABOVE Appendix */
  margin-bottom: clamp(72px, 12vw, 180px); /* space BELOW Appendix */
}



/* Inline text blocks that live among images */
.proj-text {
  max-width: 900px;
  margin: 16px auto;
  padding: 0 20px;
}
.proj-text-title{ font-size: clamp(22px, 3vw, 28px); line-height: 1.25; margin: 0 0 12px; }
.proj-text-copy{ font-size: clamp(15px, 1.8vw, 18px); line-height: 1.65; opacity: .9; }

/* Variants (tune as you like) */
.proj-text--callout{ background: rgba(255,255,255,.04); border-radius: 16px; padding: 20px; }
.proj-text--note .proj-text-copy{ opacity: .8; font-style: italic; }



/* =========================
   Projects Body Block
   ========================= */
.projects-body{
  width: min(720px, 92%);
  margin: 0 auto var(--block-gap, 80px);
  text-align: left;
}

.projects-body-title{
  margin: 0 0 16px;
  font-size: clamp(32px, 4vw, 56px);  /* slightly smaller than intro */
  line-height: 1.15;
  letter-spacing: -0.02em;

  color: #D7D7D7;

}

.projects-body-lede{
  margin: 0;
  color: #D7D7D7;
  line-height: 1.6;
  max-width: 70ch;
}

/* Generic inline text blocks */
.proj-text{ max-width: 900px; margin: 24px auto; padding: 0 20px; }
.proj-text-title{ font-size: clamp(22px, 3vw, 28px); line-height: 1.25; margin: 0 0 12px; }
.proj-text-copy{ font-size: clamp(15px, 1.8vw, 18px); line-height: 1.65; opacity: .9; }

/* Variants */
.proj-text--callout{ background: rgba(255,255,255,.04); border-radius: 16px; padding: 20px; }
.proj-text--note .proj-text-copy{ opacity: .8; font-style: italic; }
.proj-text--caption .proj-text-copy{ font-size: .95em; opacity: .75; }

/* Your “projects-body” section */
.projects-body{ max-width: 900px; margin: 32px auto; padding: 0 20px; }
.projects-body-title{ font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; margin: 0 0 10px; }
.projects-body-lede{ font-size: clamp(13px, 1.5vw, 16px); line-height: 1.65; opacity: .9; }

























/* ===== About page — NO hero centering; use top padding to push content down ===== */
.about-page{
  /* layout vars */
  --content-max: 1000px;
  --page-gutter: 120px;            /* left/right padding */
  --about-container: 860px;
  --about-measure: 48ch;           /* readable line length */

  /* spacing strategy: big top pad, normal bottom pad */
  --page-pad-top: clamp(120px, 18vh, 220px);
  --page-pad-bottom: clamp(148px, 8vh, 300px);

  /* apply padding */
  padding: var(--page-pad-top) var(--page-gutter) var(--page-pad-bottom);
}
@media (max-width: 960px){
  .about-page{
    --page-gutter: 32px;
    --page-pad-top: 88px;
    --page-pad-bottom: 72px;
  }
}


/* Intro is now a normal block (no viewport min-height, no grid centering) */
.about-intro{
  width: min(92%, var(--about-measure));
  margin-inline: auto;
  text-align: left;

  /* remove all hero/centering behavior */
  display: block;
  padding: 0;
}

/* Title */
.about-title{
  margin: 0 0 4px;
  font-size: 36px;
  line-height: 1.00;
  letter-spacing: -0.02em;

  font-weight: 500;
}

/* Lede */
.about-lede{
  margin: 0;
  color: #D7D7D7;
  font-size: clamp(18px, 1.7vw, 18px);
  line-height: 1.55;
  font-weight: 400;
  max-width: 48ch;
  color: #A0A0A0;
}

/* Optional: any editor content placed below Experience */
.about-body,
.about-body-inner{
  width: min(92%, var(--about-measure));
  max-width: var(--about-measure);
  margin: clamp(40px, 12vh, 120px) auto 0;
  padding: 0;
}
.about-body p{ color: #D7D7D7; line-height: 1.6; }

/* Large desktops: slightly wider measure */
@media (min-width: 1280px){
  .about-page{ --about-measure: 64ch; }
}

/* ===== About — Experience section ===== */
.about-experience{
  width: min(92%, var(--about-measure));
  max-width: var(--about-measure);
  margin: 0 auto;                /* sits right under intro */
  padding: 0;
}

.experience-label{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  color: #D7D7D7;
  /* text-transform: uppercase; letter-spacing: 0.06em;  // optional */
}

.experience-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.exp-item + .exp-item{
  margin-top: 28px; /* space between items */
}

.exp-head{
  font-size: 22px;
  line-height: 1.35;
  color: #D7D7D7;        /* item line color */
}

.exp-company{ font-weight: 500; }  /* 500 per spec */
.exp-role{ font-weight: 400; }     /* 300 per spec */

/* keep the dot neutral; can inherit */
.exp-sep{ opacity: 0.9; }

/* details line under the item, “quite close” */
.exp-meta{
  margin-top: 6px;       /* tight stack under the item */
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  color: #8D8D8D;
}




/* Bigger top padding just on About */
.is-about .site-main.about-page{
  padding-top: 180px;
}

/* Bigger gap between Intro and Experience */
.is-about .about-intro{
  margin-bottom: clamp(0px, 0vh, 0px);
  margin-block-end: clamp(0px, 0vh, 0px); /* logical prop twin */
}

/* Avoid double-stacking if Experience already has a top margin */
.is-about .about-experience{ margin-top: 0; }




/* Experience heading (style by id and/or class) */
#experience-title,
.experience-label{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  color: #D7D7D7;
}

/* Optional: nicer anchor offset if you link to #experience-title */
#experience-title{ scroll-margin-top: clamp(160px, 22vh, 280px); }


/* Use the same font as body for the Experience section */
:root{
  /* If you already define this elsewhere, keep yours; this is a safe fallback */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Pin the font on the Experience title + lines */
.is-about #experience-title,
.is-about .experience-label,
.is-about .exp-head,
.is-about .exp-meta{
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep your specified weights */
.is-about .exp-company{ font-weight: 500; }
.is-about .exp-role{    font-weight: 400; }

/* If your theme styles h2 strongly, add specificity: */
.is-about h2.experience-label{ font-family: var(--font-sans) !important; }


/* Square “bullet” that scales with text size */
.is-about .exp-sep{
  display:inline-block;
  width:0.25em;
  height:0.25em;
  background: currentColor;     /* inherits #D7D7D7 from .exp-head */
  opacity: .9;
  margin: 0 .55ch;               /* space around the square */
  vertical-align: middle;        /* nicer alignment */
  /* border-radius: 2px;         /* optional slight rounding */
  /* border-radius: 0;           /* hard square */
}





/* Experience title = same styling as .about-title, but smaller */
#experience-title{
  margin: 0 0 24px;
  font-size: clamp(26px, 2.6vw, 32px); /* smaller than about-title */
  line-height: 1.00;
  letter-spacing: -0.02em;
  font-weight: 600;

  /* gradient text like .about-title */
  background: linear-gradient(180deg, #C3C3C3 0%, #9E9E9E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* ensure same family as body/title stack */
  font-family: var(--font-sans) !important;
}

/* Nice anchor offset if you link to #experience-title */
#experience-title{ scroll-margin-top: clamp(160px, 22vh, 280px); }


/* Space between multiple About Experience sections */
.is-about .about-experience + .about-experience{
  margin-top: clamp(56px, 12vh, 160px);   /* main gap between sections */
  padding-top: clamp(16px, 3vh, 32px);    /* optional breathing room inside */
}

/* Optional: subtle divider between repeated sections */
.is-about .about-experience + .about-experience::before{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  margin-bottom: clamp(12px, 2.5vh, 24px);
}




/* Tighter gap between repeated Experience sections */
.is-about .about-experience + .about-experience{
  margin-top: clamp(40px, 12vh, 120px);
  padding-top: 0; /* remove extra breathing room */
}

/* Remove the divider (or keep a very light one—uncomment below) */
.is-about .about-experience + .about-experience::before{
  content: none;
  /* content:""; display:block; height:1px;
     background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
     margin-bottom: clamp(6px, 1.2vh, 12px); */
}











/* About CTA block: same width rhythm as your about content */
.about-cta{
  width: min(92%, var(--about-measure));
  max-width: var(--about-measure);
  margin: clamp(0px, 0vh, 0px) auto 0;  /* comfy space after Experience */
  padding: 0;
}

/* ===== Visual clone of .proj-nav-btn (renamed), but in-flow & auto-width ===== */
.about-resume-btn{
  /* sizing: auto width so "See Resume" fits; same height & radius */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 15px 18px;          /* replaces fixed width */
  min-height: 40px;
  border-radius: 13px;

  /* type/interaction */
  text-decoration: none;
  color: #D7D7D7;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;

  /* glass stack (1:1 with .proj-nav-btn) */
  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);

  --glow-rx: 65%;
  --glow-ry: 70%;
  --glow-cx: 50%;
  --glow-cy: 50%;

  background-image:
    linear-gradient(180deg, rgba(44,44,44,0.36) 0%, rgba(14,14,14,0.117) 100%),
    radial-gradient(
      ellipse var(--glow-rx) var(--glow-ry) at var(--glow-cx) var(--glow-cy),
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(255,255,255,0.02) 65%,
      rgba(255,255,255,0.00) 98%,
      rgba(255,255,255,0.00) 100%
    ),
    linear-gradient(0deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07)),
    linear-gradient(0deg, rgba(20,20,20,0.30), rgba(20,20,20,0.30));
  background-clip: padding-box, padding-box, padding-box, padding-box;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center bottom;

  transition: transform 140ms cubic-bezier(.17,.67,.31,1), opacity 120ms ease;
  outline: 1px solid transparent;
}
.about-resume-btn:hover,
.about-resume-btn:focus-visible{ transform: scale(1.03); outline: none; }
.about-resume-btn:active{ transform: scale(0.98); }

/* gradient stroke ring (masked) — same as .proj-nav-btn::after */
.about-resume-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.00) 33%,
    rgba(255,255,255,0.00) 66%,
    rgba(255,255,255,0.15) 100%
  );
  padding: 1.2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  outline: 1px solid transparent;
}

/* Optional: center the button row (remove if you prefer left-align) */
.about-cta{ display: flex; }
.about-cta .about-resume-btn{ margin-left: 0; }
@media (min-width: 700px){
  /* comment this block out to keep it left-aligned on all sizes */
  .about-cta{ justify-content: flex-start; } /* or center */
}



/* Give breathing room after the "See Resume" button */
.is-about .about-cta{
  margin-top: clamp(10px, 3vh, 30px);
  margin-bottom: clamp(40px, 12vh, 120px);

  /* prevent margin-collapsing with parent */
}

/* Safety net: ensure the page itself always has bottom padding */
.is-about .site-main.about-page{
  padding-bottom: clamp(120px, 16vh, 280px) !important;
}



/* =========================
   Home intro block (new)
   ========================= */
.home-intro{
  text-align: left;
  margin: 0 0 clamp(32px, 4vh, 56px);
}

.home-intro-title{
  margin: 0 0 10px 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.home-intro-bio{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  color: #B3B4B4; /* matches your existing card text tone */
}

.home-intro-muted{
  color: #B3B4B4;
}

.home-intro-meta{
  color: #ffffff;
  margin-left: 6px; /* space after “Incoming @” */
}

.home-intro-logo{
  height: 14px;      /* small logo */
  width: auto;
  margin-left: 6px;
  vertical-align: middle;
  transform: translateY(-1px);
  opacity: 0.95;
}

/* Small screens */
@media (max-width: 960px){
  .home-intro-title{ font-size: 26px; }
  .home-intro-bio{ font-size: 16px; }
}


/* --- FORCE card pill visibility + correct layering --- */

/* Ensure the figure is the positioning context */
.home-tile .home-tileframe,
.home-tile .img-frame{
  position: relative !important;
  overflow: hidden; /* keeps pill inside rounded corners */
}

/* Pill styling + absolute position */
.home-tile .card-pill{
  position: absolute !important;
  left: 14px;
  bottom: 14px;
  z-index: 20 !important; /* ABOVE img-link overlay */
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);

  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.01em;
  pointer-events: none; /* link still works */
}

.home-tile .card-pill__primary{
  color: #fff;
  font-weight: 500;
}

.home-tile .card-pill__secondary{
  color: rgba(255, 255, 255, 0.70);
  font-weight: 500;
}

/* If your overlay link is on top, explicitly put it under the pill */
.home-tile .img-link{
  z-index: 10 !important;
}











/* =========================================
   Home page grid (normal scroll, 2 x 3)
   - Wider max width
   - Stronger side padding on mobile
   - Consistent top spacing across breakpoints
   - Centered header: "Hi, I'm Eli"
   ========================================= */
.home-gridpage{
  /* Make the grid wider on desktop */
  --content-max: 1560px;

  /* Keep your vertical ring style on the images */
  --img-radius: 18px;
  --stroke-card-width: 1.2px;
  --stroke-card-angle: 180deg;
  --card-stop0: rgba(255,255,255,0.25) 0%;
  --card-stop1: rgba(255,255,255,0.00) 45%;
  --card-stop2: rgba(255,255,255,0.00) 100%;
  --card-stop3: rgba(255,255,255,0.00) 100%;

  /* Spacing:
     - Padding does NOT shrink on mobile anymore
     - Side padding has a higher minimum so it never feels tight */
  --pad-block: clamp(140px, 14vh, 180px);
  --pad-inline: clamp(56px, 7vw, 180px);

  /* Grid gaps */
  --grid-gap-x: clamp(20px, 3vw, 56px); /* left/right spacing between cards */
  --grid-gap-y: clamp(28px, 3.5vw, 64px); /* up/down spacing between cards */



  padding: var(--pad-block) var(--pad-inline);
}

/* Wrapper: center, but allow full width up to content-max */
.home-gridwrap{
  width: min(var(--content-max), 100%);
  margin-inline: auto;
}

/* Header: centered text, no subtext */
.home-gridheader{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* Space under the header before the grid */
  margin: 0 auto clamp(56px, 6vh, 96px);
}

/* Title styling: same gradient language, centered */
.home-gridtitle{
  margin: 0;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;

  background: linear-gradient(180deg, #C3C3C3 0%, #9E9E9E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* Prevent any glyph clipping in WebKit */
  display: inline-block;
  padding-bottom: 0.08em;
  -webkit-text-stroke: .001px transparent;
}

/* Grid: 2 columns by default */
.home-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap-x);
  row-gap: var(--grid-gap-y);
}

/* Each tile */
.home-tile{
  display: grid;
  gap: 18px; /* title -> image */
}

/* Title row */
.home-tilehead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* Title links keep your existing .card-title a rules; no changes needed */

/* Single-column breakpoint */
@media (max-width: 960px){
  .home-grid{
    grid-template-columns: 1fr;
  }

  /* Keep spacing consistent when single column:
     Do NOT reduce top padding; only tighten gaps a bit if needed */
  .home-gridpage{
    --grid-gap-y: clamp(40px, 5vw, 72px);
  }
}

/* Optional: extremely small screens — keep strong padding */
@media (max-width: 420px){
  .home-gridpage{
    --pad-inline: 36px; /* still substantial padding on tiny widths */
  }
}




/* =================== Home Intro (above project grid) =================== */

/* wrapper */
.home-gridpage .home-gridwrap .home-intro{
  text-align: left;
}

/* This controls home page title and body text */
.home-gridpage .home-gridwrap .home-intro{
  margin:
    clamp(16px, 3vh, 32px)   /* top */
    0
    clamp(64px, 8vh, 108px); /* bottom */
}

/* title */
.home-gridpage .home-gridwrap .home-intro__name{
  margin: 0 0 9px;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff !important;
}

/* tagline (gray) */
.home-gridpage .home-gridwrap .home-intro__tagline{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.45;
  color: #B3B4B4 !important;
  font-weight: 500;
	
}

/* meta row */
.home-gridpage .home-gridwrap .home-intro__meta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  line-height: 1.45;
	font-weight: 500;
}

/* Incoming @ (gray) */
.home-gridpage .home-gridwrap .home-intro__incoming{
  color: #B3B4B4 !important;
	font-weight: 500;
}

/* Org name (white) */
.home-gridpage .home-gridwrap .home-intro__org{
  color: #fff !important;
	font-weight: 500;
}

/* logo: explicitly sized */
.home-gridpage .home-gridwrap .home-intro__logo{
  height: 14px !important;
  width: auto !important;
  max-height: 14px !important;
  display: inline-block;
  vertical-align: middle;
	  transform: translateY(0px); /* move up */

}


.home-gridpage .home-gridwrap .home-intro__tagline{
  margin: 0 0 2px; /* tighter vertical rhythm */
}




/* Card rounding */
.home-tile .img-frame,
.home-tile .img-inner,
.home-tile .img-inner img{
  border-radius: 14px; /* adjust: 10–16px */
}


.card-open{ display: none !important; }


/* Bottom-left pill */
.home-tile .img-frame{
  position: relative; /* ensures pill positions relative to card */
}

.card-pill{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* lighter + less transparency than typical hover button */
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);

  font-size: 13px; /* keep consistent with your "Open" button size */
  line-height: 1;
  letter-spacing: 0.01em;
  pointer-events: none; /* pill is purely informational */
}

.card-pill__primary{
  color: #ffffff;
  font-weight: 500;
}

.card-pill__secondary{
  color: rgba(255, 255, 255, 0.70);
  font-weight: 500;
}




/* ============================================================
   NAME BAR (Bottom-Center)
   Paste this entire block at the VERY END of style.css
   (It intentionally overrides parts of .proj-nav-btn)
   ============================================================ */

/* Fixed container */
.namebar-wrap{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(32px, env(safe-area-inset-bottom) + 22px); /* moved up */
  z-index: 9999;
  pointer-events: none; /* decorative for now */
}

/* Pill: reuse proj-nav-btn visuals, but allow auto width and slightly larger size */
.namebar.proj-nav-btn{
  width: auto;              /* override .proj-nav-btn { width:75px } */
  height: 48px;
  border-radius: 16px;
  padding-inline: 20px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Keep proj-nav-btn’s glass layers aligned with new radius */
.namebar.proj-nav-btn::before,
.namebar.proj-nav-btn::after{
  border-radius: 16px;
}

/* Text layers */
.namebar-text{
  display: inline-block;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.015em;
  font-weight: 500;

  transition: opacity 360ms cubic-bezier(.17,.67,.31,1),
              transform 360ms cubic-bezier(.17,.67,.31,1);
  will-change: opacity, transform;
}

/* Default name: slightly darker light-gray */
.namebar-text--default{
  color: rgba(255,255,255,0.78);
}

/* Welcome text sits centered over the pill */
.namebar-text--welcome{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;

  /* CHANGED: dimmer base color so glimmer is visible */
  color: rgba(255,255,255,0.66);

  display: inline-block; /* required for ::after overlay sizing */
}

/* ============================================================
   STATE MACHINE
   data-state="default"  -> shows "Eli Henriksen"
   data-state="welcome"  -> shows "Hi, welcome..."
   data-state="out"      -> hides both (used during transitions)
   ============================================================ */

#namebar[data-state="default"] .namebar-text--default{
  opacity: 1;
  transform: translateY(0);
}
#namebar[data-state="default"] .namebar-text--welcome{
  opacity: 0;
}

#namebar[data-state="out"] .namebar-text--default{
  opacity: 0;
  transform: translateY(2px);
}
#namebar[data-state="out"] .namebar-text--welcome{
  opacity: 0;
}

#namebar[data-state="welcome"] .namebar-text--default{
  opacity: 0;
  transform: translateY(2px);
}
#namebar[data-state="welcome"] .namebar-text--welcome{
  opacity: 1;
}

/* Width animation (slower open/close) */
.namebar.namebar-resizing{
  transition:
    width 420ms cubic-bezier(.17,.67,.31,1),
    transform 200ms cubic-bezier(.17,.67,.31,1),
    opacity 200ms ease;
  will-change: width;
}

/* ============================================================
   GLIMMER (Clean + Visible)
   - Base welcome text stays visible (dimmer light gray)
   - Glimmer is a brighter overlay highlight in ::after
   - Runs twice at the same speed
   - Requires welcome span to have data-text="Hi, welcome..."
     (JS below sets this automatically)
   ============================================================ */

.namebar-text--welcome::after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;

  color: transparent;

  /* CHANGED: brighter/wider highlight band */
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 34%,
    rgba(255,255,255,0.55) 44%,
    rgba(255,255,255,1.00) 50%,
    rgba(255,255,255,0.55) 56%,
    rgba(255,255,255,0.00) 66%,
    rgba(255,255,255,0.00) 100%
  );
  background-size: 340% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0;

  -webkit-background-clip: text;
          background-clip: text;

  opacity: 0; /* off unless glimmering */
  pointer-events: none;
}

@keyframes namebarGlimmerOverlay{
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* CHANGED: faster per-pass so total welcome time is slightly less */
.namebar-text--welcome.is-glimmer::after{
  opacity: 1;
  animation: namebarGlimmerOverlay 3.0s linear 2; /* 2 passes */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .namebar-text,
  .namebar.namebar-resizing{
    transition: none !important;
  }
  .namebar-text--welcome.is-glimmer::after{
    animation: none !important;
    opacity: 0 !important;
  }
}


/* Mobile-only: adjust Namebar distance from bottom */
@media (max-width: 640px){
  .namebar-wrap{
    bottom: max(18px, env(safe-area-inset-bottom) + 10px); /* move closer to bottom */
  }
}





/* ============================================================
   Project pager — MOBILE FIX
   - Move prev/next near screen edges
   - Align vertically with the nav bar
   Paste at VERY END of style.css
   ============================================================ */
@media (max-width: 640px){
  /* 30px (nav-wrap top) + (64px nav height - 40px btn height)/2 = 42px */
  .proj-pager{
    top: calc(42px + env(safe-area-inset-top)) !important;

    /* Make pager span full viewport width so buttons can sit near edges */
    left: 0 !important;
    right: 0 !important;

    /* prevent any centering fallback from kicking in */
    transform: none !important;
    inline-size: auto !important;
  }

  /* Near-edge placement + safe-area padding */
  .proj-pager .proj-prev{
    left: max(12px, calc(env(safe-area-inset-left) + 12px)) !important;
  }
  .proj-pager .proj-next{
    right: max(12px, calc(env(safe-area-inset-right) + 12px)) !important;
  }

  /* Fallback for older browsers that don't support max() on left/right */
  @supports not (left: max(1px, 2px)){
    .proj-pager .proj-prev{
      left: calc(12px + env(safe-area-inset-left)) !important;
    }
    .proj-pager .proj-next{
      right: calc(12px + env(safe-area-inset-right)) !important;
    }
  }
}




/* ============================================================
   Projects template — MOBILE layout tuning
   - Push intro down (below fixed nav + pager)
   - Reduce side gutter
   - Tighten spacing between frames (grid gap)
   - Reduce proj-frame corner radius
   ============================================================ */
@media (max-width: 640px){

  /* Main wrapper for your Projects template: <main class="site-main projects ..."> */
  main.site-main.projects{
    /* Push content down so it clears the fixed nav/pager region */
    padding-top: calc(140px + env(safe-area-inset-top)) !important;
  
    /* Reduce gutter (left/right) */
    padding-left: 0px !important;
    padding-right: 0px !important;

    /* Optional: keep comfortable bottom space on mobile */
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;

    /* Tighten vertical rhythm */
    --block-gap: 36px;   /* intro -> list spacing */
    --item-gap: 28px;    /* spacing between items in .projects-list */

    /* Reduce frame rounding for proj-frame on mobile */
    --img-radius: 18px;
  }

  @media (max-width: 768px) {
    main.site-main.projects {
      padding-top: calc(30px + env(safe-area-inset-top)) !important;
    }
  }



  /* Intro spacing (give INTRO its own wider “text gutter”) */
  main.site-main.projects .projects-intro{
    margin-bottom: var(--block-gap) !important;
    width: min(720px, 100%);
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  @media (max-width: 768px) {
    main.site-main.projects .projects-intro {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
  }

  /* This is what controls spacing between your .proj-frame blocks */
  main.site-main.projects .projects-list{
    gap: var(--item-gap) !important;
  }

  /* Safety: enforce the new radius even if another rule wins earlier */
  main.site-main.projects .proj-frame{
    border-radius: var(--img-radius) !important;
  }
  main.site-main.projects .proj-inner{
    border-radius: calc(var(--img-radius) - var(--stroke-card-width, 1.2px)) !important;
  }
}



/* Make the proj-frame stroke ring 50% opacity on mobile */
@media (max-width: 640px){
  main.site-main.projects .proj-frame.stroke-card::after{
    opacity: 0.5 !important;
  }
}
@media (max-width: 640px){
  .img-frame.stroke-card::after{
    opacity: 0.5 !important;
  }
  .project-page .proj-frame.stroke-card::after{
    opacity: 0.5 !important;
  }
}


@media (hover: none) and (max-width: 768px) {
  .nav-bar {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}


@media (max-width: 640px){
  .home-gridpage{
    --pad-inline: 28px;
    --img-radius: 18px;
  }
}

/* ===== NAV WRAP: stable fixed positioning + true viewport centering ===== */
.nav-wrap{
  position: fixed;
  top: 30px;
  left: 10 !important;
  width: 100vw !important;
  display: grid !important;
  place-items: center !important;
  z-index: 9999;
  pointer-events: none; /* wrapper ignores clicks */
}

/* restore clicks on the bar itself */
.nav-wrap .nav-bar{
  pointer-events: auto;
}
@media (max-width: 640px){
  .home-gridpage{
    --card-title-size: 22px; /* adjust */
  }
}

/* About page — reduce top padding on mobile */
@media (max-width: 640px){
  main.site-main.about-page{
    /* lower this number until it feels right */
    padding-top: calc(200px + env(safe-area-inset-top)) !important;
  }
}






/* =========================
   Card Pill (clone of card-open styling)
   ========================= */

/* Ensure frame is positioning context */
.img-frame{ position: relative; }

/* Kill hover Open button entirely */
.img-frame .card-open{ display: none !important; }

/* Pill = same glass/stroke as .card-open */
.img-frame .card-pill{
  position: absolute;
  left: var(--pill-offset, 14px);
  bottom: var(--pill-offset, 14px);
  z-index: 3;                 /* above img-link overlay, above ring */
  pointer-events: none;       /* keep whole card clickable */

  /* pill sizing (matches vibe of card-open, but auto width) */
  height: 35px;
  padding: 0 12px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  text-decoration: none;

  /* typography matches card-open */
  font-size: var(--card-button-size, 14px);
  font-weight: var(--card-title-weight, 500);
  line-height: 1;

  /* same glass mechanics */
  position: absolute;
  isolation: isolate;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  --glow-rx: 65%;
  --glow-ry: 70%;
  --glow-cx: 50%;
  --glow-cy: 50%;

  /* COPY of your card-open background, but LIGHTER (less transparent) */
  background-image:
    linear-gradient(180deg, rgba(44,44,44,0.48) 0%, rgba(14,14,14,0.22) 100%),
    radial-gradient(
      ellipse var(--glow-rx) var(--glow-ry) at var(--glow-cx) var(--glow-cy),
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.08) 35%,
      rgba(255,255,255,0.04) 65%,
      rgba(255,255,255,0.00) 98%,
      rgba(255,255,255,0.00) 100%
    ),
    linear-gradient(0deg, rgba(255,255,255,0.09), rgba(255,255,255,0.09)),
    linear-gradient(0deg, rgba(20,20,20,0.34), rgba(20,20,20,0.34));
  background-clip: padding-box, padding-box, padding-box, padding-box;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: center bottom, center center, center center, center center;

  outline: 1px solid transparent;
}

/* COPY of card-open stroke ring, but slightly stronger */
.img-frame .card-pill::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.00) 33%,
    rgba(255,255,255,0.00) 66%,
    rgba(255,255,255,0.07) 100%
  );
  padding: 1.2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  outline: 1px solid transparent;
}

/* Text colors requested */
.img-frame .card-pill__primary{
  color: #ffffff;
}

.img-frame .card-pill__secondary{
  color: rgba(255,255,255,0.70); /* same gray style you’re using */
}
.img-frame .card-pill{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.img-frame .card-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px; /* spacing between Project and • */
}

.img-frame .card-pill__dot{
  color: rgba(255,255,255,0.70);
}

.img-frame .card-pill__year{
  color: rgba(255,255,255,0.70);
  margin-left: -2px; /* pulls year closer to dot */
}

.img-frame .card-pill{
  height: 38px;        /* slightly bigger */
  padding: 0 16px;     /* more side padding */
  font-size: 15.5px;     /* slightly larger text */
}




/* =========================
   Top background art layer
   - Scrolls with page (NOT fixed)
   - Sits below grain, above base
   ========================= */

/* Base: ensure we can layer absolute backgrounds safely */
body{
  position: relative;
}

/* Layer element: does not affect layout, scrolls away */
.bg-top-art{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;

  /* BETWEEN base layer and grain */
  z-index: 1; /* grain is z=1 in your code, but it's body::after; see note below */

  /* ensure it's behind content */
  /* content is z=3 already */
}

/*
IMPORTANT:
Your grain is body::after with z-index: 1.
A normal element with z-index:1 will typically paint ABOVE body background, but
pseudo-elements participate in stacking too. To guarantee ordering:

- set bg-top-art to z-index:0
- keep grain at z-index:1
*/
.bg-top-art{ z-index: 0; }

/* The image itself: centered, oversized by default, capped on ultra-wide */
.bg-top-art img{
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  max-width: none;

  /*
    Control sizing:
    - Default: wider than viewport (overscan)
    - Responsive: grows with viewport
    - Cap: stops growing at a max px width
  */
  width: min(
    clamp(1400px, 140vw, 2400px), /* overscan + cap */
    2400px
  );

  /* Optional: soften edges and avoid harsh seams */
  /* opacity: 0.9; */
}

/* Optional: if you want it to fade out sooner as you scroll (soft) */
.bg-top-art{
  /* nothing required; leave off unless desired */
}

/* Top background art container: clip any overscan so it cannot create horizontal scroll */
.bg-top-art{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  pointer-events: none;
  z-index: 0;

  /* KEY: prevent the oversized image from widening the document */
  overflow: hidden;

  /* even better: modern clipping without creating a new scroll container */
  /* clip-path is optional; overflow:hidden is usually enough */
  /* clip-path: inset(0); */
}

.bg-top-art img{
  display: block;

  position: relative;
  left: 50%;
  transform: translateX(-50%);

  height: auto;
  max-width: none;

  /* your overscan sizing */
  width: clamp(1400px, 140vw, 2400px);
}

/* FORCE project card rounding (frame + stroke ring + image clip) */
.home-tileframe.img-frame,
.home-tileframe.img-frame::after,
.home-tileframe.img-frame .img-inner{
  border-radius: 24px !important;
}

.home-tileframe.img-frame:not(.stroke-overlay) .img-inner{
  border-radius: calc(18px - var(--stroke-card-width, 1.2px)) !important;
}





/* =========================
   ABOUT — global centered measure
   ========================= */
.is-about .site-main.about-page{
  /* one knob to rule them all */
  --about-measure: 45ch; /* adjust this */
  
  display: flex;
  flex-direction: column;
  align-items: center; /* centers all sections as a column */
}

/* All top-level sections on About share the same width */
.is-about .site-main.about-page > section{
  width: 100%;
  max-width: var(--about-measure);
}

/* If you ever have other direct children (rare), you can broaden this:
.is-about .site-main.about-page > *{
  width: 100%;
  max-width: var(--about-measure);
}
*/


.is-about .about-intro,
.is-about .about-body,
.is-about .about-body-inner,
.is-about .about-experience,
.is-about .about-cta{
  width: 100% !important;
  max-width: var(--about-measure) !important;
  margin-left: auto;
  margin-right: auto;
}

.is-about .about-body{ display:none !important; }

.is-about .about-experience{
  margin-top: clamp(64px, 9vh, 120px);
}




/* Subtle hover "press" on home cards */
.home-gridpage .home-tile .home-tileframe{
  transform: translateZ(0) scale(1);
  transition: transform 400ms cubic-bezier(.17,.67,.31,1);
  will-change: transform;
}

/* Hover (desktop) */
@media (hover: hover) and (pointer: fine){
  .home-gridpage .home-tile:hover .home-tileframe{
    transform: translateZ(0) scale(0.99); /* tweak: 0.99–0.98 */
  }
}

/* Keyboard focus (when tabbing onto the link) */
.home-gridpage .home-tile .img-link:focus-visible ~ .card-pill,
.home-gridpage .home-tile .img-link:focus-visible{
  outline: none;
}
.home-gridpage .home-tile .img-link:focus-visible{
  /* apply the same "press" feel when focused */
}
.home-gridpage .home-tile .img-link:focus-visible{
  /* we can’t scale the link; scale the frame when link is focused */
}
.home-gridpage .home-tile .home-tileframe:has(.img-link:focus-visible){
  transform: translateZ(0) scale(0.99);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .home-gridpage .home-tile .home-tileframe{
    transition: none !important;
  }
}





/* ============================================================
   Card Pill — LIGHT glass tint + low blur (FINAL)
   ============================================================ */

.img-frame .card-pill{
  /* Reduce blur significantly */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);

  /* Much lighter darkening layers */
  background-image:
    /* subtle top → bottom tint */
    linear-gradient(
      180deg,
      rgba(44,44,44,0.18) 0%,
      rgba(44,44,44,0.06) 100%
    ),

    /* very light base dark fill */
    linear-gradient(
      0deg,
      rgba(32,32,32,0.18),
      rgba(32,32,32,0.18)
    ),

    /* existing glass layers (unchanged, but now read lighter due to blur) */
    linear-gradient(180deg, rgba(44,44,44,0.32) 0%, rgba(14,14,14,0.14) 100%),
    radial-gradient(
      ellipse var(--glow-rx) var(--glow-ry) at var(--glow-cx) var(--glow-cy),
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(255,255,255,0.03) 65%,
      rgba(255,255,255,0.00) 98%,
      rgba(255,255,255,0.00) 100%
    ),
    linear-gradient(0deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
    linear-gradient(0deg, rgba(20,20,20,0.22), rgba(20,20,20,0.22));

  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}




main.site-main.projects .projects-list--featured{
  margin-bottom: var(--item-gap);
}



main.site-main.projects .projects-title{
  margin: 0 0 9px;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0em;
  color: #ffffff !important;

  /* Remove gradient styling from older rules */
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
}




.projects-list{
  display: grid;
  gap: var(--item-gap);
}

.nav-btn.is-leaving{
  opacity: 0.4 !important;
  transform: scale(.96);
  transition:
    opacity 160ms cubic-bezier(.17,.67,.31,1),
    transform 180ms cubic-bezier(.17,.67,.31,1);
  will-change: opacity, transform;
}

/* 2→2 click-out animation (current page, before navigation) */
.nav-btn.is-click-out{
  opacity: 0.4 !important;
  transform: scale(.96);
  transition:
    opacity 180ms cubic-bezier(.17,.67,.31,1),
    transform 180ms cubic-bezier(.17,.67,.31,1);
  will-change: opacity, transform;
}

.img-inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}