html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Gilroy Light', sans-serif;
  opacity: 0;
}

/* Hide default cursor */
body {
  cursor: none;
}

/* Custom cursor container */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;          /* tweak size */
  height: 26px;
  pointer-events: none; /* critical */
  z-index: 9999;
  transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0) translate(-50%, -50%) scale(var(--c-scale, 1));
  transition: transform 0.08s ease-out;
}

/* SVG inside cursor */
#custom-cursor img {
  width: 100%;
  height: 100%;
}

.pointer-active {
  --c-scale: 1.15;
}


@media (hover: none) {
  body {
    cursor: auto;
  }
  #custom-cursor {
    display: none;
  }
}

.cursor-hidden {
  opacity: 0;
}

/* Cursor greeting: a pill that trails the custom cursor on first load,
   types two messages in sequence, then collapses shut (see script.js). */
#cursor-greeting {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  max-height: 0;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-family: "Sk-Modernist Bold";
  font-size: 15px;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(var(--gx, -999px), var(--gy, -999px), 0) scale(var(--g-scale, 0.85));
  transform-origin: top left;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              transform 0.12s linear;
}

#cursor-greeting.greeting-open {
  max-height: 60px;
  padding: 14px 20px;
  opacity: 1;
  --g-scale: 1;
}

#cursor-greeting.greeting-closed {
  max-height: 0;
  padding: 0 20px;
  opacity: 0;
  --g-scale: 0.85;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease 0.1s,
              transform 0.12s linear;
}

.cursor-greeting-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: var(--accent-dark);
  vertical-align: -0.15em;
  animation: cursor-greeting-blink 0.9s step-end infinite;
}

@keyframes cursor-greeting-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (hover: none) {
  #cursor-greeting {
    display: none;
  }
}

.screen-fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fade-in {
    opacity: 1;
    transition: opacity 0.5s ease;
}



@font-face {
    font-family: 'Sk-Modernist Regular';
    src: url(/fonts/Sk-Modernist-Regular.woff2) format('woff2'),
         url(/fonts/Sk-Modernist-Regular.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Sk-Modernist Bold';
    src: url(/fonts/Sk-Modernist-Bold.woff2) format('woff2'),
         url(/fonts/Sk-Modernist-Bold.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy Light';
    src: url(/fonts/Gilroy-Light.woff2) format('woff2'),
         url(/fonts/Gilroy-Light.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy SemiBold';
    src: url(/fonts/Gilroy-Bold.woff2) format('woff2'),
         url(/fonts/Gilroy-Bold.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy ExtraBold';
    src: url(/fonts/Gilroy-ExtraBold.woff2) format('woff2'),
         url(/fonts/Gilroy-ExtraBold.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Awesome Serif Bold Regular';
    src: url(/fonts/AwesomeSerif-BoldRegular.woff2) format('woff2'),
         url(/fonts/AwesomeSerif-BoldRegular.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Awesome Serif SemiBd Extra Tall';
    src: url(/fonts/AwesomeSerif-SemBdExtraTall.woff2) format('woff2'),
         url(/fonts/AwesomeSerif-SemBdExtraTall.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Awesome Serif SemiBd Extra Tall Italic';
    src: url(/fonts/AwesomeSerifItalic-SmExraTall.woff2) format('woff2'),
         url(/fonts/AwesomeSerifItalic-SmExraTall.otf) format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Awesome Serif Bd Extra Tall Italic';
    src: url(/fonts/AwesomeSerifItalic-BdExraTall.woff2) format('woff2'),
         url(/fonts/AwesomeSerifItalic-BdExraTall.otf) format('opentype');
    font-display: swap;
}


::selection {
  background: #DFFCA1;
}

:root {
  /* Fixed brand colors - these do NOT change with the theme toggle below.
     Some are used as page text/background (redirected through the
     semantic tokens underneath), but others are intentional fixed accents
     (e.g. .badge-pill's always-dark chip) that must stay put regardless
     of theme, so they're kept separate from the theme-aware tokens. */
  --paper: #FBF9F3;
  --ink: #1a1a1a;
  --muted: #696969;
  --accent-dark: #094020;
  --accent-light: #DFFCA1;
  --surface: rgba(129, 140, 161, 0.1);

  /* Theme-aware tokens - redefined under [data-theme="dark"]. */
  --bg: var(--paper);
  --text: var(--ink);
  --text-muted: var(--muted);
  --dot-color: rgba(9, 64, 32, 0.14);
  --divider-color: rgba(28, 28, 28, 0.15);
  --glass-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0.42) 100%);
  --glass-card-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.18),
    0 0 2px 1px rgba(0, 0, 0, 0.06) inset,
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05);
  --navbar-scrolled-bg: rgba(251, 249, 243, 0.72);
  --media-placeholder-bg: #F2F4F6;
  /* --accent-dark used as *text* reads fine on the light surfaces it
     currently sits on (glass cards, media placeholders), but those same
     surfaces turn dark in dark mode, making dark-green-on-dark-gray text
     nearly invisible. This flips to the brand's light green there instead
     - --accent-dark/--accent-light stay fixed brand colors; this token is
     just "whichever of the two reads on the current surface." */
  --accent-on-surface: var(--accent-dark);
}

[data-theme="dark"] {
  --bg: #17191C;
  --text: #EDEBE4;
  --text-muted: #9A9A96;
  --dot-color: rgba(237, 235, 228, 0.08);
  --divider-color: rgba(255, 255, 255, 0.15);
  --accent-on-surface: var(--accent-light);
  --glass-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.06) 100%);
  --glass-card-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.04),
    0 0 2px 1px rgba(0, 0, 0, 0.3) inset,
    0px 4px 16px rgba(0, 0, 0, 0.25),
    0px 8px 24px rgba(0, 0, 0, 0.3);
  --navbar-scrolled-bg: rgba(23, 25, 28, 0.72);
  --media-placeholder-bg: #26282C;
}

