/* ==========================================================================
   Farrel Islami Putra · Editorial Portfolio
   Blue / White / Slate · Contemporary Editorial · Motion-led
   --------------------------------------------------------------------------
   Contents:
   01. Design tokens          05. Hero                09. Credentials + social
   02. Base & reset           06. Project gallery     10. Closing & footer
   03. Header & navigation    07. About & skills      11. Responsive
   04. Shared components      08. Journey/education   12. Reduced motion
   ========================================================================== */

/* 01. DESIGN TOKENS ------------------------------------------------------ */
:root {
  /* Surfaces */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --night: #0F172A;
  --night-card: #1E293B;

  /* Lines */
  --border-soft: #E2E8F0;
  --border-strong: #CBD5E1;
  --line-on-dark: rgba(255, 255, 255, 0.16);

  /* Text */
  --ink: #0F172A;
  --text-2: #475569;
  --text-3: #64748B;
  --text-on-dark: #E2E8F0;
  --text-on-dark-2: #94A3B8;

  /* Blue identity */
  --blue: #2563EB;
  --blue-hover: #1D4ED8;
  --blue-deep: #1E3A8A;
  --blue-pale: #DBEAFE;
  --blue-soft: #93C5FD;

  /* Shape & type */
  --radius: 18px;
  --radius-sm: 12px;
  --font: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;

  /* Motion */
  --micro: 180ms;
  --hover: 280ms;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);

  /* V6.3: the 16-colour pixel palette, promoted from .pixel-pet to
     :root so the game-deck pixel characters and the habitat ornaments
     (plant, second poster, shelf books) can share the exact same
     tokens. Nothing else changed. */
  --px-black: #0D0D11; --px-slate: #1E1E24; --px-steel: #3A4356; --px-gray: #6B7280;
  --px-blue: #00A8E8; --px-navy: #16324F; --px-python-blue: #4584B6; --px-python-yellow: #FFDE57;
  --px-ivory: #F4F4F9; --px-neon: #CCFF00; --px-purple: #4B0082; --px-pink: #FF007F;
  --px-wood: #8B5A2B; --px-wood-dark: #5C3A1A; --px-lime: #A3E635; --px-gold: #D4AF37;
}

/* 02. BASE & RESET ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

::selection { background: var(--blue-pale); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 8px; font-size: 13px;
  transition: top var(--micro) var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* Small monospaced metadata label: the editorial signature */
.section-kicker, .brand-name, .eyebrow, .hero-note, .visual-caption,
.scroll-cue, .filter-row, .gallery-bottom-line, .resume-card-top,
.resume-foot, .mini-label, .artwork-label, .social-footnote,
.closing-top, .closing-bottom, .site-footer, .project-status,
.journey-phase, .journey-status, .hero-tail .tag-mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* Scroll progress -------------------------------------------------------- */
.page-progress {
  height: 4px; position: fixed; inset: 0 0 auto; z-index: 50;
  background: var(--border-soft);
}
.page-progress span {
  display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
}

/* 03. HEADER & NAVIGATION ------------------------------------------------ */
.site-header {
  height: 82px;
  padding: 0 clamp(22px, 5vw, 76px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: relative; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
}

.brand-mark { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.brand-icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  font-weight: 700; font-size: 11px; letter-spacing: -0.04em;
  transform: rotate(-8deg);
  box-shadow: 4px 4px 0 var(--blue);
  border-radius: 6px;
}
.brand-name { font-size: 9px; letter-spacing: 0.12em; color: var(--text-3); }

.main-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 42px); }
.nav-link {
  font-size: 13px; font-weight: 500; color: var(--text-2);
  position: relative; padding: 8px 0;
  transition: color var(--micro) var(--ease);
}
.nav-link::after {
  content: ""; height: 2px; position: absolute; left: 0; right: 0; bottom: 1px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--hover) var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--ink); }

.menu-dots {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: border-color var(--micro) var(--ease), transform var(--micro) var(--ease);
}
.menu-dots span { height: 4px; width: 4px; border-radius: 50%; background: var(--ink); }
.menu-dots:hover { border-color: var(--blue); transform: translateY(-1px); }

.quick-menu {
  position: absolute; right: clamp(20px, 5vw, 76px); top: 72px;
  width: 232px; padding: 9px; z-index: 30;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}
.quick-menu a {
  display: block; padding: 12px; font-size: 13px;
  border-radius: 8px; transition: background var(--micro) var(--ease);
}
.quick-menu a:hover { background: var(--surface-2); }

/* 04. SHARED COMPONENTS -------------------------------------------------- */
.section-shell {
  padding-left: clamp(22px, 7vw, 110px);
  padding-right: clamp(22px, 7vw, 110px);
  position: relative;
}
.section-inner { max-width: 1390px; margin: 0 auto; position: relative; }

.section-heading {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 35px; margin-bottom: 40px; position: relative;
}
.section-kicker { font-size: 9px; color: var(--blue); margin: 0 0 17px; }
.display-heading {
  font-size: clamp(44px, 6.3vw, 80px);
  line-height: 0.9; letter-spacing: -0.07em;
  font-weight: 600;
}
.display-heading em { font-style: normal; color: var(--blue); }

.heading-aside {
  max-width: 290px; font-size: 13px; line-height: 1.7;
  color: var(--text-2); margin: 0 0 5px;
}

.button {
  border: 1px solid transparent; border-radius: 999px;
  display: inline-flex; justify-content: center; align-items: center; gap: 10px;
  padding: 13px 20px; font-size: 12px; font-weight: 600;
  transition: transform var(--micro) var(--ease), background var(--micro) var(--ease),
              color var(--micro) var(--ease), border-color var(--micro) var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); color: #fff; }
.button-primary:hover { background: var(--blue-hover); }
.button-outline { border-color: var(--border-strong); background: transparent; color: var(--ink); }
.button-outline:hover { border-color: var(--blue); color: var(--blue); }

/* Line masks used by the motion system (JS fills initial states) */
.line-mask { display: block; overflow: hidden; }
.line-mask .line { display: block; }

/* Geometric diamond decorations */
.geo {
  position: absolute; pointer-events: none; z-index: 1;
  width: 22px; height: 22px;
  background: var(--ink); transform: rotate(45deg); opacity: 0.92;
}
.geo::before, .geo::after { content: ""; position: absolute; background: inherit; }
.geo-one { left: 55%; top: 12%; box-shadow: 18px 0 0 -3px var(--ink), 0 18px 0 -3px var(--blue-soft); }
.geo-two { width: 34px; height: 34px; right: -5px; top: 47%; box-shadow: -21px -21px 0 -5px var(--blue-soft), 22px 19px 0 -8px var(--ink); }
.geo-three { width: 15px; height: 15px; left: 3%; bottom: 16%; box-shadow: 12px 12px 0 var(--border-strong), 23px 0 0 -2px var(--ink); }
.geo-blue { background: var(--blue); }
.geo-four { width: 26px; height: 26px; left: 2%; top: 35%; box-shadow: 19px 19px 0 -4px var(--border-strong), 38px 0 0 -7px var(--blue-soft); }
.geo-five { width: 36px; height: 36px; right: 2%; top: 15%; opacity: 0.14; box-shadow: 20px -20px 0 var(--ink), -20px 20px 0 var(--ink); }

/* 05. HERO --------------------------------------------------------------- */
.hero {
  min-height: 600px;
  display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center;
  padding-top: 46px; padding-bottom: 84px;
  overflow: hidden;
}

.hero-copy { position: relative; z-index: 2; max-width: 680px; padding: 20px 0 38px; }

.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--text-2); margin-bottom: 24px; }
.eyebrow-dot {
  height: 8px; width: 8px; border-radius: 50%;
  background: var(--blue); display: inline-block; flex-shrink: 0;
}

.hero-title {
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 0.94; letter-spacing: -0.06em;
  font-weight: 700; margin: 0 0 16px;
}
.hero-title em { font-style: normal; color: var(--blue); }
.hero-title sup.sparkle {
  display: inline-grid; place-items: center;
  font-size: 17px; letter-spacing: 0;
  width: 30px; height: 30px;
  background: var(--ink); color: var(--blue-pale);
  border-radius: 50%;
  vertical-align: super; margin-left: 10px;
}

.hero-tail {
  font-size: clamp(15px, 1.6vw, 21px);
  font-weight: 500; color: var(--text-2);
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

.hero-description {
  max-width: 430px; font-size: 14px; line-height: 1.7;
  color: var(--text-2); margin: 0 0 26px;
}

.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.search-box {
  width: min(265px, 100%); min-width: 180px; height: 45px;
  display: flex; align-items: center;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 0 8px 0 16px; background: var(--surface);
  transition: border-color var(--micro) var(--ease), box-shadow var(--micro) var(--ease);
}
.search-box:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-pale);
}
.search-box input { border: 0; outline: 0; background: transparent; min-width: 0; flex: 1; font-size: 13px; color: var(--ink); }
.search-box input::placeholder { color: var(--text-3); }
.search-box button { border: 0; background: transparent; width: 30px; height: 30px; display: grid; place-items: center; color: var(--text-2); }
.search-box button:hover { color: var(--blue); }
.search-box svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.hero-note { display: flex; align-items: center; gap: 10px; color: var(--text-3); margin-top: 44px; font-size: 9px; }
.note-square {
  width: 20px; height: 20px; display: grid; place-items: center;
  background: var(--blue-pale); color: var(--blue-deep); font-size: 12px;
}

.hero-visual {
  position: relative; min-height: 430px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}

/* Pixel-art frame: adapted to the blue/white/slate palette */
.pixel-frame {
  position: relative; width: min(100%, 470px);
  transform: rotate(-7deg);
  padding: 12px;
  background: var(--border-strong);
  outline: 2px solid var(--ink);
  box-shadow: inset 0 0 0 5px var(--text-3), 0 15px 0 -5px var(--ink);
  clip-path: polygon(0 7%, 8% 7%, 8% 0, 89% 0, 89% 6%, 100% 6%, 100% 86%, 94% 86%, 94% 96%, 85% 96%, 85% 100%, 15% 100%, 15% 94%, 3% 94%, 3% 86%, 0 86%);
}
.pixel-card {
  background: var(--surface); border: 1px solid var(--ink);
  padding: 20px 24px 15px; min-height: 245px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 0 0 3px var(--border-soft);
}
.profile-topline, .profile-bottom {
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; color: var(--text-3);
}
.status-dot { color: var(--blue); }
.profile-brand-row { display: flex; align-items: center; gap: 20px; padding: 17px 0; }
.profile-emblem {
  width: 106px; height: 106px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
  font-size: 34px; letter-spacing: -0.06em; font-weight: 700;
  box-shadow: 5px 5px 0 var(--blue-pale);
}
.profile-meta { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.profile-meta strong { font-size: clamp(16px, 2vw, 23px); letter-spacing: -0.04em; line-height: 1.05; }
.profile-meta span { font-size: 11px; color: var(--text-2); }
.profile-meta small { font-family: var(--mono); font-size: 9px; color: var(--text-3); line-height: 1.5; }
.profile-bottom { border-top: 1px solid var(--border-soft); padding-top: 12px; }
.tiny-arrow {
  background: var(--blue); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: grid; place-items: center; font-size: 13px;
}

.floating-tool {
  position: absolute; z-index: 4;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 9px;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.18);
  font-weight: 700; font-size: 13px;
  transform: rotate(-12deg);
  border: 1px solid rgba(15, 23, 42, 0.9);
}
.tool-one { background: var(--blue); color: #fff; top: 52px; left: 7%; }
.tool-two { background: var(--ink); color: var(--blue-soft); top: 39%; left: -1%; width: 27px; height: 27px; font-size: 10px; }
.tool-three { background: var(--blue-deep); color: #fff; right: 3%; bottom: 13%; width: 32px; height: 32px; font-size: 10px; transform: rotate(10deg); }

.hero-sticker {
  position: absolute; right: 0; top: 1%;
  transform: rotate(10deg);
  background: var(--ink); color: var(--bg);
  padding: 12px 15px;
  font-family: var(--mono); font-size: 11px; line-height: 1.35;
  box-shadow: 5px 5px 0 var(--blue);
}
.hero-sticker b { color: var(--blue-soft); }

.visual-caption { position: absolute; bottom: 24px; right: 2%; font-size: 8px; color: var(--text-3); }

.scroll-cue {
  position: absolute; bottom: 25px; left: clamp(22px, 7vw, 110px);
  display: flex; align-items: center; gap: 12px;
  color: var(--text-3); font-size: 8px;
  transition: color var(--micro) var(--ease);
}
.scroll-cue:hover { color: var(--blue); }
.scroll-line { width: 38px; height: 1px; background: var(--ink); }

/* 06. PROJECT GALLERY ---------------------------------------------------- */
.gallery-section {
  background: var(--night); color: var(--text-on-dark);
  position: relative;
  margin-top: 0;
  padding: 92px clamp(22px, 7vw, 110px) 40px;
  overflow: hidden;
}
.gallery-curve {
  height: 74px; position: absolute; left: -4%; right: -4%; top: -48px;
  background: var(--night);
  border-radius: 55% 45% 0 0 / 85% 100% 0 0;
  transform: rotate(-2deg);
}
.section-heading-light .section-kicker { color: var(--blue-soft); }
.section-heading-light .display-heading em { color: var(--blue-soft); }
.section-heading-light .heading-aside { color: var(--text-on-dark-2); }

.filter-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
  color: var(--text-on-dark-2); font-size: 9px;
}
.filter-controls { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-button {
  background: transparent; color: var(--text-on-dark);
  border: 1px solid var(--line-on-dark);
  padding: 9px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  transition: background var(--micro) var(--ease), color var(--micro) var(--ease),
              border-color var(--micro) var(--ease);
}
.filter-button:hover { border-color: var(--blue-soft); color: var(--blue-soft); }
.filter-button.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.project-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin: 26px 0 45px;
  perspective: 1000px; /* drawer lift (5.2.1) needs depth on the grid */
}
.project-card {
  position: relative; min-width: 0;
  display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  background: var(--night-card); border: 1px solid var(--line-on-dark);
  transform-origin: bottom center;
  transition: transform var(--hover) var(--ease),
              border-color var(--hover) var(--ease),
              box-shadow var(--hover) var(--ease);
}
/* Archive drawer hover (5.2.1): the card lifts like a drawer pulled from
   a cabinet; a fold line slides across it. Shadow reads on the dark
   gallery, so the guide's slate shadow is deepened for this surface. */
.project-card:hover {
  transform: translateY(-10px) rotateX(-2deg);
  border-color: var(--blue-soft);
  box-shadow: 0 22px 44px rgba(2, 6, 23, 0.55);
}
.project-card::before {
  content: "";
  position: absolute;
  left: 20px; right: 20px; top: 50%;
  height: 1px;
  background: var(--blue-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hover) var(--ease);
  z-index: 2;
  pointer-events: none;
}
.project-card:hover::before,
.project-card:focus-within::before { transform: scaleX(1); }
/* Keyboard equivalent of the hover lift (12.3) */
.project-card:focus-within { transform: translateY(-10px) rotateX(-2deg); border-color: var(--blue-soft); box-shadow: 0 22px 44px rgba(2, 6, 23, 0.55); }
.project-card:focus-within .project-cover img { transform: scale(1.04); }
.project-link:focus-visible .project-link-arrow { transform: translate(2px, -2px); background: var(--blue-soft); }

.project-cover { height: 235px; position: relative; overflow: hidden; background: var(--surface-2); isolation: isolate; }
/* V6.3 §3.1.2: clip layer for the directional hover reveal. The default
   clip is fully open so the image is always visible without JS, without
   GSAP, and under reduced motion; only the hover reveal ever closes it. */
.project-cover-inner {
  position: absolute; inset: 0;
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0 0 0 0);
}
.project-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms var(--ease);
}
.project-card:hover .project-cover img { transform: scale(1.04); }
.project-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(2, 6, 23, 0.35));
  pointer-events: none;
}
.project-tag {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 5px 9px;
  font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em;
}
.project-number {
  position: absolute; z-index: 2; right: 12px; top: 12px;
  font-family: var(--mono); font-size: 9px; color: var(--ink);
}

