/* ══════════════════════════════════════════════════════════════════
   PROJECT PAGES — one editorial case study per project

   Shared by every page in dist/projects/<slug>/. The hero is the project's
   sheet from the ProjectSheets stack, straightened and enlarged: same paper,
   same heading, same drawing, with sizes in container units so it scales as
   one piece. Everything else lies on the site's paper ground.
   ══════════════════════════════════════════════════════════════════ */

/* The bar's height lives on the root so anchors and focus clear the sticky bar. */
html:has(> body.pp) { background: var(--ground); --pp-bar: 76px; scroll-padding-top: var(--pp-bar); }

.pp {
  --pp-gutter: clamp(20px, 5vw, 72px);
  --pp-max: 1480px;
  --pp-gap: clamp(16px, 2vw, 32px);
  --pp-paper: #f5f2e9;
  --pp-ease: cubic-bezier(.22, 1, .36, 1);
  margin: 0;
  min-height: 100vh;
  background: var(--grain), var(--ground);
  color: var(--ink-text);
  font: 400 16px/1.6 var(--font-text);
}
.pp a:focus-visible, .pp button:focus-visible { outline: 1px solid var(--accent-ink); outline-offset: 5px; }
.pp .skip { color: var(--paper); }
.pp ::selection { background: #74603d33; }

.pp-bar, .pp-main > section, .pp-main > nav, .pp-foot {
  width: min(100% - 2 * var(--pp-gutter), var(--pp-max));
  margin-inline: auto;
}

/* ---- the page's rail: back to the stack · the name · language ---------------------- */
/* It stays at the top of the screen with nothing behind it. Like the index's Signature
   Rail, white ink in difference mode reads dark on the paper and light over drawings
   and renders, so the words change with whatever passes beneath them. */
.pp-bar {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--pp-bar);
  color: #fff; mix-blend-mode: difference;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.pp .pp-bar :focus-visible { outline-color: currentColor; }
.pp-bar__back { justify-self: start; display: inline-flex; gap: .7em; padding: 8px 0; }
.pp-bar__back span:first-child { transition: transform 300ms var(--pp-ease); }
.pp-bar__back:hover span:first-child { transform: translateX(-4px); }
.pp-bar__name {
  font: 400 clamp(19px, 1.7vw, 24px)/1 var(--font-display);
  letter-spacing: -.02em; text-transform: none;
}
.pp-bar__languages { justify-self: end; display: flex; align-items: center; gap: 8px; color: #fff9; }
.pp-bar__languages button { padding: 6px 2px; letter-spacing: .14em; color: inherit; }
.pp-bar__languages button[aria-pressed="true"] { color: #fff; box-shadow: inset 0 -1px currentColor; }

/* ---- 01 hero ------------------------------------------------------------------------ */
.pp-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(24px, 4vw, 80px);
  align-items: center;
  min-height: calc(100vh - var(--pp-bar));
  min-height: calc(100svh - var(--pp-bar));
  padding-block: clamp(8px, 2vh, 24px) clamp(40px, 7vh, 88px);
  box-sizing: border-box;
}
.pp-hero__text { align-self: end; padding-bottom: 4px; }
.pp-kicker {
  display: flex; gap: 14px; margin: 0 0 clamp(18px, 3vh, 28px);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted);
}
.pp-kicker__count { color: var(--accent-ink); }
.pp-title {
  margin: 0;
  font: 400 clamp(46px, 6.2vw, 108px)/.92 var(--font-display);
  letter-spacing: -.025em;
  overflow-wrap: break-word;
}
.pp-tagline {
  max-width: 30ch; margin: clamp(18px, 3vh, 28px) 0 0;
  font: italic 400 clamp(17px, 1.45vw, 22px)/1.45 var(--font-italic);
  color: var(--ink-body);
}
.pp-hero__facts { margin: clamp(26px, 5vh, 44px) 0 0; border-top: 1px solid var(--hairline); max-width: 460px; }
.pp-hero__facts div, .pp-facts div { display: grid; grid-template-columns: minmax(7.5em, 34%) 1fr; gap: 16px; }
.pp-hero__facts div { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; line-height: 1.45; }
.pp dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); padding-top: .2em; }
.pp dd { margin: 0; }
.pp-replay {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 28px; padding-bottom: 5px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}
.pp-replay__mark { font-size: 16px; letter-spacing: 0; transition: transform 500ms var(--pp-ease); }
.pp-replay:hover .pp-replay__mark { transform: rotate(-200deg); }

