/* Declare cascade layer order for predictable overrides */
@layer tokens, base, layout, components, utilities, overrides;


/* === Begin import: css/variables.css === */
/* CSS variables */
/* 1.  DESIGN TOKENS ─────────────────────────────────────────────────────────── */
@layer tokens {
  :root{
    /* palette */
    --bg:#0D1117;
    --surface:#161B22;
    --surface-light:color-mix(in srgb,var(--surface) 85%,#fff 15%);
    --surface-accent:color-mix(in srgb,var(--surface) 92%,#fff 8%);
    --primary:#2396AD;
    /* unify accents: use teal for secondary too */
    --secondary: var(--primary);
    --text-light:#F1F4F8;
    --text-muted:#BFC8D3;   /* WCAG-passing grey */

    /* links & focus */
    --link: color-mix(in srgb, var(--primary) 85%, #fff 15%);
    --link-hover: color-mix(in srgb, var(--primary) 65%, #fff 35%);
    --focus: color-mix(in srgb, var(--primary) 70%, #fff 30%);

    /* borders */
    --border-subtle:#21262D;

    /* semantic states (optional) */
    --success:#38B37E;  /* approvals, good states */
    --warning:#E0A328;  /* caution, non-blocking */
    --danger:#E05757;   /* errors, destructive */

    /* sizing */
    --nav-height:72px;      /* default, JS may overwrite */
    --container-max:1068px;
    --modal-max:920px;                 /* typical dialog width on desktop */
    --modal-max-wide:var(--container-max); /* wider for embeds (Tableau/iframes) */

    /* spacing scale */
    --space-2:2px;   --space-4:4px;   --space-6:6px;
    --space-8:8px;   --space-10:10px; --space-12:12px;
    --space-14:14px; --space-16:16px; --space-20:20px;
    --space-24:24px; --space-28:28px; --space-32:32px;
    --space-40:40px; --space-48:48px; --space-64:64px;

    /* radii */
    --radius-6:6px; --radius-8:8px; --radius-10:10px;
    --radius-12:12px; --radius-14:14px; --radius-16:16px;

    /* shadows */
    --shadow-sm:0 2px 6px rgba(0,0,0,.25);
    --shadow-md:0 6px 18px rgba(0,0,0,.35);
    --shadow-lg:0 12px 32px rgba(0,0,0,.6);

    /* breakpoints (for documentation) */
    --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;

    /* dynamic viewport height used for mobile hero sections */
    --vh:100vh;

    /* component-specific */
    /* Controls the visual height of project card media (img/gif/video). */
    /* Use a wider ratio but tall enough to avoid crowding. */
    --project-card-aspect: 1 / 1; /* square project cards */
  }
}



/* === End import: css/variables.css === */

/* === Begin import: css/base/base.css === */
/* Base layout and typography */
/* ───────────────────────────────────────────────────────────
   2.  GLOBAL LAYOUT & TYPOGRAPHY  (base = PC ≥1025px)
   ─────────────────────────────────────────────────────────── */
@layer base {
  html,body{
    height:100%;margin:0;padding:0;
    font-family:'Inter',sans-serif;
    background:var(--bg);color:var(--text-light);
    line-height:1.6;-webkit-font-smoothing:antialiased;
    color-scheme: dark light; /* better native form controls on mobile */
  }

  body{
    display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;
    /* Keep all content below the fixed header */
    padding-top: var(--nav-height, 72px);
  }
  main{flex:1 0 auto}
  .wrapper{max-width:var(--container-max);margin-inline:auto;padding-inline:24px}
  a{color:inherit;text-decoration:none}
  .hide{display:none !important}

  /* Headings & copy (desktop defaults) */
  h1,h2,h3{
    font-family:'Poppins',sans-serif;font-weight:500;letter-spacing:.4px
  }
  h1{font-size:48px;line-height:56px;margin:.4em 0}
  h2{font-size:32px;line-height:40px;margin:.6em 0 .4em}
  h3{font-size:24px;line-height:32px;margin:.8em 0 .4em}
  p {margin-bottom:1em;font-size:19px}

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
  }
}



/* === End import: css/base/base.css === */

/* === Begin import: css/layout/nav.css === */
/* Navigation styles */
/* ───────────────────────────────────────────────────────────
   3.  NAVIGATION
   ─────────────────────────────────────────────────────────── */
@layer layout {
  .nav{
    position:fixed;inset:0 0 auto 0;width:100%;z-index:1000;
    background:rgba(13,17,23,.72);backdrop-filter:blur(8px);
  }
  /* Scroll progress bar integrated at the bottom of the nav */
  .nav::after{
    content:"";position:absolute;left:0;right:auto;bottom:0;height:2px;
    width: calc(var(--scroll-progress, 0) * 1%);
    background: var(--primary);
  }
  .nav .wrapper{
    display: flex;
    flex-wrap: wrap;                 /* allows wrapping */
    justify-content: center;        /* center all items horizontally */
    align-items: center;
    gap: 18px 48px;                  /* row-gap column-gap */
    padding: 18px 24px;
    text-align: center;             /* optional: improves alignment on wrap */
  }
  .nav-row{display:flex;gap:20px;flex-wrap:nowrap;justify-content:center}
  .nav-link{
    flex: none;
    text-align: center;
    white-space: nowrap;
  }

  .brand{display:flex;align-items:center;gap:8px}
  .brand-logo{height:64px;width:auto}
  .brand-name{
    font-family:'Poppins';font-size:22px;font-weight:600;
    color:var(--text-light);letter-spacing:.3px;line-height:1
  }
  .brand .divider{color:var(--primary)}
}


/* === End import: css/layout/nav.css === */

/* === Begin import: css/components/hero.css === */
/* Hero section */
/* ───────────────────────────────────────────────────────────
   4.  HERO
   ─────────────────────────────────────────────────────────── */
@layer components {
  .hero{
    /* exactly fill the viewport below the fixed header */
    height: calc(var(--vh, 100svh) - var(--nav-height, 72px));
    margin-top: 0;
    padding-top: 0;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;
    background:var(--surface);position:relative;overflow:hidden;isolation:isolate;
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  .hero h1,.hero p,.hero .btn-primary{opacity:0}
  .hero h1{animation:fadeUp 1s .5s forwards}
  .hero p {animation:fadeUp 1s .8s forwards;font-size:20px;color:var(--text-muted);max-width:40rem}
  .hero .btn-primary{animation:fadeUp 1s 1.1s forwards}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:-1;opacity:.10;
    background:linear-gradient(120deg,var(--primary)0%,var(--primary)15%,var(--surface)75%,var(--bg)100%);
    background-size:400% 400%;animation:gradShift 18s ease-in-out infinite;
    /* Parallax via background-position to avoid geometric shift */
    background-position: 50% calc(var(--hero-parallax, 0px));
    will-change: background-position;
  }
  /* Ambient light following the pointer (desktop only) */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    opacity:0;transition:opacity .3s ease;
    background: radial-gradient(180px 140px at var(--mx,50%) var(--my,35%),
      color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%);
  }
  @media (hover:hover) and (pointer:fine){
    .hero:hover::after{ opacity:.12; }
  }
  @keyframes rippleFade{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:none}}
  .hero-cta{opacity:0;animation:fadeUp 1s 1.15s forwards}
  .hero-cta:nth-of-type(2){animation-delay:1.3s}
  .hero-status{
    display:inline-block;margin:.5rem 0 1.2rem;
    background:color-mix(in srgb,var(--surface) 50%,transparent);
    color:var(--primary);font-size:.8rem;font-weight:600;
    padding:4px 12px;border-radius:6px
  }
  .hero .wrapper{
    text-align:center;            /* already inherited */
    display:flex;                 /* new */
    flex-direction:column;        /* new */
    align-items:center;           /* new → centres child blocks */
  }
  .chevron-hint{
    position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
    color:var(--primary);pointer-events:auto;cursor:pointer;
    opacity:1;transition:opacity .3s ease;
  }
  .chevron-hint i{
    animation:chevronBounce 1.5s infinite;
  }
  .chevron-hint.fade{opacity:0}

  @keyframes chevronBounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(6px)}
  }
  /* Ensure hero can position the chevron */
  .hero { position: relative; }

  /* Ensure no gap between hero and the next section */
  .hero + section { margin-top: 0 !important; }

  /* Scroll indicator chevron at bottom of hero */
  .chevron-hint,
  .scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    color: var(--primary);
    font-size: 28px;
    line-height: 1;
    opacity: 0.95;
    pointer-events: auto; /* allow clicks */
    animation: chevron-bob 1.8s infinite ease-in-out;
  }

  /* Increase clickable chevron size */
  .chevron-hint svg,
  .scroll-indicator svg {
    width: 36px;
    height: 36px;
    display: block;
  }

  /* Simple bobbing animation */
  @keyframes chevron-bob {
    0%,100% { transform: translate(-50%, 0); }
    50%     { transform: translate(-50%, 6px); }
  }
}


