/* ==========================================================================
   DuneForge — projects. Owner: projects agent.
   1. The comic cover (shared by the shelf and the project page)
   2. The shelf in #projects-root: covers, secret teasers, filters, notify
   3. project.html: top bar, hero, story, gallery, trailer, lightbox, footer
   Every class is prefixed pj-. Builds on tokens.css + base.css primitives.
   ========================================================================== */

/* ---- 1. The comic cover ---------------------------------------------------- */
.pj-card {
  position: relative;            /* anchors the status caption and the card link */
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--ink);
  transition: transform var(--dur-2) var(--ease-out);
}

/* Art, masthead and publisher seal are stacked in one grid cell. None of them is
   positioned, so the card link's ::after still anchors to .pj-card. */
.pj-cover {
  --pj-dir: 1;
  display: grid;
  grid-template: "stack" minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--pj-accent, var(--rose));
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-panel);
  container-type: inline-size;
}
[dir="rtl"] .pj-cover { --pj-dir: -1; }
.pj-cover > * { grid-area: stack; min-width: 0; min-height: 0; }

.pj-cover__art { z-index: 0; overflow: hidden; }
.pj-cover__art > img,
.pj-cover__art > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 85%;
  transition: transform var(--dur-3) var(--ease-out);
}

.pj-cover__mast {
  z-index: 1;
  align-self: start;
  padding: calc(2.6rem + 4cqi) 7cqi 0;
}
.pj-cover__title { margin: 0; font-size: inherit; line-height: inherit; }

/* Comic-logo lettering: paper letters, ink outline, a short ink extrusion. */
.pj-mast {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13cqi;              /* refined by JS so the longest word always fits */
  line-height: 0.98;
  color: var(--paper);
  -webkit-text-stroke: 0.09em var(--ink);
  paint-order: stroke fill;
  text-shadow:
    calc(var(--pj-dir) * 0.03em) 0.03em 0 var(--ink),
    calc(var(--pj-dir) * 0.06em) 0.06em 0 var(--ink),
    calc(var(--pj-dir) * 0.09em) 0.09em 0 var(--ink);
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}
:lang(ar) .pj-mast { line-height: 1.3; -webkit-text-stroke-width: 0.07em; }
.pj-mast--break { overflow-wrap: anywhere; }

.pj-cover__seal {
  z-index: 1;
  align-self: end;
  justify-self: end;
  width: max(26px, 11cqi);
  height: auto;
  margin-inline-end: 5cqi;
  margin-block-end: 5cqi;
}

/* Status sticker slapped on the cover's top-start corner, like the "Under wraps"
   sticker on the secret covers. Molten caption boxes stay reserved for narration.
   It follows the cover in the DOM (the title comes first for screen readers). */
.pj-status {
  position: absolute;
  z-index: 2;
  inset-block-start: 14px;
  inset-inline-start: 12px;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 0.22em 0.65em 0.28em;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw-thin) solid var(--ink);
  font-family: var(--font-letter);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  transform: rotate(-3deg);
}
[dir="rtl"] .pj-status { transform: rotate(3deg); }
.pj-status--released { background: var(--ember); }   /* "Out now" pops; ink on ember is 6:1 */

/* Card link: the title is the link, its ::after makes the whole card clickable */
.pj-card__link { color: inherit; text-decoration: none; }
.pj-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--r-panel);
}
.pj-card__link:focus-visible { outline: none; box-shadow: none; }
.pj-card__link:focus-visible::after {
  outline: 3px solid var(--molten);
  outline-offset: 3px;
  box-shadow: 0 0 0 9px var(--ink);
}

@media (hover: hover) {
  .pj-card--link:hover { transform: translateY(-4px); }
  .pj-card--link:hover .pj-cover__art > * { transform: scale(1.045); }
}
.pj-card--link:focus-within { transform: translateY(-4px); }
.pj-card--link:focus-within .pj-cover__art > * { transform: scale(1.045); }