.project-info { padding: 16px 15px; flex: 1; display: flex; flex-direction: column; }
.project-info h3 { font-size: 17px; line-height: 1.15; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 9px; }
.project-info .project-desc { font-size: 12px; line-height: 1.6; color: var(--text-on-dark-2); margin: 0 0 14px; flex: 1; }
.project-stack { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.stack-chip {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.05em;
  color: var(--blue-soft); border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 999px; padding: 4px 9px;
}

.project-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-on-dark); padding-top: 12px; min-height: 34px;
}
.project-status { font-size: 9px; color: var(--text-on-dark-2); display: inline-flex; align-items: center; gap: 8px; }
.project-status::before { content: "●"; color: var(--blue-soft); font-size: 8px; }
.project-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--text-on-dark); text-transform: uppercase;
}
.project-link .project-link-arrow {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); color: var(--ink); font-size: 13px;
  transition: transform var(--micro) var(--ease), background var(--micro) var(--ease), color var(--micro) var(--ease);
}
.project-link:hover .project-link-arrow { transform: translate(2px, -2px); background: var(--blue-soft); }

.gallery-bottom-line {
  border-top: 1px solid var(--line-on-dark);
  display: flex; justify-content: space-between;
  padding-top: 16px; color: var(--text-on-dark-2); font-size: 9px;
}
.empty-state {
  padding: 30px; text-align: center; color: var(--text-on-dark-2);
  border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Reserved "coming soon" slots: quiet, non-clickable, unmistakably
   placeholders. No hover motion, no arrow, no fake CTA. */
.project-card--reserved {
  border: 1px dashed rgba(148, 163, 184, 0.45);
  background: transparent;
  padding: 22px 20px;
  justify-content: center;
  gap: 12px;
  cursor: default;
}
.project-card--reserved:hover { transform: none; border-color: rgba(148, 163, 184, 0.45); }
.reserved-kicker {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em;
  color: var(--blue-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.reserved-kicker::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--blue-soft); border-radius: 2px; transform: rotate(45deg); }
.reserved-title {
  font-size: 17px; font-weight: 600; letter-spacing: -0.04em;
  color: var(--text-on-dark);
}
.reserved-text { font-size: 11.5px; line-height: 1.6; color: var(--text-on-dark-2); }

/* 07. ABOUT, SOFTWARE & SKILLS ------------------------------------------- */
.about-section { padding-top: 116px; padding-bottom: 100px; overflow: hidden; }
.about-section > .section-heading { align-items: flex-start; margin-bottom: 36px; }

.heading-stamp {
  border: 1px solid var(--border-strong); background: var(--surface);
  padding: 14px 17px; transform: rotate(5deg);
  font-family: var(--mono); font-size: 9px; line-height: 1.5;
  color: var(--text-2); position: relative;
}
.heading-stamp b { font-size: 12px; color: var(--blue-deep); }
.heading-stamp span { position: absolute; right: -12px; top: -15px; font-size: 23px; color: var(--blue); }

.about-layout {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 7vw, 100px); align-items: center;
  position: relative; z-index: 1;
}
.about-copy { max-width: 560px; }
.about-copy p { font-size: 14px; line-height: 1.75; color: var(--text-2); margin: 0 0 18px; }
.about-copy .about-lead {
  font-size: clamp(17px, 2vw, 24px); line-height: 1.4;
  color: var(--ink); font-weight: 500; letter-spacing: -0.03em;
}

.inline-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.inline-heading h3 { font-size: 24px; letter-spacing: -0.05em; font-weight: 600; }
.mini-label { margin-left: auto; font-size: 8px; color: var(--text-3); }

.software-block { margin-top: 36px; }
.software-list { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.software-chip {
  min-width: 40px; height: 40px; padding: 0 10px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  font-size: 10px; font-weight: 700; letter-spacing: -0.04em;
  border-radius: 9px; box-shadow: 3px 3px 0 var(--border-strong);
  transition: transform var(--micro) var(--ease), background var(--micro) var(--ease);
}
.software-chip:hover { transform: translate(-1px, -1px); background: var(--blue-deep); }
.software-chip:nth-child(2n) { background: var(--blue-deep); color: #fff; box-shadow: 3px 3px 0 var(--blue-pale); }
.software-chip:nth-child(3n) { background: var(--blue); color: #fff; box-shadow: 3px 3px 0 var(--blue-soft); }

.skills-block { margin-top: 30px; }
.skill-list { display: flex; gap: 8px; flex-wrap: wrap; }
.skill-chip {
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: 999px; padding: 8px 14px;
  transition: border-color var(--micro) var(--ease), background var(--micro) var(--ease),
              transform var(--micro) var(--ease);
}
.skill-chip b { font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.skill-chip small { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.07em; color: var(--text-3); text-transform: uppercase; }
.skill-chip:hover { border-color: var(--blue); background: var(--blue-pale); transform: translateY(-2px); }

.about-artwork { min-height: 460px; position: relative; display: grid; place-items: center; }
.artwork-backdrop {
  position: absolute; inset: 9% 0 7% 10%;
  background: var(--border-soft); border-radius: 5px;
  transform: rotate(3deg);
  box-shadow: 12px 12px 0 var(--surface-2);
}
.artwork-backdrop::before, .artwork-backdrop::after {
  content: ""; position: absolute; background: var(--blue-soft);
  height: 22px; transform: rotate(-35deg);
}
.artwork-backdrop::before { width: 140px; top: -10px; left: -20px; }
.artwork-backdrop::after { width: 180px; bottom: 5px; right: -30px; }
.id-art {
  position: relative; z-index: 1;
  width: min(88%, 400px); max-height: 420px; object-fit: contain;
  filter: drop-shadow(10px 16px 8px rgba(15, 23, 42, 0.16));
  transform: rotate(-4deg);
}
.artwork-label {
  position: absolute; left: 3%; bottom: 5%; z-index: 2;
  display: flex; flex-direction: column; gap: 5px;
  color: var(--text-3); font-size: 8px;
}
.artwork-label strong { font-size: 11px; color: var(--ink); }
.artwork-index { position: absolute; right: 1%; top: 3%; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--text-3); }

/* 08. LEARNING JOURNEY & EDUCATION ---------------------------------------- */
.journey-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 18px; margin-top: 66px; position: relative; z-index: 1;
}
.resume-card {
  padding: 26px 28px 22px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); min-height: 230px;
  display: flex; flex-direction: column;
}
.resume-card-blue { background: var(--blue-pale); border-color: var(--blue-soft); }
.resume-card-top {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-3); font-size: 8px;
}
.resume-icon { font-size: 17px; color: var(--blue); }
.resume-card h3 {
  font-size: clamp(26px, 3.2vw, 40px); line-height: 0.99;
  letter-spacing: -0.06em; margin: 24px 0 14px; font-weight: 600;
}
.resume-card-blue p { font-size: 12.5px; line-height: 1.65; color: var(--blue-deep); max-width: 430px; margin: 0 0 15px; }
.resume-line { height: 1px; background: var(--border-strong); margin-top: auto; margin-bottom: 12px; }
.resume-card-blue .resume-line { background: var(--blue-soft); }
.resume-foot { font-size: 8px; color: var(--text-3); }
.resume-card-blue .resume-foot { color: var(--blue-deep); }

.journey-list { margin: 0 0 8px; }
.journey-item {
  display: grid; grid-template-columns: 86px 1fr auto; gap: 12px; align-items: baseline;
  padding: 11px 0;
  border-top: 1px dashed var(--border-soft);
}
.journey-item:first-child { border-top: 0; padding-top: 2px; }
.journey-phase { font-size: 8px; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
.journey-phase::before { content: ""; width: 7px; height: 7px; background: var(--blue); border-radius: 2px; flex-shrink: 0; }
.journey-item h4 { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; transition: opacity var(--hover) var(--ease); }
.journey-item p { font-size: 11.5px; line-height: 1.55; color: var(--text-2); margin: 2px 0 0; }
.journey-status { font-size: 8px; color: var(--text-3); white-space: nowrap; }

/* --- V6.6 Fase 7: journey accordion + education coursework ---------------- */
/* 7.2 The phase header is a real button spanning the phase + title
   columns; the status keeps its own column on the same baseline row.
   Only one item is open at a time (accordion, script.js). */
.journey-toggle {
  grid-column: 1 / 3;
  display: grid; grid-template-columns: 86px 1fr 24px;
  gap: 12px; align-items: baseline;
  padding: 0; background: transparent; border: 0;
  text-align: left; width: 100%; cursor: pointer;
  font: inherit; color: inherit;
}
.journey-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
.journey-toggle-icon {
  font-family: var(--mono); font-size: 14px; line-height: 1;
  color: var(--text-3);
  justify-self: end;
  transition: transform 0.2s var(--ease), color var(--micro) var(--ease);
}
.journey-toggle[aria-expanded="true"] .journey-toggle-icon {
  color: var(--blue);
  transform: rotate(180deg);
}
.journey-desc { grid-column: 1 / -1; }
.journey-detail {
  grid-column: 1 / -1;
  padding: 8px 0 12px 98px;
  margin-top: 6px;
  border-top: 1px dashed var(--border-soft);
  font-family: var(--mono); font-size: 11px; line-height: 1.7;
  color: var(--text-2);
}
.journey-detail p { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.journey-detail[hidden] { display: none; }

/* 7.1 Coursework mono line inside the blue education card. */
.education-coursework {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
  color: var(--blue-deep);
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--blue-soft);
}
@media (max-width: 700px) {
  .journey-toggle { grid-template-columns: 78px 1fr 24px; }
  .journey-detail { padding-left: 0; }
}

/* 09. CREDENTIALS ---------------------------------------------------------- */
.credentials-section {
  background: var(--bg);
  position: relative;
  padding: 96px clamp(22px, 7vw, 110px) 66px;
  border-top: 1px solid var(--border-soft);
  overflow: hidden;
}
.credentials-inner { z-index: 1; }
.credentials-section .section-heading { align-items: flex-start; }

.credential-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Reserved empty-state frames: future slots, not earned credentials. */
.credential-slot {
  min-height: 210px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center;
  cursor: default;
}
.credential-slot-type {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--blue-deep);
  background: var(--blue-pale);
  border-radius: 999px; padding: 5px 11px;
}
.credential-slot-label {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  color: var(--text-3);
}
.credential-slot-note {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em;
  color: var(--text-3); opacity: 0.75;
}

/* Real credential cards: used once entries exist in portfolio-data.js. */
.credential-card {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--hover) var(--ease), border-color var(--hover) var(--ease),
              box-shadow var(--hover) var(--ease);
}
.credential-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.10);
}
.credential-card img {
  width: 100%; height: 170px; object-fit: contain; object-position: center;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
  padding: 10px;
}
.credential-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.credential-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.credential-type {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  color: var(--blue-deep); background: var(--blue-pale);
  border-radius: 999px; padding: 4px 9px;
}
.credential-date { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; color: var(--text-3); }
.credential-body h3 { font-size: 15.5px; line-height: 1.25; letter-spacing: -0.03em; font-weight: 600; }
.credential-issuer { font-size: 11.5px; color: var(--ink); font-weight: 500; margin: 0; }
.credential-desc { font-size: 11px; line-height: 1.55; color: var(--text-2); margin: 0; }
.credential-id { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--text-3); margin: 0; }
.credential-proof {
  margin-top: auto; padding-top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--blue); text-transform: uppercase;
}
.credential-proof .project-link-arrow {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-pale); color: var(--blue-deep); font-size: 12px;
  transition: transform var(--micro) var(--ease), background var(--micro) var(--ease);
}
.credential-proof:hover .project-link-arrow { transform: translate(2px, -2px); background: var(--blue-soft); }
/* Preview button: opens the native <dialog> with the full image. */
.credential-preview {
  margin-top: 4px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink); border-radius: 999px; padding: 7px 12px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--micro) var(--ease), color var(--micro) var(--ease),
              transform var(--micro) var(--ease);
}
.credential-preview:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }

.credentials-footnote {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 30px; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-3); font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em;
}

/* --- V6.6 Fase 2: entry requirements column, sample card, timeline ------- */
/* 2.1 Two-column layout: the admission rules sit left of the grid,
   aligned with the reserved slots. <= 900px the column stacks above. */
.credential-columns {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 26px; align-items: start;
}
.credential-requirements { min-width: 0; }
.credential-req-list { list-style: none; margin: 14px 0 0; padding: 0; }
.credential-req-list li {
  display: grid; gap: 2px;
  padding: 9px 0;
  border-top: 1px solid var(--border-soft);
}
.credential-req-list li:first-child { border-top: 0; padding-top: 0; }
.req-label {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.req-value {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--text-2);
}
.credential-req-note {
  margin: 12px 0 0;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.06em;
  line-height: 1.7; color: var(--text-3);
}
@media (max-width: 900px) {
  .credential-columns { grid-template-columns: 1fr; }
}

/* 2.2 Sample card: clearly labelled format demo, never a real entry.
   No buttons, no dialog, no tab stops; dashed border and dimmed. */
.credential-card--sample {
  border-style: dashed;
  opacity: 0.65;
  cursor: default;
}
.credential-card--sample:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: none;
}
.credential-sample-image {
  height: 170px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  display: grid; place-items: center;
}
.credential-sample-image span {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em;
  color: var(--text-3);
}
.credential-sample-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
  pointer-events: none;
}
.sample-button {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-3); border-radius: 999px; padding: 7px 12px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 2.3 Verification timeline: one quiet measure line with the live count
   of real entries. Static by design (reduced motion: nothing moves). */
.credential-timeline {
  position: relative;
  margin-top: 34px;
  height: 44px;
  pointer-events: none;
}
.timeline-line {
  position: absolute; left: 0; right: 0; top: 22px; height: 1px;
  background: var(--border-soft);
}
.timeline-marker {
  position: absolute; top: 19px; left: 8%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
}
.timeline-year {
  position: absolute; top: 0; left: 8%;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  color: var(--text-3);
}
.timeline-label {
  position: absolute; right: 0; top: 28px;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
  color: var(--text-3);
}
@media (max-width: 700px) {
  .credential-timeline { height: 40px; margin-top: 26px; }
  .timeline-label { max-width: 60%; text-align: right; }
}

