/* ============================================================
   YURI LEE — main stylesheet
   ============================================================ */

:root {
  --paper: #f3f0ea;       /* page background — matched to main.mov */
  --paper-original: #f3efe7; /* original lock value (for ref) */
  --ink-dark: #1a1a1a;
  --terra: #bc5a3a;
  --olive: #6b7a4a;
  --cobalt: #2c46e8;
  --cream: #faf0e8;
  --nav-h: 100px;          /* sticky nav reserved height (padding 56+24 + line) */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);   /* anchor scrolls land below sticky nav */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-dark);
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* prevent iOS Safari from auto-inflating small text — required so
     the mobile nav-bar labels keep their declared CSS size */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

/* Custom cursor — stippled hand-axe (mouse.png) */
html, body, button, a, input, textarea, select, label {
  cursor: url('../mouse.png') 25 4, auto;
}
a, button, [role="button"], input[type="submit"], input[type="button"], input[type="range"], .replay {
  cursor: url('../mouse.png') 25 4, pointer;
}

a { color: inherit; }

/* ============================================================
   Site container — matches brainstorm preview width
   ============================================================ */
.nav,
.hero-section,
.about-section,
.site-footer,
.page {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Nav (sticky top, text only)
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  padding: 56px 44px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dark);
  background: var(--paper);
  pointer-events: auto;
}
.nav a {
  color: var(--ink-dark);
  text-decoration: none;
  margin-left: 28px;
  transition: color 0.15s;
}
.nav a:hover { color: var(--cobalt); }

/* ============================================================
   HERO (home page)
   ============================================================ */
.hero-section {
  min-height: calc(100vh - var(--nav-h));   /* fit available viewport below sticky nav */
  position: relative;
  overflow: hidden;
  /* Responsive hero scaling — text + inline keyword pills share this base.
     At 1440px viewport this resolves to ~48px (~original 45px feel);
     scales up on 1920/2560/4K so the hero doesn't shrink visually. */
  --hero-base: clamp(32px, 3.3vw, 72px);
}
.hero-area {
  padding: clamp(28px, 3vw, 64px);
  padding-top: clamp(96px, 9.6vw, 208px);   /* lifted ~20% upward so hero text clears the bottom-right video */
  min-height: calc(100vh - var(--nav-h));
  position: relative;
}

.replay {
  position: absolute;
  top: 24px;
  left: 44px;
  z-index: 20;
  background: transparent;
  border: 1px solid var(--ink-dark);
  padding: 6px 12px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dark);
}
.replay:hover { background: var(--ink-dark); color: var(--paper); }

.hero {
  --base: 45;
  font-size: var(--hero-base);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink-dark);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  max-width: 72%;
  position: relative;
  z-index: 5;
}
.hero .tchar {
  opacity: 0;
  transition: opacity 0.05s ease-out;
}
.hero .tchar.show { opacity: 1; }

/* Technology — olive selection box + drifting corners */
.kw-tech {
  display: inline-block;
  border: 1.3px solid var(--olive);
  padding: 1px 7px 5px;
  position: relative;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-dark);
  vertical-align: -3px;
  transition: border-color 0.08s;
}
.kw-tech::before,
.kw-tech::after,
.kw-tech > .c1,
.kw-tech > .c2 {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--paper);
  border: 1.3px solid var(--olive);
  transition: opacity 0.08s, border-color 0.08s;
}
.kw-tech::before { top: -3px; left: -3px; animation: drift-tl 3.2s ease-in-out infinite; }
.kw-tech::after  { top: -3px; right: -3px; animation: drift-tr 2.7s ease-in-out infinite; }
.kw-tech > .c1   { bottom: -3px; left: -3px; animation: drift-bl 3.8s ease-in-out infinite; }
.kw-tech > .c2   { bottom: -3px; right: -3px; animation: drift-br 2.4s ease-in-out infinite; }

.kw-tech.hide-frame { border-color: transparent; }
.kw-tech.hide-frame::before,
.kw-tech.hide-frame::after { border-color: transparent; }
.kw-tech.hide-frame > .c1,
.kw-tech.hide-frame > .c2 { opacity: 0; }