body.paper-grid {
  position: relative;
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Typed so --dot-r can be transitioned (plain custom properties don't animate). */
@property --dot-r {
  syntax: '<length>';
  inherits: false;
  initial-value: 1px;
}

/* Dot grid hover glow: a cursor-following spotlight that brightens
   the dots nearby. Lives on a fixed overlay so it never intercepts
   clicks, and its grid is nudged via --dot-shift-x/y (set in JS)
   to stay pixel-aligned with the scrolling base grid underneath. */
body.paper-grid::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  --dot-r: 1px;
  background-image:
    radial-gradient(var(--accent-on-surface) var(--dot-r), transparent var(--dot-r));
  background-size: 28px 28px;
  background-position: var(--dot-shift-x, 0px) var(--dot-shift-y, 0px);
  -webkit-mask-image: radial-gradient(200px circle at var(--spot-x, -9999px) var(--spot-y, -9999px), rgba(0, 0, 0, 0.9), transparent 70%);
  mask-image: radial-gradient(200px circle at var(--spot-x, -9999px) var(--spot-y, -9999px), rgba(0, 0, 0, 0.9), transparent 70%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.25s ease, --dot-r .5s ease;
}

body.paper-grid.dots-glow-active::before {
  opacity: 1;
  --dot-r: 2px;
}

@font-face {
    font-family: 'Shopping Script Demo';
    src: url(/fonts/Shopping-Script-Demo.woff2) format('woff2'),
         url(/fonts/Shopping-Script-Demo.ttf) format('truetype');
    font-display: swap;
}


.fade-scale {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.175s ease-in-out, transform 0.175s ease-in-out;
}

/* Hidden state when out of viewport */
.fade-scale.hidden {
    opacity: 0;
    transform: scale(0.85); /* Shrink more to make the effect noticeable */
}



.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: transparent;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  box-sizing: border-box;
  /* backdrop-filter is deliberately NOT in this transition - animating
     its blur radius makes Chrome briefly flash the layer blank/white
     while it recompiles the filter each frame (a known compositor bug).
     Letting it snap instantly between states, backed by will-change
     below, is far less visible than that flash. */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  will-change: backdrop-filter;
}

.navbar.scrolled {
  background-color: var(--navbar-scrolled-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(28, 28, 28, 0.06);
}

/* A scroll-driven cheap-blur swap used to run here (see script.js's
   is-scrolling class): drop to blur(4px) mid-scroll, restoring full
   detail on settle. Removed - changing a backdrop-filter's value at
   all, even as an instant (non-transitioned) swap, makes Chrome briefly
   flash the element blank/white while it reallocates the filter's
   texture. The blur now stays constant at 14px regardless of scroll
   state; only the one-time none-to-blur(14px) swap at the 40px .scrolled
   threshold remains. */

.navbar-left,
.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.navbar-left img {
  height: 40px;
  width: auto;
  cursor: pointer;
  transition: ease-in-out 0.175s;
}

/* These icons' circular dark badges are baked into their SVG files, not
   CSS - fine against the light page, but they blend into a dark page
   background with almost no contrast. A subtle ring restores the
   separation without touching the SVG assets themselves. */
[data-theme="dark"] .navbar-left img {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.navbar-left img:hover {
    cursor: pointer;
    transform: scale(1.2);
    transition: ease-in-out 0.175s;
}

/* Matches the circular dark-badge look of the home/linkedin/behance icons
   next to it (those are baked into their own SVG files; this one is a
   real <button>, so the circle is built in CSS instead). Background stays
   var(--ink) - a fixed brand color, not the theme-aware --text - so this
   button looks identical to its sibling icons in both themes. */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--ink);
    cursor: pointer;
    transition: ease-in-out 0.175s;
}

.theme-toggle:hover {
    transform: scale(1.2);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    stroke: var(--paper);
}

.theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* On desktop this wrapper must not participate in the box model at all  - 
   its buttons need to sit directly in .navbar-right's flex row. display:
   contents does exactly that; the mobile media query below turns it back
   into a real flex column for the collapse/expand animation. */
.mobile-nav-links {
    display: contents;
}

/* Bottom-center floating menu trigger: "Menu" label and icon side by
   side, both in normal flow so the pill's auto width - and therefore how
   much it needs to grow when it opens - correctly accounts for the
   icon's space too. .hamburger-icon morphs into an X via .active, same
   as the old top-right icon did. No hover/active feedback here by
   design - that's reserved for the actual nav links below. */
.hamburger {
    display: none;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    z-index: 10;
}

.hamburger-label {
    color: #fff;
    font-family: "Sk-Modernist Bold";
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* Match the icon's tight 12px box instead of the font's natural
       (much taller) line-height, so it centers accurately instead of
       against an inflated, mostly-empty line box. */
    line-height: 1;
}

.hamburger-icon {
    position: relative;
    width: 18px;
    height: 12px;
    flex-shrink: 0;
}

.hamburger-icon span {
    background: #fff;
    height: 2px;
    width: 100%;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.hamburger-icon span:nth-child(1) {
    top: 0;
}
.hamburger-icon span:nth-child(2) {
    top: 10px;
}

.hamburger.active .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg);
    top: 5px;
}
.hamburger.active .hamburger-icon span:nth-child(2) {
    transform: rotate(-45deg);
    top: 5px;
}

