/* Project page: editorial one-screen overview + scrollable technical detail.
   The overview is composed as a magazine spread: primary thesis, metadata rail,
   and a numbered capability strip. The detail action is a viewport-level sibling. */

.star-detail-shell[data-star-kind="project"] {
  --project-ink: rgba(255,255,255,.97);
  --project-body: rgba(255,255,255,.72);
  --project-muted: rgba(255,255,255,.40);
  --project-line: rgba(255,255,255,.105);
  overflow: hidden;
}

.star-detail-shell[data-star-kind="project"]::before {
  background:
    radial-gradient(circle at 89% 16%, rgba(0,0,0,0) 0 14%, rgba(0,0,0,.025) 29%, rgba(0,0,0,.13) 48%, transparent 66%),
    linear-gradient(90deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.57) 36%, rgba(0,0,0,.23) 63%, rgba(0,0,0,.035) 84%, transparent 100%);
}

.star-detail-shell[data-star-kind="project"]::after {
  background: linear-gradient(0deg, rgba(0,0,0,.30), rgba(0,0,0,.01) 48%, transparent 78%);
  opacity: .62;
}

.star-detail-shell[data-star-kind="project"] .star-detail-header {
  right: clamp(42px,4.2vw,72px);
  top: clamp(42px,5.1vh,60px);
  width: min(620px,38vw);
  grid-template-columns: minmax(0,1fr) clamp(158px,10.8vw,180px);
  gap: clamp(22px,1.9vw,30px);
  align-items: center;
}

.star-detail-shell[data-star-kind="project"] .star-detail-star-slot {
  width: clamp(158px,10.8vw,180px);
}

.star-detail-shell[data-star-kind="project"] .star-detail-heading {
  max-width: 430px;
  padding-right: clamp(20px,1.7vw,28px);
  border-right: 1px solid rgba(255,255,255,.09);
  text-align: right;
}

.star-detail-shell[data-star-kind="project"] .star-detail-kicker {
  color: rgba(255,255,255,.38);
  font-size: 8.5px;
  letter-spacing: .16em;
}

.star-detail-shell[data-star-kind="project"] .star-detail-title {
  max-width: 11ch;
  margin: 8px 0 0 auto;
  color: rgba(255,255,255,.97);
  font-size: clamp(44px,3.45vw,54px);
  line-height: .99;
  font-weight: 560;
  letter-spacing: -.046em;
  text-wrap: balance;
}

.star-detail-shell[data-star-kind="project"] .star-detail-subtitle {
  max-width: 38ch;
  margin: 11px 0 0 auto;
  color: rgba(255,255,255,.47);
  font-size: 10.5px;
  line-height: 1.48;
}

.star-detail-shell[data-star-kind="project"] .star-detail-main {
  position: relative;
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.project-view {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

.project-overview {
  position: absolute;
  left: clamp(62px,5.6vw,96px);
  top: clamp(210px,24.2vh,246px);
  width: min(940px,57vw);
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(220px,15.6vw,268px);
  grid-template-areas:
    "kicker facts"
    "thesis facts"
    "summary facts"
    "points points";
  column-gap: clamp(38px,3.4vw,58px);
  align-items: start;
}

.project-overview-kicker,
.project-detail-kicker,
.project-detail-section-label {
  margin: 0;
  color: var(--project-muted);
  font-size: 10px;
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: .08em;
}

.project-overview-kicker {
  grid-area: kicker;
  padding-top: 2px;
}

.project-overview-thesis {
  grid-area: thesis;
  max-width: 15.5ch;
  margin: 13px 0 0;
  color: var(--project-ink);
  font-size: clamp(38px,2.65vw,44px);
  font-weight: 520;
  line-height: 1.095;
  letter-spacing: -.042em;
  text-wrap: balance;
}

.project-overview-summary {
  grid-area: summary;
  max-width: 56ch;
  margin: 20px 0 0;
  color: var(--project-body);
  font-size: clamp(14.5px,.98vw,16px);
  line-height: 1.72;
  letter-spacing: -.006em;
}

.project-overview-facts {
  grid-area: facts;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  margin: 2px 0 0;
  padding-left: clamp(18px,1.55vw,24px);
  border-left: 1px solid var(--project-line);
}

.project-overview-fact {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 12px;
  align-items: baseline;
  padding: 0 0 14px;
}

.project-overview-fact + .project-overview-fact {
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.075);
}

.project-overview-fact:last-child {
  padding-bottom: 0;
}

.project-overview-fact span {
  display: block;
  margin: 0;
  color: rgba(255,255,255,.31);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .04em;
}

.project-overview-fact strong {
  display: block;
  color: rgba(255,255,255,.79);
  font-size: 12.5px;
  font-weight: 540;
  line-height: 1.45;
}

.project-overview-points {
  grid-area: points;
  counter-reset: project-overview-point;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0;
  margin: clamp(32px,4.1vh,42px) 0 0;
  padding: 0;
  border-top: 1px solid var(--project-line);
  list-style: none;
}

.project-overview-points li {
  counter-increment: project-overview-point;
  position: relative;
  min-width: 0;
  min-height: 66px;
  padding: 15px 17px 0 36px;
  color: rgba(255,255,255,.68);
  font-size: 12.5px;
  line-height: 1.48;
}

.project-overview-points li + li {
  border-left: 1px solid rgba(255,255,255,.07);
}

.project-overview-points li::before {
  content: counter(project-overview-point, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  width: auto;
  height: auto;
  color: rgba(255,255,255,.26);
  background: none;
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .04em;
}

.project-overview-more {
  position: absolute;
  right: clamp(44px,4.3vw,72px);
  bottom: clamp(34px,4.8vh,52px);
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 20px;
  align-items: center;
  width: 190px;
  padding: 13px 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.19);
  border-radius: 0;
  color: rgba(255,255,255,.72);
  background: transparent;
  font: 570 11px/1 ui-sans-serif,system-ui,"Microsoft YaHei UI",sans-serif;
  text-align: left;
  cursor: pointer;
  transition: color .22s ease,border-color .22s ease;
}

.project-overview-more b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -1px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: rgba(255,255,255,.65);
  font-size: 11px;
  font-weight: 500;
  transition: color .22s ease,border-color .22s ease,background-color .22s ease,transform .22s ease;
}