/* === End import: css/components/hero.css === */

/* === Begin import: css/components/buttons.css === */
/* Button components */
/* ───────────────────────────────────────────────────────────
   5.  BUTTONS
   ─────────────────────────────────────────────────────────── */
@layer components {
  .btn-primary,.btn-secondary,.btn-icon{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Poppins';font-weight:500;border-radius:8px;
    cursor:pointer;transition:transform .25s,box-shadow .25s
  }
  .btn-primary{
    padding:18px 34px;background:var(--primary);color:var(--bg);
    box-shadow:0 6px 18px color-mix(in srgb, var(--primary) 25%, transparent)
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb, var(--primary) 35%, transparent)}
  .btn-secondary{
    padding:18px 34px;border:2px solid var(--primary);background:transparent;color:var(--primary)
  }
  .btn-secondary:hover{background:var(--primary);color:var(--bg);transform:translateY(-3px)}
  .btn-icon{width:46px;height:46px;border:2px solid var(--primary);color:var(--primary)}
  .btn-icon i{font-size:22px;color:currentColor}
  .btn-icon svg{
    width:22px;height:22px;color:currentColor;
    /* stroke-based icons look sharper */
    fill:none; stroke:currentColor; shape-rendering:geometricPrecision;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }
  .btn-icon svg.brand-fill{fill:currentColor;stroke:none}
  .btn-icon img{width:22px;height:22px;object-fit:contain;display:block}
  .btn-icon .icon{display:block;width:22px;height:22px}
  .btn-icon .icon-github{
    background-color: currentColor;
    -webkit-mask-image: url('../img/icons/github-icon.png');
            mask-image: url('../img/icons/github-icon.png');
    -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;
    -webkit-mask-position: center;      mask-position: center;
    -webkit-mask-size: contain;         mask-size: contain;
  }
  .btn-icon:hover{background:var(--primary);color:var(--bg);transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
  .btn-icon:hover i{color:var(--bg)}
  .btn-icon:hover svg{color:var(--bg)}
}


/* === End import: css/components/buttons.css === */

/* === Begin import: css/components/certification.css === */
/* Certification ticker */
/* ───────────────────────────────────────────────────────────
   6.  CERTIFICATION MARQUEE
   ─────────────────────────────────────────────────────────── */
@layer components {
  .cert-band{background:var(--surface);overflow:hidden;position:relative}
  .cert-track{
    position:relative;height:48px;cursor:grab;user-select:none;touch-action:pan-y
  }
  .cert-track.dragging{cursor:grabbing}.cert-track.dragging .cert{pointer-events:none}
  .cert-track a,.cert-track img{-webkit-user-drag:none;user-select:none}
  .cert{
    position:absolute;top:25%;display:inline-flex;align-items:center;gap:10px;
    font-family:'Poppins';font-weight:500;font-size:16px;color:var(--text-light);
    white-space:nowrap;will-change:transform
  }
  .cert:hover span{color:var(--primary)}
  @keyframes fadeCert{from{opacity:0}to{opacity:1}}
  .cert.reenter{animation:fadeCert .4s ease}.cert img{height:24px}
}



/* === End import: css/components/certification.css === */

/* === Begin import: css/components/core.css === */
/* Skills grid */
/* ───────────────────────────────────────────────────────────
   7.  CORE COMPETENCIES
   ─────────────────────────────────────────────────────────── */