/* Blurb strip under the cover */
.pj-card__info {
  flex: 1;
  margin-block-start: calc(var(--bw) * -1);
  padding: 14px 16px 16px;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
}
.pj-card__tagline {
  font-family: var(--font-letter);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.pj-tags {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.pj-card__info > .pj-tags:first-child { margin-block-start: 0; }
.pj-tags > div { display: flex; align-items: flex-start; gap: 8px; }
.pj-tags dd { margin: 0; }
.pj-tags svg { flex: none; width: 17px; height: 17px; margin-block-start: 2px; color: var(--ink); }

/* Generated typographic cover (no cover image) */
.pj-gen__sky   { fill: var(--pj-accent, var(--rose)); }
.pj-gen__ray   { fill: color-mix(in srgb, var(--pj-accent, var(--rose)) 74%, var(--paper)); }
.pj-gen__sun   { fill: var(--molten); stroke: var(--ink); stroke-width: 3; }
.pj-gen__far   { fill: color-mix(in srgb, var(--pj-accent, var(--rose)) 62%, var(--lilac)); stroke: var(--ink); stroke-width: 2; }
.pj-gen__mid   { fill: color-mix(in srgb, var(--pj-accent, var(--rose)) 52%, var(--ink)); stroke: var(--ink); stroke-width: 3; }
.pj-gen__front { fill: var(--ink); }
.pj-gen__dot   { fill: var(--ink); }
.pj-gen--light .pj-gen__ray { fill: color-mix(in srgb, var(--pj-accent, var(--rose)) 86%, var(--ink)); }
.pj-gen--light .pj-gen__sun { fill: var(--paper-white); }

/* Focus. base.css draws the ring: an ink line between paper rims, which reads on the
   sunset sky (ink 3.3:1 on the darkest sunset) and on paper (13:1). The shelf and
   project.html pin the ink line, so no section recolouring can drop it back to a
   colour that vanishes on sunset; night grounds (footer, trailer panel, lightbox)
   take molten. Components with their own indicator switch the default off:
   the card link, the trailer button and the phone rack. */
.pj-shelf :focus-visible,
.pj-body :focus-visible { outline-color: var(--ink); }
.pj-footer :focus-visible,
.pj-trailer :focus-visible,
.pj-lightbox :focus-visible { outline-color: var(--molten); }

/* ---- 2. The shelf ------------------------------------------------------------ */
/* #projects-root sits directly in the section: it takes the page container width
   itself (same as .wrap), unless a .wrap already provides it. */
.projects-root {
  width: min(100% - 2 * var(--page-pad), var(--container));
  margin-inline: auto;
}
.wrap .projects-root { width: 100%; }

.pj-shelf {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
}

/* Column count is balanced by JS (--pj-cols) so rows never end in a lonely orphan */
.pj-grid {
  display: grid;
  gap: clamp(28px, 3.4vw, 44px) var(--gutter);
  grid-template-columns: repeat(var(--pj-cols, 3), minmax(0, 340px));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pj-grid > li { min-width: 0; }
.pj-grid > li[hidden] { display: none; }
.pj-grid > li > .pj-card { height: 100%; }

/* One project: cover and blurb side by side */
.pj-grid--n1 { grid-template-columns: minmax(0, 1fr); }
.pj-card--feature { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 520px); align-items: end; }
.pj-card--feature .pj-card__info {
  margin: 0;
  margin-inline-start: calc(var(--bw) * -1);
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
  padding: clamp(18px, 2.4vw, 28px);
}
[dir="rtl"] .pj-card--feature .pj-card__info { border-radius: var(--r-panel) 0 0 var(--r-panel); }
.pj-card--feature .pj-card__tagline { font-size: var(--fs-md); }
.pj-card__more { margin-block-start: 18px; }

/* Status filters (4+ projects) */
.pj-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.pj-filter__n { font-weight: 500; color: var(--ink-soft); }
/* Pressed: a solid ink key plus an underline, a cue that survives forced colours
   and does not rely on telling paper from molten. */
.pj-filter[aria-pressed="true"] { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.pj-filter[aria-pressed="true"] .pj-filter__n { color: var(--molten); }
.pj-filter[aria-pressed="true"] > span:first-child { text-decoration: underline 2px; text-underline-offset: 0.22em; }

.pj-demo-note { justify-self: start; max-width: 62ch; font-size: 0.9375rem; }

/* Secret teaser covers: one panorama across three issues */
.pj-teasers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: end;
}
.pj-grid--teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1060px; }
.pj-card--teaser .pj-cover { background: var(--ink); }
[dir="rtl"] .pj-card--teaser .pj-cover__art > img { transform: scaleX(-1); }

.pj-redact {
  z-index: 1;
  align-self: start;
  display: grid;
  justify-items: start;
  gap: 2.6cqi;
  padding: calc(2.6rem + 5cqi) 7cqi 0;
}
.pj-redact__line {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15cqi;
  line-height: 1;
  white-space: nowrap;
  color: var(--molten);
  -webkit-text-stroke: 0.08em var(--ink);
  paint-order: stroke fill;
  user-select: none;
}
/* The marker stroke over the title. Dela Gothic One's capitals fill 18%–96% of the
   line box, so the stroke runs from 13% to 106%, about 1.2 cap heights: only thin
   slivers of the letter tops show where the marker dips; the words cannot be read. */
.pj-redact__line::after {
  content: "";
  position: absolute;
  inset: 13% -0.14em -6%;
  background: var(--ink);
  clip-path: polygon(0 12%, 4% 0, 37% 6%, 70% 1%, 100% 8%, 98% 52%, 100% 92%, 62% 100%, 28% 94%, 2% 100%, 1% 56%);
  transform: rotate(-1.2deg);
}
.pj-redact__line + .pj-redact__line::after { transform: rotate(0.9deg); }
.pj-redact__note {
  margin: 1.6cqi 0 0;
  padding: 0.22em 0.65em 0.28em;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw-thin) solid var(--ink);
  font-family: var(--font-letter);
  font-size: max(0.8125rem, 4.6cqi);
  font-weight: 700;
  line-height: 1.2;
  transform: rotate(-3deg);      /* the same sticker as .pj-status: this is the cover's status */
}
[dir="rtl"] .pj-redact__note { transform: rotate(3deg); }

