:root{
    --bg:#04090e;
    --bg-panel:#0a141c;
    --bg-panel-2:#0d1922;
    --text:#edf3f6;
    --muted:#7e8e97;
    --muted-2:#586269;
    --cyan:#5dd0f3;
    --blue-deep:#0e4c68;
    --blue-mid:#1c7ea8;
    --hairline:rgba(255,255,255,0.09);
    --radius:14px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ::selection{background:var(--blue-mid); color:#fff;}

  .mono{font-family:'Space Mono',monospace;}
  .eyebrow{
    font-family:'Space Mono',monospace;
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--cyan);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .wrap{max-width:1180px; margin:0 auto; padding-left:32px; padding-right:32px;}

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(4,9,14,0.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hairline);
  }
  .nav-inner{
    max-width:1180px; margin:0 auto; padding:18px 32px;
    display:flex; align-items:center; justify-content:space-between;
    gap:20px;
  }
  .nav-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:16px;
    letter-spacing:0.02em;
  }
  .nav-logo img{height:28px; width:auto;}
  .nav-title{
    font-family:'Space Mono',monospace;
    font-weight:400;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    padding-left:14px;
    margin-left:2px;
    border-left:1px solid var(--hairline);
  }
  .nav-links{display:flex; align-items:center; gap:28px; font-size:14px; color:var(--muted);}
  .nav-links a{transition:color .2s ease;}
  .nav-links a:hover{color:var(--text);}
  .badge{
    font-family:'Space Mono',monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--cyan);
    border:1px solid rgba(93,208,243,0.35);
    padding:8px 14px;
    border-radius:999px;
    white-space:nowrap;
    display:flex; align-items:center; gap:8px;
  }
  .badge .dot{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
  .nav-mobile-hide{display:flex;}

  /* ---------- NAV TOGGLE / MOBILE MENU ---------- */
  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:40px; height:40px;
    background:transparent;
    border:1px solid var(--hairline);
    border-radius:8px;
    cursor:pointer;
    flex-shrink:0;
  }
  .nav-toggle span{
    display:block;
    width:18px; height:2px;
    background:var(--text);
    border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-menu{
    display:none;
    flex-direction:column;
    max-height:0;
    overflow:hidden;
    border-top:1px solid transparent;
    transition:max-height .3s ease, border-color .3s ease;
  }
  .mobile-menu.open{
    max-height:280px;
    border-top:1px solid var(--hairline);
  }
  .mobile-menu a{
    padding:16px 32px;
    font-size:15px;
    color:var(--muted);
    border-bottom:1px solid var(--hairline);
  }
  .mobile-menu a:hover{color:var(--text);}

  @media (max-width:860px){
    .nav-toggle{display:flex;}
    .mobile-menu{display:flex;}
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:96px 0 96px;
    position:relative;
    background:radial-gradient(ellipse 65% 55% at 50% 0%, rgba(28,126,168,0.30) 0%, rgba(28,126,168,0) 72%), var(--bg);
  }
  .hero h1{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:clamp(40px, 7vw, 88px);
    line-height:0.96;
    letter-spacing:-0.015em;
    text-transform:uppercase;
    margin:22px 0 28px;
    max-width:900px;
  }
  .hero h1 span{color:var(--cyan);}
  .hero p.lead{
    font-size:18px;
    color:var(--muted);
    max-width:560px;
    margin-bottom:36px;
  }
  .stat-line{
    font-family:'Space Mono',monospace;
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--cyan);
    margin-bottom:8px;
  }
  .cta-row{display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:12px;}
  .btn-primary{
    font-family:'Space Mono',monospace;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#03141c;
    background:linear-gradient(180deg, #7fdcf7, var(--cyan));
    padding:16px 32px;
    border-radius:999px;
    box-shadow:0 0 0 1px rgba(93,208,243,0.4), 0 12px 30px -8px rgba(93,208,243,0.55);
    transition:transform .2s ease, box-shadow .2s ease;
    display:inline-block;
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(93,208,243,0.6), 0 16px 36px -6px rgba(93,208,243,0.7);}
  .link-underline{
    font-size:14px;
    color:var(--text);
    border-bottom:1px solid var(--muted-2);
    padding-bottom:2px;
    transition:border-color .2s ease, color .2s ease;
  }
  .link-underline:hover{color:var(--cyan); border-color:var(--cyan);}

  /* ---------- SECTION SHELL ---------- */
  section{padding:120px 0; border-top:1px solid var(--hairline);}
  .section-head{margin-bottom:48px;}
  .section-head h2{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:clamp(28px,4vw,44px);
    text-transform:uppercase;
    letter-spacing:-0.015em;
    line-height:1.02;
    margin-top:14px;
    max-width:640px;
  }

  /* ---------- WORK / FILTERS ---------- */
  .filters-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
    margin-bottom:40px;
  }
  .card-from .unread{transition:opacity .4s ease, transform .4s ease;}
  .card-from .unread.read{opacity:0; transform:scale(0.4);}
  .inbox-row .unread{transition:opacity .4s ease, transform .4s ease;}
  .inbox-row .unread.read{opacity:0; transform:scale(0.4);}

  .filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:0;}

  .view-toggle{display:flex; gap:6px; border:1px solid var(--hairline); border-radius:999px; padding:4px;}
  .view-btn{
    display:flex; align-items:center; gap:7px;
    font-family:'Space Mono',monospace;
    font-size:11.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    background:transparent;
    border:none;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    transition:all .2s ease;
  }
  .view-btn:hover{color:var(--text);}
  .view-btn.active{color:#03141c; background:var(--cyan);}

  /* ---------- INBOX LIST VIEW ---------- */
  .inbox-list{display:none; flex-direction:column; border-top:1px solid var(--hairline);}
  .inbox-list.active{display:flex;}
  .grid.inactive{display:none;}

  .inbox-row{
    display:grid;
    grid-template-columns:auto 40px 1fr auto;
    align-items:center;
    gap:16px;
    padding:16px 14px;
    border-bottom:1px solid var(--hairline);
    cursor:pointer;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .4s ease, transform .4s ease, background .2s ease;
  }
  .inbox-row.visible{opacity:1; transform:translateY(0);}
  .inbox-row.hidden{display:none;}
  .inbox-row:hover{background:var(--bg-panel);}
  .inbox-row .unread{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); flex-shrink:0;}
  .inbox-thumb{
    width:40px; height:40px;
    border-radius:6px;
    overflow:hidden;
    background:var(--bg-panel-2);
    border:1px solid var(--hairline);
    flex-shrink:0;
  }
  .inbox-thumb img{width:100%; height:100%; object-fit:cover; object-position:top;}
  .inbox-body{min-width:0;}
  .inbox-subject{
    font-size:14.5px;
    font-weight:600;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .inbox-snippet{
    font-size:13px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:2px;
  }
  .inbox-meta{
    display:flex; align-items:center; gap:14px;
    flex-shrink:0;
  }
  .inbox-type{
    font-family:'Space Mono',monospace;
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cyan);
    border:1px solid rgba(93,208,243,0.3);
    padding:3px 9px;
    border-radius:999px;
    white-space:nowrap;
  }
  .inbox-time{
    font-family:'Space Mono',monospace;
    font-size:11.5px;
    color:var(--muted-2);
    white-space:nowrap;
    min-width:44px;
    text-align:right;
  }
  @media (max-width:700px){
    .inbox-row{grid-template-columns:auto 36px 1fr; gap:12px;}
    .inbox-meta{display:none;}
    .inbox-subject, .inbox-snippet{max-width:100%;}
  }

  .filter-btn{
    font-family:'Space Mono',monospace;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    background:transparent;
    border:1px solid var(--hairline);
    padding:10px 18px;
    border-radius:999px;
    cursor:pointer;
    transition:all .2s ease;
  }
  .filter-btn:hover{color:var(--text); border-color:var(--muted-2);}
  .filter-btn.active{
    color:#03141c;
    background:var(--cyan);
    border-color:var(--cyan);
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .card{
    background:var(--bg-panel);
    border:1px solid var(--hairline);
    border-radius:var(--radius);
    overflow:hidden;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .5s ease, transform .5s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .card.visible{opacity:1; transform:translateY(0);}
  .card.hidden{display:none;}
  .card:hover{border-color:rgba(93,208,243,0.45); box-shadow:0 18px 40px -20px rgba(93,208,243,0.35);}
  .card-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid var(--hairline);
  }
  .card-from{
    display:flex; align-items:center; gap:8px;
    font-family:'Space Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted-2);
  }
  .card-from .unread{width:6px; height:6px; border-radius:50%; background:var(--cyan);}
  .card-type{
    font-family:'Space Mono',monospace;
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cyan);
    border:1px solid rgba(93,208,243,0.3);
    padding:3px 9px;
    border-radius:999px;
  }
  .card-img{aspect-ratio:4/3; overflow:hidden; background:var(--bg-panel-2);}
  .card-img img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s ease;}
  .card:hover .card-img img{transform:scale(1.04);}
  .card-caption{padding:14px 16px 18px; font-size:13.5px; color:var(--muted);}

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:56px;
    align-items:start;
  }
  .about-photo{
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--hairline);
  }
  .about-copy p{margin-bottom:20px; color:var(--muted); font-size:16px; max-width:640px;}
  .about-copy strong{color:var(--text); font-weight:600;}
  .about-copy p:first-child{color:var(--text); font-size:19px; line-height:1.55;}

  /* ---------- DO / USE columns with hairline dividers ---------- */
  .col-group{
    display:grid;
    gap:0;
    border-top:1px solid var(--hairline);
  }
  .col-group.cols-3{grid-template-columns:repeat(3,1fr);}
  .col-group.cols-2{grid-template-columns:repeat(2,1fr);}
  .col-item{
    padding:36px 32px 36px 0;
    border-right:1px solid var(--hairline);
  }
  .col-group.cols-3 .col-item:last-child,
  .col-group.cols-2 .col-item:last-child{border-right:none;}
  .col-item:not(:first-child){padding-left:32px;}
  .col-item .eyebrow{margin-bottom:14px;}
  .col-item h3{
    font-family:'Archivo',sans-serif;
    font-size:20px;
    font-weight:800;
    text-transform:uppercase;
    margin-bottom:18px;
  }
  .col-item ul{list-style:none;}
  .col-item li{
    font-size:14.5px;
    color:var(--muted);
    padding:9px 0;
    border-top:1px solid var(--hairline);
  }
  .col-item li:first-child{border-top:none;}

  /* ---------- FOOTER ---------- */
  footer{
    padding:72px 0 40px;
    text-align:center;
    border-top:1px solid var(--hairline);
  }
  .footer-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-bottom:28px;
  }
  .footer-mark{height:40px; width:auto;}
  .footer-wordmark{
    font-size:20px;
    font-weight:800;
    font-family:'Archivo',sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .footer-wordmark .nav-title{
    display:inline-block;
    font-size:12px;
  }
  footer .foot-links{
    display:flex; justify-content:center; gap:26px;
    font-size:14px; color:var(--muted);
    margin-bottom:28px;
  }
  footer .foot-links a:hover{color:var(--cyan);}
  footer .tagline{
    font-family:'Space Mono',monospace;
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted-2);
    margin-bottom:14px;
  }
  footer .copyright{font-size:12.5px; color:var(--muted-2);}
  footer .wink{font-size:12px; color:var(--muted-2); margin-top:10px; font-style:italic;}
  footer .credit{
    font-family:'Space Mono',monospace;
    font-size:10px;
    letter-spacing:0.06em;
    color:var(--muted-2);
    opacity:0.35;
    margin-top:8px;
    transition:opacity .35s ease, color .35s ease;
  }
  footer:hover .credit{opacity:1; color:var(--cyan);}

  /* ---------- BACK TO TOP ---------- */
  .back-to-top{
    position:fixed;
    right:28px; bottom:28px;
    width:52px; height:52px;
    border-radius:50%;
    background:var(--bg-panel);
    border:1px solid var(--hairline);
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease, border-color .2s ease, background .2s ease;
    z-index:40;
  }
  .back-to-top.visible{opacity:1; visibility:visible; transform:translateY(0);}
  .back-to-top:hover{border-color:rgba(93,208,243,0.5); background:var(--bg-panel-2); color:var(--cyan);}
  @media (max-width:560px){
    .back-to-top{right:18px; bottom:18px; width:46px; height:46px;}
  }

  /* ---------- LIGHTBOX ---------- */
  .card{cursor:pointer;}
  .lightbox{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    padding:40px;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .lightbox.open{opacity:1; visibility:visible;}
  .lightbox-backdrop{
    position:absolute; inset:0;
    background:rgba(2,6,10,0.86);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .lightbox-inner{
    position:relative;
    max-width:900px; width:100%;
    max-height:90vh;
    background:var(--bg-panel);
    border:1px solid var(--hairline);
    border-radius:var(--radius);
    overflow:hidden;
    display:flex; flex-direction:column;
    transform:scale(0.96) translateY(10px);
    transition:transform .3s ease;
  }
  .lightbox.open .lightbox-inner{transform:scale(1) translateY(0);}
  .lightbox-close{
    position:absolute; top:14px; right:14px; z-index:2;
    width:36px; height:36px;
    border-radius:50%;
    background:rgba(4,9,14,0.7);
    border:1px solid var(--hairline);
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
  }
  .lightbox-close:hover{border-color:rgba(93,208,243,0.5); color:var(--cyan);}
  .lightbox-arrow{
    position:absolute; top:50%; z-index:2;
    width:48px; height:48px;
    border-radius:50%;
    background:rgba(10,20,28,0.7);
    border:1px solid var(--hairline);
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transform:translateY(-50%);
    transition:border-color .2s ease, color .2s ease, background .2s ease;
  }
  .lightbox-arrow:hover{border-color:rgba(93,208,243,0.5); color:var(--cyan); background:rgba(10,20,28,0.9);}
  .lightbox-prev{left:16px;}
  .lightbox-next{right:16px;}
  @media (max-width:700px){
    .lightbox-arrow{width:40px; height:40px;}
    .lightbox-prev{left:6px;}
    .lightbox-next{right:6px;}
  }
  .lightbox-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 60px 14px 18px;
    border-bottom:1px solid var(--hairline);
  }
  .lightbox-img-wrap{
    background:var(--bg-panel-2);
    overflow:auto;
    max-height:calc(90vh - 110px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }
  .lightbox-img-wrap img{width:100%; height:auto; display:block; flex-shrink:0;}
  .lightbox-caption{padding:14px 18px 18px; font-size:14px; color:var(--muted);}
  @media (max-width:560px){
    .lightbox{padding:16px;}
    .lightbox-img-wrap{max-height:calc(90vh - 96px);}
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:860px){
    .nav-mobile-hide{display:none;}
    .nav-title{display:none;}
    .footer-wordmark .nav-title{display:inline-block;}
    .hero{padding:110px 0 80px;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .about-grid{grid-template-columns:1fr;}
    .about-photo{max-width:220px;}
    .col-group.cols-3, .col-group.cols-2{grid-template-columns:1fr; border-top:none;}
    .col-item{border-right:none; border-top:1px solid var(--hairline); padding:28px 0;}
    .col-item:first-child{border-top:none;}
    .col-item:not(:first-child){padding-left:0;}
  }
  @media (max-width:560px){
    .wrap{padding-left:20px; padding-right:20px;}
    .grid{grid-template-columns:1fr;}
    section{padding:72px 0;}
  }