/* 10. SOCIAL + CONTACT ----------------------------------------------------- */
.social-section {
  background: var(--surface-2);
  position: relative;
  padding: 88px clamp(22px, 7vw, 110px) 46px;
  overflow: hidden;
}
.social-pattern {
  position: absolute; right: -1%; top: -4%; width: 200px; height: 150px; opacity: 0.55;
  background:
    linear-gradient(45deg, transparent 30%, var(--border-strong) 30% 44%, transparent 44%),
    linear-gradient(45deg, transparent 48%, var(--blue-soft) 48% 62%, transparent 62%);
  transform: rotate(2deg);
}
.social-inner { z-index: 1; }
.social-heading-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; margin-bottom: 36px;
}
.social-heading-row .display-heading { font-size: clamp(42px, 6vw, 76px); }
.social-intro { max-width: 320px; color: var(--text-2); font-size: 13px; line-height: 1.7; margin: 0 0 5px; }

.social-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.social-grid--single { grid-template-columns: minmax(0, 420px); }
.social-card {
  min-width: 0; min-height: 190px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 16px;
  display: flex; flex-direction: column;
  transition: transform var(--hover) var(--ease), border-color var(--hover) var(--ease),
              box-shadow var(--hover) var(--ease);
}
.social-card:hover {
  transform: translateY(-5px);
  border-color: var(--blue);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
}
.social-meta {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-3); font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em;
}
.social-icon {
  margin: 24px 0 16px; width: 52px; height: 52px; border-radius: 12px;
  background: var(--blue); color: #fff;
  display: grid; place-items: center;
  font-size: 21px; font-weight: 600; letter-spacing: -0.05em;
  box-shadow: 4px 4px 0 var(--blue-pale);
}
.social-card h3 { font-size: 17px; letter-spacing: -0.04em; margin: auto 0 7px; font-weight: 600; }
.social-card p { font-size: 11px; color: var(--text-3); margin: 0; line-height: 1.5; }
.social-footnote {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 34px; padding-top: 16px;
  border-top: 1px solid var(--border-strong);
  color: var(--text-2); font-size: 8px;
}

/* Contact block: real, working email links. */
.contact-block {
  margin-top: 30px; padding: 28px clamp(18px, 3vw, 34px) 26px;
  background: var(--night); border-radius: var(--radius);
  color: var(--text-on-dark);
  position: relative; overflow: hidden;
}
.contact-block::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 130px; height: 130px;
  background: var(--blue);
  opacity: 0.14; transform: rotate(45deg);
  pointer-events: none;
}
.contact-heading { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.contact-heading .mini-label { color: var(--blue-soft); margin-left: 0; }
.contact-heading h3 { font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -0.04em; font-weight: 600; }
.contact-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px;
  position: relative; z-index: 1;
}
.contact-card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line-on-dark); border-radius: var(--radius-sm);
  background: var(--night-card);
  padding: 16px 44px 15px 16px;
  transition: border-color var(--hover) var(--ease), transform var(--hover) var(--ease),
              background var(--hover) var(--ease);
}
.contact-card:hover {
  border-color: var(--blue-soft);
  background: #243449;
  transform: translateY(-3px);
}
.contact-label {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em;
  color: var(--blue-soft);
}
.contact-card strong {
  font-size: clamp(13px, 1.5vw, 16px); font-weight: 500; letter-spacing: -0.02em;
  color: var(--text-on-dark);
  overflow-wrap: anywhere;
}
.contact-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: #fff; font-size: 14px;
}
.contact-note {
  margin: 14px 0 0; font-size: 11px; color: var(--text-on-dark-2);
  position: relative; z-index: 1;
}

/* 11. CLOSING & FOOTER ----------------------------------------------------- */
.closing-section { background: var(--bg); padding: 30px clamp(22px, 5vw, 75px) 22px; overflow: hidden; }
.closing-top {
  display: flex; justify-content: space-between; gap: 18px;
  color: var(--text-3); font-size: 8px; line-height: 1.5;
}
.closing-top span:last-child { text-align: right; }

.closing-motto {
  text-align: center;
  margin: 36px auto 6px;
  max-width: 560px;
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.6;
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.motto-label {
  display: block;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 8px;
}
.closing-name {
  position: relative; z-index: 1;
  text-align: center; white-space: nowrap;
  padding: 18px 0 26px; line-height: 0.82;
}
.closing-solid {
  display: block;
  font-size: clamp(64px, 15vw, 200px);
  font-weight: 700; letter-spacing: -0.08em; color: var(--ink);
}
.closing-outline {
  display: block;
  font-size: clamp(28px, 6.4vw, 86px);
  font-weight: 500; letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--blue);
  margin-top: 2px;
}
.closing-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  border-top: 1px solid var(--border-soft);
  padding-top: 18px; color: var(--text-3); font-size: 8px;
}
.closing-bottom p { font-family: var(--font); font-size: 11px; letter-spacing: 0; margin: 0; text-align: center; color: var(--text-2); }
.back-top {
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 10px 13px; white-space: nowrap; font-family: var(--mono); font-size: 9px;
  transition: border-color var(--micro) var(--ease), color var(--micro) var(--ease), transform var(--micro) var(--ease);
}
.back-top:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

/* --- V6.6 Fase 6: closing baseline, colophon, archive stamp ---------------- */
/* 6.1 Baseline tick measure below the name: an editorial ruler, 00 to 100. */
.closing-baseline {
  display: flex; align-items: center; gap: 12px;
  margin: 0 auto 24px;
  max-width: min(860px, 90%);
}
.baseline-line {
  flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 1px, transparent 1px 24px);
}
.baseline-end {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--text-3);
}

/* 6.2 Colophon: build metadata as a two-column definition list. */
.closing-colophon {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  max-width: 480px;
  margin: 32px auto 40px;
}
.closing-colophon > div { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: baseline; }
.closing-colophon dt {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
.closing-colophon dd {
  margin: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em;
  color: var(--text-2);
}
@media (max-width: 420px) {
  .closing-colophon { grid-template-columns: 1fr; }
}

/* 6.3 Archive cap, rotated slightly, sitting beside the copyright line. */
.closing-stamp {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em;
  color: var(--blue);
  border: 1.5px dashed var(--blue);
  padding: 6px 10px;
  transform: rotate(6deg);
  display: inline-block;
  opacity: 0.7;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .closing-stamp { letter-spacing: 0.16em; padding: 5px 8px; }
}

.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: 14px clamp(22px, 5vw, 75px);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  color: var(--text-3); font-size: 8px;
}
.site-footer b { color: var(--blue); }

/* 11b. DATA ATLAS (12.1) --------------------------------------------------
   Decorative vector field around the identity card. Static by default;
   JavaScript adds entrance + pointer response only when motion is allowed.
   Purely illustrative: not a chart, no measured values. */
.data-atlas {
  position: absolute; inset: -14% -16%;
  z-index: 0; pointer-events: none;
}
.data-atlas svg { width: 100%; height: 100%; overflow: visible; display: block; }
.atlas-grid path { stroke: var(--border-soft); stroke-width: 1; fill: none; }
.atlas-grid .atlas-diagonal { stroke: var(--border-strong); opacity: 0.45; }
.atlas-path { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0.5; }
.atlas-path-b { stroke: var(--blue-deep); opacity: 0.32; }
.atlas-node circle { fill: var(--blue); }
.atlas-ring { fill: none !important; stroke: var(--blue-soft); stroke-width: 1; opacity: 0.65; }
.atlas-cross path { stroke: var(--border-strong); stroke-width: 1.2; fill: none; }
.atlas-tick { fill: var(--blue-deep); opacity: 0.55; }
.atlas-label {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em;
  fill: var(--text-3);
}
.atlas-corner { fill: var(--blue); font-size: 9px; }
.atlas-axis { fill: var(--border-strong); }
/* Pointer-lit highlight on the identity card (12.4) */
.pixel-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(240px circle at var(--hl-x, 72%) var(--hl-y, 18%),
              rgba(219, 234, 254, 0.55), transparent 68%);
  opacity: 0; transition: opacity var(--hover) var(--ease);
}
.pixel-frame.is-lit::after { opacity: 1; }

/* 11c. CURIOSITY MAP (12.2) ------------------------------------------------ */
.curiosity-map {
  margin-top: 78px; position: relative; z-index: 1;
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 34px);
}
.curiosity-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 18px;
}
.curiosity-heading {
  font-size: clamp(30px, 4.2vw, 54px); line-height: 0.95;
  letter-spacing: -0.06em; font-weight: 600; margin: 0;
}
.curiosity-heading em { font-style: normal; color: var(--blue); }
.curiosity-intro {
  max-width: 350px; font-size: 13px; line-height: 1.7;
  color: var(--text-2); margin: 0 0 4px;
}
.curiosity-layout {
  display: grid; grid-template-columns: 1.25fr 0.75fr;
  gap: 16px; align-items: stretch;
}
.curiosity-stage { position: relative; min-height: 400px; }
.curiosity-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.curiosity-links line {
  stroke: var(--border-strong); stroke-width: 1.5;
  stroke-dasharray: 4 7; fill: none;
  transition: stroke var(--hover) var(--ease), opacity var(--hover) var(--ease);
}
.curiosity-stage.has-selection .curiosity-links line { opacity: 0.35; }
.curiosity-stage.has-selection .curiosity-links line.is-active {
  stroke: var(--blue); opacity: 1; stroke-dasharray: none;
}
.curiosity-grid-dots circle { fill: var(--border-strong); }

/* Node controls: real buttons, keyboard accessible, positioned over the
   SVG coordinates on desktop; a stacked list on small screens. */
.curiosity-nodes { position: absolute; inset: 0; }
.curiosity-node {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  border-radius: 14px; padding: 10px 13px; min-width: 96px;
  box-shadow: 3px 3px 0 var(--surface-2);
  transition: border-color var(--micro) var(--ease), background var(--micro) var(--ease),
              transform var(--micro) var(--ease), opacity var(--hover) var(--ease),
              box-shadow var(--micro) var(--ease);
}
.curiosity-node b { font-size: 11px; letter-spacing: 0.02em; color: var(--ink); }
.curiosity-node small {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.08em;
  color: var(--text-3); text-transform: uppercase;
}
.curiosity-node:hover { border-color: var(--blue); transform: translate(-50%, -50%) translateY(-2px); }
.curiosity-node[aria-pressed="true"] {
  border-color: var(--blue); background: var(--blue-pale);
  box-shadow: 3px 3px 0 var(--blue-soft);
}
.curiosity-node[aria-pressed="true"] small { color: var(--blue-deep); }
/* The primary node keeps white subtext even while selected */
.curiosity-node--primary[aria-pressed="true"] small { color: #fff; opacity: 0.92; }
/* The centre node (DATA) reads as the anchor of the map. */
.curiosity-node--primary {
  background: var(--blue); border-color: var(--blue);
  color: #fff; border-radius: 999px; padding: 16px 20px;
}
.curiosity-node--primary b { color: #fff; font-size: 13px; letter-spacing: 0.08em; }
.curiosity-node--primary small { color: #fff; opacity: 0.92; }
.curiosity-node--primary:hover { transform: translate(-50%, -50%) translateY(-2px); }
.curiosity-node--primary[aria-pressed="true"] { background: var(--blue-hover); border-color: var(--blue-hover); }
/* Unrelated nodes recede modestly while one is selected */
.curiosity-stage.has-selection .curiosity-node:not([aria-pressed="true"]) { opacity: 0.62; }
.curiosity-node:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.curiosity-panel {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex; flex-direction: column; gap: 9px; min-height: 300px;
  position: relative; overflow: hidden;
}
.curiosity-panel::before {
  content: ""; position: absolute; right: -26px; top: -26px;
  width: 84px; height: 84px; background: var(--blue); opacity: 0.1;
  transform: rotate(45deg);
}
.curiosity-panel-label {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
  color: var(--blue);
}
.curiosity-panel-name {
  font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.05em;
  line-height: 1; font-weight: 600;
}
.curiosity-panel-status {
  align-self: flex-start;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px; padding: 5px 11px;
  background: var(--border-soft); color: var(--text-2);
}
.curiosity-panel-status[data-level="primary"] { background: var(--blue); color: #fff; }
.curiosity-panel-status[data-level="exploring"] { background: var(--blue-pale); color: var(--blue-deep); }
.curiosity-panel-status[data-level="future"] { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-3); }
.curiosity-panel-detail { font-size: 13px; line-height: 1.7; color: var(--text-2); margin: 4px 0 0; }

/* --- V6.6 Fase 3: panel status row, SEE ALSO, meta line ------------------- */
/* 3.1 Three-tier instrument strip; the active tier follows the honest
   status level of the selected node. */
.curiosity-status-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.status-tier {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--text-3);
  opacity: 0.4;
  transition: opacity var(--micro) var(--ease), background var(--micro) var(--ease),
              color var(--micro) var(--ease);
}
.status-tier.is-active {
  background: var(--blue); color: #fff;
  border-color: var(--blue);
  opacity: 1;
}

/* 3.2 SEE ALSO: quiet cross-references into the archive. */
.curiosity-see-also {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.see-also-label {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.18em;
  color: var(--text-3);
}
.see-also-link {
  display: block; padding: 4px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--blue);
  transition: color var(--micro) var(--ease);
}
.see-also-link:hover { text-decoration: underline; }
.see-also-link[hidden] { display: none; }

/* 3.3 Archive meta counter at the foot of the panel. */
.curiosity-meta {
  margin-top: 8px;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em;
  color: var(--text-3);
  text-align: right;
}
.curiosity-hint {
  margin: 14px 0 0; font-family: var(--mono); font-size: 8px;
  letter-spacing: 0.1em; color: var(--text-3);
}

/* 11d. LEARNING JOURNEY RAIL (12.5) ---------------------------------------- */
.journey-body { position: relative; padding-left: 20px; }
.journey-rail {
  position: absolute; left: 3px; top: 8px; bottom: 8px; width: 2px;
  background: var(--border-soft); border-radius: 2px; overflow: hidden;
}
.journey-rail span {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  transform: scaleY(0); transform-origin: top;
}
.journey-item.is-active .journey-phase::before {
  background: var(--blue-deep);
  box-shadow: 0 0 0 3px var(--blue-pale);
}
.journey-item.is-active h4 { color: var(--blue-deep); }

/* 11e. SOCIAL ICONS (12.7) --------------------------------------------------
   Proper inline SVG brand marks replace the old text-as-icon labels. */
.social-icon { padding: 0; }
.social-icon svg { width: 24px; height: 24px; fill: currentColor; display: block; }

/* Contact cards: the address is a mailto link, plus a separate Copy
   button using the Clipboard API. */
.contact-card { padding-right: 108px; }
.contact-address {
  font-size: clamp(13px, 1.5vw, 16px); font-weight: 500;
  letter-spacing: -0.02em; color: var(--text-on-dark);
  overflow-wrap: anywhere;
  transition: color var(--micro) var(--ease);
}
.contact-address:hover { color: var(--blue-soft); }
.copy-button {
  position: absolute; right: 50px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--text-on-dark-2);
  border: 1px solid var(--line-on-dark); border-radius: 999px;
  padding: 7px 11px;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--micro) var(--ease), color var(--micro) var(--ease),
              background var(--micro) var(--ease), transform var(--micro) var(--ease);
}
.copy-button svg {
  width: 12px; height: 12px; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.copy-button:hover { border-color: var(--blue-soft); color: var(--blue-soft); }
.copy-button:active { transform: translateY(-50%) scale(0.96); }
.copy-button.is-copied { border-color: var(--blue-soft); color: var(--blue-soft); background: rgba(147, 197, 253, 0.12); }

/* Accessible toast (role="status"): brief, non-intrusive feedback. */
.copy-toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 120;
  transform: translate(-50%, 14px);
  background: var(--ink); color: var(--bg);
  padding: 11px 18px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.01em;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--hover) var(--ease), transform var(--hover) var(--ease);
}
.copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 11f. CREDENTIAL PREVIEW DIALOG (12.6) ------------------------------------- */
.credential-dialog {
  border: 0; padding: 0; border-radius: var(--radius);
  max-width: min(880px, 92vw); width: 100%;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 40px 90px rgba(2, 6, 23, 0.4);
}
.credential-dialog::backdrop { background: rgba(15, 23, 42, 0.62); }
.credential-dialog-inner { position: relative; padding: clamp(16px, 2.5vw, 24px); }
.credential-dialog-figure {
  margin: 0; background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  max-height: 60vh; overflow: auto;
  display: grid; place-items: center; padding: 12px;
}
.credential-dialog-figure img {
  max-width: 100%; max-height: 54vh; object-fit: contain;
}
.dialog-close {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink); display: grid; place-items: center;
  transition: border-color var(--micro) var(--ease), color var(--micro) var(--ease),
              transform var(--micro) var(--ease);
}
.dialog-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dialog-close:hover { border-color: var(--blue); color: var(--blue); transform: rotate(90deg); }
.credential-dialog-meta { padding-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.credential-dialog-meta h3 { font-size: 19px; letter-spacing: -0.03em; line-height: 1.2; font-weight: 600; }
.credential-dialog-issuer { font-size: 12.5px; color: var(--ink); font-weight: 500; margin: 0; }
.credential-dialog-id { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--text-3); margin: 0; }
.credential-dialog .credential-proof { margin-top: 8px; }