@layer components {
  .grid-container{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    margin:28px;
  }
  .icon-info{
    background:var(--surface);border:1px solid #21262D;border-radius:14px;
    padding:32px;text-align:center;color:var(--text-light);
    display:flex;flex-direction:column;align-items:center;
    opacity:0;transform:scale(.92);
    transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)
  }
  .icon-info i{font-size:38px;margin-bottom:14px;color:var(--primary)}
  .icon-info svg{
    width:38px;height:38px;margin-bottom:14px;
    color:var(--primary);
    /* Keep vectors sharp and avoid unwanted fills */
    shape-rendering:geometricPrecision;
    display:block;
  }
  .icon-info svg *{
    fill:none;                  /* respect stroke-only icons */
    stroke:currentColor;        /* match the theme color */
    vector-effect:non-scaling-stroke; /* keep stroke width crisp when scaled */
  }
  .icon-info p{font-family:'Poppins';font-weight:600;margin-bottom:4px}
  .icon-info small{color:var(--text-muted)}
  @keyframes focusIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
  #about-me.reveal.active .icon-info{animation:focusIn .6s forwards}
  #about-me.reveal.active .icon-info:nth-child(2){animation-delay:.1s}
  #about-me.reveal.active .icon-info:nth-child(3){animation-delay:.2s}
  #about-me.reveal.active .icon-info:nth-child(4){animation-delay:.3s}
  #about-me.reveal.active .icon-info:nth-child(5){animation-delay:.4s}
  #about-me.reveal.active .icon-info:nth-child(6){animation-delay:.5s}
  #about-me .section-title{text-align:center}
}


/* === End import: css/components/core.css === */

/* === Begin import: css/components/projects.css === */
/* Project card components */
/* ───────────────────────────────────────────────────────────
   8.  PROJECT CARDS
   ─────────────────────────────────────────────────────────── */
@layer components {
  .project-card{
    position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
    opacity:0;transition:opacity .35s cubic-bezier(.22,.61,.36,1),
    transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1)
  }
  .project-card.ripple-in{animation:rippleFade .55s cubic-bezier(.2,.7,.3,1) forwards;transform:none}
  /* base media sizing (cover the frame, preserve aspect; align to top) */
  .project-card img{position:relative;z-index:0;width:100%;display:block;object-fit:cover;object-position:top;background:transparent}
  .project-card video{position:relative;z-index:0;width:100%;object-fit:cover;object-position:top;background:transparent}
  /* keep GIF replacement <video> hidden until JS confirms it can play */
  .gif-video{display:none}
  .project-card .gif-video{display:none}
  .project-card .overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35)0%,rgba(0,0,0,.95)100%)}
  /* Stack title and subtitle in a single block to avoid overlap on wrap */
  .project-card .project-text{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;gap:4px;z-index:2;transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;will-change:transform}
  .project-card .project-title{position:static;font-family:'Poppins';font-weight:600;font-size:20px;margin:0}
  .project-card .project-subtitle{position:static;font-size:14px;color:var(--text-muted);margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
  .project-card::before{
    content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:14px;
    pointer-events:none;transition:border-color .35s cubic-bezier(.22,.61,.36,1)
  }
  .project-card:hover{
    transform:translateY(-8px) scale(1.04);
    box-shadow:0 14px 34px color-mix(in srgb, var(--primary) 32%, transparent),0 6px 20px rgba(0,0,0,.55)
  }
  .project-card:hover::before{border-color:var(--primary)}
  #projects.grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:28px;padding:24px;
    max-width: var(--container-max);
    margin-inline: auto;
    transition:height .45s cubic-bezier(.22,.61,.36,1),
               padding .45s cubic-bezier(.22,.61,.36,1),
               opacity .35s ease;
    will-change:height,padding,opacity
  }
  #projects.grid-fade{opacity:0}
  .project-metric{
    position:absolute;top:18px;left:18px;
    background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary);
    font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:6px;max-width:75%;pointer-events:none
  }

  /* Square frame, cover fill, top-aligned; no empty space, no distortion */
  .project-card img,
  .project-card video {
    width: 100%;
    height: auto;
    aspect-ratio: var(--project-card-aspect, 1 / 1);
    display: block;
    object-fit: cover;     /* fill without black bars, preserve aspect */
    object-position: top;  /* align with top of card frame */
    background: transparent;
  }
  /* --- Button-card reset to match previous DIV cards --- */
  button.project-card {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    display: block;
    text-align: left;
    cursor: pointer;
  }

  /* Ensure titles/subtitles stay light & left-aligned */
  .project-card,
  .project-card .project-title,
  .project-card .project-subtitle,
  .carousel-card .project-title,
  .carousel-card .project-subtitle {
    color: var(--text-light);
    text-align: left;
  }

  /* Overlay should not block clicks */
  .project-card .overlay { pointer-events: none; }

  /* Focus visibility for keyboard users */
  .project-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}


/* === End import: css/components/projects.css === */

/* === Begin import: css/components/contact-card.css === */
/* Contact action cards */
@layer components {
  .contact-card{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    padding:48px 32px;text-align:center;background:var(--surface);border:1px solid var(--border-subtle);
    border-radius:14px;color:var(--primary);font-family:'Poppins';font-weight:600;
    transition:transform .25s,background .25s,color .25s,box-shadow .25s,border-color .25s
  }
  .contact-card svg{
    width:40px; height:40px; color:inherit;
    /* match footer stroke-based icon styling */
    fill:none; stroke:currentColor; shape-rendering:geometricPrecision;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }
  .contact-card svg.brand-fill{ fill: currentColor; stroke: none; }
  .contact-card .icon{ display:block; width:40px; height:40px; }
  /* reuse the same GitHub mask style used in .btn-icon */
  .contact-card .icon-github{
    background-color: currentColor;
    -webkit-mask-image: url('../img/icons/github-icon.png');
            mask-image: url('../img/icons/github-icon.png');
    -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;
    -webkit-mask-position: center;      mask-position: center;
    -webkit-mask-size: contain;         mask-size: contain;
  }
  .contact-card small{font-family:'Inter';color:var(--text-muted);transition:inherit}
  .contact-card:hover{
    background:var(--primary);color:var(--bg);transform:translateY(-3px);
    border-color:var(--primary);
    box-shadow:0 10px 24px color-mix(in srgb, var(--primary) 35%, transparent)
  }
  .contact-card:hover i,.contact-card:hover small{color:var(--bg)}
  .surface-band.reveal.active .contact-card{animation:focusIn .6s forwards}
}


/* === End import: css/components/contact-card.css === */