/* The sheet: the stack's paper at page scale. Its proportions come from the
   stack (or from the sheet that was just clicked, via --pp-handoff-ratio). */
.pp-sheet { display: block; margin: 0; container-type: inline-size; }
.pp-hero .pp-sheet {
  justify-self: end;
  width: min(100%, calc((100svh - var(--pp-bar) - 13vh) * var(--pp-handoff-ratio, var(--ratio))));
  aspect-ratio: var(--pp-handoff-ratio, var(--ratio));
}
.pp-sheet__paper {
  box-sizing: border-box; display: flex; flex-direction: column;
  width: 100%; height: 100%;
  padding: clamp(7px, 3cqw, 34px);
  background: var(--pp-paper);
  box-shadow: 0 1px 2px #30281820, 0 18px 45px -20px #30281840;
}
.pp-hero .pp-sheet__paper { box-shadow: 0 1px 2px #30281820, 0 34px 70px -34px #30281866; }
.pp-sheet__heading {
  flex: 0 0 auto; display: flex; align-items: baseline;
  gap: clamp(6px, 2.4cqw, 26px);
  margin: 0 0 clamp(6px, 2cqw, 22px); padding-bottom: clamp(6px, 2cqw, 22px);
  border-bottom: 1px solid #534b3926;
}
.pp-sheet__number { font-size: clamp(8px, 2.5cqw, 16px); color: var(--accent-ink); letter-spacing: .12em; }
.pp-sheet__title { font: 400 clamp(12px, 4.6cqw, 44px)/1.1 var(--font-display); color: var(--ink-text); }
.pp-sheet__visual { display: block; flex: 1; min-height: 0; position: relative; }
.pp-sheet__visual img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; mix-blend-mode: multiply;
}
.pp-sheet[data-fit="cover"] .pp-sheet__visual { overflow: hidden; }
.pp-sheet[data-fit="cover"] .pp-sheet__visual img { object-fit: cover; mix-blend-mode: normal; }

/* ---- sections ---------------------------------------------------------------------- */
.pp-section { padding-top: clamp(80px, 11vw, 176px); }
.pp-section__head {
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 16px; margin-bottom: clamp(40px, 5vw, 80px);
  border-bottom: 1px solid var(--hairline);
}
.pp-section__number { font-size: 12px; letter-spacing: .14em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.pp-section__title { margin: 0; font: 400 12px/1 var(--font-text); letter-spacing: .22em; text-transform: uppercase; }

/* 02 overview: an asymmetric column of text and a quiet fact table */
.pp-overview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pp-gap); }
.pp-overview > .pp-section__head { grid-column: 1 / -1; }
.pp-overview__body { grid-column: 4 / span 7; }
.pp-lead {
  margin: 0 0 1.1em;
  font: 400 clamp(22px, 2.3vw, 34px)/1.36 var(--font-text);
  letter-spacing: -.012em; color: var(--ink-text);
}
.pp-overview__body p:not(.pp-lead) { max-width: 62ch; margin: 0 0 1em; font-size: 17px; color: var(--ink-body); }
.pp-facts { grid-column: 4 / span 7; margin: clamp(28px, 4vw, 56px) 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--pp-gap); }
.pp-facts div { padding: 14px 0 18px; border-top: 1px solid var(--hairline); font-size: 15px; line-height: 1.5; }