/* 11g. OVERSIZED FOOTER: outline-to-solid fill (12.8) -----------------------
   The outline name gains a solid blue layer revealed by clip-path as the
   footer enters. Default (no JS): fill hidden, outline text fully readable. */
.closing-outline { position: relative; }
.closing-outline .line:first-child { position: relative; z-index: 1; }
.closing-outline-fill {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  color: var(--blue);
  -webkit-text-fill-color: var(--blue);
  clip-path: inset(0 100% 0 0);
}

/* ==========================================================================
   11z. LIVING ARCHIVE LAYER (V3 additions: guide sections 4.1 to 4.5 and
   5.1 to 5.7). Everything here is decoration: it never hides content and
   every animated piece has a reduced-motion fallback in section 13.
   ========================================================================== */

/* 4.2 Measurement ticks: ruler marks beside display headings.
   right: -18px keeps the marks clear of the final letter while staying
   inside the section shell (headings never span the full viewport). */
.heading-ticks {
  position: absolute;
  right: -18px;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  z-index: 1;
}
/* Bars only: :not(.tick-label) keeps the ruler label out of the sizing */
.heading-ticks span:not(.tick-label) {
  display: block;
  width: 8px;
  height: 1px;
  background: var(--border-strong);
  opacity: 0.5;
}
.heading-ticks span:not(.tick-label):nth-child(2n) { width: 12px; }
.heading-ticks .tick-label {
  font-family: var(--mono);
  font-size: 7px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  height: auto;
  width: auto;
  background: none;
  margin-top: 6px;
}

/* 4.4 Grain + vignette: editorial paper texture over the whole page.
   V5.3 §4.1: light sections read at about 0.06; dark sections add their
   own faint local layer (15.10) to land near 0.08 in total. */
.grain-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: multiply;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(15, 23, 42, 0.04) 100%);
}

/* 5.1.1 Scanline: light beam sweeping the masked hero lines once */
.hero-title .line-mask { position: relative; }
.scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.4), transparent);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 2;
}

/* 4.5 Pixel dust: particles repelled by the pointer around the card */
.pixel-dust {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--blue);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
  border-radius: 1px;
}
.pixel-dust:nth-child(2n) { background: var(--blue-deep); width: 2px; height: 2px; }
.pixel-dust:nth-child(3n) { background: var(--blue-soft); opacity: 0.25; }

/* 5.3 Field notes: sticky notes under the about copy */
.about-notes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  margin-top: 26px;
  max-width: 420px;
  grid-column: 1;
}
.about-artwork { grid-column: 2; grid-row: 1; }
.sticky-note {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 14px 16px 14px 20px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  box-shadow: 4px 4px 0 var(--surface-2);
  position: relative;
  transition: transform var(--hover) var(--ease),
              box-shadow var(--hover) var(--ease);
}
.sticky-note:hover {
  transform: rotate(0deg) translateY(-3px) !important;
  box-shadow: 6px 8px 0 var(--blue-pale);
}
.sticky-note p { margin: 0; }
.note-pin {
  position: absolute;
  left: 8px;
  top: 8px;
  color: var(--blue);
  font-size: 10px;
}

/* 5.3.5 Chip press 3D: tactile push-down on click */
.software-chip:active,
.skill-chip:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 0 0 var(--border-strong);
}

/* 5.4.2 Rail nodes: one dot per journey phase, GSAP owns scale only */
.rail-node {
  position: absolute;
  left: 50%;
  top: var(--node-top, 0%);
  margin-left: -4px;
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--hover) var(--ease),
              box-shadow var(--hover) var(--ease);
  z-index: 2;
}
.rail-node.is-active {
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-pale);
}

/* 5.4.4 Ghost state: upcoming stages dim while motion drives the rail.
   0.6 keeps the dimmed titles at roughly 4.6:1 contrast on the white
   card (accessibility first per guide section 10). */
.journey-body.js-motion .journey-item:not(.is-active) h4 { opacity: 0.6; }

/* 5.4.5 Stabilo highlight: the active stage is marked like a highlighter */
.journey-item {
  background-image: linear-gradient(90deg, var(--blue-pale), transparent);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease);
  padding-left: 6px;
  margin-left: -6px;
}
.journey-item.is-active { background-size: 100% 100%; }

/* 5.5 Vault: casing around the reserved credential grid + turning dial */
.vault-frame {
  position: relative;
  padding: 30px 20px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
}
.vault-dial {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  transition: transform 0.8s var(--ease);
  transform-origin: center;
}
.vault-frame:hover .vault-dial { transform: rotate(45deg); }
.vault-tick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 12px;
  background: var(--text-3);
  transform-origin: center bottom;
  margin-left: -0.5px;
  margin-top: -12px;
}

/* 5.6.2 Copy checkmark: drawn check replaces the copy icon briefly */
.copy-button { position: absolute; } /* anchor for the swapped icon */
.copy-button svg { flex-shrink: 0; }

/* 5.7.1 Ink bleed: the outline name glows softly as it fills */
.closing-outline-fill { text-shadow: 0 0 8px rgba(37, 99, 235, 0.4); }

/* 5.7.2 Motto words: spans injected by script.js, faded word by word */
.motto-word { opacity: 1; }

/* 12. RESPONSIVENESS --------------------------------------------------------- */
@media (max-width: 1050px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; min-height: 550px; }
  .hero-title { font-size: clamp(38px, 5.4vw, 60px); }
  .display-heading { font-size: clamp(40px, 6vw, 66px); }
  .pixel-card { min-height: 220px; padding: 16px; }
  .profile-emblem { width: 84px; height: 84px; font-size: 28px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-card { min-height: 175px; }
  .credential-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credential-slot { min-height: 180px; }

  /* Field notes (5.3): back to normal flow once the about layout stacks */
  .about-artwork { grid-column: auto; grid-row: auto; }
  .about-notes { grid-column: auto; max-width: none; }

  /* Curiosity map: stack the graph above the panel */
  .curiosity-layout { grid-template-columns: 1fr; }
  .curiosity-stage { min-height: 360px; }
  .curiosity-panel { min-height: 0; }
  .data-atlas { inset: -10% -10%; }
}

/* Navigation moved fully to the quick menu at 980px (V5.3 §6.2); below
   620px this rule is kept for very old stylesheets safety. */
@media (max-width: 620px) {
  .main-nav { display: none; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 80px; }
  .site-header { height: 67px; padding-inline: 20px; }
  .brand-mark { min-width: 0; }
  .brand-name { display: none; }
  .main-nav { gap: 15px; }
  .nav-link { font-size: 11px; }
  .menu-dots { width: 34px; height: 34px; }

  .hero { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 72px; min-height: auto; }
  .hero-copy { padding: 8px 0 0; }
  .hero-title { font-size: clamp(34px, 9.5vw, 56px); }
  .hero-title sup.sparkle { display: none; }
  .hero-tail { font-size: 15px; }
  .geo-one { left: auto; right: 6%; top: 6%; }
  .hero-visual { min-height: 320px; margin-top: 32px; }
  .pixel-frame { width: min(86%, 410px); }
  .pixel-card { min-height: 195px; }
  .profile-emblem { width: 74px; height: 74px; font-size: 25px; }
  .profile-meta strong { font-size: 18px; }
  .hero-sticker { right: 2%; top: 0; }
  .tool-two { left: 3%; }
  .scroll-cue { display: none; }

  .gallery-section { padding-top: 76px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 30px; }
  .display-heading { font-size: clamp(42px, 10.5vw, 60px); }
  .heading-aside { max-width: 440px; }
  .filter-row { align-items: flex-start; flex-direction: column; }
  .filter-button { padding: 8px 11px; font-size: 8px; }

  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .project-cover { height: 190px; }
  .project-info { padding: 13px 12px; }
  .project-info h3 { font-size: 15px; }

  .about-section { padding-top: 84px; padding-bottom: 64px; }
  .about-layout { grid-template-columns: 1fr; gap: 30px; }
  .about-artwork { min-height: 380px; }
  .id-art { max-height: 350px; width: min(84%, 370px); }

  /* Curiosity map: nodes become a readable stacked list; the SVG
     coordinates no longer apply, so decorative connectors hide. */
  .curiosity-map { margin-top: 52px; padding: 18px 16px; }
  .curiosity-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .curiosity-intro { max-width: 440px; }
  .curiosity-svg { display: none; }
  .curiosity-stage { min-height: 0; }
  .curiosity-nodes { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .curiosity-node { position: static; transform: none; min-width: 0; align-items: flex-start; }
  .curiosity-node:hover { transform: translateY(-2px); }
  .curiosity-node--primary { grid-column: 1 / -1; }
  .curiosity-node--primary:hover { transform: translateY(-2px); }
  .curiosity-panel { min-height: 0; }

  /* Data Atlas: fewer marks at small sizes, no illegible microcopy */
  .data-atlas { inset: -8% -6%; opacity: 0.85; }
  .atlas-label-a, .atlas-label-b, .atlas-label-c { display: none; }

  .journey-grid { margin-top: 42px; grid-template-columns: 1fr; }
  .journey-item { grid-template-columns: 78px 1fr; }
  .journey-status { display: none; }

  .social-section { padding-top: 66px; }
  .social-heading-row { flex-direction: column; align-items: flex-start; gap: 15px; }
  .social-intro { max-width: 440px; }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-card { min-height: 165px; }
  .social-footnote { font-size: 7px; }

  .credentials-section { padding-top: 72px; padding-bottom: 48px; }
  .credential-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credential-slot { min-height: 160px; }
  .credentials-footnote { flex-direction: column; gap: 6px; }

  .contact-block { padding: 22px 18px 20px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 14px 96px 13px 14px; }
  .copy-button { right: 46px; }

  .closing-name { white-space: normal; }
  .closing-bottom { flex-wrap: wrap; }
  .closing-bottom p { order: 3; width: 100%; text-align: left; }
  .site-footer { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .main-nav { gap: 10px; }
  .nav-link { font-size: 10px; }
  .brand-icon { width: 32px; height: 32px; font-size: 9px; }

  .project-grid { grid-template-columns: 1fr; }
  .project-cover { height: 200px; }

  .social-grid { gap: 9px; }
  .social-card { padding: 13px; }
  .social-icon { width: 46px; height: 46px; }
  .social-icon svg { width: 20px; height: 20px; }

  .credential-grid { grid-template-columns: 1fr; }
  .credential-slot { min-height: 140px; gap: 8px; }

  .closing-motto { font-size: 13px; }

  .profile-brand-row { gap: 13px; }
  .profile-emblem { width: 64px; height: 64px; font-size: 21px; }
  .profile-meta small { font-size: 8px; }
  .pixel-card { padding: 13px; }
  .pixel-frame { width: 90%; }

  .software-chip { height: 36px; min-width: 36px; font-size: 9px; }

  /* Copy button collapses to an icon-only control to fit 320px */
  .copy-button { padding: 7px 8px; }
  .copy-button-label { display: none; }
  .contact-card { padding-right: 84px; }

  .curiosity-nodes { grid-template-columns: 1fr; }
  .curiosity-heading { font-size: clamp(26px, 8vw, 34px); }
}

/* 13. REDUCED MOTION --------------------------------------------------------- */
/* Motion initial states are applied by JavaScript, so content is fully
   visible even when every animation is disabled or fails to load.
   Components that animate to a "finished" state render that state here. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Learning journey rail: show the completed line immediately */
  .journey-rail span { transform: scaleY(1); }
  /* Oversized footer: final typography state, no scroll-linked fill */
  .closing-outline-fill { clip-path: inset(0 0 0 0); }
  /* Data Atlas & identity card: static artwork, no pointer behaviour */
  .data-atlas { opacity: 0.9; }
  .pixel-frame::after { display: none; }

  /* V3 additions: every new component renders its final, static state. */
  /* 4.2 Ticks: visible marks, no reveal animation */
  .heading-ticks span { opacity: 0.5; transform: none; }
  /* 4.5 Pixel dust: decorative particles off entirely */
  .pixel-dust { display: none; }
  /* 5.1.1 Scanline: decorative beam off */
  .scanline { display: none; }
  /* 5.2.1 Drawer hover: colour feedback stays, movement does not */
  .project-card:hover,
  .project-card:focus-within { transform: none; box-shadow: none; }
  .project-card::before { display: none; }
  /* 5.3 Sticky notes: straight, static cards; hover only recolours */
  .sticky-note { transform: none !important; }
  .sticky-note:hover { transform: none !important; box-shadow: 4px 4px 0 var(--surface-2); border-color: var(--blue); }
  /* 5.4 Journey: nodes full size, titles full contrast, no stabilo sweep */
  .rail-node { transform: none !important; }
  .journey-body.js-motion .journey-item:not(.is-active) h4 { opacity: 1; }
  .journey-item { background: none; padding-left: 0; margin-left: 0; }
  .journey-item.is-active { background: none; }
  /* 5.5 Vault: dial stays still */
  .vault-dial { transition: none; }
  .vault-frame:hover .vault-dial { transform: none; }
  /* 5.7.2 Motto: full text immediately */
  .motto-word { opacity: 1 !important; }
  /* 5.7.3 Back to top: no hop */
  .back-top:hover { transform: none; }
}

/* ==========================================================================
   14. V4: THE LIVING ARCADE (sections 03 / 05 / 06 / 08 + extras)
   Game Deck · Off-screen · GitHub Activity · Companion · Konami Data Rain
   Every new colour beyond :root is a per-game accent from the data file,
   used only for borders, bars and glow, never for body text (§3.1).
   ========================================================================== */

/* [hidden] must always win, even against display:flex/grid components */
[hidden] { display: none !important; }

/* Extra decorative geometry for the two light V4 sections */
.geo-six { left: 1%; top: 18%; width: 18px; height: 18px; box-shadow: 15px 15px 0 -3px var(--blue-soft), 30px 0 0 -6px var(--border-strong); }
.geo-seven { right: 3%; top: 12%; width: 20px; height: 20px; opacity: 0.16; box-shadow: 16px 16px 0 var(--ink), -16px -16px 0 var(--blue-soft); }

/* 14.1 GAME DECK (#games) -------------------------------------------------- */
.games-section {
  background: var(--night); color: var(--text-on-dark);
  padding: 92px clamp(22px, 7vw, 110px) 66px;
  overflow: hidden; position: relative;
}
/* V6.5 §2.1: the Archive (#work) and the Game Deck (#games) share the
   --night surface. The transition-ribbon that used to separate them was
   transparent, so the --bg body colour showed through as a hard white
   line. The ribbon is removed from index.html; this rule fuses the two
   dark sections into one continuous surface, separated only by a hair
   line in the on-dark palette. Ribbons between light sections remain. */
.gallery-section + .games-section {
  border-top: 1px solid var(--line-on-dark);
  margin-top: 0;
}
.games-inner { z-index: 1; }
.games-section .geo { position: absolute; }

.deck-console { margin-top: 6px; }
.deck-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.deck-button {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--night-card); color: var(--text-on-dark);
  border: 1px solid var(--line-on-dark); border-radius: 999px;
  padding: 14px 22px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color var(--micro) var(--ease), transform var(--micro) var(--ease),
              box-shadow var(--micro) var(--ease), color var(--micro) var(--ease);
}
.deck-button:hover { border-color: var(--blue-soft); color: var(--blue-soft); transform: translateY(-2px); box-shadow: 0 0 24px color-mix(in srgb, var(--blue) 30%, transparent); }
.deck-button:active { transform: translateY(0); }
.deck-button[aria-expanded="true"] { border-color: var(--blue-soft); color: var(--blue-soft); }
.deck-button[aria-busy="true"] { opacity: 0.72; }
.deck-coin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--blue-soft); position: relative; flex-shrink: 0; }
.deck-coin::after { content: ""; position: absolute; left: 50%; top: 1.5px; bottom: 1.5px; width: 1.5px; transform: translateX(-50%); background: var(--blue-soft); }
.deck-hint { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--text-on-dark-2); margin: 0; }