@keyframes drift-tl { 0% { transform: translate(0, 0); } 20% { transform: translate(-2px, -1px); } 45% { transform: translate(1px, -3px); } 70% { transform: translate(-1px, 1px); } 100% { transform: translate(0, 0); } }
@keyframes drift-tr { 0% { transform: translate(0, 0); } 25% { transform: translate(2px, -2px); } 55% { transform: translate(-1px, 2px); } 80% { transform: translate(3px, 0); } 100% { transform: translate(0, 0); } }
@keyframes drift-bl { 0% { transform: translate(0, 0); } 18% { transform: translate(-3px, 1px); } 50% { transform: translate(1px, -2px); } 82% { transform: translate(-2px, 2px); } 100% { transform: translate(0, 0); } }
@keyframes drift-br { 0% { transform: translate(0, 0); } 30% { transform: translate(2px, 2px); } 60% { transform: translate(-2px, -1px); } 85% { transform: translate(1px, 3px); } 100% { transform: translate(0, 0); } }

/* Human Experience — sweep highlight */
.kw-human {
  display: inline-block;
  padding: 3px 13px 6px;
  white-space: nowrap;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--hero-base) * 1.105);
  line-height: 1;
  color: var(--cream);
  vertical-align: -3px;
  background-color: transparent;
  background-image: linear-gradient(to right, var(--terra), var(--terra));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
}
@keyframes sweepHighlight {
  0%   { background-size: 0% 100%; }
  100% { background-size: 100% 100%; }
}
.kw-human.sweeping { animation: sweepHighlight var(--sweep-dur, 700ms) linear forwards; }

/* Questions — cobalt mono + cobalt brackets */
.kw-q {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--cobalt);
  font-size: calc(var(--hero-base) * 0.842);
  letter-spacing: -0.04em;
  vertical-align: 0.08em;
  transition: color 0.08s;
}
.kw-q .bracket {
  color: var(--cobalt);
  font-weight: 400;
  font-size: var(--hero-base);
  transition: color 0.08s;
}
.kw-q.hide-frame { color: var(--ink-dark); }
.kw-q.hide-frame .bracket { color: var(--ink-dark); }

/* Caret — blinks forever */
.caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--ink-dark);
  margin-left: 1px;
  vertical-align: -2px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Hero video object (bottom right) */
.obj-video {
  position: absolute;
  right: clamp(20px, 3vw, 64px);
  bottom: clamp(20px, 2.8vw, 56px);
  width: clamp(420px, 50vw, 1100px);
  aspect-ratio: 1030 / 460;
  overflow: hidden;
  pointer-events: none;
}
.obj-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   ABOUT SECTION (scroll-down on home)
   ============================================================ */
.about-section {
  padding: 120px 44px;
  border-top: 1px dashed rgba(26, 26, 26, 0.2);
  position: relative;
}
.about-section .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 32px;
}
.about-section h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 32px;
  max-width: 760px;
  letter-spacing: -0.015em;
}

.about-section .essay {
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  line-height: 1.65;
  max-width: 620px;
}
.about-section .essay p { margin: 0 0 16px; }
.about-section .essay .lead { font-size: 20px; font-style: italic; }
.about-section .bio {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px dashed rgba(26, 26, 26, 0.3);
  max-width: 620px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.7;
  color: #3a3a3a;
  letter-spacing: 0.03em;
}
.about-section .bio .row { display: flex; gap: 14px; }
.about-section .bio .k {
  opacity: 0.55;
  min-width: 96px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 9px;
}

/* ============================================================
   ABOUT SECTION — DARK variant (kinetic typography bg)
   ============================================================ */
