/* Work route only — exact five-block editorial composition based on the approved references. */
.work-page {
  --work-charcoal: #0b0b0a;
  --work-panel: #12120f;
  --work-line: rgba(244, 240, 232, 0.16);
  --work-faint: rgba(244, 240, 232, 0.06);
  --work-gold: rgba(212, 175, 55, 0.78);
  position: relative;
  padding-inline: clamp(24px, 4.35vw, 72px);
  overflow: hidden;
  padding-top: clamp(84px, 10vw, 156px);
  padding-bottom: clamp(110px, 13vw, 200px);
  background: var(--work-charcoal);
  color: var(--paper);
}

.work-page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 82% 16%, rgba(212, 175, 55, 0.055), transparent 25%),
    radial-gradient(ellipse at 18% 54%, rgba(244, 240, 232, 0.018), transparent 30%),
    linear-gradient(112deg, rgba(244, 240, 232, 0.014), transparent 37%);
}

.work-page > * { position: relative; z-index: 1; }
.work-page .work-title-row {
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.55fr);
  padding-bottom: clamp(54px, 7vw, 104px);
  border-bottom: 1px solid var(--line);
}
.work-page .work-title-row p { max-width: 330px; margin-bottom: 6px; color: var(--paper-dim); }
.work-page .chapter-label { text-transform: uppercase; }

/* Keep the composition as one continuous 12-column editorial field, not a card grid. */
.portfolio-framework { padding-top: clamp(52px, 7vw, 106px); }
.portfolio-composition {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 1.4vw, 22px);
  row-gap: 0;
  align-items: start;
}

.work-block { min-width: 0; }
.work-block--identity { grid-column: 1 / span 5; }
.work-block--content { grid-column: 6 / -1; margin-top: clamp(60px, 6.4vw, 108px); }
.work-block--digital { grid-column: 1 / -1; margin-top: clamp(130px, 13.2vw, 212px); }
.work-block--physical { grid-column: 1 / span 7; margin-top: clamp(142px, 12vw, 194px); }
.work-block--motion { grid-column: 8 / -1; margin-top: clamp(220px, 18vw, 286px); }

.work-block-heading {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 0 0 10px;
  color: var(--paper);
}
.work-block-number {
  color: var(--gold);
  font: 10px/1 var(--mono);
  letter-spacing: 0.12em;
}
.work-block-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.work-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  background: #10100e;
  border: 1px solid rgba(244, 240, 232, 0.035);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
  transition: transform 0.52s var(--ease), box-shadow 0.52s ease;
}
.work-block--identity .work-media { aspect-ratio: 1.6 / 1; }
.work-block--content .work-media { aspect-ratio: 2.03 / 1; }
.work-block--digital .work-media { aspect-ratio: 2.85 / 1; }
.work-block--physical .work-media { aspect-ratio: 2.36 / 1; }
.work-block--motion .work-media { aspect-ratio: 1.84 / 1; }

.work-media::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(244, 240, 232, 0.028), transparent 36%, rgba(212, 175, 55, 0.035)),
    radial-gradient(circle at 82% 74%, rgba(212, 175, 55, 0.1), transparent 28%);
}
.work-media::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(244, 240, 232, 0.03);
}
.work-block:hover .work-media {
  transform: translateY(-4px);
  box-shadow: 0 42px 94px rgba(0, 0, 0, 0.42);
}

