/* ==========================================================================
   TProM Team — the portfolio

   Each featured project is only a name and a living piece of supplied artwork.
   There is no card, browser chrome, description or visible action UI: the two
   elements themselves are the way into the real project.

   Two decisions worth knowing while reading this file:

   1. A project's palette lights a rim, a mark and a set of bullets. It does
      not repaint the page. Scrolling the portfolio has to stay one continuous
      place — the previous design flooded whole sections with each project's
      own ink, and four projects in a row read as four different websites.

   2. Nothing here pretends to be a screenshot. Until real captures exist the
      screen composes itself from the project's palette and mark (see
      js/mockups.js), which reads as a designed plate rather than as an empty
      browser window.
   ========================================================================== */

.dossier {
  position: relative;
  padding-block: clamp(1.75rem, 3.4vw, 3rem);

  /* The project's own colours, demoted to accents. --accent is what the
     shared primitives (links, rules, bullets) already reference. */
  --accent: var(--proj-accent-soft, var(--violet-bright));
  --accent-deep: var(--proj-accent, var(--violet));
  --glow-a: var(--proj-glow-a, rgba(178, 91, 240, 0.2));
  --glow-b: var(--proj-glow-b, rgba(255, 111, 216, 0.14));
}

/* ── Featured project scene ──────────────────────────────────────────────── */

.project-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.dossier--minimal {
  min-inline-size: 0;
  padding-block: clamp(2.5rem, 5vw, 5.5rem);
  overflow: hidden;
  background: transparent;
}

.project-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
  grid-template-areas: 'name art';
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  min-block-size: min(72vh, 50rem);
  padding-block: clamp(2rem, 4vw, 4.5rem);
  direction: ltr;
}

.dossier--minimal:nth-child(even) .project-scene {
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
  grid-template-areas: 'art name';
}

.project-scene::before {
  content: none;
}

.project-scene__name {
  grid-area: name;
  position: relative;
  z-index: 4;
  min-inline-size: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.4vw, 7.4rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.project-scene__name a {
  display: inline;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: color 0.5s var(--ease), background-size 0.7s var(--ease);
}

.project-scene__name a:hover,
.project-scene__name a:focus-visible {
  color: var(--accent);
  background-size: 100% 2px;
}

.project-scene__art {
  grid-area: art;
  --tx: 0deg;
  --ty: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  min-block-size: clamp(30rem, 55vw, 48rem);
  isolation: isolate;
  transform: perspective(1500px) rotateY(var(--tx)) rotateX(var(--ty));
  transition: transform 0.7s var(--ease-orbit);
  will-change: transform;
}

.project-scene__art.is-tracking {
  transition-duration: 0.18s;
  transition-timing-function: linear;
}

.project-scene__glow {
  position: absolute;
  z-index: -2;
  inline-size: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 44%, var(--glow-a), transparent 52%),
    radial-gradient(circle at 70% 70%, var(--glow-b), transparent 58%);
  filter: blur(28px);
  opacity: 0.72;
  animation: project-glow 7.5s var(--ease-inout) var(--art-delay, 0s) infinite;
  pointer-events: none;
}

.project-scene__orbit {
  position: absolute;
  z-index: -1;
  inline-size: 72%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 28px var(--glow-a);
  pointer-events: none;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .project-scene__orbit {
    border-color: var(--line);
  }
}

.project-scene__orbit--a {
  transform: rotateX(69deg) rotateZ(0deg);
  animation: project-orbit-a 20s linear infinite;
}

.project-scene__orbit--b {
  inline-size: 58%;
  opacity: 0.42;
  transform: rotateY(67deg) rotateZ(0deg);
  animation: project-orbit-b 27s linear reverse infinite;
}

.project-scene__image {
  position: relative;
  z-index: 2;
  display: block;
  inline-size: 100%;
  block-size: min(70vh, 46rem);
  object-fit: contain;
  object-position: var(--art-x, 50%) var(--art-y, 50%);
  scale: var(--art-scale, 1);
  translate: 0 -0.8%;
  rotate: -0.2deg;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.5));
  animation: project-float 8s var(--ease-inout) var(--art-delay, 0s) infinite;
  transition: filter 0.6s var(--ease);
  pointer-events: none;
  will-change: transform;
}