/* Notify: a balloon asks, the button answers. The balloon's tail points back
   at the covers: up when stacked under them, sideways when beside them. */
.pj-notify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  padding-block-start: 16px;
}
.pj-notify__balloon { margin: 0; font-size: 1.1875rem; font-weight: 600; }
.pj-notify__balloon::before {
  inset-block-start: auto;
  inset-block-end: 100%;
  border-width: 0 16px 18px 0;
  border-color: transparent transparent var(--ink) transparent;
}
.pj-notify__balloon::after {
  inset-block-start: auto;
  inset-block-end: calc(100% - 3px);
  margin-inline-start: 2.5px;
  border-width: 0 11.5px 13px 0;
  border-color: transparent transparent var(--balloon-bg) transparent;
}
[dir="rtl"] .pj-notify__balloon::before { border-width: 0 0 18px 16px; border-color: transparent transparent var(--ink) transparent; }
[dir="rtl"] .pj-notify__balloon::after  { border-width: 0 0 13px 11.5px; border-color: transparent transparent var(--balloon-bg) transparent; }

/* Beside the covers from 1140px (in em, so enlarged text stacks it again). The side
   column is never narrower than its own balloon and button, in any language. */
@media (min-width: 71.25em) {
  .pj-teasers { grid-template-columns: minmax(0, 1060px) minmax(max-content, 1fr); }
  .pj-teasers .pj-notify { flex-direction: column; align-items: flex-start; gap: 22px; padding: 0 0 6px; }
  .pj-teasers .pj-notify__balloon { margin-inline-start: 18px; }
  .pj-teasers .pj-notify__balloon::before {
    inset-block-end: auto;
    inset-block-start: 26%;
    inset-inline-start: auto;
    inset-inline-end: 100%;
    border-width: 0 20px 14px 0;
    border-color: transparent var(--ink) transparent transparent;
  }
  .pj-teasers .pj-notify__balloon::after {
    inset-block-end: auto;
    inset-block-start: calc(26% + 2.5px);
    inset-inline-start: auto;
    inset-inline-end: calc(100% - 3px);
    margin: 0;
    border-width: 0 14px 9.5px 0;
    border-color: transparent var(--balloon-bg) transparent transparent;
  }
  [dir="rtl"] .pj-teasers .pj-notify__balloon::before { border-width: 0 0 14px 20px; border-color: transparent transparent transparent var(--ink); }
  [dir="rtl"] .pj-teasers .pj-notify__balloon::after  { border-width: 0 0 9.5px 14px; border-color: transparent transparent transparent var(--balloon-bg); }
}

/* Phones: the shelf becomes a swipeable rack; the next cover peeks in */
@media (max-width: 639px) {
  .pj-scroll {
    margin-inline: calc(var(--page-pad) * -1);
    padding-inline: var(--page-pad);
    padding-block: 6px 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-pad);
    scrollbar-width: none;
  }
  .pj-scroll::-webkit-scrollbar { display: none; }
  /* Inset ink ring on the sky inside the rack's padding (the rack bleeds to the screen edges) */
  .pj-scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: none; }
  .pj-scroll > .pj-grid,
  .pj-scroll > .pj-grid--teasers {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(76vw, 300px);
    max-width: none;
  }
  .pj-scroll .pj-grid > li { scroll-snap-align: start; }
  .pj-card--feature { grid-template-columns: minmax(0, 1fr); }
  .pj-card--feature .pj-card__info { margin: calc(var(--bw) * -1) 0 0; border-radius: 0 0 var(--r-panel) var(--r-panel); }
}
/* A mouse at high zoom gets this phone layout too: show it a thin scrollbar. */
@media (max-width: 639px) and (pointer: fine) {
  .pj-scroll { scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
  .pj-scroll::-webkit-scrollbar { display: block; height: 8px; }
  .pj-scroll::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 4px; }
}

