/* Scoped to Concept Exploration; the common grid and existing entrances stay unchanged. */
.concept-exploration { color: var(--color-body); }
.concept-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-64); align-items: start; }
.concept-heading p { margin: 0; font-size: var(--project-type-body); line-height: var(--project-leading-body); }
.concept-heading .concept-lead { max-width: var(--project-reading-width); margin-bottom: var(--project-paragraph-gap); color: var(--ink); font-size: var(--project-type-emphasis); font-weight: var(--project-weight-heading); line-height: var(--leading-heading); }
.concept-direction { margin-top: var(--space-64); }
.concept-direction + .concept-direction { padding-top: var(--space-64); border-top: var(--border-subtle); }
.concept-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--space-48); align-items: center; }
.concept-direction--reverse .concept-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.concept-direction--reverse .concept-copy { grid-area: 1 / 2; }
.concept-direction--reverse .concept-product { grid-area: 1 / 1; }
.concept-copy, .concept-product { min-width: 0; }
.concept-kicker { margin: 0 0 var(--space-16); font-size: var(--project-type-small); letter-spacing: .08em; color: var(--color-accent); }
.concept-copy h3, .concept-bridge h3 { margin: 0; color: var(--ink); font-size: var(--project-type-module); font-weight: var(--project-weight-heading); line-height: var(--leading-heading); text-wrap: balance; }
.concept-bridge h3 { font-size: var(--project-type-emphasis); }
.concept-copy__lead { max-width: var(--project-reading-width); margin: var(--project-paragraph-gap) 0 0; font-size: var(--project-type-body); line-height: var(--project-leading-body); }
.concept-principles { display: grid; gap: var(--space-16); margin: var(--space-24) 0 0; padding-top: var(--space-16); border-top: var(--border-subtle); }
.concept-principles > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: var(--space-16); align-items: baseline; }
.concept-principles dt { color: var(--ink); font-size: var(--project-type-module); line-height: var(--leading-heading); font-weight: var(--project-weight-heading); }
.concept-principles dd { margin: 0; font-size: var(--project-type-body); line-height: var(--project-leading-body); }
html[lang="en"] .concept-principles > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.concept-product, .concept-study { margin: 0; }
.concept-inspect { position: relative; isolation: isolate; background: #000; }
.concept-inspect > img { display: block; width: 100%; height: auto; transform-origin: var(--detail-x, 50%) var(--detail-y, 50%); transition: transform var(--duration-feedback) var(--ease-feedback); }
.concept-inspect[data-detail-active] > img { transform: scale(1.045); }
.concept-inspect::after { content: ''; position: absolute; z-index: 1; left: var(--detail-x, 50%); top: var(--detail-y, 50%); width: 15%; aspect-ratio: 1; border: 1px solid var(--color-on-media); border-radius: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none; box-shadow: 0 0 0 8px rgb(233 237 240 / .08); transition: opacity var(--duration-feedback) var(--ease-feedback), transform var(--duration-feedback) var(--ease-feedback); }
.concept-inspect[data-detail-active]::after { opacity: .8; transform: translate(-50%, -50%) scale(1); }
.concept-point { position: absolute; z-index: 2; left: var(--point-x); top: var(--point-y); display: grid; place-items: center; width: var(--control-size); height: var(--control-size); padding: 0; border: 0; background: none; color: var(--color-on-media); font: var(--weight-regular) 20px/1 var(--font-family); transform: translate(-50%, -50%); }
.concept-point::before { content: ''; position: absolute; z-index: -1; inset: 8px; border: 1px solid rgb(247 250 247 / .8); border-radius: 50%; background: rgb(32 50 65 / .88); transition: background var(--duration-feedback) var(--ease-feedback); }
.concept-point[data-highlighted]::before { background: var(--color-accent); }
.concept-point:focus-visible { outline: 1px solid var(--color-focus-on-media); outline-offset: -3px; border-radius: 50%; }
.concept-hint { margin: var(--space-12) 0 var(--space-16); color: var(--muted); font-size: var(--project-type-small); line-height: var(--leading-small); }
.concept-readout { min-height: calc(var(--space-64) + var(--space-48)); padding-left: var(--space-16); border-left: 2px solid var(--line); transition: border-color var(--duration-feedback) var(--ease-feedback); }
.concept-readout[data-detail-active] { border-color: var(--color-accent); }
.concept-readout h4 { margin: 0 0 var(--space-8); font-size: var(--project-type-module); line-height: var(--leading-heading); color: var(--ink); font-weight: var(--project-weight-heading); }
.concept-readout p { margin: 0; font-size: var(--project-type-small); line-height: var(--leading-small); max-width: 70ch; }
.concept-studies { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-48); margin-top: var(--space-32); align-items: start; }
.concept-study { min-width: 0; }
.concept-study--offset { margin-top: var(--space-64); }
.concept-study .media-frame { background: #000; }
.concept-study img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.concept-study h4 { margin: var(--space-16) 0 var(--space-12); font-size: var(--project-type-module); font-weight: var(--project-weight-heading); color: var(--ink); line-height: var(--leading-heading); }
.concept-study p { margin: 0; max-width: 60ch; font-size: var(--project-type-body); line-height: var(--project-leading-body); }
.concept-source { margin: var(--space-24) 0 0; color: var(--muted); font-size: var(--project-type-small); line-height: var(--leading-small); }
.concept-bridge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-64); margin-top: var(--space-64); padding-top: var(--space-32); border-top: var(--border-subtle); }
.concept-bridge p { margin: 0; max-width: 68ch; font-size: var(--project-type-body); line-height: var(--project-leading-body); }
@media (max-width: 1100px) {
  .concept-heading, .concept-bridge { gap: var(--space-32); }
  .concept-layout, .concept-direction--reverse .concept-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .concept-direction--reverse .concept-copy, .concept-direction--reverse .concept-product { grid-area: auto; }
  .concept-copy { max-width: 76ch; }
  .concept-product { width: 100%; }
  .concept-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
  .concept-principles > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .concept-studies { gap: var(--space-32); }
}
@media (max-width: 760px) {
  .concept-heading, .concept-bridge, .concept-studies { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .concept-direction { margin-top: var(--space-48); }
  .concept-direction + .concept-direction { padding-top: var(--space-48); }
  .concept-principles { grid-template-columns: minmax(0, 1fr); }
  .concept-principles > div, html[lang="en"] .concept-principles > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .concept-readout { min-height: calc(var(--space-96) + var(--space-48)); }
  .concept-inspect > img, .concept-study img { max-height: none; }
  .concept-studies { margin-top: var(--space-24); gap: var(--space-32); }
  .concept-study--offset { margin-top: 0; }
  .concept-bridge { margin-top: var(--space-48); }
}
@media (prefers-reduced-motion: reduce) {
  .concept-inspect > img, .concept-inspect::after, .concept-point::before, .concept-readout { transition: none; }
  .concept-inspect[data-detail-active] > img { transform: none; }
}