.project-scene__art:hover .project-scene__image,
.project-scene__art:focus-visible .project-scene__image {
  filter: drop-shadow(0 36px 46px rgba(0, 0, 0, 0.62)) brightness(1.06);
}

.project-scene__shine {
  position: absolute;
  z-index: 3;
  inline-size: 38%;
  block-size: 72%;
  inset-inline-start: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.1), transparent 68%);
  filter: blur(24px);
  opacity: 0;
  transform: translateX(-45%) rotate(14deg);
  transition: opacity 0.5s var(--ease), transform 1.2s var(--ease);
  pointer-events: none;
}

.project-scene__art:hover .project-scene__shine,
.project-scene__art:focus-visible .project-scene__shine {
  opacity: 0.55;
  transform: translateX(160%) rotate(14deg);
}

@keyframes project-float {
  0%,
  100% {
    translate: 0 -0.8%;
    rotate: -0.2deg;
  }
  50% {
    translate: 0 1.25%;
    rotate: 0.35deg;
  }
}

@keyframes project-glow {
  0%,
  100% {
    opacity: 0.58;
    scale: 0.96;
  }
  50% {
    opacity: 0.9;
    scale: 1.05;
  }
}

@keyframes project-orbit-a {
  from { transform: rotateX(69deg) rotateZ(0deg); }
  to { transform: rotateX(69deg) rotateZ(360deg); }
}

@keyframes project-orbit-b {
  from { transform: rotateY(67deg) rotateZ(0deg); }
  to { transform: rotateY(67deg) rotateZ(360deg); }
}

/* ── The plate ───────────────────────────────────────────────────────────── */

.dossier__plate {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  grid-template-areas:
    'head head'
    'body visual';
  gap: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.5rem, 3.4vw, 3.5rem);
  padding: clamp(1.35rem, 2.6vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 1.6vw, 24px);
  background:
    radial-gradient(120% 150% at 100% 0%, var(--glow-a), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(10, 7, 24, 0.64);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.dossier__plate:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .dossier__plate:hover {
    border-color: var(--paper-32);
  }
}

/* The alternate side. Only the columns swap — the reading order in the markup
   is unchanged, so this stays one dossier per project in every direction. */
.dossier--alt .dossier__plate {
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  grid-template-areas:
    'head head'
    'visual body';
}

/* A hairline of the project's colour along the top edge. */
.dossier__rim {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 14%;
  z-index: 2;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
}

/* A haze of the project's colour, low in the plate. */
.dossier__aura {
  position: absolute;
  z-index: 0;
  inset-inline: -10%;
  inset-block-end: -45%;
  block-size: 70%;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow-b), transparent 70%);
  pointer-events: none;
}

.dossier__head,
.dossier__body,
.dossier__visual {
  position: relative;
  z-index: 1;
}

/* ── Head row ────────────────────────────────────────────────────────────── */

.dossier__head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem 1.5rem;
  padding-block-end: clamp(0.5rem, 1.2vw, 1rem);
  border-block-end: 1px solid var(--line-soft);
}

.dossier__index {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
html[lang='ar'] .dossier__index {
  font-family: var(--font-ar);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
}
.dossier__index b {
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.dossier__index i {
  inline-size: clamp(1.5rem, 4vw, 3.5rem);
  block-size: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.6;
}

.dossier__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--paper-muted);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
}
html[lang='ar'] .dossier__badge {
  font-family: var(--font-ar);
  letter-spacing: 0;
  font-size: 0.75rem;
}
.dossier__badge::before {
  content: '';
  inline-size: 5px;
  block-size: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* ── Body column ─────────────────────────────────────────────────────────── */

.dossier__body {
  grid-area: body;
  display: grid;
  align-content: center;
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
}

.dossier__identity {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
}
/* The mark sits on its own light tile, the way it does on the product. */
.dossier__logo {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: clamp(3rem, 4.4vw, 3.9rem);
  block-size: clamp(3rem, 4.4vw, 3.9rem);
  flex: none;
  border-radius: 26%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}
.dossier__logo::after {
  content: '';
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-a), transparent 66%);
  z-index: -1;
}
.dossier__logo img {
  inline-size: 74%;
  block-size: 74%;
  object-fit: contain;
  border-radius: 14%;
}

