/* ═══════════════════════════════════════════
   PROYECTO — detail page (/proyectos/<slug>)
   Tokens, buttons and the closing CTA come from styles.css; the card
   look-and-feel follows proyectos.css. Every block is optional in the
   markup, so each rule here has to hold up with its neighbours missing.
   ═══════════════════════════════════════════ */

/* ── HERO ── */
.pd-hero {
  position: relative;
  background: var(--grafito);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 46vh, 460px);
}
.pd-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.pd-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(14,17,17,.88) 0%, rgba(14,17,17,.35) 60%, rgba(14,17,17,.55) 100%),
    linear-gradient(to right, rgba(14,17,17,.7) 0%, rgba(14,17,17,0) 70%);
}
.pd-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 6.5rem 2rem 2.5rem;
}

.pd-hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.pd-hero-tags:empty { display: none; }
.pd-tag {
  padding: .25rem .7rem;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--copper);
}
.pd-tag--live { background: #10b981; }

.pd-title {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 900px;
  margin: 0 0 .75rem;
}
/* ── PHOTO + FACTS / ASIDE ── */
.pd-main { padding: 2.5rem 2rem 1rem; }
.pd-main-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}
.pd-main-grid--single { grid-template-columns: minmax(0, 880px); justify-content: center; }

.pd-media-card,
.pd-panel {
  background: #fff;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Small copper details: a warm shadow on each card, a short copper bar under the
   panel titles and copper icons. */
.pd-media-card,
.pd-panel {
  position: relative;
  box-shadow: 0 14px 34px -8px rgba(196,106,43,.28), 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .3s ease, transform .3s ease;
}
.pd-panel:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -8px rgba(196,106,43,.38), 0 2px 8px rgba(0,0,0,.06); }
.pd-panel-title::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  margin-top: .45rem;
  border-radius: 2px;
  background: var(--copper);
}
.pd-photo { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--cream-300); }
/* The next photo fades in over the current one (see the script). */
.pd-photo .pd-photo-fade { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.pd-photo .pd-photo-fade.is-in { opacity: 1; transform: none; }
.pd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-thumbs { display: flex; gap: .5rem; padding: .75rem 1rem 0; overflow-x: auto; }
.pd-thumb {
  flex: 0 0 84px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-300);
  cursor: pointer;
  opacity: .7;
  transition: var(--trans);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { opacity: 1; }
.pd-thumb.is-active { border-color: var(--copper); opacity: 1; }

.pd-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pd-photo + .pd-stats,
.pd-thumbs + .pd-stats { margin-top: 1rem; border-top: 1px solid var(--cream-300); }
.pd-stat {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.1rem 1.25rem;
}
.pd-stat + .pd-stat { border-left: 1px solid var(--cream-300); }
.pd-stat-logo { height: 26px; width: auto; max-width: 96px; object-fit: contain; display: block; }
.pd-stat-icon svg { width: 22px; height: 22px; color: var(--copper); }
.pd-stat-label { font-size: .75rem; color: var(--text-muted); margin-top: .35rem; }
.pd-stat-value {
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  color: var(--grafito);
  line-height: 1.3;
}

.pd-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.pd-panel { padding: 1.4rem 1.5rem 1.5rem; }
.pd-panel-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--grafito);
  margin: 0 0 1rem;
}

.pd-services { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.pd-service { display: flex; gap: .85rem; align-items: flex-start; }
.pd-service + .pd-service { padding-top: 1rem; border-top: 1px solid var(--cream-300); }
.pd-service-icon { flex: 0 0 auto; color: var(--copper); }
.pd-service-icon svg { width: 22px; height: 22px; display: block; }
.pd-service h3 { font-size: .92rem; font-weight: 700; color: var(--grafito); margin: 0; }
.pd-service p { font-size: .8rem; color: var(--text-secondary); margin: .15rem 0 0; line-height: 1.5; }

.pd-machines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pd-machine {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .5rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: var(--trans);
}
a.pd-machine:hover { background: var(--cream-200); }
.pd-machine-img {
  flex: 0 0 72px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--cream-300);
  overflow: hidden;
}
.pd-machine-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-machine-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pd-machine-name { font-size: .85rem; font-weight: 700; color: var(--grafito); line-height: 1.3; }
.pd-machine-type { font-size: .75rem; color: var(--text-muted); }
.pd-machine-text { flex: 1 1 auto; }
.pd-machine-cta {
  flex: 0 0 auto;
  padding: .45rem .9rem;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: var(--copper);
  border: 1.5px solid var(--copper);
  border-radius: var(--radius);
  text-decoration: none;
  transition: var(--trans);
}
.pd-machine-cta:hover { background: var(--copper-dark); border-color: var(--copper-dark); transform: translateY(-1px); }

