/* ============================================================
   LAUREL & LANTERN INN — observatory.css (v23, 2026-10-21)
   The Telescope on the Stargazer Observatory page: a brass
   eyepiece with two lenses (The Sky Above Hemlock Hollow and
   Beyond the Hollow). Uses only the tokens styles.css defines.
   All motion stops with "Still the house" or reduced motion
   (magic.css, styles.css and js/observatory.js handle that).
   ============================================================ */

.scope { margin-top: 56px; text-align: left; }
.scope h2 { text-align: center; }
.ob-lede { text-align: center; color: var(--parchment-dim); font-size: 1.15rem; max-width: 620px; margin: -12px auto 18px; }
.ob-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- buttons ---------- */
.ob-btn, .ob-music, .ob-lens, .ob-chip {
  font-family: var(--serif-caps); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--parchment); background: rgba(12, 0, 13, 0.5);
  border: 1px solid var(--parchment-faint); border-radius: 999px;
  padding: 10px 16px; min-height: 40px; cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.ob-btn:hover, .ob-btn:focus-visible, .ob-music:hover, .ob-music:focus-visible,
.ob-lens:hover, .ob-lens:focus-visible, .ob-chip:hover, .ob-chip:focus-visible { border-color: var(--amber); color: var(--amber); }
.ob-btn-quiet { background: none; color: var(--parchment-dim); }
.ob-btn-danger:hover, .ob-btn-danger:focus-visible { border-color: #c96a5a; color: #e08b7c; }
.ob-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; justify-content: center; }