.about-section.about-section--dark {
  background: var(--paper);
  color: var(--ink-dark);
  border-top: 0;
  padding: 80px 44px;
  overflow: hidden;
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  /* full-bleed — escape the .about-section 1280px cap so the ASCII bg can
     fill viewport edge-to-edge. brain-frame keeps its visual size via
     its own max-width below. */
  max-width: none;
  /* force inner brain-frame to true center via flex */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Brain composition — fills available width up to 1192px (previous section
   content width); section is now full-bleed but brain stays at its visual size */
.about-section--dark .brain-frame {
  position: relative;
  width: 100%;
  max-width: 1192px;
  margin: 0 auto;
  aspect-ratio: 1672 / 941;
  transform: scale(1.35) translateX(4%);  /* 0.9× of prior 1.5× scale + slight right shift */
  transform-origin: center;
}

/* Canvas clipped to LEFT hemisphere — brain-shape mask + hard half-clip.
   Fully opaque; no horizontal fade. */
.about-section--dark .about-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: url('../brain_origin.png');
          mask-image: url('../brain_origin.png');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  clip-path: inset(0 50% 0 0);   /* keep only left half */
}

/* Right hemisphere image — overlaid on right half */
.about-section--dark .brain-right {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   RIGHT-BRAIN NAV BARS — image stays fixed, bar extends rightward,
   label always visible on the LEFT (over the image)
   ============================================================ */
.about-section--dark .nav-bars {
  /* === Sizing (0.6× of prior height) === */
  --bar-h:         clamp(50px, 4.2vw, 64px);             /* HEIGHT only — slimmer */
  --bar-img-w:     clamp(220px, 17.5vw, 280px);          /* WIDTH unchanged (decoupled from height — image stretches more horizontally) */
  --bar-extend:    clamp(90px, 8.4vw, 144px);            /* extra width revealed on hover (back to previous) */
  --bar-w-max:     calc(var(--bar-img-w) + var(--bar-extend));
  --bar-overlap:   14px;

  /* === Motion === */
  --t-dur:         460ms;
  --t-ease:        cubic-bezier(0.22, 1, 0.36, 1);

  /* === Position === */
  --stack-right:   7%;                                   /* sits over the right-brain illustration */

  /* === Label (scaled down to match smaller bars) === */
  --label-pad-l:   18px;
  --label-size:    clamp(9px, 0.75vw, 11px);
  --label-letter:  0.22em;

  position: absolute;
  right: var(--stack-right);
  top: 50%;
  transform: translateY(-50%);
  width: var(--bar-w-max);                               /* fixed container = max bar width on hover */
  display: flex;
  flex-direction: column;
  align-items: flex-start;                               /* bars anchored LEFT → grow rightward */
  z-index: 5;
  pointer-events: auto;
}

.about-section--dark .bar {
  position: relative;
  display: block;
  width: var(--bar-img-w);                               /* base width = image natural width */
  height: var(--bar-h);                                  /* fixed height — image height never changes */
  background-size: 100% 100%;                            /* image fills the bar → stretches horizontally as width grows */
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--label-size);
  letter-spacing: var(--label-letter);
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition:
    width var(--t-dur) var(--t-ease),
    filter 240ms ease;
}

/* Overlap: every bar after the first lifts up to slightly cover the previous one's bottom */
.about-section--dark .bar + .bar {
  margin-top: calc(-1 * var(--bar-overlap));
}

/* Stacking: later bars sit ON TOP → upper bar's bottom edge is covered by next bar's top edge */
.about-section--dark .bar:nth-child(1) { z-index: 1; }
.about-section--dark .bar:nth-child(2) { z-index: 2; }
.about-section--dark .bar:nth-child(3) { z-index: 3; }
.about-section--dark .bar:nth-child(4) { z-index: 4; }

.about-section--dark .bar:hover,
.about-section--dark .bar:focus-visible {
  width: 100%;                                           /* extends right to container's full width */
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  z-index: 10;
  outline: none;
}