/* Mobile Styles */
@media (max-width: 768px) {
    /* .navbar is position:fixed with its own z-index, which makes it a
       stacking context - .navbar-right's z-index only ever competes
       within THAT context, so no value on it could out-rank the gradual
       blur overlay (z-index 600, in script.js) sitting in the page's root
       stacking context. Raising .navbar's own z-index lifts the whole
       context (.navbar-right included) above the blur. */
    .navbar {
        z-index: 1000;
        /* will-change naming a containing-block-inducing property (like
           backdrop-filter) makes the element a containing block for
           position:fixed descendants even when the filter itself isn't
           applied - same hijack as .navbar.scrolled's backdrop-filter
           below, just always-on instead of scroll-gated. Reset it here so
           .navbar-right stays anchored to the viewport on mobile. */
        will-change: auto;
    }

    /* backdrop-filter establishes a new containing block for position:fixed
       descendants - since .navbar-right lives inside <nav>, .navbar
       gaining backdrop-filter on scroll was hijacking its fixed anchor
       from the viewport to the 80px-tall navbar, making the floating menu
       snap up near the top instead of staying pinned to the bottom the
       moment the page scrolled. Disabling it on mobile (where the real
       nav now lives in the bottom card, not the top bar) fixes that. */
    .navbar.scrolled {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .navbar-right {
        display: block;
        flex-direction: column;
        position: fixed;
        top: auto;
        bottom: 24px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: auto;
        /* No min-width here - closed, the pill shrinks to fit the "Menu"
           row's own content. .show below grows it to fit the nav links. */
        min-width: 0;
        max-width: calc(100% - 32px);
        background: #131313;
        border-radius: 28px;
        padding: 0;
        transition: min-width 0.3s ease;
        /* Clips the hamburger row's hover/active background (and the
           links list) to these rounded corners regardless of their own
           box shape. */
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
        opacity: 1;
        pointer-events: auto;
        /* Above the bottom gradual-blur overlay (z-index 600, set in
           script.js) so the menu isn't rendered underneath it. */
        z-index: 1000;
    }

    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    }

    .navbar-right.show {
        min-width: 240px;
    }

    .navbar-right.show .mobile-nav-links {
        max-height: 320px;
        opacity: 1;
        padding: 12px 8px 0;
    }

    .mobile-nav-links a {
        text-decoration: none;
    }

    .mobile-nav-links .navbar-button,
    .mobile-nav-links .navbar-button-contact,
    .mobile-nav-links .resume-button,
    .mobile-nav-links .philosophy-button,
    .mobile-nav-links .life-button {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        color: #fff;
        text-align: center;
        justify-content: center;
        text-transform: uppercase;
        font-size: 15px;
        letter-spacing: 0.5px;
        padding: 14px 16px;
        border-radius: 16px;
    }

    /* :hover as well as :active - touch browsers commonly leave a tapped
       element "stuck" in :hover after release (there's no real mouse-leave
       event on touch). Same white-bg/black-text feedback on all four
       links (Contact included), not just a subtle overlay on some. */
    .mobile-nav-links .navbar-button:active,
    .mobile-nav-links .navbar-button:hover,
    .mobile-nav-links .navbar-button-contact:active,
    .mobile-nav-links .navbar-button-contact:hover,
    .mobile-nav-links .resume-button:active,
    .mobile-nav-links .resume-button:hover,
    .mobile-nav-links .philosophy-button:active,
    .mobile-nav-links .philosophy-button:hover,
    .mobile-nav-links .life-button:active,
    .mobile-nav-links .life-button:hover {
        background: #fff !important;
        color: #000 !important;
    }

    .hamburger {
        display: flex;
        width: auto;
        height: auto;
        padding: 16px 20px;
    }
}


