/* ==========================================================================
   Portfolio — 2026 cinematic-dark rebuild
   Mirrors home.css §B (practice-positioning) + §J (home-portfolio) systems.
   Ink canvas, hairline borders, mono eyebrows, italic display, red accent.
   ========================================================================== */

.portfolio-page {
  background: var(--ink);
  color: var(--on-black);
  font-family: var(--font-body);
}

/* ==================== HERO (cinematic, video-bg) ==================== */

.portfolio-hero {
  background: var(--ink);
  color: var(--on-black);
  padding: 0;
  min-height: 70vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: stretch;
}

.portfolio-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 144px 32px 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 70vh;
}

.portfolio-hero__inner > * {
  max-width: 38ch;
}

/* Left-side dark wash — text sits left, archive flat-lay shows on right */
.portfolio-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.65) 40%,
    rgba(10, 10, 10, 0) 100%
  );
}

.portfolio-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 11px/1 var(--font-mono);
  color: var(--red);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.portfolio-hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--red);
  opacity: 0.7;
}

.portfolio-hero__headline {
  font: 400 clamp(2rem, 4vw, 3.25rem)/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--on-black);
  margin: 0 0 24px;
}

.portfolio-hero__headline em {
  font-style: italic;
  color: color-mix(in oklab, var(--red) 78%, var(--on-black));
}

.portfolio-hero__lede {
  font: 400 16px/1.65 var(--font-body);
  color: var(--on-black-mute);
  margin: 0 0 18px;
}

.portfolio-hero__detail {
  font: 400 13px/1.65 var(--font-body);
  color: var(--on-black-mute);
  opacity: 0.8;
  margin: 0;
  max-width: 48ch;
}

.portfolio-hero .section-bg-video {
  object-position: 25% center;
}

@media (max-width: 768px) {
  .portfolio-hero__inner {
    padding: 112px 24px 72px;
    min-height: 60vh;
  }
  .portfolio-hero__inner > * {
    max-width: 100%;
  }
  .portfolio-hero .section-bg-video {
    object-position: center;
  }
}

/* ==================== INDEX (the list) ==================== */

.portfolio-index {
  background: var(--ink);
  color: var(--on-black);
  padding: 96px 0 120px;
  position: relative;
}

.portfolio-index__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.portfolio-index__header {
  max-width: 720px;
  margin: 0 0 48px;
}

.portfolio-index__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 11px/1 var(--font-mono);
  color: var(--red);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.portfolio-index__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--red);
}

.portfolio-index__headline {
  font: 400 clamp(1.625rem, 2.8vw, 2.25rem)/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--on-black);
  margin: 0 0 16px;
  max-width: 22ch;
}

.portfolio-index__headline em {
  font-style: italic;
  color: color-mix(in oklab, var(--red) 78%, var(--on-black));
}

.portfolio-index__lede {
  font: 400 14px/1.65 var(--font-body);
  color: var(--on-black-mute);
  margin: 0;
  max-width: 56ch;
}

/* ==================== FILTERS ==================== */

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 32px;
  border-top: 1px solid rgba(245, 241, 232, 0.10);
  border-bottom: 1px solid rgba(245, 241, 232, 0.10);
}

.filter-chip {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(245, 241, 232, 0.10);
  color: var(--on-black-mute);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 22px;
  cursor: pointer;
  transition: color 360ms, background 360ms;
}

.filter-chip:last-child {
  border-right: 0;
}

.filter-chip:hover {
  color: var(--on-black);
  background: rgba(200, 16, 46, 0.04);
}

.filter-chip.is-active {
  color: var(--red);
  background: rgba(200, 16, 46, 0.06);
}

/* ==================== ITEM LIST (text-only, hairline rows) ==================== */

.portfolio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(245, 241, 232, 0.10);
}

.portfolio-list-item {
  display: grid;
  grid-template-columns: 60px 1fr 24px;
  gap: 20px;
  padding: 28px 24px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.10);
  text-decoration: none;
  color: var(--on-black);
  align-items: center;
  transition: background 400ms, padding-left 400ms;
}

.portfolio-list-item:nth-child(odd) {
  border-right: 1px solid rgba(245, 241, 232, 0.10);
}

.portfolio-list-item:hover {
  background: linear-gradient(to right, rgba(200,16,46,0.06) 0%, transparent 80%);
  padding-left: 32px;
}

.portfolio-list-item__num {
  font: 500 13px/1 var(--font-mono);
  color: var(--red);
  letter-spacing: 0.10em;
}