/* Variants — image fills the bar and stretches with it; no synthetic background fill */
.about-section--dark .bar--blue   { background-image: url('../blue_nav.png');   color: #ffffff; }
.about-section--dark .bar--black  { background-image: url('../black_nav.png');  color: #ffffff; }
.about-section--dark .bar--yellow { background-image: url('../yellow_nav.png'); color: #ffffff; }
.about-section--dark .bar--green  { background-image: url('../green_nav.png');  color: #ffffff; }

/* Label — always visible, anchored LEFT, sits over the image */
.about-section--dark .bar .label {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--bar-img-w);                               /* spans only the image area */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: var(--label-pad-l);
  color: #ffffff !important;                              /* pure white — overrides generic .about-section--dark .label rule */
  opacity: 1 !important;                                  /* overrides generic 0.55 opacity */
  font-weight: 700;                                       /* explicit bold (don't rely on inheritance) */
  text-align: left;
  line-height: 1.18;
  pointer-events: none;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--t-dur) var(--t-ease);
}

/* On hover, label stretches rightward in sync with the bar */
.about-section--dark .bar:hover .label,
.about-section--dark .bar:focus-visible .label {
  transform: scaleX(1.18);
}

/* ─── Mobile (≤900px) ─────────────────────────────────
   Desktop layout preserved: brain-frame keeps wide aspect with a scale
   transform, nav-bars stay absolutely positioned over the right
   hemisphere. Bar dimensions are tuned so labels never wrap to a 3rd
   line at narrow viewports. */
@media (max-width: 900px) {
  .about-section.about-section--dark {
    padding: 60px 24px;
  }
  /* Brain-frame: keep wide aspect; bigger scale so brain reads larger
     on phones (1.5× the prior 1.25 = ~1.9). Section overflow:hidden
     clips horizontal spill. */
  .about-section--dark .brain-frame {
    transform: scale(1.9);
    transform-origin: center;
  }
  /* Nav-bars sit over the right hemisphere. The brain-frame parent has
     transform: scale(1.9) on mobile which would otherwise blow up the
     label glyphs 1.9× as well. Counter-scale the nav-bars by 1/1.9
     (≈0.526) so the bars + labels render at their declared CSS sizes
     visually, while the brain visual stays large. translateY(-50%)
     is preserved from the base rule's vertical centering. */
  .about-section--dark .nav-bars {
    transform: translateY(-50%) scale(0.526);
    transform-origin: right center;
    --bar-h:          39px;
    --bar-img-w:      221px;
    --bar-extend:     47px;
    --bar-overlap:    10px;
    --label-size:     13px;
    --label-letter:   0.14em;
    --label-pad-l:    13px;
    --stack-right:    7%;
  }
  .about-section--dark .bar .label {
    padding: 0 8px 0 var(--label-pad-l);
    line-height: 1.1;
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .about-section--dark .nav-bars {
    --bar-h:       34px;
    --bar-img-w:   195px;
    --bar-extend:  39px;
    --bar-overlap: 9px;
    --label-size:  12px;
    --label-pad-l: 10px;
  }
}
.about-section--dark .about-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 44px;
  color: #F3EFE7;
}
.about-section--dark .label   { color: #F3EFE7; opacity: 0.55; }
.about-section--dark h2       { color: #F3EFE7; }
.about-section--dark .essay   { color: #E5E0D6; }
.about-section--dark .bio     {
  color: #B5B0A4;
  border-top-color: rgba(243, 239, 231, 0.18);
}
.about-section--dark .bio .k  { opacity: 0.45; color: #B5B0A4; }

/* ============================================================
   PAGE WRAPPER (essay/builds/etc.)
   ============================================================ */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 32px 80px;
}
.page h1 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.page .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 40px;
}
.page-body {
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  line-height: 1.7;
}
.page-body p { margin: 0 0 18px; }
.page-body h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 40px 0 16px;
  letter-spacing: -0.01em;
}
.page-body a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   ESSAY LIST
   ============================================================ */
.essay-list { list-style: none; padding: 0; margin: 0; }
.essay-list li {
  padding: 22px 0;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.2);
}
.essay-list a {
  text-decoration: none;
  color: var(--ink-dark);
  display: block;
}
.essay-list a:hover { color: var(--cobalt); }
.essay-list .title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.essay-list .date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.5;
}

/* ============================================================
   TECHNOLOGY & HUMAN EXPERIENCE — section after About
   Layout: title upper-left, 3 post cards + "More →" in a row below
   ============================================================ */
.th-section {
  min-height: calc(100vh - var(--nav-h));
  max-width: none;
  width: 100%;
  background: #0c0c0c;                                       /* dark CRT-wall ambient */
  color: #ffffff;
  padding: clamp(96px, 9vw, 160px) clamp(40px, 5vw, 100px) clamp(80px, 8vw, 140px);
  position: relative;
  overflow: hidden;
}
.th-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 100px);
  align-items: center;
  min-height: calc(100vh - var(--nav-h) - clamp(176px, 17vw, 300px));
}
@media (max-width: 900px) {
  .th-inner { grid-template-columns: 1fr; }
}

