/* =========================================================
   TOKENS — "Ink & Lime"
========================================================= */
:root {
  /* Ink & Lime: lime = highlight (always with dark text), tomato = ink on paper */
  --brand: #ff4d2e;
  --brand-deep: #d23a1c;
  --brand-soft: #d9f99d;
  --night: #0e0e0e;
  --night-2: #191919;
  --void: #080808;
  --paper: #f0ece2;
  --paper-dark: #e2ddd0;
  --char: #121212;
  --ink: #0a0a0a;
  --sun: #c6ff3d;
  --coral: #ff4d2e;
  --mint: #34d399;
  --sky: #8fd3ff;

  --f-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --f-hand: "Caveat", cursive;
  --f-marker: "Permanent Marker", cursive;
  --f-num: "Teko", sans-serif;
  --f-mono: "DM Mono", ui-monospace, monospace;
  --f-sans: "DM Sans", system-ui, sans-serif;

  --border: 2px solid var(--char);
  --shadow: 4px 4px 0 var(--char);
  --ribbon-h: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body { margin: 0; background: var(--void); color: var(--char); font-family: var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-loading { overflow: hidden; }
::selection { background: var(--sun); color: var(--char); }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  body.has-cursor input { cursor: text; }
}

/* =========================================================
   SHARED BITS
========================================================= */
.btn-brutal {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.85em 1.35em;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  border: var(--border); box-shadow: var(--shadow); cursor: pointer; white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}
.btn-brutal:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--char); }
.btn-brutal:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--char); }
.btn-dark { background: var(--char); color: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 var(--sun); }
.btn-outline { background: rgba(17, 12, 41, 0.6); color: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 var(--sun); backdrop-filter: blur(4px); }
.btn-sun { background: var(--sun); color: var(--char); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-ghost-dark { background: #fff; color: var(--char); }

.sticker-note { position: absolute; background: var(--paper); border: var(--border); box-shadow: 5px 5px 0 var(--char); padding: 14px 16px; }
.tape { position: absolute; top: -11px; left: 50%; width: 64px; height: 20px; transform: translateX(-50%) rotate(-4deg); background: rgba(255, 201, 51, 0.7); border-left: 2px dashed rgba(255, 255, 255, 0.6); border-right: 2px dashed rgba(255, 255, 255, 0.6); }
.sec-tag { display: inline-block; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); border: 2px solid var(--paper); padding: 6px 12px; box-shadow: 3px 3px 0 var(--sun); }
.sec-tag-dark { color: var(--char); border-color: var(--char); box-shadow: 3px 3px 0 var(--brand); }
.sec-tag-sun { color: var(--sun); border-color: var(--sun); box-shadow: 3px 3px 0 var(--brand); }
.col-k { margin: 0 0 18px; font-family: var(--f-mono); font-size: 12px; color: var(--brand); letter-spacing: 0.08em; }
.big-h { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(60px, 9.5vw, 150px); line-height: 0.85; letter-spacing: -0.03em; text-transform: uppercase; }
.big-h em { font-family: var(--f-hand); font-style: normal; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 0.72em; color: var(--brand); display: inline-block; transform: rotate(-4deg); margin-left: 0.12em; }
.big-h .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.big-h .w > span { display: inline-block; will-change: transform; }
.grain { position: absolute; inset: -50%; pointer-events: none; opacity: 0.1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } }
@keyframes pulse { 50% { opacity: 0.3; } }

/* =========================================================
   PRELOADER
========================================================= */
#preloader { position: fixed; inset: 0; z-index: 9999; background: var(--night); color: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.manifesto { position: relative; width: min(94vw, 1400px); font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(38px, 7.6vw, 112px); line-height: 1.04; }
.m-row { display: flex; justify-content: space-between; align-items: center; gap: 0.3em; }
.m-row-1 { justify-content: flex-start; }
.m-box-wrap { position: relative; flex: 1; display: flex; justify-content: center; padding: 0.04em 0; }
.m-box { position: absolute; inset: 0; background: var(--sun); transform-origin: left center; transform: rotate(-1deg); }
.m-boxed { color: var(--char); font-family: var(--f-marker); font-weight: 400; letter-spacing: 0; }
.m-word { position: relative; white-space: nowrap; display: inline-block; }
.m-word .ch { display: inline-block; will-change: transform, opacity; }
.m-r2, .m-r3 { text-align: right; color: var(--brand-soft); }
.loader { position: absolute; left: clamp(20px, 3.5vw, 48px); bottom: clamp(20px, 5vw, 48px); border-left: 3px solid var(--sun); padding-left: 24px; }
.loader-num { font-family: var(--f-num); font-weight: 700; font-size: clamp(56px, 8vw, 100px); line-height: 0.8; font-variant-numeric: tabular-nums; display: flex; align-items: flex-end; }
.loader-dot { width: 10px; height: 10px; margin: 0 0 6px 10px; background: var(--coral); box-shadow: 0 0 10px rgba(255, 93, 93, 0.8); animation: pulse 1s infinite; }
.loader-bar { width: 180px; height: 16px; border: 2px solid var(--paper); padding: 2px; margin-top: 14px; }
#loader-fill { height: 100%; width: 0; background: var(--sun); }
.loader-k { margin: 10px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }
#skip-btn { position: fixed; right: 6%; bottom: 48px; z-index: 10001; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
body.is-loading #skip-btn.show { opacity: 1; pointer-events: auto; }
body:not(.is-loading) #skip-btn { display: none; }

/* =========================================================
   CURSOR
========================================================= */
#cursor-dot, #cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10002; opacity: 0; }
body.has-cursor #cursor-dot, body.has-cursor #cursor-ring { opacity: 1; }
#cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
#cursor-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2.5px solid var(--sun); display: flex; align-items: center; justify-content: center; transition: width 0.25s, height 0.25s, margin 0.25s, background 0.25s; }
#cursor-label { font-family: var(--f-hand); font-weight: 700; font-size: 17px; white-space: nowrap; color: var(--char); opacity: 0; transition: opacity 0.2s; }
#cursor-ring.is-label { width: 116px; height: 116px; margin: -58px 0 0 -58px; background: var(--sun); border-color: var(--char); }
#cursor-ring.is-label #cursor-label { opacity: 1; }
#cursor-ring.is-hover { width: 54px; height: 54px; margin: -27px 0 0 -27px; }

/* =========================================================
   RIBBON + NAV + CV TAB
========================================================= */
#ribbon { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--ribbon-h); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1.2fr); background: var(--paper); border-bottom: 2px solid var(--ink); transform: translateY(-100%); transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
body.ready #ribbon { transform: none; }
.rb-name { background: var(--char); color: var(--paper); font-family: var(--f-display); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 0.45em; padding: 0 24px; white-space: nowrap; overflow: hidden; }
.rb-aka { font-family: var(--f-hand); font-size: 18px; color: var(--sun); }
.rb-phrase { display: flex; align-items: center; justify-content: center; font-family: var(--f-hand); font-weight: 600; font-size: 21px; color: var(--char); border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); padding: 0 12px; text-align: center; overflow: hidden; white-space: nowrap; }
#rb-phrase-text { display: inline-block; transition: opacity 0.3s, transform 0.3s; }
#rb-phrase-text.out { opacity: 0; transform: translateY(-8px); }
.rb-progress { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-family: var(--f-mono); font-size: 12px; overflow: hidden; }
#rb-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sun); z-index: 0; transition: width 0.4s ease-out; }
.rb-plane { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--char); z-index: 2; transition: left 0.4s ease-out; filter: drop-shadow(0 0 2px var(--sun)); }
.rb-label, #rb-pct { position: relative; z-index: 1; mix-blend-mode: difference; color: #f7f3ea; }
#rb-pct { font-weight: 500; font-variant-numeric: tabular-nums; }

#nav { position: fixed; left: 50%; bottom: 24px; z-index: 50; display: flex; padding: 4px; background: var(--paper); border: var(--border); box-shadow: var(--shadow); transform: translate(-50%, 160%); transition: transform 0.6s cubic-bezier(.2,.8,.2,1); max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
#nav::-webkit-scrollbar { display: none; }
body.ready #nav { transform: translate(-50%, 0); }
#nav a { position: relative; z-index: 1; padding: 8px 13px; font-family: var(--f-display); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--char); white-space: nowrap; transition: color 0.3s; }
#nav a.active { color: var(--char); }
.nav-indicator { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; background: var(--sun); z-index: 0; transition: transform 0.45s cubic-bezier(.6,0,.2,1), width 0.45s cubic-bezier(.6,0,.2,1); }
#cv-tab { position: fixed; right: 24px; bottom: 24px; z-index: 50; transform: translateY(160%); transition: transform 0.6s cubic-bezier(.2,.8,.2,1) 0.1s, box-shadow 0.15s; }
body.ready #cv-tab { transform: none; }
body.ready #cv-tab:hover { transform: translate(-2px, -2px); }

/* =========================================================
   HERO — duotone portrait
========================================================= */
#hero { position: relative; height: 100vh; min-height: 660px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(90% 80% at 50% 40%, #1d1d1d 0%, var(--night) 60%, #050505 100%); }
.hero-bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(198, 255, 61, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(198, 255, 61, 0.05) 1px, transparent 1px); background-size: 48px 48px; }
.hero-pixels { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.hero-glow { position: absolute; inset: 0; background:
  radial-gradient(30% 36% at 50% 34%, rgba(198, 255, 61, 0.30), rgba(198, 255, 61, 0.10) 55%, transparent 80%),
  radial-gradient(55% 50% at 50% 60%, rgba(198, 255, 61, 0.08), transparent 75%);
  animation: backlight 6s ease-in-out infinite alternate; }
@keyframes backlight { from { opacity: 0.75; } to { opacity: 1; } }
.hero-pixels { filter: drop-shadow(0 0 22px rgba(198, 255, 61, 0.28)) drop-shadow(0 0 2px rgba(198, 255, 61, 0.35)); }
.hero-center { position: relative; z-index: 3; mix-blend-mode: normal; text-align: center; margin-top: 30vh; pointer-events: none; }
.hero-title { margin: 0 0 4px; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--sun); }
.hero-word { margin: 0; perspective: 900px; font-family: var(--f-marker); font-weight: 400; color: var(--paper); font-size: clamp(110px, 19vw, 300px); line-height: 0.9; }
.hw-inner { display: inline-block; padding: 0 0.12em; transform: rotateX(8deg) rotateY(-10deg) rotate(-3deg);
  text-shadow: 1px 1px 0 #b8f02f, 2px 2px 0 #aee52b, 3px 3px 0 #a2d828, 4px 4px 0 #95ca24, 5px 5px 0 #88bb20, 6px 6px 0 #7aab1c, 7px 7px 0 #6c9a18, 8px 8px 0 #5e8814, 9px 9px 0 #507511, 10px 10px 0 #42620d, 11px 11px 0 #354f0a, 12px 12px 0 #283c07, 16px 18px 26px rgba(0, 0, 0, 0.55);
  will-change: transform; }
