/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== Design Tokens — Figma: 🌟 LYDIA 🌟 (node 5317:37279) ===== */
:root {
  /* Background */
  --color-bg:           #ffffff;
  --color-bg-alt:       #f5f5f7;
  --color-surface:      #f0f0f4;
  --color-border:       rgba(0, 0, 0, 0.08);

  /* Text — Figma */
  --color-text:         #121213;   /* rgba(18,18,19) */
  --color-muted:        #646464;   /* rgba(100,100,100) — nav Off */
  --color-muted-2:      #8c8c8c;   /* rgba(140,140,140) */
  --color-text-sub:     #424751;   /* About body text — Figma */
  --color-text-date:    #898989;   /* About dates — Figma */
  --color-line-light:   #d7d7d7;   /* About dividers — Figma */

  /* Disabled work card — Figma */
  --color-disabled-tag:   #86898e;
  --color-disabled-title: #86898e;
  --color-disabled-desc:  #a9abaf;

  /* Custom cursor */
  --cursor-color: #121213;
  --color-divider:      #bcbcbc;   /* Strength open divider */

  /* Footer — Figma */
  --color-footer-bg:    #121213;
  --color-footer-text:  #c2c2cc;   /* rgba(194,194,204) */

  /* Accent */
  --color-accent:       #5b4ff0;
  --color-accent-hover: #7c6fff;

  /* GNB */
  --gnb-height:         56px;
  --gnb-top:            0px;

  /* Misc */
  --radius:             14px;
  --radius-sm:          8px;
  --shadow:             0 2px 16px rgba(0, 0, 0, 0.07);
  --shadow-lg:          0 8px 40px rgba(0, 0, 0, 0.10);
  --transition:         0.22s ease;

  /* Typography — label token */
  --font-label-size:    13px;
  --font-label-weight:  500;

  /* Work / resource cards (Modulor-style) */
  --work-card-link-radius:  20px;
  --work-card-media-radius: 20px;
  --work-card-frame:        rgba(18, 18, 19, 0.14);
  --work-card-gap:          40px;
  --work-card-stack:        16px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* =============================================
   GNB — Figma spec (node 5442-29298)
   Full-width bar, border-bottom only (1px)
   Inner content: max-width 1200px, centered, padding L/R 20px
   Desktop:  padding top=20 bottom=12
   Tablet/Mobile: padding top=12 bottom=8
   bg: rgba(255,255,255,0.5), backdrop-filter blur(12px)
   Logo: Manrope 800 20px
   Nav: Manrope 500 14px, touch target min-height 44px
   ============================================= */
.gnb {
  /* Bar extends this far ABOVE the viewport (same bg + blur), so the springy
     show/hide animation can overshoot without ever opening a gap at the top. */
  --gnb-bleed: 32px;
  position: fixed;
  top: calc(-1 * var(--gnb-bleed));
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #121213;
  padding: calc(16px + var(--gnb-bleed)) 0 12px;
  transform: translateY(0);
}

.gnb--hidden {
  transform: translateY(-110%);
}

.gnb__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Logo — Manrope 800 20px, left col */
.gnb__logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--color-text);
  flex-shrink: 0;
}

/* Nav — center col */
.gnb__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Let's Talk CTA — right col */
.gnb__cta {
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 112px;
  height: 38px;
  padding: 0;
  background: var(--color-text);
  color: #fff;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--transition), color var(--transition);
}

.gnb__cta:hover {
  background: #FFCD00;
  color: #121213;
}

.gnb__cta-default,
.gnb__cta-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  flex-shrink: 0;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.gnb__cta:hover .gnb__cta-default,
.gnb__cta:hover .gnb__cta-hover {
  transform: translateY(-38px);
}

/* Nav item — 14px 500, min touch target 44px */
.gnb__nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  min-height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
  white-space: nowrap;
}

