/*
 * The websites section (Freelance): the telescope (components/work-options.js). Pick a target and it fills
 * the telescope's view, with the site's real front page in a browser window.
 */

/* ---------- Heading ---------- */
.wo-head { max-width: var(--wrap); margin: 0 auto clamp(1.6rem, 4vh, 2.6rem); }
.wo-head .chapter__sub { max-width: 46ch; }

/* ---------- A site's window: a browser frame round its front page ---------- */
.screen { --scr-r: 0.8rem; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; aspect-ratio: 16 / 11; border: 1px solid rgb(243 239 226 / 0.16); border-radius: var(--scr-r); background: #07091a; overflow: hidden; box-shadow: 0 30px 80px -40px rgb(0 0 0 / 0.9); }
.screen__bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.7rem; border-bottom: 1px solid rgb(243 239 226 / 0.1); background: rgb(14 18 38 / 0.95); }
.screen__bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgb(243 239 226 / 0.18); }
.screen__bar span { flex: 1; margin-left: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: rgb(243 239 226 / 0.06); font: 400 0.62rem/1.4 var(--mono); letter-spacing: 0.04em; color: rgb(243 239 226 / 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen__view { position: relative; min-height: 0; overflow: hidden; container-type: size; }

/* WildAboutFilm's window, behind its picture */
.screen--waf .screen__view { background: #f6f3eb; }

/* Site #4: still forming */
.s3 { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4cqw; padding: 7cqh 7cqw; background: radial-gradient(circle at 70% 50%, rgb(242 196 109 / 0.08), transparent 60%), #070a18; }
.s3__skel { display: grid; gap: 3cqh; }
.s3__skel i { display: block; height: 4cqh; border-radius: 99px; background: linear-gradient(90deg, rgb(243 239 226 / 0.06), rgb(243 239 226 / 0.14), rgb(243 239 226 / 0.06)); background-size: 200% 100%; }
.s3__skel i:nth-child(1) { width: 70%; height: 8cqh; }
.s3__skel i:nth-child(2) { width: 90%; }
.s3__skel i:nth-child(3) { width: 60%; }
.s3__skel i:nth-child(4) { width: 38%; height: 6cqh; margin-top: 2cqh; background: rgb(242 196 109 / 0.2); }
.motion .s3__skel i { animation: s3-shine 2.4s ease-in-out infinite; }
@keyframes s3-shine { to { background-position: -200% 0; } }
.s3__disc { display: grid; justify-items: center; gap: 2cqh; }
.s3 .planet--forming { --size: min(100%, 46cqh); }
.s3 .feed { font-size: 0.62rem; }
.s3 .feed__out { font-size: 0.6rem; }


/* ---------- Shared bits ---------- */
.wo-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; font: 400 0.64rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud); }
.wo-state { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--gold); }
.wo-state::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.wo-state--soon { color: var(--muted); }
.wo-state--soon::before { box-shadow: none; background: transparent; border: 1px solid currentColor; }
.wo-title { margin-top: 0.7rem; font: 300 clamp(1.5rem, 2.4vw, 2.2rem)/1.05 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.wo-what { margin-top: 0.7rem; max-width: 46ch; color: var(--muted); }
.wo-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.2rem; }
.wo-facts { display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem; margin-top: 1rem; }
.wo-facts div { display: flex; gap: 0.5rem; align-items: baseline; }
.wo-facts dt { font: 400 0.6rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud-dim); }
.wo-facts dd { margin: 0; font-size: 0.92rem; }