/* HUD top strip — section metadata */
.th-hud {
  position: absolute;
  top: clamp(40px, 4vw, 60px);
  left: clamp(40px, 5vw, 100px);
  right: clamp(40px, 5vw, 100px);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 5;
}
.th-hud .val { color: #ffffff; }

.th-col-left {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 40px);
}
.th-col-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 56px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.12;
  text-align: left;
  margin: 0;
  color: #ffffff;
}
.th-lede {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  max-width: 460px;
  margin: 0;
}

/* Posts list — diagnostic-style result rows on dark */
.th-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px dashed rgba(255, 255, 255, 0.20);
  margin-top: 6px;
}
.th-row {
  display: grid;
  grid-template-columns: 44px 100px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.20);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #ffffff;
  transition: padding-left .35s cubic-bezier(.22, 1, .36, 1), color .25s;
}
.th-row:hover { padding-left: 12px; color: #03B1F7; }
.th-row .idx { font-weight: 700; color: #ffffff; }
.th-row .date { color: rgba(255, 255, 255, 0.45); text-transform: uppercase; }
.th-row .title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: inherit;
}
.th-row .read {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  transition: color .25s;
}
.th-row:hover .read { color: #03B1F7; }

/* Right column — CRT wall image with scanline + vignette overlay */
.th-mosaic {
  width: 100%;
  max-width: 540px;
  aspect-ratio: 736 / 901;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  isolation: isolate;
}
.th-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05) brightness(0.85);
}
/* scanlines */
.th-mosaic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.0) 0,
    rgba(255, 255, 255, 0.0) 1px,
    rgba(0, 0, 0, 0.45) 2px,
    rgba(0, 0, 0, 0.45) 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.55;
}
/* vignette */
.th-mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}

/* ============================================================
   TECH-HUMAN section override — light cream background to match the
   tech_*.png artifact images. All text inverted from white to ink.
   Higher specificity (section#id.class) than the base .th-section.
   ============================================================ */
section#tech-human.th-section { background: #F6EEE5; color: var(--ink-dark); }
#tech-human .th-hud { color: rgba(26, 26, 26, 0.55); }
#tech-human .th-hud .val { color: var(--ink-dark); }
#tech-human .th-title { color: var(--ink-dark); }
#tech-human .th-lede { color: rgba(26, 26, 26, 0.72); }
#tech-human .th-rows { border-top-color: rgba(26, 26, 26, 0.25); }
#tech-human .th-row { color: var(--ink-dark); border-bottom-color: rgba(26, 26, 26, 0.25); }
#tech-human .th-row .idx { color: var(--ink-dark); }
#tech-human .th-row .date { color: rgba(26, 26, 26, 0.5); }
#tech-human .th-row .read { color: rgba(26, 26, 26, 0.55); }
#tech-human .th-row:hover { color: #03B1F7; }
#tech-human .th-row:hover .read { color: #03B1F7; }

/* ─── Title rainbow — per-letter color cycling sweep ─────
   Hybrid of variant A (per-letter solid color), B (sharp boundaries,
   no gradient blur within glyph), and D (animated sweep over time).
   Each .ch span declares its index via --i; the animation-delay is
   derived as (--i × -0.36s) so consecutive glyphs sit at staggered
   phases of the 6-color cycle. Net effect: rainbow flows along the
   title text. */