/* Reserve the ExtraBold (800) width so hover never shifts layout */
.gnb__nav a::after {
  content: attr(data-text);
  font-size: 14px;
  font-weight: 800;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Resume has icon (12px) + gap (4px) — add that space to the reserved width */
.gnb__nav a:has(.gnb__nav-row)::after {
  padding-right: 16px;
}

/* Resume nav button — 120×48 per Figma */
.gnb__nav a:has(.gnb__nav-row) {
  width: 120px;
  height: 48px;
  min-height: 48px;
  align-items: flex-start;
}

/* Inline wrapper for icon + text (Resume) */
.gnb__nav-row {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Nav hover / active */
.gnb__nav a.active {
  color: var(--color-text);
  font-weight: 600;
}

/* Hover: ExtraBold only (no color effect) */
.gnb__nav a:hover {
  color: var(--color-text);
  font-weight: 800;
}

/* Hamburger — hidden on desktop, shown on mobile */
.gnb__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
}

.gnb__hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.gnb__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.gnb__hamburger.open span:nth-child(2) { opacity: 0; }
.gnb__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav — dropdown below GNB bar */
.gnb__mobile-nav {
  display: none;
  position: fixed;
  top: calc(var(--gnb-height) + var(--gnb-bleed));   /* positioned inside .gnb (transformed) */
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  flex-direction: column;
  align-items: flex-end;
  padding: 0 12px 8px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.gnb__mobile-nav.open {
  opacity: 1;
  pointer-events: all;
}

.gnb__mobile-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-muted);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}

.gnb__mobile-nav a:hover {
  color: var(--color-text);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-text);
  color: #fff;
}
.btn--primary:hover {
  background: #2a2a2d;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(18, 18, 19, 0.18);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn--outline:hover {
  border-color: rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* ===== Hero ===== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--gnb-height) + var(--gnb-top) - 8px);
  position: sticky;
  top: 0;
  z-index: 1;
}

.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 90px 40px 80px;
}

.hero__copy {}

.hero__headline {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(24px, 3.6vw, 58px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #121213;
  margin: 0 0 60px;
  text-align: left;
  will-change: transform;
}

/* Inline illustration — scales with headline font-size (80px at 58px desktop headline) */
.hero__emoji {
  display: inline-block;
  width: 1.3793em;
  height: 1.3793em;
  vertical-align: middle;
  object-fit: contain;
  will-change: transform;
}

.hero__sub {
  font-size: clamp(14px, 1.2vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #121213;
  text-align: left;
  margin: 0;
  will-change: transform;
}

.hero__sub strong {
  font-weight: 700;
  color: #121213;
}

/* Scroll cue — solid filled mouse, white dot animates down */
.hero__scroll-cue {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 99;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.hero__scroll-cue--hidden {
  opacity: 0;
  transform: translateY(-12px);
}

.hero__mouse {
  width: 24px;
  height: 38px;
  background: var(--color-text);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 9px;
  box-sizing: border-box;
}

.hero__mouse-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: scroll-cue 1.8s ease-in-out infinite;
}

@keyframes scroll-cue {
  0%   { transform: translateY(0);    opacity: 1; }
  55%  { transform: translateY(16px); opacity: 0; }
  56%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}



/* ===== Section ===== */
.section {
  padding: 100px 0;
}

#work {
  background: #F5F5F5;
  padding: 120px 0 160px;
  /* Pins once its bottom reaches the viewport bottom, so Strength slides up over it
     (the same cover-up as Work over the hero). --work-stick is set by script.js. */
  position: sticky;
  top: var(--work-stick, 0px);
  z-index: 2;
  border-radius: 0;
}

/* Work → Strength dwell: sticky gray hold before Strength slides in */
.work-dwell {
  position: sticky;
  top: 0;
  height: 0;
  background: #F5F5F5;
  z-index: 2;
  pointer-events: none;
}

/* ===== My Strength ===== */
#strength {
  background: #ffffff;
  padding: 120px 0 160px;
  position: relative;
  z-index: 3;
}

#work .section__title {
  font-weight: 500;
}

#strength .section__title {
  font-weight: 600;
}

#strength .section__title {
  margin-bottom: 32px;
}

.strength-list {
  margin-top: 0;
}

.strength-item {
  border-bottom: 1px solid var(--color-text);
}

/* When expanded, bottom border is replaced by the hr inside */
.strength-item:has(.strength-item__body.open) {
  border-bottom: none;
}

.strength-item__btn {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  padding: 56px 0;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Hover image — flips up smoothly on the right of the row */
.strength-item__hover {
  position: absolute;
  top: 50%;
  right: 120px;
  width: 345px;
  transform: translateY(-58%);
  perspective: 1200px;
  pointer-events: none;
  z-index: 2;
}

.strength-item__hover-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.5) rotateY(180deg);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.strength-item:hover .strength-item__hover-img {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
}