.ob-music { display: flex; align-items: center; gap: 10px; margin: 0 auto 26px; }
.ob-music[aria-pressed="true"] { border-color: var(--copper); color: var(--copper); }
.ob-note { font-size: 1rem; letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ob-music[aria-pressed="true"] .ob-note { display: inline-block; animation: ob-bob 2.4s ease-in-out infinite; }
}
@keyframes ob-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- the two lenses ---------- */
.ob-lenses { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 22px; }
.ob-lens { padding: 11px 20px; }
.ob-lens[aria-selected="true"] {
  background: linear-gradient(180deg, #d9a66b, var(--brass));
  border-color: #e7bf8a; color: var(--night-deep);
  box-shadow: 0 0 18px rgba(255, 153, 51, 0.22);
}

/* ---------- the eyepiece ---------- */
.ob-stage { display: flex; flex-direction: column; align-items: center; }
.eyepiece {
  position: relative; width: min(100%, 600px); aspect-ratio: 1; border-radius: 50%;
  padding: clamp(14px, 3.4vw, 24px);
  background:
    radial-gradient(circle at 30% 22%, #f5d29a 0%, #c8904f 18%, #7b4a1e 46%, #3a2210 70%, #6e4419 86%, #c58c4c 100%);
  box-shadow:
    0 0 0 1px rgba(255, 214, 160, 0.35),
    0 0 0 6px rgba(12, 0, 13, 0.9),
    0 0 0 7px rgba(164, 106, 49, 0.55),
    0 18px 60px rgba(0, 0, 0, 0.65),
    0 0 90px rgba(255, 153, 51, 0.10);
}
.ep-glass {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: #07000a;
  box-shadow: inset 0 0 0 2px rgba(20, 8, 2, 0.9), inset 0 0 26px 8px rgba(0, 0, 0, 0.85);
}
.ep-canvas {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  cursor: crosshair; touch-action: manipulation; outline: none;
}
.ep-canvas.is-beyond { cursor: default; }
.ep-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--amber); }
/* knurled brass ring and a little lamplight on the lens */
.ep-rim {
  position: absolute; inset: clamp(5px, 1.2vw, 8px); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(40, 20, 6, 0.55) 0deg 1.4deg, rgba(255, 220, 170, 0.10) 1.4deg 2.8deg);
  -webkit-mask: radial-gradient(circle, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(circle, transparent calc(100% - 8px), #000 calc(100% - 7px));
}
.ep-sheen {
  position: absolute; inset: clamp(14px, 3.4vw, 24px); border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 38% at 32% 22%, rgba(255, 240, 220, 0.07), transparent 70%),
    radial-gradient(circle, transparent 62%, rgba(0, 0, 0, 0.55) 100%);
}
/* the focus-in when the eyepiece opens or a lens changes */
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-still) .ep-glass.focusing .ep-canvas { animation: ob-focus 1.1s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes ob-focus {
  0% { filter: blur(9px) brightness(0.6); transform: scale(1.06); }
  100% { filter: none; transform: none; }
}

.ob-say { min-height: 1.6em; margin-top: 14px; text-align: center; color: var(--copper); font-style: italic; font-size: 1.02rem; }

/* ---------- panels ---------- */
.ob-panel { max-width: 680px; margin: 10px auto 0; }
.ob-how { text-align: center; color: var(--parchment-dim); font-size: 1.08rem; }
.ob-keys { text-align: center; color: var(--parchment-faint); font-size: 0.9rem; margin-top: 6px; }
@media (hover: none) { .ob-keys { display: none; } }

.ob-card {
  margin: 22px auto 0; padding: 20px 20px 16px; border-radius: 14px;
  background: rgba(12, 0, 13, 0.45); border: 1px solid rgba(204, 153, 102, 0.35);
}
.ob-name, .ob-legend {
  width: 100%; font-family: var(--serif-display); color: var(--parchment);
  background: rgba(22, 0, 22, 0.75); border: 1px solid var(--parchment-faint); border-radius: 10px;
  padding: 10px 14px;
}
.ob-name { font-family: var(--serif-caps); font-size: 1rem; letter-spacing: 0.12em; text-align: center; }
.ob-legend { margin-top: 10px; font-size: 1.1rem; font-style: italic; line-height: 1.5; resize: vertical; min-height: 84px; }
.ob-name:focus-visible, .ob-legend:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.ob-name::placeholder, .ob-legend::placeholder { color: var(--parchment-faint); }
.ob-status { min-height: 1.4em; margin-top: 8px; text-align: center; color: var(--copper); font-size: 0.98rem; }

.ob-private {
  max-width: 640px; margin: 22px auto 0; padding: 14px 18px;
  font-size: 0.98rem; color: var(--parchment-dim); text-align: center;
  border: 1px solid var(--parchment-faint); border-radius: 12px; background: rgba(12, 0, 13, 0.4);
}
.ob-private strong { color: var(--parchment); font-weight: 600; }

.ob-mine { margin-top: 30px; text-align: center; }
.ob-mine-h {
  font-family: var(--serif-caps); font-weight: 400; font-size: 0.85rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 10px;
}
.ob-mine-empty { color: var(--parchment-faint); font-size: 1rem; }
.ob-mine-list { list-style: none; display: grid; gap: 10px; margin-top: 6px; }
.ob-mine-list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 14px; border-radius: 12px; text-align: left;
  border: 1px solid var(--parchment-faint); background: rgba(12, 0, 13, 0.35);
}
.ob-mine-list li.is-open { border-color: var(--amber); box-shadow: 0 0 14px rgba(255, 153, 51, 0.14); }
.ob-mine-name { font-family: var(--serif-caps); letter-spacing: 0.1em; font-size: 0.92rem; }
.ob-mine-meta { display: block; font-family: var(--serif-display); letter-spacing: 0; font-size: 0.92rem; color: var(--parchment-dim); }
.ob-mine-list .ob-actions { margin: 0; justify-content: flex-end; }
.ob-mine-list .ob-btn { padding: 7px 12px; min-height: 34px; font-size: 0.64rem; }
.ob-show { font-size: 1rem; color: var(--parchment-dim); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.ob-show input { accent-color: var(--amber); width: 18px; height: 18px; }

/* ---------- Beyond the Hollow ---------- */
.ob-pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.ob-pick-h {
  flex-basis: 100%; text-align: center; margin-top: 6px;
  font-family: var(--serif-caps); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--parchment-faint);
}
.ob-chip { padding: 8px 14px; min-height: 36px; font-size: 0.66rem; }
.ob-chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--night-deep); }
.ob-info {
  margin: 22px auto 0; padding: 22px 22px 18px; border-radius: 14px;
  background: rgba(12, 0, 13, 0.45); border: 1px solid rgba(204, 153, 102, 0.35);
}
.ob-info .ob-kind {
  font-family: var(--serif-caps); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--copper);
  text-align: center;
}
.ob-info h3 { font-family: var(--serif-caps); font-weight: 400; letter-spacing: 0.14em; font-size: 1.5rem; text-align: center; margin: 4px 0 2px; }
.ob-info .ob-where { text-align: center; font-style: italic; color: var(--parchment-dim); margin-bottom: 10px; }
.ob-info ul { padding-left: 1.2em; }
.ob-info li { margin: 6px 0; }
.ob-info li::marker { content: "\2726  "; color: var(--copper); font-size: 0.8em; }
.ob-info .ob-src { margin-top: 10px; font-size: 0.92rem; color: var(--parchment-faint); text-align: right; }
.ob-info .ob-src a { color: var(--parchment-dim); }
.ob-info .ob-src a:hover, .ob-info .ob-src a:focus-visible { color: var(--amber); }

@media (max-width: 560px) {
  .scope { margin-top: 44px; }
  .ob-lens { flex: 1 1 100%; }
  .ob-card, .ob-info { padding: 16px 14px 14px; }
}