/* Dead screen (idle state): night card, dashed frame, scanline + vignette */
.deck-screen { position: relative; min-height: 220px; border-radius: var(--radius); overflow: hidden; }
.deck-screen--off {
  background: var(--night-card);
  border: 1px dashed var(--line-on-dark);
  display: grid; place-items: center;
}
.deck-screen--off::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.38));
}
.deck-off-label { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 20px; }
.deck-no-signal { font-family: var(--mono); font-size: 15px; letter-spacing: 0.34em; color: var(--text-3); }
.deck-no-signal-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text-on-dark-2); opacity: 0.72; }
.deck-screen--glitch, .deck-screen--active {
  background: var(--night-card);
  border: 1px solid var(--line-on-dark);
}
.deck-screen--active { padding: 18px; }
.deck-noscript { margin-top: 10px; color: var(--blue-soft); }
.deck-footnote {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-on-dark);
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em;
  color: var(--text-on-dark-2);
}

/* Game cards */
.deck-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px; perspective: 900px;
}
.game-card {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 11px;
  background: color-mix(in srgb, var(--night) 55%, var(--night-card));
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-sm);
  padding: 16px;
  transition: transform var(--hover) var(--ease), border-color var(--hover) var(--ease),
              box-shadow var(--hover) var(--ease);
}
/* Rarity tiers: legendary = strong themed glow, rare = medium, common = slate */
.game-card[data-rarity="legendary"] {
  border-color: color-mix(in srgb, var(--game-color, var(--blue-soft)) 55%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--game-color, var(--blue-soft)) 24%, transparent);
}
.game-card[data-rarity="rare"] {
  border-color: color-mix(in srgb, var(--game-color, var(--blue-soft)) 38%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--game-color, var(--blue-soft)) 13%, transparent);
}
.game-card:hover, .game-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--game-color, var(--blue-soft));
  box-shadow: 0 0 24px color-mix(in srgb, var(--game-color, var(--blue-soft)) 35%, transparent);
  outline: none;
}
/* V6.4 §2.5.2: the head is a two-column flex row - text column and the
   56px pixel scene, top-aligned so long names wrap in place. */
.game-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.game-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.game-status {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-on-dark);
  color: var(--text-on-dark-2); white-space: nowrap;
}
.game-status--playing { color: var(--blue-soft); border-color: color-mix(in srgb, var(--blue-soft) 55%, transparent); }
.game-card-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em;
  color: var(--text-on-dark-2);
}
.rarity-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 7.5px; letter-spacing: 0.16em; padding: 3px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--game-color, var(--blue-soft)) 60%, transparent);
  color: var(--text-on-dark);
}
.rarity-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--game-color, var(--blue-soft)); }
.game-stats { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.stat-row { display: grid; grid-template-columns: minmax(88px, auto) 1fr auto; align-items: center; gap: 9px; }
.stat-row--text { grid-template-columns: minmax(88px, auto) 1fr; }
.stat-label { font-size: 11px; color: var(--text-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
/* V6.3 §1.1.1: the fill is always full width; the visible amount is the
   scaleX transform set inline by the renderer (target / 100). No width
   percentages are written anymore, so scaleX and width never compound. */
.stat-bar span { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--game-color, var(--blue-soft)); transform-origin: left center; }
.stat-value { font-family: var(--mono); font-size: 9px; color: var(--text-on-dark-2); white-space: nowrap; }
.stat-value--text { color: var(--blue-soft); }
.stat-spacer { min-width: 0; }
.stat-note {
  margin: -3px 0 0; padding-left: 1px;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text-on-dark-2) 85%, transparent);
}

/* 14.2 OFF-SCREEN (#offscreen) ---------------------------------------------- */
.offscreen-section { padding-top: 116px; padding-bottom: 100px; overflow: hidden; position: relative; }
.offscreen-layout {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 28px; align-items: start;
}
.pixel-stage {
  margin: 0; display: grid; place-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 30px 22px 16px; position: relative;
}
.pixel-stage::before, .pixel-stage::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-strong);
}
.pixel-stage::before { top: 9px; left: 9px; }
.pixel-stage::after { top: 9px; right: 9px; }
.pixel-pet {
  /* The pixel palette now lives on :root (V6.3) so every pixel SVG on
     the page resolves the same tokens. */
  width: min(280px, 82%); height: auto; image-rendering: pixelated;
}
.pixel-stage-label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; color: var(--text-3); }

.hobby-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
/* V6.6 Fase 4.3: chip is now a wrapper div (grid 1fr 24px). The press
   area is button.hobby-chip-main; the jump anchor a.hobby-link sits in
   its own column with a dashed divider. Padding moved to the button. */
.hobby-chip {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center;
  min-width: 0;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 0;
  overflow: hidden;
  transition: border-color var(--micro) var(--ease), transform var(--micro) var(--ease),
              box-shadow var(--micro) var(--ease);
}
.hobby-chip:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 4px 4px 0 var(--blue-pale); }
.hobby-chip-main {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 12px 8px 12px 14px;
  background: transparent; border: 0; text-align: left; cursor: pointer; width: 100%;
  font: inherit; color: inherit;
}
.hobby-chip-main:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.hobby-link {
  display: grid; place-items: center;
  padding: 12px 8px;
  font-family: var(--mono); font-size: 12px;
  color: var(--blue);
  border-left: 1px dashed var(--border-soft);
  transition: background var(--micro) var(--ease), color var(--micro) var(--ease);
}
.hobby-link:hover { background: var(--surface-2); color: var(--blue-hover); }
.hobby-link:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.hobby-icon {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--blue-pale); color: var(--blue-deep); border-radius: 9px;
}
.hobby-icon svg { width: 17px; height: 17px; }
.hobby-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hobby-label { font-size: 13px; font-weight: 600; }
.hobby-detail { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--text-3); }

/* V6.6 Fase 4.1: CURRENTLY status row above the chips. */
.hobby-current {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  margin: 16px 0 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--text-3);
}
.hobby-current-value { color: var(--blue); font-weight: 500; }

/* V6.6 Fase 4.2: last-logged log, at most three rows, newest on top. */
.hobby-log { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.hobby-log-label {
  margin: 0 0 8px;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
  color: var(--text-3);
}
.hobby-log-list { list-style: none; margin: 0; padding: 0; }
.hobby-log-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
}
.log-name { color: var(--text-2); }
.log-name.is-new { color: var(--blue); }
.log-time { color: var(--text-3); font-variant-numeric: tabular-nums; }

.spotify-frame {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.spotify-frame-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--text-2);
}
.spotify-live { color: var(--blue); font-size: 8px; letter-spacing: 0.1em; }
.spotify-frame iframe { display: block; border: 0; width: 100%; height: 352px; }
.spotify-frame-link {
  display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  padding: 11px 16px; border-top: 1px solid var(--border-soft);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--blue);
  transition: color var(--micro) var(--ease);
}
.spotify-frame-link:hover { color: var(--blue-hover); }

/* 14.3 NOW PLAYING (header indicator, V4 §6.5) ------------------------------- */
.now-playing {
  display: flex; align-items: center; gap: 9px;
  max-width: 220px; padding: 7px 12px 7px 8px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 999px;
  transition: border-color var(--micro) var(--ease), opacity var(--micro) var(--ease);
}
.now-playing:hover { border-color: var(--blue); }
.now-playing-art { width: 24px; height: 24px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--surface-2); }
.now-playing-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.now-playing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.now-playing.is-playing .now-playing-dot { background: #1DB954; animation: np-pulse 1.6s ease-in-out infinite; }
@keyframes np-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.45); }
  50% { box-shadow: 0 0 0 4px rgba(29, 185, 84, 0); }
}
.now-playing.is-recent { opacity: 0.65; }
.now-playing-text {
  min-width: 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em;
  color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quick-now-playing {
  display: block; padding: 9px 12px; margin-bottom: 5px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; color: var(--text-3);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 14.4 GITHUB ACTIVITY (#github) ---------------------------------------------- */
.github-section {
  background: var(--night); color: var(--text-on-dark);
  padding: 92px clamp(22px, 7vw, 110px) 72px;
  overflow: hidden; position: relative;
}
.github-inner { z-index: 1; }
.github-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.github-card {
  display: flex; flex-direction: column; gap: 7px; min-width: 0; min-height: 132px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 20px 18px 16px;
  transition: transform var(--hover) var(--ease), border-color var(--hover) var(--ease);
}
.github-card:hover { transform: translateY(-4px); border-color: var(--blue); }
.github-card-value {
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.github-card-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--text-3); }
.github-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.github-lang-chip {
  font-family: var(--mono); font-size: 9px; padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink);
}
.github-fallback {
  margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-on-dark-2);
}
.github-fallback a { color: var(--blue-soft); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.github-pulse { display: flex; gap: 6px; margin-top: 18px; }
.github-pulse span { width: 8px; height: 8px; border-radius: 2px; background: var(--blue-soft); opacity: 0.25; }
.github-note {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-on-dark);
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; color: var(--text-on-dark-2);
}

/* --- V6.6 Fase 8.2: recent repositories list ------------------------------- */
/* Rendered by script.js from the live GitHub payload (3 most recently
   updated public repos). Links are real html_url anchors, always
   target="_blank" rel="noopener noreferrer". */
.github-repos { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-on-dark); }
.github-repos-label {
  margin: 0 0 4px;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
  color: var(--text-on-dark-2);
}
.github-repos-list { list-style: none; margin: 0; padding: 0; }
.github-repos-list li {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  padding: 6px 0;
}
.github-repos-list a { color: var(--blue-soft); overflow-wrap: anywhere; }
.github-repos-list a:hover { text-decoration: underline; }
.github-repos-list span { color: var(--text-on-dark-2); opacity: 0.7; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 14.5 COMPANION (#companion + floating pet, V4 §8) ---------------------------- */
.companion-section { padding-top: 112px; padding-bottom: 92px; overflow: hidden; position: relative; }
.companion-inner { position: relative; z-index: 1; }
.companion-intro { max-width: 560px; font-size: 15px; color: var(--text-2); margin: 2px 0 26px; }
.companion-toggle[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); }
.companion-note {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--border-soft);
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; color: var(--text-3);
}
.heading-stamp-pet { text-align: right; }

.companion-pet { position: fixed; right: 24px; bottom: 24px; z-index: 90; }
.companion-pet-button {
  width: 78px; height: 78px; display: grid; place-items: center; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 18px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  transition: border-color var(--micro) var(--ease), box-shadow var(--micro) var(--ease);
}
.companion-pet-button:hover { border-color: var(--blue); box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22); }
.companion-pet-button svg { width: 60px; height: 60px; image-rendering: pixelated; }
.companion-tooltip {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em;
  padding: 9px 12px; border-radius: 10px; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
}
.companion-tooltip::after {
  content: ""; position: absolute; top: 100%; right: 18px;
  border: 5px solid transparent; border-top-color: var(--ink);
}

/* 14.6 KONAMI DATA RAIN (V4 §9) ------------------------------------------------- */
body.is-glitching { animation: v4-glitch 0.3s steps(5) both; }
@keyframes v4-glitch {
  0% { filter: hue-rotate(0deg); transform: translateX(0); }
  20% { filter: hue-rotate(60deg) saturate(1.6); transform: translateX(-4px); }
  40% { filter: hue-rotate(-45deg); transform: translateX(4px); }
  60% { filter: hue-rotate(25deg); transform: translateX(-2px); }
  80% { filter: hue-rotate(-12deg); transform: translateX(2px); }
  100% { filter: none; transform: none; }
}
#data-rain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.92; transition: opacity 0.4s ease;
}
#data-rain.is-fading { opacity: 0; }

/* 14.7 RESPONSIVE (V4) ----------------------------------------------------------- */
@media (max-width: 1150px) {
  .brand-name { display: none; }
  .main-nav { gap: 13px; }
  .nav-link { font-size: 11px; letter-spacing: 0; }
  .now-playing { max-width: 168px; }
  /* V5.3 §6.2: nine nowrap links measured 1.5px past the 1024px viewport;
     a slightly tighter header padding removes the overflow without
     shrinking type or hiding navigation on small laptops. */
  .site-header { padding-inline: clamp(18px, 4vw, 60px); }
}
/* Keep every nav label on one line now that the nav carries 9 links */
.nav-link { white-space: nowrap; }
@media (max-width: 980px) {
  /* Header gets crowded: the quick menu row carries Now Playing instead.
     V5.3 §6.2 fix: nine nowrap links plus the dots button cannot fit at
     tablet widths, so the quick menu becomes the navigation here. This
     removes the horizontal overflow measured at 768px. */
  .main-nav { display: none; }
  .now-playing { display: none; }
  .offscreen-layout { grid-template-columns: 1fr; }
  .github-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .games-section { padding-top: 76px; padding-bottom: 54px; }
  .github-section { padding-top: 76px; padding-bottom: 56px; }
  .offscreen-section { padding-top: 84px; padding-bottom: 70px; }
  .companion-section { padding-top: 84px; padding-bottom: 70px; }
  .deck-screen--active { padding: 12px; }
  .game-card { padding: 14px; }
  .spotify-frame iframe { height: 320px; }
  .companion-pet { right: 14px; bottom: 14px; }
  .companion-pet-button { width: 64px; height: 64px; border-radius: 15px; }
  .companion-pet-button svg { width: 50px; height: 50px; }
  .github-card { min-height: 118px; padding: 16px 14px 13px; }
}
@media (max-width: 420px) {
  /* V6.6 Fase 4: hobby chips stay 2 columns at 390px per spec; each chip
     is a compact button + 24px arrow column, so both fit without clipping. */
  .github-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: minmax(72px, auto) 1fr auto; gap: 7px; }
  .stat-label { font-size: 10px; }
  .now-playing { display: none; }
}