/* ── ABOUT ── */
/* "Sobre el proyecto" follows the site's own story section (Nosotros): cream
   background with the copper diagonal lines and circle outline, a copper tag
   over the title, a lead paragraph with the copper rule and body copy in the
   same sizes. What is added is a dark panel behind the title that dissolves
   into the cream before the text starts. */
.pd-about {
  position: relative;
  margin-top: 2.5rem;
  padding: 5rem 2rem;
  background: #faf9f7;
  overflow: hidden;
  /* Where the title column ends (container centred at 1280px, 2rem gutters,
     .9fr / 1.6fr split, 4rem gap) and where the fade starts: 16rem earlier. */
  --pd-title-end: calc(max(0px, (100% - 1280px) / 2) + 2rem + (min(100%, 1280px) - 8rem) * .36);
  --pd-fade: calc(var(--pd-title-end) - 16rem);
}
/* The dark panel: eased stops, so there is no visible edge. It ends at the text. */
.pd-about::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(14,17,17,.96) 0,
    rgba(14,17,17,.96) var(--pd-fade),
    rgba(14,17,17,0.95) calc(var(--pd-fade) + 2.0rem),
    rgba(14,17,17,0.92) calc(var(--pd-fade) + 4.0rem),
    rgba(14,17,17,0.86) calc(var(--pd-fade) + 6.0rem),
    rgba(14,17,17,0.77) calc(var(--pd-fade) + 8.0rem),
    rgba(14,17,17,0.65) calc(var(--pd-fade) + 10.0rem),
    rgba(14,17,17,0.51) calc(var(--pd-fade) + 12.0rem),
    rgba(14,17,17,0.36) calc(var(--pd-fade) + 14.0rem),
    rgba(14,17,17,0.21) calc(var(--pd-fade) + 16.0rem),
    rgba(14,17,17,0.09) calc(var(--pd-fade) + 18.0rem),
    rgba(14,17,17,0) calc(var(--pd-fade) + 20rem));
}
/* The site's story-section decoration, kept on the right side. */
.pd-about::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(196,106,43,.04) 40px, rgba(196,106,43,.04) 42px);
  pointer-events: none;
}
.pd-about-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
  gap: 4rem;
  align-items: start;
}
.pd-about-tag {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 1rem;
}
.pd-about .pd-section-title {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
}
.pd-section-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--grafito);
  margin: 0 0 1rem;
}
/* Same type as the site's .story-lead / .story-body. */
.pd-prose { max-width: 720px; }
.pd-prose p { font-size: .95rem; color: var(--text-secondary); line-height: 1.85; margin: 0 0 1.25rem; }
.pd-prose p:first-child {
  font-size: 1.125rem;
  color: var(--grafito);
  font-weight: 600;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--copper);
}
.pd-prose ul, .pd-prose ol { margin: 0 0 1.1rem 1.25rem; }
/* "Sobre el proyecto": the activities read as a path. A copper line runs down
   the side, each step opens a dot on it and slides in as it scrolls into view
   (the .pd-anim / .is-in classes come from the script in the page). */