/* 03 concept */
.pp-statement {
  max-width: 17ch; margin: 0 0 clamp(40px, 5vw, 76px);
  font: 400 clamp(36px, 4.8vw, 80px)/1.04 var(--font-display);
  letter-spacing: -.02em;
}
.pp-points {
  list-style: none; padding: 0; margin: 0 0 clamp(64px, 8vw, 128px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px var(--pp-gap);
}
.pp-points li { padding-top: 16px; border-top: 1px solid var(--hairline); }
.pp-points__number { font-size: 11px; letter-spacing: .14em; color: var(--accent-ink); }
.pp-points h3 { margin: 10px 0 6px; font: 500 15px/1.35 var(--font-text); }
.pp-points p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-body); }

/* ---- figures ------------------------------------------------------------------------ */
.pp-figure { margin: 0; min-width: 0; }
.pp-figure__frame { display: block; position: relative; }
.pp-figure img { display: block; width: 100%; height: auto; }
.pp-figure--drawing .pp-figure__frame {
  padding: clamp(10px, 2vw, 34px);
  background: var(--pp-paper);
  box-shadow: 0 1px 2px #30281814, 0 22px 46px -30px #30281850;
}
.pp-figure--drawing img { mix-blend-mode: multiply; }
.pp-figure--render .pp-figure__frame { background: var(--ground-deep); }
a.pp-figure__frame { cursor: zoom-in; }
.pp-figure__inspect {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; gap: 8px; padding: 8px 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  background: #1f201be0; color: var(--sheet);
  opacity: 0; transform: translateY(4px);
  transition: opacity 260ms ease, transform 360ms var(--pp-ease);
}
a.pp-figure__frame:is(:hover, :focus-visible) .pp-figure__inspect { opacity: 1; transform: none; }
@media (hover: none) { .pp-figure__inspect { opacity: .92; transform: none; } }
.pp-figure figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted);
}
.pp-figure__caption { flex: 1 1 16em; color: var(--ink-text); }
.pp-figure__scale, .pp-figure__sheet { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.pp-figure__scale { color: var(--accent-ink); }

/* 04 plans · 06 details: drawings large enough to read, never taller than the screen */
.pp-drawings {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pp-gap); row-gap: clamp(64px, 8vw, 128px);
}
.pp-drawings .pp-figure {
  grid-column: 1 / -1; justify-self: center;
  width: min(100%, calc(84svh * var(--ratio) + 68px));
}
.pp-drawings .pp-figure[data-layout="half"] { grid-column: span 6; }
.pp-drawings--details[data-count="3"] .pp-figure:nth-child(n + 2),
.pp-drawings--details[data-count="4"] .pp-figure:nth-child(n + 2) { grid-column: span 6; align-self: start; }

/* 03 concept material · 05 spaces: curated, asymmetric, never a uniform grid */
.pp-arrangement {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pp-gap); row-gap: clamp(56px, 7vw, 120px); align-items: start;
}
.pp-arrangement .pp-figure { max-width: calc(86svh * var(--ratio)); }
.pp-concept__assets[data-count="1"] > [data-index="1"] { grid-column: 2 / span 10; }
.pp-concept__assets > [data-index="1"] { grid-column: 1 / span 7; }
.pp-concept__assets > [data-index="2"] { grid-column: 9 / span 4; align-self: end; }
.pp-concept__assets[data-count="2"] > [data-index="2"] { grid-column: 8 / span 5; }
.pp-concept__assets > [data-index="3"] { grid-column: 3 / span 8; }