#tech-human .th-title--rainbow .ch {
  display: inline-block;
  color: var(--ink-dark);
  animation: rainbowCycle 5.4s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.36s);
  will-change: color;
}
@keyframes rainbowCycle {
  0%,  100% { color: #61BB46; }   /* green */
  16.66%    { color: #FDB827; }   /* yellow */
  33.33%    { color: #F5821F; }   /* orange */
  50%       { color: #E03A3E; }   /* red */
  66.66%    { color: #963D97; }   /* purple */
  83.33%    { color: #009DDC; }   /* blue */
}
/* the non-breaking space between HUMAN and EXPERIENCE keeps width but
   should not flash colors */
#tech-human .th-title--rainbow .ch-sp {
  animation: none;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  #tech-human .th-title--rainbow .ch {
    animation: none;
    color: var(--ink-dark);
  }
}

/* ─── Conveyor (right column of #tech-human) ────────────
   3 stacked rows of tech_*.png that scroll horizontally:
   row-1 right, row-2 left, row-3 right (alternating)
   speeds: slow / medium / slow */
#tech-human .conveyor {
  position: relative;
  width: 100%;
  max-width: 648px;            /* 1.2× of previous 540px */
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  isolation: isolate;
  /* No border per design spec */
}
#tech-human .conveyor::after {
  /* gentle edge fade so images don't pop in/out hard at the rails */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(246, 238, 229, 1) 0,
    rgba(246, 238, 229, 0) 5%,
    rgba(246, 238, 229, 0) 95%,
    rgba(246, 238, 229, 1) 100%);
}
#tech-human .conveyor .row {
  flex: 1;
  position: relative;
  overflow: hidden;
}
#tech-human .conveyor .belt {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  will-change: transform;
  animation: convScroll var(--dur, 40s) linear infinite;
}
#tech-human .conveyor .belt img {
  height: 100%;
  width: auto;
  display: block;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* Direction + speed per row.
   reverse on row 1, 3 = belt scrolls RIGHT.
   forward on row 2     = belt scrolls LEFT.
   speeds slow/medium/slow. */
#tech-human .conveyor .row-1 .belt { --dur: 55s; animation-direction: reverse; }
#tech-human .conveyor .row-2 .belt { --dur: 32s; }
#tech-human .conveyor .row-3 .belt { --dur: 60s; animation-direction: reverse; }

/* Conveyor keeps running on hover (paused-on-hover rule removed) */

@keyframes convScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  #tech-human .conveyor .belt { animation: none !important; }
}
/* ─── Mobile (≤900px) — Tech-style sections ───────────
   Issues being fixed:
   1. Row grid (44px / 100px / 1fr / auto) compresses title to a
      4-line stack on phones.
   2. Title wraps the slash-glyph span to a new line because line-height
      0 + inline-block makes it overflow row height.
   3. Mosaic image is 360px wide but the column container is narrower,
      causing alignment drift. */
@media (max-width: 900px) {
  .th-section {
    padding: 80px 24px 60px;
  }
  .th-hud {
    top: 28px;
    left: 24px;
    right: 24px;
    font-size: 9px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .th-inner {
    gap: 40px;
    min-height: 0;
  }
  .th-title {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.05;
  }
  /* Keep the slash on the same line as the next word; allow soft break
     between the two words instead. */
  .th-title br { display: none; }
  .th-title .amp {
    vertical-align: -0.06em;
    margin: 0 0.16em;
  }

  .th-rows { margin-top: 0; }
  .th-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 6px;
    padding: 18px 0;
    align-items: start;
  }
  .th-row:hover { padding-left: 0; }
  .th-row .idx,
  .th-row .date {
    display: inline;
    font-size: 10px;
  }
  .th-row .idx { margin-right: 10px; }
  .th-row .title {
    grid-row: 2;
    font-size: 17px;
    line-height: 1.3;
  }
  .th-row .read {
    grid-row: 3;
    justify-self: start;
    margin-top: 4px;
  }

  .th-mosaic {
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }
}
/* Separator slash — inline SVG sized to match the uppercase cap-height so
   the slash visually spans exactly from baseline to cap-line of the text
   next to it. preserveAspectRatio="none" stretches the line endpoints to
   the box corners; non-scaling-stroke keeps the stroke width uniform. */
