@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #080808;
  --fg: #e8e8e8;
  --dim: #333;
  --dimmer: #1a1a1a;
  --mono: 'JetBrains Mono', monospace;
}

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  cursor: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Restore default cursor on touch devices — no custom cursor needed */
@media (hover: none) and (pointer: coarse) {
  html, body { cursor: auto; }
  .cursor-dot { display: none !important; }
  .mouse-readout { display: none !important; }
  .top-ui__name,
  .top-ui__nav a,
  .contact-back,
  .about-back,
  .work-back,
  .work-item,
  .contact-item { cursor: pointer; }
}

/* ── Page — CSS perspective so the canvas has real depth ── */
.page {
  position: relative;
  width: 100%; height: 100vh;
  background: #000;
  isolation: isolate;
  perspective: 1200px;
  overflow: hidden;
}

/* subtle radial center glow, matching jungheonlee */
.page::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.022) 0%,
    rgba(255,255,255,0.008) 20%,
    transparent 55%);
}

/* top/bottom vignette */
.page::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.14) 0%,
    transparent 16%,
    transparent 84%,
    rgba(0,0,0,0.18) 100%);
}

#sceneCanvas {
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 1;
}

/* ── Top UI ── */
.top-ui {
  position: fixed;
  top: 18px; left: 20px; right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 99;
  pointer-events: none;
}

.top-ui__name {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  background: none;
  border: none;
  cursor: none;
  pointer-events: all;
  font-family: inherit;
  text-shadow: 0 0 6px rgba(255,255,255,0.08);
  transition: color 0.3s, text-shadow 0.3s;
}
.top-ui__name:hover {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 0 10px rgba(255,255,255,0.14);
}

.top-ui__nav {
  display: flex;
  gap: 28px;
  pointer-events: all;
}

.top-ui__nav a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  transition: color 0.25s;
}
.top-ui__nav a:hover { color: rgba(255,255,255,0.88); }

/* ── UI layer hint ── */
.ui-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.ui-layer__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vw, 32px);
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.2);
  white-space: nowrap;
  transition: opacity 0.4s, transform 0.4s;
}
.ui-layer__hint.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

/* ── Mouse readout ── */
.mouse-readout {
  position: fixed;
  bottom: 18px; right: 20px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.22);
  z-index: 8;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ── Action log ── */
.action-log {
  position: fixed;
  bottom: 18px; left: 20px;
  z-index: 8;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.action-log__entry {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.76);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.25s, transform 0.25s;
}
.action-log__entry::before {
  content: '> ';
  color: rgba(255,255,255,0.3);
}
.action-log__entry.visible {
  opacity: 0.76;
  transform: translateY(0);
}
.action-log__sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.32);
  margin-top: 2px;
  padding-left: 16px;
}

/* ── Square difference-blend cursor (jungheonlee style) ── */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border: 1.5px solid rgba(255,255,255,1);
  background: rgba(255,255,255,1);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform, opacity;
  transition: width 0.18s, height 0.18s, opacity 0.2s;
}
.cursor-dot.hovering {
  width: 48px; height: 48px;
}

/* ── Loading screen ── */
.loading-screen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loading-screen.out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-screen__text {
  display: inline-flex;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.88);
}

.loading-screen__char {
  display: inline-block;
  opacity: 0;
  animation: charBlink 1s step-end infinite;
  will-change: opacity;
}

/* staggered via inline style animation-delay */
@keyframes charBlink {
  0%, 49.999% { opacity: 0; }
  50%, 100%   { opacity: 1; }
}

@media (max-width: 520px) {
  .top-ui { top: 14px; left: 14px; right: 14px; }
  .mouse-readout { right: 14px; bottom: 14px; }
  .action-log { left: 14px; bottom: 14px; }
}

/* ── Mobile / touch global fixes ────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Nav — bigger tap targets */
  .top-ui__nav { gap: 20px; }
  .top-ui__nav a { padding: 8px 0; font-size: 0.7rem; }
  .top-ui__name  { padding: 8px 0; }

  /* Action log — hide on touch (no hover state to fill it) */
  .action-log { display: none; }

  /* Contact overlay */
  .contact-line-wrap { padding: 0 6vw; }
  .contact-anchor { font-size: clamp(2rem, 10vw, 3.8rem); }
  .contact-track { gap: clamp(28px, 8vw, 60px); flex-wrap: wrap; }

  /* About overlay — stack to single column */
  .about-layout__title    { position: relative; left: auto; top: auto; width: 100%; margin-top: 10vh; }
  .about-layout__statement{ position: relative; left: auto; top: auto; width: 100%; margin-top: 6vh; }
  .about-layout__cv       { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 7vh; margin-bottom: 32px; }
  .about-title { font-size: clamp(2.2rem, 11vw, 4rem); }
  .about-layout { padding: 10vh 7vw 8vh; }

  /* Work overlay — narrower items, more padding for thumb reach */
  .work-track { padding: 0 38vw; }
  .work-item { width: min(75vw, 320px); margin: 0 clamp(20px, 6vw, 48px); }
  .work-item__title { font-size: clamp(1.8rem, 9vw, 3rem); }
  .work-back, .about-back, .contact-back { font-size: 1.8rem; padding: 8px; }
}