/* 14.8 REDUCED MOTION (V4) -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .game-card:hover, .game-card:focus-visible { transform: none; box-shadow: none; border-color: var(--game-color, var(--blue-soft)); }
  .game-card[data-rarity="legendary"], .game-card[data-rarity="rare"] { box-shadow: none; }
  .deck-button:hover { transform: none; box-shadow: none; }
  .hobby-chip:hover { transform: none; box-shadow: none; }
  .github-card:hover { transform: none; }
  .now-playing.is-playing .now-playing-dot { animation: none; }
  .companion-pet-button { box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14); }
  body.is-glitching { animation: none; }
  #data-rain { display: none; }
}

/* ==========================================================================
   15. V5.2 EDGE ARCHIVE (spec: farrel_portfolio_v5_2_edge_archive)
   Margin atlas, blueprint, arcade dressing, field notes, desk habitat,
   open-source pulse framing, engraved credential archive, pet habitat,
   postal decorations. Decoration rules: aria-hidden at the DOM level,
   pointer-events none, behind content, restrained scale, no scrub.
   ========================================================================== */

/* 15.0 positioning context for spine + section-local overlays */
.hero, .gallery-section, .games-section, .about-section,
.github-section, .credentials-section, .companion-section,
.social-section { position: relative; }

/* 15.1 HERO RULER (4.1): thin measure line on the left hero edge.
   V5.3 §4.2: evenly spaced tick marks along the line (48px rhythm). */
.hero-ruler {
  position: absolute; left: 34px; top: 132px; bottom: 104px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none; z-index: 0;
}
.hero-ruler-line {
  flex: 1; width: 1px;
  background: linear-gradient(to bottom, var(--border-strong), var(--border-soft) 60%, transparent);
  position: relative;
}
.hero-ruler-line::before {
  content: ""; position: absolute; left: -3px; top: 0; bottom: 8%;
  width: 7px; height: auto;
  background: repeating-linear-gradient(
    to bottom,
    var(--border-strong) 0 1px,
    transparent 1px 48px
  );
}
.hero-ruler-line::after {
  content: ""; position: absolute; left: -5px; bottom: 18%;
  width: 11px; height: 1px; background: var(--border-strong);
}
.hero-ruler-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  color: var(--text-3); writing-mode: vertical-rl; white-space: nowrap;
}
/* 15.1b ARCHIVE SPINE (3.2): one margin ruler per section */
.archive-spine {
  position: absolute; left: 26px; top: 128px; bottom: 54px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none; z-index: 0;
}
.archive-spine__ticks {
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start;
  border-left: 1px solid var(--border-strong);
}
.archive-spine__ticks i { display: block; width: 7px; height: 1px; background: var(--border-strong); }
.archive-spine__ticks i:nth-child(3n) { width: 11px; }
.archive-spine__label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  color: var(--text-3); writing-mode: vertical-rl; white-space: nowrap;
}
.gallery-section .archive-spine__label, .games-section .archive-spine__label,
.github-section .archive-spine__label { color: rgba(203, 213, 225, 0.55); }
.gallery-section .archive-spine__ticks, .games-section .archive-spine__ticks,
.github-section .archive-spine__ticks { border-left-color: rgba(203, 213, 225, 0.35); }
.gallery-section .archive-spine__ticks i, .games-section .archive-spine__ticks i,
.github-section .archive-spine__ticks i { background: rgba(203, 213, 225, 0.35); }

/* 15.2 GALLERY BLUEPRINT (4.2): faint 40px grid, masked toward edges */
.gallery-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 44%, #000 38%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 44%, #000 38%, transparent 100%);
}
.gallery-inner { position: relative; }
.blueprint-corners { position: absolute; inset: 6px; pointer-events: none; z-index: 0; }
.blueprint-corners i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(147, 197, 253, 0.4); }
.blueprint-corners i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.blueprint-corners i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.blueprint-corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.blueprint-corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.gallery-ruler {
  display: flex; gap: 26px; margin: -6px 0 16px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.38); pointer-events: none;
}
.gallery-ruler span { position: relative; padding-left: 12px; }
.gallery-ruler span::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

/* 15.3 ARCADE CABINET (4.3): spotlight, scanlines, joystick, A/B buttons */
.games-section::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(760px, 86%); height: 360px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at top center,
    rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.05) 46%, transparent 72%);
}
.games-inner { position: relative; z-index: 1; }
.deck-console { position: relative; }
.deck-screen--active::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px);
}
.arcade-joystick {
  position: absolute; top: 20px; left: 20px; width: 32px; height: 32px;
  opacity: 0.3; pointer-events: none; image-rendering: pixelated; z-index: 0;
}
.arcade-buttons {
  position: absolute; right: 22px; bottom: 54px; width: 62px; height: 31px;
  opacity: 0.3; pointer-events: none; image-rendering: pixelated; z-index: 0;
}

/* 15.4 ABOUT FIELD NOTES (4.4): margin annotations + leader lines */
.about-layout { position: relative; }
.field-note-tag {
  position: absolute; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.2em; color: var(--text-3); pointer-events: none;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.field-note-tag::after { content: ""; width: 46px; height: 1px; background: var(--border-strong); }
.field-note-tag--1 { top: 6px; right: 0; }
.field-note-tag--2 { bottom: 30px; left: 0; flex-direction: row-reverse; }
.field-note-tag--2::after { width: 34px; }
.skill-constellation-wrap { position: relative; margin-top: 26px; }
.skill-constellation { display: block; width: 100%; height: auto; }
.skill-constellation__edge {
  fill: none; stroke: rgba(37, 99, 235, 0.3); stroke-width: 1;
  stroke-dasharray: 4 7; stroke-linecap: round;
}
.skill-constellation__node { fill: var(--blue); }
.skill-constellation__node--center { fill: var(--blue-deep); }
/* V6.3 §1.5.2: the label rule was removed together with the
   <g class="skill-constellation__labels"> markup; the constellation is
   an abstract network now. */

/* 15.5 DESK HABITAT + PET HABITAT (4.5 / 4.8): shared scene pieces */
.desk-habitat {
  position: absolute; inset: 6px; border-radius: calc(var(--radius) - 2px);
  overflow: hidden; pointer-events: none; z-index: 0;
}
.pixel-pet { position: relative; z-index: 1; }
.pet-habitat {
  position: relative; margin: 30px auto 26px; max-width: 760px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface); padding: 30px 18px 16px;
}
.pet-habitat-label {
  position: absolute; top: 10px; left: 14px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em;
  color: var(--text-3);
}
/* V5.3 §4.9: honest status chip so the wider habitat keeps a support
   panel presence next to the scene (idle vs summoned). */
.pet-habitat-status {
  position: absolute; top: 10px; right: 14px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em;
  color: var(--blue-deep); background: var(--blue-pale);
  padding: 4px 8px; border-radius: 999px;
}
.pet-habitat-scene {
  position: relative; height: 212px; border-radius: 10px;
  overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.habitat-wall {
  position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background-color: #EEF2F7;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px);
  background-size: 12px 12px;
}
.habitat-window {
  position: absolute; top: 11%; left: 11%; width: 21%; height: 27%;
  background: #DBEAFE; border: 3px solid #64748B;
  box-shadow: inset 0 0 0 2px #F8FAFC;
}
.habitat-window::before, .habitat-window::after {
  content: ""; position: absolute; background: #64748B;
}
.habitat-window::before { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.habitat-window::after { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.habitat-poster {
  position: absolute; top: 13%; right: 12%; width: 13%; height: 21%;
  background: #2563EB; box-shadow: inset 0 0 0 2px #1E3A8A;
}
.habitat-poster::after {
  content: ""; position: absolute; inset: 22% 18%;
  background: #93C5FD; opacity: 0.85;
}
.habitat-shelf {
  position: absolute; top: 46%; left: 55%; width: 25%; height: 3px;
  background: #5C3A1A;
}
.habitat-shelf::before {
  content: ""; position: absolute; right: 22%; top: -7px;
  width: 5px; height: 7px; background: #00A8E8;
}
.habitat-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: repeating-linear-gradient(0deg,
    #C9A068 0 9px, #B98E55 9px 18px, #A67C48 18px 27px);
  border-top: 2px solid #5C3A1A;
}
.habitat-dust {
  position: absolute; width: 3px; height: 3px; border-radius: 1px;
  background: #93C5FD; opacity: 0.5; z-index: 1;
}
.habitat-preview-pet {
  position: absolute; left: 50%; bottom: 30%; width: 120px; height: 120px;
  transform: translateX(-50%); image-rendering: pixelated; z-index: 2;
  transition: opacity 0.2s ease;
}

/* --- V6.6 Fase 5: habitat furniture + wall board --------------------------- */
/* Rect-only pixel props (script.js, createElementNS) in the --px-*
   palette. Each svg wraps <g class="habitat-furniture habitat-furniture--name">.
   They hug the scene margins and never cover the centred pet preview
   (z-index 2); furniture sits at 1. Sizes stay fixed so the pixel scale
   is stable across viewport widths. */
.habitat-furniture {
  position: absolute; height: auto; z-index: 1;
  image-rendering: pixelated; pointer-events: none;
}
.habitat-furniture--table { left: 7%; bottom: 10%; width: 40px; }
.habitat-furniture--chair { left: calc(7% + 46px); bottom: 10%; width: 22px; }
.habitat-furniture--plant { right: 4%; bottom: 4%; width: 26px; }
.habitat-furniture--clock { left: 50%; top: 7%; width: 22px; }

/* 5.2 Wall activity board: honest STATUS text on the habitat wall. */
.habitat-board {
  position: absolute; top: 18%; right: 28%; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 4px 8px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06);
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: none;
}
.habitat-board-label {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.16em;
  color: var(--text-3); display: block;
}
.habitat-board-value {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--ink); font-weight: 500; display: block;
}
@media (max-width: 700px) {
  .habitat-board { right: 20%; top: 14%; }
  .habitat-furniture--table { width: 32px; }
  .habitat-furniture--chair { left: calc(7% + 36px); width: 18px; }
  .habitat-furniture--plant { width: 20px; }
  .habitat-furniture--clock { width: 18px; }
}
.companion-section .companion-inner { position: relative; z-index: 1; }

/* 15.6 GITHUB OPEN SOURCE PULSE (4.6): skeleton texture + terminal frame */
.github-section { overflow: hidden; }
.github-inner { position: relative; }
.github-skeleton {
  position: absolute; top: 26px; right: 2%; width: 280px; height: 98px;
  pointer-events: none; z-index: 0; opacity: 0.9;
}
.github-brackets {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 28px; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.24em; color: rgba(147, 197, 253, 0.55); pointer-events: none;
}
.github-brackets::before, .github-brackets::after {
  font-size: 15px; color: rgba(147, 197, 253, 0.4); letter-spacing: 0;
}
.github-brackets::before { content: "["; }
.github-brackets::after { content: "]"; }
.github-tooltip {
  position: fixed; left: 0; top: 0; z-index: 120; max-width: 250px;
  background: #0F172A; color: #E2E8F0; border: 1px solid #334155;
  border-radius: 6px; padding: 8px 11px;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.55;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.4); pointer-events: none;
}
.github-tooltip-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 15.7 ENGRAVED CREDENTIAL ARCHIVE (4.7): rulers, plates, label, stamp */
.credential-grid { position: relative; }
.credential-ruler {
  position: absolute; left: 0; right: 0; height: 10px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 1px, transparent 1px 20px)
    bottom left / 100% 6px no-repeat;
}
.credential-ruler--top {
  top: -24px; border-top: 1px solid var(--border-strong);
  background-position: top left;
}
.credential-ruler--bottom {
  bottom: -24px; border-bottom: 1px solid var(--border-strong);
  background-position: bottom left;
}
.credential-plate {
  position: absolute; width: 15px; height: 15px;
  border: 1px solid var(--border-strong); background: var(--surface);
  pointer-events: none;
}
.credential-plate:nth-of-type(1) { top: -8px; left: -8px; }
.credential-plate:nth-of-type(2) { top: -8px; right: -8px; }
.credential-plate:nth-of-type(3) { bottom: -8px; left: -8px; }
.credential-plate:nth-of-type(4) { bottom: -8px; right: -8px; }
.credential-plate-label {
  position: absolute; top: -46px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em;
  color: var(--text-3); background: var(--bg);
  padding: 3px 12px; white-space: nowrap; pointer-events: none;
}
.credential-stamp {
  /* V6.6 Fase 2.4: pulled inside the grid frame so the stamp can never
     clip at the section edge on any viewport (was top -16 / right -10). */
  position: absolute; top: 12px; right: 12px; z-index: 2;
  transform: rotate(-8deg);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--blue); border: 2px dashed var(--blue);
  background: rgba(219, 234, 254, 0.4); border-radius: 4px;
  padding: 8px 12px; pointer-events: none; opacity: 0.85;
}

/* 15.8 SOCIAL / CONTACT / FOOTER (4.9): postal stamp + signal waves */
.contact-stamp {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: rgba(226, 232, 240, 0.75); border: 1.5px dashed rgba(148, 163, 184, 0.5);
  padding: 9px 11px; border-radius: 4px; transform: rotate(8deg);
  pointer-events: none;
}
.contact-wave {
  position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  border: 1px solid rgba(147, 197, 253, 0.28); border-radius: 50%;
  pointer-events: none;
}
.contact-wave--1 { width: 18px; height: 18px; }
.contact-wave--2 { width: 30px; height: 30px; }
.contact-wave--3 { width: 42px; height: 42px; }
.contact-card { overflow: visible; }
.contact-card--personal { z-index: 1; }
.closing-section { position: relative; }
.closing-section::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: 88px; width: min(560px, 74%); height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 1px, transparent 1px 22px);
}

/* 15.9 HOBBY CHIP BUTTON RESET (5.3 / V6.6 Fase 4.3): the press area is
   button.hobby-chip-main inside the .hobby-chip wrapper div now */
.hobby-chip-main {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; color: inherit; text-align: left; cursor: pointer;
}
.hobby-chip-main:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* 15.10 SECTION-LOCAL GRAIN (3.3): dark sections carry a touch more
   texture. Uses the global #grain-filter; static, desktop only.
   V5.3 §4.1: combined with the 0.06 global layer the dark sections land
   near the agreed 0.08 target without doubling into mud. */
@media (min-width: 701px) {
  .gallery-section::after, .games-section::after, .github-section::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    opacity: 0.02; filter: url(#grain-filter);
  }
}

