/* Product stories share the typography, color and spacing scale in styles.css. */
.landing-work { background: #eceee6; padding-top: var(--section-space); }
.product-story { padding-top: 4rem; padding-bottom: 4.5rem; border-bottom: 1px solid var(--line); }
.product-story:last-of-type { border-bottom: 0; }
.story-heading { margin-bottom: 2rem; }
.story-heading .mono { color: var(--muted); }
.story-heading h3 { font-size: clamp(2.5rem, 1.75rem + 2vw, 3.5rem); margin-top: .625rem; line-height: 1.15; }
.story-overview { display: grid; grid-template-columns: 1.1fr 1fr; gap: 7%; align-items: center; }
.story-photo { position: relative; aspect-ratio: 1.65; overflow: hidden; border-radius: var(--radius); background: #d9ddcf; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
#clock .story-photo img { object-position: center 55%; }
.story-intro { padding-block: 1rem; max-width: 31rem; min-width: 0; }
.story-intro h4 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.375rem); line-height: 1.3; text-wrap: balance; }
.story-intro > p { font-size: var(--text-body); color: var(--muted); margin-top: 1.25rem; max-width: 48ch; }
.engineering-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
.engineering-study { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.assembly-study { background: #f3f3ec; }
.board-study { background: var(--dark); color: #f0f2e8; border-color: #394334; }
.study-label { display: flex; align-items: center; gap: .75rem; padding: 1.125rem 1.5rem; color: var(--muted); border-bottom: 1px solid #cbd1c266; }
.study-label > span { min-width: 0; }
.study-label .engineering-icon { width: 1.25rem; height: 1.25rem; }
.board-study .study-label { --icon-accent: #ed9679; color: var(--on-dark-muted); border-color: #5d705355; }
.inline-model { height: clamp(20rem, 28vw, 28.75rem); position: relative; isolation: isolate; overflow: hidden; background-image: linear-gradient(#72845b0a 1px, transparent 1px), linear-gradient(90deg, #72845b0a 1px, transparent 1px); background-size: 32px 32px; }
.inline-board { background-image: linear-gradient(#a9be8e08 1px, transparent 1px), linear-gradient(90deg, #a9be8e08 1px, transparent 1px); background-color: #2c342a; }
.inline-model canvas, .inline-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.inline-model canvas { height: calc(100% - var(--model-controls-height, 3.75rem)); bottom: var(--model-controls-height, 3.75rem); opacity: 0; transition: opacity .7s; pointer-events: none; touch-action: pan-y pinch-zoom; }
.inline-fallback { object-fit: cover; transition: opacity .5s; }
.inline-board .inline-fallback { object-fit: contain; padding: 1rem; filter: drop-shadow(8px 22px 16px #0004); }
.inline-model.is-ready canvas { opacity: 1; pointer-events: auto; }
.inline-model.is-ready .inline-fallback { opacity: 0; pointer-events: none; }
.study-cross { position: absolute; z-index: 1; font: 1.375rem Plex, monospace; color: #a4af9655; pointer-events: none; }
.study-cross-one { top: 1.375rem; left: 1.5rem; }
.study-cross-two { bottom: calc(var(--model-controls-height, 3.75rem) + .75rem); right: 1.5rem; }
.study-loading { position: absolute; z-index: 1; bottom: .875rem; left: 1.5rem; right: 1.5rem; color: var(--muted); }
.board-study .study-loading { color: var(--on-dark-muted); }
.inline-model.is-ready .study-loading { display: none; }
.study-caption { padding: 1.25rem 1.5rem; border-top: 1px solid #cbd1c266; flex: 1; }
.study-caption p { font-size: var(--text-body); color: var(--muted); max-width: 53ch; }
.board-study .study-caption { border-color: #5d705355; }
.board-study .study-caption p { color: var(--on-dark-muted); }
.inline-board .model-controls { color: var(--on-dark-muted); }
.inline-board .model-control { background: #2c342af5; color: #f0f2e8; border-color: #637359; }
.inline-board .model-control:hover { color: #ed9679; border-color: #ed9679; }
.inline-board .model-controls [aria-pressed=true] { background: #f0f2e8; color: var(--ink); }

/* Public engineering evidence, kept compact alongside the product studies. */
.github-proof { display: grid; grid-template-columns: 1.25fr .65fr 1.15fr; gap: 2.5rem; align-items: center; padding-block: 2rem 3.5rem; border-top: 1px solid var(--line); }
.github-proof > * { min-width: 0; }
.github-proof-copy > .mono { color: var(--muted); overflow-wrap: anywhere; }
.github-proof h3 { font-size: var(--title-card); line-height: 1.25; margin-top: .625rem; }
.github-proof-copy > p { margin-top: .75rem; font-size: var(--text-body); color: var(--muted); max-width: 43ch; }
.github-proof-copy > .text-link { margin-top: .5rem; }
.github-star-total { display: flex; align-items: center; gap: .625rem; color: var(--ink); }
.github-star-total > strong { font-size: clamp(2.25rem, 1.3rem + 2vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -.06em; }
.github-star-total > .star-icon { width: 1.5rem; height: 1.5rem; color: var(--accent-text); }
.github-proof-metric > p { font-size: var(--text-small); color: var(--muted); margin-top: .625rem; }
.github-proof-date { display: block; margin-top: .75rem; color: var(--muted); font-size: var(--text-meta); line-height: 1.6; }
.github-repositories { list-style: none; margin: 0; padding: 0; }
.github-repositories li + li { border-top: 1px solid var(--line); }
.github-repositories a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .875rem; padding-block: 1rem; min-height: 2.75rem; }
.github-repositories a:hover .github-repo-name { color: var(--accent-text); }
.github-repo-name { font-size: var(--text-body); font-weight: 600; overflow-wrap: anywhere; }
.github-repo-name > span { display: block; color: var(--muted); font-size: var(--text-meta); font-weight: 400; line-height: 1.6; margin-top: .125rem; }
.github-repo-stars { display: inline-flex; align-items: center; gap: .375rem; color: var(--muted); font-size: var(--text-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.github-repo-stars > .star-icon { width: .875rem; height: .875rem; }
@media (max-width: 70rem) {
  .github-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem 2.5rem; }
  .github-proof-metric { justify-self: end; }
  .github-repositories { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .github-repositories li + li { border-top: 0; }
  .github-repositories li { border-top: 1px solid var(--line); }
}
@media (max-width: 52rem) {
  .github-proof { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-block: 1.75rem 3rem; }
  .github-proof-metric { justify-self: start; }
  .github-repositories { display: block; }
  .github-repositories li + li { border-top: 1px solid var(--line); }
}

/* Electronics: a concise, readable summary after the physical evidence. */
.electronics { background: var(--dark); color: #f0f2e8; padding-block: var(--section-space); }
.electronics .section-index { color: var(--on-dark-muted); border-color: #46503e; }
.electronics-summary-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10%; align-items: center; margin-top: 3rem; }
.electronics-summary-intro em { color: #ef7953; }
.electronics-summary-intro p { font-size: var(--text-body); color: var(--on-dark-muted); margin-bottom: 1rem; max-width: 46ch; }

@media (max-width: 70rem) {
  .story-overview { gap: 5%; }
  .engineering-pair { gap: 1.25rem; }
  .study-caption { padding: 1.5rem; }
}
@media (max-width: 52rem) {
  .product-story { padding-top: 3rem; padding-bottom: 3.5rem; }
  .story-overview, .engineering-pair { grid-template-columns: 1fr; }
  .story-overview { gap: 0; }
  .story-photo { aspect-ratio: 1.5; }
  .story-intro { padding: 1.75rem 0 0; max-width: 38rem; }
  .engineering-pair { gap: 1.25rem; margin-top: 1.75rem; }
  .inline-model { height: clamp(21rem, 57vw, 30rem); }
  .electronics-summary-intro { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2rem; }
  .electronics-summary-intro p { max-width: 55ch; }
}
@media (max-width: 36rem) {
  .story-heading { margin-bottom: 1.5rem; }
  .story-photo { aspect-ratio: 1.35; }
  .study-label { padding: 1rem 1.25rem; }
  .study-caption { padding: 1.25rem; }
  .study-cross-one { left: 1.25rem; }
  .study-cross-two { right: 1.25rem; }
}
@media (max-width: 24rem) {
  .inline-model { height: 19rem; }
}