@media (hover: none) {
  .strength-item__hover { display: none; }
}

.strength-item__num {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Manrope', sans-serif;
  flex-shrink: 0;
  line-height: 1.5;
}

.strength-item__name {
  font-family: 'Manrope', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.strength-item__sub {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  color: var(--color-text);
  white-space: nowrap;
  padding: 2px 10px;
  background: #fff;
  border: 1px solid #121213;
  border-radius: 100px;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.strength-item__plus {
  margin-left: auto;
  flex-shrink: 0;
  line-height: 0;
  user-select: none;
  position: relative;
  width: 36px;
  height: 36px;
}

.strength-item__icon {
  display: block;
  width: 36px;
  height: 36px;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* + visible by default */
.strength-item__icon--plus {
  opacity: 1;
  transform: rotate(0deg);
}

/* × hidden, slightly rotated */
.strength-item__icon--close {
  opacity: 0;
  transform: rotate(-45deg) scale(0.8);
}

/* Expanded: + fades out rotating, × fades in */
.strength-item__btn[aria-expanded="true"] .strength-item__icon--plus {
  opacity: 0;
  transform: rotate(45deg) scale(0.8);
}

.strength-item__btn[aria-expanded="true"] .strength-item__icon--close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Smooth height expand via CSS grid trick */
.strength-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.48s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.strength-item__body.open {
  grid-template-rows: 1fr;
}

.strength-item__body-inner {
  min-height: 0;
  padding: 0;
}

/* Divider: solid, opacity-animated */
.strength-item__divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 0 0 60px;
  display: block;
  height: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.strength-item__body.open .strength-item__divider {
  opacity: 1;
  transition: opacity 0.32s ease 0.18s;
}

.strength-item__body-text {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  letter-spacing: 0;
  color: #121213;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.strength-item__body.open .strength-item__body-text {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.32s ease 0.22s, transform 0.32s ease 0.22s;
}

.strength-item__body-text strong {
  font-weight: 600;
  color: var(--color-text);
}

.section--alt {
  background: var(--color-bg-alt);
}

.section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.section__title {
  font-family: 'Manrope', sans-serif;
  font-size: 90px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--color-text);
}

.section__title-icon {
  flex-shrink: 0;
  display: block;
}


.section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
  padding-bottom: 0px;
}

.section__header .section__title { margin-bottom: 0; }

.section__link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-accent);
  transition: color var(--transition);
  white-space: nowrap;
}
.section__link:hover { color: var(--color-accent-hover); }

/* ===== Work Grid (2-column, Modulor / Skye-style cards) ===== */
.work-grid,
.all-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--work-card-gap);
  row-gap: 48px;
}

.work-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.work-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--work-card-stack);
  height: 100%;
  border-radius: var(--work-card-link-radius);
  transition: opacity var(--transition);
}

.work-card__link:hover {
  opacity: 0.92;
}

.work-card__media {
  border-radius: var(--work-card-media-radius);
  overflow: hidden;
  background: var(--color-surface);
  max-width: 580px;
  width: 100%;
}

