/* Homepage only: the big section links on the left. Frame is in frame.css. */

.sections { list-style: none; flex: 1; padding: 96px 0; display: flex; flex-direction: column; gap: 56px; }

.sections a { text-decoration: none; display: inline-block; color: var(--text); }

.title {
  display: block;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--text);
  transition: padding-left 0.2s ease;
}
.sections a:hover .title { padding-left: 12px; }

/* Engraving beside a section link. The PNG is used as a mask so it takes
   the text color and flips with the light bulb. */
.with-figure { display: flex; align-items: center; gap: 48px; }
.figure {
  display: block;
  background: var(--text);
  -webkit-mask: var(--img) center / contain no-repeat;
          mask: var(--img) center / contain no-repeat;
  opacity: 0.9;
}
.figure-camera { --img: url('../ornaments/camera-obscura.png'); width: 260px; aspect-ratio: 1011 / 764; }

/* Camera obscura: when the cursor comes near, the rays outside the lens lean
   toward it (js/camera.js). Hidden otherwise, and never in the way of clicks. */
.camera { position: relative; display: block; flex-shrink: 0; }
.camera-rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.camera-rays .ray { fill: none; stroke: var(--text); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.1 13; }

/* Contact link on the left jumps here; give it a brief nudge so it's noticed */
.links:target { animation: nudge 1.2s ease; }
@keyframes nudge { 0%, 100% { opacity: 1; } 30% { opacity: 0.35; } }

@media (max-width: 860px) {
  .sections { padding: 40px 0; gap: 48px; }
  .with-figure { gap: 24px; }
  .figure-camera { width: 160px; }
}