.portfolio-list-item__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.portfolio-list-item__class {
  font: 500 10px/1 var(--font-mono);
  color: var(--on-black-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.portfolio-list-item__name {
  font: 400 18px/1.25 var(--font-display);
  color: var(--on-black);
  margin: 0;
  transition: color 400ms;
}

.portfolio-list-item__name em {
  font-style: italic;
}

.portfolio-list-item:hover .portfolio-list-item__name {
  color: var(--red);
}

.portfolio-list-item__desc {
  font: 400 13px/1.55 var(--font-body);
  color: var(--on-black-mute);
  margin: 4px 0 0;
  max-width: 54ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portfolio-list-item__arrow {
  font: 500 16px/1 var(--font-mono);
  color: var(--on-black-mute);
  transition: transform 400ms, color 400ms;
}

.portfolio-list-item:hover .portfolio-list-item__arrow {
  color: var(--red);
  transform: translateX(4px);
}

/* ==================== STATES ==================== */

.portfolio-loading {
  padding: 64px 24px;
  text-align: center;
  color: var(--on-black-mute);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-top: 1px solid rgba(245, 241, 232, 0.10);
  border-bottom: 1px solid rgba(245, 241, 232, 0.10);
}

.portfolio-empty {
  padding: 80px 24px;
  text-align: center;
  border-top: 1px solid rgba(245, 241, 232, 0.10);
  border-bottom: 1px solid rgba(245, 241, 232, 0.10);
}

.portfolio-empty__title {
  font: 400 clamp(1.25rem, 2vw, 1.625rem)/1.2 var(--font-display);
  color: var(--on-black);
  margin: 0 0 12px;
}

.portfolio-empty__title em {
  font-style: italic;
  color: color-mix(in oklab, var(--red) 78%, var(--on-black));
}

.portfolio-empty__body {
  font: 400 14px/1.65 var(--font-body);
  color: var(--on-black-mute);
  margin: 0;
  max-width: 48ch;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .portfolio-list {
    grid-template-columns: 1fr;
  }
  .portfolio-list-item {
    padding: 22px 16px;
    grid-template-columns: 44px 1fr 20px;
    gap: 14px;
  }
  .portfolio-list-item:nth-child(odd) {
    border-right: 0;
  }
  .filter-chip {
    padding: 14px 16px;
    font-size: 10px;
  }
}

/* ==================== CTA STRIP ==================== */

.portfolio-cta {
  background: var(--ink);
  color: var(--on-black);
  padding: 112px 0 128px;
  position: relative;
  overflow: hidden;
}

.portfolio-cta__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.portfolio-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 11px/1 var(--font-mono);
  color: var(--red);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin: 0 0 18px;
  justify-content: center;
}

.portfolio-cta__eyebrow::before,
.portfolio-cta__eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--red);
  opacity: 0.7;
}

.portfolio-cta__headline {
  font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--on-black);
  margin: 0 0 18px;
}

.portfolio-cta__headline em {
  font-style: italic;
  color: color-mix(in oklab, var(--red) 78%, var(--on-black));
}

.portfolio-cta__copy {
  font: 400 15px/1.65 var(--font-body);
  color: var(--on-black-mute);
  margin: 0 auto 40px;
  max-width: 60ch;
}

.portfolio-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border: 1px solid var(--red);
  color: var(--red);
  background: transparent;
  text-decoration: none;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 600ms, color 600ms, gap 400ms;
}

.portfolio-cta__link:hover {
  background: var(--red);
  color: var(--on-black);
  gap: 18px;
}

/* ==========================================================================
   POLISH PASS — cross-page rhythm (portfolio · news · team · testimonials)
   - tighter hairline borders + red-wash hover gradient on text-list rows
   - classification mono-caps glow-up
   - arrow translate w/ reduced-motion guard
   - red ember halo behind hovered name
   ========================================================================== */

.portfolio-list { border-color: rgba(245, 241, 232, 0.08); }

.portfolio-list-item {
  position: relative;
  transition:
    background 600ms cubic-bezier(.2,.7,.2,1),
    padding-left 600ms cubic-bezier(.2,.7,.2,1);
}

/* Animated hairline that draws in on hover (mirrors news card) */
.portfolio-list-item::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, var(--red), transparent);
  transition: width 700ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 1;
}

.portfolio-list-item:hover::after,
.portfolio-list-item:focus-visible::after {
  width: calc(100% - 48px);
}