/* ---- 3. project.html ----------------------------------------------------------- */
.pj-body {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--sky-sunset-top) 0%, var(--sky-sunset-bottom) 100%);
}
.pj-main { flex: 1; padding-block: clamp(8px, 2vw, 24px) clamp(56px, 8vw, 104px); }
.pj-main:focus { outline: none; }

.pj-topbar { padding-block: 14px; }
/* Brand at the start; the link and the language switch keep to the end edge, also
   when they wrap onto a second row on narrow phones. */
.pj-topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 20px; }
.pj-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline-end: auto;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.pj-brand img { width: 40px; height: 40px; }
.pj-backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 4px;
  color: var(--ink);
  font-family: var(--font-letter);
  font-weight: 700;
  text-decoration: none;
}
.pj-backlink:hover { text-decoration: underline; }
.pj-backlink svg { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .pj-backlink svg { transform: scaleX(-1); }
.pj-topbar .lang-switch { color: var(--ink); }

/* Hero: the cover panel + the facts panel */
.pj-hero {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: stretch;
}
.pj-hero__cover { align-self: start; }
.pj-hero__info { display: flex; flex-direction: column; gap: 20px; }
.pj-hero__title { font-size: var(--fs-h1); line-height: var(--lh-snug); overflow-wrap: break-word; }
.pj-hero__tagline {
  max-width: 34ch;
  font-family: var(--font-letter);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.4;
}
.pj-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 22px;
  margin: 0;
  padding-block-start: 18px;
  border-block-start: var(--bw-thin) solid var(--ink);
}
.pj-facts dt { color: var(--ink-soft); font-weight: 500; }
.pj-facts dd { margin: 0; font-weight: 600; }
.pj-links { display: grid; gap: 12px; margin-block-start: auto; padding-block-start: 6px; }
.pj-links__label { font-family: var(--font-letter); font-weight: 700; }
.pj-links__row { display: flex; flex-wrap: wrap; gap: 14px; }

.pj-section { margin-block-start: var(--gutter); }
.pj-section h2 { font-size: var(--fs-xl); margin-block-end: 18px; }
.pj-story p { max-width: 62ch; white-space: pre-line; }
.pj-row { display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr); margin-block-start: var(--gutter); }
.pj-row > .pj-section { margin: 0; }
@media (min-width: 1024px) {
  .pj-row--split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: stretch; }
}

/* Gallery thumbnails: small panels that share the strip (never wider than 420px each) */
.pj-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--gutter);
  max-width: calc(var(--pj-n, 3) * 420px + (var(--pj-n, 3) - 1) * var(--gutter));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pj-thumb {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--night-2);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-panel);
  aspect-ratio: 16 / 10;
}
.pj-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
@media (hover: hover) { .pj-thumb:hover img { transform: scale(1.05); } }
/* Thumbnails take base.css's ink ring (they used to force ember: 2.4:1 on paper). */

