/* ============================================================
   Pasture — Project Detail Page
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */

@font-face {
  font-family: 'PP Neue Montreal TT';
  src: url('/assets/fonts/PPNeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'PP Neue Montreal TT';
  src: url('/assets/fonts/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal TT';
  src: url('/assets/fonts/PPNeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



:root {
  --color-primary: #333A3E;
  --color-secondary: #88959D;
  --color-tertiary: #C8CDCF;
  --color-bg-lightest: #FCFDFD;

  /* Typography */
  --font-family: 'PP Neue Montreal TT', system-ui, sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-size-lg: 20px;
  --font-size-sm: 16px;
  --tracking-lg: -0.152px;
  /* -0.016em at 22px */
  --tracking-sm: 0px;
  /* -0.016em at 18px */
  --line-height: 30px;
  --line-height-sm: 22px;

  /* Grid */
  --margin: 20px;
  --gutter: 20px;
  --top-offset: max(40px, 20svh);

  /* Range label typewriter */
  --typein-duration: 150ms;
  --typein-stagger: 12ms;
  --typeout-duration: 30ms;
  --typeout-stagger: 6ms;
  --type-spacing-wide: 0.22em;
}

/* ── Reset ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Page ──────────────────────────────────────────────────── */

body {
  background: var(--color-bg-lightest);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Page Transitions (MPA View Transitions API) ───────────
     Mirrors style.css. Old page dissolves, new page's .enter
     animations handle the content entrance.
   ─────────────────────────────────────────────────────────── */

@view-transition {
  navigation: auto;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

::view-transition-old(root) {
  animation: vt-fade-out 400ms ease forwards;
}

::view-transition-new(root) {
  animation: vt-fade-in 400ms ease forwards;
}

/* ── Entrance animation ─────────────────────────────────────
     Identical keyframe values to style.css. These files are
     never loaded together so there is no naming conflict.
   ─────────────────────────────────────────────────────────── */

@keyframes enter {
  from {
    opacity: 0;
    filter: blur(6px);
    -webkit-filter: blur(6px);
  }

  to {
    opacity: 1;
    filter: blur(0px);
    -webkit-filter: blur(0px);
  }
}

.enter {
  animation: enter 350ms ease-out both;
  -webkit-animation: enter 350ms ease-out both;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: opacity, filter;
}

/* ── 6-column grid ─────────────────────────────────────────── */
/* Identical column count, gap, and margin to the homepage grid
   (.page in style.css) so columns align on page navigation.  */

.pp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  padding: 0 var(--margin);
  padding-top: var(--top-offset);
  /* mirrors homepage minmax(40px, 20svh) */
  padding-bottom: 120px;
  align-items: start;

  /* Base typography — cascades to all children */
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-regular);
  line-height: var(--line-height);
  letter-spacing: var(--tracking-lg);
  color: var(--color-primary);
}

/* ── Col 1: logo (back) + year ─────────────────────────────── */

.pp-meta {
  grid-column: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: sticky;
  top: var(--top-offset);
  align-self: start;
}

/* The homepage logo PNG is white on transparent — designed for
   the dark homepage bg. Convert to a readable gray here.     */
.pp-back {
  display: block;
  line-height: 0;
  color: var(--color-tertiary);
  transition: color 501ms ease;
}

.pp-back:hover {
  color: var(--color-primary);
}

.pp-year {
  color: var(--color-secondary);
  white-space: nowrap;
}

/* ── Cols 2–3: project info ────────────────────────────────── */

.pp-info {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-self: start;
}

.pp-info.is-sticky {
  position: sticky;
  top: var(--top-offset);
}

.pp-title {
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-medium);
  line-height: var(--line-height);
  letter-spacing: var(--tracking-lg);
}

.pp-title-group {
  display: contents; /* transparent to the flex layout on desktop */
}

.pp-year-mobile {
  display: none;
}

.pp-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-label {
  color: var(--color-secondary);
}

.pp-services {
  display: flex;
  flex-direction: column;
}

.pp-services p {
  margin: 0;
}

.pp-credits {
  display: flex;
  flex-direction: column;
}

.pp-credit-row {
  display: flex;
  gap: 4px;
  align-items: center;
  position: relative;
}

.pp-credit-role {
  color: var(--color-secondary);
}

.pp-pasture-badge {
  display: inline-flex;
  align-items: center;
  color: var(--color-tertiary);
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .pp-pasture-badge {
    position: static;
    transform: none;
  }
}

.pp-description {
  line-height: 1.24;
}

.pp-description p,
.pp-description h1,
.pp-description h2,
.pp-description figure {
  margin: 0;
}

/* ── Link row ──────────────────────────────────────────────── */

.pp-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pp-live-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0cbe4a;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.pp-link,
.pp-link:visited {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--color-tertiary);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 501ms;
}

.pp-link:hover {
  text-decoration-color: #8a9095;
}

.pp-link-arrow {
  display: inline-block;
  text-decoration: none;
  color: var(--color-secondary);
  margin-left: 0.3em;
}

/* ── Range credit line ──────────────────────────────────────── */

.pp-range-credit {
  font-size: var(--font-size-sm);
  line-height: normal;
  letter-spacing: var(--tracking-sm);
  color: var(--color-secondary);
}

.pp-range-credit strong {
  font-weight: var(--font-medium);
}

.pp-range-insignia {
  display: inline-block;
  height: 13px;
  width: auto;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin: 0 2px;
}

/* ── Cols 4–6: media gallery ─────────────────────────────── */

.pp-media {
  grid-column: 4 / 7;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: start;
}

.pp-media-item {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0px 2px 36px 0px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  line-height: 0;
}

.pp-media-item img,
.pp-media-item video {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Mobile (≤768px) ───────────────────────────────────────── */

@media (max-width: 768px) {

  .pp-year {
    display: none;
  }

  .pp-grid {
    display: flex;
    flex-direction: column;
    padding: 80px 24px 80px;
    gap: 40px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    letter-spacing: var(--tracking-sm);
  }

  .pp-meta {
    position: static;
  }

  .pp-info {
    gap: 40px;
    position: static !important;
  }

  .pp-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pp-year-mobile {
    display: block;
    color: var(--color-secondary);
  }
}