/* =====================================================================
   Nic Ekstrand Portfolio — Ekwonye-inspired redesign
   Light theme · Plus Jakarta Sans · #e1dfdd warm grey
   ===================================================================== */

/* ── Design Tokens ────────────────────────────────────────────────── */

:root {
  --light-grey:         #e1dfdd;
  --dark-teal:          #2a2e2b;
  --black:              #000000;
  --white:              #ffffff;
  --main-color:         var(--black);

  --font-sans:          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* type scale */
  --title-1:            clamp(56px, 9vw, 144px);
  --title-2:            clamp(20px, 3vw, 40px);
  --title-3:            clamp(22px, 2.5vw, 32px);
  --paragraph-text:     clamp(16px, 1.5vw, 20px);
  --sm-text:            13px;
  --lg-paragraph-text:  clamp(22px, 2.8vw, 36px);

  /* layout */
  --header-height:      68px;
  --h-pad:              clamp(20px, 5vw, 70px);
  --section-vpad:       clamp(80px, 12vw, 160px);
  --cursor-dimension:   62px;

  /* easing */
  --ease-primary:       cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --ease-out:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset / Base ─────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
  background: var(--light-grey);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: var(--paragraph-text);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (pointer: fine) {
  body, a, button, [role="button"], [tabindex] { cursor: none !important; }
}

ul  { list-style: none; padding: 0; margin: 0; }
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: var(--font-sans); background: none; border: none; cursor: none; }

/* ── Loader ───────────────────────────────────────────────────────── */

.loader {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--h-pad);
  will-change: transform;
}

.loader-desc {
  position: absolute;
  top: var(--h-pad);
  left: var(--h-pad);
  color: rgba(255,255,255,0.45);
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.loader-hello {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(32px, 5.5vw, 80px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--white);
  text-align: center;
  opacity: 1;
  transition: opacity 0.08s ease;
}

/* ── Area Cursor ──────────────────────────────────────────────────── */

.area-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9000;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.1s linear;
}

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

.ac-ring {
  width: var(--cursor-dimension);
  height: var(--cursor-dimension);
  border-radius: 50%;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-label {
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* dot cursor is created in JS as a real element */

/* ── Header ───────────────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--header-height);
  /* mix-blend-mode trick: color = background, so it inverts against dark surfaces */
  color: var(--light-grey);
  mix-blend-mode: difference;
  pointer-events: none;
}

.header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto auto;
  align-items: center;
  height: 100%;
  padding: 0 var(--h-pad);
  gap: 0 20px;
  pointer-events: all;
}

.h-name {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}

.h-role,
.h-location {
  font-size: var(--sm-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
}

.h-nav {
  display: flex;
  gap: 28px;
}

.h-nav-link {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  transition: opacity 0.2s;
}
.h-nav-link:hover { opacity: 0.55; }

.h-menu-btn {
  display: none;
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  padding: 0;
}

@media (max-width: 800px) {
  .h-role, .h-location { display: none; }
  .h-nav { display: none; }
  .h-menu-btn { display: block; }
  .header-grid {
    grid-template-columns: 1fr auto;
  }
}

/* ── Mobile Menu ──────────────────────────────────────────────────── */

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--dark-teal);
  z-index: 600;
  display: flex;
  flex-direction: column;
  padding: 24px var(--h-pad) 40px;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-primary);
}

.mobile-menu.is-open { transform: translateY(0); }

.mm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}