/* ── Contact overlay ─────────────────────────────────────────────── */
.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
              visibility 0.85s cubic-bezier(0.22,1,0.36,1);
}
.contact-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* back arrow */
.contact-back {
  position: fixed;
  top: 20px; right: 24px;
  z-index: 210;
  background: none; border: none;
  color: rgba(255,255,255,0.45);
  font-size: 1.6rem;
  cursor: none;
  font-family: inherit;
  transition: color 0.25s, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.contact-back:hover {
  color: rgba(255,255,255,0.9);
  transform: translateX(-5px);
}

/* centred layout column */
.contact-line-wrap {
  width: 100%;
  padding: 0 10vw;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* big name */
.contact-anchor {
  font-size: clamp(2.4rem, 5.5vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
              transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.contact-overlay.is-open .contact-anchor {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.1s;
}

/* horizontal rule with travelling glow */
.contact-line {
  position: relative;
  width: clamp(180px, 22vw, 360px);
  height: 1px;
  margin: 32px 0 32px;
  background: rgba(255,255,255,0.08);
  overflow: visible;
  opacity: 0;
  transform: scaleX(0.92);
  transform-origin: left center;
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.contact-overlay.is-open .contact-line {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: 0.2s;
}

.contact-line__glow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: -180px;
  width: 180px; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.85) 50%,
    transparent);
  will-change: left;
}

/* contact links row */
.contact-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 8vw, 120px);
  flex-wrap: wrap;
}

.contact-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.32);
  opacity: 0;
  transform: translateY(14px);
  transition: color 0.25s ease, opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
  padding-left: 20px;
}
.contact-overlay.is-open .contact-item {
  opacity: 1;
  transform: translateY(0);
}
.contact-overlay.is-open .contact-item:nth-child(1) { transition-delay: 0.28s; }
.contact-overlay.is-open .contact-item:nth-child(2) { transition-delay: 0.38s; }
.contact-overlay.is-open .contact-item:nth-child(3) { transition-delay: 0.48s; }

/* bullet dot */
.contact-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scale(0.85);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transition: background 0.25s, transform 0.25s;
}
.contact-item:hover::before {
  background: rgba(255,255,255,0.95);
  transform: translateY(-50%) scale(1.3);
}
.contact-item:hover {
  color: rgba(255,255,255,0.95);
}

.contact-item span {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.22);
  transition: color 0.25s;
}
.contact-item:hover span {
  color: rgba(255,255,255,0.55);
}

/* scene blurs out when contact is open */
.page.is-contact-open #sceneCanvas,
.page.is-contact-open .ui-layer,
.page.is-contact-open .action-log,
.page.is-contact-open .mouse-readout {
  opacity: 0;
  filter: blur(12px);
  transform: scale(0.94);
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
              filter 0.85s cubic-bezier(0.22,1,0.36,1),
              transform 0.85s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}

@keyframes glowSweep {
  0%   { left: -180px; }
  100% { left: 100%; }
}