/* === Begin import: css/components/doc-card.css === */
/* Contributions doc cards and carousel */
@layer components {
  /* row separator */
  .contrib-gap{ height:64px; background:var(--surface); }

  .docs-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:28px; padding:24px 0; row-gap:8px;
  }
  .doc-card{
    position:relative; display:flex; justify-content:space-between; align-items:center;
    gap:18px; padding:26px 24px; background:var(--surface);
    border:1px solid var(--border-subtle); border-radius:14px;
    transition:transform .25s,box-shadow .25s,background .25s,border-color .25s
  }
  .doc-card:hover{background:var(--primary);transform:translateY(-6px);box-shadow:0 12px 28px color-mix(in srgb, var(--primary) 35%, transparent);border-color:var(--primary)}
  .doc-card:hover .doc-role,.doc-card:hover h3{color:var(--bg)}
  .doc-body h3{margin:0 0 6px;font-family:'Poppins';font-size:1.05rem;font-weight:600}
  .doc-role{margin:0;font-size:.85rem;color:var(--text-muted)}
  .doc-links{display:flex;gap:14px;margin-left:14px;}
  .doc-link{ display:flex;align-items:center;justify-content:center;width:42px;height:42px; font-size:1.6rem;color:inherit;border:2px solid currentColor;border-radius:10px;transition:background .25s }
  .doc-card:hover .doc-link{background:rgba(0,0,0,.15); color: var(--bg); border-color: var(--bg);}
  .doc-link svg{ width:22px; height:22px; color: currentColor; }

  .docs-carousel{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:smooth;margin-inline:-24px;padding:8px 24px}
  .docs-carousel>.doc-card{flex:0 0 260px;scroll-snap-align:center}
  .docs-carousel.dragging{cursor:grabbing;user-select:none}

  .contrib-section{ margin-top:32px; margin-bottom:32px; }

  /* Themed scrollbars for contributions page */
  .contributions-page .docs-carousel{ scrollbar-color: var(--primary) var(--bg); }
  .contributions-page::-webkit-scrollbar{ width:10px; background:var(--surface); }
  .contributions-page::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:6px; }
  .contributions-page .docs-carousel::-webkit-scrollbar{ height:8px; background:var(--surface); }
  .contributions-page .docs-carousel::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:4px; }
  .contributions-page .docs-carousel::-webkit-scrollbar-thumb:hover,
  .contributions-page::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--primary) 75%, #000 25%); }

  /* additional layout helpers used by doc cards */
  .doc-layout{ display:flex; flex-direction:column; justify-content:space-between; height:100%; }
  .doc-title{ font-family:'Poppins'; font-size:1.1rem; font-weight:600; color:var(--text-light); margin-top:0; }
  .doc-footer{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; }
  .doc-footer .doc-role{ font-size:.85rem; color:var(--text-muted); margin:0; }
  .doc-footer .doc-links{ display:flex; gap:12px; }

  /* mobile alignment for footer/content */
  @media (max-width:768px){
    .doc-card{ position:relative; padding-bottom:96px; }
    .doc-footer{ position:absolute; left:24px; right:24px; bottom:24px; display:flex; justify-content:space-between; align-items:flex-end; }
    .doc-links{ position:static; display:flex; gap:12px; }
    .docs-grid{ grid-template-columns:1fr; }
  }
}


/* === End import: css/components/doc-card.css === */

/* === Begin import: css/components/modal.css === */
/* Modal windows */

/* ───────────────────────────────────────────────────────────
   9.  MODALS
   ─────────────────────────────────────────────────────────── */