.project-overview-more:hover,
.project-overview-more:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.38);
  outline: none;
}

.project-overview-more:hover b,
.project-overview-more:focus-visible b {
  color: #fff;
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.055);
  transform: translate(2px,-2px);
}

.project-detail-overlay[hidden] { display: none; }

.project-detail-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 50%,rgba(0,0,0,.44) 74%,rgba(0,0,0,.06) 93%,transparent 100%);
}

.project-detail-document {
  width: min(900px,57vw);
  margin-left: clamp(56px,5.5vw,92px);
  padding: 82px 0 100px;
}

.project-detail-close {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0 0 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(255,255,255,.67);
  background: rgba(0,0,0,.28);
  font: 580 10px/1 ui-sans-serif,system-ui,"Microsoft YaHei UI",sans-serif;
  cursor: pointer;
}

.project-detail-close:hover,
.project-detail-close:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.29);
  background: rgba(255,255,255,.045);
  outline: none;
}

.project-detail-intro { max-width: 820px; }

.project-detail-intro h2 {
  max-width: 24ch;
  margin: 12px 0 0;
  color: var(--project-ink);
  font-size: clamp(31px,2.5vw,39px);
  font-weight: 540;
  line-height: 1.16;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.project-detail-intro > p:last-of-type,
.project-detail-next {
  max-width: 64ch;
  margin: 20px 0 0;
  color: var(--project-body);
  font-size: 16px;
  line-height: 1.76;
}

.project-detail-facts {
  display: grid;
  grid-template-columns: 1fr .82fr 1.34fr .8fr;
  margin-top: 27px;
  border-top: 1px solid var(--project-line);
  border-bottom: 1px solid var(--project-line);
}

.project-detail-fact {
  min-width: 0;
  padding: 14px 16px 15px 0;
}

.project-detail-fact + .project-detail-fact {
  padding-left: 16px;
  border-left: 1px solid var(--project-line);
}

.project-detail-fact span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.36);
  font-size: 10px;
}

.project-detail-fact strong {
  display: block;
  color: rgba(255,255,255,.79);
  font-size: 13px;
  font-weight: 540;
  line-height: 1.45;
}

.project-detail-section {
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
  gap: 30px;
  margin-top: 45px;
  padding-top: 26px;
  border-top: 1px solid var(--project-line);
}

.project-detail-section-label {
  padding-top: 2px;
  color: rgba(255,255,255,.48);
}

.project-detail-section-body { min-width: 0; }

.project-detail-two-column {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 42px;
  margin-top: 45px;
  padding-top: 26px;
  border-top: 1px solid var(--project-line);
}