.dossier__name {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
html[lang='ar'] .dossier__name {
  font-family: var(--font-ar);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}
.dossier__name a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.6s var(--ease);
}
html[dir='rtl'] .dossier__name a {
  background-position: 100% 100%;
}
.dossier__name a:hover {
  background-size: 100% 1px;
}

.dossier__tagline {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--paper-80);
  margin-block-start: 0.3rem;
}

.dossier__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.dossier__cat {
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-muted);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
}
html[lang='ar'] .dossier__cat {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.76rem;
}

.dossier__summary {
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--paper-64);
  max-inline-size: 40rem;
}

.dossier__facts {
  display: grid;
  gap: 0.45rem;
}
.dossier__fact {
  position: relative;
  padding-inline-start: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--paper-80);
}
.dossier__fact::before {
  content: '✦';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.1em;
  font-size: 0.66rem;
  color: var(--accent);
}

.dossier__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-block-start: 0.35rem;
}
.dossier__meta-block {
  display: grid;
  gap: 0.45rem;
}
.dossier__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-48);
}
html[lang='ar'] .dossier__label {
  font-family: var(--font-ar);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.74rem;
}
.dossier__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
/* Technology labels are Latin strings — several of them start with a digit
   ("5 languages"), which the bidi algorithm reorders inside an Arabic
   paragraph. Isolating each chip keeps the label as written. */
.dossier__tech {
  direction: ltr;
  unicode-bidi: isolate;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--paper-64);
  background: rgba(255, 255, 255, 0.045);
  border-radius: 6px;
}

.dossier__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block-start: 0.35rem;
}
.dossier__actions .btn--solid {
  --btn-py: 0.85rem;
  --btn-px: 1.5rem;
  background: linear-gradient(100deg, var(--accent-deep), var(--accent));
  color: #0a0616;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 12px 34px var(--glow-a);
}

/* ── Visual column ───────────────────────────────────────────────────────── */

.dossier__visual {
  grid-area: visual;
  align-self: center;
  min-inline-size: 0;
}

/* ══ THE PLATE ════════════════════════════════════════════════════════════
   A project's screen and its address. When a screenshot exists it covers the
   composition; when it does not, the composition is the design. */

.plate {
  display: grid;
  gap: 0.6rem;
  transform: perspective(1400px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
  transition: transform 0.6s var(--ease);
  will-change: transform;
}
.plate.is-tracking {
  transition: transform 0.18s linear;
}

.plate__screen {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 11;
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(
    165deg,
    var(--proj-surface, #16112e) 0%,
    var(--proj-ink, #08061a) 72%
  );
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  isolation: isolate;
}
.plate__screen::after {
  content: '';
  position: absolute;
  inset: 0.7rem;
  z-index: 4;
  pointer-events: none;
  opacity: 0.55;
  background-image: linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px;
  background-position: left top, left top, right top, right top, left bottom, left bottom,
    right bottom, right bottom;
}

/* A slow pass of light down the plate, so a screen with nothing playing on it
   still reads as switched on. */
.plate__scan {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 3;
  block-size: 38%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.055) 52%, transparent);
  transform: translateY(-120%);
  animation: plate-scan 9s var(--ease-inout) infinite;
  pointer-events: none;
}
@keyframes plate-scan {
  0% {
    transform: translateY(-120%);
  }
  55%,
  100% {
    transform: translateY(300%);
  }
}

.plate__aura {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 38% at 28% 22%, var(--glow-a), transparent 66%),
    radial-gradient(42% 42% at 78% 88%, var(--glow-b), transparent 64%);
  opacity: 1.6;
}

/* A faint plan grid — the sense of a layout, without faking one. */
.plate__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 12.5% 20%;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 20%, transparent 78%);
}