.work-media-meta {
  position: absolute;
  z-index: 6;
  top: 15px;
  inset-inline-start: 16px;
  color: var(--gold);
  font: 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.work-block--digital .work-media-meta { inset-inline-start: auto; inset-inline-end: 16px; }

/* All source images retain their own full pixel composition via contain. */
.work-art {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.asset-card {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: visible;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.asset-card :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--slot-fit, contain);
  object-position: var(--slot-position, center);
}
.asset-card video { background: #090909; }
.work-art--identity .asset-card--primary { inset: 12% 21% 10% 14%; }
.work-art--identity .asset-card--secondary { width: 30%; aspect-ratio: 1; inset-inline-end: 7%; bottom: 9%; }
.work-art--content .asset-card--primary { width: 36%; aspect-ratio: 1; left: 4%; top: 20%; }
.work-art--content .asset-card--secondary { width: 27%; aspect-ratio: 1; left: 42%; top: 10%; right: auto; bottom: auto; }
.work-art--content .asset-card--tertiary { width: 26%; aspect-ratio: 1; right: 4%; bottom: 10%; }
.work-art--digital .asset-card--primary { left: 10%; top: 13%; width: 29%; aspect-ratio: 1; }
.work-art--digital .asset-card--secondary { left: 40%; top: 20%; width: 24%; aspect-ratio: 1; right: auto; bottom: auto; }
.work-art--digital .asset-card--tertiary { right: 17%; top: 30%; width: 17%; aspect-ratio: 1; bottom: auto; }
.work-art--physical .asset-card--primary { left: 8%; top: 12%; width: 46%; height: 76%; }
.work-art--physical .asset-card--secondary { right: 7%; top: 19%; width: 26%; height: 62%; }
.work-art--motion .asset-card--primary { inset: 12% 11%; }

/* Thin reference-like frame language sits behind the real supplied work. */
.work-geometry { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.work-geometry span { position: absolute; display: block; box-sizing: border-box; }
.work-geometry .wire-frame { border: 1px solid var(--work-line); }
.work-geometry .wire-frame--gold { border-color: var(--work-gold); }
.work-geometry .wire-line { height: 1px; background: var(--work-line); transform-origin: 0 50%; }
.work-geometry .wire-line--gold { background: var(--work-gold); }
.work-geometry .wire-orbit { border: 1px solid rgba(212, 175, 55, 0.43); border-radius: 50%; }
.work-geometry--digital .phone-outline { top: 37%; right: 7.2%; width: 11.2%; height: 57%; border-radius: 18px; border-color: rgba(244, 240, 232, 0.25); transform: rotate(5deg); }

.work-geometry--identity .wire-frame--one { width: 52%; height: 84%; left: 28%; top: 8%; transform: rotate(18deg); }
.work-geometry--identity .wire-frame--two { width: 39%; height: 50%; left: 39%; top: 31%; transform: rotate(-25deg); }
.work-geometry--identity .wire-line--one { width: 83%; left: 4%; top: 67%; transform: rotate(-15deg); }
.work-geometry--identity .wire-line--two { width: 70%; left: 30%; top: 18%; transform: rotate(101deg); }
.work-geometry--content .wire-frame--one { width: 47%; height: 46%; left: 16%; top: 34%; transform: rotate(15deg); }
.work-geometry--content .wire-frame--two { width: 47%; height: 64%; right: 12%; top: 15%; transform: rotate(-7deg); }
.work-geometry--content .wire-orbit { width: 44%; height: 44%; left: 35%; top: 27%; transform: rotate(9deg) scaleY(0.72); }
.work-geometry--content .wire-line--one { width: 86%; left: 9%; top: 70%; transform: rotate(-44deg); }
.work-geometry--content .wire-line--two { width: 52%; left: 22%; top: 35%; transform: rotate(67deg); }
.work-geometry--digital .wire-frame--one { left: 9%; top: 12%; width: 72%; height: 75%; border-color: rgba(244, 240, 232, 0.24); }
.work-geometry--digital .wire-frame--two { left: 22%; top: 12%; height: 75%; width: 43%; border-width: 0 1px; transform: none; }
.work-geometry--digital .wire-orbit { width: 31%; height: 51%; left: 31%; top: 24%; transform: scaleY(0.62); }
.work-geometry--digital .wire-line--one { width: 47%; left: 34%; top: 72%; transform: rotate(-18deg); }
.work-geometry--digital .wire-line--two { width: 27%; left: 32%; top: 73%; transform: none; }
.work-geometry--physical .wire-frame--one { width: 50%; height: 50%; left: 11%; top: 30%; transform: rotate(-12deg); }
.work-geometry--physical .wire-frame--two { width: 52%; height: 66%; left: 34%; top: 12%; transform: rotate(-10deg); }
.work-geometry--physical .wire-line--one { width: 86%; left: 6%; top: 80%; transform: rotate(-29deg); }
.work-geometry--physical .wire-line--two { width: 84%; left: 6%; top: 79%; transform: rotate(-6deg); }
.work-geometry--motion .wire-frame--one { width: 76%; height: 68%; left: 8%; top: 17%; transform: rotate(-6deg); }
.work-geometry--motion .wire-frame--two { width: 72%; height: 73%; left: 19%; top: 14%; transform: rotate(8deg); }
.work-geometry--motion .wire-orbit { width: 35%; height: 50%; left: 34%; top: 25%; transform: scaleY(0.76); box-shadow: 0 0 0 12px rgba(212, 175, 55, 0.022), 0 0 40px rgba(212, 175, 55, 0.08); }
.work-geometry--motion .wire-line--one { width: 86%; left: 8%; top: 85%; transform: none; }

.work-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 13px;
}
.work-caption-copy { display: block; min-width: 0; }
.work-project-title,
.work-project-category {
  margin: 0;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.work-project-title { color: var(--paper); }
.work-project-title[hidden] { display: block; visibility: hidden; min-height: 1.62em; }
.work-project-category { margin-top: 6px; color: rgba(244, 240, 232, 0.48); }
.work-caption .work-project-category[hidden] { display: none; }
.work-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.work-tag { display: inline-flex; min-height: 16px; align-items: center; border: 1px solid rgba(212, 175, 55, 0.48); padding: 3px 6px; color: rgba(244, 240, 232, 0.78); font: 7px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.portfolio-view {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.42);
  padding: 2px 0;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  font: 8px var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.portfolio-view:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.portfolio-view-arrow { display: inline-block; font-size: 15px; line-height: 0.7; }
html[lang="ar"] .portfolio-view-arrow { transform: scaleX(-1); }

.work-page [data-work-lang="ar"] { display: none; }
html[lang="ar"] .work-page [data-work-lang="en"] { display: none; }
html[lang="ar"] .work-page [data-work-lang="ar"] { display: inline; }
html[lang="ar"] .work-block-heading { flex-direction: row-reverse; justify-content: flex-end; }

.work-page .proof-note {
  max-width: 690px;
  margin-top: clamp(102px, 12vw, 178px);
  padding-top: 25px;
  border-top: 1px solid var(--line);
  color: var(--paper-dim);
}

/* Native dialog: source artwork and verified names only. */
.portfolio-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid rgba(212, 175, 55, 0.32);
  padding: clamp(18px, 3vw, 34px);
  background: #10100e;
  color: var(--paper);
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.72);
}
.portfolio-dialog::backdrop { background: rgba(3, 3, 3, 0.82); backdrop-filter: blur(12px); }
.portfolio-dialog[open] { animation: portfolioDialogIn 0.24s var(--ease) both; }
@keyframes portfolioDialogIn { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
.portfolio-dialog-shell { display: grid; gap: 22px; }
.portfolio-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.portfolio-dialog-header h2 { margin: 0; color: var(--paper); font: 500 12px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.portfolio-dialog-header .work-project-category { margin-top: 7px; }
.portfolio-dialog-close { display: flex; min-height: 44px; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 8px 12px; background: transparent; color: var(--paper); cursor: pointer; font: 10px var(--mono); }
.portfolio-dialog-close span[aria-hidden="true"] { color: var(--gold); font: 20px/1 var(--sans); }
.portfolio-dialog-media .work-media { width: 100%; max-height: none; box-shadow: none; }
.portfolio-dialog-media .work-media:hover { transform: none; }
.portfolio-dialog-media .work-block--identity .work-media { aspect-ratio: 1.6 / 1; }
.portfolio-dialog-media .work-block--content .work-media { aspect-ratio: 2.03 / 1; }
.portfolio-dialog-media .work-block--digital .work-media { aspect-ratio: 2.85 / 1; }
.portfolio-dialog-media .work-block--physical .work-media { aspect-ratio: 2.36 / 1; }
.portfolio-dialog-media .work-block--motion .work-media { aspect-ratio: 1.84 / 1; }

@media (min-width: 901px) {
  .work-block--physical { width: calc(100% + 1.3vw); }
  .work-block--physical .work-block-heading { margin-bottom: 2px; }
  .work-block--motion { width: calc(100% + 0.85vw); margin-inline-start: 1.4vw; }
  .work-block--content .portfolio-view,
  .work-block--digital .portfolio-view { margin-inline-end: 40px; }
}

@media (max-width: 900px) {
  .work-page .work-title-row { grid-template-columns: 1fr; gap: 22px; }
  .portfolio-composition { column-gap: 18px; }
  .work-block--identity { grid-column: 1 / span 6; }
  .work-block--content { grid-column: 7 / -1; margin-top: 70px; }
  .work-block--digital { margin-top: 110px; }
  .work-block--physical { grid-column: 1 / span 8; margin-top: 112px; }
  .work-block--motion { grid-column: 9 / -1; margin-top: 188px; }
  .work-block--motion .work-block-heading { margin-inline-start: -45%; }
  .work-block--motion .work-media { margin-inline-start: -45%; width: 145%; }
  .work-block--motion .work-caption { margin-inline-start: -45%; }
}

@media (max-width: 680px) {
  .work-page { padding-top: 68px; }
  .portfolio-framework { padding-top: 44px; }
  .portfolio-composition { column-gap: 14px; }
  .work-block--identity { grid-column: 1 / span 10; }
  .work-block--content { grid-column: 3 / -1; margin-top: 34px; }
  .work-block--digital { grid-column: 1 / -1; margin-top: 92px; }
  .work-block--physical { grid-column: 1 / span 10; margin-top: 96px; }
  .work-block--motion { grid-column: 3 / -1; margin-top: 52px; }
  .work-block--motion .work-block-heading,
  .work-block--motion .work-media,
  .work-block--motion .work-caption { width: auto; margin-inline-start: 0; }
  .work-block--digital .work-media { aspect-ratio: 1.47 / 1; }
  .work-block--physical { width: auto; }
  .work-block--physical .work-block-heading { margin-bottom: 10px; }
  .work-block--motion { width: auto; margin-inline-start: 0; }
  .work-art--digital .asset-card--primary { left: 6%; top: 16%; width: 54%; height: 68%; }
  .work-art--digital .asset-card--secondary { right: 6%; top: 7%; width: 31%; height: 42%; }
  .work-art--digital .asset-card--tertiary { right: 6%; bottom: 7%; width: 31%; height: 42%; }
  .work-geometry--digital .phone-outline { display: none; }
  .work-geometry--digital .wire-frame--one { width: 84%; }
  .work-geometry--digital .wire-frame--two { left: 27%; width: 50%; }
  .work-geometry--digital .wire-orbit { width: 48%; left: 22%; }
  .work-geometry--physical .wire-frame--two { width: 61%; left: 30%; }
}

@media (max-width: 480px) {
  .portfolio-composition { display: block; }
  .work-block { width: 88%; }
  .work-block--content,
  .work-block--motion { width: 82%; margin-inline-start: auto; }
  .work-block--digital { width: 100%; }
  .work-block--identity { margin-bottom: 56px; }
  .work-block--content { margin-top: 0; }
  .work-block--digital { margin-top: 88px; }
  .work-block--physical { margin-top: 94px; }
  .work-block--motion { margin-top: 55px; }
  .work-block--content .work-media { aspect-ratio: 1.22 / 1; }
  .work-block--digital .work-media { aspect-ratio: 1.08 / 1; }
  .work-block--physical .work-media,
  .work-block--motion .work-media { aspect-ratio: 1.28 / 1; }
  .work-block-heading { gap: 9px; margin-bottom: 10px; }
  .work-block-heading h2 { font-size: 1.05rem; }
  .work-caption { gap: 10px; padding-top: 11px; }
  .work-caption-copy { gap: 9px; }
  .work-project-title, .work-project-category, .portfolio-view { font-size: 8px; }
  .work-media-meta { top: 11px; inset-inline-start: 11px; font-size: 7px; }
  .work-block--digital .work-media-meta { inset-inline-start: auto; inset-inline-end: 11px; }
  .work-art--identity .asset-card--primary { inset: 12% 19% 11% 10%; }
  .work-art--identity .asset-card--secondary { width: 33%; }
  .work-art--content .asset-card--primary { width: 49%; left: 4%; top: 40%; }
  .work-art--content .asset-card--secondary { width: 34%; left: 61%; top: 8%; right: auto; bottom: auto; transform: none; }
  .work-art--content .asset-card--tertiary { width: 31%; right: 4%; bottom: 8%; transform: none; }
  .work-art--digital .asset-card--primary { left: 6%; top: 28%; width: 55%; height: auto; aspect-ratio: 1; }
  .work-art--digital .asset-card--secondary { right: 6%; top: 7%; width: 35%; height: auto; aspect-ratio: 1; }
  .work-art--digital .asset-card--tertiary { right: 6%; bottom: 7%; width: 32%; height: auto; aspect-ratio: 1; }
  .work-art--physical .asset-card--primary { width: 48%; left: 5%; }
  .work-art--physical .asset-card--secondary { width: 29%; right: 5%; }
  .portfolio-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 16px; }
  .portfolio-dialog-shell { gap: 16px; }
  .portfolio-dialog-header { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-media { transition: none; }
}


/* Portable slot media: only these inner elements change when portfolio.json changes. */
.work-art--content .asset-card--primary {
  inset: 10% 11% 10% 11%;
  width: auto;
  aspect-ratio: auto;
}
.work-art--digital .asset-card--desktop {
  left: 10%;
  top: 13%;
  width: 70%;
  height: 74%;
  aspect-ratio: auto;
}
.work-art--digital .asset-card--mobile {
  right: 8.2%;
  top: 39%;
  width: 9.2%;
  height: 53%;
  aspect-ratio: auto;
}
.work-art--physical .asset-card--primary {
  inset: 12% 9% 12% 8%;
  width: auto;
  height: auto;
}

@media (max-width: 680px) {
  .work-art--content .asset-card--primary { inset: 12% 9%; }
  .work-art--digital .asset-card--desktop { left: 6%; top: 16%; width: 70%; height: 68%; }
  .work-art--digital .asset-card--mobile { right: 7.2%; top: 38%; width: 12%; height: 54%; }
  .work-art--physical .asset-card--primary { inset: 12% 7%; }
}

@media (max-width: 480px) {
  .work-art--content .asset-card--primary { inset: 12% 8%; }
  .work-art--digital .asset-card--desktop { left: 6%; top: 28%; width: 55%; height: 58%; }
  .work-art--digital .asset-card--mobile { right: 7.2%; top: 32%; width: 13%; height: 58%; }
  .work-art--physical .asset-card--primary { inset: 12% 6%; }
}