/* Portrait styling is photo-safe at every size. Layout overrides stop at 1024px. */
.hero-profile,.hero-profile .profile-image{mix-blend-mode:normal}
.profile-image{max-width:100%;object-fit:cover;object-position:50% 20%}
.hero-profile .profile-image,.about-profile .profile-image{object-position:50% 20%}
@media(max-width:1024px){
  *,*::before,*::after{box-sizing:border-box}
  html,body{max-width:100%;overflow-x:clip}
  main>section,.footer-inner,.about-layout,.contact-layout{min-width:0}
  .nav-menu,.nav-status{display:none}
  .menu-toggle{display:flex;width:44px;height:44px;flex-shrink:0}
  .nav-brand{min-height:44px}
  .mobile-nav{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
  .mobile-nav-item a,.mobile-nav-cta{min-height:48px}
  .primary-button,.text-button,.about-back{min-height:44px}
  .hero{min-height:0}
  .hero-top{margin-top:45px}
  .intro,.mission{width:32%}
  .about-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px}
  .about-sidebar{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:32px}
  .about-tools{margin-top:0}
  .about-bottom{grid-column:1/-1}
  .contact-layout{grid-template-columns:1fr;max-width:620px;gap:30px}
  .contact-intro,.contact-note{max-width:none}
  .contact-stage{display:flex;flex-wrap:wrap;gap:12px;padding:10px}
  .contact-device{width:100%;max-width:none;flex:0 0 100%;margin-bottom:10px}
  .contact-float{position:static;flex:1 1 140px;box-shadow:none;min-width:0}
  .journey-timeline{display:flex;flex-direction:column;gap:28px;max-width:660px;padding-left:25px;margin-top:32px}
  .journey-timeline::before{top:0;bottom:0;left:3px;right:auto;width:1px;height:auto;background:linear-gradient(var(--orange),#ff742f25)}
  .journey-card,.journey-experience,.journey-education{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto;gap:18px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#ffffff02}
  .journey-card::after,.journey-experience::after{left:-26px;top:28px;bottom:auto}
  .journey-card .journey-symbol{grid-row:1;grid-column:1;align-self:start;width:60px;height:60px;margin:0}
  .journey-card .journey-symbol svg{width:34px;height:34px}
  .journey-card .journey-copy{grid-row:1;grid-column:2;padding:0;align-self:start}
  .journey-card h3{font-size:17px}.journey-card p{font-size:14px}
  .journey-number{color:var(--orange);font-size:25px;margin-top:12px}
  .journey-number::after,.journey-legend{display:none}
  .footer-inner{grid-template-columns:1fr;gap:24px;text-align:center}
  .footer-center{order:1}.footer-left{order:2}.footer-right{order:3}
  .footer-left,.footer-right{align-items:center}
  .footer-nav-links,.footer-social-links,.footer-right-sub{justify-content:center;flex-wrap:wrap}
  .footer-nav-links a,.footer-social-item,.footer-right-sub a{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:767px){
  .site-header{top:8px;padding:0 10px}.nav-dock{padding:5px 10px}
  .nav-dock>.nav-cta,.nav-actions>.nav-cta{display:none}
  .about,.labs,.journey,.contact{margin-inline:6px;padding:52px 18px;min-height:0}

  /* ==================================================
     MOBILE HERO REDESIGN (<= 767px)
     Cinematic full-screen composition with layered text
     ================================================== */
  .hero {
    min-height: 100svh;
    height: auto;
    max-height: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: calc(var(--nav-clearance, 76px) + 16px) !important;
    padding-bottom: 28px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box;
    background: var(--bg, #191918);
  }
  @supports not (min-height: 100svh) {
    .hero {
      min-height: 100vh;
    }
  }

  /* Desktop-only meta note & mission are hidden on mobile hero */
  .hero-meta {
    display: none !important;
  }
  .hero .mission {
    display: none !important;
  }

  /* 3. PROFILE IMAGE - Cinematic Background Layer (z-index: 1) */
  .hero-profile {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #191918 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Orange rim-light / backlight glow behind subject */
  .hero-profile::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 85% !important;
    height: 75% !important;
    background: radial-gradient(ellipse at 75% 28%, rgba(237, 137, 85, 0.22) 0%, rgba(237, 137, 85, 0.07) 45%, transparent 70%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Profile image: adjustable via object-position */
  .hero-profile .profile-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 65% 10% !important;
    mix-blend-mode: normal !important;
    opacity: 0.92 !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  /* Gradient overlays: left-to-right (headline readability) & bottom-to-top (name readability) */
  .hero-profile .portrait-shade {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      /* Dark gradient from left to right for headline & text readability */
      linear-gradient(90deg, rgba(25, 25, 24, 0.96) 0%, rgba(25, 25, 24, 0.82) 36%, rgba(25, 25, 24, 0.28) 70%, rgba(25, 25, 24, 0.5) 100%),
      /* Dark gradient from bottom to top for name & label readability */
      linear-gradient(0deg, rgba(25, 25, 24, 0.98) 0%, rgba(25, 25, 24, 0.88) 18%, rgba(25, 25, 24, 0.25) 45%, transparent 65%),
      /* Subtle top fade under fixed navbar */
      linear-gradient(180deg, rgba(25, 25, 24, 0.85) 0%, rgba(25, 25, 24, 0.2) 15%, transparent 30%) !important;
  }

  /* Top Container Layer (z-index: 3) */
  .hero-top {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .intro {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* 1. Small badge at top-left: [ ● Curious by nature ] */
  .intro .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px 6px 10px !important;
    border-radius: 9999px !important;
    background: rgba(25, 25, 24, 0.72) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #d1cfc7 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    width: fit-content !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    margin: 0 !important;
  }

  .intro .eyebrow i {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--orange, #ed8955) !important;
    box-shadow: 0 0 8px #ed8955 !important;
    flex-shrink: 0 !important;
  }

  /* 2. MAIN HEADLINE: Cybersecurity student & digital builder. */
  .intro h2 {
    position: relative !important;
    margin: 18px 0 0 !important;
    font-family: inherit !important;
    font-size: clamp(2.8rem, 11vw, 4.4rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.045em !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    max-width: 12ch !important;
    overflow-wrap: break-word !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75) !important;
  }

  .intro h2 span {
    color: #c5c4be !important;
    font-weight: 450 !important;
  }

  /* 4. SUPPORTING TEXT */
  .intro p {
    position: relative !important;
    margin: 18px 0 0 !important;
    font-size: clamp(1rem, 3.8vw, 1.25rem) !important;
    line-height: 1.5 !important;
    color: #aaa9a3 !important;
    max-width: 28ch !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85) !important;
  }

  /* 5. BOTTOM LABEL & 6. NAME SECTION (z-index: 3) */
  .identity {
    position: relative !important;
    z-index: 3 !important;
    margin-top: auto !important;
    padding: 36px 0 0 !important;
    width: 100% !important;
  }

  /* 5. Bottom label: THE HUMAN BEHIND THE TERMINAL */
  .identity-label {
    font-size: clamp(9px, 2.4vw, 11px) !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #a8a69e !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
  }

  /* 6. Name section: Thilanga. Dilshan. */
  .identity #hero-name {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 0 .15em !important;
    font-size: clamp(1.5rem, 10.5vw, 4.8rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.055em !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9) !important;
  }

  .hero-first-name,
  .hero-last-name {
    color: #ffffff !important;
    background: linear-gradient(100deg, #faf9f5 10%, #edede9 65%, #c5c4be 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    white-space: nowrap !important;
  }

  .hero-last-name {
    text-align: right !important;
  }

  .name-dot {
    color: var(--orange, #ed8955) !important;
    -webkit-text-fill-color: var(--orange, #ed8955) !important;
  }
  .interests-between{padding:20px 18px 28px}
  .about-layout{display:flex;flex-direction:column;gap:28px}
  .about-story{width:100%}
  .about-profile{width:100%;aspect-ratio:4/5;min-height:0;max-width:380px;align-self:center;border-color:#ff742f66;box-shadow:0 0 28px #ff742f10;margin:28px auto;border-radius:24px}
  .about-story .about-profile{transform:none;opacity:1}
  .about-profile img{width:100%;height:100%;object-fit:cover}
  .about h2{font-size:60px}.about p{font-size:15px}.about h3{font-size:22px}
  .about-mindset{margin-top:28px}.about-mindset li{gap:12px}
  .about-sidebar{display:block;width:100%;padding:0}
  .about-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:12px}
  .about-skill-grid li{padding:16px;border:1px solid var(--line);border-radius:12px;background:#ffffff02}
  .about-skill-grid li>span:last-child{font-size:14px}
  .about-tools{margin-top:30px}.about-tools ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .about-tools li{padding:12px;border:1px solid var(--line);border-radius:12px;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
  .about-tools h4{font-size:14px;overflow-wrap:anywhere}.about-tools li p{font-size:12px}
  .about-bottom{width:100%;gap:12px}.about-bottom>span{width:100%;line-height:1.7}.about-back{margin-left:0;display:inline-flex;align-items:center}
  .labs-inner{display:flex;flex-direction:column;align-items:stretch}
  .labs-eyebrow{order:0}.labs h2{order:1;font-size:clamp(30px,7vw,42px);margin:18px 0 12px}
  .labs-intro{order:2;padding:0;margin-bottom:18px}
  .labs .lab-gallery{order:3;display:grid;width:100%;max-width:500px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 88px 88px;gap:10px;padding:4px;height:auto;min-height:0;margin:12px auto 24px}
  .labs .lab-card[data-slot="3"]{grid-column:1/-1;grid-row:1;min-height:310px}
  .labs .lab-card[data-slot="0"]{grid-column:1;grid-row:2}.labs .lab-card[data-slot="1"]{grid-column:2;grid-row:2}.labs .lab-card[data-slot="2"]{grid-column:3;grid-row:2}
  .labs .lab-card[data-slot="4"]{grid-column:1;grid-row:3}.labs .lab-card[data-slot="5"]{grid-column:2;grid-row:3}.labs .lab-card[data-slot="6"]{grid-column:3;grid-row:3}
  .labs .lab-card:not(.lab-featured){height:auto;align-self:stretch}
  .labs .lab-card:not(.lab-featured) .lab-card-label{display:block;font-size:10px;text-align:center;line-height:1.3}
  .labs .lab-card:not(.lab-featured) .lab-card-inner{padding:8px;gap:4px}
  .labs .lab-featured .lab-card-inner{padding:20px;min-height:310px}
  .labs .lab-featured .lab-code{font-size:12px;overflow-wrap:anywhere;white-space:pre-wrap}
  .labs .lab-featured .lab-card-label{font-size:20px}.labs .lab-featured .lab-card-index{font-size:9px}
  .labs .lab-window span{display:block;font-size:10px}.labs .lab-telemetry{font-size:8px}
  .lab-details{order:4;min-height:0}.labs .lab-open{order:5;align-self:center;max-width:100%;margin-top:18px}.labs-hint{order:6}
  .lab-details p{padding:0}.lab-details li{font-size:12px}
  .journey-timeline{gap:22px;padding-left:20px}
  .journey-card,.journey-experience,.journey-education{grid-template-columns:44px minmax(0,1fr);padding:16px 12px;gap:12px}
  .journey-card .journey-symbol{width:42px;height:46px}.journey-card .journey-symbol svg{width:28px;height:28px}
  .journey-card::after,.journey-experience::after{left:-21px}
  .journey-card h3{font-size:16px}.journey-card p{font-size:14px;line-height:1.65}.journey-meta{font-size:12px}
  .contact-layout{width:100%;gap:28px}.contact h2{font-size:clamp(32px,7.4vw,50px);overflow-wrap:anywhere;line-height:1.08}
  .contact-note{padding:24px 18px;margin-top:32px}.contact-note-label{max-width:calc(100% - 30px);font-size:10px}
  .contact-stage{padding:8px;gap:10px}.contact-device{padding:22px 16px;border-radius:24px}
  .contact-form input,.contact-form textarea{font-size:16px;min-height:48px}.contact-form textarea{min-height:130px}
  .contact-form .primary-button{min-height:48px;width:100%}
  .contact-float{flex-basis:120px;padding:12px}.contact-float small{font-size:11px}
  .site-footer{margin-inline:6px;padding:28px 18px}.footer-nav-links{gap:4px 18px}.footer-social-links{gap:8px 18px}
  .footer-left-meta{flex-wrap:wrap;justify-content:center;line-height:1.7}
  dialog{padding:32px 22px;max-height:calc(100dvh - 32px);overflow-y:auto}.close-dialog{min-width:44px;min-height:44px}
}
@media(max-width:480px){
  .hero {
    padding-inline: 16px !important;
    padding-bottom: 24px !important;
  }
  .about,.labs,.journey,.contact{padding-inline:16px}
  .nav-dock .nav-cta{display:none}

  /* Refined typography on standard mobile screens */
  .intro h2 {
    font-size: clamp(2.3rem, 10.5vw, 3.2rem) !important;
    line-height: 0.98 !important;
  }
  .intro p {
    font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
  }

  .hero-profile .profile-image {
    object-position: 65% 10% !important;
  }
}
@media(max-width:360px){
  .hero {
    padding-inline: 14px !important;
  }
  .about,.labs,.journey,.contact{padding-inline:14px}
  .intro .eyebrow {
    font-size: 11px !important;
    padding: 5px 11px 5px 8px !important;
    gap: 6px !important;
  }
  .intro h2 {
    font-size: clamp(2rem, 10.5vw, 2.5rem) !important;
  }
  .intro p {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }
  .identity-label {
    font-size: 8.5px !important;
    letter-spacing: 0.16em !important;
  }
  .journey-card,.journey-experience,.journey-education{grid-template-columns:1fr}
  .journey-card .journey-copy{grid-column:1;grid-row:2}
  .contact-note-bottom{font-size:11px}
  .labs .lab-featured .lab-card-inner{padding:16px}
}
@media(prefers-reduced-motion:reduce){.mobile-nav{animation:none}.hero-profile,.about-profile{transition:none}}