/* Project page greybox (#3051). Grey only. Desktop canvas first; the phone reflows. */
.project { --w: 76rem; max-width: var(--w); margin: 0 auto; padding: 0 var(--pad) 4rem; }
.project section { padding: 5rem 0; border-bottom: 1px solid var(--g2); }
.project h2 { font-size: 2rem; line-height: 1.2; margin: 0 0 2rem; max-width: 40rem; }
.project h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.project small { display: block; color: var(--g3); }
.project figure { margin: 0; background: var(--g2); display: grid; place-items: center; text-align: center; color: var(--g3); padding: 1rem; }
.btn { display: inline-block; border: 2px solid var(--g4); padding: .7rem 1.2rem; font-weight: 700; text-decoration: none; }
.btn.primary { background: var(--g4); color: var(--g0); }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* 1. Hero */
.p-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; min-height: 34rem; padding-top: 3rem !important; }
.p-hero h1 { font-size: 2.8rem; line-height: 1.1; margin: 0 0 1rem; }
.p-hero .lede { font-size: 1.2rem; margin: 0 0 2rem; }
.scene { aspect-ratio: 4 / 3; }
.alive { margin: 1.5rem 0 0; line-height: 1.6; }
.dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--g4); }

/* 2. See it work */
.run-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
.run-pic { aspect-ratio: 16 / 9; }
.big-number { font-size: 4rem; font-weight: 800; line-height: 1; margin: 0 0 1rem; }
.source { color: var(--g3); font-size: .9rem; }

/* 3. What it does for you */
.benefit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
.benefit-grid li { display: flex; flex-direction: column; gap: .4rem; }
.benefit-grid b { font-size: 1.15rem; }
.benefit-grid a { font-size: .9rem; color: var(--g3); }
.ico { width: 3rem; height: 3rem; background: var(--g2); margin-bottom: .5rem; }

/* 4. Start */
.start-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.start-col { border: 2px solid var(--g2); padding: 2rem; }
.start-col.agent { border-color: var(--g4); }
.start-col code { display: block; background: var(--g1); padding: .8rem 1rem; margin: 1rem 0; font-size: .9rem; }