.navbar-button {
  padding: 10.5px 24px;
  border: none;
  border-radius: 30px;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  font-family: "Sk-Modernist Bold";
  line-height: 1.75;
  /* These are <div onclick> pills, not real <button>/<a> elements, so
     without this a click that drifts even slightly turns into a native
     text-selection drag on the label instead of a button press. */
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.175s ease, box-shadow 0.175s ease;
}

.navbar-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(17, 17, 26, 0.12);
}
.navbar-button:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
  transition: transform 100ms ease-out;
}

.navbar-button-contact{
  padding: 10.5px 24px;
  border: none;
  border-radius: 30px;
  color: #DFFCA1;
  cursor: pointer;
  font-size: 16px;
  font-family: "Sk-Modernist Bold";
  line-height: 1.75;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.175s ease, transform 0.175s ease, box-shadow 0.175s ease;
}


.navbar-button-contact:hover{
  background: #DFFCA1 !important;
  color: #094020;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(17, 17, 26, 0.18);
}
.navbar-button-contact:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
  transition: transform 100ms ease-out;
}

/* 
.pills {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.pill {
  display: inline-block;
  padding: 5px 14px;
  margin: 5px;
  border-radius: 999px;
  font-size: 12px;
  color: white;
  font-weight: 500;
  opacity: 0;
  transform: translateY(0) scale(0.8);
  transition: all 0.4s ease;
  white-space: nowrap;
  position: absolute;
}

.pill:nth-child(1) {
  background: #FF6B6B; 
  transform: translate(0, 0);
  transition-delay: 0s;
}
.hover-pills-wrapper:hover .pill:nth-child(1) {
  transform: translate(-80px, -40px) scale(1);
  opacity: 1;
}

.pill:nth-child(2) {
  background: #6BCB77;
  transform: translate(0, 0);
  transition-delay: 0.05s;
}
.hover-pills-wrapper:hover .pill:nth-child(2) {
  transform: translate(0px, -60px) scale(1);
  opacity: 1;
}

.pill:nth-child(3) {
  background: #4D96FF;
  transform: translate(0, 0);
  transition-delay: 0.1s;
}
.hover-pills-wrapper:hover .pill:nth-child(3) {
  transform: translate(80px, -40px) scale(1);
  opacity: 1;
}

.pill:nth-child(4) {
  background: #FFC75F;
  transform: translate(0, 0);
  transition-delay: 0.15s;
}
.hover-pills-wrapper:hover .pill:nth-child(4) {
  transform: translate(0px, -20px) scale(1);
  opacity: 1;
}

.pill:nth-child(5) {
  background: #A66DD4;
  transform: translate(0, 0);
  transition-delay: 0.2s;
}
.hover-pills-wrapper:hover .pill:nth-child(5) {
  transform: translate(100px, -40px) scale(1);
  opacity: 1;
} */