.pp-spaces__grid > [data-index="1"] { grid-column: 1 / -1; max-width: none; }
.pp-spaces__grid > [data-index="2"] { grid-column: 1 / span 7; }
.pp-spaces__grid > [data-index="3"] { grid-column: 9 / span 4; align-self: end; }
.pp-spaces__grid > [data-index="4"] { grid-column: 2 / span 5; margin-top: clamp(0px, 7vw, 120px); }
.pp-spaces__grid > [data-index="5"] { grid-column: 7 / span 6; }
.pp-spaces__grid > [data-index="6"] { grid-column: 4 / span 8; }
.pp-spaces__grid[data-count="4"] > [data-index="4"] { grid-column: 3 / span 8; margin-top: 0; }
.pp-spaces__grid[data-count="5"] > [data-index="4"] { grid-column: 1 / span 6; }
.pp-spaces__grid[data-count="5"] > [data-index="5"] { grid-column: 8 / span 5; margin-top: clamp(0px, 9vw, 160px); }

/* ---- ARCHÉ: back into the immersive journey ------------------------------------------- */
.pp-journey { padding-top: clamp(96px, 12vw, 192px); }
.pp-journey__link {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 3vw, 44px);
  padding: clamp(28px, 4.4vw, 64px);
  background: var(--grain), var(--ink); color: var(--paper);
}
.pp-journey__mark {
  font: 400 clamp(52px, 6vw, 96px)/1 var(--font-display); color: var(--accent);
  transition: transform 900ms var(--pp-ease);
}
.pp-journey__link:hover .pp-journey__mark { transform: rotate(-300deg); }
.pp-journey__text { display: grid; gap: 8px; }
.pp-journey__title { font: 400 clamp(30px, 3.6vw, 56px)/1.05 var(--font-display); letter-spacing: -.015em; }
.pp-journey__note { font-size: 15px; color: var(--body); }

/* ---- 07 previous / next: the neighbouring sheets ----------------------------------------- */
.pp-nav__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 120px); align-items: start; }
.pp-nav__link { display: grid; justify-items: start; gap: clamp(16px, 2vw, 26px); }
.pp-nav__link--next { justify-items: end; text-align: right; }
.pp-nav__direction { display: inline-flex; gap: .7em; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.pp-nav__sheet {
  /* One height for both neighbours, so a tall sheet does not outweigh a wide one. */
  width: min(100%, calc(clamp(170px, 19vw, 270px) * var(--ratio))); aspect-ratio: var(--ratio);
  transform: rotate(-1.8deg);
  transition: transform 600ms var(--pp-ease);
}
.pp-nav__link--next .pp-nav__sheet { transform: rotate(1.6deg); }
.pp-nav__sheet .pp-sheet__paper { transition: box-shadow 400ms ease; }
.pp-nav__link:is(:hover, :focus-visible) .pp-nav__sheet { transform: translateY(-8px) rotate(0deg) scale(1.02); }
.pp-nav__link:is(:hover, :focus-visible) .pp-nav__sheet .pp-sheet__paper { box-shadow: 0 2px 5px #30281826, 0 28px 56px -18px #30281866; }
.pp-nav__name { display: flex; align-items: baseline; gap: 14px; }
.pp-nav__link--next .pp-nav__name { flex-direction: row-reverse; }
.pp-nav__number { font-size: 12px; letter-spacing: .12em; color: var(--accent-ink); }
.pp-nav__title { font: 400 clamp(24px, 2.6vw, 42px)/1.05 var(--font-display); letter-spacing: -.015em; }
.pp-nav__all {
  display: flex; width: fit-content; gap: .7em; margin: clamp(64px, 8vw, 120px) auto 0; padding-bottom: 5px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid currentColor;
}

.pp-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: clamp(72px, 9vw, 136px) 32px;
  font-size: 12px; color: var(--ink-muted);
}
.pp-foot p { margin: 0; }

/* ---- drawing viewer ------------------------------------------------------------------ */
.pp-inspect {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--grain), var(--ground); color: var(--ink-text);
}
.pp-inspect[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.pp-inspect::backdrop { background: var(--ground); }
.pp-inspect__stage { position: relative; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.pp-inspect__stage:active { cursor: grabbing; }
.pp-inspect__image {
  position: absolute; left: 0; top: 0; max-width: none;
  transform-origin: 0 0; mix-blend-mode: multiply; -webkit-user-drag: none;
}
.pp-inspect__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--pp-gutter); border-top: 1px solid var(--hairline);
  font-size: 13px;
}
.pp-inspect__caption { margin: 0; }
.pp-inspect__tools { display: flex; gap: 6px; }
.pp-inspect__tools button {
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--hairline); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: background 200ms ease;
}
.pp-inspect__tools button:hover { background: #1f201b0f; }
.pp-inspect__tools [data-zoom="in"], .pp-inspect__tools [data-zoom="out"] { font-size: 18px; letter-spacing: 0; }

/* ---- motion: restrained, and absent under reduced motion ------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .pp-reveal { opacity: 0; transform: translateY(26px); transition: opacity 900ms ease, transform 1100ms var(--pp-ease); }
  .js .pp-reveal.is-in { opacity: 1; transform: none; }
  .js .pp-hero__text > * { animation: pp-rise 1000ms var(--pp-ease) both; }
  .js .pp-hero__text > :nth-child(2) { animation-delay: 60ms; }
  .js .pp-hero__text > :nth-child(3) { animation-delay: 140ms; }
  .js .pp-hero__text > :nth-child(n + 4) { animation-delay: 220ms; }
  .pp-handoff .pp-hero__text > * { animation-delay: 320ms; }
  /* Arriving without a view transition: the sheet waits for project-page.js to settle it. */
  .pp-arriving .pp-hero .pp-sheet { visibility: hidden; animation: pp-show 0s 1.2s forwards; }
  .pp-leaving .pp-main, .pp-leaving .pp-bar, .pp-leaving .pp-foot { opacity: 0; transition: opacity 420ms ease; }
  .pp-leaving body { background: var(--ink); transition: background 480ms ease; }
}
@keyframes pp-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes pp-show { to { visibility: visible; } }