.pd-about .pd-prose h3 {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 2.25rem 0 1.5rem;
}
.pd-about .pd-prose ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.pd-about .pd-prose li { position: relative; padding: 0 0 1.9rem 2.4rem; }
.pd-about .pd-prose li:last-child { padding-bottom: 0; }
/* The editor wraps each item in a <p>: undo the lead-paragraph style there. */
.pd-about .pd-prose li p { margin: 0; padding: 0; border: 0; font-size: .95rem; font-weight: 400; line-height: 1.75; color: var(--text-secondary); }
.pd-about .pd-prose li strong {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--grafito);
}
.pd-about .pd-prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .3rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 5px rgba(196,106,43,.18);
}
.pd-about .pd-prose li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 1.4rem;
  bottom: -.2rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--copper), rgba(196,106,43,.15));
  transform-origin: top;
}
.pd-about .pd-prose li:last-child::after { display: none; }
/* Entrance: only when the script marked the list, so without it all stays visible. */
.pd-about .pd-prose .pd-anim li { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.pd-about .pd-prose .pd-anim li:not(.is-in) { opacity: 0; transform: translateX(-1.5rem); }
.pd-about .pd-prose .pd-anim li::before { transition: transform .5s cubic-bezier(.3,1.6,.5,1) .15s; }
.pd-about .pd-prose .pd-anim li:not(.is-in)::before { transform: scale(0); }
.pd-about .pd-prose .pd-anim li::after { transition: transform .7s ease .3s; }
.pd-about .pd-prose .pd-anim li:not(.is-in)::after { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) {
  .pd-about .pd-prose .pd-anim li, .pd-about .pd-prose .pd-anim li::before, .pd-about .pd-prose .pd-anim li::after { transition: none; }
}
.pd-prose img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* "Sobre el proyecto" with an image or video beside the text: the title and the
   media stack in the left column, over a dark panel that stays solid under both
   and fades out right before the text. */
/* Image beside the text: no frame. The picture fills the left side of the
   section, dissolves toward the text and meets it in a copper glow; a dark
   veil at the top keeps the title readable. */
.pd-about--img::after {
  background: linear-gradient(to right,
    rgba(196,106,43,0) calc(var(--pd-title-end) - 7rem),
    rgba(196,106,43,.3) calc(var(--pd-title-end) - 1rem),
    rgba(196,106,43,.16) calc(var(--pd-title-end) + 2.5rem),
    rgba(196,106,43,0) calc(var(--pd-title-end) + 6rem));
}
.pd-about-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--pd-title-end) + 3rem);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 12rem), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 12rem), transparent 100%);
}
.pd-about-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(14,17,17,.82) 0, rgba(14,17,17,.35) 38%, rgba(14,17,17,.12) 62%, rgba(14,17,17,.5) 100%);
}
.pd-about-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-about--img .pd-section-title { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.pd-about--media { --pd-fade: calc(var(--pd-title-end) + .5rem); }
.pd-about--media::after {
  background: linear-gradient(to right,
    rgba(14,17,17,.96) 0,
    rgba(14,17,17,.96) var(--pd-fade),
    rgba(14,17,17,.9) calc(var(--pd-fade) + .5rem),
    rgba(14,17,17,.72) calc(var(--pd-fade) + 1rem),
    rgba(14,17,17,.45) calc(var(--pd-fade) + 1.5rem),
    rgba(14,17,17,.18) calc(var(--pd-fade) + 2rem),
    rgba(14,17,17,0) calc(var(--pd-fade) + 2.5rem));
}
.pd-about--media .pd-about-inner { gap: 0 4rem; grid-template-rows: auto 1fr; }
/* With a video the player is as wide as the dark side allows: it bleeds left of
   the container and is centred in the dark panel, so the text column stays
   where it is. 100cqw is the section's own width (it is a size container).
   Below 1200px that side is too narrow for a good player, so tablets (up to
   1199px) use the stacked layout of phones, with the player at full width. */
@media (min-width: 1200px) {
  .pd-about--media { container-type: inline-size; }
  .pd-about--media .pd-about-media {
    --pd-gl: max(0px, (100cqw - 1280px) / 2);
    margin-left: calc(-1 * var(--pd-gl) - .5rem);
    width: calc(var(--pd-gl) + (min(100cqw, 1280px) - 8rem) * .36 - 1rem);
  }
}
.pd-about--media .pd-about-head { grid-column: 1; grid-row: 1; }
.pd-about--media .pd-prose { grid-column: 2; grid-row: 1 / span 2; }
.pd-about-media { grid-column: 1; grid-row: 2; margin-top: 2rem; position: sticky; top: 6.5rem; }
.pd-video {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(196,106,43,.55);
}
.pd-video { position: relative; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; background: #0e1111; cursor: pointer; }
.pd-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, opacity .3s ease; opacity: .85; }
.pd-video:hover img { transform: scale(1.04); opacity: 1; }
.pd-video { transition: aspect-ratio .5s cubic-bezier(.2,.7,.2,1); }
.pd-video.is-swapping img, .pd-video.is-swapping:hover img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pd-photo .pd-photo-fade, .pd-player, .pd-video, .pd-video-frame { transition: none; }
}
.pd-video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 4.25rem;
  height: 4.25rem;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--copper);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(196,106,43,.28);
  transition: transform .25s ease;
}
.pd-video:hover .pd-video-play { transform: translate(-50%, -50%) scale(1.08); }
.pd-video-play svg { width: 1.9rem; height: 1.9rem; margin-left: .2rem; }
.pd-about-media { position: sticky; }
iframe.pd-video { border: 0; }
.pd-player { position: relative; }
/* Portrait video: a 9:16 player, so there are no black bars at the sides. */
.pd-player { width: 100%; margin: 0 auto; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.pd-player.is-vertical { width: min(100%, 19rem); }
.pd-player.is-vertical .pd-video { aspect-ratio: 9 / 16; }
.pd-vthumb.is-vertical { flex-basis: 58px; aspect-ratio: 9 / 16; }
/* Thumbnails of the project's videos (shown when there is more than one). */
/* The thumbnails sit on a copper band that starts solid at the left and melts
   away toward the right, so it never ends in a hard rectangle. */
.pd-vthumbs {
  display: flex;
  gap: .6rem;
  margin-top: .85rem;
  padding: .7rem 2.5rem .7rem .75rem;
  overflow-x: auto;
  background: linear-gradient(to right,
    var(--copper) 0,
    var(--copper-light) 30%,
    rgba(196,106,43,.55) 65%,
    rgba(196,106,43,.18) 88%,
    rgba(196,106,43,0) 100%);
  border-radius: var(--radius) 0 0 var(--radius);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.5) transparent;
}
.pd-vthumb {
  position: relative;
  flex: 0 0 104px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0e1111;
  cursor: pointer;
  opacity: .85;
  transition: var(--trans);
}
.pd-vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-vthumb:hover { opacity: 1; border-color: rgba(255,255,255,.75); }
.pd-vthumb.is-active { border-color: #fff; opacity: 1; box-shadow: 0 0 0 2px rgba(14,17,17,.35); }
.pd-vthumb-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.7rem;
  height: 1.7rem;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(14,17,17,.62);
  color: #fff;
}
.pd-vthumb-play svg { width: 1rem; height: 1rem; margin-left: .1rem; }
/* Hover preview / click player: sits over the poster. */
/* The player is laid out at 960x540 and scaled down to the box (see the script):
   YouTube picks the quality from the player's own size, so a box this small
   would otherwise get 240p. */