.portfolio-list-item:hover {
  background: linear-gradient(
    to right,
    rgba(200, 16, 46, 0.07) 0%,
    rgba(200, 16, 46, 0.02) 45%,
    transparent 85%
  );
}

.portfolio-list-item__num {
  transition: color 500ms ease, letter-spacing 500ms ease;
}

.portfolio-list-item:hover .portfolio-list-item__num {
  letter-spacing: 0.16em;
}

.portfolio-list-item__class {
  transition: color 500ms ease, letter-spacing 500ms ease;
}

.portfolio-list-item:hover .portfolio-list-item__class {
  color: var(--red);
  letter-spacing: 0.20em;
}

.portfolio-list-item__name {
  transition: color 500ms ease, text-shadow 700ms ease;
}

.portfolio-list-item:hover .portfolio-list-item__name {
  text-shadow: 0 0 28px rgba(200, 16, 46, 0.32);
}

.portfolio-list-item__arrow {
  transition: transform 500ms cubic-bezier(.2,.7,.2,1), color 400ms ease;
}

.portfolio-list-item:hover .portfolio-list-item__arrow {
  transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-list-item,
  .portfolio-list-item::after,
  .portfolio-list-item__arrow,
  .portfolio-list-item__num,
  .portfolio-list-item__class,
  .portfolio-list-item__name {
    transition: none;
  }
  .portfolio-list-item:hover { padding-left: 24px; }
  .portfolio-list-item:hover .portfolio-list-item__arrow { transform: none; }
}

/* Eyebrow consistency: ensure the leading rule sits cleanly across pages */
.portfolio-index__eyebrow::before { opacity: 0.7; }

/* ==========================================================================
   ART DIRECTION PASS — portfolio hero overlay + editorial row upgrades
   ========================================================================== */

/* Hero overlay: heavy left (text side) → lighter right (archive flat-lay shows through) */
.portfolio-page .portfolio-hero .section-bg-overlay {
    background:
        linear-gradient(to top, rgba(10, 10, 10, 0.80) 0%, rgba(10, 10, 10, 0.30) 50%, rgba(10, 10, 10, 0.10) 100%),
        linear-gradient(to right, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.55) 35%, rgba(10, 10, 10, 0.18) 65%, transparent 100%);
}

/* Editorial row layout — generic selector aliases for future-proofing */
.portfolio-item,
.portfolio-card,
.portfolio-entry {
    padding: 40px 0;
    border-bottom: 1px solid rgba(245, 241, 232, 0.08);
    position: relative;
    transition: padding-left 400ms ease-out, background 400ms ease-out;
}

.portfolio-item::before,
.portfolio-card::before,
.portfolio-entry::before {
    content: attr(data-index);
    position: absolute;
    right: 0;
    top: 40px;
    font: 400 clamp(3.5rem, 6vw, 5rem)/1 var(--font-display);
    font-style: italic;
    color: var(--red);
    opacity: 0.06;
    user-select: none;
    pointer-events: none;
    transition: opacity 500ms ease-out;
}

.portfolio-item:hover::before,
.portfolio-card:hover::before,
.portfolio-entry:hover::before {
    opacity: 0.16;
}

.portfolio-item:hover,
.portfolio-card:hover,
.portfolio-entry:hover {
    padding-left: 18px;
    background: linear-gradient(to right, rgba(200, 16, 46, 0.04), transparent 40%);
}

.portfolio-title,
.portfolio-item__title,
.portfolio-name {
    font: 400 clamp(1.25rem, 2vw, 1.625rem)/1.2 var(--font-display);
    font-style: italic;
    letter-spacing: -0.015em;
    color: var(--on-black);
    margin: 0 0 12px;
}

.portfolio-category,
.portfolio-sector,
.portfolio-type {
    font: 500 var(--text-xs)/1 var(--font-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 10px;
}

.portfolio-description,
.portfolio-item__desc,
.portfolio-body {
    font: 400 var(--text-base)/1.65 var(--font-body);
    color: var(--on-black-mute);
    max-width: 70ch;
    margin: 0;
}

/* Editorial hover treatment scoped to the actual rendered list items */
.portfolio-list-item {
    position: relative;
}

.portfolio-list-item::before {
    content: attr(data-index);
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font: 400 clamp(2.5rem, 4vw, 3.5rem)/1 var(--font-display);
    font-style: italic;
    color: var(--red);
    opacity: 0.05;
    user-select: none;
    pointer-events: none;
    transition: opacity 500ms ease-out;
}

.portfolio-list-item:hover::before {
    opacity: 0.14;
}