.project-detail-two-column .project-detail-section {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.project-detail-two-column .project-detail-section-label { margin-bottom: 14px; }

.project-detail-list,
.project-detail-numbered,
.project-detail-output,
.project-detail-progress {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-detail-list li,
.project-detail-numbered li,
.project-detail-output li {
  position: relative;
  color: rgba(255,255,255,.70);
  font-size: 14.5px;
  line-height: 1.68;
}

.project-detail-list li,
.project-detail-output li { padding-left: 16px; }

.project-detail-list li + li,
.project-detail-numbered li + li,
.project-detail-output li + li { margin-top: 10px; }

.project-detail-list li::before,
.project-detail-output li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .76em;
  width: 5px;
  height: 1px;
  background: rgba(255,255,255,.42);
}

.project-detail-numbered { counter-reset: project-detail-step; }

.project-detail-numbered li {
  counter-increment: project-detail-step;
  padding: 13px 0 13px 38px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.project-detail-numbered li:first-child { border-top: 1px solid rgba(255,255,255,.075); }

.project-detail-numbered li::before {
  content: counter(project-detail-step,decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  color: rgba(255,255,255,.28);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .05em;
}

.project-detail-output {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.project-detail-output li {
  min-height: 72px;
  padding: 13px 13px 13px 28px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 12px;
  background: rgba(255,255,255,.014);
}

.project-detail-output li + li { margin-top: 0; }
.project-detail-output li::before { left: 13px; top: 21px; }

.project-detail-stack,
.project-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-detail-stack span,
.project-detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(255,255,255,.60);
  background: rgba(255,255,255,.014);
  font-size: 10.5px;
  line-height: 1;
}

.project-detail-link {
  color: rgba(255,255,255,.76);
  text-decoration: none;
}

.project-detail-progress { border-top: 1px solid rgba(255,255,255,.075); }

.project-detail-progress li {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 52px;
  gap: 12px;
  align-items: center;
  min-height: 47px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.project-detail-progress li > span {
  color: rgba(255,255,255,.28);
  font-size: 9px;
}

.project-detail-progress p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.5;
}

.project-detail-progress b {
  justify-self: end;
  color: rgba(255,255,255,.39);
  font-size: 9px;
  font-weight: 600;
}

.project-detail-progress .is-active b { color: rgba(214,232,255,.82); }
.project-detail-progress .is-done b { color: rgba(197,229,211,.68); }
.project-detail-next { margin-top: 0; }
.project-detail-links { margin-top: 16px; }

.star-detail-shell[data-star-kind="project"].project-detail-expanded .project-overview,
.star-detail-shell[data-star-kind="project"].project-detail-expanded .project-overview-more {
  opacity: 0;
  pointer-events: none;
}

@media (max-height: 760px) and (min-width: 861px) {
  .project-overview {
    top: 154px;
    width: min(900px,57vw);
  }

  .project-overview-thesis {
    margin-top: 10px;
    font-size: clamp(32px,2.3vw,37px);
  }

  .project-overview-summary {
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.58;
  }

  .project-overview-fact { padding-bottom: 10px; }

  .project-overview-fact + .project-overview-fact {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .project-overview-points { margin-top: 22px; }

  .project-overview-points li {
    min-height: 54px;
    padding-top: 12px;
    font-size: 11.5px;
  }

  .project-overview-points li::before { top: 13px; }
}

@media (max-width: 1180px) {
  .star-detail-shell[data-star-kind="project"] .star-detail-header {
    width: min(560px,46vw);
    grid-template-columns: minmax(0,1fr) 148px;
  }

  .star-detail-shell[data-star-kind="project"] .star-detail-star-slot { width: 148px; }

  .star-detail-shell[data-star-kind="project"] .star-detail-heading { padding-right: 18px; }

  .project-overview {
    left: 40px;
    width: min(680px,55vw);
    display: block;
  }

  .project-overview-thesis {
    max-width: 18ch;
    font-size: clamp(30px,2.8vw,36px);
  }

  .project-overview-summary { max-width: 56ch; }

  .project-overview-facts {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 18px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--project-line);
    border-bottom: 1px solid var(--project-line);
  }

  .project-overview-fact,
  .project-overview-fact + .project-overview-fact {
    display: block;
    padding: 10px 12px 11px 0;
    border-top: 0;
  }

  .project-overview-fact:nth-child(even) {
    padding-left: 12px;
    border-left: 1px solid var(--project-line);
  }

  .project-overview-fact:nth-child(3),
  .project-overview-fact:nth-child(4) {
    border-top: 1px solid var(--project-line);
  }

  .project-overview-fact span { margin-bottom: 5px; }

  .project-overview-points {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 17px;
  }

  .project-overview-points li {
    min-height: 45px;
    padding: 10px 14px 8px 30px;
    font-size: 12px;
  }

  .project-overview-points li::before { top: 11px; }

  .project-overview-points li:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.07);
  }

  .project-overview-points li:nth-child(4) { border-top: 1px solid rgba(255,255,255,.07); }

  .project-detail-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .project-detail-fact:nth-child(3) {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--project-line);
  }

  .project-detail-fact:nth-child(4) { border-top: 1px solid var(--project-line); }

  .project-detail-document {
    width: min(760px,61vw);
    margin-left: 40px;
  }

  .project-detail-output { grid-template-columns: 1fr; }
  .project-detail-output li { min-height: 0; }
}

