/* ============================================================
   VARIABLES & BASE RESETS
   Design tokens (colors, fonts) and global resets.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Background tiers ---- */
  --bg:      #000;        /* Page background */
  --surface: #080a09;     /* Card / elevated surface */
  --raised:  #0c100e;     /* Popovers, higher elevation */

  /* ---- Text ---- */
  --text:  #eff2f0;       /* Primary text */
  --muted: #8b918e;       /* Secondary / caption text */

  /* ---- Borders ---- */
  --line: #191e1b;        /* Subtle dividers */

  /* ---- Accent (green) ---- */
  --green:  #238b50;      /* Primary accent */
  --bright: #67b883;      /* Bright / highlight accent */

  /* ---- Fonts ---- */
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Geist', Arial, sans-serif;
}

/* ---- Universal reset ---- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Remove tap highlights on mobile */
button, a {
  -webkit-tap-highlight-color: transparent;
}

button, input {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  color: inherit;
}

button, a {
  touch-action: manipulation;
}

button:disabled {
  cursor: default;
}

/* Focus ring (accessibility) */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bright);
  outline-offset: 6px;
}

/* Text selection */
::selection {
  background: #14532c;
  color: white;
}

/* ---- Layout container ---- */
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 32px;
}

/* Skip-to-content link (accessibility) */
.skip-link {
  position: fixed;
  top: -80px;
  left: 12px;
  background: var(--green);
  padding: 15px;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}

/* ============================================================
   TYPOGRAPHY
   Text utility classes, headings, and inline highlights.
   ============================================================ */

/* Muted text (secondary color) */
.muted {
  color: #727a75;
}

/* Green accent text */
.green {
  color: var(--green);
}

/* ---- Wordmark / logo ---- */
.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .04em;
}

/* Supplied site logo */
.site-logo {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
}

/* "SECURITY RESEARCHER" subtitle */
.wordmark-sub {
  display: block;
  font: 7px var(--mono);
  letter-spacing: .12em;
  color: #8d968f;
  margin-top: 5px;
}

/* ---- Headings ---- */
h2 {
  font-size: 44px;
  line-height: 1.18;
  font-weight: 450;
  letter-spacing: -.045em;
  margin: 0;
}

/* Hero "offensive" pixel-style text */
.pixel-word {
  color: #f0f5f1;
  text-shadow: 1px 0 #ffffff30, -1px 0 #ffffff30;
}

/* ---- Small label / eyebrow ---- */
.eyebrow {
  font: 10px var(--mono);
  letter-spacing: .14em;
  color: #98a59d;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pulsing green dot (status indicator) */
.status-dot {
  height: 5px;
  width: 5px;
  background: #48a46a;
  border-radius: 50%;
  box-shadow: 0 0 10px #26844588;
  display: inline-block;
}

/* Inline code-style highlight */
.inline-highlight {
  color: #88b795;
  background: #0d1d12;
  padding: 1px 7px;
  border-radius: 3px;
}

/* Arrow-style text link */
.text-link {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  color: #b7c9bc;
  padding: 10px 0;
}
.text-link:hover {
  color: #74c38e;
}

/* Noscript fallback */
.noscript-note {
  padding: 30px;
  color: #a5b5aa;
}

/* Hidden on desktop, shown on mobile */
.mobile-break {
  display: none;
}

/* ============================================================
   BUTTONS
   Primary (green gradient) and secondary (dark outline) styles.
   ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 13px 20px;
  border-radius: 6px;
  font-size: 12px;
  min-height: 46px;
  font-weight: 550;
  transition: background .2s, transform .2s;
  border: 1px solid transparent;
}
.button:hover {
  transform: translateY(-2px);
}

/* Primary — green gradient CTA */
.primary {
  background: linear-gradient(180deg, #176536, #104c29);
  border-color: #2c7a47;
  color: #e9f4ed;
  box-shadow: inset 0 1px #a1d9ad15;
}
.primary:hover {
  background: #216f3e;
}

/* Secondary — dark outline */
.secondary {
  background: #050706;
  border-color: #212a24;
  color: #aab4ad;
}
.secondary:hover {
  border-color: #435c4b;
  color: #fff;
}

/* ============================================================
   NAVIGATION
   Site header, nav links, contact button, mobile menu toggle.
   ============================================================ */

.site-header {
  height: 65px;
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}

.nav-inner {
  max-width: 1280px;
  margin: auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
}

nav {
  display: flex;
  align-items: center;
  gap: 34px;
  justify-self: center;
}

nav > a {
  font-size: 14px;
  color: #a3a9a5;
  transition: color .2s;
}
nav > a:hover {
  color: #fff;
}

/* "Contact me" button in the nav bar */
.nav-contact {
  background: #eef0ef;
  color: #101511;
  border: 0;
  border-radius: 6px;
  padding: 9px 15px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  gap: 20px;
  justify-self: end;
  margin: 0;
}
.nav-contact:hover {
  background: #fff;
}

/* Mobile contact button (hidden on desktop) */
.mobile-contact {
  display: none;
}

/* Hamburger toggle (hidden on desktop, shown on mobile) */
.menu-toggle {
  display: none;
}

/* ============================================================
   HERO SECTION
   Full-viewport hero with globe canvas, headline, and CTAs.
   ============================================================ */

.hero {
  position: relative;
  min-height: 600px;
  height: calc(100svh - 128px);
  max-height: 960px;
  overflow: hidden;
}

/* ---- Hero text content (overlaid on canvas) ---- */
.hero-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-40%);
  z-index: 2;
  pointer-events: none;   /* Let clicks pass through to the globe */
  padding-top: 0;
}
.hero-content a {
  pointer-events: auto;   /* But buttons are clickable */
}

.hero h1 {
  font-size: clamp(56px, 5.12vw, 73.6px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 0 0 30px;
  max-width: 620px;
}

.hero-description {
  color: #989c99;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -.015em;
  max-width: 540px;
  margin: 0;
}

/* CTA buttons row */
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 35px;
}
.hero-actions .button {
  min-height: 42px;
  padding: 10px 17px;
  font-size: 12px;
  gap: 22px;
}

