/* WAYLIGHTS — streetlights as a beacon, a guide, a way back.
   Independent of FIELDS, LINES and HUES. The head, eyebrow and foot rules
   are restated here rather than pulled from lines.css/hues.css, so this
   section stands alone and can change without touching them.

   Ten frames, colour and black-and-white running together rather than
   separated, in three rows: 3 / 4 / 3. Every frame is shot 5:4 and shown
   whole — nothing cropped, nothing stretched. Each row's columns share
   the row's width equally; the row's height simply follows from that,
   so a row of four reads shorter than a row of three, the same way a
   wider spread of lamps sits lower against the sky. */

.lines-head { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px var(--pad); font-size:12px; letter-spacing:.13em; }
.lines-head a { padding:8px 0; }
a:focus-visible, button:focus-visible { outline:2px solid var(--paper); outline-offset:5px; }
.eyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#a4a399; }
.madrid-foot { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:0 var(--pad) 16px; font-size:12px; color:#a4a399; }
.madrid-foot a { display:inline-block; padding:10px 0; }
.rights { font-size:10px; letter-spacing:.12em; color:var(--dormant); white-space:nowrap; }
.madrid-foot-tags { font-size:10px; letter-spacing:.1em; text-transform:lowercase; color:var(--quiet); white-space:nowrap; }
@media(max-width:760px) { .madrid-foot-tags { display:none; } }

/* observed.css locks body to overflow:hidden for the gate, which is a
   contents page that never scrolls. WAYLIGHTS is a passage, not a gate,
   so it overrides that here. */
html { height:auto; }
body { height:auto; overflow-y:auto; overflow-x:hidden; }

.waylights { padding:8px 0 20px; }
.waylights .eyebrow { padding:0 var(--pad); margin:0 0 clamp(14px,2.4vh,26px); }

.way-home {
  position:relative;
  font-family:var(--serif);
  font-style:italic;
  text-transform:none;
  letter-spacing:.02em;
  color:var(--paper);
  cursor:default;
}

.way-home-tip {
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-4px);
  width:max-content;
  max-width:240px;
  padding:8px 10px;
  background:rgba(8,9,6,.88);
  color:var(--paper);
  font-family:var(--sans);
  font-style:normal;
  font-size:11px;
  letter-spacing:.02em;
  line-height:1.45;
  text-align:left;
  text-transform:none;
  border-radius:2px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  z-index:2;
}

.way-home:hover .way-home-tip,
.way-home:focus-visible .way-home-tip {
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}


.way-rows {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(16px,2.2vh,28px);
  padding:0 var(--pad);
  max-width:75%;
  margin:0 auto;
}

.way-row {
  display:grid;
  gap:clamp(16px,2vw,28px);
}

.way-row-3 { grid-template-columns:repeat(3,1fr); }
.way-row-4 { grid-template-columns:repeat(4,1fr); }

.way-still {
  position:relative;
  margin:0;
  opacity:0;
  animation:way-appear .5s var(--ease) forwards;
}

/* All nine frames appear together; only the glow (brightness +
   warm bloom) sweeps through them in sequence, row by row, like
   a run of streetlamps igniting one after another. */
@keyframes way-appear {
  from { opacity:0; }
  to { opacity:1; }
}

.way-still img {
  display:block;
  width:100%;
  height:auto;
  border-radius:1px;
  animation:way-light-on 2s var(--ease) both;
}

.way-row:nth-of-type(1) .way-still:nth-child(1) img { animation-delay:.1s; }
.way-row:nth-of-type(1) .way-still:nth-child(2) img { animation-delay:.28s; }
.way-row:nth-of-type(1) .way-still:nth-child(3) img { animation-delay:.46s; }
.way-row:nth-of-type(2) .way-still:nth-child(1) img { animation-delay:.64s; }
.way-row:nth-of-type(2) .way-still:nth-child(2) img { animation-delay:.82s; }
.way-row:nth-of-type(2) .way-still:nth-child(3) img { animation-delay:1s; }
.way-row:nth-of-type(3) .way-still:nth-child(1) img { animation-delay:1.18s; }
.way-row:nth-of-type(3) .way-still:nth-child(2) img { animation-delay:1.36s; }
.way-row:nth-of-type(3) .way-still:nth-child(3) img { animation-delay:1.54s; }

@keyframes way-light-on {
  0% {
    filter:brightness(.22) saturate(.55) drop-shadow(0 0 0 rgba(255,214,150,0));
  }
  55% {
    filter:brightness(1.75) saturate(1.2) drop-shadow(0 0 34px rgba(255,214,150,.65));
  }
  100% {
    filter:brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255,214,150,0));
  }
}

@media (prefers-reduced-motion:reduce) {
  .way-still { opacity:1; animation:none; }
  .way-still img { animation:none; }
}

.way-num {
  position:absolute;
  left:8px;
  bottom:7px;
  font-size:10px;
  letter-spacing:.08em;
  color:var(--paper);
  background:rgba(8,9,6,.5);
  padding:2px 6px;
  line-height:1.4;
}

@media (max-width:760px) {
  .way-rows { gap:12px; }
  .way-row { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
}