:root{
    --ink:#0B2422;
    --teal-deep:#0E4F49;
    --teal:#127C74;
    --teal-bright:#1FAE9E;
    --seafoam:#AFDECF;
    --gold:#C7993E;
    --gold-soft:#E7C876;
    --stone:#2A2118;
    --stone-deep:#1B140D;
    --paper:#FFFFFF;
    --parchment:#afdecf;
    --line:#E4EAE8;
    --text:#0F2624;
    --text-soft:#4B615F;
    --text-faint:#8AA09D;

    --font-display:'Cinzel', serif;
    --font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --ease:cubic-bezier(.22,.9,.32,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--parchment); color:var(--text);
    font-family:var(--font-body); -webkit-font-smoothing:antialiased;
    overflow-x:hidden; position:relative; min-height:100vh;
  }
  a{color:inherit;} img,svg{display:block; max-width:100%;} button{font-family:inherit;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }

  /* full-viewport background — fixed so it never scrolls */
  .grid-bg{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:#afdecf;
  }
  .grid-node{
    position:fixed; z-index:0; width:4px; height:4px; border-radius:50%;
    background:var(--gold); pointer-events:none;
    animation:nodeGlow 3.6s ease-in-out infinite;
  }
  @keyframes nodeGlow{
    0%,100%{ opacity:.15; box-shadow:0 0 0 rgba(199,153,62,0); }
    50%{ opacity:.9; box-shadow:0 0 10px rgba(199,153,62,.7); }
  }

  #page{ position:relative; z-index:1; transition:filter .5s ease, opacity .5s ease, transform .5s ease; }
  body.modal-open #page{
    filter:grayscale(1); opacity:.32; transform:scale(.985);
    pointer-events:none;
  }

  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px clamp(20px,5vw,64px);
    border-bottom:1px solid var(--line);
    background:var(--paper);
    position:relative; z-index:2;
  }
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg, var(--teal-bright), var(--gold));
    z-index:40; transition:width .1s linear;
    box-shadow:0 0 8px rgba(31,174,158,.5);
  }
  .brand{ display:flex; align-items:center; }
  .brand-mark{
    height:36px; width:auto; flex-shrink:0;
    display:flex; align-items:center;
    text-decoration:none;
  }
  .brand-mark img{
    height:100%; width:auto;
    max-width:none;
    object-fit:contain;
    display:block;
  }
  .role-pill{
    font-size:12px; font-weight:600; color:var(--teal-deep);
    background:rgba(31,174,158,.1); border:1px solid rgba(31,174,158,.25);
    padding:6px 14px; border-radius:999px;
  }

  main{ max-width:1000px; margin:0 auto; padding:0 clamp(20px,5vw,64px) 100px; }

  /* -----------------------------------------------------------------
     DUO FRAME — dev half / glowing divider / hero half, matching
     the approved wireframe split.
     ----------------------------------------------------------------- */
  .duo-frame{
    position:relative;
    display:flex; align-items:stretch; gap:0;
    margin-left:calc(-1 * clamp(20px, 5vw, 64px));
    margin-right:calc(-1 * clamp(20px, 5vw, 64px));
    padding:52px clamp(20px, 5vw, 64px) 44px;
    overflow:hidden;
  }
  .duo-frame::before{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      linear-gradient(rgba(175,222,207,.75), rgba(175,222,207,.08)),
      url("../assets/profile-bg1-01.jpg") center / cover no-repeat;
  }
  .duo-frame > *{ position:relative; z-index:1; }

  .stagger{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
  .stagger.in{ opacity:1; transform:translateY(0); }

  .dev-half{ min-width:260px; padding-right:36px; perspective:1000px; }
  .dev-eyebrow{
    font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-soft); margin:0 0 20px;
  }
  .dev-photo-float{
    animation:flipIn .95s cubic-bezier(.22,.9,.32,1) .45s both,
              floatBob 4.5s ease-in-out 1.4s infinite;
    transform-style:preserve-3d;
  }
  .dev-photo-float:has(.dev-photo:hover){ animation-play-state:paused; }
  @keyframes flipIn{
    0%{ transform:rotateY(-100deg); opacity:0; }
    55%{ opacity:1; }
    100%{ transform:rotateY(0deg); opacity:1; }
  }
  @keyframes floatBob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
  }
  .ripple{
    position:absolute; border-radius:50%; pointer-events:none;
    background:rgba(255,255,255,.5);
    transform:scale(0); opacity:.6;
    animation:rippleOut .55s ease-out forwards;
  }
  @keyframes rippleOut{
    to{ transform:scale(2.6); opacity:0; }
  }
  .dev-photo{
    position:relative;
    width:100%; max-width:280px; aspect-ratio:1/1; border-radius:30px;
    background:linear-gradient(150deg, var(--teal-deep), var(--ink));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:var(--font-display); font-size:56px; font-weight:600;
    box-shadow:0 26px 50px -26px rgba(15,38,36,.45);
    transition:transform .25s ease, box-shadow .25s ease;
    will-change:transform;
    overflow:hidden;
    margin-bottom:24px;
  }
  .dev-photo::before{
    /* faint etched circuit lines across the portrait tile */
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:28px 28px;
    opacity:.5;
  }
  .dev-photo span{ position:relative; }
  .dev-photo img{
    position:relative; z-index:1;
    width:100%; height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center top;
    border-radius:30px;
    display:block;
  }

  .dev-name{ font-size:25px; font-weight:800; margin:0 0 4px; letter-spacing:-.01em; }
  .dev-role{ font-size:14.5px; color:var(--teal); font-weight:600; margin:0 0 12px; }
  .dev-tagline{ font-size:14.5px; line-height:1.75; color:var(--text-soft); margin:0; max-width:46ch; }

  /* divider with a glowing connector node — history/tech link */
  .frame-divider{
    flex:0 0 auto; width:1px; align-self:stretch; margin:6px 0;
    background:linear-gradient(to bottom, transparent, var(--line) 14%, var(--line) 86%, transparent);
    position:relative;
  }
  .divider-node{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:9px; height:9px; border-radius:50%;
    background:radial-gradient(circle, var(--gold-soft), var(--gold));
    box-shadow:0 0 0 4px var(--parchment), 0 0 12px rgba(199,153,62,.6);
    animation:nodePulse 2.6s ease-in-out infinite;
  }
  @keyframes nodePulse{
    0%,100%{ transform:translate(-50%,-50%) scale(1); }
    50%{ transform:translate(-50%,-50%) scale(1.35); }
  }

  .hero-half{
    flex:0 0 300px; padding-left:98px; margin-top: 0px;
    filter:grayscale(.6); opacity:.75; cursor:pointer;
    transition:filter .3s ease, opacity .3s ease;
  }
  .hero-half:hover, .hero-half:focus-within, .hero-half.touched{
    filter:grayscale(0); opacity:1;
  }
  .hero-label{
    font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-faint); margin:0 0 24px;
  }

  .hero-widget-row{
    display:flex; align-items:flex-start; gap:18px;
    border-radius:12px;
    transition-delay:.34s;
    background:#ffffff9e;
    padding:9px;
    min-width:318px;
    margin-right:12px;
  }

  /* the scan-frame: corner brackets acquiring a target, echoing
     the QR scan that opened this page in the first place */
  .scan-frame{ position:relative; width:128px; height:128px; flex-shrink:0; }
  .scan-frame svg.brackets{ position:absolute; inset:0; width:100%; height:100%; }
  .scan-frame .brackets path{
    stroke:var(--text-faint); stroke-width:2.6; fill:none;
    stroke-linecap:round; stroke-linejoin:round;
    transition:stroke .3s ease;
    animation:bracketPulse 3.4s ease-in-out infinite;
  }
  @keyframes bracketPulse{
    0%,100%{ opacity:.55; }
    50%{ opacity:1; }
  }
  .hero-widget-row:hover .brackets path{ stroke:var(--gold); }

  .scan-inner{
    position:absolute; inset:18px; border-radius:14px; overflow:hidden;
    background:linear-gradient(165deg,#211A12, var(--stone) 55%, var(--stone-deep));
  }
  .scan-inner .hero-avatar{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .scan-inner .hero-avatar svg{
    width:62%; height:62%;
    filter:grayscale(.7); opacity:.7;
    transition:filter .3s ease, opacity .3s ease;
  }
  .scan-inner .hero-avatar img{
    width:100%; height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center 18%;
    filter:grayscale(.7); opacity:.7;
    transition:filter .3s ease, opacity .3s ease;
  }
  .hero-widget-row:hover .scan-inner .hero-avatar svg,
  .hero-widget-row:hover .scan-inner .hero-avatar img{ filter:grayscale(0); opacity:1; }

  .scan-sweep{
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
    box-shadow:0 0 8px rgba(231,200,118,.7);
    animation:sweep 3s ease-in-out infinite;
  }
  @keyframes sweep{
    0%{ top:0; opacity:0; }
    10%{ opacity:1; }
    90%{ opacity:1; }
    100%{ top:100%; opacity:0; }
  }

  .scan-frame.locked svg.brackets path{ stroke:var(--gold); animation:none; }
  .scan-frame.locked{ animation:lockPulse .4s var(--ease); }
  @keyframes lockPulse{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.08); }
    100%{ transform:scale(1); }
  }

  .hero-meta{ padding-top:4px; }
  .hero-name-mini{
    font-family:var(--font-display); font-size:16px; font-weight:600;
    color:var(--ink); margin:0 0 3px; line-height:1.3;
  }
  .hero-era-mini{
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em;
    color:var(--text-faint); margin:0 0 16px;
  }
  .more-details-btn{
    position:relative; overflow:hidden;
    background:var(--ink); color:var(--gold-soft);
    border:1px solid rgba(231,200,118,.3);
    font-size:11.5px; font-weight:700; letter-spacing:.03em;
    padding:10px 18px; border-radius:10px; cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    transition:background .2s ease, transform .15s ease, box-shadow .25s ease;
  }
  .more-details-btn:hover{ background:var(--teal-deep); transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(18,124,116,.5); }
  .more-details-btn:active{ transform:translateY(0) scale(.97); }
  .more-details-btn svg{ width:12px; height:12px; }

  /* -----------------------------------------------------------------
     Supporting sections
     ----------------------------------------------------------------- */
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  .section{ padding:32px 0; border-top:1px solid var(--line); }
  .section-head{ margin-bottom:16px; position:relative; }
  .section-head h2{
    display:flex; align-items:center; gap:10px;
    font-size:18px; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
    color:#0f2624; margin:0; padding-bottom:10px;
  }
  .section-icon{
    width:22px; height:22px; flex-shrink:0;
    object-fit:contain; display:block;
  }
  .section-head h2::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
    /* background:linear-gradient(90deg, var(--teal-bright), var(--gold)); */
    transition:width .7s var(--ease);
  }
  .section.reveal.in .section-head h2::after{ width:48px; }

  .about-text{ font-size:15px; line-height:1.8; color:var(--text-soft); max-width:64ch; }

  .tag-grid{ display:flex; flex-wrap:wrap; gap:10px; }
  .tag{
    font-size:13px; font-weight:600; color:var(--teal-deep);
    background:var(--paper); border:1px solid var(--line);
    padding:9px 16px; border-radius:999px;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .5s ease;
    opacity:0; transform:translateY(10px) scale(.94);
  }
  .section.reveal.in .tag{ opacity:1; transform:translateY(0) scale(1); }
  .tag:hover{ transform:translateY(-3px) scale(1.04); border-color:var(--teal-bright); box-shadow:0 10px 18px -12px rgba(18,124,116,.45); }

  .tag:nth-child(1){ transition-delay:.03s; } .tag:nth-child(2){ transition-delay:.07s; }
  .tag:nth-child(3){ transition-delay:.11s; } .tag:nth-child(4){ transition-delay:.15s; }
  .tag:nth-child(5){ transition-delay:.19s; } .tag:nth-child(6){ transition-delay:.23s; }
  .tag:nth-child(7){ transition-delay:.27s; } .tag:nth-child(8){ transition-delay:.31s; }

  .stack-row{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
  .stack-item{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text-soft); }
  .stack-dot{ width:7px; height:7px; border-radius:50%; background:var(--teal-bright); transition:transform .3s ease, box-shadow .3s ease; }
  .stack-item:hover .stack-dot{ transform:scale(1.6); box-shadow:0 0 8px rgba(31,174,158,.6); }

  .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:14px;
    padding:20px; transition:transform .25s ease, box-shadow .25s ease, opacity .5s ease;
    opacity:0; transform:translateY(14px);
  }
  .section.reveal.in .card{ opacity:1; transform:translateY(0); }
  .card:hover{ transform:translateY(-5px) rotate(-.4deg); box-shadow:0 18px 32px -18px rgba(15,38,36,.3); }
  .card:nth-child(1){ transition-delay:.04s; } .card:nth-child(2){ transition-delay:.1s; }
  .card:nth-child(3){ transition-delay:.16s; } .card:nth-child(4){ transition-delay:.22s; }
  .card h3{ font-size:14.5px; margin:0 0 6px; }
  .card p{ font-size:13.5px; line-height:1.6; color:var(--text-soft); margin:0; }

  .contact-row{ display:flex; flex-wrap:wrap; gap:12px; }
  .contact-link{
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:10px;
    background:var(--ink); color:#fff; border-radius:999px;
    padding:12px 20px; font-size:13.5px; font-weight:600;
    text-decoration:none; transition:transform .18s ease, background .2s ease, box-shadow .25s ease;
  }
  .contact-link:hover{ transform:translateY(-3px); background:var(--teal-deep); box-shadow:0 14px 26px -14px rgba(18,124,116,.5); }
  .contact-link:active{ transform:translateY(-1px) scale(.97); }
  .contact-link.outline{ background:transparent; color:var(--text); border:1px solid var(--line); }
  .contact-link.outline:hover{ background:var(--paper); border-color:var(--teal-bright); color:var(--teal-deep); }
  .contact-link svg{ width:16px; height:16px; transition:transform .3s ease; }
  .contact-link:hover svg{ transform:scale(1.15) rotate(-6deg); }

  footer{
    padding:30px clamp(20px,5vw,64px) 40px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:12px; color:var(--text-faint);
    position:relative; z-index:1;
  }

  /* -----------------------------------------------------------------
     HERO OVERLAY
     ----------------------------------------------------------------- */
  .hero-overlay{
    position:fixed; inset:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    background:rgba(8,20,19,.62);
    opacity:0; visibility:hidden;
    transition:opacity .4s ease, visibility 0s linear .4s;
  }
  body.modal-open .hero-overlay{
    opacity:1; visibility:visible;
    transition:opacity .4s ease, visibility 0s linear 0s;
  }

  .hero-modal{
    position:relative;
    width:100%; max-width:400px;
    background:linear-gradient(165deg,#211A12, var(--stone) 55%, var(--stone-deep));
    border:1px solid rgba(231,200,118,.25);
    border-radius:28px;
    padding:44px 34px 36px;
    text-align:center;
    box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
    transform:scale(.55);
    filter:blur(6px);
    transition:transform .6s cubic-bezier(.2,.8,.2,1.15), filter .5s ease;
  }
  body.modal-open .hero-modal{ transform:scale(1); filter:blur(0); }
  .hero-modal::before{
    content:"";
    position:absolute; inset:0; border-radius:28px;
    background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 24px);
    mix-blend-mode:overlay; pointer-events:none;
  }

  .modal-close{
    position:absolute; top:16px; right:16px;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.06); border:1px solid rgba(231,200,118,.3);
    color:var(--gold-soft); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, transform .2s ease;
    overflow:hidden;
  }
  .modal-close:hover{ background:rgba(255,255,255,.12); transform:rotate(90deg); }
  .modal-close svg{ width:14px; height:14px; }

  .modal-item{ opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease; }
  body.modal-open .modal-item{ opacity:1; transform:translateY(0); }
  body.modal-open .modal-item:nth-child(2){ transition-delay:.08s; }
  body.modal-open .modal-item:nth-child(3){ transition-delay:.14s; }
  body.modal-open .modal-item:nth-child(4){ transition-delay:.2s; }
  body.modal-open .modal-item:nth-child(5){ transition-delay:.26s; }

  .modal-avatar{
    width:104px; height:104px; border-radius:50%; margin:0 auto 16px;
    background:radial-gradient(circle at 38% 30%, #3A2E1C, var(--stone) 75%);
    box-shadow:inset 0 0 0 1px rgba(231,200,118,.35), 0 0 26px rgba(199,153,62,.2);
    display:flex; align-items:center; justify-content:center;
    transform:scale(.7);
    transition:transform .5s var(--ease), opacity .45s ease;
  }
  body.modal-open .modal-avatar{ transform:scale(1); }
  .modal-avatar svg{ width:60%; height:60%; }
  .modal-avatar img{
    width:100%; height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center 18%;
    border-radius:50%;
    display:block;
  }
  .modal-eyebrow{
    font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold-soft); margin:0 0 10px;
  }
  .modal-name{
    font-family:var(--font-display); font-size:23px; font-weight:600;
    color:#F5EFE0; margin:0 0 6px; line-height:1.3;
  }
  .modal-era{ font-family:var(--font-mono); font-size:12px; color:var(--seafoam); margin:0 0 18px; }
  .modal-desc{ font-size:14px; line-height:1.75; color:#C9D8D5; margin:0; max-width:32ch; margin-left:auto; margin-right:auto; }

  /* -----------------------------------------------------------------
     MOBILE — keep the photo | divider | hero pairing side-by-side,
     but size both columns so they fit the viewport. overflow:hidden
     on .duo-frame must not clip the hero (was cutting it off on phones).
     ----------------------------------------------------------------- */
  @media (max-width:760px){
    main{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .duo-frame{
      flex-wrap:nowrap; align-items:flex-start;
      padding-bottom:22px;
      overflow:visible;
    }
    .dev-half{
      flex:1 1 0;
      min-width:0;
      width:auto;
      max-width:min(48vw, 220px);
      padding-right:0;
    }
    .dev-photo{ width:100%; max-width:100%; }

    .frame-divider{ flex:0 0 auto; margin:0 10px; }

    .hero-half{
      flex:0 0 auto;
      width:min(40vw, 148px);
      max-width:148px;
      padding-left:0;
      filter:grayscale(.6); opacity:.75; cursor:pointer;
      transition:filter .3s ease, opacity .3s ease;
    }
    .hero-half:hover, .hero-half:focus-within, .hero-half.touched{
      filter:grayscale(0); opacity:1;
    }
    .hero-label{
      font-size:10px; letter-spacing:.1em; margin-bottom:12px;
      max-width:100%; overflow-wrap:anywhere; word-break:break-word;
    }
    .hero-widget-row{
      flex-direction:column; align-items:center; text-align:center; gap:10px;
      width:100%; max-width:100%; min-width:0; margin-right:0;
      box-sizing:border-box;
    }
    .scan-frame{ width:58px; height:58px; }
    .scan-inner{ inset:10px; border-radius:10px; }
    .hero-meta{
      padding-top:0;
      width:100%; max-width:100%; min-width:0;
    }
    .hero-name-mini{
      font-size:12.5px;
      max-width:100%;
      overflow-wrap:break-word;
      word-break:break-word;
      hyphens:auto;
    }
    .hero-era-mini{
      font-size:9.5px; margin-bottom:10px;
      max-width:100%;
      overflow-wrap:break-word;
      word-break:break-word;
    }
    .more-details-btn{
      padding:8px 12px; font-size:10px;
      max-width:100%; box-sizing:border-box;
    }
    .more-details-btn svg{ width:10px; height:10px; }
  }