/* =============================================================
   tokens
   ============================================================= */
:root {
  --void: #0a0e17;
  --panel: #111927;
  --panel-2: #17212f;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #e7ecf5;
  --slate: #7e8ca3;
  --slate-dim: #566073;

  --blue: #3e8ef7;
  --cyan: #29d9e8;
  --amber: #f5a93f;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* layout + header */
  --header-h: 68px;
  --container-max: 1180px;
  --container-pad: 24px;
  --logo-box-min: 168px; /* logo width + a little padding */
  --bar-pad-x: 16px; /* right-hand padding of the bar */
  --bar-bg: rgba(10, 14, 23, 0.72);
}

/* =============================================================
   base
   ============================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}
ul {
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}
dl, dt, dd {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

::selection {
  background: var(--blue);
  color: var(--void);
}
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--cyan);
  margin-bottom: 14px;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 38px);
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-primary {
  background: linear-gradient(120deg, var(--blue), var(--cyan));
  color: #071018;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(62, 142, 247, 0.6);
}
.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
}

/* scroll-reveal (progressive enhancement, see nav.js) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================
  site header / navigation

  A fixed, translucent bar laid out as three grid columns:

    [ logo box ]   [ empty space ]   [ page links | burger ]

  The logo box is as wide as the page's left gutter (the space
  to the left of .container's content), so the logo sits centred
  in line with the body padding. It never gets narrower than
  --logo-box-min, so once the gutter disappears on small screens
  it shrinks to the logo plus a little padding.
============================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: grid;
  grid-template-columns:
    max(
      var(--logo-box-min),
      calc((100% - var(--container-max)) / 2 + var(--container-pad))
    )
    1fr
    auto;
  align-items: center;
}

/* The translucent bar is a pseudo-element on purpose: backdrop-filter on
   the header itself would make it the containing block for the
   position: fixed mobile panel and trap the panel inside the bar. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  grid-column: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.brand .tag {
  font-family: var(--font-mono);
  color: var(--cyan);
  font-weight: 500;
}

.nav-panel {
  grid-column: 3;
  padding-right: var(--bar-pad-x);
}

.nav-panel ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-panel a {
  display: inline-block;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--slate);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-panel a:hover,
.nav-panel a:focus-visible {
  color: var(--ink);
  background: var(--panel-2);
}

.nav-trigger {
  display: none;
  grid-column: 3;
  position: relative;
  z-index: 2; /* stays above the open panel so the cross can close it */
  margin-right: var(--bar-pad-x);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-trigger__bar {
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
/* burger -> cross (bar height 2px + gap 6px = 8px between bar centres) */
.nav-trigger[aria-expanded="true"] .nav-trigger__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-trigger[aria-expanded="true"] .nav-trigger__bar:nth-child(2) {
  opacity: 0;
}
.nav-trigger[aria-expanded="true"] .nav-trigger__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* =============================================================
   masthead (hero)
   ============================================================= */
.masthead {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(231, 236, 245, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 22% 30%, black, transparent);
  mask-image: radial-gradient(ellipse 60% 55% at 22% 30%, black, transparent);
  pointer-events: none;
}

.masthead__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.masthead__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin-bottom: 24px;
}

.stamp {
  display: inline-block;
  border: 1px dashed var(--line-strong);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 3px;
  transform: rotate(-2deg);
  margin-bottom: 22px;
}

.masthead h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5.5vw, 58px);
  line-height: 1.05;
  margin-bottom: 18px;
}
.masthead h1 span {
  background: linear-gradient(120deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.masthead .role {
  font-size: 18px;
  color: var(--slate);
  margin-bottom: 20px;
}
.masthead .lede {
  font-size: 17px;
  color: var(--slate);
  max-width: 52ch;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.masthead__stats {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--slate-dim);
}
.masthead__stats span {
  color: var(--slate);
  margin: 0 10px;
}
.masthead__stats span:first-child {
  margin-left: 0;
}

/* =============================================================
   profile
   ============================================================= */
.profile {
  padding: 110px 0;
}

.profile__intro {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-bottom: 48px;
}

.profile__intro-text h2 {
  margin-bottom: 10px;
}
.profile__bio {
  color: var(--slate);
  font-size: 16px;
  max-width: 62ch;
}

.profile__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.fact-group h3 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.fact-group dl > div {
  margin-bottom: 16px;
}
.fact-group dl > div:last-child {
  margin-bottom: 0;
}
.fact-group dt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
  margin-bottom: 3px;
}
.fact-group dd {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.profile__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =============================================================
   findings
   ============================================================= */
.findings {
  padding: 60px 0 110px;
}

.findings__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--slate);
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
    background 0.25s var(--ease);
}
.filter-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.filter-btn.is-active {
  background: var(--panel-2);
  border-color: var(--cyan);
  color: var(--cyan);
}