.work-card__thumb {
  width: 100%;
  height: 350px;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.work-card__link:hover .work-card__thumb {
  transform: scale(1.06);
}

/* ===== Work thumb scenes (Figma 616×350 layered thumbnails, center-cropped like object-fit: cover) ===== */
.thumb-scene {
  --ts-white:      #ffffff;
  --ts-frame:      #fff9f9;
  --ts-ink:        #000000;
  --ts-shade-0:    rgba(33, 33, 36, 0);
  --ts-shade-1:    rgba(33, 33, 36, 0.04);
  --ts-shade-2:    rgba(33, 33, 36, 0.4);
  position: absolute;
  top: 0;
  left: 50%;
  width: 616px;
  height: 350px;
  margin-left: -308px;
  overflow: hidden;
}
.thumb-scene img,
.thumb-scene video { display: block; max-width: none; }

.thumb-scene__shade {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  mix-blend-mode: overlay;
  background: linear-gradient(to bottom, var(--ts-shade-0) 21.429%, var(--ts-shade-1) 21.429%, var(--ts-shade-2) 100%);
  pointer-events: none;
}

/* --- MemeCore --- */
.thumb-scene--memecore {
  --tsm-sky:       #81bdff;
  --tsm-shadow:    rgba(23, 64, 96, 0.25);
  background:
    linear-gradient(-0.01deg, rgba(96, 172, 255, 0.5) 3.2071%, rgba(5, 21, 80, 0.5) 22.456%, rgb(5, 21, 80) 43.995%),
    linear-gradient(46.15deg, rgb(29, 0, 82) 14.072%, rgb(82, 41, 171) 60.269%);
}
.tsm-logo {
  position: absolute;
  top: 31.2px;
  left: calc(50% + 0.24px);
  width: 184.168px;
  height: 28.941px;
  transform: translateX(-50%);
}
.tsm-logo__symbol { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; height: 100%; }
.tsm-logo__type   { position: absolute; top: 18.18%; bottom: 9.09%; left: 22.86%; right: 0; width: 77.14%; height: 72.73%; }
.tsm-shade { bottom: 0; width: 868.217px; height: 170.478px; left: calc(50% + 0.41px); }
.tsm-browser {
  position: absolute;
  bottom: -0.18px;
  left: calc(50% + 0.41px);
  width: 474.806px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--tsm-sky);
  border-radius: 12px 12px 0 0;
  /* Figma stroke is OUTSIDE (4px) */
  box-shadow: 0 0 0 4px var(--ts-frame), -1.809px 0.904px 13.566px 0 var(--tsm-shadow);
}
.tsm-browser__header { width: 361.757px; height: 16.641px; }
.tsm-browser__main {
  position: relative;
  width: 100%;
  height: 235.866px;
  padding: 36.176px 7.235px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--tsm-sky);
}
.tsm-browser__title { width: 460.336px; height: 67.881px; }
.tsm-browser__video {
  position: absolute;
  top: calc(50% + 51.92px);
  left: 50%;
  width: 694.574px;
  height: 132.041px;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* --- Mel AI (Match Group) --- */
.thumb-scene--mel {
  --tsl-tint-0:    rgba(255, 0, 106, 0.2);
  --tsl-tint-1:    rgba(255, 227, 239, 0.2);
  --tsl-dark-0:    rgba(18, 18, 18, 0);
  --tsl-dark-50:   rgba(18, 18, 18, 0.5);
  --tsl-dark-80:   rgba(18, 18, 18, 0.8);
  --tsl-dark:      #121212;
  --tsl-glow:      rgba(255, 255, 255, 0.25);
  --tsl-drop:      rgba(0, 0, 0, 0.2);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Manrope', sans-serif;
}
.thumb-scene--mel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--tsl-tint-0) 11.047%, var(--tsl-tint-1) 60.207%);
  pointer-events: none;
  z-index: 0;
}
.tsl-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tsl-bg + .tsl-shade { z-index: 1; }
.tsl-shade { bottom: 0.09px; width: 930px; height: 161.297px; }
.tsl-top-fade {
  position: absolute;
  top: 0.45px;
  left: 50%;
  width: 620px;
  height: 117px;
  transform: translateX(-50%) rotate(180deg);
  z-index: 1;
}
.tsl-logo {
  position: absolute;
  top: 40.66px;
  left: calc(50% - 206.37px);
  width: 125.915px;
  height: 39.234px;
  transform: translateX(-50%);
  object-fit: cover;
  z-index: 1;
}