.pd-video-frame { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; aspect-ratio: auto; background: transparent; opacity: 0; transition: opacity .35s ease; }
.pd-video-frame.is-playing { opacity: 1; }

/* ── TESTIMONIAL ── */
.pd-quote {
  position: relative;
  margin-top: 2.5rem;
  background: var(--grafito);
  color: #fff;
  overflow: hidden;
}
.pd-quote-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.pd-quote-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14,17,17,.92) 0%, rgba(14,17,17,.7) 55%, rgba(14,17,17,.45) 100%);
}
.pd-quote-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 2rem;
}
.pd-quote-mark {
  display: block;
  font-family: var(--font-head);
  font-size: 4rem;
  line-height: .6;
  color: var(--copper-light);
  margin-bottom: .75rem;
}
.pd-quote blockquote {
  max-width: 640px;
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
  font-weight: 400;
}
.pd-quote-author { display: flex; align-items: center; gap: .85rem; }
.pd-quote-author strong { display: block; font-size: .95rem; }
.pd-quote-author span { font-size: .8rem; color: rgba(255,255,255,.65); }

/* ── OTHER PROJECTS ── */
.pd-related { position: relative; overflow-x: clip; padding: 3rem 2rem 3.5rem; }
.pd-related-inner { max-width: 1280px; margin: 0 auto; }
.pd-related-title { margin-bottom: 1.25rem; }
/* The cards sit inside a solid copper band: the grid is the band, and the
   shadow / clip-path pair paints it from one screen edge to the other. */