/* 5. What's coming */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.lane { display: flex; flex-direction: column; gap: 1rem; }
.lane.quiet { color: var(--g3); }
.card { border: 2px solid var(--g2); padding: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.card a { font-size: .9rem; }
.sofar { margin: 0; display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.ticks { display: flex; gap: 3px; }
.ticks i { width: .9rem; height: .9rem; border: 2px solid var(--g4); }
.ticks i.on { background: var(--g4); }

/* 6. Who */
.who { display: grid; grid-template-columns: 18rem 1fr; gap: 3rem; align-items: center; }
.portrait { aspect-ratio: 1; }

/* 7. Record */
.record-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; }
.search { border: 2px solid var(--g4); padding: .6rem .9rem; font: inherit; width: 22rem; }
.rate { color: var(--g3); margin: -1rem 0 2rem; }
.month { border-top: 2px solid var(--g4); }
.month summary { display: flex; justify-content: space-between; padding: 1rem 0; cursor: pointer; list-style: none; }
.month summary span { color: var(--g3); }
.feat { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.feat li { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--g2); }
.feat .when { color: var(--g3); }
.feat .more { display: block; }
.years { border-top: 2px solid var(--g4); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.year { display: grid; grid-template-columns: 5rem 1fr; align-items: center; }
.months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.months li { font-size: .8rem; padding: .6rem .3rem; text-align: center; border: 1px solid var(--g3);
  background: color-mix(in srgb, var(--g4) calc(var(--n) * 7%), var(--g0)); color: var(--g4); }
.note { color: var(--g3); font-size: .9rem; margin: 0; }

/* 8. Follow */
.follow { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; border-bottom: 0 !important; }
.follow h2 { margin: 0; }
.follow .actions { display: flex; gap: .75rem; margin: 0; }
.crumb { color: var(--g3); }

/* Phone reflow */
@media (max-width: 52rem) {
  .p-hero, .run-row, .start-cols, .lanes, .who { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .p-hero h1 { font-size: 2rem; }
  .record-head { flex-direction: column; } .search { width: 100%; }
  .months { grid-template-columns: repeat(6, 1fr); }
  .project section { padding: 3rem 0; }
}
/* Project page (#3051) hydration: the site's Nord dress over the approved greybox layout (project.css).
   Loads after skills-brand.css, which sets the --g* colours to Nord, so greybox sizes and spacing hold. */
body { font-family: var(--font-body, Inter, system-ui, sans-serif); color: var(--nord-text); }
.project section { border-bottom-color: var(--g2); }
.project h1, .project h2, .project h3 { font-family: var(--mono); color: var(--g4); }
.project small, .project .source, .project .note, .project .rate { color: var(--g3); }
.project a { color: var(--cyan); }

/* 1. Hero: words on the calm side of the scene, as /skills does */
.p-hero h1 { color: var(--cyan); font-size: 4.25rem; line-height: 1.05; letter-spacing: -.01em; }
@media (max-width: 52rem) { .p-hero h1 { font-size: 2.75rem; } }
.p-hero .lede { font: 500 1.25rem/1.5 var(--mono); color: var(--g4); }
.project figure.scene, .project figure.run-pic, .project figure.portrait { padding: 0; background: var(--g1); border: 1px solid var(--g2); border-radius: 8px; overflow: hidden; }
.project figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alive { font-family: var(--mono); font-size: .92rem; color: var(--g3); }
.alive b { color: var(--g4); font-weight: 600; }
.alive .dot { display: inline-block; vertical-align: .05em; margin-right: .5rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

/* 2. See it work */
.big-number { font: 700 3.4rem/1 var(--mono); color: var(--green); margin: 0 0 1rem; }
.big-number span { color: var(--g3); font-size: 1.6rem; font-weight: 500; }

/* 3. Benefits */
.benefit-grid li { background: var(--g1); border: 1px solid var(--g2); border-radius: 8px; padding: 1.1rem 1.25rem 1.25rem; }
.benefit-grid b { font-family: var(--mono); color: var(--g4); }
.benefit-grid .ico { background: color-mix(in oklab, var(--cyan) 22%, var(--g1)); border-radius: 4px; }
.proof { font-family: var(--mono); font-size: .85rem; }
.proof summary { cursor: pointer; color: var(--cyan); }
.proof pre { white-space: pre-wrap; background: var(--g0); border: 1px solid var(--g2); border-radius: 4px; padding: .6rem .8rem; color: var(--nord-text); font-size: .8rem; margin: .5rem 0 0; }
.proof .said-yes { color: var(--g3); }

/* 4. Start */
.start-col { background: var(--g1); border: 1px solid var(--g2); border-radius: 8px; }
.start-col.agent { border-color: var(--cyan); }
.project code { font-family: var(--mono); background: var(--g0); border: 1px solid var(--g2); border-radius: 4px; color: var(--g4); }

/* 5. What's coming */
.lane .card { background: var(--g1); border: 1px solid var(--g2); border-radius: 8px; }
.ticks i { background: var(--g2); }
.ticks i.on { background: var(--green); }
.lane .empty { color: var(--g3); font-style: italic; }

/* 7. Record */
.month { border-color: var(--g2); }
.month summary b { font-family: var(--mono); color: var(--g4); }
.feat .when { font-family: var(--mono); color: var(--g3); }
.search { background: var(--g0); color: var(--g4); border: 1px solid var(--g2); border-radius: 4px; }

/* 8. Follow */
.crumb { color: var(--g3); }

/* Prototype (2026-11-02): no scenes yet, so heroes run one column. */
.project .p-hero { grid-template-columns: 1fr; min-height: 0; }
.project .p-hero .hero-words { max-width: 46rem; }
.project .run-row { grid-template-columns: 1fr; }
.project-list { list-style: none; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); }
.project-list li { position: relative; background: var(--g1); border: 1px solid var(--g2); border-radius: 8px; padding: 1.4rem 1.6rem; transition: border-color .15s ease-out, background-color .15s ease-out; }
.project-list li a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.project-list li:hover { border-color: var(--cyan); }
.project-list li:has(a:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 3px; }
.project-list li a:focus-visible { outline: none; }
.project-list h2 { margin: 0 0 .4rem; font-size: 1.5rem; }
.project-list p { margin: 0 0 .6rem; }
.project .who { grid-template-columns: 1fr; }
.project .credit { margin-top: 1.5rem; }

.start-col .steps { margin: 1rem 0 0; padding-left: 1.3rem; display: grid; gap: 1rem; color: var(--g3); }
.start-col .steps code { margin: .4rem 0 0; }
.project section.follow { border-top: 0; margin-top: 0; }
.project p code { padding: .05rem .35rem; font-size: .9em; }
.project section p { max-width: 68ch; }
.month summary::-webkit-details-marker { display: none; }
.month summary b { display: inline-flex; align-items: center; gap: .7rem; }
.month summary b::before { content: ""; width: .45rem; height: .45rem; border-right: 2px solid var(--g3); border-bottom: 2px solid var(--g3); transform: rotate(-45deg); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.month[open] summary b::before { transform: rotate(45deg); }
.month summary:hover b::before { border-color: var(--cyan); }
.project .btn { transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.project .btn:hover { background: color-mix(in oklab, var(--cyan) 16%, transparent); }
.project .btn.primary:hover { background: color-mix(in oklab, var(--g4) 86%, var(--cyan)); border-color: color-mix(in oklab, var(--g4) 86%, var(--cyan)); }