.th-title .amp {
  display: inline-block;
  width: 0.5em;
  height: 0.72em;              /* = JetBrains Mono Bold cap-height ratio */
  vertical-align: baseline;    /* box bottom sits on the text baseline */
  margin: 0 0.18em 0 0.06em;
  color: #03B1F7;
  line-height: 0;
}
.th-title .amp svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.th-title .amp svg line {
  stroke-linecap: square;   /* square-cap mark instead of rounded */
}
/* Keep slash + word on the same line — prevents 3-line wrap when column is narrow */
.th-title .th-title-line {
  white-space: nowrap;
}

/* Tech-section illustration — bottom-right, 2× larger */
.th-illust {
  position: absolute;
  right: clamp(80px, 9vw, 200px);   /* shifted further left */
  bottom: clamp(40px, 5vw, 100px);
  width: clamp(308px, 34vw, 644px);   /* 0.7× of prior 440-920 */
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.th-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: clamp(16px, 1.6vw, 28px);
  align-items: stretch;
  /* leave room on the right for the computer-stack illustration */
  padding-right: clamp(40px, 22vw, 440px);
}

.th-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.th-card-thumb {
  aspect-ratio: 1 / 1;        /* square, compact */
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 10px;
  border: 1px solid rgba(26, 26, 26, 0.10);
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.th-card:hover .th-card-thumb {
  transform: translateY(-4px);
}

/* Placeholder card (no thumbnail) — white tone, title prominent */
.th-card-thumb--placeholder {
  display: flex;
  align-items: flex-end;
  padding: clamp(14px, 1.4vw, 22px);
  background:
    linear-gradient(135deg, #ffffff 0%, #fafaf7 60%, #f3f1ec 100%);
  position: relative;
}
.th-card-thumb--placeholder::before {
  content: '';
  position: absolute;
  top: clamp(14px, 1.4vw, 22px);
  left: clamp(14px, 1.4vw, 22px);
  width: 18px;
  height: 1.5px;
  background: var(--ink-dark);
  opacity: 0.35;
}
.th-placeholder-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 16px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink-dark);
  text-align: left;
}

.th-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.th-card-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
}
.th-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 0.75vw, 13px);
  line-height: 1.3;
  color: var(--ink-dark);
}

/* "More →" button column */
.th-more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink-dark);
  border-left: 1px dashed rgba(26, 26, 26, 0.28);
  padding: 0 0 0 clamp(20px, 2vw, 32px);
  margin-left: clamp(4px, 0.6vw, 12px);
  min-width: clamp(72px, 7vw, 104px);
  transition: color 0.2s, transform 0.3s var(--t-ease, ease);
}
.th-more:hover { color: var(--cobalt); }
.th-more:hover .th-arrow { transform: translateX(6px); }
.th-more-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.th-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   FOOTER (Contact)
   ============================================================ */