/* .pill:nth-child(1) { transition-delay: 0s; }
.pill:nth-child(2) { transition-delay: 0.05s; }
.pill:nth-child(3) { transition-delay: 0.1s; }
.pill:nth-child(4) { transition-delay: 0.15s; }
.pill:nth-child(5) { transition-delay: 0.20s; } */




.hero-text{
    text-align: center;
    margin-top: 100px !important;
    max-width: 760px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    padding: 64px 24px 0 24px;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: scale(1);
}

.hero-text.hidden {
    opacity: 0;
    transform: scale(0.6); /* Slightly shrink when hidden */
}

.hero-meta{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    margin-bottom: 24px;
}

.hero-meta span{
    font-family: "Sk-Modernist Bold";
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.hero-meta span::before,
.hero-meta span::after{
    content: none;
}

.hero-meta::before,
.hero-meta::after{
    content: "";
    flex: 1;
    height: 1px;
    background: var(--divider-color);
}

.display-hero{
    text-align: center;
    margin: 0;
    font-size: clamp(48px, 9vw, 108px);
    color: var(--text);
    font-family: "Gilroy ExtraBold";
    letter-spacing: -0.04em;
    line-height: 1.05;
    font-optical-sizing: auto;
}

.hero-badges{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.badge-pill{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: var(--ink);
    color: #fff;
    font-family: "Sk-Modernist Bold";
    font-size: 14px;
}

.hero-text p{
    text-align: center;
    margin: 32px 0 0 0;
    font-size: 21px;
    color: var(--text-muted);
    font-family: "Sk-Modernist Bold";
}

.hero-text img{
    width: 100px;
    height: 100px;
    margin-top: 73px;
    transition: ease-in-out 0.175s;
    cursor: pointer;
    margin: 73px auto 0 auto;
}

.company-wrap{
    display: flex;
    flex-direction: column;
    margin-top: 32px;
}

.company-wrap span{
    font-family: "Sk-Modernist Regular";
    color: var(--text-muted);
}

.hero-text .hero-company{
    width: 199px;
    margin-top: 24px;
}

.hero-text img:hover{
    cursor: pointer;
    transform: scale(1.2);
    transition: ease-in-out 0.175s;
}

.about-section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 100px;
    max-width: 950px;
    margin: 100px auto;
}

.about-section h1{
    margin: 0 0 32px 0;
    font-size: 26px;
    color: var(--text);
    font-family: "Awesome Serif SemiBd Extra Tall Italic";
    text-align: center;
}

.about-me-inner-wrap{
    display: flex;
    justify-content: center;
    gap: 32px;
    width: 100%;
    /* border-box: width:100% + padding under the default content-box
       model made this wider than its flex parent, which centers it  - 
       the excess bled out evenly past both edges instead of respecting
       the parent's side padding. */
    box-sizing: border-box;
}

.about-me-inner-wrap img{
    height: auto;
    width: 50%;
    object-fit: cover;
    border-radius: 32px;
    cursor: url('/img/cursor.svg'), auto;
    transition: ease-in-out 0.175s;
}

.about-me-inner-wrap img:hover{
    transition: ease-in-out 0.175s;
    transform: scale(1.03);
}

.photo-block{
    position: relative;
    width: 380px;
    flex-shrink: 0;
    align-self: stretch;
}

.photo-block img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.photo-block::before{
    content: "";
    position: absolute;
    inset: 12px -12px -12px 12px;
    background-color: var(--accent-light);
    border-radius: 32px;
    z-index: 0;
}

.name-content-wrap{
    flex: 1;
    min-width: 0;
}



/* Same static "liquid glass" look as .work-item/.carousel-card - a
   translucent diagonal gradient plus inset edge highlights, no
   backdrop-filter/SVG cost. */
.name-card{
    padding: 40px 32px;
    border-radius: 32px;
    background: var(--glass-card-bg);
    box-shadow: var(--glass-card-shadow);
}

.name-card h1{
    margin: 0;
    font-size: 28px;
    color: var(--text);
    font-family: "Gilroy SemiBold";
    letter-spacing: -1px;
    text-align: left;

}

.name-card p{
    margin: 8px 0 0 0;
    font-size: 16px;
    color: var(--text-muted);
    font-family: "Gilroy Light";
    letter-spacing: 0px;
}

.name-content{
    padding: 32px 32px;
    border-radius: 32px;
    margin-top: 16px;
    background: var(--glass-card-bg);
    box-shadow: var(--glass-card-shadow);
}

.name-content p{
    display: flex;
    flex-direction: column;
    gap: 24px;
    line-height: 22px;
    font-size: 16px;
    color: var(--text-muted);
    font-family: "Gilroy Light";
    letter-spacing: 0px;
}

.work-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    width: 100%;
    /* border-box: same reasoning as .about-me-inner-wrap above - without
       it, width:100% + padding overflows the centering parent evenly on
       both edges. */
    box-sizing: border-box;
}