/* back phone */
.tsl-back {
  position: absolute;
  top: -3.75%;
  right: 22.74%;
  bottom: 27.04%;
  left: 57.26%;
  overflow: hidden;
  background: var(--ts-ink);
  border-radius: 12px;
  /* Figma stroke is OUTSIDE (3px) */
  box-shadow: 0 0 0 3px var(--ts-frame);
  opacity: 0.6;
  z-index: 1;
}
.tsl-back__collage {
  position: absolute;
  top: -53.65px;
  left: -39.06px;
  width: 221.31px;
  height: 380.098px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsl-back__collage img { width: 161.696px; height: 357.451px; transform: rotate(-10deg); }
.tsl-back__dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 124px;
  height: 268.501px;
  background: linear-gradient(to bottom, var(--tsl-dark-50), var(--tsl-dark));
}
.tsl-back__top-fade,
.tsl-front__top-fade {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to top, var(--tsl-dark-0), var(--tsl-dark-80));
}
.tsl-back__top-fade { width: 124px; height: 43.317px; }
.tsl-back__heading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 157.06px;
  margin: 0 auto;
  padding: 7.936px 0;
  width: 100.192px;
  font-size: 11.904px;
  font-weight: 800;
  line-height: normal;
  text-align: center;
  color: var(--ts-white);
}
.tsl-back__pills {
  position: absolute;
  top: 111.43px;
  left: calc(50% + 0.4px);
  width: 124px;
  transform: translateX(-50%);
  padding: 11.904px;
  display: flex;
  flex-direction: column;
  gap: 7.936px;
}
.tsl-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 29.099px;
  padding: 7.936px 5.291px 7.936px 11.904px;
  border-radius: 33.067px;
  background: var(--ts-white);
  font-size: 6.613px;
  font-weight: 700;
  line-height: 1;
  color: var(--ts-ink);
}
.tsl-pill i {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.227px;
  height: 13.227px;
  border-radius: 50%;
  background: var(--ts-ink);
}
.tsl-pill i img { width: 7.936px; height: 7.936px; }
.tsl-back__nav {
  position: absolute;
  top: calc(50% - 112.43px);
  left: calc(50% + 0.4px);
  width: 124px;
  height: 14.549px;
  transform: translate(-50%, -50%);
  padding: 0 5.291px 0 1.984px;
  display: flex;
  align-items: center;
  gap: 4.629px;
}
.tsl-back__nav-list { width: 9.259px; height: 9.259px; margin: 2.645px; }
.tsl-back__nav-logo { flex: 1 0 0; width: 17.438px; height: 6.613px; object-fit: contain; }
.tsl-back__nav-user { width: 7.086px; height: 7.086px; margin: 3.731px; }

/* status bar (shared) */
.tsl-status { position: absolute; top: 0; left: 0; }
.tsl-status--back  { width: 124px; height: 14.549px; }
.tsl-status--front { width: 148px; height: 17.365px; }
.tsl-status__time {
  position: absolute;
  /* Figma: Time Style box 27.27%–75%, text inset 9.52% / 4.76% of that box */
  top: 31.68%;
  bottom: 27.38%;
  left: 5.6%;
  right: 80%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-weight: 600;
  line-height: normal;
  color: var(--ts-white);
}
.tsl-status--back  .tsl-status__time { font-size: 4.96px; letter-spacing: -0.0992px; }
.tsl-status--front .tsl-status__time { font-size: 5.92px; letter-spacing: -0.1184px; }
.tsl-status__battery { position: absolute; top: 39.39%; right: 3.91%;  bottom: 34.85%; left: 89.6%;  width: 6.49%;  height: 25.76%; }
.tsl-status__wifi    { position: absolute; top: 39.39%; right: 11.74%; bottom: 35.69%; left: 84.18%; width: 4.08%;  height: 24.92%; }
.tsl-status__signal  { position: absolute; top: 40.15%; right: 17.16%; bottom: 35.61%; left: 78.31%; width: 4.53%;  height: 24.24%; }