.site-footer {
  /* full-bleed so the ground image stretches edge-to-edge */
  max-width: none;
  width: 100%;
  padding: 56px clamp(28px, 4vw, 80px) clamp(180px, 22vw, 360px);
  border-top: 1px dashed rgba(26, 26, 26, 0.25);
  /* Footer typography — Space Grotesk (matches hero body) */
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.8;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background-image: url('../footer.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;     /* preserves footer.png aspect; bottom-anchored ground */
  background-color: var(--paper);
  position: relative;
  z-index: 1;
}
.site-footer a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.site-footer a:hover { color: #ffffff; text-decoration: none; }
.site-footer .contact-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-footer .contact-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.9;
}
.site-footer .col h4 {
  margin: 0 0 12px;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 1;
  font-weight: 400;
  margin: 0 0 10px;
}

/* ============================================================
   RESPONSIVE — mobile / tablet
   ============================================================ */
@media (max-width: 900px) {
  .nav { padding: 16px 24px; flex-wrap: wrap; }
  .nav a { margin-left: 16px; font-size: 10px; }

  .hero-section { --hero-base: 28px; }
  .hero-area { padding: 100px 24px 24px; padding-top: 120px; }
  .hero { --base: 28; max-width: 100%; }

  .obj-video {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 40px;
  }

  .about-section { padding: 80px 24px; }
  .about-section--dark { padding: 0; }
  .about-section--dark .about-content { padding: 80px 24px; }
  .about-section h2 { font-size: 32px; }
  .about-section .bio .row { flex-direction: column; gap: 2px; }
  .about-section .bio .k { min-width: 0; }

  .page { padding: 80px 24px 60px; }
  .page h1 { font-size: 34px; }
  .page-body { font-size: 17px; }

  .site-footer { grid-template-columns: 1fr; padding: 40px 24px; }
}

@media (max-width: 480px) {
  .hero-section { --hero-base: 22px; }
  .hero { --base: 22; }
}

/* ============================================================
   REDUCED MOTION (accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .kw-tech::before, .kw-tech::after,
  .kw-tech > .c1, .kw-tech > .c2 { animation: none !important; }
  .hero .tchar { opacity: 1; transition: none; }
  .kw-human { background-size: 100% 100% !important; animation: none !important; }
}

/* ============================================================
   ABOUT — ASCII motion bg (yuri lee binary tile + 8-lang greeting cycle)
   Renders behind brain composition. Driven by assets/js/about-ascii-bg.js
   ============================================================ */
.about-section--dark .about-ascii-bg {
  position: absolute;
  /* Extend to section's border edges (compensate section padding 80 44).
     Media queries below override left/right for narrow aspect + reset
     entirely on mobile where section padding becomes 0. */
  top: -80px;
  bottom: -80px;
  left: -44px;
  right: -44px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.about-section--dark .about-ascii-bg .aab-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.about-section--dark .about-ascii-bg .aab-row {
  font-family: 'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans Arabic', 'Noto Sans Devanagari', monospace;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
  white-space: pre;
  color: rgba(26, 26, 26, 0.18);
  height: 22px;
  overflow: hidden;
  direction: ltr;
  unicode-bidi: plaintext;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
}
.about-section--dark .about-ascii-bg .aab-ev {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  white-space: pre;
  color: rgba(26, 26, 26, 1);
  height: 22px;
  line-height: 22px;
  direction: ltr;
  unicode-bidi: plaintext;
}
.about-section--dark .about-ascii-bg .aab-ev.l1 { color: rgba(26, 26, 26, 0.55); }
.about-section--dark .about-ascii-bg .aab-ev.l2 { color: rgba(26, 26, 26, 0.38); }
/* Lift brain composition above the ASCII bg */
.about-section--dark .brain-frame { z-index: 1; }

/* ── Narrow viewports (squarer than 16:9) — reduce side padding ── */
@media (max-aspect-ratio: 16/9) {
  .nav            { padding-left: 20px; padding-right: 20px; }
  .hero-area      { padding-left: 20px; padding-right: 20px; }
  .about-section  { padding-left: 20px; padding-right: 20px; }
  .about-section--dark { padding-left: 20px; padding-right: 20px; }
  .about-section--dark .about-ascii-bg { left: -20px; right: -20px; }
}

/* Mobile: section padding is reset to 0, so the ASCII bg matches section bounds.
   Font sizes here must mirror about-ascii-bg.js IS_MOBILE constants so the
   JS-measured CHAR_WIDTH lines up with the rendered grid. */
@media (max-width: 900px) {
  .about-section--dark .about-ascii-bg {
    top: 0; right: 0; bottom: 0; left: 0;
  }
  .about-section--dark .about-ascii-bg .aab-row {
    font-size: 10px;
    line-height: 14px;
    height: 14px;
  }
  .about-section--dark .about-ascii-bg .aab-ev {
    height: 14px;
    line-height: 14px;
  }
}