.mm-header span,
.mm-close {
  color: var(--white);
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mm-close { cursor: none; background: none; border: none; font-family: var(--font-sans); }

.mm-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.mm-links li a {
  display: block;
  color: var(--white);
  font-size: clamp(40px, 10vw, 72px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-transform: uppercase;
}

.mm-links li:last-child a { border-bottom: 1px solid rgba(255,255,255,0.12); }

.mm-role,
.mm-location {
  color: rgba(255,255,255,0.45);
  font-size: var(--sm-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ── Layout / Main ────────────────────────────────────────────────── */

/* overflow: hidden would break position:sticky on project details */
.layout {}
.main {}

/* ── Big Text ─────────────────────────────────────────────────────── */

.big-text {
  font-size: var(--title-1);
  font-weight: 500;
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.bt-chars { overflow: hidden; }

.bt-line {
  overflow: hidden;
}

.bt-inner {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease-primary);
}

.bt-line.is-revealed .bt-inner {
  transform: translateY(0);
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.home-hero {
  padding: calc(var(--header-height) * 0.5) var(--h-pad) var(--section-vpad);
  min-height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 40px 0;
  align-items: end;
}

.hh-title {
  grid-column: 1 / -1;
}

@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

.hh-arrow {
  font-size: clamp(20px, 3vw, 32px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.hh-arrow.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.hh-arrow.is-revealed .arrow-inner {
  display: inline-block;
  animation: arrow-bob 1.6s var(--ease-primary) infinite;
}

.arrow-inner { line-height: 1; }

.hh-desc {
  justify-self: end;
  max-width: 300px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out) 0.15s, transform 0.6s var(--ease-out) 0.15s;
}

.hh-desc.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.hh-desc p {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
  margin-bottom: 18px;
  color: rgba(0,0,0,0.65);
}

.hh-detail {
  justify-self: end;
  text-align: right;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out) 0.25s, transform 0.6s var(--ease-out) 0.25s;
}

.hh-detail.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.hh-detail p {
  font-size: clamp(13px, 1.2vw, 15px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  line-height: 1.5;
}

/* underlined link */
.underlined-link {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.underlined-link:hover { opacity: 0.5; }

@media (max-width: 680px) {
  .hh-grid {
    grid-template-columns: 1fr;
  }
  .hh-desc { justify-self: start; max-width: 100%; }
  .hh-detail { justify-self: start; text-align: left; }
}

/* ── Profile / About ──────────────────────────────────────────────── */

.home-profile {
  padding: 0 var(--h-pad) var(--section-vpad);
  border-top: 1px solid rgba(0,0,0,0.12);
}

.hp-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  padding-top: 40px;
}

.hp-bio {
  max-width: 700px;
}

.lg-text {
  font-size: var(--lg-paragraph-text);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.hp-interests {
  margin-top: 20px;
  color: rgba(0,0,0,0.5);
}

.hp-link {
  align-self: flex-end;
  padding-bottom: 4px;
}

@media (max-width: 680px) {
  .hp-grid { grid-template-columns: 1fr; }
  .hp-link { align-self: start; }
}

/* ── Scroll Reveal ────────────────────────────────────────────────── */

.reveal-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

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

/* ── Projects ─────────────────────────────────────────────────────── */

.home-projects {
  border-top: 1px solid rgba(0,0,0,0.12);
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 100px);
}

.project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  text-decoration: none;
  color: inherit;
}

.project:first-child { border-top: 1px solid rgba(0,0,0,0.1); }

/* ── Sticky left panel ── */
.project-details {
  position: sticky;
  top: var(--header-height);
  /* No fixed height — sized only by meta + title so exit timing
     matches when image bottom reaches h2 bottom */
  padding: 40px var(--h-pad) 0;
  display: flex;
  flex-direction: column;
}

.project-meta {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 32px;
}

.proj-num {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.35);
}

.proj-year {
  font-size: var(--sm-text);
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.35);
}

.project-title {
  font-size: clamp(44px, 7vw, 112px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--black);
}

.proj-type {
  display: none;
}

.proj-short {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 18px var(--h-pad) 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  max-width: 340px;
}

.proj-avail {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 52px var(--h-pad) 0;
  font-size: var(--sm-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.3);
  display: block;
}

/* ── Full-height image panel ── */
.project-cover {
  height: 100vh;
  overflow: hidden;
  background: rgba(0,0,0,0.05);
}

.project-cover-inner {
  width: 100%;
  height: 100%;
}

.project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-primary);
}

.project:hover .project-img { transform: scale(1.03); }

@media (max-width: 800px) {
  .project {
    grid-template-columns: 1fr;
  }

  .project-details {
    position: static;
    height: auto;
    padding: 36px var(--h-pad) 28px;
    justify-content: flex-start;
  }

  .project-meta { margin-bottom: 24px; }

  .project-title {
    font-size: clamp(38px, 10vw, 64px);
  }

  .project-cover {
    height: 60vw;
    min-height: 240px;
  }
}

/* ── Experience ───────────────────────────────────────────────────── */

.home-experience {
  padding: 0 var(--h-pad) var(--section-vpad);
  border-top: 1px solid rgba(0,0,0,0.12);
}

.exp-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 60px;
  padding-top: 60px;
}