/* Static "liquid glass" look - no backdrop-filter/SVG displacement, just
   a diagonal translucent gradient plus inset edge highlights (the same
   visual language as the real glass-surface fallback). These cards used
   to run through glass-surface.js's SVG displacement filter, but at ~50x
   a nav pill's area and several per page, that per-pixel filter was the
   single biggest paint cost on the homepage - this reads as glass at
   effectively zero runtime cost since nothing is ever actually blurred. */
.work-item{
    display: flex;
    flex-direction: column;
    border-radius: 32px;
    overflow: hidden;
    cursor: pointer;
    background: var(--glass-card-bg);
    box-shadow: var(--glass-card-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.work-item:hover{
    transform: translateY(-6px);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.22),
        0 0 2px 1px rgba(0, 0, 0, 0.08) inset,
        0 20px 40px rgba(0, 0, 0, 0.1);
}
.work-item:active {
    transform: translateY(0) scale(0.98);
    transition: transform 100ms ease-out;
}

.work-item-media{
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--media-placeholder-bg);
}

/* .work-thumb is one of the JS cursorZones (script.js), where the custom
   cursor div is deliberately hidden in favor of this native image - so
   the url() cursor belongs here specifically, not on the whole .work-item
   (which would otherwise leak this native cursor onto areas the JS custom
   cursor is actively rendering over). */
.work-thumb{
    cursor: url('/img/cursor-work.svg'), pointer;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* TILTED CARD - vanilla port of the react-bits TiltedCard component,
   applied to project thumbnails. Plain CSS transitions stand in for the
   original's spring physics (no React/`motion` dependency for a hover
   effect); pointer tracking + tilt math live in script.js. */

.tilted-card-figure {
    position: relative;
    perspective: 800px;
}

.tilted-card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}

.tilted-card-caption {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 4px;
    background-color: var(--ink);
    color: var(--paper);
    padding: 4px 10px;
    font-size: 12px;
    font-family: "Sk-Modernist Bold";
    opacity: 0;
    z-index: 3;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    transform: translate(12px, -50%);
}

.work-item-body{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 32px;
}

.work-item-tag{
    margin: 0 0 12px 0;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent-on-surface);
    font-family: "Sk-Modernist Bold";
}

.work-item-title{
    margin: 0 0 12px 0;
    font-size: 22px;
    line-height: 1.3;
    color: var(--text);
    font-family: "Gilroy SemiBold";
    letter-spacing: -1px;
}

.work-item-desc{
    margin: 0 0 24px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-muted);
    font-family: "Gilroy Light";
    letter-spacing: 0px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.button-work{
    padding: 2px 2px 2px 16px;
    border: none;
    border-radius: 32px;
    background-color: var(--media-placeholder-bg);
    margin-top: 18px;
    cursor: pointer;
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s ease;
    box-sizing: border-box;

}

.button-work:hover{
    background-color: #DFFCA1;
    transition: 0.3s ease;
}
.button-work:active {
    transform: scale(0.97);
    transition: transform 100ms ease-out;
}

.button-work img {
    transition: opacity 0.3s ease;
    opacity: 1;
}

.button-work .arrow-icon{
    width: auto;
    height: auto;
    cursor: pointer;
}


.button-work p{
    color: var(--accent-on-surface);
    font-size: 16px;
    font-family: "Sk-Modernist Bold";
}

/* .button-work:hover's background is always the fixed brand green
   (#DFFCA1) regardless of theme, so its text must stay the fixed dark
   green too - var(--accent-on-surface) would go light-on-light here. */
.button-work:hover p{
    color: var(--accent-dark);
}


.works-bottom-button{
    padding: 16px 40px;
    border: none;
    border-radius: 30px;
    color: var(--accent-on-surface);
    cursor: pointer;
    font-size: 16px;
    font-family: "Sk-Modernist Bold";
    line-height: 1.75;
    margin-top: 100px;
    opacity: 1;
}