.pd-related-grid {
  padding: 1.5rem 0;
  background: var(--copper);
  box-shadow: 0 0 0 100vmax var(--copper);
  clip-path: inset(0 -100vmax);
}

.pd-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (min-width: 1025px) {
  .pd-rcard:nth-child(n+4):not(.pd-rcard--all) { display: none; }
}
.pd-rcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: var(--trans);
}
.pd-rcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pd-rcard-img { display: block; aspect-ratio: 16 / 10; background: var(--cream-300); overflow: hidden; }
.pd-rcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-rcard-body { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem 1rem; }
.pd-rcard-title { font-size: .9rem; font-weight: 700; color: var(--grafito); line-height: 1.3; }
.pd-rcard-loc { font-size: .75rem; color: var(--text-muted); }
.pd-rcard-body { flex: 1; }
.pd-rcard-btn {
  margin-top: auto;
  padding: .65rem;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: var(--grafito);
  border: 1.5px solid var(--grafito);
  border-radius: var(--radius);
  transition: var(--trans);
}
.pd-rcard-loc + .pd-rcard-btn, .pd-rcard-title + .pd-rcard-btn { margin-top: .6rem; }
.pd-rcard:hover .pd-rcard-btn { background: var(--copper); border-color: var(--copper); }

/* ── CLOSING CTA ──
   The shared .quick-cta is dark; on the detail page it sits on the cream
   background instead, so the text flips to the dark palette. */
.quick-cta.pd-cta { background: transparent; padding-top: 1rem; padding-bottom: 4rem; }
.quick-cta.pd-cta::before { display: none; }
.quick-cta.pd-cta h2 { color: var(--grafito); }
.quick-cta.pd-cta p { color: var(--text-secondary); }

/* ── RESPONSIVE ── */
@media (min-width: 961px) and (max-width: 1199px) {
  .pd-about--media { --pd-pad-x: 2rem; --pd-pad-y: 5rem; }
  .pd-about--media .pd-about-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 1.5rem; }
  .pd-about--media::before { width: 100%; }
  .pd-about--media::after { display: none; }
  .pd-about--media .pd-about-head, .pd-about--media .pd-prose, .pd-about--media .pd-about-media { grid-column: 1; grid-row: auto; position: relative; top: auto; margin-top: 0; }
  .pd-about--media .pd-about-head { margin-bottom: 1.5rem; }
  /* A landscape tablet would make the player taller than the screen: cap it. */
  .pd-about--media .pd-player:not(.is-vertical) { max-width: 820px; }
  .pd-about--media .pd-about-head::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(-1 * var(--pd-pad-y));
    bottom: -2.5rem;
    left: calc(-1 * var(--pd-pad-x));
    right: calc(-1 * var(--pd-pad-x));
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(14,17,17,1) 0,
      rgba(14,17,17,1) calc(100% - 2.5rem),
      rgba(14,17,17,.7) calc(100% - 1.75rem),
      rgba(14,17,17,.35) calc(100% - 1rem),
      rgba(14,17,17,.1) calc(100% - .4rem),
      rgba(14,17,17,0) 100%);
  }
}
/* Phones and tablets, video section: the text keeps its place, then comes the
   player (and its gallery) and the list of activities last. The activities live
   inside the text block, so that block stops being a box (display: contents)
   and its children are ordered one by one. */