.plate__mark {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 30%;
  aspect-ratio: 1;
  border-radius: 24%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
.plate__mark::before {
  content: '';
  position: absolute;
  inset: -13%;
  border-radius: 30%;
  border: 1px solid var(--accent);
  opacity: 0.4;
}
.plate__mark::after {
  content: '';
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-a), transparent 64%);
  z-index: -1;
}
.plate__mark img {
  inline-size: 74%;
  block-size: 74%;
  object-fit: contain;
  border-radius: 12%;
}

/* The screenshot, once there is one. A phone capture is portrait, so it is
   fitted rather than cropped — it stands in the plate like a screen on the
   composed ground instead of being cut down to a landscape strip. */
.plate--portrait .plate__shot {
  inset: 6% 0;
  block-size: 88%;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}

.plate__shot {
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The four supplied project images are transparent objects, not screenshots.
   They float inside the plate while an orbital line and the existing scan pass
   move behind and across them. Pointer tilt happens on the parent `.plate`, so
   all three motions compose without scripting another animation loop. */
.plate--artwork .plate__screen {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(52% 74% at 52% 48%, var(--glow-a), transparent 72%),
    radial-gradient(38% 50% at 78% 72%, var(--glow-b), transparent 72%),
    linear-gradient(155deg, color-mix(in srgb, var(--proj-surface, #16112e) 82%, #fff 3%), var(--proj-ink, #08061a));
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .plate--artwork .plate__screen {
    background:
      radial-gradient(52% 74% at 52% 48%, var(--glow-a), transparent 72%),
      linear-gradient(155deg, var(--proj-surface, #16112e), var(--proj-ink, #08061a));
  }
}

.plate--artwork .plate__screen::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 38px var(--glow-a), 0 0 0 18px rgba(255, 255, 255, 0.012);
  transform: translate(-50%, -50%) rotateX(68deg) rotateZ(0deg);
  animation: plate-art-orbit 18s linear infinite;
  pointer-events: none;
}

.plate--artwork .plate__grid {
  opacity: 0.22;
}

.plate--artwork .plate__aura {
  animation: plate-art-aura 7s var(--ease-inout) infinite;
}

.plate--artwork .plate__shot {
  inset: -6%;
  inline-size: 112%;
  block-size: 112%;
  object-fit: contain;
  object-position: var(--art-x, 50%) var(--art-y, 50%);
  scale: var(--art-scale, 1);
  translate: 0 -0.8%;
  rotate: -0.25deg;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.48));
  animation: plate-art-float 8s var(--ease-inout) var(--art-delay, 0s) infinite;
  will-change: transform;
}

.dossier__visual:hover .plate--artwork .plate__shot {
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.58)) brightness(1.035);
}

@keyframes plate-art-float {
  0%, 100% { translate: 0 -0.8%; rotate: -0.25deg; }
  50% { translate: 0 1.2%; rotate: 0.35deg; }
}

@keyframes plate-art-orbit {
  from { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); }
}

@keyframes plate-art-aura {
  0%, 100% { opacity: 0.72; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.045); }
}

.plate__sheen {
  position: absolute;
  inset-block: 0;
  inset-inline: -40%;
  z-index: 3;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255, 255, 255, 0.13) 48%,
    transparent 58%
  );
  transform: translateX(-38%);
  transition: transform 1.3s var(--ease);
  pointer-events: none;
}
.dossier__visual:hover .plate__sheen,
.more__link:hover .plate__sheen {
  transform: translateX(38%);
}
html[dir='rtl'] .plate__sheen {
  transform: translateX(38%);
}
html[dir='rtl'] .dossier__visual:hover .plate__sheen,
html[dir='rtl'] .more__link:hover .plate__sheen {
  transform: translateX(-38%);
}

/* An address is always read left to right, whatever the page direction. */
.plate__bar span {
  direction: ltr;
  unicode-bidi: isolate;
}
.plate__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-inline: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--paper-muted);
}
.plate__bar svg {
  flex: none;
  opacity: 0.65;
}
.plate__live {
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
  animation: twinkle 3.4s var(--ease-inout) infinite;
}