/* Trailer: nothing loads from YouTube until the button is pressed */
.pj-trailer__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night);
  border: var(--bw) solid var(--night-line);
  border-radius: var(--r-panel);
}
.pj-trailer__play {
  display: grid;
  grid-template: "stack" minmax(0, 1fr) / minmax(0, 1fr);
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
}
.pj-trailer__play > * { grid-area: stack; min-width: 0; min-height: 0; }
.pj-trailer__poster { overflow: hidden; }
.pj-trailer__poster > img,
.pj-trailer__poster > svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.pj-trailer__cta {
  z-index: 1;
  place-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 12px;
  background: var(--molten);
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  font-family: var(--font-letter);
  font-size: 1.125rem;
  font-weight: 700;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.pj-trailer__cta svg { width: 40px; height: 40px; flex: none; }
.pj-trailer__play:hover .pj-trailer__cta { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.pj-trailer__play:hover .pj-trailer__poster > * { transform: scale(1.03); }
/* The whole poster is the button; the ring goes on the CTA pill: the site's ink line
   between paper rims (base.css), so it reads over any poster art. */
.pj-trailer__play:focus-visible { outline: none; box-shadow: none; }
.pj-trailer__play:focus-visible .pj-trailer__cta {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 4px 0 var(--ink), 0 0 0 7px var(--paper);
}
.pj-trailer__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pj-trailer__note { margin-block-start: 12px; font-size: 0.9375rem; color: var(--paper); opacity: 0.86; }

.pj-back { margin-block-start: clamp(28px, 4vw, 44px); }

/* Lightbox */
.pj-lock { overflow: hidden; }
.pj-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(12px, 3vw, 36px) clamp(12px, 8vw, 104px);
  border: 0;
  background: rgb(21 15 58 / 0.94);
  color: var(--paper);
  overscroll-behavior: contain;
}
.pj-lightbox[open] { display: grid; place-items: center; }
.pj-lightbox::backdrop { background: transparent; }
.pj-lightbox__figure { display: grid; justify-items: center; gap: 12px; max-width: 100%; margin: 0; }
.pj-lightbox__img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  background: var(--night-2);
  border: var(--bw) solid var(--paper);
  border-radius: var(--r-panel);
}
.pj-lightbox__caption { max-width: 60ch; text-align: center; font-size: 1rem; }
.pj-lightbox__counter { margin: 0; font-family: var(--font-letter); font-weight: 700; font-size: 0.9375rem; }
.pj-lightbox__btn {
  position: fixed;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.pj-lightbox__btn svg { width: 24px; height: 24px; }
.pj-lightbox__btn:hover { background: var(--molten); }
.pj-lightbox__btn:focus-visible { outline: 3px solid var(--molten); outline-offset: 3px; }
.pj-lightbox__close { inset-block-start: 14px; inset-inline-end: 14px; }
.pj-lightbox__prev,
.pj-lightbox__next { inset-block-start: calc(50% - 26px); }
.pj-lightbox__prev { inset-inline-start: 14px; }
.pj-lightbox__next { inset-inline-end: 14px; }
[dir="rtl"] .pj-lightbox__prev svg,
[dir="rtl"] .pj-lightbox__next svg { transform: scaleX(-1); }
/* Phones: the picture fills the width, so the arrows move under it */
@media (max-width: 639px) {
  .pj-lightbox { padding-block-end: 88px; }
  .pj-lightbox__img { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); }
  .pj-lightbox__prev,
  .pj-lightbox__next { inset-block-start: auto; inset-block-end: max(16px, env(safe-area-inset-bottom)); }
}

/* Not found */
.pj-missing {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 620px);
  justify-content: center;
  gap: var(--gutter);
  align-items: end;
}
.pj-missing .panel { display: grid; gap: 18px; justify-items: start; padding-block-start: clamp(56px, 6vw, 72px); }
.pj-missing h1 { font-size: var(--fs-h2); }

/* Footer */
.pj-footer { padding-block: 26px; background: var(--night); color: var(--paper); }
.pj-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 0.9375rem; }
.pj-footer a { display: inline-block; padding-block: 11px; color: var(--molten); }   /* 44px+ tap target */
/* projects.js renders the page at DOMContentLoaded. Until then the footer stays
   hidden, so it never paints high up and then jumps below the fold (layout shift).
   Should the script never run, the footer appears after 2.5 s anyway. */
.js .pj-body:not(.pj-ready) .pj-footer { visibility: hidden; animation: pj-show 0s 2.5s forwards; }
@keyframes pj-show { to { visibility: visible; } }
.pj-footer .lang-switch { color: var(--paper); }
.pj-footer .lang-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.pj-noscript { margin-block: 24px; }

@media (max-width: 1023px) {
  .pj-hero { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .pj-hero,
  .pj-missing { grid-template-columns: minmax(0, 1fr); }
  .pj-hero__cover,
  .pj-missing__cover { width: min(100%, 340px); }
  .pj-brand { font-size: 1.125rem; }
  .pj-brand img { width: 34px; height: 34px; }
  .pj-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pj-facts dd + dt { margin-block-start: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-card,
  .pj-cover__art > *,
  .pj-thumb img,
  .pj-trailer__poster > * { transition: none; }
  .pj-card--link:hover,
  .pj-card--link:focus-within,
  .pj-card--link:hover .pj-cover__art > *,
  .pj-card--link:focus-within .pj-cover__art > *,
  .pj-thumb:hover img,
  .pj-trailer__play:hover .pj-trailer__poster > * { transform: none; }
}

/* Without JavaScript the language switch cannot work: hide it */
html:not(.js) .pj-topbar .lang-switch { display: none; }