.findings__list {
  display: flex;
  flex-direction: column;
}

.finding {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease), border-color 0.3s var(--ease);
}
.finding:last-child {
  border-bottom: none;
}
.finding:hover {
  padding-left: 12px;
  border-color: var(--line-strong);
}
.finding.is-hidden {
  display: none;
}

.finding__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.finding__id {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--slate-dim);
}
.finding__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid currentColor;
}
.finding__tag--recon {
  color: var(--blue);
}
.finding__tag--hardening {
  color: var(--cyan);
}
.finding__tag--attack {
  color: var(--amber);
}

.finding__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}

.finding__summary {
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
  max-width: 68ch;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp-lines, 4);
  line-clamp: var(--clamp-lines, 4);
}

.finding__link {
  align-self: flex-start;
  text-decoration: none;
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.finding__link:hover {
  gap: 10px;
  color: var(--cyan);
}

/* =============================================================
   contact
   ============================================================= */
.contact {
  padding: 60px 0 110px;
}

.contact__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
}

.contact__info p {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--slate);
  margin-bottom: 18px;
  font-size: 16px;
}
.contact__info p i {
  color: var(--cyan);
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.socials {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}
.socials a {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--slate);
  transition: all 0.3s var(--ease);
}
.socials a:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  transform: translateY(-3px);
}

.contact__form label {
  display: block;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--slate);
  margin-bottom: 8px;
  margin-top: 18px;
}
.contact__form label:first-child {
  margin-top: 0;
}
.contact__form input,
.contact__form textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.25s var(--ease);
}
.contact__form input:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--cyan);
}
.contact__form textarea {
  resize: vertical;
  min-height: 120px;
}
.contact__form button {
  margin-top: 24px;
  width: 100%;
}

/* =============================================================
   footer
   ============================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer p {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--slate-dim);
}

/* =============================================================
   mobile nav panel (burger layout)
   Breakpoint must match MOBILE_NAV_QUERY in nav.js
   ============================================================= */
@media only screen and (max-width: 800px) {
  .nav-trigger {
    display: flex;
  }

  .nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(320px, 85vw);
    padding: calc(var(--header-h) + 16px) 24px 24px;
    overflow-y: auto;
    background: var(--panel);
    border-left: 1px solid var(--line);
    box-shadow: 0 0 0 100vmax transparent; /* becomes the page scrim when open */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
      visibility 0.35s;
    z-index: 999;
  }
  .nav-panel.is-open {
	  margin-top: 68px;
    transform: none;
    visibility: visible;
    box-shadow: 0 0 0 100vmax rgba(4, 7, 12, 0.55);
  }

  .nav-panel ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .nav-panel li {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav-panel.is-open li {
    opacity: 1;
    transform: none;
  }

  /* stagger on open only; closing fades the links together with the panel */
  .nav-panel.is-open li:nth-child(1) {
    transition-delay: 0.1s;
  }
  .nav-panel.is-open li:nth-child(2) {
    transition-delay: 0.15s;
  }
  .nav-panel.is-open li:nth-child(3) {
    transition-delay: 0.2s;
  }
  .nav-panel.is-open li:nth-child(4) {
    transition-delay: 0.25s;
  }

  .nav-panel a {
    display: block;
    font-size: 22px;
    font-weight: 600;
    padding: 12px 14px;
  }
}

/* =============================================================
   responsive
   ============================================================= */
@media only screen and (max-width: 900px) {
  .profile__facts,
  .contact__grid {
    grid-template-columns: 1fr;
  }
  .profile__facts {
    gap: 32px;
  }
}

@media only screen and (max-width: 800px) {
  .masthead {
    padding: 120px 0 60px;
  }
  .profile {
    padding: 70px 0;
  }
  .profile__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .findings {
    padding: 30px 0 70px;
  }
  .contact {
    padding: 30px 0 70px;
  }
  .findings__head {
    align-items: flex-start;
  }
}

/* =============================================================
   article page (xss.html etc.) — kept so existing article pages
   don't break; not part of the rebuilt component set above
   ============================================================= */
.article-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 10px 10%;
}
.article-page .main-content {
  flex: 1 0 auto;
}
.article-content {
  padding: 130px 0 60px;
}
.article-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  color: var(--ink);
}
.article-title img {
  height: 48px;
  width: 48px;
}
.article-title h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
}
.article-date {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--slate);
  margin-bottom: 30px;
}
.article-image {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  margin-bottom: 30px;
  border: 1px solid var(--line);
}
.article-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--slate);
}
.article-text p {
  margin-bottom: 20px;
}
.article-page footer {
  flex-shrink: 0;
}

@media only screen and (max-width: 800px) {
  .article-content {
    padding: 110px 0 40px;
  }
  .article-title h2 {
    font-size: 26px;
  }
}