/* ── Layout at narrower widths ───────────────────────────────────────────── */

@media (max-width: 1080px) {
  .project-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .project-scene {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
    gap: clamp(1.5rem, 5vw, 5rem);
    min-block-size: clamp(30rem, 62vw, 44rem);
  }

  .project-scene__name {
    font-size: clamp(3rem, 6vw, 6rem);
  }

  .project-scene__art,
  .project-scene__image {
    min-block-size: clamp(27rem, 55vw, 41rem);
  }
}

@media (max-width: 980px) {
  .project-scene {
    grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr);
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  .project-scene__name {
    font-size: clamp(2.8rem, 7.2vw, 5rem);
  }

  .project-scene__art {
    min-block-size: clamp(26rem, 62vw, 38rem);
  }

  .project-scene__image {
    block-size: min(66vh, 39rem);
  }

  .dossier__plate,
  .dossier--alt .dossier__plate {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'visual'
      'body';
  }
  .dossier__visual {
    max-inline-size: 34rem;
    inline-size: 100%;
  }
  .plate {
    transform: none;
  }
}

@media (max-width: 760px) {
  .project-gallery {
    gap: 0;
  }

  .dossier--minimal {
    padding-block: 0;
  }

  .project-scene,
  .dossier--minimal:nth-child(even) .project-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'name'
      'art';
    gap: 0.75rem;
    min-block-size: 0;
    padding-block: clamp(2rem, 8vw, 3.5rem);
  }

  .project-scene__name {
    max-inline-size: 9ch;
    font-size: clamp(2.8rem, 14vw, 5rem);
    line-height: 0.9;
  }

  .project-scene__art {
    min-block-size: min(100vw, 30rem);
    margin-block-start: -0.5rem;
  }

  .project-scene__image {
    min-block-size: 0;
    block-size: min(96vw, 29rem);
    scale: var(--art-mobile-scale, 1);
  }

  .project-scene__orbit {
    inline-size: 82%;
  }

  .project-scene__orbit--b {
    inline-size: 66%;
  }
}

@media (max-width: 560px) {
  .dossier__plate {
    padding: 1.1rem;
    border-radius: 14px;
  }
  .dossier__meta {
    gap: 1rem 1.5rem;
  }
}

/* ══ MORE WORK — the compact grid ═════════════════════════════════════════ */

.more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.more__item {
  --accent: var(--proj-accent-soft, var(--violet-bright));
  --glow-a: var(--proj-glow-a, rgba(178, 91, 240, 0.2));
  --glow-b: var(--proj-glow-b, rgba(255, 111, 216, 0.14));
}

.more__link {
  display: grid;
  gap: 0.9rem;
  padding: 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(10, 7, 24, 0.5);
  transition: border-color 0.5s var(--ease), transform 0.6s var(--ease-orbit);
}
.more__link:hover {
  border-color: var(--line);
  transform: translateY(-4px);
}
.more__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
}
.more__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
html[lang='ar'] .more__name {
  font-family: var(--font-ar);
  font-weight: 600;
  letter-spacing: 0;
}
.more__cats {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-48);
}
html[lang='ar'] .more__cats {
  font-family: var(--font-ar);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
}
.more__tagline {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--paper-64);
}

/* ══ REDUCED MOTION ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .project-scene__art,
  .project-scene__shine {
    transform: none !important;
  }

  .project-scene__glow,
  .project-scene__orbit,
  .project-scene__image {
    animation: none;
  }

  .project-scene__image {
    translate: none;
    rotate: none;
  }

  .plate,
  .plate__sheen {
    transform: none !important;
  }
  .plate__live,
  .plate__scan {
    animation: none;
  }
  .plate__scan {
    display: none;
  }
  .plate--artwork .plate__shot,
  .plate--artwork .plate__screen::before,
  .plate--artwork .plate__aura {
    animation: none;
  }
  .plate--artwork .plate__shot {
    translate: none;
    rotate: none;
  }
}