@keyframes bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.philosophy-section{
    background: url('/img/philosophy-banner.jpg') no-repeat center center !important;
    background-size: cover !important;
}

.statement-section{
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: url('/img/life-stories.png') no-repeat center center;
    background-size: cover;
}

.philosophy-inner-wrap,
.life-inner-wrap{
    margin: 120px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20%;
}

.philosophy-inner-wrap h1,
.life-inner-wrap h1{
    margin: 0;
    font-size: clamp(36px, 5.5vw, 64px);
    font-family: "Gilroy SemiBold";
    letter-spacing: -1px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.2;
}

.philosophy-inner-wrap h1 span,
.life-inner-wrap h1 span{
    color: #fff;
    font-family: "Awesome Serif SemiBd Extra Tall Italic";
}

.philosophy-inner-wrap p,
.life-inner-wrap p{
    margin: 24px 0 0 0;
    font-size: 18px;
    color: var(--accent-light);
    font-family: "Sk-Modernist Bold";
    text-align: center;
}

.philosophy-inner-wrap img{
    margin-top: 32px;
    transition: ease-in-out 0.175s;
    cursor: pointer;
}

.philosophy-inner-wrap img:hover{
    transform: scale(1.2);
    transition: ease-in-out 0.175s;
}

.carousel-title{
    margin-bottom: 0 !important;

}

.carousel-subtitle{
    color: var(--text-muted);
    font-family: "Gilroy SemiBold";
    letter-spacing: 0px;
    font-size: 26px;
    margin: 16px 0 0 0; 
}

.carousel {
  position: relative;
  max-width: 100% !important;
  margin: 100px auto;
  overflow: hidden;
}

.carousel-track-container {
  overflow: hidden;
  position: relative;
}

:root {
  --carousel-duration: 60s;
}

.carousel-track {
  display: flex;
  width: calc(429px * 10); /* 5 original + 5 clones */
  animation: scrollCarousel var(--carousel-duration) linear infinite;
}

@keyframes scrollCarousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Half the total width = full cycle */
}

.carousel-track::after {
  content: '';
  display: flex;
}

/* Same static "liquid glass" look as .work-item - a translucent diagonal
   gradient plus inset edge highlights, no backdrop-filter/SVG cost. */
.carousel-card {
  min-width: 429px;
  min-height: 228px;
  background: var(--glass-card-bg);
  border-radius: 12px;
  margin: 40px 20px;
  padding: 24px 40px;
  display: flex;
  transition: .175s ease-in-out;
  box-shadow: var(--glass-card-shadow);
  justify-content: space-between;
  flex-direction: column;
}

.carousel-card:hover{
  box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.22),
      0 0 2px 1px rgba(0, 0, 0, 0.08) inset,
      0 12px 28px rgba(0, 0, 0, 0.1);
  transition: .175s ease-in-out;
}

.card-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
}

.card-content {
  display: flex;
  margin: 24px 0;

}

.carousel-name-wrap{
    display: block;
}

.card-body {
  font-size: 24px;
  color: var(--text);
  margin: 0;
  font-family: "Gilroy SemiBold";
  letter-spacing: 0px;
}

.card-name {
  font-family: "Gilroy SemiBold";
  letter-spacing: -1px;
  font-size: 26px;
  margin: 0;
  color: var(--text);
}

.card-role {
  font-size: 16px;
  color: var(--text-muted);
  font-family: "Gilroy Light";
  letter-spacing: 0px;
  margin: 6px 0 0 0
}