.section-heading {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.exp-list {}

.exp-item {
  border-top: 1px solid rgba(0,0,0,0.1);
}
.exp-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.1); }

.exp-row {
  display: grid;
  grid-template-columns: 28px 1fr 1fr auto 20px;
  gap: 0 16px;
  align-items: center;
  padding: 20px 0;
  cursor: none;
  user-select: none;
}

.exp-num {
  font-size: var(--sm-text);
  color: rgba(0,0,0,0.3);
  letter-spacing: 0.04em;
}

.exp-co {
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
}

.exp-role {
  font-size: clamp(14px, 1.2vw, 16px);
  color: rgba(0,0,0,0.55);
}

.exp-year {
  font-size: var(--sm-text);
  color: rgba(0,0,0,0.35);
  letter-spacing: 0.04em;
  text-align: right;
}

.exp-toggle {
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  color: rgba(0,0,0,0.4);
  transition: transform 0.4s var(--ease-primary), color 0.2s;
  text-align: center;
}

.exp-item.is-open .exp-toggle {
  transform: rotate(45deg);
  color: var(--black);
}

.exp-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease-primary);
}

.exp-body-inner {
  padding: 0 0 28px 44px;
}

.exp-loc {
  font-size: var(--sm-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  margin-bottom: 14px;
}

.exp-body-inner ul {
  margin-bottom: 16px;
}

.exp-body-inner ul li {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: rgba(0,0,0,0.7);
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}

.exp-body-inner ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(0,0,0,0.25);
}

.exp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exp-tags span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 2px;
  color: rgba(0,0,0,0.5);
}

@media (max-width: 800px) {
  .exp-grid { grid-template-columns: 1fr; gap: 40px 0; }
  .section-heading { position: static; }
  .exp-row {
    grid-template-columns: 24px 1fr auto 18px;
  }
  .exp-role { display: none; }
  .exp-body-inner { padding-left: 0; }
}

/* ── Skills ───────────────────────────────────────────────────────── */

.home-skills {
  padding: 0 var(--h-pad) var(--section-vpad);
  border-top: 1px solid rgba(0,0,0,0.12);
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 60px;
  padding-top: 60px;
}

.skills-content-col {}

.skill-block {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0 24px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.skill-block:last-child { border-bottom: 1px solid rgba(0,0,0,0.08); }

.skill-cat {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
}

.skill-list {
  font-size: clamp(14px, 1.3vw, 16px);
  color: rgba(0,0,0,0.75);
  line-height: 1.55;
}

@media (max-width: 800px) {
  .skills-grid { grid-template-columns: 1fr; gap: 40px 0; }
  .skill-block { grid-template-columns: 1fr; gap: 6px 0; }
}

/* ── Contact / Send Message ───────────────────────────────────────── */

.send-message {
  padding: 0 var(--h-pad) var(--section-vpad);
  border-top: 1px solid rgba(0,0,0,0.12);
}

.sm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 40px;
  align-items: end;
  padding-top: 60px;
}

.sm-email {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 8px;
}