/* ── Work overlay ────────────────────────────────────────────────── */
.work-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
              visibility 0.85s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
}
.work-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.work-back {
  position: fixed;
  top: 20px; right: 24px;
  z-index: 210;
  background: none; border: none;
  color: rgba(255,255,255,0.45);
  font-size: 1.6rem;
  cursor: none;
  font-family: inherit;
  transition: color 0.25s, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.work-back:hover { color: rgba(255,255,255,0.9); transform: translateX(-5px); }

/* top bar */
.work-header {
  position: fixed;
  top: 20px; left: 24px;
  z-index: 210;
  display: flex;
  align-items: baseline;
  gap: 20px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.work-overlay.is-open .work-header {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.15s;
}
.work-header__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.work-header__count {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.22);
}

/* scroll hint */
.work-scroll-hint {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.work-overlay.is-open .work-scroll-hint { opacity: 1; transition-delay: 0.5s; }
.work-scroll-hint.hidden { opacity: 0 !important; }

/* track — horizontal flex, JS drives translateX */
.work-track-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.work-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  will-change: transform;
  pointer-events: auto;
  padding: 0 40vw; /* wide padding so first/last item can centre */
}

/* individual item */
.work-item {
  --focus-strength: 0;
  flex: 0 0 auto;
  width: clamp(280px, 32vw, 480px);
  margin: 0 clamp(40px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: inherit;
  opacity: calc(0.28 + (var(--focus-strength) * 0.72));
  filter: brightness(calc(0.5 + (var(--focus-strength) * 0.5)));
  transform: translateY(calc((1 - var(--focus-strength)) * 18px));
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              filter  0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.55s cubic-bezier(0.22,1,0.36,1);
  cursor: none;
}
.work-item__index {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 18px;
}
.work-item__title {
  font-size: clamp(2rem, 4.2vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.96;
  color: rgba(255,255,255,0.92);
  margin-bottom: 24px;
}
.work-item__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.work-item__lang {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.work-item__desc {
  font-size: 0.82rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.55);
}
.work-item__rule {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 16px;
}
.work-item__cta {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  transition: color 0.25s;
}
.work-item:hover .work-item__cta { color: rgba(255,255,255,0.75); }

/* scene blur behind work panel */
.page.is-work-open #sceneCanvas,
.page.is-work-open .ui-layer,
.page.is-work-open .action-log,
.page.is-work-open .mouse-readout {
  opacity: 0;
  filter: blur(12px);
  transform: scale(0.94);
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
              filter 0.85s cubic-bezier(0.22,1,0.36,1),
              transform 0.85s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}

@media (max-width: 520px) {
  .work-item { width: min(80vw, 300px); margin: 0 clamp(28px, 10vw, 60px); }
  .work-item__title { font-size: clamp(1.6rem, 8vw, 2.8rem); }
}

/* ── About overlay ───────────────────────────────────────────────── */
.about-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
              visibility 0.85s cubic-bezier(0.22,1,0.36,1);
  overflow-y: auto;
}
.about-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.about-back {
  position: fixed;
  top: 20px; right: 24px;
  z-index: 210;
  background: none; border: none;
  color: rgba(255,255,255,0.45);
  font-size: 1.6rem;
  cursor: none;
  font-family: inherit;
  transition: color 0.25s, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.about-back:hover {
  color: rgba(255,255,255,0.9);
  transform: translateX(-5px);
}

.about-layout {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 12vh 6vw 10vh;
}

.about-layout__title {
  position: absolute;
  left: 11.4vw;
  top: 16vh;
  width: min(46vw, 760px);
}

.about-title {
  margin: 0;
  gap: 0.04em;
  font-size: clamp(2.7rem, 5.8vw, 6.5rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.95);
  display: flex;
  flex-direction: column;
}

.about-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 22px, 0);
  will-change: transform, opacity, filter;
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
              filter  0.75s cubic-bezier(0.22,1,0.36,1),
              transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.about-overlay.is-content-visible .about-word:nth-child(1) {
  opacity: 1; filter: blur(0); transform: translateZ(0);
  transition-delay: 0.08s;
}
.about-overlay.is-content-visible .about-word:nth-child(2) {
  opacity: 1; filter: blur(0); transform: translateZ(0);
  transition-delay: 0.18s;
}

.about-layout__statement {
  position: absolute;
  left: 12vw;
  top: 49vh;
  width: min(480px, 38vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
              filter  0.75s cubic-bezier(0.22,1,0.36,1),
              transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.about-overlay.is-content-visible .about-layout__statement {
  opacity: 1; filter: blur(0); transform: translateZ(0);
  transition-delay: 0.30s;
}
.about-layout__statement p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.72);
}

.about-layout__cv {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  width: min(360px, 28vw);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about-block {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
              filter  0.65s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.about-overlay.is-content-visible .about-block:nth-child(1) {
  opacity: 1; filter: blur(0); transform: translateZ(0);
  transition-delay: 0.40s;
}
.about-overlay.is-content-visible .about-block:nth-child(2) {
  opacity: 1; filter: blur(0); transform: translateZ(0);
  transition-delay: 0.52s;
}
.about-overlay.is-content-visible .about-block:nth-child(3) {
  opacity: 1; filter: blur(0); transform: translateZ(0);
  transition-delay: 0.64s;
}
.about-block h2 {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.about-block p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.68;
  color: rgba(255,255,255,0.78);
}

/* scene blurs behind about panel too */
.page.is-about-open #sceneCanvas,
.page.is-about-open .ui-layer,
.page.is-about-open .action-log,
.page.is-about-open .mouse-readout {
  opacity: 0;
  filter: blur(12px);
  transform: scale(0.94);
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
              filter 0.85s cubic-bezier(0.22,1,0.36,1),
              transform 0.85s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}

@media (max-width: 900px) {
  .about-layout__title { position: relative; left: auto; top: auto; width: 100%; margin-top: 8vh; }
  .about-layout__statement { position: relative; left: auto; top: auto; width: min(520px,100%); margin-top: 7vh; }
  .about-layout__cv { position: relative; right: auto; bottom: auto; width: min(420px,100%); margin-top: 9vh; margin-bottom: 28px; }
  .about-title { font-size: clamp(2.3rem, 8vw, 4.8rem); }
}
@media (max-width: 520px) {
  .about-layout { padding: 11vh 14px 28px; }
  .about-layout__title { margin-top: 7vh; }
  .about-layout__statement { margin-top: 6vh; gap: 14px; }
  .about-layout__cv { margin-top: 7vh; gap: 18px; }
}