/* Fade effect on both sides */
.carousel-fade {
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.carousel-fade.left {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
}

.carousel-fade.right {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}


.life-inner-wrap img{
    margin-top: 32px;
    transition: ease-in-out 0.175s;
    cursor: pointer;
}

.life-inner-wrap img:hover{
    transform: scale(1.2);
    transition: ease-in-out 0.175s;
}


footer{
    display: block;
    position: relative;
    background-color: #000;
    padding: 115px 80px;
}

footer h1{
    margin: 0 0 32px 0;
    font-size: 60px;
    color: #fff;
    font-family: "Awesome Serif SemiBd Extra Tall";
}

footer h3{
    margin: 0 0 4px 0;
    font-size: 32px;
    color: #696969;
    font-family: "Sk-Modernist Bold";
}

footer a{
    margin: 0;
    font-size: 24px;
    color: #696969;
    font-family: "Sk-Modernist Regular";
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
    transition: color 0.2s ease;
}

footer a:hover{
    color: #DFFCA1;
}

footer img{
    filter: invert(1);
    margin-right: 40px;
    width: 60px;
    height: auto;
    margin-bottom: 40px;
    transition: ease-in-out 0.175s;
    cursor: pointer;
}

footer img:hover{
    transform: scale(1.2);
    transition: ease-in-out 0.175s;
    cursor: pointer;
}

.footer-back-to-top{
    position: absolute;
    top: 115px;
    right: 80px;
    width: 64px;
    height: 64px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.footer-back-to-top img{
    width: 100%;
    height: 100%;
    filter: none;
    margin: 0;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.footer-back-to-top:hover img{
    transform: rotate(180deg) translateY(-4px);
}

@media (max-width: 700px) {
    .footer-back-to-top{
        display: none;
    }
}

.footer-section-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}


@media screen and (max-width: 1024px){
    .life-inner-wrap{
        padding: 0 30%;
    }

    .philosophy-inner-wrap {
        padding: 0 30%;
    }
}



@media screen and (max-width: 768px) {
    .navbar {
        padding: 20px;
    }

    .navbar-left img {
        height: 30px;
    }

    .hero-meta{
        gap: 12px;
    }

    .hero-meta span{
        font-size: 11px;
    }

    .hero-text p {
        font-size: 18px;
    }

    .photo-block{
        width: 100%;
    }

    .about-section h1 {
        font-size: 24px;
    }

    .name-card h1 {
        font-size: 24px;
    }

    .name-content p {
        font-size: 14px;
    }

    .work-item-title {
        font-size: 19px;
    }

    .work-item-desc {
        font-size: 14px;
    }

    .work-grid {
        padding-left: 5%;
        padding-right: 5%;
    }

    .carousel-card {
        min-width: 300px;
        padding: 16px;
    }

    footer h1 {
        font-size: 36px;
    }

    .about-me-inner-wrap{
        flex-direction: column;
        align-items: center;
        padding: 24px;
    }
    
    .button-work{
        width: 96%;
    }

    .philosophy-inner-wrap {
        padding: 0 5%;
    }

    .life-inner-wrap{
        padding: 0 5%;
    }

    .carousel-subtitle{
        font-size: 18px;
    }
    
    .about-section{
        margin: 60px auto;
    }

    footer p{
        font-size: 18px;
    }

    footer a{
        font-size: 18px;
    }

    .about-me-inner-wrap img{
    width: 100%;
}
}

/* Below 390px, every page-edge container gets a flat 16px side gutter,
   overriding whatever wider-breakpoint padding (percentage-based, or
   none at all) it had - individual left/right properties only, so each
   section's own vertical padding is untouched. */
@media (max-width: 390px) {
    .navbar { padding-left: 16px; padding-right: 16px; }
    .hero-text { padding-left: 16px; padding-right: 16px; }
    .about-me-inner-wrap { padding-left: 16px; padding-right: 16px; }
    .work-grid { padding-left: 16px; padding-right: 16px; }
    .philosophy-inner-wrap,
    .life-inner-wrap { padding-left: 16px; padding-right: 16px; }
    footer { padding-left: 16px; padding-right: 16px; }
}

/* GRADUAL BLUR - vanilla port of the react-bits GradualBlur component.
   Structure/behavior generated in JS (script.js); these classes just
   carry over the layering rules from the original component's CSS. */
.gradual-blur {
    isolation: isolate;
}

.gradual-blur-parent {
    overflow: hidden;
}

.gradual-blur-top {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gradual-blur-top.gradual-blur-visible {
    opacity: 1;
}

.gradual-blur-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.gradual-blur-inner > div {
    position: absolute;
    inset: 0;
}

@supports not (backdrop-filter: blur(1px)) {
    .gradual-blur-inner > div {
        background: rgba(0, 0, 0, 0.3);
        opacity: 0.5;
    }
}

/* A scroll-driven cheap-blur swap used to run here (see script.js's
   is-scrolling class): drop to fewer bands at a capped blur mid-scroll,
   restoring full detail on settle. Removed - changing a backdrop-filter's
   value at all, even as an instant (non-transitioned) swap, makes Chrome
   briefly flash the layer blank/white while it reallocates the filter's
   texture. Tuning the swap's timing and opacity (see git history) never
   eliminated it, only the swap itself does. All bands now stay at full
   blur regardless of scroll state. */

.navbar-right a{
    text-decoration: none !important;
}