.sm-label {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  margin-bottom: 16px;
}

.big-action {
  display: inline-block;
  font-size: clamp(14px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
  border-bottom: 2px solid var(--black);
  padding-bottom: 12px;
  margin-bottom: 20px;
  transition: opacity 0.25s;
}

.big-action:hover { opacity: 0.55; }

.sm-mobile-link {
  display: none;
  font-size: clamp(14px, 3vw, 18px);
  border-bottom: 1px solid var(--black);
  padding-bottom: 4px;
}

@media (max-width: 800px) {
  .sm-grid { grid-template-columns: 1fr; }
  .big-action { display: none; }
  .sm-mobile-link { display: block; }
}

/* ── Footer ───────────────────────────────────────────────────────── */

.footer {
  padding: 24px var(--h-pad);
  border-top: 1px solid rgba(0,0,0,0.12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0 40px;
  align-items: center;
}

.f-name,
.f-copy {
  font-size: var(--sm-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
}

.f-links {
  display: flex;
  gap: 24px;
}

.f-links a {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.6);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.2s, color 0.2s;
}

.f-links a:hover {
  color: var(--black);
  border-color: var(--black);
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 12px 20px;
  }
  .f-copy { grid-column: 2; grid-row: 1; }
  .f-links { grid-column: 1 / -1; }
}

/* ── Utilities ────────────────────────────────────────────────────── */

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

/* ── Project Overlay ──────────────────────────────────────────────── */

.project-overlay {
  position: fixed;
  inset: 0;
  background: var(--dark-teal);
  color: var(--white);
  z-index: 900;
  transform: translateY(100%);
  transition: transform 0.9s cubic-bezier(0.62, 0.05, 0.01, 0.99);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-overlay.is-open {
  transform: translateY(0);
}

.project-overlay.is-open .po-bar {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s var(--ease-out) 0.82s,
              transform 0.5s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0.82s;
}

.project-overlay.is-open .po-desc-text {
  transform: translateY(0);
  transition: transform 0.75s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0.85s;
}

.project-overlay.is-open .po-desc-line:nth-child(2) .po-desc-text {
  transition-delay: 0.97s;
}

.project-overlay.is-open .po-desc-line:nth-child(3) .po-desc-text {
  transition-delay: 1.09s;
}

.project-overlay.is-open .po-info {
  opacity: 1;
  transition: opacity 0.5s var(--ease-out) 1.1s;
}

.project-overlay.is-open .po-right {
  clip-path: inset(0% 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0.82s;
}

.po-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  padding: 20px var(--h-pad);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: var(--dark-teal);
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.01s, transform 0.01s;
}

.po-bar-label {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.po-bar-link {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.po-bar-name {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

.po-close {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: none;
  border: none;
  font-family: var(--font-sans);
  cursor: none;
  padding: 0;
  justify-self: end;
}

.po-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
}

.po-left {
  padding: clamp(40px, 6vw, 80px) var(--h-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.po-desc-line {
  overflow: hidden;
}

.po-desc-text {
  display: block;
  transform: translateY(110%);
  transition: transform 0.01s;
}

.po-desc {
  font-size: var(--lg-paragraph-text);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--white);
}

.po-info {
  margin-top: 48px;
  opacity: 0;
  transition: opacity 0.01s;
}

.po-info-heading {
  font-size: var(--sm-text);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 16px;
}

.po-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: var(--paragraph-text);
}

.po-info-row:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.po-info-label {
  color: rgba(255,255,255,0.45);
}

.po-info-value {
  color: var(--white);
}

.po-right {
  overflow: hidden;
  background: rgba(0,0,0,0.2);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.01s;
}

.po-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 800px) {
  .po-bar {
    grid-template-columns: 1fr auto;
  }

  .po-bar-label,
  .po-bar-name { display: none; }

  .po-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .po-right {
    height: 50vw;
    min-height: 200px;
    flex-shrink: 0;
  }
}