@layer components {
  .modal{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(4px);
    opacity:0;pointer-events:none;transition:opacity .45s ease;z-index:2000
  }
  .modal.active{opacity:1;pointer-events:auto}
  body.modal-open{overflow:hidden;padding-right:var(--scrollbar,0px)}
  .modal-content{
    position:relative;max-height:82vh;margin:5% 12px;
    width: min(var(--modal-max), calc(100vw - 24px));
    max-width: var(--modal-max);
    display:flex;flex-direction:column;overflow:hidden;
    background:var(--surface); /* unified darker surface */
    color:var(--text-light);
    padding:24px 32px;
    font-size:1rem;line-height:1.7;
    border-radius:16px;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.6),
      0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
    transform:translateY(-24px) scale(.96);opacity:0;
    transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s cubic-bezier(.22,.61,.36,1)
  }
  /* wider layout for embedded content */
  .modal-content.modal-wide{
    width: min(var(--modal-max-wide, var(--container-max)), calc(100vw - 24px));
    max-width: var(--modal-max-wide, var(--container-max));
  }
  .modal.active .modal-content{transform:none;opacity:1}
  .modal-content::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:16px 16px 0 0;background:var(--primary)}
  .modal-close{
    position:absolute;top:14px;right:18px;background:none;border:none;cursor:pointer;
    font-size:30px;line-height:1;color:var(--text-muted);transition:color .25s
  }
  .modal-close:hover{color:var(--primary);text-shadow:0 0 4px color-mix(in srgb,var(--primary) 40%,transparent)}
  .modal-title-strip{ text-align:center; padding:32px 28px 24px; border-bottom: 1px solid color-mix(in srgb, var(--text-light) 10%, transparent); }
  .modal-title{margin:0;font-family:'Poppins';font-weight:600;font-size:1.9rem;letter-spacing:.3px;color:var(--primary)}

  .modal-header-details{
    flex:0 0 100%;
    display:flex;flex-wrap:wrap;justify-content:space-around;gap:12px;
    padding:22px 0; /* remove horizontal padding */
    background:var(--surface-accent);
    border-top:1px solid color-mix(in srgb,var(--text-light) 12%,transparent);
    border-bottom:1px solid color-mix(in srgb,var(--text-light) 12%,transparent);
    position:relative;
  }
  .modal-half{flex:1 1 260px;text-align:center;position:relative;padding:12px 0}
  .header-label{
    margin:0 0 10px;font-weight:600;font-size:.95rem;color:var(--primary);
    text-transform:uppercase;letter-spacing:.6px
  }
  .tool-badges,.icon-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
  .badge{
    background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary);
    padding:4px 10px;border-radius:6px;font-size:.85rem;font-weight:500
  }
  .icon-row .icon{width:38px;height:38px}

  .modal-body{
    flex:1 1 auto;
    display:flex;flex-wrap:wrap;gap:32px;padding:0 32px 32px;
    overflow-y:auto;
  }
  .modal-text{
    flex:1 1 340px;
    /* allow flex child to shrink and wrap properly */
    min-width: 0;
    /* ensure long tokens/URLs don't overflow on small screens */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    font-size:1rem;line-height:1.75;color:var(--text-light)
  }
  .modal-text p{margin:0 0 .85em}
  .modal-text ul{margin:.5em 0 1em}
  .modal-text h4{color:var(--primary);margin-top:1em;margin-bottom:.5em;font-size:1.2rem}
  .modal-text ul{padding-left:20px}
  .modal-subtitle{margin-top:0;color:var(--text-muted)}
  .modal-image{flex:1 1 300px;align-self:flex-start}
  .modal-image img{max-width:100%;border-radius:12px;display:block;box-shadow:0 6px 24px rgba(0,0,0,.4)}
  .modal-image video{max-width:100%;border-radius:12px;display:block;box-shadow:0 6px 24px rgba(0,0,0,.4)}
  .modal-content :focus-visible{outline:2px solid var(--focus);outline-offset:2px}

  /* Copy link button near the close button */
  .modal-copy{
    position:absolute;top:16px;right:56px;
    background:transparent;color:var(--text-muted);
    border:1px solid var(--surface-accent);border-radius:8px;
    padding:6px 10px;cursor:pointer;font-size:.85rem;
    transition:color .2s,border-color .2s,transform .2s;
  }
  .modal-copy:hover,.modal-copy:focus-visible{
    color:var(--primary);border-color:var(--primary);transform:translateY(-1px)
  }

  /* Non-intrusive toast for copy feedback */
  .modal-toast{
    position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
    background: color-mix(in srgb, var(--surface) 85%, #000 15%);
    color: var(--text-light);
    border: 1px solid var(--surface-accent);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: .85rem;
    box-shadow: var(--shadow-sm);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .modal-toast.show{ opacity: 0.92; }

  /* Divider between Tools and Downloads */
  .modal-divider {
    position: absolute; left: 50%; top: 20%; width: 1px; height: 60%;
    background: color-mix(in srgb, var(--text-light) 12%, transparent);
    transform: translateX(-50%);
  }

  /* keep modal within the viewport on all screens */
  #contact-modal .modal-content { width: min(760px, calc(100vw - 24px)); margin-inline:auto; }
  #contact-modal .modal-body { overflow-x:hidden; }
  #contact-modal iframe { width:100%; border:none; display:block; height:100vh; }
  /* prevent horizontal scroll for sentence demo modal on mobile */
  #smartSentence-modal .modal-body { overflow-x: hidden; }
  #smartSentence-modal .modal-embed { overflow-x: hidden; }

  /* embedded demo modals */
  #shapeClassifier-modal iframe,
  #chatbotLora-modal iframe {
    height: 80vh; /* final effective height */
    margin-top: 0; width: 100%; border: 1px solid var(--surface-accent);
  }
  /* sentence demo uses content-driven height via JS */
  #smartSentence-modal .modal-embed iframe { height: auto; margin-top: 0; width: 100%; border: 1px solid var(--surface-accent); }
  #shapeClassifier-modal .modal-embed,
  #chatbotLora-modal .modal-embed,
  #smartSentence-modal .modal-embed { flex:0 0 50%; max-width:50%; align-self:flex-start; overflow:visible; }
  @media (max-width: 768px) {
    #shapeClassifier-modal .modal-embed,
    #chatbotLora-modal .modal-embed,
    #smartSentence-modal .modal-embed { flex-basis:100%; max-width:100%; }
  }

  /* ensure Tableau embeds always appear after the text */
  .modal-body.stacked .modal-embed { order: 99; }
  .modal-embed { overflow-x:auto; width:100%; min-width: 0; }
  .modal-embed iframe {
    width:100%; height:70vh; border:none; display:block; margin-top:1rem;
    /* include borders in width to avoid subtle 1-2px overflow */
    box-sizing: border-box;
  }
  .tableau-scale-inner { transform-origin: top left; }

  /* (fallback note removed per request) */

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .modal-header-details { flex-direction:column; align-items:center; }
    .modal-half { flex:1 1 auto; width:100%; }
    .modal-divider { position: static; width: 80%; height: 1px; margin: 12px 0; transform: none; }
    .modal-body { padding:4px !important; }
  }
}


/* === End import: css/components/modal.css === */

/* === Begin import: css/layout/footer.css === */
/* Footer styles */
/* ───────────────────────────────────────────────────────────
   10.  FOOTER
   ─────────────────────────────────────────────────────────── */
@layer layout {
  .footer{
    margin-top:auto;background:#090C10;color:var(--text-muted);text-align:center;
    padding:32px 0;display:flex;flex-direction:column;align-items:center;gap:18px;font-size:14px
  }
  .footer .social a{margin:0 6px}
}


/* === End import: css/layout/footer.css === */

/* === Begin import: css/utilities/layout.css === */
@layer utilities {
/* Utility helpers consolidated into utilities/helpers.css */

/* ───────────────────────────────────────────────────────────
   12.  CONTACT PAGE – ACTION CARDS
   ─────────────────────────────────────────────────────────── */
/* moved to components/contact-card.css */

/* ───────────────────────────────────────────────────────────
   12b. CONTACT PAGE – FORM MODAL
   ─────────────────────────────────────────────────────────── */
/* contact modal styles moved to components/modal.css */

/* ───────────────────────────────────────────────────────────
  12c. SHAPE CLASSIFIER MODAL
  Size the iframe to its content
  ─────────────────────────────────────────────────────────── */
/* embedded demo modal sizing moved to components/modal.css */

/* ───────────────────────────────────────────────────────────
   14.  FEATURED PROJECTS CAROUSEL
   ─────────────────────────────────────────────────────────── */
.featured-track{
  display:flex;gap:24px;overflow-x:auto;scroll-behavior: smooth; 
  margin-inline:-16px;padding:8px 16px;
}
.featured-track::-webkit-scrollbar{display:none}
.featured-card{
  flex:0 0 80%;max-width:320px;scroll-snap-align:center;
  border-radius:14px;overflow:hidden;cursor:pointer;background:var(--surface);
  transition:transform .35s,box-shadow .35s
}
.featured-card img{width:100%;height:200px;object-fit:cover;display:block}
.featured-card .card-body{padding:20px}
.featured-card h3{margin:0 0 4px}.featured-card p{margin:0;color:var(--text-muted)}
.featured-card:hover{transform:translateY(-8px)scale(1.04);box-shadow:0 14px 34px color-mix(in srgb, var(--primary) 32%, transparent),0 6px 20px rgba(0,0,0,.55)}

/* ───────────────────────────────────────────────────────────
   14b. PORTFOLIO PAGE CAROUSEL
   ─────────────────────────────────────────────────────────── */
#portfolio-carousel{
  position:relative;
  overflow:hidden;
  max-width:var(--container-max);       /* show at most 3 cards */
  margin-inline:auto;
}
#portfolio-carousel-section{
  margin-top:24px;
  margin-bottom:24px; /* extra space below the See More button */
}
#portfolio-carousel-section .section-title{ text-align:center; }
#portfolio-carousel .carousel-track{display:flex;gap:24px;transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform}
.carousel-card{flex:0 0 70%;max-width:340px;opacity:.7;transform:scale(.9);transition:transform .5s,opacity .5s;will-change:transform;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}
.carousel-card.active{opacity:1;transform:scale(1)}
/* Prevent native drag/select on images/videos inside carousel cards */
.carousel-card{ user-select: none; }
.carousel-card img,
.carousel-card video{
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
#portfolio-carousel .carousel-card:not(.active):hover {
  transform: scale(0.9);      /* keep default scale */
  box-shadow: none;           /* remove hover shadow */
}
.carousel-dots{text-align:center;margin-top:16px}
.carousel-dot{
  display:inline-block;
  width:24px;   /* larger tap target */
  height:24px;  /* larger tap target */
  padding:0;
  line-height:0;
  border-radius:50%;
  border:2px solid var(--primary);
  background:transparent;
  cursor:pointer;
  aspect-ratio:1;
  margin:0 6px;
}
.carousel-dot.active{background:var(--primary)}
#portfolio-carousel.dragging{cursor:grabbing;user-select:none}
@media (max-width:768px){
  .carousel-card{flex:0 0 80%}
}