/* front phone */
.tsl-front {
  position: absolute;
  top: 11.51%;
  bottom: -3.07%;
  left: calc(50% - 25px);
  width: 148px;
  transform: translateX(-50%);
  overflow: hidden;
  background: var(--ts-white);
  border-radius: 12px;
  /* Figma stroke is OUTSIDE (4px) — drawn with spread so the 148px screen isn't shrunk */
  box-shadow: 0 0 0 4px var(--ts-frame), -2.53px -2.53px 17.709px 0 var(--tsl-glow);
  z-index: 2;
}
.tsl-front__video {
  position: absolute;
  top: 0;
  left: 50%;
  width: 148px;
  height: 320.469px;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: 25% 0;
}
.tsl-front__top-fade { width: 148px; height: 51.701px; }
.tsl-front__bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 148px;
  height: 47.36px;
  background: linear-gradient(to bottom, var(--tsl-dark-0), var(--tsl-dark));
}
.tsl-front__nav {
  position: absolute;
  top: calc(50% - 134.19px);
  left: 50%;
  width: 148px;
  height: 17.365px;
  transform: translate(-50%, -50%);
  padding: 0 2.368px;
  display: flex;
  align-items: center;
  gap: 6.315px;
}
.tsl-front__nav-icon { width: 11.051px; height: 11.051px; margin: 3.157px; }
.tsl-front__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.691px;
  width: 95.904px;
  font-size: 8.457px;
  font-weight: 700;
  line-height: normal;
  color: var(--ts-white);
  white-space: nowrap;
}
.tsl-front__name img { width: 8.457px; height: 8.457px; }
.tsl-front__bar {
  position: absolute;
  top: 277.22px;
  left: calc(50% - 0.16px);
  width: 148px;
  height: 26.837px;
  transform: translateX(-50%);
  padding: 3.157px 6.315px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tsl-front__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.523px;
  height: 20.523px;
}
.tsl-front__btn-icon { width: 12.629px; height: 12.629px; }
.tsl-front__btn-icon--shadow { filter: drop-shadow(0 1.579px 1.579px var(--tsl-drop)); }
.tsl-sphere { position: relative; width: 12.629px; height: 12.629px; }
.tsl-sphere__video {
  position: absolute;
  inset: 6.26%;
  width: 87.48%;
  height: 87.48%;
  border-radius: 50%;
  object-fit: cover;
}
.tsl-sphere__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.tsl-front__home { position: absolute; bottom: 0; left: 0; width: 148px; height: 13.419px; }

.work-card__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 2px;
}

.work-card__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-text);
  margin-top: 8px;
}

.work-card__desc {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.55;
  margin-top: 12px;
}

.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  line-height: 1.5;
  padding: 2px 10px;
  background: #fff;
  color: var(--color-text);
  border-radius: 100px;
  border: 1px solid #121213;
  letter-spacing: 0.01em;
}

/* Disabled work card — gray colors (Figma) */
.work-card--disabled .work-card__media {
  border-radius: 24px;
  background: transparent;
}

.work-card--disabled .tag {
  color: var(--color-disabled-tag);
  border-color: var(--color-disabled-tag);
}

.work-card--disabled .work-card__title {
  color: var(--color-disabled-title);
}

.work-card--disabled .work-card__desc {
  color: var(--color-disabled-desc);
}

/* Not clickable on the deployed site only (html.is-deployed set in script.js) */
.is-deployed .work-card--disabled .work-card__link {
  pointer-events: none;
  cursor: default;
}


/* ===== Story Strip ===== */
.story-strip {
  padding: 36px 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.story-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.story-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.story-strip__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
}

.story-strip__value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text);
}

.story-strip__dot {
  color: rgba(0, 0, 0, 0.15);
  font-size: 1.5rem;
  line-height: 1;
  user-select: none;
}

/* ===== Testimonials ===== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.testimonial-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.testimonial-card__quote {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.75;
  flex: 1;
}

.testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.testimonial-card__author strong {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
}

.testimonial-card__author span {
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* ===== Contact CTA ===== */
.contact-cta {
  padding: 100px 0;
  text-align: center;
}

.contact-cta__inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.contact-cta__headline {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  color: var(--color-text);
}

.contact-cta__btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== Marquee Strip ===== */
.marquee-strip {
  padding: 80px 0 0;
  margin-bottom: -12px;
  background: var(--color-bg);
  position: relative;
  z-index: 4;
}

/* Inner wrapper handles overflow clipping separately from padding */
.marquee-strip__window {
  position: relative;
  overflow: hidden;
}

.marquee-strip__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 70s linear infinite;
}

.marquee-strip__img {
  height: 225px;
  width: auto;
  display: block;
  flex-shrink: 0;
  user-select: none;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Edge fade overlays on the inner window */
.marquee-strip__window::before,
.marquee-strip__window::after {
  content: '';
  position: absolute;
  top: 0;
  width: 320px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.marquee-strip__window::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.5) 30%, transparent 100%);
}

.marquee-strip__window::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,0.5) 30%, transparent 100%);
}

/* =============================================
   FOOTER — Figma spec (node 5317:37218 / 37219)
   - bg: #121213 (rgba 18,18,19)
   - padding: top=120 bottom=120 left=40 right=40
   - inner: 1200×48 row, gap=40, space-between
   - left: © 2026 Lydia Oh. | Manrope 400 18px #c2c2cc
   - right: 3 icons, each 48×48 white circle, gap=20
   ============================================= */
