/* #included — through the eyepiece: constellation list (inline-start) + mosaic of apertures (inline-end). */
.inc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.inc-list { grid-column: 1 / span 5; gap: 28px; position: sticky; inset-block-start: calc(var(--header-h) + 32px); }
.inc-mosaic { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 16px; }

/* list: star lights ochre when its image is lit */
.inc-item { border-radius: var(--r-ctl); outline: 3px solid transparent; outline-offset: 6px; transition: outline-color .2s ease; }
.inc-item:focus-visible { outline-color: var(--focus-sand); }
.inc-item p { color: var(--ink-2); max-inline-size: var(--measure); }
.inc-name { font-size: var(--t-xl); font-weight: 600; line-height: 1.5; transition: color .3s ease; }
.included .const-list > li::before { background: var(--ink-3); transition: background-color .3s ease, scale .35s var(--ease-spring); }
.included .const-list > li.is-lit::before { background: var(--ochre); scale: 1.45; }
.inc-item.is-lit .inc-name { color: var(--ochre); }

/* mosaic cells */
.inc-fig { margin: 0; container-type: size; outline: 2px solid transparent; outline-offset: 4px; transition: scale .4s var(--ease-out), outline-color .25s ease; }
.inc-fig.is-lit { outline-color: var(--ochre); scale: 1.02; z-index: 1; }
.inc-fig--tent  { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.inc-fig--scope { grid-column: 6 / span 5; aspect-ratio: 4 / 5; }
.inc-fig--guide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.inc-fig--fire  { grid-column: 1 / span 6; aspect-ratio: 16 / 10; }
.inc-fig--coffee { grid-column: 7 / span 4; align-self: stretch; }   /* square-ish: height follows the fire cell */

/* aperture: the image is clipped to a circle that opens to the full round-rect; final (open) state is the default */
.inc-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; clip-path: circle(75% at 50% 50%); }

/* closed-aperture ring + 4 crosshair ticks, sized like the clip-path circle (18% of √((w²+h²)/2)) */
.inc-ring { position: absolute; inset: 0; margin: auto; pointer-events: none; opacity: 0; display: none; }
@supports (width: hypot(1px, 1px)) {
  .inc-ring {
    --d: calc(.2546 * hypot(100cqw, 100cqh));
    display: block; inline-size: calc(var(--d) + 16px); block-size: calc(var(--d) + 16px);
    background:
      linear-gradient(var(--star-3), var(--star-3)) 50% 0 / 1px 16px no-repeat,
      linear-gradient(var(--star-3), var(--star-3)) 50% 100% / 1px 16px no-repeat,
      linear-gradient(var(--star-3), var(--star-3)) 0 50% / 16px 1px no-repeat,
      linear-gradient(var(--star-3), var(--star-3)) 100% 50% / 16px 1px no-repeat;
  }
  .inc-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1px solid var(--line-night); }
}

/* aperture opens once when the frame enters (IO) — deliberately not scroll-scrubbed: the next section (#night) is the scrub */
@media (prefers-reduced-motion: no-preference) {
  .inc-img { transition: clip-path 1.4s var(--ease-reveal); transition-delay: calc(var(--k, 0) * .14s); }
  .inc-ring { transition: opacity .7s ease; }
  .included[data-armed] .inc-fig:not(.is-open) .inc-img { clip-path: circle(22% at 50% 50%); }
  .included[data-armed] .inc-fig:not(.is-open) .inc-ring { opacity: 1; }
}
@keyframes inc-open { from { clip-path: circle(18% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes inc-ring { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 960px) {
  .inc-list { grid-column: 1 / span 6; }
  .inc-mosaic { grid-column: 7 / span 6; }
}
@media (max-width: 760px) {
  .inc-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .inc-list, .inc-mosaic { grid-column: 1 / -1; position: static; }
  .inc-mosaic { grid-template-columns: minmax(0, 1fr); }
  .inc-fig--tent, .inc-fig--scope, .inc-fig--guide, .inc-fig--fire, .inc-fig--coffee { grid-column: 1 / -1; }
  .inc-fig--tent, .inc-fig--scope { aspect-ratio: 4 / 5; }
  .inc-fig--guide, .inc-fig--fire, .inc-fig--coffee { aspect-ratio: 3 / 2; align-self: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .inc-fig, .inc-item, .inc-name, .included .const-list > li::before { transition: none; }
}