/* contributions/doc styles moved to components/doc-card.css */

/* === THEMED SCROLLBAR FOR .contact-page ================================ */
.contact-page {
  /* Firefox */
  scrollbar-color: var(--primary) var(--surface);
}

/* WebKit (Chrome, Edge, Safari) */
.contact-page::-webkit-scrollbar {
  width: 10px;
  background: var(--surface);
}

.contact-page::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 6px;
}

.contact-page::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 75%, #000 25%);
}

/* === Center the entire CTA block ========================================= */
#cta{
  background:var(--surface);
  padding: 40px;
}

#cta .wrapper{
  text-align:center;          /* centers the heading & paragraph text        */
}

#cta #cta-link{               /* anchor that wraps all CTA content            */
  display:inline-flex;        /* shrink-wraps to its content width            */
  flex-direction:column;      /* stack heading, paragraph, button vertically  */
  align-items:center;         /* horizontally center every child (incl. btn)  */
}

.burger{
  display:none;        /* 🔒 invisible + non-interactive everywhere … */
}

/* moved to components/doc-card.css */

/* modal styles consolidated into components/modal.css */

/* =========================================================
   SLIM GLASSY DRAWER  –  ≤ 768 px
   (extends the header visually)
========================================================= */
@media (max-width:768px){
  /* moved modal-divider responsive tweaks to components/modal.css */

  /* ---------- burger ---------- */
  .burger{
    display:block;               /* hidden on desktop */
    margin-left:auto;
    padding:8px;
    background:none;border:none;cursor:pointer;
    z-index:1001;                /* above the drawer */
  }
  .burger .bar{
    display:block;width:22px;height:3px;margin:4px 0;
    background:var(--text-light);
    transition:transform .3s,opacity .3s;
  }
  .burger[aria-expanded="true"] .bar:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .burger[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] .bar:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

    /* ---------- drawer ---------- */
    .nav-row{
      align-items:center;
      gap:10px;
      position:fixed;
      top:var(--nav-height, 72px);   /* JS can still overwrite this */
      left:0; right:0;
      width:100%;
      padding-bottom: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      overflow: hidden; /* ensures no scrollbars leak past radius */



      /* everything you already had … */
      max-height:calc(100vh - env(safe-area-inset-top));
      overflow-y:auto;
      display:flex;flex-direction:column;
      background:rgba(13 17 23 / 0.72);
      backdrop-filter:blur(14px);
      box-shadow:0 4px 14px rgba(0,0,0,.25);
      z-index:1000;

      /* >>> NEW “reveal from under header” code <<< */
      -webkit-clip-path: inset(0 0 100% 0);   /* start fully clipped */
              clip-path: inset(0 0 100% 0);
      transition:
          -webkit-clip-path .35s ease-out,
                  clip-path .35s ease-out;
      pointer-events:none;                     /* ignore clicks while hidden */
    }

    /* drawer visible */
    .nav-row.open{
      -webkit-clip-path: inset(0 0 0 0);       /* slide-down reveal */
              clip-path: inset(0 0 0 0);
      pointer-events:auto;
    }

  /* ---------- links ---------- */
  .nav-row .nav-link{
    flex:none;
    padding:14px 32px;
    white-space:nowrap;
    text-align:left;
    border-bottom:1px solid
      color-mix(in srgb,var(--primary) 25%,transparent);
  }
  .nav-row .nav-link:last-child{border-bottom:0;}

  #filter-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 auto;
    max-width: 90%;
  }

  #filter-menu button {
    width: 100%;
    font-size: 1.1rem;
    padding: 16px;
    text-align: center;
  }

  .nav-row .nav-link {
    display: block;
    width: 90%;
    padding: 16px;
    font-size: 1.1rem;
    text-align: center;
    border: none;
    border-radius: 8px;
    margin: 6px 0;
    transition: background 0.3s, color 0.3s;
  }

  .nav-row .nav-link.btn-primary {
    background: var(--primary);
    color: var(--bg);
  }

  .nav-row .nav-link.btn-secondary {
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
  }

  .nav-row .nav-link.btn-secondary:hover {
    background: var(--primary);
    color: var(--bg);
  }

  .grid-container {
    grid-template-columns: 1fr;
    margin-inline: 12px;
  }

  .nav {
    background: var(--surface);
    backdrop-filter: none;
  }

  .nav-row {
    background: var(--surface);
    backdrop-filter: none ;
  }

  .nav .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;        /* 🔒 prevents wrapping */
    padding: 18px 24px;
  }

  .brand {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  .brand-name {
    white-space: normal;         /* ✅ allow wrapping */
    word-break: break-word;      /* ✅ wraps at appropriate points */
    text-align: left;            /* optional: aligns better with logo */
  }

  .burger {
    flex-shrink: 0;
    margin-left: auto;
  }
  .cta-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
  }

  .cta-group .hero-cta {
    width: 90%;
    text-align: center;
    align-items:center;
    padding: 16px;
    font-size: 1.1rem;
  }

  /* scale hero text and buttons to fit smaller screens */
  .hero h1 {
    font-size: clamp(28px, 8vw, 32px);
    line-height: 1.2;
  }
  .hero p {
    font-size: clamp(16px, 4.5vw, 18px);
  }
  .hero-status {
    font-size: 0.75rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: 14px 28px;
    font-size: 1rem;
  }

}