.hero-tag { margin: 6px 0 0; font-family: var(--f-sans); font-weight: 500; font-size: clamp(13px, 1.2vw, 16px); color: rgba(247, 243, 234, 0.85); letter-spacing: 0.02em; }
.hero-badge { top: calc(var(--ribbon-h) + 48px); left: clamp(20px, 7vw, 118px); transform: rotate(-4deg); display: flex; flex-direction: column; z-index: 4; box-shadow: 4px 4px 0 var(--sun); }
.hero-badge strong { font-family: var(--f-display); font-weight: 800; color: var(--brand-deep); font-size: 18px; }
.hero-badge span { font-family: var(--f-sans); font-size: 12px; font-weight: 500; }
.hero-quote { position: absolute; z-index: 4; top: 17%; right: clamp(20px, 7vw, 100px); color: var(--paper); text-align: right; display: grid; grid-template-columns: auto 100px; column-gap: 18px; align-items: end; }
.hero-quote p { margin: 0; grid-column: 1; }
.hq-small { font-family: var(--f-mono); font-size: 13px; }
.hq-big { font-family: var(--f-hand); font-weight: 700; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; }
.hq-big mark { display: inline-block; margin-top: 6px; line-height: 1; background: var(--sun); color: var(--char); padding: 0.05em 0.2em 0; box-shadow: 4px 4px 0 var(--char); transform: rotate(-2deg); }
.hq-chart { grid-column: 2; grid-row: 1 / span 3; width: 100px; color: var(--paper); align-self: center; }
.hq-line { stroke-dasharray: 120; stroke-dashoffset: 120; }
body.ready .hq-line { animation: draw 1.6s 0.6s forwards ease-out; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hq-axis { grid-column: 2; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 9px; opacity: 0.7; }
.hero-roles { position: absolute; z-index: 4; left: clamp(20px, 7vw, 100px); bottom: 20%; list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid rgba(247, 243, 234, 0.35); color: var(--paper); }
.hero-roles li { margin: 0 0 14px; }
.hero-roles small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.hero-roles span { font-family: var(--f-hand); font-weight: 700; font-size: clamp(22px, 2vw, 30px); }
.hero-roles li:last-child span { color: var(--sun); font-size: clamp(26px, 2.4vw, 36px); }
.hero-cta { position: absolute; z-index: 4; left: 50%; bottom: 12%; transform: translateX(-50%); display: flex; gap: 14px; }
.hero-socials { position: absolute; z-index: 4; right: clamp(20px, 7vw, 100px); bottom: 20%; display: flex; flex-direction: column; gap: 10px; }
.hero-socials a { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.15em; color: var(--paper); text-decoration: none; text-align: right; }
.hero-socials a::after { content: " ↗"; opacity: 0.6; }
.hero-socials a:hover { color: var(--sun); }
.hero-badge, .hero-quote, .hero-roles, .hero-cta, .hero-socials { opacity: 0; }

/* =========================================================
   ORIGIN — evidence notebook (camera + spotlight + trace line)
========================================================= */
#about { position: relative; height: 760vh; background: #0b0b0b; }
.about-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; perspective: 2200px; }
.about-hint { position: absolute; top: calc(var(--ribbon-h) + 22px); left: 50%; transform: translateX(-50%); z-index: 30; font-size: 11px; padding: 0.7em 1.2em; pointer-events: none; }
.nb-label { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 30; margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(240, 236, 226, 0.45); }
.notebook {
  position: relative; container-type: inline-size; width: min(92vw, 1300px, calc(78vh * 1.7647)); aspect-ratio: 1500 / 850;
  display: grid; grid-template-columns: 1fr 2.3cqw 1fr; transform-style: preserve-3d; will-change: transform;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
}
.page { position: relative; background: linear-gradient(transparent calc(2.4cqw - 1px), rgba(18, 18, 18, 0.07) 2.4cqw) 0 7cqw / 100% 2.4cqw, var(--paper); box-shadow: inset 0 0 6cqw rgba(110, 90, 50, 0.16); }
.page-left { border-radius: 1cqw 0.2cqw 0.2cqw 1cqw; }
.page-left::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4cqw; width: 2px; background: rgba(255, 77, 46, 0.3); }
.page-right { border-radius: 0.2cqw 1cqw 1cqw 0.2cqw; }
.spine { background: linear-gradient(90deg, #050505, #1c1c1c 35%, #2e2e2e 50%, #1c1c1c 65%, #050505); }
.n-item, .n-stamp { position: absolute; margin: 0; transform-origin: 50% 50%; }
.n-note { left: 7%; top: 5%; width: 32%; rotate: -4deg; padding: 1.1cqw 1.2cqw; background: var(--sun); color: var(--char); box-shadow: 0.4cqw 0.5cqw 0 rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 0.3cqw; }
.n-note small { font-family: var(--f-mono); font-size: 0.75cqw; letter-spacing: 0.15em; text-transform: uppercase; }
.n-note span { font-family: var(--f-hand); font-weight: 700; font-size: 1.55cqw; line-height: 1.1; }
.n-headline { left: 8%; top: 21%; width: 86%; }
.n-headline h2 { margin: 0; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.88; font-size: 3.7cqw; color: var(--char); }
.nh-line { display: block; }
.nh-circle { position: relative; display: inline-block; color: var(--coral); }
.nh-circle svg { position: absolute; left: -6%; top: -18%; width: 112%; height: 140%; overflow: visible; color: var(--char); }
.n-story { left: 8%; top: 47%; width: 52%; font-family: var(--f-hand); font-weight: 500; font-size: 1.5cqw; line-height: 1.25; color: #2b2b2b; }
.n-cursive { right: 6%; top: 43%; rotate: -7deg; font-family: var(--f-hand); font-weight: 700; font-size: 2.3cqw; color: var(--coral); }
.n-cutout { left: 6%; top: 63%; width: 25%; aspect-ratio: 1; }
.n-cutout img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: 50%; filter: grayscale(1) contrast(1.15); box-shadow: 0 0 0 0.35cqw var(--paper), 0 0 0 0.6cqw var(--char); }
.n-cutout .ring { position: absolute; inset: -14%; border: 2px dashed rgba(18, 18, 18, 0.35); border-radius: 50%; animation: spin 40s linear infinite; }
.n-cutout .r2 { inset: -28%; border-color: rgba(255, 77, 46, 0.35); animation-direction: reverse; animation-duration: 60s; }
@keyframes spin { to { transform: rotate(360deg); } }
.n-cutout figcaption { position: absolute; z-index: 2; left: 50%; bottom: -12%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; font-family: var(--f-mono); font-size: 0.75cqw; letter-spacing: 0.12em; text-transform: uppercase; background: var(--char); color: var(--sun); padding: 0.3cqw 0.6cqw; }
.n-annot { left: 39%; top: 69%; width: 58%; rotate: -2deg; font-family: var(--f-hand); font-weight: 700; font-size: 2cqw; line-height: 1.12; color: #d23a1c; }
.n-annot span { display: block; }
.n-annot span:nth-child(2) { margin-left: 1.4cqw; }
.n-annot span:nth-child(3) { margin-left: 2.8cqw; }
.n-polaroid { left: 6%; top: 5%; width: 32%; rotate: -5deg; background: #fff; padding: 0.8cqw 0.8cqw 0.5cqw; box-shadow: 0 1.2cqw 2.4cqw rgba(0, 0, 0, 0.25); }
.n-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: contrast(1.05) saturate(0.9); }
.n-polaroid figcaption { text-align: center; padding-top: 0.5cqw; }
.n-polaroid b { display: block; font-family: var(--f-hand); font-size: 1.55cqw; }
.n-polaroid small { font-family: var(--f-mono); font-size: 0.7cqw; opacity: 0.6; }
.n-terminal { left: 45%; top: 7%; width: 49%; background: #0e0e0e; color: var(--sun); border-radius: 0.6cqw; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.3); overflow: hidden; rotate: 1.5deg; }
.nt-bar { display: flex; align-items: center; gap: 0.4cqw; padding: 0.6cqw 0.8cqw; background: #1c1c1c; }
.nt-bar i { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: #ff5f57; }
.nt-bar i:nth-child(2) { background: #febc2e; } .nt-bar i:nth-child(3) { background: #28c840; }
.nt-bar span { margin-left: 0.6cqw; font-family: var(--f-mono); font-size: 0.75cqw; color: #8a8a8a; }
#nt-text { margin: 0; min-height: 9.5cqw; padding: 1cqw 1.2cqw; font-family: var(--f-mono); font-size: 1.15cqw; line-height: 1.55; white-space: pre-wrap; }
.n-stats { left: 7%; top: 53%; width: 30%; rotate: 5deg; padding: 1cqw; background: var(--char); color: var(--paper); border: 0.25cqw solid var(--char); box-shadow: 0.5cqw 0.5cqw 0 var(--sun); text-align: center; }
.n-stats small { display: block; font-family: var(--f-mono); font-size: 0.75cqw; letter-spacing: 0.2em; color: var(--sun); }
.n-stats b { display: block; font-family: var(--f-num); font-size: 5.6cqw; line-height: 0.85; margin-top: 0.4cqw; }
.n-stats span { font-family: var(--f-hand); font-size: 1.3cqw; }
.n-log { left: 46%; top: 42%; width: 48%; }
.n-log p { margin: 0 0 0.6cqw; font-family: var(--f-mono); font-size: 0.8cqw; color: #d23a1c; }
.n-log ol { list-style: none; margin: 0; padding: 0; }
.n-log li { display: flex; gap: 1cqw; align-items: baseline; padding: 0.35cqw 0; border-bottom: 1px dashed rgba(18, 18, 18, 0.25); }
.n-log b { font-family: var(--f-num); font-size: 2cqw; line-height: 1; }
.n-log span { font-family: var(--f-hand); font-weight: 700; font-size: 1.55cqw; }
.n-stamp { width: 17%; aspect-ratio: 1; border-radius: 50%; border: 0.35cqw double currentColor; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; mix-blend-mode: multiply; padding: 1cqw; }
.n-stamp b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.25cqw; line-height: 1; letter-spacing: -0.01em; }
.n-stamp small { margin-top: 0.4cqw; font-family: var(--f-mono); font-size: 0.65cqw; letter-spacing: 0.15em; text-transform: uppercase; }
.stamp-a { left: 44%; top: 70%; color: #d23a1c; rotate: -14deg; }
.stamp-b { left: 63%; top: 66%; color: var(--char); rotate: 9deg; border-radius: 0.8cqw; aspect-ratio: 1.4; }
.stamp-c { left: 80%; top: 73%; color: #3a7d0a; rotate: -6deg; }
.n-other { left: 7%; top: 80%; width: 32%; }
.n-other p { margin: 0 0 0.4cqw; font-family: var(--f-mono); font-size: 0.75cqw; letter-spacing: 0.2em; text-transform: uppercase; color: #d23a1c; }
.n-other ul { margin: 0; padding-left: 1.2cqw; font-size: 1.05cqw; line-height: 1.5; }
.n-signature { right: 5%; bottom: 3%; width: 30%; rotate: -2deg; padding: 0.8cqw 1.2cqw; background: #fffdf6; box-shadow: 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.18); clip-path: polygon(0 6%, 8% 0, 22% 5%, 40% 0, 58% 6%, 76% 1%, 92% 5%, 100% 0, 100% 100%, 0 100%); }
.n-signature small { display: block; font-family: var(--f-mono); font-size: 0.75cqw; opacity: 0.6; }
.n-signature span { font-family: var(--f-marker); font-size: 2cqw; color: var(--char); }
.trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 7; }
.trace-path, .trace-glow { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trace-path { stroke: var(--coral); stroke-width: 2; }
.trace-glow { stroke: var(--coral); stroke-width: 6; opacity: 0.35; filter: blur(3px); }
#trace-nodes ellipse { fill: var(--sun); stroke: var(--char); stroke-width: 2; vector-effect: non-scaling-stroke; }
.nb-spot { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 1cqw; background: radial-gradient(ellipse 30% 38% at var(--sx, 50%) var(--sy, 50%), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 42%, rgba(6, 6, 6, 0.55) 72%, rgba(6, 6, 6, 0.9) 100%); }
#stickers { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.sticker { position: absolute; pointer-events: auto; cursor: grab; user-select: none; touch-action: none; padding: 0.7cqw 1.1cqw; border: 2px solid var(--char); font-family: var(--f-num); font-size: 1.9cqw; line-height: 0.95; text-transform: uppercase; white-space: pre; text-align: center; filter: drop-shadow(0.3cqw 0.6cqw 0.8cqw rgba(0, 0, 0, 0.4)); }
.sticker.dragging { cursor: grabbing; z-index: 5; }
.sticker:nth-child(5n + 1) { background: var(--coral); color: #fff; border-radius: 0.4cqw; }
.sticker:nth-child(5n + 2) { background: var(--sun); color: var(--char); border-radius: 4cqw; font-size: 2.2cqw; }
.sticker:nth-child(5n + 3) { background: var(--char); color: var(--sun); font-family: var(--f-mono); font-size: 1.5cqw; border-radius: 0.3cqw; }
.sticker:nth-child(5n + 4) { background: var(--paper); color: #d23a1c; font-family: var(--f-hand); font-weight: 700; font-size: 1.9cqw; text-transform: none; border-radius: 0.3cqw; }
.sticker:nth-child(5n + 5) { background: var(--sun); color: var(--char); width: 4.6cqw; height: 4.6cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 2.3cqw; }
.epilogue { position: absolute; z-index: 25; left: 50%; bottom: 10%; transform: translateX(-50%); margin: 0; width: min(90vw, 760px); text-align: center; color: var(--paper); font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.3; opacity: 0; pointer-events: none; }
.epilogue span { display: block; }
.epilogue span:nth-child(2) { color: var(--sun); font-family: var(--f-hand); font-size: 1.35em; }

/* =========================================================
   EXPERIENCE — passport stamps (horizontal pin)
========================================================= */
#logbook { position: relative; background: var(--night); color: var(--paper); overflow: hidden; }
.lb-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--ribbon-h) + 30px) 0 90px; }
.lb-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 0 clamp(20px, 5vw, 80px); margin-bottom: 30px; }
.lb-head .big-h em { color: var(--sun); }
.lb-note { margin: 0 0 8px auto; font-family: var(--f-hand); font-weight: 700; font-size: 26px; color: var(--brand-soft); }
.lb-viewport { overflow: visible; }
.lb-track { display: flex; gap: 36px; padding: 10px clamp(20px, 5vw, 80px) 20px; width: max-content; will-change: transform; }
.pp-page {
  position: relative; flex: none; width: min(560px, 84vw); min-height: 470px; padding: 30px 30px 26px 44px; color: var(--char); border-radius: 6px 16px 16px 6px;
  background: repeating-radial-gradient(circle at 110% -10%, rgba(109, 74, 255, 0.06) 0 2px, transparent 2px 10px), repeating-linear-gradient(115deg, rgba(255, 201, 51, 0.07) 0 1px, transparent 1px 14px), #f4efe1;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.35); transform: rotate(var(--r, 0deg));
}
.pp-page::before { content: ""; position: absolute; left: 16px; top: 14px; bottom: 14px; border-left: 2px dashed rgba(22, 18, 31, 0.25); }
.pp-top { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; margin-bottom: 18px; padding-right: 120px; }
.pp-org { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.02; letter-spacing: -0.02em; max-width: 15ch; }
.pp-role { margin: 6px 0 2px; font-family: var(--f-hand); font-weight: 700; font-size: 28px; color: var(--ink-c, var(--brand)); }
.pp-dates { margin: 0 0 14px; font-family: var(--f-mono); font-size: 12px; opacity: 0.65; }
.pp-points { margin: 0 0 16px; padding-left: 18px; font-size: 14.5px; line-height: 1.55; }
.pp-points li { margin-bottom: 6px; }
.pp-points b { background: linear-gradient(transparent 55%, rgba(255, 201, 51, 0.7) 55%); font-weight: 700; }
.pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-stats div { border: 2px solid var(--char); background: #fff; padding: 8px; text-align: center; }
.pp-stats b { display: block; font-family: var(--f-num); font-size: 32px; line-height: 0.9; color: var(--ink-c, var(--brand)); }
.pp-stats span { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.pp-link { display: inline-block; margin-top: 14px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-c, var(--brand)); }
.stamp {
  position: absolute; top: 20px; right: 20px; width: 128px; height: 128px; border-radius: 50%; color: var(--ink-c, var(--brand));
  border: 4px double currentColor; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: rotate(-14deg);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; mix-blend-mode: multiply; opacity: 0.88;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23r)'/%3E%3C/svg%3E");
}
.stamp b { font-family: var(--f-num); font-size: 46px; line-height: 0.8; letter-spacing: 0.04em; margin: 4px 0 2px; }
.stamp::after { content: ""; position: absolute; inset: 9px; border: 1.5px solid currentColor; border-radius: 50%; }
.pp-edu { background: repeating-linear-gradient(0deg, rgba(109, 74, 255, 0.08) 0 1px, transparent 1px 28px), #f4efe1; }
.pp-edu .stamp { border-radius: 10px; width: 140px; height: 96px; transform: rotate(9deg); }
.pp-edu .stamp::after { border-radius: 6px; }
.pp-cgpa { font-family: var(--f-num); font-size: 110px; line-height: 0.8; color: var(--brand); margin: 20px 0 0; }
.pp-cgpa small { font-family: var(--f-hand); font-weight: 700; font-size: 30px; color: var(--char); margin-left: 8px; }
.lb-progress { margin: 22px clamp(20px, 5vw, 80px) 0; height: 4px; background: rgba(247, 243, 234, 0.15); }
.lb-progress i { display: block; height: 100%; width: 0; background: var(--sun); }

/* =========================================================
   BUILDS
========================================================= */
#builds { position: relative; min-height: 100vh; background: var(--night); overflow: hidden; padding: calc(var(--ribbon-h) + 40px) clamp(20px, 6vw, 90px) 140px; }
.blueprint { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(198,255,61,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(198,255,61,0.12) 1px, transparent 1px), linear-gradient(rgba(198,255,61,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(198,255,61,0.04) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; }
.corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(247, 243, 234, 0.6); }
.c-tl { top: calc(var(--ribbon-h) + 16px); left: 16px; border-right: 0; border-bottom: 0; }
.c-tr { top: calc(var(--ribbon-h) + 16px); right: 16px; border-left: 0; border-bottom: 0; }
.c-bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.c-br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.exp-head { position: relative; z-index: 2; }
.exp-title { margin: 20px 0 0; display: flex; align-items: flex-end; font-weight: 400; line-height: 1; }
.exp-box { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(64px, 9vw, 140px); background: var(--sun); color: var(--char); border: 4px solid var(--char); box-shadow: 8px 8px 0 var(--char); padding: 0 0.1em 0.04em; transform: rotate(-3deg); display: inline-block; }
.exp-rest { font-family: var(--f-hand); font-weight: 700; font-size: clamp(80px, 11vw, 170px); color: var(--paper); margin-left: 0.05em; }
.quick-note { top: calc(var(--ribbon-h) + 60px); right: clamp(20px, 6vw, 90px); width: 310px; transform: rotate(-2deg); display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.qn-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.quick-note strong { font-family: var(--f-hand); font-weight: 700; font-size: 24px; }
.quick-note span:last-child { font-family: var(--f-hand); font-size: 19px; line-height: 1.3; }
.quick-note a { color: var(--brand-deep); }
.card-stack { position: relative; z-index: 2; margin: 60px auto 0; max-width: 980px; display: flex; flex-direction: column; }
.xp-card { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; width: 100%; text-align: left; cursor: pointer; border: 2px solid var(--char); box-shadow: 8px 8px 0 rgba(10, 8, 23, 0.55); padding: 18px 26px 22px; margin-top: -26px; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s; }
.xp-card:first-child { margin-top: 0; }
.xp-card:nth-child(4n + 1) { background: var(--brand-deep); color: var(--paper); border-color: var(--paper); transform: rotate(-1.2deg); }
.xp-card:nth-child(4n + 2) { background: var(--paper); color: var(--char); transform: rotate(0.8deg); }
.xp-card:nth-child(4n + 3) { background: var(--char); color: var(--paper); transform: rotate(-0.6deg); }
.xp-card:nth-child(4n + 4) { background: var(--sun); color: var(--char); transform: rotate(1deg); }
.xp-card:nth-child(4n + 3) { border-color: var(--paper); }
.xp-card:hover, .xp-card:focus-visible { transform: translateY(-14px) rotate(0deg); z-index: 5; box-shadow: 12px 14px 0 rgba(10, 8, 23, 0.65); }
.xp-main { min-width: 0; }
.xp-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid currentColor; padding-bottom: 8px; }
.xp-org { font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; }
.xp-blurb { font-size: 13px; opacity: 0.75; flex: 1; }
.xp-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.xp-role { font-family: var(--f-hand); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); }
.xp-dur { font-family: var(--f-mono); font-size: 12px; opacity: 0.7; letter-spacing: 0.1em; }
.xp-thumb { width: 150px; height: 94px; object-fit: cover; object-position: top; border: 2px solid currentColor; align-self: center; transform: rotate(2deg); background: var(--night-2); }
.xp-thumb.placeholder { display: flex; align-items: center; justify-content: center; font-family: var(--f-marker); font-size: 34px; color: var(--sun); }

/* =========================================================
   DOSSIER MODAL
========================================================= */
#dossier { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 8, 23, 0.75); backdrop-filter: blur(4px); }
#dossier[hidden] { display: none; }
.ds-paper { position: relative; width: min(680px, 100%); max-height: 88vh; overflow: auto; background: linear-gradient(transparent 27px, rgba(109, 74, 255, 0.1) 28px) 0 0 / 100% 28px, var(--paper); border: 3px solid var(--char); box-shadow: 10px 10px 0 var(--brand); padding: 36px clamp(20px, 4vw, 44px) 26px; color: var(--char); transform: rotate(-1deg); }
.ds-stamp { position: absolute; top: 26px; right: 22px; transform: rotate(12deg); font-family: var(--f-marker); font-size: 26px; text-transform: uppercase; color: var(--coral); border: 3px solid var(--coral); padding: 2px 12px; opacity: 0.8; }
.ds-k { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); }
.ds-org { margin: 6px 0 0; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(32px, 4.5vw, 48px); text-transform: uppercase; line-height: 0.95; }
.ds-blurb { margin: 6px 0 16px; font-size: 14px; opacity: 0.75; }
.ds-img { width: 100%; max-height: 240px; object-fit: cover; object-position: top; border: var(--border); box-shadow: 4px 4px 0 var(--char); margin: 4px 0 18px; }
.ds-role { font-family: var(--f-hand); font-weight: 700; font-size: 30px; margin: 0 0 14px; }
.ds-role em { font-family: var(--f-mono); font-style: normal; font-size: 12px; opacity: 0.6; margin-left: 8px; }
.ds-points { margin: 0 0 22px; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.ds-points li { margin-bottom: 8px; }
.ds-points mark { background: var(--sun); color: var(--char); padding: 0 3px; }
.ds-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.ds-stats div { border: var(--border); background: #fff; padding: 10px; text-align: center; box-shadow: 3px 3px 0 var(--char); }
.ds-stats b { display: block; font-family: var(--f-num); font-size: 34px; line-height: 1; color: var(--brand); }
.ds-stats span { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; }
.ds-links { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ds-close { margin: 0; font-family: var(--f-mono); font-size: 11px; text-align: center; opacity: 0.55; }

/* =========================================================
   BEST WORK — FLIGHT LK718
========================================================= */
#best { position: relative; min-height: 100vh; background: linear-gradient(180deg, var(--night) 0%, #141414 100%); color: var(--paper); padding: calc(var(--ribbon-h) + 40px) clamp(20px, 4vw, 70px) 170px; overflow: hidden; }
.fl-head { position: relative; display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.fl-head .big-h em { color: var(--sun); }
.fl-captain { margin: 0 0 8px auto; max-width: 30ch; font-family: var(--f-hand); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--brand-soft); text-align: right; }
.route { position: relative; margin: 18px 0 8px; }
.route-svg { width: 100%; height: auto; display: block; overflow: visible; color: rgba(247, 243, 234, 0.45); }
#route-done { stroke: var(--sun); }
#route-plane { fill: var(--sun); filter: drop-shadow(0 0 8px rgba(255, 201, 51, 0.7)); }
.stop circle { fill: var(--night); stroke: var(--paper); stroke-width: 3; transition: fill 0.3s, r 0.3s; cursor: pointer; }
.stop.done circle { fill: var(--paper); }
.stop.on circle { fill: var(--sun); stroke: var(--sun); }
.stop text { font-family: var(--f-mono); font-size: 15px; fill: var(--paper); letter-spacing: 0.1em; text-anchor: middle; }
.stop .sub { font-family: var(--f-hand); font-size: 19px; fill: var(--brand-soft); letter-spacing: 0; }
.stop.on text:first-of-type { fill: var(--sun); }
.cabin { position: relative; display: grid; grid-template-columns: auto minmax(240px, 0.85fr) minmax(0, 1.4fr) auto; gap: 26px; align-items: center; }
.fl-arrow { width: 54px; height: 54px; border: 2px solid var(--paper); background: transparent; color: var(--paper); font-size: 22px; cursor: pointer; box-shadow: 4px 4px 0 var(--sun); transition: background 0.2s, transform 0.15s; }
.fl-arrow:hover { background: var(--paper); color: var(--char); }
.fl-arrow:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sun); }
.window-wrap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.window { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1 / 1; border-radius: 42% / 40%; padding: 22px; background: linear-gradient(145deg, #f4f2ec, #c9c6bd); box-shadow: inset 0 0 0 3px #fff, inset -8px -10px 20px rgba(0, 0, 0, 0.25), 0 30px 60px rgba(0, 0, 0, 0.5); }
.window-view { position: relative; width: 100%; height: 100%; border-radius: 40% / 38%; overflow: hidden; background: linear-gradient(#7fb6ff, #d9e9ff); box-shadow: inset 0 0 0 6px #aeaba2, inset 0 0 30px rgba(0, 0, 0, 0.5); }
.window-view img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.02); }
.clouds { position: absolute; inset: 0; pointer-events: none; }
.clouds i { position: absolute; width: 160px; height: 50px; border-radius: 50px; background: rgba(255, 255, 255, 0.75); filter: blur(10px); animation: cloud 9s linear infinite; }
.clouds i:nth-child(1) { top: 12%; left: -40%; }
.clouds i:nth-child(2) { top: 55%; left: -60%; animation-delay: -3s; animation-duration: 12s; }
.clouds i:nth-child(3) { top: 80%; left: -50%; animation-delay: -6s; width: 220px; }
@keyframes cloud { to { transform: translateX(520px); } }
.shade { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: repeating-linear-gradient(180deg, #ecebe6 0 18px, #d4d1c8 18px 20px); transform: translateY(-104%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12%; }
.shade span { font-family: var(--f-marker); font-size: 30px; color: var(--char); opacity: 0.6; }
.shade i { position: absolute; bottom: 5%; left: 50%; width: 60px; height: 8px; margin-left: -30px; border-radius: 4px; background: #9a978e; }
.window-wrap figcaption { font-family: var(--f-hand); font-weight: 700; font-size: 22px; color: var(--brand-soft); }
.pass { display: grid; grid-template-columns: 1fr 210px; background: var(--paper); color: var(--char); border-radius: 14px; overflow: hidden; box-shadow: 10px 10px 0 var(--sun); position: relative; }
.pass::before, .pass::after { content: ""; position: absolute; right: 200px; width: 22px; height: 22px; border-radius: 50%; background: var(--night-2); }
.pass::before { top: -11px; } .pass::after { bottom: -11px; }
.pass-main { padding: 0 24px 22px; }
.pass-top { display: flex; justify-content: space-between; margin: 0 -24px 16px; padding: 10px 24px; background: var(--char); color: var(--paper); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.pass-class { color: var(--sun); }
.pass-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.pass-route div { display: flex; flex-direction: column; }
.pass-route small, .stub-grid small { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }
.pass-route b { font-family: var(--f-num); font-size: 56px; line-height: 0.8; letter-spacing: 0.02em; }
.pass-route span { font-size: 12px; opacity: 0.7; }
.pass-route svg { width: 34px; justify-self: center; color: var(--brand-deep); }
.pr-to { text-align: right; align-items: flex-end; }
.pr-to b { color: var(--brand-deep); }
.pass-title { margin: 16px 0 6px; display: flex; flex-wrap: wrap; gap: 3px; font-size: clamp(18px, 2vw, 26px); }
.flap-cell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 0.95em; height: 1.4em; background: linear-gradient(#232323 0 49%, #000 49% 51%, #1a1a1a 51%); border-radius: 3px; font-family: var(--f-mono); font-weight: 500; color: var(--sun); flex: none; }
.flap-cell.blank { width: 0.5em; background: none; }
.pass-tag { margin: 10px 0; font-family: var(--f-hand); font-weight: 600; font-size: 22px; line-height: 1.2; }
.pass-points { margin: 0 0 14px; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.pass-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pass-stats div { background: var(--char); color: var(--paper); padding: 8px; text-align: center; border-radius: 6px; }
.pass-stats span { display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.15em; opacity: 0.7; }
.pass-stats b { font-family: var(--f-num); font-size: 30px; line-height: 1; color: var(--sun); }
.pass-stub { border-left: 3px dashed rgba(22, 18, 31, 0.3); padding: 18px 18px; display: flex; flex-direction: column; gap: 14px; background: #f1ecdf; }
.stub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stub-grid div:first-child { grid-column: 1 / -1; }
.stub-grid b { display: block; font-family: var(--f-num); font-size: 24px; line-height: 1; }
.barcode { height: 56px; background: repeating-linear-gradient(90deg, var(--char) 0 2px, transparent 2px 4px, var(--char) 4px 7px, transparent 7px 8px, var(--char) 8px 9px, transparent 9px 13px); }
.stub-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stub-actions .btn-brutal { padding: 0.7em 0.9em; font-size: 11px; }
.seatbelt { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 26px 0 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(247, 243, 234, 0.55); }
.seatbelt i { width: 12px; height: 12px; border-radius: 50%; background: #3a3260; }
.seatbelt.on { color: var(--sun); }
.seatbelt.on i { background: var(--sun); box-shadow: 0 0 12px var(--sun); animation: pulse 0.5s 4; }
.seatbelt b { color: var(--paper); }
.ticker { position: absolute; left: 0; right: 0; bottom: 92px; background: var(--sun); color: var(--char); border-top: 2px solid var(--char); border-bottom: 2px solid var(--char); overflow: hidden; white-space: nowrap; transform: rotate(-1deg); }
.ticker-track { display: inline-block; padding: 8px 0; font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; animation: ticker 40s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* =========================================================
   WINS — trophy cabinet
========================================================= */
#wins { position: relative; background: var(--paper); color: var(--char); padding: calc(var(--ribbon-h) + 50px) clamp(20px, 5vw, 80px) 140px; background-image: radial-gradient(rgba(22, 18, 31, 0.1) 1px, transparent 1.5px); background-size: 22px 22px; }
.wins-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.wins-count { margin-left: auto; display: flex; align-items: flex-end; gap: 10px; }
.wins-count b { font-family: var(--f-num); font-size: clamp(110px, 12vw, 180px); line-height: 0.75; color: var(--brand); }
.wins-count span { font-family: var(--f-display); font-weight: 800; font-size: 22px; text-transform: uppercase; line-height: 1.05; padding-bottom: 6px; }
.wins-count small { font-family: var(--f-hand); font-weight: 700; font-size: 22px; text-transform: none; color: var(--coral); }
.wins-layout { display: grid; grid-template-columns: 1fr; gap: 30px; }
.shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 64px 22px; padding-top: 34px; }
.medal-card { position: relative; background: #fff; border: var(--border); box-shadow: 6px 6px 0 var(--char); padding: 64px 16px 18px; text-align: center; transition: transform 0.25s, box-shadow 0.25s; }
.medal-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--brand); }
.medal { position: absolute; top: -34px; left: 50%; width: 84px; height: 84px; margin-left: -42px; transform-origin: 50% -30px; }
.medal::before, .medal::after { content: ""; position: absolute; top: -26px; width: 22px; height: 44px; background: var(--brand); }
.medal::before { left: 18px; transform: skewX(18deg); background: var(--char); }
.medal::after { right: 18px; transform: skewX(-18deg); background: var(--brand-deep); }
.medal-disc { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--char); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 34px; line-height: 1; padding-top: 6px; color: var(--char); box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.15), 3px 3px 0 var(--char);
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--sun) 45%, #d99b0f); }
.medal-card.silver .medal-disc { background: radial-gradient(circle at 35% 30%, #fff, #cfd4dc 45%, #8d95a3); }
.medal-card.bronze .medal-disc { background: radial-gradient(circle at 35% 30%, #ffe0c2, #d08b4f 45%, #8f5525); }
.medal-card.violet .medal-disc { background: radial-gradient(circle at 35% 30%, #f4ffd6, var(--sun) 45%, #7aab1c); font-size: 26px; }
.medal-card:hover .medal { animation: swing 1s ease-in-out; }
@keyframes swing { 20% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 70% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
.medal-card h3 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 800; font-size: 19px; line-height: 1.1; letter-spacing: -0.01em; }
.medal-card p { margin: 0; font-family: var(--f-mono); font-size: 11px; opacity: 0.65; }
.medal-card em { display: block; margin-top: 8px; font-family: var(--f-hand); font-style: normal; font-weight: 700; font-size: 20px; color: var(--brand); }
.wins-photo { margin: 0; }
.certs { margin-top: 56px; }
.cert-tags { display: flex; flex-wrap: wrap; gap: 18px; }
.cert-tag { position: relative; padding: 14px 18px 14px 40px; background: var(--sun); border: var(--border); box-shadow: var(--shadow); clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%); font-family: var(--f-display); font-weight: 700; font-size: 15px; transform: rotate(var(--r, -1deg)); }
.cert-tag::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--char); }
.cert-tag:nth-child(2n) { background: var(--paper); }

/* =========================================================
   LAB
========================================================= */
#lab { position: relative; background: var(--night); color: var(--paper); padding: calc(var(--ribbon-h) + 50px) clamp(20px, 5vw, 80px) 140px; }
.lab-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.lab-head .sec-tag-dark { color: var(--paper); border-color: var(--paper); }
.lab-head .big-h em { color: var(--sun); }
.lab-head p { margin: 0 0 8px auto; font-family: var(--f-hand); font-weight: 600; font-size: 22px; color: var(--brand-soft); }
.lab-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.terminal { background: #0b0b0b; color: #e9e6dd; border: 2px solid #2c2c2c; box-shadow: 10px 10px 0 var(--sun); display: flex; flex-direction: column; height: 560px; font-family: var(--f-mono); font-size: 14px; }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #1a1a1a; border-bottom: 2px solid #000; }
.term-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 10px; font-size: 12px; opacity: 0.6; }
.term-body { flex: 1; overflow-y: auto; padding: 16px 16px 6px; line-height: 1.6; overscroll-behavior: contain; }
.term-body p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.term-body .cmd { color: var(--sun); }
.term-body .cmd::before { content: "laksh@portfolio:~$ "; color: var(--brand-soft); }
.term-body .err { color: #ff8a8a; }
.term-body .dim { opacity: 0.55; }
.term-body .hl { color: var(--brand-soft); }
.term-body a { color: var(--sky); }
.term-input { display: flex; align-items: center; gap: 8px; padding: 8px 16px 12px; }
.term-input .prompt { color: var(--brand-soft); white-space: nowrap; }
.term-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--sun); font: inherit; caret-color: var(--sun); }
.term-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 14px; }
.term-chips button { font-family: var(--f-mono); font-size: 11px; background: #1a1a1a; color: #e9e6dd; border: 1px solid #333; padding: 4px 9px; cursor: pointer; }
.term-chips button:hover { background: var(--sun); color: var(--char); border-color: var(--sun); }
.gh-panel { background: var(--paper); color: var(--char); border: var(--border); box-shadow: 10px 10px 0 var(--coral); padding: 22px; }
.gh-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.gh-top img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--char); object-fit: cover; object-position: top; }
.gh-name { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1; }
.gh-name a { text-decoration: none; }
.gh-name a:hover { color: var(--brand); }
.gh-src { margin: 4px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; display: flex; align-items: center; gap: 6px; }
.gh-src.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #28c840; box-shadow: 0 0 0 3px rgba(40, 200, 64, 0.25); }
.gh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.gh-stats div { background: #fff; border: 2px solid var(--char); padding: 8px 6px; text-align: center; }
.gh-stats b { display: block; font-family: var(--f-num); font-size: 34px; line-height: 0.9; color: var(--brand); }
.gh-stats span { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; }
.gh-label { margin: 0 0 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.7; }
.lang-bar { display: flex; height: 16px; border: 2px solid var(--char); overflow: hidden; margin-bottom: 10px; }
.lang-bar i { display: block; height: 100%; }
.lang-legend { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 500; }
.lang-legend li { display: flex; align-items: center; gap: 6px; }
.lang-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.gh-recent { list-style: none; margin: 0 0 20px; padding: 0; }
.gh-recent li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(22, 18, 31, 0.25); font-size: 14px; font-weight: 500; }
.gh-recent a { text-decoration: none; }
.gh-recent a:hover { color: var(--brand); }
.gh-recent span { font-family: var(--f-mono); font-size: 11px; opacity: 0.6; white-space: nowrap; }
.gh-archive { width: 100%; justify-content: center; }
.skills { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.skill-group h4 { margin: 0 0 10px; font-family: var(--f-hand); font-weight: 700; font-size: 26px; color: var(--sun); }
.skill-group div { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-group span { font-family: var(--f-mono); font-size: 12px; padding: 4px 9px; border: 1px solid #333; background: #171717; transition: background 0.2s, color 0.2s; }
.skill-group span:hover { background: var(--sun); color: var(--char); }

/* =========================================================
   GALLERY
========================================================= */
#gallery { position: relative; height: 100vh; min-height: 620px; overflow: hidden; background: linear-gradient(rgba(22, 18, 31, 0.06) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(22, 18, 31, 0.06) 1px, transparent 1px) 0 0 / 40px 40px, var(--paper); border-top: 3px solid var(--char); }
.gallery-tags span { position: absolute; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(22, 18, 31, 0.3); white-space: nowrap; }
.gallery-trail { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.trail-tile { position: absolute; width: 220px; height: 140px; margin: -70px 0 0 -110px; border: 3px solid var(--char); box-shadow: 6px 6px 0 var(--char); background: var(--brand) center top / cover; display: flex; align-items: flex-end; padding: 6px 8px; font-family: var(--f-hand); font-weight: 700; font-size: 18px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.gallery-center { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.gw-top { font-family: var(--f-marker); font-size: clamp(60px, 10vw, 160px); color: var(--brand); line-height: 0.9; }
.gw-bottom { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; font-size: clamp(70px, 12vw, 190px); color: var(--char); line-height: 0.85; margin-top: -0.2em; transform: rotate(-4deg); }
.gallery-hint { margin-top: 40px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(22, 18, 31, 0.7); display: flex; align-items: center; gap: 10px; }
.gallery-hint i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.2); animation: pulse 1.2s infinite; }

/* =========================================================
   POSTS
========================================================= */
#posts { position: relative; background: var(--void); color: var(--paper); padding: calc(var(--ribbon-h) + 50px) clamp(20px, 5vw, 80px) 140px; }
.posts-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.posts-head .big-h em { color: var(--sun); }
.li-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-bottom: 50px; }
.li-posts:empty { display: none; }
.li-post { display: flex; flex-direction: column; background: var(--paper); color: var(--char); border: var(--border); box-shadow: 8px 8px 0 var(--sun); text-decoration: none; transition: transform 0.2s; }
.li-post:hover { transform: translate(-3px, -3px) rotate(-0.4deg); }
.li-post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--border); }
.li-post div { padding: 14px 16px 16px; }
.li-post small { font-family: var(--f-mono); font-size: 11px; color: var(--brand); }
.li-post p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.posts-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.posts-grid .col-k { color: var(--sun); }
.log-list { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid #2a2a2a; }
.log-item { position: relative; margin: 0 0 18px; padding: 14px 16px; background: #141414; border: 1px solid #2a2a2a; transition: border-color 0.2s, transform 0.2s; }
.log-item:hover { border-color: var(--sun); transform: translateX(4px); }
.log-item::before { content: ""; position: absolute; left: -30px; top: 20px; width: 12px; height: 12px; background: var(--void); border: 2px solid var(--sun); border-radius: 50%; }
.log-meta { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 11px; opacity: 0.65; margin-bottom: 6px; }
.log-title { margin: 0 0 4px; font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.05; }
.log-title a { text-decoration: none; }
.log-title a:hover { color: var(--sun); }
.log-desc { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.85; }
.log-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.log-tags span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border: 1px solid #333; }
.log-more { font-family: var(--f-hand); font-weight: 700; font-size: 22px; color: var(--sun); }
.social-cards { display: grid; gap: 14px; }
.social-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 16px; text-decoration: none; border: 2px solid var(--paper); box-shadow: 6px 6px 0 var(--sc, var(--brand)); background: #141414; transition: transform 0.15s, box-shadow 0.15s; }
.social-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--sc, var(--brand)); }
.sc-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: var(--sc, var(--brand)); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 22px; }
.social-card b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1; }
.social-card small { font-family: var(--f-mono); font-size: 12px; opacity: 0.7; }
.social-card em { font-style: normal; font-family: var(--f-hand); font-weight: 700; font-size: 19px; color: var(--sun); text-align: right; }
.li-embeds { display: grid; gap: 16px; margin-top: 22px; }
.li-embeds iframe { width: 100%; height: 560px; border: 2px solid var(--paper); background: #fff; }

/* =========================================================
   CONTACT + FOOTER
========================================================= */
#contact { position: relative; background: var(--void); color: var(--paper); padding: 120px clamp(20px, 6vw, 90px); display: flex; gap: 60px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.contact-title { margin: 0; font-weight: 400; line-height: 0.9; }
.contact-title span { font-family: var(--f-marker); font-size: clamp(60px, 9vw, 140px); }
.contact-title em { font-style: normal; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; font-size: clamp(60px, 9vw, 140px); background: var(--sun); color: var(--char); padding: 0 0.12em; box-shadow: 8px 8px 0 var(--coral); display: inline-block; transform: rotate(-3deg); }
.contact-blurb { max-width: 46ch; font-size: 18px; line-height: 1.55; opacity: 0.85; margin-top: 30px; }
.contact-right { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mail-cta { font-size: clamp(13px, 1.3vw, 16px); padding: 1em 1.5em; background: var(--sun); color: var(--char); box-shadow: 6px 6px 0 var(--coral); border-color: var(--paper); }
.contact-note { margin: 0; font-family: var(--f-mono); font-size: 12px; opacity: 0.6; }
.cv-big { margin-top: 8px; }
.socials { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.socials a { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.15em; text-decoration: none; border: 2px solid var(--paper); padding: 10px 14px; transition: background 0.2s, color 0.2s; }
.socials a:hover { background: var(--paper); color: var(--char); }
#footer { background: var(--paper); color: var(--char); border-top: 3px solid var(--char); padding: 48px clamp(20px, 6vw, 90px) 120px; display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.ft-big { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.02em; }
.ft-small { margin: 6px 0 0; font-family: var(--f-hand); font-weight: 600; font-size: 24px; opacity: 0.75; }
.ft-links { margin: 14px 0 0; font-family: var(--f-mono); font-size: 12px; }
.ft-links a { color: var(--brand-deep); cursor: pointer; }
.ft-right { text-align: right; }
.ft-name { margin: 0; font-family: var(--f-marker); font-size: 64px; line-height: 1; color: var(--brand); transform: rotate(-4deg); }
.ft-copy { margin: 4px 0 0; font-family: var(--f-mono); font-size: 12px; }

/* =========================================================
   ARCHIVE PAGE
========================================================= */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.archive-page { background: var(--paper); background-image: radial-gradient(rgba(22, 18, 31, 0.1) 1px, transparent 1.5px); background-size: 22px 22px; }
.rb-back { color: var(--paper); text-decoration: none; }
.rb-back:hover { color: var(--sun); }
.archive-page .rb-progress span { mix-blend-mode: normal; color: var(--char); }
.ar-main { padding: calc(var(--ribbon-h) + 50px) clamp(16px, 5vw, 80px) 80px; max-width: 1400px; margin: 0 auto; }
.ar-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.ar-head h1 { margin: 0; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(64px, 10vw, 150px); line-height: 0.82; text-transform: uppercase; color: var(--char); }
.ar-head h1 span { font-family: var(--f-hand); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--brand); font-size: 0.75em; margin-left: 0.1em; display: inline-block; transform: rotate(-4deg); }
.ar-count { margin: 0 0 8px auto; font-family: var(--f-hand); font-weight: 700; font-size: 26px; }
.ar-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-bottom: 14px; }
.ar-search { flex: 1 1 280px; display: flex; }
.ar-search input, .ar-controls select { width: 100%; font-family: var(--f-mono); font-size: 14px; color: var(--char); background: #fff; border: var(--border); box-shadow: var(--shadow); padding: 12px 14px; border-radius: 0; }
.ar-controls select { width: auto; cursor: pointer; }
.ar-search input:focus, .ar-controls select:focus { outline: none; box-shadow: 4px 4px 0 var(--brand); }
.ar-toggle { display: flex; align-items: center; gap: 8px; font-family: var(--f-hand); font-weight: 700; font-size: 20px; background: #fff; border: var(--border); box-shadow: var(--shadow); padding: 0 14px; cursor: pointer; }
.ar-toggle input { accent-color: var(--brand); width: 16px; height: 16px; }
.ar-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.ar-chip { font-family: var(--f-mono); font-size: 12px; padding: 6px 12px; background: #fff; border: 2px solid var(--char); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ar-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lc, var(--char)); }
.ar-chip.on { background: var(--char); color: var(--paper); box-shadow: 3px 3px 0 var(--sun); }
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.ar-card { display: flex; flex-direction: column; background: #fff; border: 3px solid var(--char); box-shadow: 6px 6px 0 var(--char); transition: transform 0.2s, box-shadow 0.2s; }
.ar-card:hover { transform: translate(-3px, -3px) rotate(-0.4deg); box-shadow: 10px 10px 0 var(--brand); }
.ar-media { position: relative; aspect-ratio: 16 / 9; border-bottom: 3px solid var(--char); overflow: hidden; background: var(--char); }
.ar-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s; }
.ar-card:hover .ar-media img { transform: scale(1.04); }
.ar-media.gen { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--lc) 0%, var(--night) 110%); }
.ar-media.gen span { font-family: var(--f-marker); font-size: 64px; color: var(--paper); text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); }
.ar-live { position: absolute; top: 10px; right: 10px; font-style: normal; font-family: var(--f-mono); font-size: 11px; background: var(--sun); color: var(--char); padding: 3px 8px; border: 2px solid var(--char); }
.ar-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.ar-body h2 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; font-size: 24px; line-height: 1.05; }
.ar-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #3d3650; flex: 1; }
.ar-meta { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 11px; color: #5a5270; margin-bottom: 14px; }
.ar-lang { display: inline-flex; align-items: center; gap: 6px; }
.ar-lang i { width: 10px; height: 10px; border-radius: 50%; background: var(--lc); }
.ar-links { display: flex; gap: 10px; }
.ar-links .btn-brutal { padding: 0.6em 1em; font-size: 11px; }
.ar-empty { font-family: var(--f-hand); font-weight: 700; font-size: 24px; text-align: center; padding: 40px 0; }
.ar-empty a { color: var(--brand-deep); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
  .cabin { grid-template-columns: 1fr 1.4fr; }
  .fl-arrow { display: none; }
  .shelf { grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
}
@media (max-width: 900px) {
  :root { --ribbon-h: 40px; }
  #ribbon { grid-template-columns: auto 1fr; }
  .rb-phrase { display: none; }
  .rb-name { padding: 0 14px; font-size: 12px; }
  #nav { bottom: 12px; }
  #nav a { padding: 7px 9px; font-size: 12px; }
  #cv-tab { display: none; }
  .hero-quote { top: calc(var(--ribbon-h) + 120px); grid-template-columns: auto; }
  .hq-chart, .hq-axis, .hero-socials { display: none; }

  #about { height: auto; padding: 70px 12px 60px; }
  .about-sticky { position: relative; height: auto; display: block; overflow: visible; perspective: none; }
  .about-hint, .nb-label, .nb-spot, .trace, #stickers { display: none; }
  .notebook { width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; container-type: normal; transform: none !important; opacity: 1 !important; }
  .spine { height: 14px; }
  .page { display: flex; flex-direction: column; gap: 22px; padding: 26px 18px 30px; background-size: 100% 28px; }
  .n-item, .n-stamp { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; opacity: 1 !important; filter: none !important; }
  .n-note span { font-size: 22px; } .n-note small { font-size: 11px; } .n-note { padding: 14px; max-width: 280px; }
  .n-headline h2 { font-size: 34px; }
  .n-story { font-size: 20px; } .n-cursive { font-size: 28px; align-self: flex-end; }
  .n-cutout { width: 60% !important; align-self: center; margin: 20px 0; }
  .n-cutout img { height: auto; aspect-ratio: 1; } .n-cutout figcaption { font-size: 11px; padding: 4px 8px; }
  .n-annot { font-size: 26px; } .n-annot span { margin-left: 0 !important; }
  .n-polaroid { width: 70% !important; align-self: center; padding: 10px; } .n-polaroid b { font-size: 22px; } .n-polaroid small { font-size: 11px; }
  .nt-bar span { font-size: 11px; } #nt-text { font-size: 14px; min-height: 0; padding: 14px; } .nt-bar { padding: 8px 10px; } .nt-bar i { width: 10px; height: 10px; }
  .n-stats { padding: 14px; } .n-stats small { font-size: 11px; } .n-stats b { font-size: 64px; } .n-stats span { font-size: 18px; }
  .n-log p, .n-other p { font-size: 11px; } .n-log b { font-size: 24px; } .n-log span { font-size: 20px; } .n-other ul { font-size: 14px; padding-left: 18px; }
  .n-stamp { width: 130px !important; align-self: center; padding: 14px; } .n-stamp b { font-size: 16px; } .n-stamp small { font-size: 9px; }
  .n-signature { padding: 12px 16px; } .n-signature small { font-size: 11px; } .n-signature span { font-size: 26px; }
  .epilogue { position: relative; left: auto; bottom: auto; transform: none; opacity: 1; margin-top: 40px; }

  .lb-track { flex-direction: column; width: auto; }
  .pp-page { width: 100%; }
  .lb-progress { display: none; }
  .quick-note { position: relative; top: auto; right: auto; margin-top: 30px; width: auto; max-width: 340px; }
  .xp-card { margin-top: 14px; transform: none !important; grid-template-columns: 1fr; }
  .xp-thumb { display: none; }
  .cabin { grid-template-columns: 1fr; }
  .window { max-width: 300px; }
  .pass { grid-template-columns: 1fr; }
  .pass::before, .pass::after { display: none; }
  .pass-stub { border-left: 0; border-top: 3px dashed rgba(22, 18, 31, 0.3); }
  .fl-captain { margin-left: 0; text-align: left; }
  .route .sub { display: none; }
  .lab-grid, .posts-grid { grid-template-columns: 1fr; }
  .terminal { height: 460px; }
  .gh-stats { grid-template-columns: repeat(2, 1fr); }
  .lab-head p, .lb-note, .wins-count { margin-left: 0; }
  .ticker { bottom: 70px; }
  .trail-tile { width: 150px; height: 96px; margin: -48px 0 0 -75px; }
  .archive-page #ribbon { grid-template-columns: auto 1fr; }
  .ar-count { margin-left: 0; }
}
@media (max-width: 600px) {
  .hero-center { margin-top: 34vh; }
  .hero-word { font-size: 30vw; }
  .hero-roles { display: none; }
  .hero-cta { flex-direction: column; align-items: center; bottom: 11%; }
  .shelf { grid-template-columns: 1fr; }
  .rb-progress .rb-label { display: none; }
  .rb-progress { justify-content: flex-end; }
  .stamp { width: 96px; height: 96px; }
  .stamp b { font-size: 34px; }
  .pp-top { padding-right: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/* No-GSAP / reduced-motion fallbacks: everything visible, nothing pinned */
.no-anim #about { height: auto; padding: 90px 0; }
.no-anim .about-sticky { position: relative; height: auto; flex-direction: column; gap: 40px; overflow: visible; }
.no-anim .nb-spot, .no-anim .about-hint, .no-anim .trace { display: none; }
.no-anim .sticker, .no-anim .epilogue, .no-anim .hero-badge, .no-anim .hero-quote, .no-anim .hero-roles, .no-anim .hero-cta, .no-anim .hero-socials { opacity: 1; }
.no-anim .epilogue { position: relative; left: auto; bottom: auto; transform: none; }
.no-anim .lb-track { flex-wrap: wrap; width: auto; }
.no-anim .shade { transform: translateY(-104%) !important; }

/* =========================================================
   v4 — script wordmark, signature, phone
========================================================= */
.hero-center { margin-top: 32vh; }
.sig-fill { fill: var(--sun); filter: drop-shadow(0 0 6px rgba(198, 255, 61, 0.45)); }
.sig-swoosh { fill: none; stroke: var(--sun); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.contact-phone { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-phone a { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--paper); border: 2px solid var(--sun); padding: 10px 14px; transition: background 0.2s, color 0.2s; }
.contact-phone a:hover { background: var(--sun); color: var(--char); }
@media (max-width: 600px) { .hero-center { margin-top: 40vh; } }
@media (max-width: 600px) { .hero-quote { display: none; } .hero-badge { top: calc(var(--ribbon-h) + 18px); } }

/* hero texture + legibility */
.hero-bg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px), linear-gradient(to bottom, transparent 66%, rgba(14, 14, 14, 0.55) 88%, var(--night) 100%); }
.hero-bg .grain { z-index: 2; opacity: 0.08; }
.hero-title, .hero-tag { display: inline-block; background: rgba(14, 14, 14, 0.88); border: 1px solid #2c2c2c; backdrop-filter: blur(3px); }
.hero-title { padding: 6px 12px 6px 16px; color: var(--sun); }
.hero-tag { margin-top: 10px; padding: 8px 14px; color: var(--paper); font-weight: 500; }
.hero-roles, .hero-socials { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.hero-cta { bottom: 8.5%; }
@media (max-width: 600px) { .hero-cta { bottom: 9%; } }
@media (max-width: 600px) { .hero-center { margin-top: 28vh; } .hero-cta { bottom: 8%; } .hero-tag { font-size: 12px; } }

/* =========================================================
   HERO WORDMARK — printed, textured, no glow
   Front face: paper + ink-speck noise + mottling + halftone, clipped to the letters.
   Extrusion: a duplicate layer (::before) behind, solid olive slab + hard shadow.
========================================================= */
.hw-inner {
  position: relative; text-shadow: none;
  color: transparent; -webkit-text-fill-color: transparent; /* keeps layout; layers below do the drawing */
}
.hw-inner::after {
  content: attr(data-text); position: absolute; inset: 0; padding: inherit; z-index: 1;
  color: transparent; -webkit-text-fill-color: transparent;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 2.1 0 0 0 -1.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.32 0 0 0 0 0.25 1.3 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(22, 18, 12, 0.16) 0.8px, transparent 1.3px) 0 0 / 5px 5px,
    linear-gradient(172deg, #fdfaf2 0%, #f3eee0 55%, #e4dcc8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 2.5px var(--char); /* crisp ink keyline around the paper face */
}
.hw-inner::before {
  content: attr(data-text); position: absolute; inset: 0; padding: inherit; z-index: -1;
  /* bright lime slab, stepped (no blur) + dark keyline + hard drop shadow = pops off the green portrait */
  color: #c6ff3d; -webkit-text-fill-color: #c6ff3d; -webkit-text-stroke: 3px var(--char);
  text-shadow:
    1px 1px 0 #bdf436, 2px 2px 0 #b3ea31, 3px 3px 0 #a8de2c, 4px 4px 0 #9cd127, 5px 5px 0 #90c322,
    6px 6px 0 #83b41e, 7px 7px 0 #76a41a, 8px 8px 0 #699416, 9px 9px 0 #5c8312, 10px 10px 0 #4f720f,
    11px 11px 0 #111, 12px 12px 0 #111, 13px 13px 0 #111,
    20px 22px 0 rgba(0, 0, 0, 0.5), 26px 30px 28px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   v5 — Builds grid, Crew, lightbox, posts
========================================================= */
/* ---------- BUILDS: editorial screenshot grid ---------- */
.build-grid { position: relative; z-index: 2; margin: 70px auto 0; max-width: 1240px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 26px; perspective: 1400px; }
.bcard {
  grid-column: span var(--span, 6); position: relative; display: flex; flex-direction: column; cursor: pointer; outline: none;
  background: #151515; color: var(--paper); border: 1px solid #2c2c2c; border-radius: 14px; overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform 0.25s ease-out, border-color 0.25s, box-shadow 0.3s;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
.bcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(198, 255, 61, 0.10), transparent 60%); }
.bcard:hover, .bcard:focus-visible { border-color: var(--sun); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--sun); }
.bcard:hover::after { opacity: 1; }
.bcard-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0c0c0c; border-bottom: 1px solid #2c2c2c; }
.bcard:nth-child(1) .bcard-media, .bcard:nth-child(4) .bcard-media { aspect-ratio: 16 / 8; }
.bcard-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(0.85) brightness(0.9); transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.4s; }
.bcard:hover .bcard-media img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.bcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 21, 21, 0.85), transparent 45%); }
.bcard-no { position: absolute; z-index: 1; left: 18px; bottom: 10px; font-family: var(--f-num); font-size: 64px; line-height: 0.8; color: var(--sun); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.bcard-body { padding: 18px 22px 20px; display: flex; flex-direction: column; flex: 1; }
.bcard-top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9b978d; }
.bcard h3 { margin: 10px 0 6px; font-family: var(--f-display); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.02em; line-height: 1; }
.bcard p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: #c9c5bb; flex: 1; }
.bcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.bcard-tags span { font-family: var(--f-mono); font-size: 11px; padding: 3px 8px; border: 1px solid #333; border-radius: 99px; color: #d8d4ca; }
.bcard-foot { display: flex; align-items: center; gap: 16px; padding-top: 14px; border-top: 1px dashed #333; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.bcard-open { color: var(--sun); margin-right: auto; }
.bcard-foot a { color: #d8d4ca; text-decoration: none; }
.bcard-foot a:hover { color: var(--sun); }

/* ---------- CREW ---------- */
#crew { position: relative; background: var(--paper); color: var(--char); padding: calc(var(--ribbon-h) + 50px) clamp(20px, 5vw, 80px) 130px; border-top: 3px solid var(--char);
  background-image: linear-gradient(rgba(18, 18, 18, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 18, 18, 0.05) 1px, transparent 1px); background-size: 34px 34px; }
.crew-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.crew-head .sec-tag { color: var(--char); border-color: var(--char); box-shadow: 3px 3px 0 var(--sun); }
.crew-head .big-h em { color: var(--coral); }
.crew-intro { margin: 0 0 10px auto; max-width: 34ch; font-family: var(--f-hand); font-weight: 600; font-size: 24px; line-height: 1.2; text-align: right; }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }
.team-card { display: grid; grid-template-columns: 1.05fr 1fr; background: #fff; border: var(--border); box-shadow: 8px 8px 0 var(--char); transform: rotate(var(--r, 0deg)); transition: translate 0.3s, box-shadow 0.3s; }
.team-card:hover { translate: 0 -6px; box-shadow: 12px 12px 0 var(--sun), 12px 12px 0 2px var(--char); }
.team-photo { position: relative; margin: 12px; overflow: visible; }
.team-photo img { width: 100%; height: 100%; min-height: 240px; max-height: 320px; object-fit: cover; object-position: center 30%; border: 2px solid var(--char); filter: contrast(1.05); }
.team-photo .tape { top: -10px; }
.team-body { padding: 20px 20px 18px 8px; display: flex; flex-direction: column; }
.team-body h3 { margin: 0 0 8px; font-family: var(--f-marker); font-weight: 400; font-size: 34px; line-height: 1; }
.team-members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.team-members span { font-family: var(--f-mono); font-size: 11px; padding: 3px 9px; background: var(--paper); border: 1px solid var(--char); border-radius: 99px; }
.team-members span.me { background: var(--sun); font-weight: 500; }
.team-wins { list-style: none; margin: 0 0 12px; padding: 0; }
.team-wins li { position: relative; padding: 5px 0 5px 20px; border-bottom: 1px dashed rgba(18, 18, 18, 0.2); font-size: 14px; line-height: 1.35; }
.team-wins li::before { content: "★"; position: absolute; left: 0; top: 5px; color: var(--coral); font-size: 12px; }
.team-note { margin: auto 0 0; font-family: var(--f-hand); font-weight: 600; font-size: 19px; line-height: 1.2; color: #4a463f; }
.wall-head { display: flex; justify-content: space-between; align-items: baseline; margin: 70px 0 18px; }
.wall-head .col-k { color: var(--brand-deep); margin: 0; }
.wall-hint { margin: 0; font-family: var(--f-hand); font-weight: 600; font-size: 20px; }
.photo-wall { columns: 4 240px; column-gap: 22px; }
.wall-photo { break-inside: avoid; margin: 0 0 22px; padding: 10px 10px 8px; background: #fff; box-shadow: 0 10px 24px rgba(18, 18, 18, 0.18); transform: rotate(var(--r, 0deg)); transition: scale 0.25s, box-shadow 0.25s; cursor: zoom-in; outline: none; }
.wall-photo:hover, .wall-photo:focus-visible { scale: 1.05; box-shadow: 0 18px 40px rgba(18, 18, 18, 0.28); position: relative; z-index: 2; }
.wall-photo img { width: 100%; display: block; filter: saturate(0.92) contrast(1.04); }
.wall-photo figcaption { padding-top: 8px; text-align: center; font-family: var(--f-hand); font-weight: 700; font-size: 18px; line-height: 1.15; }

/* ---------- LIGHTBOX ---------- */
#lightbox { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 30px 80px; background: rgba(8, 8, 8, 0.92); backdrop-filter: blur(6px); }
#lightbox[hidden] { display: none; }
.lb-frame { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; background: #fff; padding: 12px 12px 10px; transform: rotate(-0.8deg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.lb-frame img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; display: block; }
.lb-frame figcaption { padding-top: 10px; font-family: var(--f-hand); font-weight: 700; font-size: 22px; color: var(--char); white-space: pre; }
.lb-nav, .lb-close { position: absolute; width: 52px; height: 52px; border: 2px solid var(--paper); background: transparent; color: var(--paper); font-size: 22px; cursor: pointer; box-shadow: 4px 4px 0 var(--sun); }
.lb-nav:hover, .lb-close:hover { background: var(--paper); color: var(--char); }
.lb-prev { left: 18px; top: 50%; margin-top: -26px; }
.lb-next { right: 18px; top: 50%; margin-top: -26px; }
.lb-close { right: 18px; top: 18px; }

/* ---------- POSTS: titled LinkedIn cards ---------- */
.li-posts { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.li-post img { aspect-ratio: 16 / 10; object-position: top; }
.li-post b { display: block; margin: 6px 0 4px; font-family: var(--f-display); font-weight: 800; font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; }
.li-post p { -webkit-line-clamp: 3; color: #4a463f; }

/* ---------- ORIGIN: cleaner line (no node dots) ---------- */
#trace-nodes { display: none; }
.trace-glow { opacity: 0.22; }

@media (max-width: 900px) {
  .build-grid { grid-template-columns: 1fr; }
  .bcard { grid-column: auto; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 1fr; }
  .team-body { padding: 4px 18px 18px; }
  .crew-intro { margin-left: 0; text-align: left; }
  #lightbox { padding: 20px 12px 90px; }
  .lb-prev, .lb-next { top: auto; bottom: 18px; margin-top: 0; }
  .lb-prev { left: calc(50% - 64px); } .lb-next { right: calc(50% - 64px); }
}

/* =========================================================
   v6 — unclipped script headings, live badges, medal labels
========================================================= */
/* The slanted handwritten words overhang their box: give the mask room, then drop it after the reveal. */
.big-h .w { padding: 0.1em 0.22em 0.12em 0.06em; margin: -0.1em -0.22em -0.12em -0.06em; }
.big-h .w.revealed { overflow: visible; }
.no-anim .big-h .w { overflow: visible; }
.exp-rest, .gw-top, .contact-title span { padding-right: 0.12em; }

.xp-thumb-wrap { position: relative; align-self: center; display: block; transform: rotate(2deg); }
.xp-thumb-wrap .xp-thumb { transform: none; display: block; }
.xp-live { position: absolute; left: -8px; top: -9px; font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; background: var(--sun); color: var(--char); border: 1.5px solid var(--char); white-space: nowrap; }
.xp-live.is-code { background: var(--paper); }

.medal-place { display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-deep); }
.medal-card.violet .medal-disc { font-size: 24px; }
.xp-thumb[src*="gh-"] { object-position: 6% center; }

/* =========================================================
   v7 — motion support after Best Work
========================================================= */
.log-list { position: relative; }
.log-list::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: calc(var(--fill, 1) * 100%); background: var(--sun); box-shadow: 0 0 10px rgba(198, 255, 61, 0.6); }
.li-post { overflow: hidden; }
.li-post img { transform-origin: 50% 40%; }
.medal { perspective: 400px; }
.medal-disc { backface-visibility: visible; }
#gallery { overflow: hidden; }
#contact .btn-brutal { transition: box-shadow 0.15s, background 0.2s; } /* GSAP owns transform here (slide-in + magnetic) */

/* v8 — tools strip */
.marquee { position: relative; z-index: 5; width: 108vw; margin: -10px 0 -10px -4vw; transform: rotate(-1.6deg); }
.marquee-row { overflow: hidden; white-space: nowrap; padding: 12px 0; background: var(--sun); color: var(--char); border-top: 3px solid var(--char); }
.marquee-row.alt { background: var(--char); color: var(--sun); border-bottom: 3px solid var(--char); }
.marquee-track { display: inline-flex; font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 4vw, 56px); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; will-change: transform; }
.marquee-row.alt .marquee-track { font-family: var(--f-mono); font-weight: 500; font-size: clamp(16px, 1.8vw, 24px); letter-spacing: 0.06em; }

/* =========================================================
   v9 — TOOLBOX section (paper, aligned rows, logos)
========================================================= */
#toolbox { position: relative; background: var(--paper); color: var(--char); padding: calc(var(--ribbon-h) + 50px) clamp(20px, 5vw, 80px) 120px; border-top: 3px solid var(--char);
  background-image: radial-gradient(rgba(18, 18, 18, 0.1) 1px, transparent 1.5px); background-size: 22px 22px; }
.tb-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.tb-head .big-h em { color: var(--coral); }
.tb-count { margin-left: auto; display: flex; align-items: flex-end; gap: 10px; }
.tb-count b { font-family: var(--f-num); font-size: clamp(90px, 10vw, 150px); line-height: 0.75; color: var(--char); }
.tb-count span { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.05; text-transform: uppercase; padding-bottom: 6px; }
.tb-count small { font-family: var(--f-hand); font-weight: 700; font-size: 20px; text-transform: none; color: var(--coral); }
.tb-rows { border-bottom: 2px solid var(--char); }
.tb-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; padding: 26px 0; border-top: 2px solid var(--char); }
.tb-label { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; position: sticky; top: calc(var(--ribbon-h) + 20px); }
.tb-no { grid-row: span 2; font-family: var(--f-num); font-size: 46px; line-height: 0.8; color: var(--coral); }
.tb-label h3 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; line-height: 1; }
.tb-label small { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b665d; margin-top: 4px; }
.tb-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.tool { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; background: #fff; border: 2px solid var(--char); box-shadow: 3px 3px 0 var(--char);
  font-family: var(--f-sans); font-weight: 600; font-size: 14.5px; line-height: 1.15; cursor: default; transition: background 0.18s, translate 0.18s, box-shadow 0.18s; }
.tool i { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tool .mono { flex: none; width: 22px; height: 22px; display: grid; place-items: center; background: var(--char); color: var(--sun); font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: -0.02em; }
.tool:hover { background: var(--sun); translate: -2px -2px; box-shadow: 5px 5px 0 var(--char); }
@media (max-width: 900px) {
  .tb-row { grid-template-columns: 1fr; gap: 16px; }
  .tb-label { position: static; }
  .tb-tools { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .tb-count { margin-left: 0; }
}