@media (max-width: 860px) {
  .star-detail-shell[data-star-kind="project"] .star-detail-header {
    position: fixed;
    right: 20px;
    top: 58px;
    width: calc(100% - 40px);
    margin: 0;
    grid-template-columns: minmax(0,1fr) 112px;
    gap: 14px;
  }

  .star-detail-shell[data-star-kind="project"] .star-detail-star-slot { width: 112px; }

  .star-detail-shell[data-star-kind="project"] .star-detail-heading {
    max-width: none;
    padding-right: 14px;
  }

  .star-detail-shell[data-star-kind="project"] .star-detail-title { font-size: clamp(32px,7vw,43px); }

  .project-overview {
    left: 20px;
    top: 232px;
    width: calc(100% - 40px);
  }

  .project-overview-thesis {
    max-width: 22ch;
    font-size: clamp(27px,5.5vw,34px);
  }

  .project-overview-summary {
    max-width: 56ch;
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.56;
  }

  .project-overview-facts { margin-top: 16px; }
  .project-overview-points { margin-top: 14px; }

  .project-overview-more {
    right: 20px;
    bottom: 20px;
    width: 172px;
  }

  .project-detail-overlay { background: rgba(0,0,0,.91); }

  .project-detail-document {
    width: calc(100% - 40px);
    margin: 0 20px;
    padding-top: 218px;
  }

  .project-detail-section { grid-template-columns: 1fr; gap: 12px; }
  .project-detail-two-column { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 560px) {
  .star-detail-shell[data-star-kind="project"] .star-detail-header {
    right: 16px;
    top: 56px;
    width: calc(100% - 32px);
    grid-template-columns: minmax(0,1fr) 82px;
    gap: 11px;
  }

  .star-detail-shell[data-star-kind="project"] .star-detail-star-slot { width: 82px; }
  .star-detail-shell[data-star-kind="project"] .star-detail-heading { padding-right: 10px; }
  .star-detail-shell[data-star-kind="project"] .star-detail-title { font-size: clamp(28px,8.6vw,37px); }
  .star-detail-shell[data-star-kind="project"] .star-detail-subtitle { display: none; }

  .project-overview {
    left: 16px;
    top: 188px;
    width: calc(100% - 32px);
  }

  .project-overview-kicker { font-size: 9px; }

  .project-overview-thesis {
    margin-top: 8px;
    font-size: clamp(23px,6.8vw,30px);
  }

  .project-overview-summary {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
  }

  .project-overview-facts {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 12px;
  }

  .project-overview-fact,
  .project-overview-fact + .project-overview-fact { padding: 8px 9px 8px 0; }

  .project-overview-fact:nth-child(even) { padding-left: 9px; }
  .project-overview-fact span { font-size: 8.5px; }
  .project-overview-fact strong { font-size: 11.5px; }

  .project-overview-points { margin-top: 11px; }

  .project-overview-points li {
    min-height: 38px;
    padding: 8px 8px 6px 25px;
    font-size: 10.8px;
    line-height: 1.38;
  }

  .project-overview-points li::before {
    top: 9px;
    font-size: 8px;
  }

  .project-overview-more {
    right: 16px;
    bottom: 16px;
    width: 154px;
    grid-template-columns: 1fr 30px;
    gap: 12px;
    padding-top: 10px;
    font-size: 10.5px;
  }

  .project-overview-more b { width: 30px; height: 30px; }

  .project-detail-document {
    width: calc(100% - 32px);
    margin: 0 16px;
    padding: 188px 0 70px;
  }

  .project-detail-close { margin-bottom: 28px; }
  .project-detail-intro h2 { font-size: clamp(26px,7vw,33px); }

  .project-detail-intro > p:last-of-type,
  .project-detail-next { font-size: 14.5px; }

  .project-detail-facts { grid-template-columns: 1fr; }

  .project-detail-fact,
  .project-detail-fact + .project-detail-fact,
  .project-detail-fact:nth-child(3),
  .project-detail-fact:nth-child(4) {
    padding: 10px 0;
    border-left: 0;
    border-top: 1px solid var(--project-line);
  }

  .project-detail-fact:first-child { border-top: 0; }

  .project-detail-list li,
  .project-detail-numbered li,
  .project-detail-output li { font-size: 14px; }
}