/* === MODAL SCROLLBAR STYLING – MATCHES CONTRIBUTIONS CAROUSEL === */

/* Firefox */
.modal-content {
  scrollbar-color: var(--primary) var(--surface);
}

/* WebKit (Chrome, Edge, Safari) */
.modal-content::-webkit-scrollbar {
  width: 10px;
  background: var(--surface);
}

.modal-content::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 6px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 75%, #000 25%);
}

.docs-carousel.dragging {
  cursor: grabbing;
  user-select: none;
}

/* Skill-link buttons --------------------------------------------------*/
.skill-link{
  position:relative;
  transition:transform .25s, box-shadow .25s;
  border:2px solid transparent;
}
.skill-link:hover,
.skill-link:focus-visible{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 8px 22px color-mix(in srgb, var(--primary) 35%, transparent);
  border-color:var(--primary);
}
.skill-link small{
  display:block;
  margin-top:6px;
  color:var(--text-muted);
}
.skill-link:hover small{ color:var(--text-light); }

/* ── Skill tiles behave like buttons ───────────────────────────── */
.skill-link{
  border:2px solid var(--primary);
  transition:transform .25s, box-shadow .25s;
}
.skill-link:hover,
.skill-link:focus-visible{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 10px 26px color-mix(in srgb, var(--primary) 35%, transparent);
  cursor:pointer;
}

/* ── DOWNLOAD ICON CARDS : HIGH-CONTRAST & ON-BRAND ──────────────── */
.icon-row a{
  /* layout */
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border-radius:12px;                 /* same pill radius used on buttons */
  padding:6px;

  /* backdrop: subtle warm-grey card so *all* icon colours pop */
  background:radial-gradient(circle at 30% 30%,
              #ffffff 0%, #f2f4f6 65%, #e8ebed 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:
      0 2px 6px rgba(0,0,0,.25),      /* lift */
      inset 0 1px 2px rgba(255,255,255,.6); /* faint inner highlight */

  /* interaction */
  transition:transform .25s, box-shadow .25s;
  cursor:pointer;
}
.icon-row a:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:
      0 6px 16px rgba(0,0,0,.30),
      inset 0 1px 2px rgba(255,255,255,.65);
}

/* fine-tune icon sizing so GitHub & PDF logos stay crisp */
.icon-row img.icon{
  width:30px;height:30px;
}

/* ───── NAV ─────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 auto auto 0;          /* stay at very top */
  width:100%;z-index:1001;                      /* above dim-layer */
  background:var(--surface);                    /* ☑ solid colour */
  border-bottom:1px solid var(--border-subtle); /* subtle divider */
  /* ✂ remove the old rgba() bg + backdrop-filter lines */
}

/* == GLOBAL DIM-LAYER when mobile drawer is open ========= */
body.menu-open::before{
  content:"";
  position:fixed;inset:0;
  background:rgba(0,0,0,.65);
  z-index:1000;                /* just under the header & drawer */
  pointer-events:none;         /* clicks still reach the drawer */
}

/* == HERO occupies the visible viewport =================== */
.hero{
    padding-top:0;
    padding-bottom:0;
}


/* == DISABLE scroll-reveal animation on mobile ============ */
@media(max-width:768px){
  .reveal{opacity:1 !important;transform:none !important;}
}

/* == MOBILE header breathing room & font-scaling ========= */
@media(max-width:768px){
  .nav .wrapper{
    padding-inline:clamp(12px,4vw,24px);        /* shrink side gaps */
    gap:clamp(12px,3vw,28px);
  }
  .brand-logo{ height:56px; }                   /* slightly bigger logo */
  .brand-name{
    font-size:clamp(18px,5.5vw,22px);           /* slightly bigger title */
  }

  .wrapper{margin-inline:5%}
}

/* nav-height token now lives in variables.css */

/* reduce header height in mobile landscape orientation */
@media (max-width:768px) and (orientation:landscape){
  :root{ --nav-height:48px; }
  .brand-logo{ height:40px; }
  .brand-name{ font-size:clamp(14px,4vw,18px); }
  .nav .wrapper{ padding-block:12px; gap:clamp(8px,2vw,20px); }
}

body{
  /* keeps every page below the sticky/fixed header */
  padding-top:var(--nav-height,72px);
}

/* ─── GLOBAL FADE + BLUR LAYER (matches modal) ───────────── */
body::before{
  content:"";                    /* always present, but invisible…   */
  position:fixed;inset:0;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(4px);     /* identical to modal backdrop      */
  opacity:0;pointer-events:none; z-index:1000;
  transition:opacity .45s ease;  /* smooth fade, same timing curve   */
}
body.menu-open::before{opacity:1;}   /* …until the drawer is open      */

/* ─── Brand title layout ───────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;                       /* logo ↔ text */
}

.brand-name {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  line-height: 1.1;
}

.brand-line.divider {               /* the “│” glyph */
  padding: 0 .4rem;
  opacity: .6;
}

/* Tweak tagline style for better hierarchy */
.brand-line.tagline{
  color: var(--text-light);
  font-weight: 500;
}

/* ─── MOBILE: stack the two phrases, hide the bar ─── */
@media (max-width: 768px) {
  .brand-name {                     /* turn the trio vertical */
    flex-direction: column;
    align-items: flex-start;
    row-gap: 4px;
    text-wrap: balance;             /* friendlier wrapping on small screens */
  }
  .brand-line.divider {             /* ditch the bar */
    display: none;
  }
  .brand-line.name{                 /* make name a block so rule spans */
    display:block;
    position:relative;
  }
  .brand-line.name::after{          /* horizontal teal rule */
    content:"";
    display:block;height:2px;width:100%;
    background:var(--primary);
    border-radius:2px;
    margin: 4px 0 2px 0;
  }
  .brand-line.tagline{              /* soften + slightly bigger */
    font-size: clamp(14px, 4.2vw, 17px);
  }
  .brand{ gap: 8px; }
}