/* Until shared/i18n.js has bound the copy, keep the English source out of sight. */
.pp-translating :is(.pp-main, .pp-bar, .pp-foot) :is(p, h2, h3, dt, dd, figcaption, .pp-bar__back, .pp-nav__direction, .pp-nav__all, .pp-replay, .pp-journey__text) {
  visibility: hidden;
  animation: pp-show 0s 2s forwards;
}

/* ---- narrow screens ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  html:has(> body.pp) { --pp-bar: 64px; }
  .pp-bar { font-size: 11px; letter-spacing: .12em; }
  .pp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 12px; }
  .pp-hero__text { display: contents; }
  .pp-kicker { order: 1; }
  .pp-title { order: 2; font-size: clamp(40px, 11vw, 72px); }
  .pp-hero .pp-sheet {
    order: 3; justify-self: stretch; width: 100%;
    margin-top: clamp(24px, 5vw, 40px);
  }
  .pp-tagline { order: 4; margin-top: 28px; }
  .pp-hero__facts { order: 5; max-width: none; }
  .pp-replay { order: 6; justify-self: start; }
  .pp-overview__body, .pp-facts { grid-column: 1 / -1; }
  .pp-facts { grid-template-columns: 1fr; }
  .pp-arrangement > .pp-figure,
  .pp-drawings > .pp-figure,
  .pp-drawings > .pp-figure[data-layout="half"] { grid-column: 1 / -1 !important; margin-top: 0 !important; max-width: none; width: 100%; }
  .pp-arrangement > .pp-figure:nth-child(even) { width: 86%; justify-self: end; }
  .pp-nav__sheet { width: 100%; }
  .pp-nav__title { font-size: clamp(20px, 6vw, 30px); }
  .pp-inspect__bar { flex-direction: column; align-items: stretch; }
  .pp-inspect__tools { justify-content: space-between; }
}