@media (max-width: 1199px) {
  .pd-about.pd-about--media .pd-about-inner { gap: 0; }
  .pd-about--media .pd-prose { display: contents; }
  .pd-about--media .pd-prose > * { order: 1; max-width: 720px; }
  .pd-about--media .pd-about-media { order: 2; margin: 1.5rem 0 .5rem; }
  .pd-about--media .pd-prose > h3,
  .pd-about--media .pd-prose > h3 ~ *,
  .pd-about--media .pd-prose > ul { order: 3; }
}
@media (max-width: 960px) {
  .pd-main-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-about-inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  /* Stacked: the dark band sits behind the title only. It is drawn by the head
     itself, so it follows the title's real height and its fade ends before the
     text starts (a fixed-height gradient used to run over the first paragraph). */
  .pd-about { --pd-pad-x: 2rem; --pd-pad-y: 5rem; }
  .pd-about::after, .pd-about--media::after { display: none; }
  .pd-about:not(.pd-about--img) .pd-about-head { position: relative; margin-bottom: 1.5rem; }
  .pd-about:not(.pd-about--img) .pd-about-head::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(-1 * var(--pd-pad-y));
    bottom: -2.5rem;
    left: calc(-1 * var(--pd-pad-x));
    right: calc(-1 * var(--pd-pad-x));
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(14,17,17,1) 0,
      rgba(14,17,17,1) calc(100% - 2.5rem),
      rgba(14,17,17,.7) calc(100% - 1.75rem),
      rgba(14,17,17,.35) calc(100% - 1rem),
      rgba(14,17,17,.1) calc(100% - .4rem),
      rgba(14,17,17,0) 100%);
  }
  .pd-about::before { width: 100%; }
  /* Image mode on small screens: the picture is a band at the top and the tag
     and title sit under it, in dark type on the cream, so they keep their contrast. */
  .pd-about--img { --pd-img-h: 18rem; }
  .pd-about--img::after { display: none; }
  .pd-about-bg { bottom: auto; width: 100%; height: var(--pd-img-h);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 60%, transparent 100%); }
  .pd-about-bg::after { display: none; }
  .pd-about--img .pd-about-head { margin-top: calc(var(--pd-img-h) - 5rem + 1rem); }
  .pd-about--img .pd-section-title { color: var(--grafito); text-shadow: none; }
  .pd-about--img .pd-about-tag { color: var(--copper); }
  .pd-about--media .pd-about-inner { gap: 1.5rem; }
  .pd-about--media .pd-about-head, .pd-about--media .pd-prose, .pd-about-media { grid-column: 1; grid-row: auto; position: relative; top: auto; margin-top: 0; }
}

/* "See all" card: closes the grid on every width. */
.pd-rcard--all {
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--grafito);
  color: #fff;
}
.pd-rcard-all-label { font-family: var(--font-head); font-size: 1rem; font-weight: 800; line-height: 1.3; }
.pd-rcard--all svg { width: 22px; height: 22px; color: var(--copper-light); transition: var(--trans); }
.pd-rcard--all:hover svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .pd-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pd-hero-inner { padding: 5.5rem 1.25rem 2rem; }
  .pd-main, .pd-about, .pd-related { padding-left: 1.25rem; padding-right: 1.25rem; }
  .pd-about { padding-top: 3rem; padding-bottom: 3rem; --pd-pad-x: 1.25rem; --pd-pad-y: 3rem; }
  .pd-about--img .pd-about-head { margin-top: calc(var(--pd-img-h) - 3rem + 1rem); }
  .pd-quote-inner { padding: 2.5rem 1.25rem; }
  /* The facts under the photo: always one per row (never two columns), each
     with its icon on the left and the label over the value. */
  .pd-stats { grid-template-columns: minmax(0, 1fr); }
  .pd-stat + .pd-stat { border-left: 0; }
  .pd-stat {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .9rem;
    row-gap: .1rem;
    align-items: center;
    padding: .9rem 1.1rem;
    border-top: 1px solid var(--cream-300);
  }
  .pd-stat:first-child { border-top: 0; }
  .pd-stat-icon {
    grid-row: 1 / span 2;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cream-300);
  }
  .pd-stat-label { margin-top: 0; align-self: end; }
  .pd-stat-value { align-self: start; }

  /* Other projects on mobile: a horizontal swipe strip. Plain scroll-snap, so
     it only moves when the visitor drags it. The negative margin runs the strip
     to the screen edges while the first card still lines up with the page
     gutter; the next card peeks to show there is more. */
  .pd-related { --pd-gutter: 1.25rem; }
  .pd-related-grid {
    display: flex;
    gap: .9rem;
    margin: 0 calc(var(--pd-gutter) * -1);
    padding: 1.25rem var(--pd-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pd-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pd-related-grid::-webkit-scrollbar { display: none; }
  .pd-rcard { flex: 0 0 76%; max-width: 300px; scroll-snap-align: start; }
  .pd-rcard:nth-child(5):not(.pd-rcard--all) { display: none; }
}