/* 📱  MOBILE ≤ 768 px  – align role + icons on one bottom row */
@media (max-width: 768px) {

  /* reserve space so text above never overlaps the footer */
  .doc-card{
    position: relative;            /* already true, but explicit */
    padding-bottom: 96px;          /* ≈ footer height + spacing */
  }

  /* pin the footer strip to the bottom */
  .doc-footer{
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;                  /* same inset you use elsewhere */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;         /* keeps role text baseline-aligned */
  }

  /* icons now live in normal flow inside the footer */
  .doc-links{
    position: static;              /* overrides earlier absolute */
    display: flex;
    gap: 12px;                     /* one or two icons side-by-side */
  }
}

/* modal embed helpers consolidated into components/modal.css */

.see-less-float {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: none;
  z-index: 1000;
}

/* Sticky See Less replacement */
.see-more-wrap.sticky {
  position: sticky;
  bottom: 1rem;
  width: 100%;
  text-align: center;
  z-index: 1000;
  transition: opacity 0.3s ease;
}

.see-more-wrap.sticky.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* modal responsive block moved to components/modal.css */

/* prevent two-column layout for contribution cards moved to components/doc-card.css */

/* ───────────────────────────────────────────────────────────
   16.  ERROR PAGE
   Center message between header and footer
   ─────────────────────────────────────────────────────────── */
.error-page #main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4rem 1rem;
  min-height:calc(100vh - var(--nav-height,0px) - 64px);
}

/* Increase height for embedded demos so the full content fits in the modal */
/* embedded demo modal sizing moved to components/modal.css */
}


/* === End import: css/utilities/layout.css === */

/* === Begin import: css/utilities/helpers.css === */
/* ===================================================================
   File: helpers.css
   Purpose: Reveal animations and misc helpers
=================================================================== */
@layer utilities {
/* Utility helpers and page-specific tweaks */
/* ───────────────────────────────────────────────────────────
   11.  REVEAL + EXTRAS
   ─────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(50px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.active{opacity:1;transform:none}
.interest-pad{
    padding:48px 0;
}
#filters{
  margin-top:0;
  transition:height .45s cubic-bezier(.22,.61,.36,1),
             padding .45s cubic-bezier(.22,.61,.36,1),
             opacity .35s ease;
  will-change:height,padding,opacity
}
#filters.grid-fade{opacity:0}

/* gap between carousel and filters */
#carousel-gap{
  padding:32px 0; /* 64px total spacing */
  background:var(--surface);
  transition:padding .45s cubic-bezier(.22,.61,.36,1),
             opacity .35s ease;
  will-change:padding,opacity
}
#carousel-gap.grid-fade{opacity:0}
.contact-big{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;padding:32px
}

@media (max-width:768px){
  /* keep cards full-width with breathing room on mobile */
  .contact-big{padding:28px 0 32px}
}
.contact-big .contact-card{padding:32px}
.contact-card i{font-size:38px}

/* ─────────────────────────────────────────────────────────── */
  /* Performance: avoid work for offscreen sections */
  #projects.grid { content-visibility: auto; contain-intrinsic-size: 800px; }
  .docs-grid     { content-visibility: auto; contain-intrinsic-size: 600px; }
  .featured-track, .cert-track { content-visibility: auto; contain-intrinsic-size: 220px; }

  /* Back to top button */
  .back-to-top{
    position:fixed;right:18px;bottom:18px;z-index:1100;
    width:44px;height:44px;border-radius:10px;
    background:var(--surface);color:var(--primary);
    border:2px solid var(--primary);
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow: var(--shadow-sm);
    opacity:0;transform:translateY(8px);pointer-events:none;
    transition:opacity .25s, transform .25s;
  }
  .back-to-top svg{width:22px;height:22px;color:currentColor}
  .back-to-top.show{opacity:1;transform:none;pointer-events:auto}
}


/* === End import: css/utilities/helpers.css === */

/* === Begin import: css/utilities/typography.css === */
/* ===================================================================
   File: typography.css
   Purpose: Text utility helpers
=================================================================== */
@layer utilities {
  /* reserved for future text helpers */

  /* Inline link styling in text contexts */
  p a:not(.btn-primary):not(.btn-secondary):not(.doc-link):not(.pcz-link),
  li a:not(.btn-primary):not(.btn-secondary):not(.doc-link):not(.pcz-link),
  .modal-text a:not(.btn-primary):not(.btn-secondary):not(.doc-link):not(.pcz-link) {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  p a:hover:not(.btn-primary):not(.btn-secondary):not(.doc-link):not(.pcz-link),
  li a:hover:not(.btn-primary):not(.btn-secondary):not(.doc-link):not(.pcz-link),
  .modal-text a:hover:not(.btn-primary):not(.btn-secondary):not(.doc-link):not(.pcz-link) {
    color: var(--link-hover);
  }
}


/* === End import: css/utilities/typography.css === */

/* === Begin import: css/utilities/colors.css === */
/* ===================================================================
   File: colors.css
   Purpose: Color utility classes
=================================================================== */
@layer utilities {
  /* reserved for color utility classes */
}


/* === End import: css/utilities/colors.css === */

/* === Begin import: css/utilities/accessibility.css === */
@layer utilities {
  .skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .skip-link:focus {
    position: absolute;
    left: 10px;
    top: 10px;
    width: auto;
    height: auto;
    padding: 8px 12px;
    background: #fff;
    color: #000;
    z-index: 1000;
  }

  /* Global, consistent focus outline */
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
}


/* === End import: css/utilities/accessibility.css === */

/* === Begin import: css/utilities/color-fallback.css === */
@layer utilities {
  @supports not (color: color-mix(in srgb, black, white)) {
    .project-metric { background: rgba(35, 150, 173, 0.15); }
    .hero { background: rgba(22, 27, 34, 0.5); }
    .modal { background: rgba(13, 17, 23, 0.88); }
    .modal-content {
      box-shadow: 0 10px 28px rgba(13,17,23,0.6), 0 0 0 1px rgba(35,150,173,0.15);
    }

    /* Fallbacks for new tokens using color-mix */
    p a:not(.btn-primary):not(.btn-secondary):not(.doc-link):not(.pcz-link),
    li a:not(.btn-primary):not(.btn-secondary):not(.doc-link):not(.pcz-link),
    .modal-text a:not(.btn-primary):not(.btn-secondary):not(.doc-link):not(.pcz-link) {
      color: #44A6B9;
    }
    :focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
  }
}


/* === End import: css/utilities/color-fallback.css === */