/* ---- Globe canvas container ---- */
.hero-art {
  position: absolute;
  right: -110px;
  top: 35px;
  width: 1280px;
  height: 1000px;
  z-index: 0;
  mask-image: linear-gradient(to right, transparent 0%, #0005 20%, black 44%);
  opacity: .2;
  pointer-events: none;
}

#globe {
  width: 100%;
  height: 100%;
  opacity: 1;
}

/* Dark fade on the left side of the globe */
.hero-art:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000c, transparent 48%);
  pointer-events: none;
}

/* Original artwork with a live depth effect; the image remains the fallback. */
.hero-portrait {
  position: absolute;
  z-index: 1;
  width: min(58vw, 860px);
  right: max(0px, calc((100vw - 1440px) / 2));
  top: 52%;
  transform: translateY(-46%);
  isolation: isolate;
  outline-offset: -12px;
  border-radius: 24px;
  -webkit-tap-highlight-color: transparent;
}

.portrait-scene {
  position: relative;
  width: 100%;
  filter: saturate(.65) brightness(.82) drop-shadow(0 0 0 #ffffff00) drop-shadow(0 0 0 #ffffff00);
  transition: filter 650ms cubic-bezier(.2,.7,.2,1);
  animation: portrait-arrive 1.5s cubic-bezier(.16,1,.3,1) both;
}

.portrait-scene img {
  display: block;
  width: 100%;
  height: auto;
}

#portrait-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.portrait-ready #portrait-canvas { opacity: 1; }
.portrait-ready #portrait-source { visibility: hidden; }
.portrait-paused .portrait-scene { animation-play-state: paused; }

.portrait-light {
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 55% 45%, #dce8ed16, transparent 62%);
  opacity: 0;
  transition: opacity 850ms ease;
}

.hero-portrait:focus-visible .portrait-scene {
  filter: saturate(1) brightness(1) drop-shadow(0 0 8px #ffffff38) drop-shadow(0 0 24px #ffffff1a);
}
.hero-portrait:focus-visible .portrait-light { opacity: 1; }

@media (hover: hover) {
  .hero-portrait:hover .portrait-scene {
    filter: saturate(1) brightness(1) drop-shadow(0 0 8px #ffffff38) drop-shadow(0 0 24px #ffffff1a);
  }
  .hero-portrait:hover .portrait-light { opacity: 1; }
}

@keyframes portrait-arrive {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Bottom bar (pause motion button) ---- */
.hero-bottom {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  z-index: 3;
  pointer-events: none;
}
.hero-bottom button {
  pointer-events: auto;
  border: 1px solid #ffffff0c;
  border-radius: 4px;
  background: #0008;
  font: 9px var(--mono);
  color: #a0a8a2;
  min-height: 32px;
  padding: 6px 10px;
}
.hero-bottom a {
  display: flex;
  align-items: center;
  gap: 22px;
}
.hero-bottom button span {
  margin-left: 8px;
}

/* ---- Decorative labels on the globe (desktop only) ---- */
.globe-label {
  position: absolute;
  right: 190px;
  top: 360px;
  background: #031308df;
  border: 1px solid #234e2f;
  padding: 9px 13px;
  border-radius: 4px;
  font: 9px var(--mono);
  color: #8bba98;
  display: flex;
  align-items: center;
  gap: 8px;
}
.globe-label i {
  height: 5px;
  width: 5px;
  background: #6cbe80;
  border-radius: 50%;
}

.coordinate {
  position: absolute;
  font: 8px var(--mono);
  letter-spacing: .15em;
  color: #3e5b46;
}
.coordinate-a { right: 250px; top: 100px; }
.coordinate-b { right: 110px; bottom: 75px; }

.crosshair {
  color: #4d9161;
  font-size: 16px;
  margin-right: 12px;
}

/* ============================================================
   SHARED SECTION STYLES
   Common layout for all page sections + discipline strip.
   ============================================================ */

.section {
  padding-top: 100px;
  padding-bottom: 108px;
}

/* Section label bar — e.g. "01 / ABOUT" */
.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 9px var(--mono);
  letter-spacing: .13em;
  color: #728076;
  margin-bottom: 46px;
}

.small-symbol {
  color: #54725e;
}

/* Sections with top & bottom border */
.border-section {
  border-block: 1px solid var(--line);
}

/* Intro block — heading left, description right */
.section-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 45px;
}
.section-intro p {
  font-size: 14px;
  line-height: 1.7;
  color: #79877e;
  margin: 0 0 4px;
  min-width: 210px;
}

/* ---- Discipline strip (horizontal bar below hero) ---- */
.discipline-strip {
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.discipline-track {
  display: flex;
  width: max-content;
  animation: discipline-scroll 28s linear infinite;
}
.discipline-group {
  display: flex;
  flex-shrink: 0;
  width: max(100vw, 900px);
}
.discipline-group > span {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 17px;
  font-size: 15px;
  color: #a2aaa5;
  padding: 31px 16px;
  border-inline-start: 1px solid var(--line);
  min-height: 105px;
}
.discipline-strip i {
  font: 20px var(--mono);
  color: #58675d;
  font-style: normal;
}

.discipline-strip:hover .discipline-track,
.discipline-strip.motion-paused .discipline-track {
  animation-play-state: paused;
}

@keyframes discipline-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .discipline-track { animation: none; }
  .discipline-group { width: 100vw; }
  .discipline-group > span { white-space: normal; text-align: center; }
  .discipline-group[aria-hidden="true"] { display: none; }
}

/* ============================================================
   ABOUT SECTION
   Two-column grid: heading + bio copy.
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 1.6fr);
  gap: 64px;
}

.about-copy {
  max-width: none;
  min-width: 0;
  padding-top: 4px;
}

.about-copy p {
  font-size: 17px;
  color: #9aa29d;
  line-height: 1.8;
  margin: 0 0 20px;
}

.about-copy strong {
  font-weight: 500;
  color: #e9eee9;
}

.about-toolkit { margin: 28px 0; padding-top: 24px; border-top: 1px solid #ffffff1a; }
.about-toolkit h3 { margin: 0 0 14px; color: #aebdb3; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.about-toolkit ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.about-toolkit li { padding: 8px 11px; border: 1px solid #ffffff20; border-radius: 7px; background: #ffffff05; color: #d0d0d0; font: 11px var(--mono); }

/* ============================================================
   CERTIFICATIONS SECTION
   3-column card gallery with empty-state placeholder.
   ============================================================ */

.certificate-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* Individual cert card (button for click-to-enlarge) */
.certificate-card {
  padding: 24px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #030504;
  text-align: left;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background .2s;
}
.certificate-card:hover {
  background: #09110c;
}
.certificate-card img {
  width: 100%;
  aspect-ratio: 1.42;
  object-fit: contain;
  background: #0b100d;
}
.certificate-card .cert-meta {
  display: flex;
  justify-content: space-between;
  font: 10px var(--mono);
  color: #99a69d;
}
.certificate-card h3 {
  font-size: 15px;
  font-weight: 450;
  margin: 0;
}

/* ---- Empty state (no certs yet) ---- */
.empty-credentials {
  grid-column: 1 / -1;
  padding: 45px 40px;
  display: flex;
  align-items: center;
  gap: 35px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse at 15% 50%, #0a150e, transparent 65%);
}

/* Decorative certificate outline icon */
.certificate-outline {
  width: 105px;
  height: 76px;
  border: 1px solid #294132;
  padding: 14px;
  position: relative;
  transform: rotate(-5deg);
  flex-shrink: 0;
}
.certificate-outline:before {
  content: '';
  display: block;
  height: 5px;
  width: 43px;
  background: #395240;
  margin: 4px 0 13px;
}
.certificate-outline:after {
  content: '';
  display: block;
  border-top: 1px solid #294132;
  border-bottom: 1px solid #294132;
  width: 67px;
  height: 8px;
}
.certificate-outline i {
  position: absolute;
  bottom: -9px;
  right: 12px;
  width: 22px;
  height: 22px;
  border: 1px solid #477c54;
  border-radius: 50%;
  background: #0a150e;
}

.empty-credentials h3,
.empty-block h3 {
  font-size: 18px;
  font-weight: 450;
  margin: 0 0 8px;
  color: #b6c0b9;
}

.empty-credentials p,
.empty-block p {
  font-size: 13px;
  line-height: 1.7;
  color: #7f8c83;
  margin: 0;
}

.empty-label {
  font: 9px var(--mono);
  letter-spacing: .1em;
  color: #537c60;
  margin-bottom: 12px;
  display: block;
}

/* ============================================================
   PROJECTS SECTION
   Tab-based showcase with preview panel and empty state.
   ============================================================ */

.project-showcase {
  display: grid;
  grid-template-columns: 330px 1fr;
  border: 1px solid var(--line);
}

/* ---- Left sidebar: project tabs ---- */
.project-tabs {
  border-right: 1px solid var(--line);
  background: #020403;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 14px;
}

.project-tab {
  width: 100%;
  display: flex;
  gap: 20px;
  padding: 28px 23px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  color: #7f8a83;
  position: relative;
  border: 1px solid transparent;
  border-radius: 12px;
  transform-origin: center;
  transition: transform .45s cubic-bezier(.22,1,.36,1), background .3s, border-color .3s, box-shadow .3s, color .3s;
}

/* Active / selected tab */
.project-tab[aria-selected=true] {
  background: linear-gradient(120deg, #1b1b1b, #090909);
  color: #e5eee8;
  border-color: #ffffff30;
  box-shadow: inset 2px 0 #508b61, 0 12px 28px #0007;
  transform: scale(1.025);
}

.project-tab > div { min-width: 0; padding-right: 12px; }
.project-tab::after { content: '\2197'; position: absolute; right: 14px; top: 26px; color: #d4d4d4; opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s, transform .3s; }
.project-tab[aria-selected=true]::after, .project-tab:focus-visible::after { opacity: 1; transform: none; }
.project-tab:focus-visible { outline: 2px solid #b8cfbe; outline-offset: 3px; transform: scale(1.045); }
@media (hover: hover) and (pointer: fine) {
  .project-tab:hover { z-index: 1; transform: scale(1.045); background: linear-gradient(120deg, #252525, #101010); border-color: #ffffff50; color: #fff; box-shadow: 0 14px 32px #0009, inset 0 1px #ffffff12; }
  .project-tab:hover::after { opacity: 1; transform: none; }
  .project-tab:active { transform: scale(1.01); }
}

.glass-motion-paused .project-tab { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .project-tab, .project-tab[aria-selected=true], .project-tab:hover, .project-tab:focus-visible { transform: none; transition: none; }
  .project-tab::after { transform: none; transition: none; }
}

.project-tab > span {
  font: 10px var(--mono);
  padding-top: 3px;
  color: #557260;
}
.project-tab strong {
  font-size: 14px;
  font-weight: 450;
  display: block;
}
.project-tab small {
  display: block;
  font-size: 12px;
  color: #78857c;
  line-height: 1.5;
  margin-top: 8px;
}

/* ---- Right panel: image preview ---- */
.project-preview {
  min-height: 370px;
  padding: 28px;
  background-color: #030604;
  background-image: radial-gradient(#1c3122 1px, transparent 1px);
  background-size: 11px 11px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-details {
  width: 100%;
  min-width: 0;
  border: 1px solid #ffffff26;
  border-radius: 16px;
  background: linear-gradient(135deg, #151515e6, #070707f5);
  box-shadow: 0 16px 48px #0008;
  overflow: hidden;
}
.project-details .window-bar { border-color: #ffffff14; }
.project-details-body { padding: clamp(22px, 3vw, 36px); }
.project-category { font: 9px var(--mono); letter-spacing: .12em; color: #94b39e; }
.project-details h3 { margin: 18px 0 14px; font-size: clamp(24px, 3vw, 36px); font-weight: 450; letter-spacing: -.035em; }
.project-details p { margin: 0; color: #b1b1b1; font-size: 14px; line-height: 1.75; }
.project-details ul { padding-left: 18px; margin: 22px 0 28px; color: #c4c4c4; font-size: 12px; line-height: 1.7; }
.project-details li + li { margin-top: 8px; }
.project-details li::marker { color: #759c80; }
.project-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.project-actions .button { gap: 10px; padding: 13px 16px; font-size: 11px; }
.project-actions img { flex-shrink: 0; }

/* Clickable image button */
.project-image-button {
  background: #090d0a;
  border: 1px solid #27382c;
  border-radius: 7px;
  padding: 0;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 16px 60px #000;
}
.project-image-button img {
  display: block;
  width: 100%;
  max-height: 450px;
  object-fit: contain;
}

/* ---- Empty state (no projects yet) ---- */
.project-empty {
  width: 100%;
  background: #080d0a;
  border: 1px solid #213027;
  border-radius: 7px;
  box-shadow: 0 15px 60px #000;
  max-width: 630px;
}

/* Fake window title bar */
.window-bar {
  padding: 12px 16px;
  border-bottom: 1px solid #1b2920;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #718178;
  font: 9px var(--mono);
}
.window-bar i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #344b3c;
}
.window-bar span {
  margin-left: auto;
}

.empty-project-content {
  padding: 44px 35px;
}
.empty-project-content .terminal-symbol {
  font: 28px var(--mono);
  color: #2c7e45;
  display: block;
  margin-bottom: 24px;
}
.empty-project-content h3 {
  font-size: 23px;
  letter-spacing: -.035em;
  font-weight: 450;
  line-height: 1.4;
  margin: 0 0 15px;
}
.empty-project-content p {
  font-size: 12px;
  color: #76877c;
  line-height: 1.6;
  max-width: 300px;
}

/* Status bar at the bottom of the empty project card */
.archive-state {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid #1b2920;
  font: 8px var(--mono);
  color: #65816d;
}

/* ============================================================
   CONTENT LISTS  — Writeups & Field Notes
   Shared editorial list styles used by both sections.
   ============================================================ */

.editorial-list {
  border-top: 1px solid var(--line);
}

/* Empty-state block (no entries yet) */
.empty-block {
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.empty-block .index {
  font: 10px var(--mono);
  color: #4b7057;
  margin-right: 20px;
}
.empty-block .empty-arrow {
  font-size: 28px;
  color: #344c3d;
}
.empty-block > div {
  flex: 1;
}

/* ---- Notes grid (two-column layout) ---- */
.notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
}
.notes .empty-block {
  align-items: flex-start;
}

/* ---- Entry link (populated writeup / note) ---- */
.entry-link {
  display: flex;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.entry-link:hover {
  color: var(--bright);
}
.entry-link h3 {
  font-size: 18px;
  font-weight: 450;
  margin: 0 0 8px;
}
.entry-link p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

/* ============================================================
   CONTACT SECTION & DIALOGS
   CTA section, modal dialogs, image lightbox.
   ============================================================ */

/* ---- Contact CTA section ---- */
.contact-section {
  overflow: hidden;
}

.contact-inner {
  padding-block: 95px;
  position: relative;
}
.contact-inner h2 {
  font-size: 72px;
  line-height: 1.1;
  margin: 30px 0;
}

.contact-email {
  position: relative;
  z-index: 1;
  gap: 12px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.gmail-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.contact-links, #contact-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.contact-social { gap: 12px; }
.social-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }

/* Large decorative "+" reticle */
.contact-reticle {
  position: absolute;
  right: 100px;
  top: 40px;
  font: 300px var(--mono);
  font-weight: 400;
  color: #0e1c12;
  transform: rotate(8deg);
  pointer-events: none;
}

/* ---- Dialogs (contact + image lightbox) ---- */
dialog {
  border: 1px solid #2b3f31;
  background: #080d0a;
  color: #e9efeb;
  padding: 45px;
  max-width: 540px;
  width: calc(100% - 32px);
  border-radius: 9px;
}
dialog::backdrop {
  background: #000d;
  backdrop-filter: blur(8px);
}
dialog h2 {
  margin: 25px 0;
}
dialog p {
  font-size: 14px;
  line-height: 1.7;
  color: #9aa79e;
}

/* Close button (×) */
.dialog-close {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 28px;
  color: #b2c2b7;
}

/* ---- Image lightbox dialog ---- */
#image-dialog {
  max-width: 1000px;
  padding: 55px 20px 20px;
}
#full-image {
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
}
#image-caption {
  margin: 15px 0 0;
  text-align: center;
}

/* Lock scroll when a modal is open */
body.modal-open {
  overflow: hidden;
}

/* Social profile shared by the homepage and archive footers. */
.footer-social { display: inline-flex; align-items: center; gap: 9px; padding-block: 12px; }
.footer-social img { display: block; flex-shrink: 0; }
.footer-social:hover { color: var(--bright); }

/* ============================================================
   FOOTER
   Meta bar, giant signature, and bottom status line.
   ============================================================ */

.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 40px;
  color: #717f75;
  font: 9px var(--mono);
}

.footer-identity {
  color: #c7d0ca;
  font-weight: 500;
}
.footer-identity span {
  font-weight: 400;
  color: #67766b;
  margin-left: 10px;
}

.back-top {
  display: flex;
  gap: 18px;
}

/* Giant "OxShaD" signature */
.footer-signature {
  display: block;
  font-weight: 600;
  font-size: clamp(90px, 23.9vw, 380px);
  line-height: 1.05;
  letter-spacing: -.085em;
  text-align: center;
  color: #0e1d13;
  background: linear-gradient(180deg, #25452e 0%, #112618 50%, #050d08 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: .045em;
  overflow: hidden;
  transition: filter .4s;
}
.footer-signature:hover {
  filter: brightness(1.5);
}
.footer-signature span {
  background: #2b6a3e;
  background-clip: text;
}

/* Bottom bar — "STAY CURIOUS" + status dot */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  font: 8px var(--mono);
  letter-spacing: .1em;
  color: #52695b;
  padding-top: 16px;
  padding-bottom: 26px;
}
.footer-bottom span:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-bottom i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #438b58;
}

/* Homepage previews and the full collections share the same dark visual style. */
.brand-mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  background: #101712;
}
.brand-mark img { display: block; width: 30px; height: 30px; object-fit: contain; }
.brand-mark.credential-badge { width: 105px; height: 92px; border: 0; background: transparent; }
.credential-badge img { width: 100%; height: 100%; }
.resource-brand, .credential-heading { display: flex; align-items: center; gap: 14px; }
.resource-brand { min-width: 0; }
.entry-copy { flex: 1; min-width: 0; }
.archive-card-copy .brand-mark img { width: 44px; height: 44px; }
.archive-entry-meta { align-items: center; }
.archive-preview {
  position: relative;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s;
  transform-origin: center;
}
.archive-preview:hover,
.archive-preview:focus-visible {
  transform: scale(1.025);
  background-color: #09110c;
  box-shadow: 0 18px 60px #0008, 0 0 0 1px #3b684a;
  z-index: 1;
}
.archive-preview .preview-arrow { margin-left: auto; color: var(--bright); font-size: 25px; }
.archive-preview .preview-cta { display: block; margin-top: 16px; font: 10px var(--mono); color: #a4b9ac; }
.archive-all { margin-top: 24px; }
.archive-page .site-header { position: relative; border-bottom: 1px solid var(--line); }
.archive-page nav a[aria-current="page"] { color: var(--bright); }
.archive-main { padding-top: 56px; padding-bottom: 80px; min-height: calc(100svh - 165px); }
.archive-back { font-size: 12px; }
.archive-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 70px 0 48px; }
.archive-heading h1 { font-size: clamp(44px, 6vw, 80px); line-height: 1.1; letter-spacing: -.05em; font-weight: 500; margin: 18px 0 22px; }
.archive-description { max-width: 560px; color: var(--muted); line-height: 1.8; font-size: 15px; }
.archive-count { font: 11px var(--mono); color: #9bab9f; white-space: nowrap; padding-bottom: 8px; }
.archive-collection { display: grid; gap: 24px; }
.archive-certificates, .archive-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.archive-certificate, .archive-entry { border: 1px solid var(--line); background: #050806; border-radius: 8px; overflow: hidden; scroll-margin-top: 28px; }
.archive-certificate:target, .archive-entry:target { border-color: #477c54; }
.archive-certificate .cert-meta { display: flex; justify-content: space-between; gap: 16px; padding: 22px 24px; font: 9px var(--mono); color: #819389; }
.certificate-image-link { display: block; position: relative; margin: 0 24px; overflow: hidden; border-radius: 3px; }
.certificate-image-link img { display: block; width: 100%; height: auto; transition: transform .5s; }
.certificate-image-link:hover img { transform: scale(1.025); }
.certificate-image-link > span { position: absolute; bottom: 12px; right: 12px; background: #050806ec; color: #dce6df; padding: 10px 12px; border-radius: 4px; font: 9px var(--mono); }
.archive-card-copy { padding: 28px 24px; }
.archive-card-copy h2 { font-size: 30px; letter-spacing: -.03em; }
.archive-card-copy p, .archive-entry p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.archive-card-copy .credential-date { font: 10px var(--mono); margin: 20px 0 28px; color: #78897e; }
.archive-entry { display: flex; flex-direction: column; position: relative; padding: 32px; transition: border-color .25s, background .25s; }
.archive-entry:hover, .archive-entry:focus-within { border-color: #3b684a; background: #09110c; }
.archive-entry-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 42px; font: 9px var(--mono); color: #8ba593; line-height: 1.6; }
.archive-entry h2 { font-size: clamp(23px, 2.4vw, 31px); line-height: 1.3; letter-spacing: -.03em; }
.archive-entry p { margin: 20px 0 30px; }
.archive-entry-link { margin-top: auto; align-self: flex-start; }
.archive-entry-link:after { content: ''; position: absolute; inset: 0; }
.archive-entry:focus-within { outline: 2px solid var(--bright); outline-offset: 4px; }
.archive-explore { margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--line); }
.archive-explore > div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Research summaries expose the evidence before the external article link. */
.finding-metadata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; }
.finding-metadata > div { padding: 18px; border: 1px solid #ffffff20; border-radius: 12px; background: #ffffff04; }
.finding-metadata dt { font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #969696; }
.finding-metadata dd { margin: 9px 0 0; font-size: 13px; line-height: 1.5; color: #eee; }
.writeup-case { scroll-margin-top: 120px; }
.writeup-case:has(.writeup-details[open]) { grid-column: 1 / -1; }
.writeup-case > h2 { max-width: 880px; }
.writeup-case .archive-entry-meta { flex-wrap: wrap; }
.writeup-details { margin-bottom: 28px; border-top: 1px solid #ffffff20; }
.writeup-details summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; list-style: none; font: 12px var(--mono); color: #d4ded7; cursor: pointer; }
.writeup-details summary::-webkit-details-marker { display: none; }
.writeup-details summary:hover { color: #fff; }
.writeup-details summary:focus-visible { outline: 2px solid #b8cfbe; outline-offset: 4px; border-radius: 4px; }
.details-indicator { font-size: 20px; transition: transform .25s; }
.details-open-label, .writeup-details[open] .details-closed-label { display: none; }
.writeup-details[open] .details-open-label { display: inline; }
.writeup-details[open] .details-indicator { transform: rotate(45deg); }
.writeup-overview { max-width: 800px; }
.writeup-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.writeup-finding { padding: 26px; border: 1px solid #ffffff1a; border-radius: 16px; background: #0005; }
.writeup-finding h3 { margin: 16px 0; font-size: 21px; font-weight: 450; line-height: 1.4; }
.writeup-finding h4 { margin: 24px 0 8px; font: 10px var(--mono); color: #b9cabe; text-transform: uppercase; }
.writeup-finding p { margin: 0; }
.writeup-disclosure { padding: 30px 0; }
.writeup-disclosure h3 { font-size: 20px; font-weight: 450; }
.writeup-disclosure ol { display: flex; flex-wrap: wrap; gap: 18px 36px; padding-left: 20px; margin: 22px 0; color: #ccc; font-size: 13px; line-height: 1.7; }
.writeup-disclosure li { padding-left: 4px; }
.writeup-disclosure li::marker { color: #8dac97; font-family: var(--mono); }
.writeup-disclosure p { margin: 0; max-width: 820px; font-size: 12px; }
.writeup-case > .text-link { align-self: flex-start; }
@media (max-width: 760px) {
  .finding-metadata, .writeup-findings { grid-template-columns: 1fr; }
  .writeup-finding { padding: 22px; }
}
@media (max-width: 760px) {
  .archive-main { padding-top: 34px; padding-bottom: 56px; }
  .archive-heading { display: block; padding: 44px 0 32px; }
  .archive-count { display: block; margin-top: 24px; }
  .archive-certificates, .archive-entries { grid-template-columns: 1fr; }
  .archive-entry { padding: 24px; }
  .archive-certificate .cert-meta { flex-wrap: wrap; }
  .archive-preview .preview-arrow { font-size: 18px; }
  .archive-explore { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .archive-preview:hover, .archive-preview:focus-visible,
  .certificate-image-link:hover img { transform: none; }
}

/* ============================================================
   RESPONSIVE & MEDIA QUERIES
   Breakpoints: 1600px, 1100px, 760px, reduced-motion.
   ============================================================ */

/* ---- Extra-large screens (1600px+) ---- */
@media (min-width: 1600px) {
  .hero-art {
    right: calc((100vw - 1600px) / 2 - 140px);
  }
}

/* ---- Medium screens (761px – 1100px) ---- */
@media (min-width: 761px) and (max-width: 1100px) {
  nav { gap: 24px; }
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .hero h1 { font-size: clamp(42px, 5.2vw, 57px); }
  .hero-portrait { width: 54vw; right: 0; }
  .hero-art { right: -360px; }
  .hero-description { max-width: 45%; }
  .hero-description br { display: none; }
}

@media (max-width: 1100px) {
  .about-grid { gap: 32px; }
  .project-showcase { grid-template-columns: 280px 1fr; }
}

/* ---- Mobile (≤ 760px) ---- */
@media (max-width: 760px) {

  /* Container & wordmark shrink */
  .container,
  .wordmark-sub { font-size: 6px; }
  .wordmark { font-size: 14px; }
  .site-logo { width: 41px; height: 41px; }

  /* Hamburger menu appears */
  .menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid #223027;
    border-radius: 5px;
  }
  .menu-toggle span {
    width: 17px;
    height: 1px;
    background: #c5d1c9;
  }
  /* Animate into ✕ when open */
  .menu-toggle[aria-expanded=true] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  /* Mobile nav dropdown */
  nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  nav > a {
    padding: 17px 2px;
    border-bottom: 1px solid #19231c;
    font-size: 17px;
  }

  /* Hide decorative globe labels */
  .globe-label,
  .coordinate { display: none; }

  /* Smaller buttons */
  .button { padding: 13px 15px; gap: 16px; font-size: 11px; }

  /* Smaller eyebrow */
  .eyebrow { font-size: 8px; letter-spacing: .1em; }

  /* Hero bottom */
  .hero-bottom > span { font-size: 7px; }
  .hero-bottom > a { display: none; }

  /* Compact labels in the continuous discipline strip */
  .discipline-group > span {
    font-size: 10px;
    gap: 8px;
    padding: 24px 7px;
    flex-direction: column;
    min-height: 90px;
  }
  .discipline-strip i { font-size: 18px; }

  /* Section spacing */
  .section { padding-block: 65px; }
  .section-label { margin-bottom: 30px; font-size: 8px; }

  /* Headings */
  h2 { font-size: 34px; }

  /* Stack grids to single column */
  .about-grid,
  .notes-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-copy { max-width: none; }
  .about-copy p { font-size: 15px; }

  /* Section intro — stack */
  .section-intro { display: block; margin-bottom: 30px; }
  .section-intro p { font-size: 12px; margin-top: 20px; }
  .section-intro p br { display: none; }

  /* Certifications — single column */
  .certificate-gallery { grid-template-columns: 1fr; }
  .empty-credentials { padding: 28px 18px; gap: 20px; }
  .certificate-outline { width: 75px; height: 62px; padding: 9px; }
  .certificate-outline:after { width: 52px; }
  .empty-credentials h3 { font-size: 16px; }
  .empty-credentials p { font-size: 12px; }

  /* Projects — stack tabs above preview */
  .project-showcase { grid-template-columns: 1fr; }
  .project-tabs { border-right: 0; }
  .project-tab { padding: 23px; }
  .project-preview { min-height: 320px; padding: 18px; }
  .empty-project-content { padding: 30px 24px; }
  .empty-project-content h3 { font-size: 21px; }

  /* Empty blocks */
  .empty-block .index { margin-right: 4px; }
  .empty-block h3 { font-size: 17px; }
  .empty-block p { font-size: 12px; }

  /* Contact */
  .contact-inner { padding-block: 65px; }
  .contact-inner h2 { font-size: 58px; }
  .contact-reticle { font-size: 230px; right: -50px; top: 70px; z-index: -1; }
  .contact-inner .eyebrow { max-width: 280px; line-height: 1.7; }

  /* Footer */
  .footer-meta { padding-block: 30px; font-size: 8px; gap: 16px; flex-wrap: wrap; }
  .brand-mark.credential-badge { width: 64px; height: 64px; }
  .footer-identity span { display: none; }
  .footer-signature { font-size: 25vw; }
  .footer-bottom { font-size: 6px; gap: 20px; line-height: 1.8; }
  .footer-bottom span:last-child { gap: 6px; }

  /* Dialog */
  dialog { padding: 38px 24px; }

  /* Header */
  .site-header { height: 72px; }
  .nav-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 22px;
  }
  .desktop-contact { display: none; }
  nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #030705fa;
    padding: 24px;
    display: none;
    border-bottom: 1px solid #27372b;
    backdrop-filter: blur(20px);
  }
  nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .mobile-contact {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    min-height: 46px;
  }

  /* Hero — stacked layout */
  .hero {
    height: auto;
    min-height: 690px;
    max-height: none;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-content {
    position: relative;
    top: auto; left: auto; right: auto;
    transform: none;
    padding-top: 130px;
    padding-bottom: 20px;
    width: 100%;
  }
  .hero h1 {
    font-size: clamp(39px, 10.4vw, 60px);
    line-height: 1.04;
    letter-spacing: -.035em;
    margin: 0 0 26px;
    max-width: 100%;
  }
  .hero-description { font-size: 14px; line-height: 1.75; max-width: 360px; }
  .hero-description br { display: none; }
  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
    max-width: 350px;
  }
  .hero-actions .button { min-height: 44px; font-size: 12px; }
  .hero-art {
    width: 900px;
    height: 820px;
    top: 65px;
    right: -450px;
    opacity: .12;
    mask-image: linear-gradient(to right, transparent 10%, black 65%);
  }
  .hero-art:after { background: linear-gradient(90deg, #000c, transparent 70%); }
  .hero-portrait {
    position: relative;
    order: 1;
    top: auto;
    right: auto;
    transform: none;
    width: min(100%, 620px);
    margin: 0 auto 66px;
  }
  .hero-bottom { bottom: 14px; }
}

/* ---- Accessibility: reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after {
    transition: none !important;
    animation: none !important;
  }
  .button:hover { transform: none; }
}

/* Native SVG cursors stay aligned with clicks and work inside modal dialogs. */
@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: url('assets/cursor-crosshair.svg') 16 16, crosshair;
  }

  a[href], button:not(:disabled), summary,
  [role="button"]:not([aria-disabled="true"]) {
    cursor: url('assets/cursor-target.svg') 16 16, pointer;
  }

  input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, [contenteditable="true"] {
    cursor: text;
  }

  button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
}

/* Reversible visual experiment. Restore details: GLASS-EXPERIMENT.md. */
body.glass-experiment {
  --glass-edge: #ffffff22;
  --glass-fill: linear-gradient(135deg, #18181899, #080808b8 65%, #1010108c);
  --glass-shadow: 0 24px 70px #0009, inset 0 1px 0 #ffffff10;
  --line: #151515;
  --muted: #aeaeae;
  background: #000;
  isolation: isolate;
}

.glass-atmosphere {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.glass-orb {
  position: absolute;
  width: min(65vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff12, #ffffff04 42%, transparent 70%);
  opacity: .25;
  will-change: transform;
  animation: glass-drift 20s ease-in-out infinite alternate;
}
.glass-orb-one { top: -22%; left: -18%; }
.glass-orb-two { right: -20%; top: 14%; animation-delay: -9s; animation-duration: 25s; }
.glass-orb-three { left: 18%; bottom: -55%; animation-delay: -15s; }
.glass-grid {
  position: absolute;
  inset: -72px;
  background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .28;
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  animation: glass-grid-drift 30s linear infinite;
}
@keyframes glass-drift { to { transform: translate(75px, 55px) scale(1.18); } }
@keyframes glass-grid-drift { to { transform: translate(72px, 72px); } }

.glass-experiment .site-header {
  position: fixed;
  inset: 18px 24px auto;
  max-width: 1280px;
  margin-inline: auto;
  height: 70px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass-fill);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--glass-shadow);
  transition: background .5s, box-shadow .5s;
}
.glass-experiment .nav-inner { padding-inline: 24px; }
.glass-experiment nav > a { position: relative; color: #c5c5c5; transition: color .3s, text-shadow .3s; }
.glass-experiment nav > a:hover { color: #f8f8f8; text-shadow: 0 0 18px #e4e4e48c; }
.glass-experiment .nav-contact { border: 1px solid #fff; background: #fff; color: #101511; border-radius: 12px; box-shadow: inset 0 1px #ffffff21; }
.glass-experiment .nav-contact:hover { background: #eef0ef; }
.glass-experiment .hero { min-height: 600px; }
/* Keep the portrait in front, with the motion control accessible. */
.glass-experiment .hero-portrait { z-index: 3; }
.glass-experiment .hero-bottom { z-index: 4; }
.glass-experiment .hero h1 { text-shadow: none; animation: glass-rise 1.1s cubic-bezier(.16,1,.3,1) both; }
.glass-experiment .hero-description { color: #b7b7b7; animation: glass-rise 1.1s .15s cubic-bezier(.16,1,.3,1) both; }
.glass-experiment .hero-actions { animation: glass-rise 1.1s .3s cubic-bezier(.16,1,.3,1) both; }
.glass-experiment .hero-art { opacity: .2; }
.glass-experiment .green { color: var(--green); text-shadow: none; }
.glass-experiment .muted { color: #9b9b9b; }
.glass-experiment .button {
  border-radius: 12px;
  border-color: #f4f4f432;
  box-shadow: inset 0 1px #ffffff1a, 0 8px 28px #00000033;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, background .35s, border-color .35s;
}
.glass-experiment .primary { background: linear-gradient(180deg, #176536, #104c29); border-color: #2c7a47; }
.glass-experiment .secondary { background: var(--glass-fill); }
.glass-experiment .button:hover { transform: translate(var(--magnet-x, 0px), var(--magnet-y, -4px)) scale(1.035); border-color: #efefef75; box-shadow: 0 14px 35px #00000044, 0 0 0 transparent, inset 0 1px #ffffff30; }
.glass-experiment .discipline-strip { background: #000; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px #ffffff05; }
.glass-experiment .discipline-group > span { color: #d0d0d0; }
.glass-experiment .discipline-strip i { color: #d1d1d1; }
.glass-experiment .section-label { color: #b1b1b1; }

.glass-experiment .about-copy,
.glass-experiment .archive-preview,
.glass-experiment .project-showcase,
.glass-experiment .archive-entry,
.glass-experiment .archive-certificate,
.glass-experiment .contact-inner {
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background: var(--glass-fill);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: var(--glass-shadow);
}
.glass-experiment .about-copy { padding: 34px; }
.glass-experiment .about-copy p { color: #bcbcbc; }
.glass-experiment .certificate-gallery { border: 0; }
.glass-experiment .archive-preview { padding: 38px; }
.glass-experiment .archive-preview:hover { background-color: #000; box-shadow: 0 28px 70px #00000055, inset 0 1px #ffffff0c, 0 0 0 transparent; }
.glass-experiment .project-showcase { overflow: hidden; }
.glass-experiment .project-tabs { background: #000; }
.glass-experiment .project-preview { background-color: #000; background-image: radial-gradient(#aeaeae29 1px, transparent 1px); }
.glass-experiment .project-empty { background: #000; border-color: #f2f2f229; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; }
.glass-experiment .empty-project-content p, .glass-experiment .project-tab small { color: #b1b1b1; }
.glass-experiment .editorial-list { border: 0; display: grid; gap: 16px; }
.glass-experiment .entry-link {
  position: relative;
  padding: 25px;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: var(--glass-fill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px #ffffff05;
  transition: border-color .4s, background .4s, transform .4s;
}
.glass-experiment .entry-link:hover { background-color: #000; border-color: #f1f1f166; transform: translateX(6px); }
.glass-experiment .brand-mark { background: #000; border-color: #f2f2f224; box-shadow: inset 0 1px #ffffff13; }
.glass-experiment .credential-badge { background: transparent; border: 0; box-shadow: none; }
.glass-experiment .contact-section { border: 0; padding: 30px 24px 80px; overflow: visible; }
.glass-experiment .contact-inner { padding: 65px; overflow: hidden; }
.glass-experiment .contact-reticle { color: #e9e9e918; text-shadow: 0 0 60px #e3e3e319; animation: glass-reticle 18s linear infinite; }
.glass-experiment dialog { background: var(--glass-fill); border-color: #f5f5f53d; border-radius: 24px; backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px); box-shadow: var(--glass-shadow); }
.glass-experiment dialog[open] { animation: glass-dialog .5s cubic-bezier(.16,1,.3,1) both; }
.glass-experiment dialog::backdrop { background: #0a0a0ab8; backdrop-filter: blur(10px); }
.glass-experiment .footer-signature { background-image: linear-gradient(150deg, #141414, #080808 60%, #020202); }
.glass-experiment .footer-meta { color: #b0b0b0; }
.glass-experiment .archive-main { padding-top: 140px; }
.glass-experiment .archive-heading h1 { animation: glass-rise 1s cubic-bezier(.16,1,.3,1) both; }
.glass-experiment .archive-card-copy p, .glass-experiment .archive-entry p { color: #bbbbbb; }
.glass-experiment .archive-entry-meta { color: #c7c7c7; }
.archive-heading-tools { display: grid; justify-items: end; gap: 16px; }
.glass-motion-control { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--glass-edge); background: #000; color: #bfbfbf; font: 10px var(--mono); }
.glass-experiment .hero-bottom button { background: #000; border-color: #f7f7f726; border-radius: 8px; backdrop-filter: blur(14px); }

/* Pointer lighting and tilt sit on cards, leaving the hero gaze untouched. */
.glass-tilt { position: relative; transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.glass-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--shine-x, 50%) var(--shine-y, 30%), #ffffff06, transparent 60%);
  opacity: 0;
  transition: opacity .5s;
}
.glass-tilt:hover::after { opacity: 1; }
.glass-experiment .glass-tilt:hover { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px); }
.glass-reveal { opacity: 0; translate: 0 40px; transition: opacity 1s var(--reveal-delay, 0ms), translate 1s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms); }
.glass-reveal.is-revealed, .glass-reveal:focus-within { opacity: 1; translate: 0 0; }
.glass-experiment main { transition: opacity .18s ease; }
.glass-experiment.glass-leaving main { opacity: 0; }
@keyframes glass-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glass-dialog { from { opacity: 0; transform: translateY(25px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes glass-reticle { to { transform: rotate(368deg); } }

.glass-motion-paused *, .glass-motion-paused *::before, .glass-motion-paused *::after { animation-play-state: paused !important; }
.glass-background-paused .glass-atmosphere * { animation-play-state: paused !important; }
.glass-motion-paused .glass-reveal { opacity: 1; translate: none; transition: none; }
.glass-motion-paused .glass-tilt, .glass-motion-paused .button { transform: none !important; }
.glass-motion-paused .hero h1, .glass-motion-paused .hero-description,
.glass-motion-paused .hero-actions, .glass-motion-paused .archive-heading h1,
.glass-motion-paused dialog[open] { animation: none !important; }

@media (min-width: 761px) {
  .glass-experiment .hero { height: calc(100svh - 192px); max-height: 896px; }
}
@media (max-width: 1100px) {
  .glass-experiment .nav-inner { padding-inline: 18px; }
  .glass-experiment nav { gap: 20px; }
  .glass-experiment .contact-inner { padding: 48px; }
}
@media (max-width: 760px) {
  .glass-experiment .site-header { inset: 12px 12px auto; height: 64px; border-radius: 16px; }
  .glass-experiment .nav-inner { padding-inline: 14px; }
  .glass-experiment nav { top: 76px; border: 1px solid var(--glass-edge); border-radius: 18px; background: #000; box-shadow: 0 24px 60px #00000088; backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }
  .glass-experiment .hero-content { padding-top: 122px; padding-bottom: 20px; }
  .glass-experiment .hero-portrait { margin-top: 12px; margin-bottom: 50px; }
  .glass-orb { width: 110vw; opacity: .2; }
  .glass-experiment .about-copy { padding: 26px; }
  .glass-experiment .archive-preview { padding: 24px 18px; gap: 18px; }
  .glass-experiment .entry-link { padding: 20px 16px; gap: 14px; }
  .glass-experiment .entry-link:hover { transform: none; }
  .glass-experiment .contact-section { padding: 12px 12px 55px; }
  .glass-experiment .contact-inner { padding: 34px 20px; }
  .glass-experiment .contact-inner h2 { font-size: clamp(42px, 12vw, 58px); }
  .glass-experiment .archive-main { padding-top: 118px; }
  .archive-heading-tools { justify-items: start; gap: 10px; }
  .glass-tilt, .glass-experiment .glass-tilt:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-experiment *, .glass-experiment *::before, .glass-experiment *::after { animation: none !important; transition: none !important; }
  .glass-reveal { opacity: 1; translate: none; }
  .glass-tilt, .glass-experiment .glass-tilt:hover, .glass-experiment .button:hover, .glass-experiment .entry-link:hover { transform: none !important; }
}