/* 15.11 RESPONSIVE (7.1): margins calm down on small screens */
@media (max-width: 1100px) {
  .archive-spine { left: 14px; }
  .field-note-tag { display: none; }
}
@media (max-width: 1000px) {
  .hero-ruler, .archive-spine { display: none; }
  .games-section::before { width: 80%; }
  .pet-habitat { max-width: 640px; }
}
@media (max-width: 700px) {
  .credential-ruler, .credential-plate-label { display: none; }
  .credential-stamp { top: 8px; right: 8px; padding: 6px 9px; font-size: 9px; }
  .github-skeleton { opacity: 0.45; width: 200px; height: 70px; }
  .gallery-section::before { opacity: 0.5; }
  .blueprint-corners { inset: 2px; }
  .arcade-buttons { bottom: 46px; right: 12px; width: 46px; height: 23px; }
  .arcade-joystick { width: 24px; height: 24px; left: 12px; }
  .pet-habitat-scene { height: 168px; }
  .habitat-preview-pet { width: 104px; height: 104px; }
  .contact-stamp { top: 12px; right: 12px; font-size: 9px; padding: 7px 9px; }
  .closing-section::before { display: none; }
  .pet-habitat-status { font-size: 7.5px; letter-spacing: 0.14em; }
}

/* 15.12 REDUCED MOTION (8.2): decoration stays, loops do not */
@media (prefers-reduced-motion: reduce) {
  .habitat-dust { display: none; }
  .contact-wave { display: none; }
  .scanline { display: none; }
  .github-tooltip { transition: none; }
  .habitat-preview-pet { transition: none; }
  .deck-screen--active::after { background: none; }
}

/* ==========================================================================
   16. V5.3 GLOBAL ARCHIVE NAVIGATOR (spec: farrel_portfolio_v5_3 §2)
   The hero search is a keyword navigator between sections. The dropdown,
   keyboard hint, and status row are part of the hero form area; nothing
   here depends on hover, and the status text stays readable without JS.
   ========================================================================== */

/* Anchor for the absolutely positioned dropdown below the pill input. */
.archive-search-wrap { position: relative; }
.hero-actions { align-items: center; }

/* Dropdown listbox: floats above hero content, never clips text.
   z-index stays below the fixed header (z 90) but above hero layers. */
.archive-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  max-width: min(340px, 88vw);
  max-height: 264px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  padding: 6px;
  z-index: 40;
}
.archive-suggestions[hidden] { display: none; }

.archive-suggestion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--micro) var(--ease), color var(--micro) var(--ease);
}
.archive-suggestion-key {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  flex-shrink: 0;
}
.archive-suggestion:hover,
.archive-suggestion.is-active,
.archive-suggestion[aria-selected="true"] {
  background: var(--surface-2);
}
.archive-suggestion[aria-selected="true"] {
  background: var(--blue-pale);
  color: var(--blue-deep);
}
.archive-suggestion[aria-selected="true"] .archive-suggestion-key { color: var(--blue); }
.archive-suggestion:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Keyboard hint under the dropdown: decoration, never announced. */
.archive-search-hint {
  margin: 6px 4px 0;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--text-3);
}

/* Status row: navigation confirmation or the honest not-found message.
   Visible text (also the polite live region), independent of GSAP. */