.footer {
  position: relative;
  z-index: 4;
  background: var(--color-footer-bg);
  padding: 120px 40px 80px;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px; /* Figma: sitemap frame gap=40 */
}

/* Copyright — font-label token */
.footer__copy {
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  color: var(--color-footer-text);
  white-space: nowrap;
}

/* Social icons row — gap=20 (Figma: itemSpacing=20) */
.footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Each icon: transparent wrapper, icon image carries visual */
.footer__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.footer__social-btn img {
  width: 40px;
  height: 40px;
  display: block;
}

/* ===== Footer Email Copy Button ===== */
.footer__email-btn {
  width: auto;
  max-width: 40px;
  padding-right: 0;
  overflow: hidden;
  justify-content: flex-start;
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: 22px;
  font-family: 'Manrope', sans-serif;
  transition: max-width 0.32s ease, padding-right 0.32s ease, background 0.32s ease;
}

.footer__email-btn:hover,
.footer__email-btn.copied {
  max-width: 380px;
  padding-right: 16px;
  background: #ffffff;
}

.footer__email-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
}

.footer__email-addr {
  color: var(--color-muted);
}

.footer__email-action {
  color: var(--color-text);
  font-weight: 700;
}

/* ===== Page Hero (서브페이지 공통) ===== */
.page-hero {
  padding: 140px 0 64px;
}

.page-hero__title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.15;
  margin-bottom: 12px;
}

.page-hero__sub {
  color: var(--color-muted);
  font-size: 1rem;
}

/* ===== About Page ===== */
.about-section .section__inner {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 140px;
}

.profile-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  margin-top: 8px;
}

.about-story {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 28px 0 32px;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.8;
}

.about-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ===== Article List ===== */
.article-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.article-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color var(--transition);
  color: var(--color-text);
}

.article-item:hover {
  color: var(--color-accent);
}

.article-item__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.article-item__desc {
  font-size: 0.87rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.article-item__arrow {
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.article-item:hover .article-item__arrow {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .about-section .section__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ===== Animations ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollLine {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  40%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  60%  { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
  100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Responsive ===== */

@media (max-width: 1280px) {
  :root { --gnb-height: 44px; }
  .gnb { padding: calc(12px + var(--gnb-bleed)) 0 8px; }
  .gnb__inner { padding: 0 12px; }
}

@media (max-width: 768px) {
  .gnb { padding: calc(8px + var(--gnb-bleed)) 0 8px; }
  .gnb__inner { display: flex; }
  .gnb__nav { display: none; }
  .gnb__cta { display: none; }
  .gnb__hamburger { display: flex; }
  .gnb__logo { margin: 0 12px; }
  .gnb__mobile-nav { display: flex; }

  .section__inner,
  .story-strip__inner { padding-left: 20px; padding-right: 20px; }
  .hero__inner        { padding: 60px 20px; }

  .work-grid,
  .all-work-grid      { grid-template-columns: 1fr; gap: 32px; }
  .work-card__link    { gap: 20px; }
  .work-card__title   { font-size: 24px; }
  .work-card__desc    { font-size: 16px; }
  .testimonial-grid   { grid-template-columns: 1fr; }
  .story-strip__dot   { display: none; }

  .section            { padding: 72px 0; }
  .hero__headline     { letter-spacing: -0.5px; }
  .hero__sub br       { display: none; }

  /* Footer mobile — Figma: padding top=48 bottom=60, column layout */
  .footer {
    padding: 48px 20px 60px;
  }
  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .contact-cta__btns  { flex-direction: column; align-items: stretch; }
}

/* ===== Custom cursor (dot → text bar) — fine pointers only, set up in script.js ===== */
html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}

/* Links keep the native hand cursor so they read as clickable; the dot hides */
html.has-cursor a[href],
html.has-cursor a[href] * {
  cursor: pointer !important;
}

.cursor.is-link { opacity: 0; }

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cursor.is-visible { opacity: 1; }

.cursor__shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--cursor-color);
  transform: translate(-50%, -50%);
  /* Width settles without overshoot (no thin "ghost" dip); height gets a short bounce */
  transition:
    width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.3s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.cursor.is-text .cursor__shape {
  width: 2px;
  height: var(--cursor-text-h, 20px);
}