/* Ousia project presentation — intentionally separate from the global stylesheet. */

/* Homepage: make every project read as one clear unit. */
.projects{background:#fff;padding:0 0 clamp(28px,4vw,64px)}
.project-row{
  margin:0 0 clamp(28px,4vw,68px)!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.project-row:last-child{margin-bottom:0!important}
.project-meta{
  position:relative;
  padding:clamp(34px,4.5vw,72px)!important;
  border-top:1px solid rgba(0,0,0,.08);
}
.project-meta .number{
  text-transform:uppercase;
  letter-spacing:.13em;
  font-family:Arial,Helvetica,sans-serif!important;
  color:var(--muted);
}
.project-copy{max-width:620px}
.project-copy .tags{margin-bottom:14px}
.project-meta h3{margin-bottom:24px!important}

/* Detail page: plan is its own editorial spread, matching the PDF logic. */
.project-plan{
  background:var(--paper);
  padding:clamp(64px,8vw,130px) var(--pad);
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  gap:clamp(36px,7vw,120px);
  align-items:start;
  border-top:1px solid rgba(0,0,0,.12);
  border-bottom:1px solid rgba(0,0,0,.12);
}
.plan-heading{position:sticky;top:110px}
.plan-heading h2{
  font-size:clamp(38px,5vw,76px);
  line-height:.96;
  letter-spacing:-.05em;
  margin:18px 0 0;
  font-weight:500;
}
.project-plan figure{margin:0;background:#fff;padding:clamp(18px,3vw,46px);min-height:52vh;display:flex;align-items:center;justify-content:center}
.project-plan img{width:100%;height:auto;max-height:82vh;object-fit:contain}

/* Give gallery images breathing room after the plan/detail spread. */
.gallery{padding-top:clamp(36px,5vw,80px)!important;padding-bottom:clamp(36px,5vw,80px)!important}

@media(max-width:850px){
  /* On phones the title comes BEFORE its image. This removes the above/below ambiguity. */
  .project-row,.project-row:nth-child(even){display:flex!important;flex-direction:column!important;margin-bottom:38px!important;box-shadow:none;border-bottom:10px solid #fff!important}
  .project-row .project-meta,.project-row:nth-child(even) .project-meta{order:1!important;min-height:0!important;padding:28px 22px 26px!important}
  .project-row .project-image,.project-row:nth-child(even) .project-image{order:2!important;height:56svh!important;min-height:380px}
  .project-meta .number{margin-bottom:26px}
  .project-meta h3{font-size:clamp(34px,10vw,54px)!important;margin:8px 0 20px!important}
  .project-copy .tags{margin-bottom:10px}
  .project-plan{grid-template-columns:1fr;gap:30px;padding:64px 22px}
  .plan-heading{position:static}
  .plan-heading h2{font-size:42px}
  .project-plan figure{min-height:0;padding:16px}
}