.archive-search-note {
  margin: 8px 4px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-2);
  max-width: min(340px, 88vw);
}
.archive-search-note.is-notfound { color: #B91C1C; }

/* Touch ergonomics: suggestions keep 44px-ish targets and the dropdown
   spans the row width so taps never feel cramped. */
@media (max-width: 700px) {
  .archive-suggestions {
    min-width: 100%;
    max-width: 100%;
    max-height: 232px;
  }
  .archive-suggestion { padding: 12px; }
  .archive-search-wrap { flex: 1 1 100%; }
}

/* Reduced motion: the not-found feedback stays as plain colour text,
   no shake (script.js also checks the preference before tweening). */
@media (prefers-reduced-motion: reduce) {
  .archive-suggestion { transition: none; }
}

/* ======================================================================
 * 17. V6.4: PIXEL SCENES + ENTRANCE PROPS + DESKTOP LAYERS
 * ==================================================================== */

/* --- V6.4 §2.5: per-game pixel scene ------------------------------------ */
/* In-flow right column of the card head: 56px desktop / 48px mobile,
   16x16 viewBox scaled up with crispEdges + pixelated rendering. The
   scene replaces the old absolute .game-pixel-character (removed), so
   the head/meta no longer reserve any padding rail. */
.game-card { overflow: hidden; }
.game-head-text {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; flex: 1;
}
.game-head-text .game-name { word-break: break-word; }
.game-pixel-scene {
  position: relative;
  flex-shrink: 0;
  width: 56px; height: 56px;
  border: 1px solid var(--line-on-dark);
  border-radius: 6px;
  overflow: hidden;
  background: var(--night);
  image-rendering: pixelated;
}
.game-pixel-scene svg { display: block; width: 100%; height: 100%; }
/* Per-game border tint from the game's own themeColor accent. */
.game-pixel-scene--valorant { border-color: color-mix(in srgb, #FF4655 40%, var(--line-on-dark)); }
.game-pixel-scene--hades-ii { border-color: color-mix(in srgb, #20E3B2 40%, var(--line-on-dark)); }
.game-pixel-scene--dark-souls-iii { border-color: color-mix(in srgb, #E25822 40%, var(--line-on-dark)); }
.game-pixel-scene--hearts-of-iron-iv { border-color: color-mix(in srgb, #8B5A2B 40%, var(--line-on-dark)); }
.game-pixel-scene--minecraft { border-color: color-mix(in srgb, #57874E 40%, var(--line-on-dark)); }
.game-pixel-scene--age-of-empires-iv { border-color: color-mix(in srgb, #D4AF37 40%, var(--line-on-dark)); }
.game-pixel-scene--total-war-warhammer-iii { border-color: color-mix(in srgb, #990000 40%, var(--line-on-dark)); }
.game-pixel-scene--red-dead-redemption-ii { border-color: color-mix(in srgb, #E51A1A 40%, var(--line-on-dark)); }
.game-pixel-scene--ghost-of-tsushima { border-color: color-mix(in srgb, #C41E3A 40%, var(--line-on-dark)); }
.game-pixel-scene--the-last-of-us-part-i { border-color: color-mix(in srgb, #3B443A 55%, var(--line-on-dark)); }
.game-pixel-scene--outlast-ii { border-color: color-mix(in srgb, #39FF14 40%, var(--line-on-dark)); }

/* TLOU dim vignette + Outlast night-vision tint sit on the wrapper so
   no extra rect burns the 20-rect budget. */
.game-pixel-scene--the-last-of-us-part-i::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
.game-pixel-scene--outlast-ii::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: color-mix(in srgb, var(--px-lime) 12%, transparent);
  mix-blend-mode: screen;
}

/* --- V6.4 §2.6: loop animations, always steps() for the pixel feel ------
   Rect loops use the individual translate/rotate properties (not
   transform) so they compose with GSAP entrance transforms, and
   fill-opacity (not opacity) so they compose with GSAP entrance fades. */
.game-pixel-scene rect { transform-box: fill-box; transform-origin: center; }
@keyframes val-muzzle-flash {
  0%, 70% { opacity: 0; }
  71%, 85% { opacity: 1; }
  86%, 100% { opacity: 0; }
}
.game-pixel-scene--valorant .val-muzzle { animation: val-muzzle-flash 1.5s steps(1) infinite; }
@keyframes val-casing-drop {
  0% { translate: 0 0; opacity: 1; }
  100% { translate: 2px 4px; opacity: 0; }
}
.game-pixel-scene--valorant .val-casing { animation: val-casing-drop 2s steps(4) infinite; }
@keyframes hades-rune-spin {
  0% { rotate: 0deg; }
  25% { rotate: 45deg; }
  50% { rotate: 90deg; }
  75% { rotate: 135deg; }
  100% { rotate: 180deg; }
}
.game-pixel-scene--hades-ii .hades-rune { animation: hades-rune-spin 2s steps(4) infinite; }
@keyframes px-torch-flicker {
  0%, 100% { fill-opacity: 1; }
  30% { fill-opacity: 0.55; }
  60% { fill-opacity: 0.8; }
}
.game-pixel-scene--hades-ii .hades-torch { animation: px-torch-flicker 0.9s steps(1) infinite; }
.game-pixel-scene--dark-souls-iii .ds3-torch { animation: px-torch-flicker 1.1s steps(1) infinite; }
.game-pixel-scene--minecraft .mc-torch { animation: px-torch-flicker 0.8s steps(1) infinite; }
@keyframes ds3-sword-sway {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 2deg; }
}
.game-pixel-scene--dark-souls-iii .ds3-sword { animation: ds3-sword-sway 2.2s steps(2) infinite; }
@keyframes hoi4-arrow-move {
  0% { translate: 0 0; }
  50% { translate: 2px 0; }
  100% { translate: 0 0; }
}
.game-pixel-scene--hearts-of-iron-iv .hoi4-arrow { animation: hoi4-arrow-move 2.4s steps(4) infinite; }
@keyframes mc-crack-blink {
  0%, 100% { fill-opacity: 1; }
  50% { fill-opacity: 0.2; }
}
.game-pixel-scene--minecraft .mc-crack { animation: mc-crack-blink 1.6s steps(2) infinite; }
@keyframes aoe-banner-sway {
  0%, 100% { translate: 0 0; }
  50% { translate: 1px 0; }
}
.game-pixel-scene--age-of-empires-iv .aoe-banner { animation: aoe-banner-sway 1.8s steps(2) infinite; }
@keyframes tw-lava-flicker {
  0%, 100% { fill-opacity: 0.9; }
  40% { fill-opacity: 0.4; }
  70% { fill-opacity: 0.7; }
}
.game-pixel-scene--total-war-warhammer-iii .tw-lava-flicker { animation: tw-lava-flicker 1.2s steps(1) infinite; }
@keyframes rdr-dust-drift {
  0% { translate: 0 0; fill-opacity: 0.4; }
  100% { translate: -3px 0; fill-opacity: 0.1; }
}
.game-pixel-scene--red-dead-redemption-ii .rdr-dust { animation: rdr-dust-drift 3s steps(4) infinite; }
@keyframes got-leaf-fall {
  0% { translate: 0 -2px; rotate: 0deg; fill-opacity: 1; }
  100% { translate: 2px 3px; rotate: 90deg; fill-opacity: 0.3; }
}
.game-pixel-scene--ghost-of-tsushima .got-leaf { animation: got-leaf-fall 2.8s steps(4) infinite; }
@keyframes tlou-flashlight-flicker {
  0% { fill-opacity: 0.5; }
  20% { fill-opacity: 0.3; }
  35% { fill-opacity: 0.6; }
  55% { fill-opacity: 0.35; }
  75% { fill-opacity: 0.6; }
  100% { fill-opacity: 0.5; }
}
.game-pixel-scene--the-last-of-us-part-i .tlou-flashlight { animation: tlou-flashlight-flicker 2s steps(1) infinite; }
@keyframes out-noise-flicker {
  0% { fill-opacity: 0.9; }
  25% { fill-opacity: 0.3; }
  50% { fill-opacity: 0.8; }
  75% { fill-opacity: 0.2; }
  100% { fill-opacity: 0.9; }
}
.game-pixel-scene--outlast-ii .out-noise { animation: out-noise-flicker 1.5s steps(1) infinite; }

/* Mobile scene size (spec 2.1): 48px below 700px. */
@media (max-width: 700px) {
  .game-pixel-scene { width: 48px; height: 48px; }
}

/* --- V6.4 Fase 3: temporary entrance props ------------------------------ */
/* Created and removed by script.js; every one carries .deck-temp so the
   deck state machine can sweep them at every boundary. */
.deck-temp { position: absolute; pointer-events: none; z-index: 3; }
.deck-flash { inset: 0; background: rgba(255, 255, 255, 0.85); z-index: 7; }
.deck-flash--local { inset: auto; width: 18px; height: 10px; background: var(--px-gold); box-shadow: 0 0 10px rgba(212, 175, 55, 0.9); }
.deck-darken { inset: 0; background: rgba(5, 8, 16, 0.92); z-index: 6; }
.deck-dust { width: 4px; height: 4px; background: var(--px-gold); }
.deck-dust--rdr { background: color-mix(in srgb, var(--px-gold) 70%, var(--px-ivory)); }
.deck-slash { left: 8%; right: 8%; top: 46%; height: 2px; background: var(--px-ivory); transform-origin: center; }
.deck-slash--got { background: #FFFFFF; }
.deck-ember { inset: 0; mix-blend-mode: screen; }
.deck-line { left: 10%; right: 10%; height: 1.5px; background: var(--border-strong); }
.deck-line--top { top: 14%; }
.deck-line--bottom { bottom: 14%; }
.deck-marker { width: 7px; height: 7px; background: var(--game-color, var(--blue-soft)); border: 1px solid var(--px-ivory); }
.deck-arrow { width: 16px; height: 2px; background: var(--px-python-blue); }
.deck-arrow--b { background: var(--px-pink); }
.deck-paper {
  inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(212, 175, 55, 0.10) 0 1px, transparent 1px 9px);
}
.deck-dirt { width: 5px; height: 5px; background: var(--px-wood); }
.deck-wash { inset: 0; background: color-mix(in srgb, var(--px-python-blue) 45%, transparent); }
.deck-lava { width: 4px; height: 4px; background: var(--px-pink); box-shadow: 0 0 6px rgba(255, 0, 127, 0.5); }
.deck-splatter { width: 26px; height: 18px; border-radius: 40% 55% 45% 60%; }
.deck-splatter--tlou { width: 30px; height: 22px; }
.deck-leaf { width: 6px; height: 6px; background: var(--px-pink); }
.deck-gleam { width: 3px; height: 14px; background: #FFFFFF; }
.deck-vignette { inset: 0; box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.85); }
.deck-nightvision { inset: 0; background: color-mix(in srgb, var(--px-lime) 30%, transparent); }
.deck-scan { left: 0; right: 0; top: 30%; height: 2px; background: rgba(244, 244, 249, 0.7); }
.deck-scan--out { background: color-mix(in srgb, var(--px-lime) 60%, transparent); }
.deck-artifact {
  width: 30px; height: 8px;
  background: repeating-linear-gradient(0deg,
    var(--px-lime) 0 2px, transparent 2px 4px);
}
.deck-sunset { left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, rgba(229, 90, 43, 0.35), transparent); }

/* V6.4 §2.5.2 reduced-motion contract: loops stop on the first frame,
   the scene itself stays visible. */
@media (prefers-reduced-motion: reduce) {
  .game-pixel-scene svg * { animation: none !important; }
}

/* --- V6.4 Fase 4 layer 1: ambient pixel debris --------------------------- */
.ambient-debris { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ambient-debris-item { position: absolute; width: 16px; height: 16px; opacity: 0.2; }
.ambient-debris-item svg { display: block; width: 100%; height: 100%; }

/* --- V6.4 Fase 4 layer 2: transition ribbons ---------------------------- */
.transition-ribbon {
  position: relative;
  width: 70%; height: 20px;
  margin: 0 auto;
  pointer-events: none;
  z-index: 0;
}
.transition-ribbon::before,
.transition-ribbon::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  height: 1.5px;
  background: var(--border-strong);
  opacity: 0.15;
}
.transition-ribbon::before { top: 40%; }
.transition-ribbon::after { top: 60%; }
.transition-ribbon span {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: var(--blue-soft);
  opacity: 0.2;
  transform: translate(-50%, -50%);
  transform-origin: center;
  rotate: 45deg;
}

/* --- V6.4 Fase 4 layer 3: desktop margin frames -------------------------- */
/* Gallery, Game Deck and GitHub use real divs (their section pseudo
   elements are already taken by the blueprint grid / spotlight). */
.desktop-frame {
  position: absolute;
  width: 40px; height: 40px;
  border: 1.5px solid var(--border-strong);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.desktop-frame--tl { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
.desktop-frame--br { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }
/* Hero, About, Off-screen, Credentials, Companion and Social still have
   free pseudo elements, so they get the same frames without markup. */
@media (min-width: 1200px) {
  .hero::before, .hero::after,
  .about-section::before, .about-section::after,
  .offscreen-section::before, .offscreen-section::after,
  .companion-section::before, .companion-section::after,
  .credentials-section::before, .credentials-section::after,
  .social-section::before, .social-section::after {
    content: "";
    position: absolute;
    width: 40px; height: 40px;
    border: 1.5px solid var(--border-strong);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
  }
  .hero::before,
  .about-section::before,
  .offscreen-section::before,
  .companion-section::before,
  .credentials-section::before,
  .social-section::before {
    top: 20px; left: 20px;
    border-right: 0; border-bottom: 0;
  }
  .hero::after,
  .about-section::after,
  .offscreen-section::after,
  .companion-section::after,
  .credentials-section::after,
  .social-section::after {
    bottom: 20px; right: 20px;
    border-left: 0; border-top: 0;
  }
}
@media (max-width: 1199px) {
  .desktop-frame { display: none; }
}

/* V6.4 §4.4: master mobile guard - every desktop decoration layer is
   hidden below 900px (covers the debris' 700px rule as well). */
@media (max-width: 900px) {
  .ambient-debris,
  .transition-ribbon,
  .desktop-frame { display: none; }
}

/* --- V6.3 §4.5: eject helper props (created and removed by script.js) --- */
.deck-eject-sweep {
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--blue-soft), transparent);
}
.deck-crt-line {
  position: absolute; left: 6%; right: 6%; top: 50%;
  height: 2px; margin-top: -1px; z-index: 6;
  background: var(--ivory, #F4F4F9);
  opacity: 0; pointer-events: none;
  box-shadow: 0 0 12px rgba(244, 244, 249, 0.8);
}

/* --- V6.3: EDGE SVG ORNAMENTS ------------------------------------------- */
/* General ornament contract: absolute, untouchable, inherits colour.
   Sections already carry position: relative; the content layers sit
   above every ornament through source order (ornaments are inserted as
   early children) plus the explicit z-index rules below. */
.ornament { position: absolute; pointer-events: none; color: currentColor; z-index: 0; }
[id^="ornament-"] { scroll-margin: 0; }
.section-inner, .hero-copy, .hero-visual { position: relative; z-index: 1; }
.deck-console { position: relative; }
.about-layout { position: relative; }
.about-artwork { position: relative; }
.contact-block { position: relative; }
.closing-section { position: relative; }

/* SVG sizing: fill-type ornaments stretch to their layer; aspect-type
   ornaments keep their ratio (width 100%, height auto inside a sized
   ornament box). */
.ornament-gallery-truchet svg,
.ornament-about-dots svg { width: 100%; height: 100%; display: block; }
.ornament-hero-crosshair svg,
.ornament-about-leader svg,
.ornament-games-cable svg,
.ornament-github-pulse svg,
.ornament-contact-envelope svg,
.ornament-habitat-plant svg,
.ornament-habitat-poster2 svg { width: 100%; height: auto; display: block; }

/* 5.1 Hero: crosshair orbital plate marker. Sits above the existing
   FIG. 01 caption line; V6.4 §5.1 enlarges the plate to 120x120. The
   0.08 opacity lives on the SVG (not the container) so the mono
   PLATE / 01 label stays legible - documented mapping from the V6.3
   label-legibility fix. */
.ornament-hero-crosshair {
  bottom: 96px; right: 5%; width: 120px; height: 120px;
  color: var(--blue);
}
.ornament-hero-crosshair svg { opacity: 0.08; }
.ornament-label {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em;
  color: var(--text-3); margin-top: 4px; display: block; text-align: center;
}

/* 5.2 Gallery: Truchet tile field + archive stamp. V6.4 §5.2 widens
   the mask so the field fills the section. */
.ornament-gallery-truchet {
  inset: 0;
  opacity: 0.04; color: var(--blue-soft);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at center, #000 40%, transparent 95%);
  mask-image: radial-gradient(ellipse 80% 90% at center, #000 40%, transparent 95%);
}
.ornament-gallery-stamp {
  bottom: 24px; right: 24px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  color: rgba(147, 197, 253, 0.55);
  border: 1px dashed rgba(147, 197, 253, 0.35);
  padding: 6px 10px;
  transform: rotate(-6deg);
}

/* 5.3 About: leader line + dot matrix. */
.ornament-about-leader {
  top: 10%; left: 0; width: 60px; height: 60px;
  opacity: 0.2; color: var(--blue-deep);
}
.ornament-about-dots {
  inset: 0;
  opacity: 0.06; color: var(--blue);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at center, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 80% at center, #000 25%, transparent 80%);
}

/* 5.4 Game Deck: pixel starfield + right-angle cable. */
.ornament-games-starfield { inset: 0; opacity: 0.35; color: var(--blue-soft); }
.ornament-games-starfield svg { width: 100%; height: 100%; display: block; }
.ornament-games-cable {
  left: 3%; bottom: 6%; width: 130px; height: auto;
  opacity: 0.25; color: var(--blue-deep);
}

/* 5.5 Off-screen habitat: pixel plant + second poster (wall accent). */
.ornament-habitat-plant {
  bottom: 8%; left: 8%; width: 32px; height: 32px; opacity: 0.9;
}
.ornament-habitat-poster2 {
  top: 11%; right: 9%; width: 36px; height: auto; opacity: 0.85;
}

/* 5.6 GitHub: pulse line + terminal prompt. V6.4 §5.4 extends the
   pulse line to 60% width. */
.ornament-github-pulse {
  top: 15%; left: 5%; width: 60%; height: auto;
  opacity: 0.25; color: var(--blue-soft);
}
.ornament-github-terminal {
  top: 9%; right: 5%;
  opacity: 0.2; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; color: var(--blue-soft);
}

/* 5.7 Credentials: circular watermark behind the grid. */
.ornament-credentials-watermark {
  inset: 0; display: grid; place-items: center;
  opacity: 0.04; color: var(--blue);
}
.ornament-credentials-watermark svg { width: min(420px, 80%); height: auto; display: block; }
.ornament-credentials-watermark text { font-family: var(--mono); }

/* 5.8 Companion habitat: shelf books (SVG sits on the shelf line) and
   the geometric rug on the floor. */
.habitat-shelf svg {
  position: absolute; bottom: 3px; right: 20%;
  width: 44px; height: 22px; display: block;
}
.ornament-habitat-rug {
  bottom: 5%; left: 50%; transform: translateX(-50%);
  width: 60%; height: 20px;
  background: repeating-linear-gradient(90deg,
    var(--px-blue) 0 6px, var(--px-navy) 6px 12px);
  opacity: 0.4;
}

/* 5.9 Contact + closing: envelope line-art + footer measure line. */
.ornament-contact-envelope {
  top: 20px; right: 22px; width: 40px; height: 40px;
  opacity: 0.35; color: var(--blue-soft);
}
.ornament-footer-measure {
  top: 88px; left: 50%; transform: translateX(-50%);
  width: min(560px, 74%); height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--border-strong) 0 1px, transparent 1px 22px);
}

/* Reduced motion: every ornament stays visible; only reveal animations
   are skipped (script.js never runs them under the preference). */
@media (prefers-reduced-motion: reduce) {
  .ornament { opacity: 1; }
  .ornament-hero-crosshair svg { opacity: 0.08; }
  .ornament-gallery-truchet { opacity: 0.04; }
  .ornament-about-leader { opacity: 0.2; }
  .ornament-about-dots { opacity: 0.06; }
  .ornament-games-starfield { opacity: 0.35; }
  .ornament-games-cable { opacity: 0.25; }
  .ornament-github-pulse { opacity: 0.25; }
  .ornament-github-terminal { opacity: 0.2; }
  .ornament-credentials-watermark { opacity: 0.04; }
  .ornament-contact-envelope { opacity: 0.35; }
  .ornament-habitat-plant { opacity: 0.9; }
  .ornament-habitat-poster2 { opacity: 0.85; }
}

/* Mobile density: the noisiest accents are hidden below 700px; the
   quiet ones stay because they cost nothing. */
@media (max-width: 700px) {
  .ornament-gallery-stamp,
  .ornament-games-cable,
  .ornament-github-terminal { display: none; }
  .ornament-github-pulse { top: 8%; width: 55%; }
  .ornament-credentials-watermark svg { width: min(280px, 88%); }
  .ornament-hero-crosshair { width: 80px; height: 80px; }
}
@media (max-width: 1100px) {
  .ornament-about-leader { display: none; }
}

/* ==========================================================================
   V6.5: THE SCIENTIFIC ARCHIVE · GENERATIVE AMBIENT GEOMETRY
   Fase 4: per-section ornaments + canvases, Fase 5: guards.
   All decorative layers: aria-hidden in the DOM, pointer-events none,
   hidden below 900px and under prefers-reduced-motion. Effective opacities
   stay inside the 0.04-0.15 ornament band (canvas-internal alpha x CSS
   canvas opacity; SVG wrapper opacity x SVG element opacity).
   ========================================================================== */

/* --- Layering fix: the offscreen grid must stay behind its content ------ */
/* .offscreen-layout is static in flow, so without this the positioned
   ambient canvas would paint above it (positioned elements paint above
   static content). The heading is already positioned and comes after the
   canvas in source order, so it is safe. */
.offscreen-section .offscreen-layout { position: relative; z-index: 1; }

/* Stacking contexts so the z-index: -1 ornaments below stay pinned above
   their section background but below every piece of content, and can
   never escape behind an ancestor surface. */
.curiosity-panel { isolation: isolate; }
.credentials-section { isolation: isolate; }
.closing-section { isolation: isolate; }

/* --- 4.1 Curiosity Map: sonar / radar sweep ------------------------------ */
/* Spec CSS with one documented adjustment: z-index is -1 instead of 0,
   because the panel text is static in-flow; a z-index 0 absolute ornament
   would paint ABOVE it. With isolation: isolate on .curiosity-panel the
   -1 child renders above the panel surface and below the notes. */
.ornament-radar-sweep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--blue-soft);
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}
.ornament-radar-sweep svg { width: 100%; height: 100%; display: block; }
.radar-beam {
  transform-box: view-box;
  transform-origin: 100px 100px;
  animation: v65-radar-spin 8s linear infinite;
}
@keyframes v65-radar-spin {
  to { transform: rotate(360deg); }
}

/* --- 4.3 Credentials: cryptographic rings -------------------------------- */
/* Two dashed rings rotating in opposite directions (40s / 60s). Mounted
   at section level behind .credentials-inner. */
.ornament-crypto-rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* V6.6 Fase 2.5: raised from 0.05 so the rings read as a faint but
     clearly present instrument plate at 1440px, still far below text. */
  opacity: 0.09;
  color: var(--blue);
  pointer-events: none;
  z-index: -1;
}
.ornament-crypto-rings svg { width: min(520px, 80%); height: auto; display: block; }
.ornament-crypto-rings .ring-outer {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: v65-spin-cw 40s linear infinite;
}
.ornament-crypto-rings .ring-inner {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: v65-spin-ccw 60s linear infinite;
}
@keyframes v65-spin-cw { to { transform: rotate(360deg); } }
@keyframes v65-spin-ccw { to { transform: rotate(-360deg); } }

/* --- 4.6 Closing: observatory crosshair ---------------------------------- */
/* CSS carries the FINAL state (opacity 0.15, scale 1) so the ornament is
   honest without JS and under reduced motion; script.js animates
   0 -> 0.15 / 1.2 -> 1.0 on first view via ScrollTrigger. */
.ornament-closing-crosshair {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.15;
  color: var(--blue);
  pointer-events: none;
  z-index: -1;
}
.ornament-closing-crosshair svg { width: min(800px, 88%); height: auto; display: block; }

/* --- 4.2 / 4.4 / 4.5: generative ambient canvases ------------------------ */
/* Drawing is owned by generative-ambient.js. The canvas-level opacity
   scales the engine's internal alphas into the ornament band. */
.ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.ambient-canvas--offscreen {
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 85% 78% at center, #000 30%, transparent 95%);
  mask-image: radial-gradient(ellipse 85% 78% at center, #000 30%, transparent 95%);
}
.ambient-canvas--companion { opacity: 0.6; }
.ambient-canvas--social { opacity: 0.7; }

/* --- V6.5 §5.3 + §6.3: mobile and reduced-motion guards ------------------ */
/* Mobile (<= 900px): every V6.5 layer is hidden completely. */
@media (max-width: 900px) {
  .ambient-canvas,
  .ornament-radar-sweep,
  .ornament-crypto-rings,
  .ornament-closing-crosshair { display: none; }
}
/* Reduced motion: canvases never run (engine also early-returns); SVG
   ornaments stay visible and static, crosshair pinned to final state. */
@media (prefers-reduced-motion: reduce) {
  .ambient-canvas { display: none; }
  .radar-beam,
  .ornament-crypto-rings .ring-outer,
  .ornament-crypto-rings .ring-inner { animation: none; }
  .ornament-radar-sweep { opacity: 0.06; }
  .ornament-crypto-rings { opacity: 0.09; }
  .ornament-closing-crosshair { opacity: 0.15; transform: none; }
}

/* ==========================================================================
   17. V6.6 FASE 9: ARCHIVE OPENING EXPERIENCE (KONSEP A)
   Once per session editorial cover. The markup ships with [hidden]:
   JavaScript is the only thing that can reveal it, so a failed script
   can never block the hero. Skippable via click, Escape, scroll, or the
   SKIP button. Reduced motion hides it entirely.
   ========================================================================== */
.archive-opening {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
}
.archive-opening[hidden] { display: none; }

.opening-inner {
  display: grid;
  place-items: center;
  gap: 48px;
  width: min(560px, 80vw);
}

.opening-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-3);
  margin: 0;
  text-align: center;
}

.opening-rule {
  /* Documented adjustment to the spec CSS: position relative so the
     absolute tick strip anchors to this rule, not to the viewport. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.opening-rule-line {
  flex: 1;
  height: 1px;
  background: var(--border-strong);
  transform-origin: left center;
  transform: scaleX(0);
}

.opening-rule-ticks {
  /* Documented adjustment: right edge stops short of the READY label so
     the last tick never strikes through the text. */
  position: absolute;
  left: 0;
  right: 64px;
  height: 8px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.opening-rule-tick { width: 1px; height: 8px; background: var(--border-strong); }

.opening-rule-end {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-3);
  opacity: 0;
  flex-shrink: 0;
}

.opening-skip {
  position: absolute;
  bottom: 32px;
  right: 32px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-2);
  cursor: pointer;
}
.opening-skip:hover { border-color: var(--blue); color: var(--blue); }
.opening-skip:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .archive-opening { display: none !important; }
}

@media (max-width: 700px) {
  .opening-inner { gap: 32px; }
  .opening-skip { bottom: 20px; right: 20px; }
}