/* The living layer (alive.js): a pill in the header with Glasgow and Barcelona, a two-sky panel behind it, a faint
   tint behind the page from the two skies, and the site's sleep at night. The tint and the marks of age sit behind
   the content (z-index -1), so they never cover text; sleep softens the ink a little and keeps it far above AA. */
.alive { position: relative; display: flex; align-items: center; min-width: 0; font-family: var(--font-data); }
.alive-pill { display: inline-flex; align-items: center; gap: 14px; min-height: 36px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--surface); color: var(--muted); font: 500 0.78rem/1 var(--font-data); letter-spacing: 0.01em; cursor: pointer; white-space: nowrap;
  transition: border-color 0.3s, color 0.3s; }
@media (hover: hover) and (pointer: fine) { .alive-pill:hover { border-color: #4a443c; color: var(--ink); } }
.alive.open .alive-pill { border-color: #4a443c; color: var(--ink); }
.alive-cities { display: inline-flex; gap: 14px; transition: opacity 0.6s; }
.alive-c { display: inline-flex; align-items: center; gap: 7px; }
.alive-c i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.alive-greet { display: none; color: var(--ink); }
.alive.greeting .alive-cities { display: none; }
.alive.greeting .alive-greet { display: inline; animation: alive-in 0.8s var(--ease-out, ease-out); }
@keyframes alive-in { from { opacity: 0; } to { opacity: 1; } }
/* folded: two small dots, nothing more */
.alive.folded .alive-pill { padding: 0 11px; gap: 0; }
.alive.folded .alive-c { gap: 0; }
.alive.folded .alive-c span, .alive.folded .alive-greet { display: none; }
.alive.folded .alive-cities { gap: 5px; }

.alive-panel { position: absolute; z-index: 25; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(460px, calc(100vw - 32px));
  display: grid; gap: 12px; padding: 14px; border: 1px solid var(--rule-2); background: var(--surface);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); color: var(--ink); font-size: 0.82rem; line-height: 1.45; animation: alive-in 0.35s var(--ease-out, ease-out); }
.alive-panel[hidden] { display: none; }
.alive-panel canvas { display: block; width: 100%; height: 150px; }
.alive-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alive-cols > div { display: grid; gap: 2px; color: var(--muted); }
.alive-cols b { color: var(--ink); font-weight: 500; }
.alive-mood { font-family: var(--font-body); font-size: 1.02rem; font-style: italic; color: var(--ink); }
.alive-mem { color: var(--muted); }
.alive-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.alive-acts button { min-height: 36px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 3px; background: transparent; color: var(--ink);
  font: 500 0.78rem/1 var(--font-data); cursor: pointer; }
.alive-acts button[data-a="close"] { margin-left: auto; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .alive-acts button:hover { border-color: #5a5248; } }
.alive-note { color: var(--muted); font-size: 0.74rem; }
.alive-note a { color: var(--muted); }

/* The sky behind the page: Glasgow's light on the left, Barcelona's on the right, fading out down the screen; then
   the patina and the foxing of age. Behind the content, never over it. */
.alive-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--alive-wear, none), linear-gradient(90deg, var(--alive-a, transparent), var(--alive-b, transparent));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.25) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.25) 100%);
  transition: background 3s; }
.alive-flower { position: absolute; z-index: -1; width: 22px; height: 22px; pointer-events: none; fill: rgba(205, 160, 120, 0.2); }
.alive-flower .c { fill: rgba(225, 190, 120, 0.3); }

/* Sleep: when it is night in both cities. Softer ink (still above 12:1 on the page) and dimmer pictures. */
html.alive-drowsy { --ink: #e4ded2; }
html.alive-asleep { --ink: #d6d0c4; }
html.alive-drowsy img, html.alive-drowsy video { filter: brightness(0.94); }
html.alive-asleep img, html.alive-asleep video { filter: brightness(0.86) saturate(0.9); }

@media (max-width: 640px) {
  /* phones: the header scrolls away with the page, and the pill gets its own row under the links */
  .alive { order: 3; width: 100%; padding-bottom: 6px; position: static; }
  .top { position: relative; }
  .alive-pill { gap: 10px; padding: 0 12px; font-size: 0.74rem; max-width: 100%; overflow: hidden; }
  .alive-cities { gap: 10px; min-width: 0; }
  .alive-c { min-width: 0; }
  .alive-c span { overflow: hidden; text-overflow: ellipsis; }   /* a long weather word shortens, the times never do */
  .alive-greet { white-space: normal; text-align: left; line-height: 1.3; padding-block: 6px; }
  .alive.folded { position: absolute; top: 6px; right: 0; width: auto; padding-bottom: 0; }   /* the dots sit on the brand row */
  .alive-panel { left: 0; right: 0; transform: none; width: auto; top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .alive-pill, .alive-cities, .alive-sky { transition: none; }
  .alive-panel, .alive.greeting .alive-greet { animation: none; }
}
@media print { .alive, .alive-sky, .alive-flower { display: none; } }