/* ================================================================ 2. Observatory */
.scope { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.6rem); max-width: var(--wrap); margin: 0 auto; align-items: start; }
.scope__targets { display: grid; gap: 0.6rem; position: sticky; top: 6rem; }
.scope__targets p { font: 400 0.62rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hud-dim); margin-bottom: 0.3rem; }
.scope__tab { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.2rem 0.8rem; width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 0.8rem; background: rgb(10 14 30 / 0.55); color: var(--muted); text-align: left; cursor: pointer; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.scope__tab:hover { border-color: rgb(242 196 109 / 0.4); color: var(--star); }
.scope__tab[aria-selected="true"] { border-color: var(--gold); background: rgb(242 196 109 / 0.1); color: var(--star); }
.scope__num { grid-row: span 2; font: 400 0.8rem/1 var(--mono); color: var(--hud); }
.scope__name { font: 400 1.05rem/1.2 var(--font); letter-spacing: 0.04em; text-transform: uppercase; }
.scope__tab .wo-state { font: 400 0.58rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.scope__panel[hidden] { display: none; }
.no-js .scope__targets { display: none; }
.no-js .scope { grid-template-columns: minmax(0, 1fr); }
.no-js .scope__panel + .scope__panel { margin-top: 3rem; }
.scope__lens { position: relative; padding: clamp(0.6rem, 1.4vw, 1rem); border: 1px solid rgb(159 232 255 / 0.22); border-radius: 1.6rem; background: radial-gradient(ellipse at center, rgb(20 30 60 / 0.5), rgb(2 3 10 / 0.85)); }
.scope__lens .screen { box-shadow: 0 0 0 1px rgb(2 3 10), 0 40px 90px -40px #000; }
.scope__reticle { position: absolute; inset: clamp(0.6rem, 1.4vw, 1rem); z-index: 2; pointer-events: none; border-radius: 0.8rem; }
.scope__reticle::before, .scope__reticle::after { content: ""; position: absolute; background: rgb(159 232 255 / 0.28); }
.scope__reticle::before { left: 50%; top: 0; bottom: 0; width: 1px; -webkit-mask: linear-gradient(transparent 0 6%, #000 6% 42%, transparent 42% 58%, #000 58% 94%, transparent 94%); mask: linear-gradient(transparent 0 6%, #000 6% 42%, transparent 42% 58%, #000 58% 94%, transparent 94%); }
.scope__reticle::after { top: 50%; left: 0; right: 0; height: 1px; -webkit-mask: linear-gradient(90deg, transparent 0 4%, #000 4% 44%, transparent 44% 56%, #000 56% 96%, transparent 96%); mask: linear-gradient(90deg, transparent 0 4%, #000 4% 44%, transparent 44% 56%, #000 56% 96%, transparent 96%); }
.scope__ring { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border: 1px solid rgb(159 232 255 / 0.3); border-radius: 50%; transform: translate(-50%, -50%); }
.scope__read { position: absolute; z-index: 3; font: 400 0.6rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hud); pointer-events: none; text-shadow: 0 0 6px #000, 0 0 2px #000; }
.scope__read--tl { left: 1.6rem; top: 3rem; }
.scope__read--tr { right: 1.6rem; top: 3rem; text-align: right; }
.scope__read--bl { left: 1.6rem; bottom: 1.4rem; }
.scope__read--br { right: 1.6rem; bottom: 1.4rem; text-align: right; color: var(--gold); }
.scope__panel.is-slewing .screen { filter: blur(6px) brightness(0.7); transform: scale(1.02); }
.scope__panel .screen { transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.scope__text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.4rem 2.4rem; margin-top: 1.4rem; padding: 0 0.4rem; }
.scope__text .wo-links { align-self: end; }


/* ---------- Responsive ---------- */
@media (max-width: 62em) {
  .scope { grid-template-columns: minmax(0, 1fr); }
  .scope__targets { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scope__targets p { grid-column: 1 / -1; }
  .scope__tab { grid-template-columns: minmax(0, 1fr); padding: 0.7rem; }
  .scope__num { grid-row: auto; }
  .scope__name { font-size: 0.85rem; }
  .scope__text { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40em) {
  .scope__tab { padding: 0.6rem 0.55rem; }
  .scope__name { font-size: 0.74rem; letter-spacing: 0.02em; }
  .scope__read--tr, .scope__read--bl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scope__panel .screen { transition: none; }
  .motion .s3__skel i { animation: none; }
}