/* ============================================================
   EREN ARAL — project detail pages
   Shares tokens with styles.css (linked before this file).
   ============================================================ */

/* ─── Top bar (project variant) ─── */
.pbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--pad);
  height: 56px;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  view-transition-name: site-bar;
}
.pback {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color .2s;
}
.pback:hover { color: var(--signal); }
.pback .barrow { transition: transform .25s; font-size: 14px; }
.pback:hover .barrow { transform: translateX(-4px); }

/* ─── Page scaffold ─── */
.pmain {
  position: relative;
  z-index: 3;
  padding: calc(56px + clamp(3rem, 8vh, 6rem)) var(--pad) 0;
}
.pwrap { max-width: var(--maxw); margin: 0 auto; }

.pcrumb {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
}
.pcrumb b { color: var(--signal); font-weight: 500; }

.ptitle-xl {
  font-weight: 760;
  font-stretch: 114%;
  font-size: clamp(2.6rem, 7.5vw, 6.8rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  text-wrap: balance;
}

.pmeta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.pmeta-grid .k {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  display: block;
  margin-bottom: 8px;
}
.pmeta-grid .v { font-size: 14.5px; font-weight: 500; line-height: 1.5; }

/* ─── Hero media plate ─── */
.pmedia {
  background: #060607;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: clamp(3rem, 8vh, 6rem);
  contain: layout;
}
.pmedia svg { width: 100%; height: auto; display: block; }
.pmedia-cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ─── Body ─── */
.pbody {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
  margin-bottom: clamp(3.5rem, 9vh, 7rem);
}
.pbody .s-head { margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
.pprose p {
  font-size: var(--t-body-l);
  line-height: 1.7;
  color: var(--mute);
  max-width: 58ch;
  margin-bottom: 1.1rem;
  text-wrap: pretty;
}
.pprose b { font-weight: 600; color: var(--txt); }

.phl { list-style: none; counter-reset: hl-c; border-top: 1px solid var(--line); }
.phl li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mute);
}
.phl li::before {
  content: counter(hl-c, decimal-leading-zero);
  counter-increment: hl-c;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--signal);
  padding-top: 5px;
}
.phl li b { font-weight: 600; color: var(--txt); }

.ptags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ptags span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 6px 10px;
}

/* ─── Gallery (user-fillable slots) ─── */
.pgallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: clamp(3.5rem, 9vh, 7rem);
}
.pgallery image-slot {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
}
.pgallery-note {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ─── Next project ─── */
.pnext {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 3.5vw, 48px);
  align-items: center;
  border-top: 1px solid var(--line);
  padding: clamp(2.2rem, 5vh, 3.6rem) 0 clamp(3rem, 8vh, 5rem);
  transition: background .3s;
  margin: 0 calc(-1 * var(--pad));
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.pnext:hover { background: var(--bg-2); }
.pnext .nlabel {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
}
.pnext .nthumb {
  width: 130px;
  height: 76px;
  background: #060607;
  border: 1px solid var(--line);
  overflow: hidden;
  contain: layout;
}
.pnext .nthumb svg { width: 100%; height: 100%; }
.pnext .ntitle {
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.026em;
  transition: color .25s;
}
.pnext:hover .ntitle { color: #fff; }
.pnext .narrow {
  font-size: 30px;
  color: var(--mute);
  transition: transform .3s cubic-bezier(.22,1,.36,1), color .25s;
}
.pnext:hover .narrow { transform: translateX(8px); color: var(--signal); }
.pnext-inner {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: clamp(20px, 3.5vw, 48px);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.pnext-head { max-width: var(--maxw); margin: 0 auto; width: 100%; margin-bottom: 20px; }

/* ─── Footer ─── */
.pfoot {
  padding: 26px var(--pad);
  color: var(--mute);
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ─── Entrance ─── */
@media (prefers-reduced-motion: no-preference) {
  .pcrumb, .ptitle-xl, .pmeta-grid {
    animation: prise .9s cubic-bezier(.22,1,.36,1) both;
  }
  .ptitle-xl { animation-delay: .06s; }
  .pmeta-grid { animation-delay: .16s; }
  @keyframes prise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}
/* When the page arrives via a view transition, the morph IS the entrance —
   suppress the fallback animations so motion doesn't double up */
html.vt .pcrumb,
html.vt .ptitle-xl,
html.vt .pmeta-grid { animation: none; }

@media (max-width: 800px) {
  .pbody { grid-template-columns: 1fr; gap: 44px; }
  .pmeta-grid { grid-template-columns: 1fr 1fr; }
  .pgallery { grid-template-columns: 1fr; }
  .pnext-inner { grid-template-columns: 90px 1fr auto; }
}