/*
Theme Name: Old Photons
Theme URI: https://qsplace.co.uk
Author: Old Photons
Description: A dark, image-forward astrophotography theme. Pairs with the Old Photons Gallery plugin to present captures and equipment with a capture-log aesthetic and hover plate-solve. The signature: every object shows how old its photons are.
Version: 1.45.5
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: old-photons
Forgejo URI: git.discworld.casa/laurence/oldphotons-theme
Forgejo Branch: main
*/

:root{
  --void:#07090f; --ink:#0e1320; --panel:#101626; --haze:#1c2638;
  --starlight:#ece9e1; --muted:#8c97b0; --amber:#e0a85a;
  --halpha:#cd5870; --oiii:#3fb6a8; --violet:#9b7bd4; --cluster:#bcd2ff;
  --accent:var(--amber);
  /* Shared "highlight" treatment, used by every active/selected/primary surface
     so a change here updates the whole site at once (catalogue, filters, buttons,
     bars, chips...). */
  --hl-grad:linear-gradient(150deg,#ffd27a 0%,#f6a23c 55%,#e8852a 100%);
  --hl-glow:0 2px 10px color-mix(in srgb,var(--amber) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.35);
  --hl-glow-strong:0 6px 18px color-mix(in srgb,var(--amber) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.4);
  --hl-ink:#1c1408;
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--starlight);font-family:'Inter',system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
/* Global overflow guards: never let a stray element push the page sideways, and
   keep media and tables within their container. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe,canvas{max-width:100%;height:auto}
.op-mooninfo dd,.op-clock dd{overflow-wrap:break-word;word-break:normal}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--starlight)}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:'Spectral',serif;font-weight:400;line-height:1.15}
/* Visible keyboard focus on all interactive surfaces. */
a:focus-visible,button:focus-visible,input:focus-visible,.op-btn:focus-visible,.op-filter:focus-visible,.op-gfilter:focus-visible,.op-gtfilter:focus-visible,.op-sfilter:focus-visible,.op-chip:focus-visible,.op-filt:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
/* Respect reduced-motion: drop transitions, transforms and smooth scrolling. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .op-card:hover,a.op-cat-cell.is-done:hover{transform:none}
}

/* ---- top bar ---- */
.op-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.5rem;border-bottom:1px solid var(--haze);
  background:color-mix(in srgb,var(--void) 86%,transparent);backdrop-filter:blur(10px)}
.op-topbar.op-over{position:fixed;left:0;right:0;background:transparent;border-color:transparent}
.admin-bar .op-topbar,.admin-bar .op-topbar.op-over{top:32px}
@media screen and (max-width:782px){.admin-bar .op-topbar,.admin-bar .op-topbar.op-over{top:46px}}
.op-brand{font-family:'Spectral',serif;font-size:1.15rem;letter-spacing:.01em;color:var(--starlight)}
.op-brand em{font-style:italic;color:var(--amber)}
.custom-logo-link{display:flex;align-items:center}
/* Logo enlarged so the tagline reads; negative margins let it grow without expanding the bar much. */
.custom-logo{max-height:164px;width:auto;display:block;margin-top:-30px;margin-bottom:-30px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.op-nav{display:flex;gap:1.4rem;align-items:center}
.op-nav a{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.op-nav a:hover,.op-nav .current-menu-item>a{color:var(--starlight)}
/* Dropdown submenus (fallback nav + WP menu depth 2). */
/* WordPress-managed menu markup (ul.op-nav > li ...). */
ul.op-nav{list-style:none;margin:0;padding:0}
.op-nav li{list-style:none;position:relative}
.op-nav .menu-item>a,.op-nav .menu-item-has-children>a{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.op-nav .menu-item>a:hover{color:var(--starlight)}
.op-nav .menu-item-has-children>a::after{content:'\25BE';font-size:.6em;opacity:.65;margin-left:.3rem}
.op-nav-item,.op-nav .menu-item-has-children{position:relative;display:inline-flex;align-items:center}
.op-nav-item>a{display:inline-flex;align-items:center;gap:.25rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.op-nav-item>a:hover{color:var(--starlight)}
.op-nav-caret{font-size:.6em;opacity:.65}
.op-subnav,.op-nav .sub-menu{position:absolute;top:100%;left:0;min-width:190px;background:var(--ink);border:1px solid var(--haze);border-radius:8px;padding:.4rem;display:none;flex-direction:column;gap:.05rem;box-shadow:0 12px 32px rgba(0,0,0,.55);z-index:50}
.op-has-sub:hover .op-subnav,.op-has-sub:focus-within .op-subnav,.op-nav .menu-item-has-children:hover .sub-menu,.op-nav .menu-item-has-children:focus-within .sub-menu{display:flex}
.op-subnav a,.op-nav .sub-menu a{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.5rem .7rem;border-radius:5px;white-space:nowrap}
.op-subnav a:hover,.op-nav .sub-menu a:hover{color:var(--starlight);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.op-burger{display:none;background:none;border:1px solid var(--haze);color:var(--starlight);border-radius:2px;padding:.35rem .6rem;cursor:pointer;font-size:1rem}
@media(max-width:760px){
  .op-burger{display:block}
  .op-nav{position:absolute;top:calc(100% + .4rem);left:1rem;right:1rem;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);border:1px solid var(--haze);border-radius:10px;padding:.5rem 0;display:none;max-height:80vh;overflow-y:auto;box-shadow:0 14px 36px rgba(0,0,0,.55)}
  .op-nav.op-open{display:flex}
  .op-nav-item,.op-nav .menu-item-has-children,.op-nav li{display:block;width:100%}
  /* Comfortable, full-width tap rows with proper left padding. */
  .op-nav>a,.op-nav-item>a,.op-nav .menu-item>a{display:block;padding:.85rem 1.5rem;border-radius:0}
  .op-nav>a:hover,.op-nav .menu-item>a:hover{background:color-mix(in srgb,var(--amber) 9%,transparent);color:var(--starlight)}
  .op-subnav,.op-nav .sub-menu{position:static;display:flex;border:0;box-shadow:none;padding:0 0 .3rem;background:transparent;min-width:0}
  .op-subnav a,.op-nav .sub-menu a{padding:.7rem 1.5rem .7rem 2.6rem}
  .op-nav-caret,.op-nav .menu-item-has-children>a::after{display:none}
}

/* ---- hero ---- */
.op-hero{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:6rem 1.5rem 3.5rem;overflow:hidden}
.op-starfield{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.op-hero::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 50% 30%,transparent 40%,var(--void) 100%);pointer-events:none}
.op-hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;width:100%}
.op-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--amber);margin-bottom:1.3rem}
.op-wordmark{font-family:'Spectral',serif;font-weight:300;font-size:clamp(2.5rem,7vw,5rem);line-height:.96;letter-spacing:-.01em;margin:0}
.op-wordmark em{font-style:italic;color:var(--amber);font-weight:400}
.op-wordmark-logo{margin:0}
.op-hero-logo{display:block;width:auto;max-width:min(460px,82%);max-height:160px;height:auto}
.op-thesis{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:clamp(.78rem,1.3vw,.95rem);letter-spacing:.02em;color:var(--muted);max-width:52ch;margin:1.1rem 0 0}
.op-telemetry{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--muted);margin-top:2.3rem;display:flex;flex-wrap:wrap;gap:1.4rem}
.op-telemetry b{color:var(--starlight);font-weight:500}
.op-telemetry a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.op-telemetry a:hover{color:var(--starlight);border-bottom-color:color-mix(in srgb,var(--accent) 55%,var(--haze))}

/* ---- controls / filters ---- */
.op-controls{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--void) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--haze);padding:.9rem 1.5rem}
.op-controls-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.op-filter,.op-gfilter,.op-gtfilter,.op-sfilter{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--muted);border:1px solid var(--haze);border-radius:6px;padding:.45rem .8rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s,box-shadow .2s}
.op-filter:hover,.op-gfilter:hover,.op-gtfilter:hover,.op-sfilter:hover{color:var(--starlight);border-color:color-mix(in srgb,var(--accent) 55%,var(--haze))}
.op-filter[aria-pressed="true"],.op-gfilter[aria-pressed="true"],.op-gtfilter[aria-pressed="true"],.op-sfilter[aria-pressed="true"]{color:#1c1408;background:var(--hl-grad);border-color:color-mix(in srgb,var(--amber) 60%,#fff);font-weight:700;box-shadow:var(--hl-glow)}
.op-ctrl-sep{display:inline-block;width:1px;height:1.3rem;background:var(--haze);margin:0 .5rem;vertical-align:middle}
/* Grouped filter bar (equipment): each label + its buttons stay together and
   wrap as a unit, so lines never break in the middle of a group. */
/* Each filter set on its own line. */
.op-controls-grouped{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:.7rem}
.op-filtergroup{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.op-filtergroup .op-eyebrow{margin:0;white-space:nowrap;color:var(--muted);min-width:3.5rem}
.op-filtergroup-btns{display:flex;flex-wrap:wrap;gap:.4rem}
.op-card-fig{position:absolute;right:.5rem;bottom:.5rem;z-index:3;width:96px;max-width:40%;background:radial-gradient(130% 130% at 72% 18%,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--void) 78%,transparent) 68%);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--haze));border-radius:8px;padding:.35rem;opacity:.95;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.op-card-fig .op-consvg{display:block;width:100%;height:auto}
.op-name-con{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.op-fdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.5rem;vertical-align:middle;background:currentColor}
/* Gallery sort bar */
.op-gallery-sortbar{max-width:var(--maxw);margin:0 auto;padding:1rem 1.5rem 0;display:flex;justify-content:flex-end}
.op-sort{display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.op-sort-select{font-family:'IBM Plex Mono',monospace;font-size:.74rem;background:var(--ink);color:var(--starlight);border:1px solid var(--haze);border-radius:6px;padding:.4rem .6rem;cursor:pointer}
.op-sort-select:focus{outline:0;border-color:var(--amber)}
/* Home: latest captures strip */
.op-latest{max-width:var(--maxw);margin:1.5rem auto 0;padding:0 1.5rem}
.op-latest-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.op-latest-head h2{font-size:1.5rem;font-weight:300;margin:0}
.op-latest-all{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);white-space:nowrap}
/* Three across, so the strip fills its row instead of leaving an empty slot
   (the gallery's auto-fill would give four columns on a wide screen). */
.op-gallery-strip{padding:1.1rem 0 0;grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- gallery ---- */
.op-gallery{max-width:var(--maxw);margin:0 auto;padding:2.5rem 1.5rem 5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.op-empty{color:var(--muted);font-family:'IBM Plex Mono',monospace}
.op-card{--accent:var(--amber);background:var(--ink);border:1px solid var(--haze);border-radius:4px;overflow:visible;cursor:pointer;display:flex;flex-direction:column;transition:transform .25s,border-color .25s;text-align:left;font:inherit;color:inherit;width:100%;padding:0}
.op-card:hover,.op-card:focus-within{position:relative;z-index:5}
.op-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 60%,var(--haze))}
.op-card:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.op-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px 4px 0 0;background:radial-gradient(60% 55% at 38% 32%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 70%),radial-gradient(50% 60% at 70% 72%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 75%),var(--panel)}
.op-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op-frame .op-annot{opacity:0;transition:opacity .45s ease}
.op-frame:hover .op-annot,.op-frame.op-show-annot .op-annot{opacity:1}
.op-stars{position:absolute;inset:0;opacity:.6;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 60% 70%,#fff,transparent),radial-gradient(1px 1px at 80% 20%,#cfe0ff,transparent),radial-gradient(1px 1px at 35% 80%,#fff,transparent),radial-gradient(1px 1px at 50% 50%,#ffe9c7,transparent),radial-gradient(1px 1px at 90% 60%,#fff,transparent)}
.op-tag{position:absolute;left:.7rem;bottom:.7rem;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--haze);padding:.2rem .45rem;border-radius:2px;background:color-mix(in srgb,var(--void) 55%,transparent)}
.op-solved{position:absolute;left:.7rem;bottom:.7rem;z-index:3;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--void) 70%,transparent);border:1px solid color-mix(in srgb,var(--accent) 50%,var(--haze));padding:.2rem .45rem;border-radius:2px}
/* Reads as a stack of frames, in the card's accent, so a multi-version capture
   is obvious in the grid rather than something you only find by opening it. */
.op-vcount{position:absolute;right:.7rem;top:.7rem;z-index:3;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--void) 78%,transparent);border:1px solid color-mix(in srgb,var(--accent) 55%,var(--haze));box-shadow:2px -2px 0 color-mix(in srgb,var(--accent) 22%,transparent);padding:.25rem .5rem;border-radius:2px}
/* Sequence badge, same treatment as .op-vcount. The two never appear together
   in practice, but the sibling rule drops it a row if they ever do. */
.op-seqcount{position:absolute;right:.7rem;top:.7rem;z-index:3;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--void) 78%,transparent);border:1px solid color-mix(in srgb,var(--accent) 55%,var(--haze));box-shadow:2px -2px 0 color-mix(in srgb,var(--accent) 22%,transparent);padding:.25rem .5rem;border-radius:2px}
.op-vcount+.op-seqcount{top:2.4rem}
.op-rig-badge{position:absolute;right:.7rem;top:.7rem;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--starlight);background:color-mix(in srgb,var(--void) 60%,transparent);border:1px solid var(--haze);padding:.2rem .45rem;border-radius:2px}
/* Moon phase on the capture night: a small corner badge on the card, echoed as
   a row in the write-up log. The glyph is the theme's phase emoji. */
.op-moon-badge{position:absolute;left:.7rem;top:.7rem;z-index:3;display:inline-flex;align-items:center;gap:.28rem;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.05em;color:var(--starlight);background:color-mix(in srgb,var(--void) 74%,transparent);border:1px solid var(--haze);padding:.16rem .42rem;border-radius:2px}
.op-moon-badge .op-moon-ico{font-size:.82rem;line-height:1}
.op-moon-dd{display:flex;align-items:center;justify-content:flex-end;gap:.4rem}
.op-moon-dd .op-moon-ico{font-size:1rem;line-height:1}
/* Telescope / Camera / Rig on the card face: compact labelled rows, values
   truncated so a long name never stretches the card. */
.op-card-gear{display:flex;flex-direction:column;gap:.22rem;margin-top:.1rem}
.op-cg-row{display:flex;gap:.55rem;font-family:'IBM Plex Mono',monospace;font-size:.62rem;line-height:1.35;min-width:0}
.op-cg-lbl{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;flex:0 0 4.4rem}
.op-cg-val{color:var(--starlight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.op-card-body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.op-type-line{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.5rem}
.op-type-line[title]{cursor:help}
.op-type-desc{max-width:60ch;font-family:'Spectral',serif;font-style:italic;color:#c7cdda}
.op-type-line .op-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.op-name{font-family:'Spectral',serif;font-weight:400;font-size:1.45rem;line-height:1.1}
.op-card-body .op-name-con{display:block;margin-top:.2rem}
.op-desig{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--muted)}
.op-lightage{margin-top:.35rem;padding-top:.7rem;border-top:1px solid var(--haze);font-family:'Spectral',serif;font-style:italic;font-size:.92rem;color:#c7cdda}
.op-lightage b{font-style:normal;font-weight:500;color:var(--amber)}

/* ---- modal ---- */
.op-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:1.5rem;background:color-mix(in srgb,var(--void) 80%,transparent);backdrop-filter:blur(6px)}
.op-modal.op-open{display:flex}
/* The card scrolls nothing itself: the info column does. Previously the whole
   card scrolled, so a long capture log stretched the image frame to match it -
   and the photo, centred in that overlong frame, opened half a screen down with
   empty gradient above it. Now the frame is bounded by the card. */
.op-modal-card{background:var(--ink);border:1px solid var(--haze);border-radius:6px;max-width:920px;width:100%;max-height:90vh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,1fr)}
.op-mframe{position:relative;min-height:340px;background:var(--panel)}
.op-mframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.op-mframe .op-annot{opacity:0;transition:opacity .45s}
.op-mframe.op-show-annot .op-annot{opacity:1}
.op-annot-toggle{position:absolute;left:.8rem;bottom:.8rem;z-index:4;font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--starlight);background:color-mix(in srgb,var(--void) 65%,transparent);border:1px solid var(--haze);padding:.35rem .6rem;border-radius:2px;cursor:pointer}
.op-minfo{padding:1.8rem;overflow:auto;max-height:90vh}
.op-minfo .op-name{font-size:2rem;margin-bottom:.2rem}
.op-log{margin-top:1.3rem;border-top:1px solid var(--haze)}
.op-log dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;margin:0}
.op-log dt,.op-log dd{font-family:'IBM Plex Mono',monospace;font-size:.74rem;padding:.55rem .2rem;border-bottom:1px solid var(--haze);margin:0}
.op-log dt{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding-right:.8rem;white-space:nowrap}
.op-si{display:inline-block;vertical-align:-1px;margin-right:.45rem;color:var(--accent);opacity:.85}
/* normal (not break-word): values never stack one letter per line; they wrap at spaces. */
.op-log dd{color:var(--starlight);text-align:right;overflow-wrap:normal;word-break:normal;min-width:0}
.op-log dd.op-nowrap{white-space:nowrap}
.op-log dd.op-em{color:var(--haze)}
.op-log .op-sub{grid-column:1/-1;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding:.9rem .2rem .3rem}
.op-mactions{margin-top:1.5rem;display:flex;gap:.8rem;flex-wrap:wrap}
.op-btn{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:.6rem 1rem;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid var(--haze);background:transparent;color:var(--starlight)}
.op-btn.op-primary{background:var(--hl-grad);color:var(--hl-ink);border-color:color-mix(in srgb,var(--amber) 60%,#fff);font-weight:700;box-shadow:var(--hl-glow)}
.op-btn.op-primary:hover{box-shadow:var(--hl-glow-strong)}
.op-btn:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--haze));color:var(--starlight)}
.op-close{position:absolute;top:1rem;right:1rem;z-index:5;background:color-mix(in srgb,var(--void) 60%,transparent);border:1px solid var(--haze);color:var(--starlight);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1rem}
/* The arrows sit in .op-modal, NOT in .op-mframe: the frame stretches to match
   the info column, whose height changes with every capture, so anchoring them
   to the frame made them jump between images (and scroll out of view on tall
   captures). Positioned against the modal they stay put. Horizontal offset
   tracks the centred card: half its 920px max-width, floored at the edge. */
.op-mnav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:color-mix(in srgb,var(--void) 55%,transparent);border:1px solid var(--haze);color:var(--starlight);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.op-mnav:hover{background:color-mix(in srgb,var(--amber) 30%,var(--void));border-color:color-mix(in srgb,var(--amber) 55%,var(--haze))}
/* Version switcher inside the lightbox. Labelled, not just a row of buttons:
   readers need telling that a capture has more than one processed version. */
.op-mvswitch{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:1.3rem 0 .2rem;padding-top:1rem;border-top:1px solid var(--haze)}
.op-mvlbl{flex:0 0 100%;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.15rem}
.op-mvbtn{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.04em;cursor:pointer;background:transparent;border:1px solid var(--haze);color:var(--muted);padding:.4rem .75rem;border-radius:2px;transition:border-color .2s,color .2s,background .2s}
.op-mvbtn:hover{color:var(--starlight);border-color:color-mix(in srgb,var(--accent) 45%,var(--haze))}
.op-mvbtn.is-active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.op-mnav-prev{left:max(.7rem,calc(50% - 460px + .7rem))}
.op-mnav-next{right:max(.7rem,calc(50% - 460px + .7rem))}

/* ---- single capture ---- */
.op-wrap{max-width:var(--maxw);margin:0 auto;padding:3rem 1.5rem 5rem}
.op-single{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2.2rem;align-items:start}
.op-single-meta{min-width:0}
.op-single-left{min-width:0;display:flex;flex-direction:column;gap:1.6rem}
.op-single-left .op-prose{margin-top:0}
.op-single-media{position:relative;aspect-ratio:3/2;background:var(--panel);border:1px solid var(--haze);border-radius:6px;overflow:hidden}
.op-single-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#05070c}
.op-single-media .op-annot{opacity:0;transition:opacity .45s}
.op-single-media:hover .op-annot,.op-single-media.op-show-annot .op-annot{opacity:1}
/* Media tool buttons (annotations / plate-solve HUD) sit together bottom-left. */
.op-media-tools{position:absolute;left:.8rem;bottom:.8rem;z-index:6;display:flex;flex-wrap:wrap;gap:.5rem}
.op-media-tools .op-annot-toggle,.op-media-tools .op-labels-toggle{position:static;left:auto;bottom:auto}
.op-labels-toggle{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--starlight);background:color-mix(in srgb,var(--void) 65%,transparent);border:1px solid var(--haze);padding:.35rem .6rem;border-radius:6px;cursor:pointer}
.op-labels-toggle.is-on{color:var(--hl-ink);background:var(--hl-grad);border-color:color-mix(in srgb,var(--amber) 60%,#fff);box-shadow:var(--hl-glow)}
/* The image + its overlays rotate together as one stack so north can be put up. */
.op-media-stack{position:absolute;inset:0;transition:transform .4s ease;transform-origin:center}
.op-single-media.op-north-up .op-media-stack{transform:rotate(var(--north,0deg)) scale(var(--north-scale,1))}
.op-north-toggle{display:none;font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--starlight);background:color-mix(in srgb,var(--void) 65%,transparent);border:1px solid var(--haze);padding:.35rem .6rem;border-radius:6px;cursor:pointer}
.op-single-media.op-show-labels .op-north-toggle{display:inline-flex;align-items:center}
.op-north-toggle.is-on{color:var(--hl-ink);background:var(--hl-grad);border-color:color-mix(in srgb,var(--amber) 60%,#fff);box-shadow:var(--hl-glow)}
/* Plate-solve annotation HUD, drawn from the stored solve. */
.op-hud{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s}
.op-single-media.op-show-hud .op-hud{opacity:1}
.op-hud-read{position:absolute;left:.8rem;top:.8rem;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.04em;color:var(--starlight);background:color-mix(in srgb,var(--void) 62%,transparent);border:1px solid var(--haze);border-radius:4px;padding:.3rem .5rem}
/* Clear of .op-media-tools, which sits bottom-left at a higher z-index and was
   burying the scale bar whenever the overlay was switched on. */
.op-hud-scale{position:absolute;left:.8rem;bottom:3.4rem;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.op-hud-bar{display:block;width:100%;height:3px;background:var(--starlight);border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.op-hud-bar-lbl{font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:var(--starlight);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.op-hud-compass{position:absolute;right:.9rem;bottom:.9rem;width:54px;height:54px}
.op-hud-compass svg{width:100%;height:100%;overflow:visible}
.op-hud-compass line{stroke:var(--starlight);stroke-width:2;stroke-linecap:round}
.op-hud-compass text{fill:var(--starlight);font-family:'IBM Plex Mono',monospace;font-size:11px;text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:2px}
.op-hud-compass .op-hud-e{fill:var(--amber)}
/* Generated annotation overlay. The SVG carries the image's own aspect and is
   laid over the same box, so xMidYMid meet letterboxes it exactly as the
   image's object-fit:contain does - the two stay registered at any width. */
.op-annot-svg{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;opacity:0;transition:opacity .3s;overflow:visible}
.op-single-media.op-show-labels .op-annot-svg{opacity:1}
/* Drawn over photographs, so everything carries its own contrast: the grid is
   dark-cased, object names sit on a plate, and the rings are doubled with a
   dark backing stroke. */
/* --an-scale multiplies the label groups, which carry plate and text together
   so type can grow without outgrowing its backing. The PHP allows for
   OP_AN_SCALE_MAX when deciding which side of a marker a name goes on: keep
   that constant in step with the largest value used here. */
.op-annot-svg{--an-scale:1}
.op-an-grid polyline{fill:none;stroke:color-mix(in srgb,var(--starlight) 55%,transparent);stroke-width:calc(var(--an-sw,1px)*var(--an-scale,1));stroke-dasharray:calc(var(--an-sw,1px)*5) calc(var(--an-sw,1px)*6);paint-order:stroke;filter:drop-shadow(0 0 calc(var(--an-sw,1px)*1.5) rgba(0,0,0,.85))}
.op-an-gridlbl text{fill:color-mix(in srgb,var(--starlight) 82%,transparent);font-family:'IBM Plex Mono',monospace;font-size:var(--an-gfs,12px);letter-spacing:.04em;paint-order:stroke;stroke:rgba(0,0,0,.8);stroke-width:calc(var(--an-sw,1px)*3);stroke-linejoin:round}
.op-an-obj circle{fill:none;stroke:var(--accent);stroke-width:calc(var(--an-sw,1px)*1.8*var(--an-scale,1));filter:drop-shadow(0 0 calc(var(--an-sw,1px)*2) rgba(0,0,0,.9))}
.op-an-plate{fill:rgba(5,7,12,.74);stroke:color-mix(in srgb,var(--accent) 50%,transparent);stroke-width:calc(var(--an-sw,1px)*.8)}
.op-an-obj text{fill:var(--starlight);font-family:'IBM Plex Mono',monospace;font-size:var(--an-fs,14px);font-weight:600;dominant-baseline:middle}
.op-single h1{font-size:clamp(2rem,4vw,2.8rem);margin:.2rem 0 .3rem}
.op-back{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.op-prose{margin-top:2.5rem;max-width:70ch}
.op-prose p{color:#c7cdda;margin:0 0 1.1rem}
.op-prose h2,.op-prose h3{margin:2rem 0 .8rem}
.op-finder{margin-top:2.5rem;max-width:var(--maxw)}
.op-finder-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .9rem}
.op-finder-title{font-size:1rem;letter-spacing:.04em;margin:0}
.op-finder-views{display:flex;gap:.3rem}
.op-fv{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:transparent;border:1px solid var(--haze);color:var(--muted);padding:.35rem .7rem;border-radius:2px;transition:border-color .2s,color .2s}
.op-fv:hover{color:var(--starlight)}
.op-fv.is-active{border-color:var(--accent);color:var(--accent)}
.op-mfig{margin:.9rem 0 0;background:radial-gradient(130% 130% at 70% 15%,color-mix(in srgb,var(--accent) 14%,transparent),rgba(10,14,24,.55) 70%);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--haze));border-radius:8px;padding:.5rem}
.op-consvg{display:block;width:100%;height:auto}
.op-mfig-cap{display:block;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.25rem .15rem 0}
.op-single-fig{position:absolute;right:.6rem;bottom:.6rem;width:140px;max-width:42%;z-index:6;background:radial-gradient(130% 130% at 72% 16%,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--void) 78%,transparent) 68%);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--haze));border-radius:8px;padding:.4rem .45rem .35rem;backdrop-filter:blur(3px);pointer-events:none;opacity:.95;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.op-single-fig .op-consvg{display:block;width:100%;height:auto}
.op-single-fig-cap{display:block;font-family:'IBM Plex Mono',monospace;font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding-top:.2rem}
@media(max-width:600px){.op-single-fig{width:104px}}
/* The stick figure and the HUD compass both want the bottom-right corner, and
   the figure won on z-index. While the overlay is on, the compass and grid say
   the same thing better, so the figure steps aside. */
.op-single-media.op-show-labels .op-single-fig{opacity:0;pointer-events:none;transition:opacity .3s}
.op-single-fig.op-fig-big{width:min(82vw,380px);max-width:none;opacity:1;z-index:8}
.op-noscroll{overflow:hidden}
/* "safe" centring: a flex item larger than its scroll container gets clipped at
   the top/left with plain `center`, because there is no way to scroll back to
   it. `safe center` falls back to start alignment exactly when that would
   happen, so a blown-up image stays reachable instead of hanging off the page. */
.op-zoom{position:fixed;inset:0;z-index:9999;background:rgba(5,7,12,.93);display:none;align-items:safe center;justify-content:safe center;overflow:auto;padding:1vmin;cursor:zoom-out}
.op-zoom.op-open{display:flex}
/* Sized against the viewport including the padding, so the fitted view always
   lands whole on screen rather than a fraction off the bottom. */
.op-zoom img{max-width:calc(100vw - 2vmin);max-height:calc(100vh - 2vmin);object-fit:contain;cursor:zoom-in;box-shadow:0 10px 60px rgba(0,0,0,.6);border-radius:2px}
.op-zoom img.op-zoomed{max-width:none;max-height:none;cursor:zoom-out}
.op-zoom-close{position:fixed;top:env(safe-area-inset-top,0);right:0;margin:.8rem;z-index:10000;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--void) 70%,transparent);border:1px solid var(--haze);color:var(--starlight);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.op-zoom-close:hover{border-color:var(--amber);color:var(--amber)}
/* The stage shrink-wraps the image, so the overlay pinned to it stays
   registered whether the image is fitted to the screen or blown up to 1:1. */
/* No `margin:auto` here: it would override the safe centring above and bring
   the clipping back for images larger than the viewport. */
.op-zoom-stage{position:relative;flex:0 0 auto;line-height:0}
.op-zoom-annot,.op-zoom-hudslot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.op-zoom.op-show-labels .op-zoom-annot,.op-zoom.op-show-hud .op-zoom-hudslot{opacity:1}
/* Both layers are hidden by default in their page context; inside the zoom the
   wrapper does the fading, so the clones themselves are always fully opaque. */
/* Bigger in the enlarged view, where there is room for it and the reader has
   asked for a closer look. Must not exceed OP_AN_SCALE_MAX in functions.php. */
.op-zoom-annot .op-annot-svg{position:absolute;inset:0;width:100%;height:100%;opacity:1;--an-scale:1.5}
.op-zoom-hudslot .op-hud{opacity:1}
/* Nudge the centre readout below the toggles, which are fixed top-left and
   would otherwise sit on top of it when the image fills the screen. */
.op-zoom-hudslot .op-hud-read{top:3.6rem}
.op-zoom-tools{position:fixed;top:env(safe-area-inset-top,0);left:0;margin:.8rem;z-index:10000;display:flex;flex-wrap:wrap;gap:.5rem}
.op-zoom-labels,.op-zoom-hud{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--starlight);background:color-mix(in srgb,var(--void) 70%,transparent);border:1px solid var(--haze);border-radius:6px;padding:.5rem .7rem;cursor:pointer}
.op-zoom-labels.is-on,.op-zoom-hud.is-on{color:var(--hl-ink);background:var(--hl-grad);border-color:color-mix(in srgb,var(--amber) 60%,#fff);box-shadow:var(--hl-glow)}
.op-single-media .op-base,.op-mframe .op-base{cursor:zoom-in}
.op-finder-cap{margin:.7rem 0 0;font-size:.74rem;color:var(--muted);max-width:70ch}
/* Interactive finder: a self-hosted, zoomable star chart on a canvas. The stage
   holds the canvas, the click-to-identify tip and the drag/scroll hint; the
   static vector fallback lives inside it too and is hidden once the script boots
   (.is-live), so a no-JS visitor still sees the bundled chart. */
.op-finder-stage{position:relative;width:100%;aspect-ratio:16/11;border:1px solid var(--haze);border-radius:4px;overflow:hidden;background:var(--void)}
.op-finder-canvas{display:none;width:100%;height:100%;touch-action:none;cursor:grab}
.op-finder-canvas:active{cursor:grabbing}
.op-finder-interactive.is-live .op-finder-canvas{display:block}
.op-finder-interactive.is-live .op-finder-static{display:none}
.op-finder-static{width:100%}
.op-finder-static .op-skychart{margin-top:0;padding-top:0;border-top:0}
.op-finder-tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;background:color-mix(in srgb,var(--void) 82%,#000);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--haze));border-radius:4px;padding:.4rem .55rem;font-family:'IBM Plex Mono',monospace;font-size:.68rem;line-height:1.5;color:var(--starlight);box-shadow:0 6px 18px rgba(0,0,0,.5);max-width:16rem}
.op-finder-tip b{display:block;color:var(--accent);font-size:.74rem;margin-bottom:.15rem}
.op-finder-tip span{display:inline-block;color:var(--muted);margin-right:.5rem}
.op-finder-hint{position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);z-index:2;pointer-events:none;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.06em;color:var(--muted);background:color-mix(in srgb,var(--void) 70%,transparent);padding:.2rem .5rem;border-radius:2px;transition:opacity .4s}
.op-finder-hint.is-hidden{opacity:0}
/* Finder chart and location map side by side, so neither runs the page long. */
.op-finder-row{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.5rem;align-items:flex-start}
.op-finder-row .op-finder{margin-top:0;flex:1 1 440px;min-width:0;max-width:none}
.op-finder-row .op-locmap{margin-top:0;flex:1 1 300px;min-width:0;align-self:stretch;display:flex;flex-direction:column}
.op-finder-row .op-locmap-frame{flex:1 1 auto;min-height:300px}
@media(max-width:820px){.op-finder-row .op-locmap-frame{min-height:220px}}
.op-lightage-unknown{color:var(--muted);font-style:italic}
.op-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0 0}
.op-card-body .op-filters{margin:.5rem 0 0}
.op-gear-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.op-log dd.op-soft-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem}
.op-filt{--fc:#76819c;font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;letter-spacing:.04em;line-height:1;padding:.28rem .5rem;border-radius:2px;color:var(--fc);border:1px solid color-mix(in srgb,var(--fc) 55%,var(--haze));background:color-mix(in srgb,var(--fc) 14%,transparent)}
.op-filt-has-gear{position:relative;cursor:pointer;display:inline-block;border-bottom-style:dashed}
.op-filt-has-gear:hover{color:var(--fc)}
.op-filt-card{position:absolute;left:50%;bottom:calc(100% + .55rem);transform:translateX(-50%);z-index:60;width:248px;display:none;gap:.6rem;padding:.7rem;background:var(--panel);border:1px solid var(--haze);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.55);text-align:left;cursor:default;text-transform:none;letter-spacing:normal}
.op-filt-card::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--haze)}
.op-filt-has-gear:hover .op-filt-card,.op-filt-has-gear:focus .op-filt-card,.op-filt-has-gear:focus-within .op-filt-card{display:flex}
.op-filt-card-img{width:54px;height:54px;object-fit:cover;border-radius:4px;flex:0 0 auto;background:#000}
.op-filt-card-body{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.op-filt-card-title{font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;color:var(--starlight)}
.op-filt-card-sub{font-family:'Inter',sans-serif;font-size:.68rem;color:var(--muted)}
.op-filt-card-nm{font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--amber)}
.op-filt-card-specs{font-family:'Inter',sans-serif;font-size:.64rem;color:var(--muted);line-height:1.35}
.op-filt-card-link{font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:var(--amber);text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem}
.op-filt-card-desc{font-family:'Inter',sans-serif;font-size:.66rem;line-height:1.4;color:var(--starlight);font-weight:400;letter-spacing:normal;text-transform:none}
/* Plain (non-gear) filter badge: styled description tooltip on hover/focus. */
.op-filt-tipped{position:relative;cursor:help;border-bottom-style:dashed}
.op-filt-tip{position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%);z-index:60;width:230px;display:none;flex-direction:column;gap:.3rem;padding:.6rem .7rem;background:var(--panel);border:1px solid var(--haze);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.55);text-align:left;text-transform:none;letter-spacing:normal;cursor:default}
.op-filt-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--haze)}
.op-filt-ext{cursor:pointer;text-decoration:none}
.op-filt-tip-link{font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:var(--amber);text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem}
.op-filt-tip b{font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;color:var(--starlight)}
.op-filt-tip span{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:400;line-height:1.4;color:var(--muted)}
.op-filt-tipped:hover .op-filt-tip,.op-filt-tipped:focus .op-filt-tip,.op-filt-tipped:focus-within .op-filt-tip{display:flex}
.op-regions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.7rem 0 0}
.op-regions-lbl{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.op-ar{font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;letter-spacing:.04em;line-height:1;padding:.28rem .5rem;border-radius:2px;color:#ffce6b;border:1px solid color-mix(in srgb,#ffce6b 45%,var(--haze));background:color-mix(in srgb,#ffce6b 12%,transparent);cursor:help}
/* Version compare. The top layer is clipped by width and its image is pinned to
   the full frame width in JS, so the two halves stay registered as it moves. */
.op-vcompare-btn{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.05em;cursor:pointer;background:transparent;border:1px solid var(--haze);color:var(--muted);padding:.35rem .7rem;border-radius:2px;margin:.1rem 0 1rem;transition:border-color .2s,color .2s}
.op-vcompare-btn:hover{color:var(--starlight)}
.op-vcompare-btn.is-on{border-color:var(--accent);color:var(--accent)}
.op-compare{position:absolute;inset:0;z-index:7;display:none;overflow:hidden;background:#05070c;cursor:ew-resize}
.op-compare.is-on{display:block}
.op-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.op-compare-top{position:absolute;inset:0;width:50%;overflow:hidden}
.op-compare-top img{max-width:none}
.op-compare-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);box-shadow:0 0 12px rgba(0,0,0,.8);pointer-events:none}
.op-compare-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--void) 70%,transparent);border:1px solid var(--accent)}
.op-compare-lbl{position:absolute;bottom:.7rem;z-index:8;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.06em;color:var(--starlight);background:color-mix(in srgb,var(--void) 72%,transparent);border:1px solid var(--haze);border-radius:2px;padding:.2rem .45rem;pointer-events:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-compare-lbl-a{right:.7rem}
.op-compare-lbl-b{left:.7rem}
/* While comparing, the overlays and tools would only be in the way. */
.op-single-media.op-comparing .op-annot-svg,.op-single-media.op-comparing .op-hud,.op-single-media.op-comparing .op-single-fig{opacity:0}

/* The overlay's contents as text: readable, linkable, and visible to search. */
.op-inframe{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--haze)}
.op-inframe-lbl{display:block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.op-inframe-list{display:flex;flex-wrap:wrap;gap:.4rem}
.op-inframe-obj{font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-decoration:none;border:1px solid var(--haze);border-radius:2px;padding:.25rem .5rem;transition:border-color .2s,color .2s}
/* Objects the site has its own photo of: a live link, marked with a leading dot. */
.op-inframe-obj.has-photos{color:var(--starlight);border-color:color-mix(in srgb,var(--accent) 35%,var(--haze))}
.op-inframe-obj.has-photos::before{content:'';display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:var(--accent);margin-right:.4rem;vertical-align:.05em}
.op-inframe-obj.has-photos:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--haze));color:var(--accent)}
/* Everything else in the frame: shown, but plainly, and not a link. */
.op-inframe-obj.is-absent{color:var(--muted);border-style:dashed;cursor:default}
.op-inframe-note{font-family:'Spectral',serif;font-style:italic;font-size:.8rem;color:var(--muted);margin:.6rem 0 0}
/* Offline finder chart: a self-hosted inline-SVG panel of the plate-solved
   field, meant to read like a small planetarium view. A neutral star field
   sized by magnitude, catalogue objects drawn as amber-tinted ellipses at their
   true angular size, a faint grid, and an amber target. Colours are set inline
   on the SVG so a standalone file still looks right, and overridden here so the
   chart tracks the theme. */
.op-skychart{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--haze)}
.op-skychart-lbl{display:block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.op-skychart-frame{display:block;width:100%;max-width:520px;aspect-ratio:1/1;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--haze));border-radius:10px;overflow:hidden;background:var(--void);box-shadow:0 8px 26px rgba(0,0,0,.4)}
.op-skychart-svg{display:block;width:100%;height:100%}
.op-skychart-svg .op-skychart-bg{fill:var(--void)}
.op-skychart-svg .op-skychart-grid{stroke:color-mix(in srgb,var(--starlight) 16%,transparent)}
.op-skychart-svg .op-skychart-gridlbl{fill:color-mix(in srgb,var(--starlight) 55%,transparent)}
/* Stars: neutral white, halos on the brightest already carry their own opacity. */
.op-skychart-svg .op-skychart-stardot{fill:color-mix(in srgb,var(--starlight) 92%,#ffffff)}
.op-skychart-svg .op-skychart-starhalo{fill:color-mix(in srgb,var(--starlight) 80%,#ffffff)}
/* Deep-sky objects: an amber accent tint, distinct from the neutral stars. */
.op-skychart-svg .op-skychart-shape{stroke:var(--accent)}
.op-skychart-svg .op-skychart-objlbl{fill:color-mix(in srgb,var(--accent) 55%,var(--starlight))}
.op-skychart-svg .op-skychart-target{stroke:var(--accent)}
/* Real-image finder: a cached DSS survey photo of the field with a light SVG
   overlay on top. The frame keeps the field's own aspect (set inline) rather
   than the square vector chart, and the overlay is absolutely positioned to
   cover the image one-to-one. Kept subtle so the photo reads through. */
.op-skyimage-frame{position:relative;display:block;width:100%;max-width:520px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--haze));border-radius:10px;overflow:hidden;background:var(--void);box-shadow:0 8px 26px rgba(0,0,0,.4)}
.op-skyimage-img{display:block;width:100%;height:100%;object-fit:cover}
.op-skyimage-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.op-skyimage-overlay .op-skyimage-target{stroke:var(--accent)}
.op-skyimage-overlay .op-skyimage-obj{stroke:var(--accent)}
.op-skyimage-overlay .op-skyimage-objlbl{fill:color-mix(in srgb,var(--accent) 55%,var(--starlight))}
.op-skychart-note{font-family:'Spectral',serif;font-style:italic;font-size:.8rem;color:var(--muted);margin:.6rem 0 0}
.op-vswitch-lbl{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:1.3rem 0 .1rem;padding-top:1rem;border-top:1px solid var(--haze)}
.op-vswitch{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 1.2rem}
.op-vsessions{display:flex;flex-wrap:wrap;gap:.3rem;margin:.4rem 0 0;border-bottom:1px solid var(--haze)}
.op-vsession{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;background:transparent;border:1px solid var(--haze);border-bottom:0;color:var(--muted);padding:.4rem .7rem;border-radius:3px 3px 0 0;margin-bottom:-1px;transition:color .2s,border-color .2s,background .2s;display:inline-flex;align-items:center;gap:.4rem}
.op-vsession:hover{color:var(--starlight)}
.op-vsession.is-active{color:var(--accent);border-color:var(--haze);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.op-vsession-n{font-size:.9em;opacity:.65;border:1px solid currentColor;border-radius:8px;padding:0 .3rem;line-height:1.4}
.op-vswitch:has(.op-vstages){display:block;margin-top:0}
.op-vstages{display:flex;flex-wrap:wrap;gap:.4rem;padding-top:.6rem}
.op-vbtn{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.05em;cursor:pointer;background:transparent;border:1px solid var(--haze);color:var(--muted);padding:.35rem .7rem;border-radius:2px;transition:border-color .2s,color .2s}
.op-vbtn:hover{color:var(--starlight)}
.op-vbtn.is-active{border-color:var(--accent);color:var(--accent)}

/* ---- sequence captures (eclipse / transit / occultation) ----
   The phases are ordered moments, so the control is a timeline rather than the
   version switcher above. The range input is the real control: the ticks and
   the filled track behind it are decoration and are pointer-transparent. */
.op-seq{margin:1.3rem 0 1.2rem;padding-top:1rem;border-top:1px solid var(--haze)}
.op-seq-lbl{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.op-seq-caption{font-family:'Spectral',serif;font-style:italic;font-size:.85rem;color:var(--muted);margin:.5rem 0 0}
/* The clock time is the headline: it is what a sequence is actually about. */
.op-seq-now{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;margin:.7rem 0 .5rem}
.op-seq-now-time{font-family:'IBM Plex Mono',monospace;font-size:1.5rem;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--starlight);line-height:1.1}
.op-seq-now-label{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.op-seq-track{position:relative;padding:.9rem 0 .2rem}
.op-seq-ticks{position:absolute;left:0;right:0;top:0;height:.9rem;pointer-events:none}
.op-seq-tick{position:absolute;top:.15rem;width:1px;height:.6rem;margin-left:-.5px;background:color-mix(in srgb,var(--starlight) 42%,transparent);transition:background .2s,height .2s}
.op-seq-tick.is-active{background:var(--accent);height:.9rem;top:0}
/* Totality (any phase carrying a marker) is the moment the whole sequence is
   built around, so it gets a wider, brighter post on the track. */
.op-seq-tick.is-marked{width:3px;margin-left:-1.5px;height:.9rem;top:0;background:var(--amber);box-shadow:0 0 8px color-mix(in srgb,var(--amber) 70%,transparent)}
.op-seq-range{-webkit-appearance:none;appearance:none;width:100%;margin:0;background:transparent;cursor:pointer;display:block}
.op-seq-range:focus{outline:none}
.op-seq-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.op-seq-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,var(--haze)),var(--haze))}
.op-seq-range::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,var(--haze)),var(--haze))}
.op-seq-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--hl-grad);border:1px solid color-mix(in srgb,var(--amber) 60%,#fff);box-shadow:var(--hl-glow);cursor:grab}
.op-seq-range::-moz-range-thumb{width:16px;height:16px;border:1px solid color-mix(in srgb,var(--amber) 60%,#fff);border-radius:50%;background:var(--amber);box-shadow:var(--hl-glow);cursor:grab}
.op-seq-range:active::-webkit-slider-thumb{cursor:grabbing;box-shadow:var(--hl-glow-strong)}
.op-seq-ends{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.6rem;font-variant-numeric:tabular-nums;color:var(--muted);margin-top:.15rem}
/* Filmstrip. Scrolls sideways rather than wrapping: the phases are a sequence
   and reading them as one line keeps that ordering obvious. */
/* flex-wrap:nowrap is stated rather than assumed: the strip must stay one line
   and scroll, and a bare `display:flex` inside a narrow column is exactly where
   an inherited wrap would fold it into a vertical stack. -webkit-overflow-
   scrolling gives iOS momentum, and the touch-action keeps a sideways drag on
   the strip from being stolen by the page's vertical scroll. */
.op-seq-strip{display:flex;flex-wrap:nowrap;gap:.4rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;padding:.9rem 0 .5rem;scrollbar-width:thin;min-width:0;max-width:100%}
.op-seq-thumb{flex:0 0 auto;min-width:0;position:relative;width:64px;padding:0;background:transparent;border:1px solid var(--haze);border-radius:3px;overflow:hidden;cursor:pointer;line-height:0;transition:border-color .2s,transform .2s;opacity:.72;-webkit-appearance:none;appearance:none}
.op-seq-thumb:hover{opacity:1;border-color:color-mix(in srgb,var(--accent) 55%,var(--haze))}
.op-seq-thumb.is-active{opacity:1;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px color-mix(in srgb,var(--amber) 25%,transparent)}
.op-seq-thumb.is-marked{border-color:color-mix(in srgb,var(--amber) 60%,var(--haze))}
.op-seq-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.op-seq-thumb img{display:block;width:100%;height:44px;object-fit:cover;background:#05070c}
.op-seq-thumb-empty{display:block;width:100%;height:44px;background:var(--panel)}
.op-seq-thumb-time{display:block;font-family:'IBM Plex Mono',monospace;font-size:.52rem;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--muted);line-height:1.7;text-align:center;background:color-mix(in srgb,var(--void) 60%,transparent)}
.op-seq-thumb.is-active .op-seq-thumb-time{color:var(--accent)}
.op-seq-note{font-family:'Spectral',serif;font-size:.85rem;color:var(--muted);margin:.3rem 0 0}
/* Time + phase read over the hero image, so the frame names itself. */
.op-seq-readout{position:absolute;right:.8rem;top:.8rem;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;pointer-events:none;font-family:'IBM Plex Mono',monospace;background:color-mix(in srgb,var(--void) 62%,transparent);border:1px solid var(--haze);border-radius:6px;padding:.35rem .55rem}
.op-seq-time{font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--starlight);line-height:1.2}
.op-seq-label{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
/* Videos: self-hosted, one block per clip with its own label and note. */
.op-seq-videos{margin:1.4rem 0 1.2rem;padding-top:1rem;border-top:1px solid var(--haze)}
.op-seq-vlbl{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.op-seq-video{margin:0 0 1rem}
.op-seq-video video{display:block;width:100%;height:auto;background:#05070c;border:1px solid var(--haze);border-radius:6px}
.op-seq-video figcaption{display:flex;flex-direction:column;gap:.2rem;margin-top:.45rem}
.op-seq-video-lbl{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--starlight)}
.op-seq-video-note{font-family:'Spectral',serif;font-size:.82rem;color:var(--muted)}
@media(max-width:560px){
  .op-seq-now-time{font-size:1.2rem}
  .op-seq-thumb{width:54px}
  .op-seq-thumb img,.op-seq-thumb-empty{height:36px}
  .op-seq-readout{right:.5rem;top:.5rem;padding:.25rem .45rem}
  .op-seq-time{font-size:.76rem}
  /* A fatter thumb: a 16px target is hard to catch with a finger. */
  .op-seq-range::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9px}
  .op-seq-range::-moz-range-thumb{width:22px;height:22px}
}
/* The sequence hero is the phase image itself: nothing to fade in over it. */
.op-seq-media .op-annot{display:none}

.op-gear-used{margin-top:1.4rem;display:flex;flex-direction:column;gap:.55rem}
.op-gear-grp{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem}
.op-gear-grp-lbl{flex:0 0 6.5rem;font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.op-gear-grp-items{display:flex;flex-wrap:wrap;gap:.4rem;flex:1}
@media(max-width:560px){.op-gear-grp-lbl{flex-basis:100%}}
.op-locmap{margin-top:1.1rem;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--haze));border-radius:12px;overflow:hidden;background:var(--ink);box-shadow:0 8px 26px rgba(0,0,0,.4)}
.op-locmap-lbl{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.6rem .8rem .5rem;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent);border-bottom:1px solid var(--haze)}
.op-locmap-lbl b{color:var(--starlight);font-weight:500}
.op-locmap-bortle{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 .8rem .55rem;border-bottom:1px solid var(--haze)}
.op-locmap-frame{display:block;width:100%;aspect-ratio:16/10;border:0;background:var(--panel);overflow:hidden}
.op-locmap-svg{display:block;width:100%;height:100%}
.op-locmap-svg .op-locmap-land{fill:color-mix(in srgb,var(--starlight) 6%,var(--panel));stroke:color-mix(in srgb,var(--starlight) 12%,var(--haze))}
.op-locmap-svg .op-locmap-halo{fill:var(--accent)}
.op-locmap-svg .op-locmap-dot{fill:var(--accent)}
.op-locmap-cap{font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:var(--muted);padding:.55rem .8rem .7rem;border-top:1px solid var(--haze)}
.op-locmap-credit{opacity:.6}
.op-rig-link{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;margin-top:1rem}
.op-rig-link-lbl{flex:0 0 6.5rem;font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.op-chip{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--haze);border-radius:6px;padding:.3rem .6rem;color:var(--starlight);text-decoration:none;transition:border-color .2s,color .2s,box-shadow .2s}
a.op-chip:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--haze));color:var(--amber);box-shadow:0 2px 10px color-mix(in srgb,var(--amber) 22%,transparent)}
@media(max-width:820px){.op-single{grid-template-columns:minmax(0,1fr)}}

/* Single column: the scrubber belongs directly under the image it drives.
   It is written inside .op-single-meta, which is the right-hand column on a
   wide screen but stacks BELOW the whole meta block on a narrow one, leaving
   the filmstrip stranded at the foot of the page past the title, log and FAQ.
   Turning the wrapper into a flex column lets the media and the sequence be
   ordered independently of the markup, so the control sits with its subject
   without moving it out of the meta column (where it belongs on desktop). */
@media(max-width:820px){
	.op-single:has(.op-seq){display:flex;flex-direction:column}
	.op-single:has(.op-seq) .op-single-media{order:1}
	.op-single:has(.op-seq) .op-single-meta{order:2;display:flex;flex-direction:column}
	/* Inside the meta column, hoist the scrubber above the prose. Scoped to a
	   sequence capture so an ordinary capture's meta column is untouched.
	   The videos keep source order (after the scrubber, before the log). */
	.op-single:has(.op-seq) .op-single-meta > .op-seq{order:-2;margin-top:.2rem}
	.op-single:has(.op-seq) .op-single-meta > .op-seq-videos{order:-1}
	/* A flex item's minimum size is its CONTENT, not zero, so the 24-thumb
	   filmstrip (about 1443px laid out) forces this column that wide and the
	   whole page scrolls sideways instead of just the strip. min-width:0 lets
	   the item shrink to the column so overflow-x:auto can do its job. This
	   only bites since the meta column became a flex container. */
	.op-single:has(.op-seq) .op-single-meta{min-width:0}
	.op-single:has(.op-seq) .op-single-meta > .op-seq{min-width:0;max-width:100%}
	.op-single:has(.op-seq) .op-single-meta > .op-seq-videos{min-width:0;max-width:100%}
}

/* ---- per-object FAQ ---- */
.op-faq{margin-top:3rem;max-width:70ch}
.op-faq-title{font-size:1.5rem;margin:0 0 1.2rem}
.op-faq-item{border-bottom:1px solid var(--haze)}
.op-faq-item summary{list-style:none;cursor:pointer;padding:.95rem 1.8rem .95rem 0;position:relative;font-family:'Spectral',serif;font-size:1.05rem;color:var(--starlight);transition:color .2s}
.op-faq-item summary::-webkit-details-marker{display:none}
.op-faq-item summary:hover{color:var(--accent)}
.op-faq-item summary::after{content:'+';position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-family:'IBM Plex Mono',monospace;color:var(--muted);transition:transform .2s,color .2s}
.op-faq-item[open] summary::after{content:'\2212';color:var(--accent)}
.op-faq-a{padding:0 0 1.1rem;color:#c7cdda}

/* ---- gear inventory ---- */
.op-gear-grid{max-width:var(--maxw);margin:0 auto;padding:2.5rem 1.5rem 5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.3rem}
.op-gear-card{background:var(--ink);border:1px solid var(--haze);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s}
.op-gear-card:hover{transform:translateY(-4px);border-color:var(--muted)}
.op-gear-photo{position:relative;aspect-ratio:4/3;background:var(--panel);display:flex;align-items:center;justify-content:center}
.op-gear-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op-gear-ph{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--haze)}
.op-status{position:absolute;right:.6rem;top:.6rem;font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .45rem;border-radius:2px;background:color-mix(in srgb,var(--void) 60%,transparent);border:1px solid var(--haze);color:var(--muted)}
.op-status.op-wishlist{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--haze))}
.op-status.op-remote{color:var(--oiii);border-color:color-mix(in srgb,var(--oiii) 50%,var(--haze));background:color-mix(in srgb,var(--oiii) 12%,color-mix(in srgb,var(--void) 60%,transparent))}
.op-gear-body{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.op-gear-type{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.op-gear-name{font-family:'Spectral',serif;font-size:1.2rem;line-height:1.15}
.op-gear-sub{font-size:.84rem;color:#c7cdda}
.op-gear-specs{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--muted);line-height:1.5;margin-top:.2rem}
.op-spec-sheet{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin-top:.7rem;font-family:'Inter',sans-serif;font-size:.8rem;line-height:1.4;max-width:54ch}
.op-spec-sheet dt{color:var(--muted);white-space:nowrap;font-weight:600}
.op-spec-sheet dd{margin:0;color:var(--starlight)}
.op-spec-sheet dd.op-spec-full{grid-column:1 / -1;color:var(--muted)}
.op-attr-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.op-attr-chip{--ac:#8a93a6;font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1;padding:.34rem .55rem;border-radius:3px;text-decoration:none;color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 55%,var(--haze));background:color-mix(in srgb,var(--ac) 12%,transparent);transition:background .2s,box-shadow .2s}
.op-attr-chip:hover{background:color-mix(in srgb,var(--ac) 24%,transparent);box-shadow:0 2px 10px color-mix(in srgb,var(--ac) 25%,transparent)}
.op-attr-use{--ac:#e0a85a}
.op-attr-control{--ac:#3fb6a8}
.op-attr-connectivity{--ac:#5aa8e0}
.op-attr-capability{--ac:#7bc86b}
.op-attr-head h1{margin:.1rem 0 0}
.op-attr-sec{margin:2.4rem 0 1rem}
a.op-gear-type{text-decoration:none;transition:color .2s}
a.op-gear-type:hover{color:var(--amber)}
a.op-disc{text-decoration:none;transition:box-shadow .2s}
a.op-disc:hover{box-shadow:0 2px 8px color-mix(in srgb,currentColor 25%,transparent)}
.op-attr-picker{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:.3rem}
.op-attr-pg{display:flex;flex-direction:column;gap:.15rem}
.op-attr-pglabel{font-family:'IBM Plex Mono',monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.1rem}
.op-attr-picker label{display:block;font-size:.82rem;white-space:nowrap}
/* comments */
.op-comments{margin-top:3rem;border-top:1px solid var(--haze);padding-top:2rem}
.op-comments-title{font-family:'Spectral',serif;margin:0 0 1.2rem}
.op-comment-list{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:1rem}
.op-comment{background:color-mix(in srgb,var(--haze) 8%,transparent);border:1px solid var(--haze);border-radius:8px;padding:1rem 1.2rem}
.op-comment .children{list-style:none;margin:1rem 0 0;padding-left:1.2rem;border-left:1px solid var(--haze);display:flex;flex-direction:column;gap:1rem}
.op-comment-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.op-comment-avatar{border-radius:50%}
.op-comment-meta{display:flex;flex-direction:column;line-height:1.2}
.op-comment-author{color:var(--starlight);font-size:.9rem}
.op-comment-date{color:var(--muted);font-size:.72rem;font-family:'IBM Plex Mono',monospace}
.op-comment-body{color:var(--starlight);font-size:.92rem;line-height:1.55}
.op-comment-body p{margin:0 0 .6rem}.op-comment-body p:last-child{margin:0}
.op-comment-form{margin-top:1rem}
.op-comment-form .op-comment-note{color:var(--muted);font-size:.78rem;margin-bottom:1rem}
.op-comment-form label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.3rem}
.op-comment-form input[type=text],.op-comment-form input[type=email],.op-comment-form input[type=url],.op-comment-form textarea{width:100%;background:color-mix(in srgb,var(--haze) 12%,transparent);border:1px solid var(--haze);border-radius:6px;color:var(--starlight);padding:.6rem .7rem;font-family:inherit;font-size:.9rem;box-sizing:border-box}
.op-comment-form textarea{resize:vertical;min-height:110px}
.op-comment-form p{margin:0 0 .9rem}
.op-comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:.5rem}
.op-comment-form .comment-form-cookies-consent input{width:auto}
.op-comment-form .comment-form-cookies-consent label{display:inline;text-transform:none;letter-spacing:normal;font-size:.8rem;margin:0}
.op-turnstile{margin:.2rem 0 1rem}
.op-comment-form .form-submit .submit,.op-comment-form input#submit{background:var(--amber);color:#0b0e17;border:0;border-radius:6px;padding:.6rem 1.3rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:filter .2s}
.op-comment-form .form-submit .submit:hover,.op-comment-form input#submit:hover{filter:brightness(1.1)}
.op-tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.op-disc{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid;border-radius:2px;padding:.15rem .4rem}
.op-rig-card{background:var(--ink);border:1px solid var(--haze);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s}
.op-rig-card:hover{transform:translateY(-4px);border-color:var(--muted)}
.op-rig-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--haze)}
.op-rig-thumbs img{aspect-ratio:1/1;width:100%;height:100%;object-fit:cover;background:var(--panel);display:block}
.op-rig-body{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.op-rig-name{font-family:'Spectral',serif;font-size:1.2rem;line-height:1.15}
.op-page-sub{color:var(--muted);font-size:.95rem;margin:.4rem 0 0}

/* ---- stats / constellations / catalogue pages ---- */
.op-stat-cards{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1.5rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1rem}
.op-stat{position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,var(--ink)),var(--ink));border:1px solid var(--haze);border-radius:10px;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.25rem;overflow:hidden}
.op-stat-ico{font-size:1.5rem;line-height:1;margin-bottom:.35rem;filter:saturate(1.1)}
.op-stat b{font-family:'Spectral',serif;font-weight:400;font-size:clamp(1.4rem,3.4vw,1.85rem);color:var(--starlight);line-height:1.05;overflow-wrap:normal;word-break:normal}
.op-stat span{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.op-stat-span{max-width:var(--maxw);margin:1.1rem auto 0;padding:0 1.5rem;font-family:'Spectral',serif;font-style:italic;font-size:1.02rem;color:#c7cdda}
.op-stat-list{max-width:var(--maxw);margin:0 auto;padding:2rem 1.5rem 0}
.op-stat-list h2{font-size:1.3rem;font-weight:300;margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem}
.op-stat-list-ico{font-size:1.15rem}
.op-bars{display:flex;flex-direction:column;gap:.5rem}
.op-bar{display:grid;grid-template-columns:11rem 1fr 2.5rem;align-items:center;gap:.8rem}
.op-bar-lbl{display:block;font-size:.84rem;color:#c7cdda;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
a.op-bar-lbl:hover{color:var(--amber)}
.op-bar-track{height:.7rem;background:var(--ink);border:1px solid var(--haze);border-radius:999px;overflow:hidden}
.op-bar-fill{display:block;height:100%;background:var(--hl-grad);border-radius:999px;box-shadow:0 0 10px color-mix(in srgb,var(--amber) 45%,transparent)}
.op-bar-val{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--muted)}
@media(max-width:560px){.op-bar{grid-template-columns:7rem 1fr 2rem;gap:.5rem}.op-bar-lbl{font-size:.74rem}}
.op-con-section{padding-top:1rem}
.op-con-head,.op-cat-block h2{max-width:var(--maxw);margin:0 auto;padding:1.4rem 1.5rem .2rem;font-size:1.5rem;font-weight:300;display:flex;align-items:center;gap:.85rem}
.op-con-title{font-size:1.5rem;font-weight:300;margin:0;line-height:1.1}
.op-con-count{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.op-con-fig{flex:0 0 auto;width:74px;height:56px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--haze));border-radius:8px;overflow:hidden;display:block;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.op-con-fig .op-consvg{display:block;width:100%;height:100%}
.op-cat-wrap{max-width:var(--maxw);margin:0 auto;padding:1rem 0 2rem}
.op-cat-progress{max-width:var(--maxw);margin:.3rem auto 0;padding:0 1.5rem}
.op-cat-progress span{display:block;height:.5rem;background:var(--hl-grad);border-radius:999px;box-shadow:0 0 12px color-mix(in srgb,var(--amber) 55%,transparent)}
.op-cat-grid{max-width:var(--maxw);margin:0 auto;padding:1rem 1.5rem 1.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:.45rem}
.op-cat-cell{font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-align:center;padding:.55rem .2rem;border:1px solid var(--haze);border-radius:7px;color:var(--muted);background:color-mix(in srgb,var(--ink) 80%,transparent);transition:transform .15s,box-shadow .2s,border-color .2s}
.op-cat-cell.is-done{color:var(--hl-ink);background:var(--hl-grad);border-color:color-mix(in srgb,var(--amber) 60%,#fff);font-weight:700;box-shadow:var(--hl-glow)}
a.op-cat-cell.is-done:hover{transform:translateY(-2px);box-shadow:var(--hl-glow-strong)}
.op-tonight{border-bottom:1px solid var(--haze);background:color-mix(in srgb,var(--void) 65%,var(--ink))}
.op-tonight-inner{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.5rem}
.op-tnt-row{display:flex;flex-wrap:wrap;gap:1.8rem}
.op-tnt{display:flex;align-items:center;gap:.7rem}
.op-tnt-ico{font-size:1.8rem;line-height:1;color:var(--amber)}
.op-tnt-body{display:flex;flex-direction:column}
.op-tnt-body b{font-family:'Spectral',serif;font-weight:400;font-size:1.1rem;color:var(--starlight)}
.op-tnt-body span{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.op-tnt-up{margin-top:1.3rem}
.op-tnt-up-lbl{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.op-tnt-key{color:var(--haze)}
.op-tnt-done{background:color-mix(in srgb,var(--amber) 16%,transparent);border-color:color-mix(in srgb,var(--amber) 45%,var(--haze));color:var(--amber)}
.op-search{margin-left:.4rem}
.op-search input{font-family:'IBM Plex Mono',monospace;font-size:.72rem;background:transparent;border:1px solid var(--haze);border-radius:2px;color:var(--starlight);padding:.35rem .6rem;width:7rem;transition:width .2s,border-color .2s}
.op-search input:focus{outline:0;border-color:var(--amber);width:11rem}
.op-tl-year{max-width:820px;margin:0 auto;padding:1.6rem 1.5rem .4rem;font-size:1.6rem;font-weight:300}
.op-tl-list{max-width:820px;margin:0 auto;padding:0 1.5rem;display:flex;flex-direction:column}
.op-tl-item{display:grid;grid-template-columns:4.5rem 44px 1fr auto;align-items:center;gap:.9rem;padding:.5rem 0;border-bottom:1px solid var(--haze);color:inherit}
.op-tl-item:hover{color:var(--starlight)}
.op-tl-date{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--muted)}
.op-tl-thumb{width:44px;height:44px;object-fit:cover;border-radius:3px;background:var(--panel)}
.op-tl-name{font-size:.95rem}
.op-tl-type{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.op-search-list{max-width:820px;margin:0 auto;padding:1rem 1.5rem 3rem;list-style:none}
.op-search-list li{padding:.5rem 0;border-bottom:1px solid var(--haze)}
.op-search-pt{font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:.5rem}
@media(max-width:560px){.op-tl-item{grid-template-columns:3.5rem 36px 1fr;gap:.6rem}.op-tl-type{display:none}.op-tl-thumb{width:36px;height:36px}}
/* The separator rule used to be `.op-crumbs span`, which outranks a bare
   `.op-crumb-cur` on specificity - so the current page title was painted in
   --haze (near enough the background) instead of --starlight. Both are scoped
   under .op-crumbs now, and the separator excludes the current crumb. */
.op-crumbs{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.04em;line-height:1.7;color:var(--muted)}
.op-crumbs a{color:color-mix(in srgb,var(--starlight) 68%,var(--muted));text-decoration:none;border-bottom:1px solid transparent}
.op-crumbs a:hover{color:var(--starlight);border-bottom-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.op-crumbs>span:not(.op-crumb-cur){margin:0 .4rem;color:color-mix(in srgb,var(--muted) 65%,var(--haze))}
.op-crumbs .op-crumb-cur{color:var(--starlight)}
.op-share{margin-top:.9rem;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;background:transparent;border:1px solid var(--haze);border-radius:2px;color:var(--muted);padding:.4rem .7rem;cursor:pointer;transition:color .2s,border-color .2s}
.op-share:hover{color:var(--starlight);border-color:var(--muted)}
.op-prevnext{max-width:var(--maxw);margin:2.5rem auto 0;display:flex;justify-content:space-between;gap:1rem}
.op-pn{display:flex;flex-direction:column;gap:.2rem;border:1px solid var(--haze);border-radius:4px;padding:.7rem 1rem;color:inherit;max-width:48%;transition:border-color .2s}
.op-pn:hover{border-color:var(--muted)}
.op-pn-next{text-align:right;margin-left:auto}
.op-pn span{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.op-pn b{font-weight:400;color:var(--starlight)}
.op-gear-usecount{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--amber);margin-top:.6rem}
.op-objindex{max-width:820px;margin:0 auto;padding:1rem 1.5rem 3rem;display:flex;flex-direction:column}
.op-objrow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--haze);color:inherit}
.op-objrow:hover{color:var(--starlight)}
.op-objrow-name{font-size:.98rem}
.op-objrow-meta{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.op-totop{position:fixed;right:1.2rem;bottom:1.2rem;z-index:50;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--haze);background:color-mix(in srgb,var(--void) 80%,var(--ink));color:var(--starlight);font-size:1.1rem;cursor:pointer;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s,border-color .2s;pointer-events:none}
.op-totop.is-on{opacity:1;transform:none;pointer-events:auto}
.op-totop:hover{border-color:var(--amber);color:var(--amber)}
.op-404{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem}
.op-404-inner{max-width:560px;text-align:center}
.op-404-inner h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:300;margin:.3rem 0 0}
.op-404-links{margin-top:1.6rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.op-btn{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;background:var(--hl-grad);color:var(--hl-ink);border:1px solid color-mix(in srgb,var(--amber) 60%,#fff);border-radius:6px;padding:.6rem 1.1rem;font-weight:700;box-shadow:var(--hl-glow)}
.op-btn-ghost{background:transparent;color:var(--muted);border-color:var(--haze);box-shadow:none}
.op-btn-ghost:hover{color:var(--starlight);border-color:var(--muted)}

/* ---- blog / posts / pages ---- */
.op-list{max-width:820px;margin:0 auto;padding:3rem 1.5rem 5rem}
.op-page-head{max-width:820px;margin:0 auto;padding:2.5rem 1.5rem .5rem}
.op-page-head h1{font-size:clamp(2rem,5vw,3rem);font-weight:300}
.op-object-sub{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:.4rem 0 0}
.op-entry{padding:2rem 0;border-bottom:1px solid var(--haze)}
.op-entry h2{font-size:1.7rem;margin:0 0 .4rem}
.op-entry h2 a{color:var(--starlight)}
.op-entry h2 a:hover{color:var(--amber)}
.op-meta-line{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.op-excerpt{color:#c7cdda}
.op-pagination{display:flex;justify-content:space-between;gap:1rem;padding:2rem 0}
.op-single-post{max-width:760px;margin:0 auto;padding:3rem 1.5rem 5rem}
.op-single-post h1{font-size:clamp(2rem,5vw,3rem);font-weight:300;margin:.3rem 0 .5rem}

/* ---- footer ---- */
.op-foot{border-top:1px solid var(--haze);padding:3rem 1.5rem;text-align:center}
.op-foot .about{max-width:680px;margin:0 auto 2rem;color:#bcc4d4;text-align:left}
.op-foot .about h2{font-weight:300;font-size:1.8rem;margin-bottom:1rem}
.op-foot .credit{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
  .op-starfield{display:none}
}

/* ---- mobile experience ---- */
@media(max-width:760px){
  .op-close{width:42px;height:42px;font-size:1.25rem;top:.6rem;right:.6rem}
  .op-modal{padding:0}
  /* One column: image row sized to its own content, info row takes the rest
     and scrolls, so the photo still sits at the top of the sheet. */
  .op-modal-card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:100vh;height:100%;border:0;border-radius:0}
  .op-minfo{max-height:none}
  .op-mframe{max-height:52vh}
  /* One column: the image is the top 52vh of the card, so centre on that. */
  .op-mnav{top:26vh}
  .op-mnav-prev{left:.7rem}.op-mnav-next{right:.7rem}
  .op-controls{padding:.7rem .9rem}
  .op-controls-inner{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .op-controls-inner::-webkit-scrollbar{display:none}
  .op-controls-inner .op-eyebrow{white-space:nowrap}
  .op-filter,.op-gfilter,.op-gtfilter,.op-sfilter{flex:0 0 auto}
  .op-hero{min-height:auto;padding:6rem 1.2rem 3rem}
  .op-gallery{padding:1.5rem 1rem 4rem;gap:1.1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-prevnext{flex-direction:column}
  .op-pn,.op-pn-next{max-width:none;text-align:left;margin-left:0}
  .op-single{grid-template-columns:minmax(0,1fr)}
  .op-tnt-row{gap:1.1rem}
  .op-totop{right:.8rem;bottom:.8rem}
  .op-zoom img.op-zoomed{max-width:100vw}
  /* Comfortable tap targets and no accidental horizontal scroll. */
  .op-filter,.op-gfilter,.op-gtfilter,.op-sfilter{padding:.6rem .9rem;font-size:.8rem}
  .op-con-head,.op-cat-block h2{flex-wrap:wrap;gap:.6rem;font-size:1.25rem}
  .op-con-title{font-size:1.25rem}
  .op-locmap-frame{height:200px}
  .op-tl-thumb{width:40px;height:40px}
  .op-share,.op-annot-toggle{min-height:40px}
  /* Top bar: smaller logo, group burger + search to the right, compact search. */
  .op-topbar{padding:.55rem 1rem}
  .custom-logo{max-height:96px;max-width:62vw;margin-top:-16px;margin-bottom:-16px}
  .op-burger{margin-left:auto}
  .op-search{margin-left:.5rem}
  .op-search input{width:5.5rem}
  .op-search input:focus{width:8rem}
  /* Tab bars scroll sideways rather than wrapping into a messy block. */
  .op-tooltabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .op-tooltabs::-webkit-scrollbar{display:none}
  .op-tooltab{flex:0 0 auto}
  .op-views{padding:1rem 1rem 0}
  .op-tools{padding:1.5rem 1rem 4rem}
  .op-feature{padding:0 1rem}
  .op-home-cta,.op-feature-foot{padding-left:1rem;padding-right:1rem}
}
@media(max-width:430px){
  .op-card-fig{width:78px;max-width:44%}
  .op-stat-cards{grid-template-columns:repeat(2,1fr)}
  .op-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;padding:1.2rem .8rem 3rem}
  .op-card-body{padding:.7rem .75rem 1rem}
  .op-name{font-size:1.15rem}
  .op-telemetry{gap:.9rem 1.1rem}
  .op-con-fig{width:60px;height:46px}
}

/* ---- On this night ---- */
.op-otn{margin:0 0 2rem}
.op-otn-head{font-size:1.3rem;font-weight:300;margin:0}
.op-otn-sub{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.04em;color:var(--muted);margin:.2rem 0 0}
.op-otn .op-gallery{padding:1.2rem 0 0}

/* ---- Home feature ---- */
.op-feature{max-width:var(--maxw);margin:2rem auto;padding:0 1.5rem}
.op-feature-link{display:grid;grid-template-columns:1.5fr 1fr;border:1px solid var(--haze);border-radius:14px;overflow:hidden;background:var(--ink);text-decoration:none;color:inherit;transition:border-color .25s,box-shadow .25s}
.op-feature-link:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--haze));box-shadow:0 14px 40px rgba(0,0,0,.45)}
.op-feature-media{position:relative;min-height:300px;background:var(--panel)}
.op-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op-feature-badge{position:absolute;left:.8rem;top:.8rem;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--starlight);background:color-mix(in srgb,var(--void) 65%,transparent);border:1px solid var(--haze);padding:.25rem .5rem;border-radius:999px}
.op-feature-foot{max-width:var(--maxw);margin:.6rem auto 0;text-align:right}
.op-feature-foot a{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.op-feature-foot a:hover{color:var(--amber)}
.op-feature-body{padding:1.9rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.op-feature-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.op-feature-name{font-family:'Spectral',serif;font-size:2rem;font-weight:300;margin:0;line-height:1.05}
.op-feature .op-name-con{display:block}
.op-feature-type{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.op-feature-type .op-dot{width:7px;height:7px;border-radius:50%}
.op-feature-age{font-family:'Spectral',serif;font-style:italic;color:#c7cdda}
.op-feature-age b{font-style:normal;color:var(--amber)}
.op-feature-cta{align-self:flex-start;margin-top:.7rem}
.op-home-cta{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.5rem 0;text-align:center}
@media(max-width:760px){.op-feature-link{grid-template-columns:1fr}.op-feature-media{min-height:220px}.op-feature-body{padding:1.3rem}.op-feature-name{font-size:1.6rem}}

/* ---- View tabs (gallery views, equipment views) ---- */
.op-views{max-width:var(--maxw);margin:0 auto;padding:1.4rem 1.5rem 0}
.op-views .op-tooltabs{margin-bottom:0}

/* ---- Tools tabs + single-tool layout ---- */
.op-tooltabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.op-tooltab{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--haze);border-radius:6px;padding:.45rem .8rem;transition:color .2s,border-color .2s,box-shadow .2s}
.op-tooltab:hover{color:var(--starlight);border-color:color-mix(in srgb,var(--accent) 55%,var(--haze))}
.op-tooltab.is-active{color:var(--hl-ink);background:var(--hl-grad);border-color:color-mix(in srgb,var(--amber) 60%,#fff);font-weight:700;box-shadow:var(--hl-glow)}
.op-tools-single{grid-template-columns:1fr;max-width:780px}
/* Grouped tool tabs */
.op-toolcats{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.4rem}
.op-toolcat{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.op-toolcat-lbl{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:5.5rem}
.op-toolcat .op-tooltabs{margin-bottom:0;flex-wrap:wrap}
.op-tg-graph{margin:1.1rem 0 .4rem}
.op-tool-subhead{font-size:.95rem;font-weight:300;margin:1.6rem 0 .6rem;color:var(--starlight)}
@media(max-width:560px){.op-toolcat{flex-direction:column;align-items:stretch;gap:.3rem}.op-toolcat-lbl{min-width:0}}

/* ---- Useful Tools page ---- */
.op-tools{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1.5rem 5rem}
.op-tools-loc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;border:1px solid var(--haze);border-radius:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,var(--ink)),var(--ink));margin-bottom:1.5rem}
.op-tools-loc-name{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--starlight)}
.op-tools-loc-btns{display:flex;gap:.5rem}
.op-tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.4rem}
.op-tool{background:var(--ink);border:1px solid var(--haze);border-radius:10px;padding:1.2rem 1.3rem;overflow:hidden}
.op-tool-title{font-size:1.15rem;font-weight:300;margin:0 0 .2rem}
.op-tool-sub{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.04em;color:var(--muted);margin:0 0 .9rem}
.op-tool-body{min-height:40px}
.op-tool-loading{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--muted)}
.op-tool-note{font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:var(--muted);margin:.7rem 0 0;line-height:1.5}
.op-altgraph,.op-allsky,.op-moonsvg,.op-jupsvg{display:block;width:100%;height:auto}
.op-tool .op-altgraph,.op-tool .op-allsky{background:radial-gradient(120% 120% at 42% 30%,#18223a,#0a0e18);border:1px solid var(--haze);border-radius:8px}
/* rise/set/transit list */
.op-rs{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:.4rem .7rem;font-family:'IBM Plex Mono',monospace;font-size:.74rem;align-items:center}
.op-rs-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.op-rs-con{color:var(--muted);font-size:.66rem}
/* Moon */
.op-moonwrap{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.op-mooninfo{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--starlight)}
.op-moon-name{display:block;font-family:'Spectral',serif;font-size:1.2rem;margin-bottom:.2rem}
.op-moonwrap .op-moonsvg{width:200px;max-width:48%;flex:0 0 auto}
.op-moon-photo-wrap{position:relative;width:200px;max-width:48%;flex:0 0 auto;aspect-ratio:1/1}
.op-moon-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;background:#05060c;box-shadow:0 6px 22px rgba(0,0,0,.5)}
.op-moon-overlay{position:absolute;inset:0;width:100%;height:100%}
.op-moon-mk{cursor:help}
.op-moon-credit{font-family:'IBM Plex Mono',monospace;font-size:.54rem;color:var(--muted);margin-top:.5rem}
.op-moon-features{margin-top:1.1rem}
.op-moon-features-h{font-size:.95rem;font-weight:300;margin:0 0 .4rem}
.op-moon-legend{margin:0;padding-left:1.3rem;columns:2;column-gap:1.4rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--starlight)}
.op-moon-legend li{margin:.1rem 0;break-inside:avoid}
@media(max-width:520px){.op-moonwrap .op-moonsvg,.op-moon-photo-wrap{max-width:60%}.op-moon-legend{columns:1}}
/* Sun */
.op-sunwrap{display:flex;align-items:flex-start;gap:1.3rem;flex-wrap:wrap}
.op-sun-disc{position:relative;width:240px;max-width:60%;flex:0 0 auto}
.op-sun-img{width:100%;height:auto;display:block;border-radius:50%;background:#100904;box-shadow:0 6px 22px rgba(0,0,0,.5)}
.op-sun-cap{display:block;font-family:'IBM Plex Mono',monospace;font-size:.54rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:.4rem}
.op-sunwrap .op-sub{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:.6rem;padding-top:.5rem}
@media(max-width:520px){.op-sun-disc{max-width:75%;margin:0 auto}}
.op-sun-toggle{display:flex;gap:.4rem;justify-content:center;margin-top:.5rem}
/* Clock */
.op-clock{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;max-width:380px;margin:0;font-family:'IBM Plex Mono',monospace}
.op-clock dt{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;align-self:center}
.op-clock dd{margin:0;color:var(--starlight);font-size:1.1rem}
/* What's up table */
.op-up{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:.8rem}
.op-up th{text-align:left;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:.3rem .6rem;border-bottom:1px solid var(--haze)}
.op-up td{padding:.45rem .6rem;border-bottom:1px solid var(--haze);color:var(--starlight)}
.op-up td:nth-child(2),.op-up td:nth-child(3){text-align:right;color:var(--amber)}
/* Polar reticle */
.op-polarsvg{width:220px;max-width:62%;flex:0 0 auto;display:block}
@media(max-width:520px){.op-polarsvg{max-width:80%;margin:0 auto}}
/* Tool tables scroll rather than wrap into a mess on small screens. */
.op-up{width:100%;table-layout:auto}
.op-up th,.op-up td{overflow-wrap:break-word;word-break:normal}
.op-up td:nth-child(n+2){white-space:nowrap}
.op-pl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.5rem;vertical-align:middle}
/* Field-of-view calculator */
.op-fov-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;max-width:580px}
.op-fov-f{display:flex;flex-direction:column;gap:.3rem;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.op-fov-f input{font-family:'IBM Plex Mono',monospace;font-size:.9rem;background:var(--void);border:1px solid var(--haze);border-radius:6px;color:var(--starlight);padding:.5rem .6rem}
.op-fov-f input:focus{outline:0;border-color:var(--amber)}
.op-fov-out{margin-top:1.2rem}
/* weather */
.op-wx{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem}
.op-wx-day{border:1px solid var(--haze);border-radius:8px;padding:.6rem .7rem;background:color-mix(in srgb,var(--ink) 80%,transparent)}
.op-wx-date{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--starlight);margin-bottom:.4rem}
.op-wx-cloud{display:block;height:5px;border-radius:999px;background:var(--haze);overflow:hidden;margin-bottom:.5rem}
.op-wx-cloudbar{display:block;height:100%;background:var(--hl-grad)}
.op-wx-rows{display:grid;grid-template-columns:auto 1fr;gap:.1rem .5rem;margin:0;font-family:'IBM Plex Mono',monospace;font-size:.64rem}
.op-wx-rows dt{color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.op-wx-rows dd{margin:0;color:var(--starlight);text-align:right}
.op-wx-stars{color:var(--amber);letter-spacing:.05em}
@media(max-width:520px){.op-tools-grid{grid-template-columns:1fr}.op-rs{font-size:.68rem}}

/* ---- Field Notes (session / trip write-ups) ---- */
.op-note-astro{max-width:var(--maxw);margin:2rem auto 0;padding-top:1.6rem;border-top:1px solid var(--haze);display:flex;flex-direction:column;gap:1.6rem}
.op-note-astro h3{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.op-note-cond{display:flex;flex-wrap:wrap;gap:.5rem}
.op-note-cond-item{display:inline-flex;align-items:center;gap:.4rem;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.05em;color:var(--starlight);border:1px solid var(--haze);border-radius:6px;padding:.34rem .6rem;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.op-note-cond-item .op-moon-ico{font-size:.92rem;line-height:1}
.op-note-gear .op-rig-link{margin-top:.6rem}
.op-note-cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.op-note-cap{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--haze);border-radius:10px;overflow:hidden;background:var(--panel);transition:border-color .2s,box-shadow .2s,transform .2s}
.op-note-cap:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--haze));box-shadow:0 8px 24px rgba(0,0,0,.4);transform:translateY(-2px)}
.op-note-cap-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
.op-note-cap-img img{width:100%;height:100%;object-fit:cover;display:block}
.op-note-cap-t{padding:.55rem .7rem;font-size:.82rem;color:var(--starlight);line-height:1.3}
.op-note-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:var(--amber);border-radius:4px;padding:.1rem .4rem;margin-left:.55rem;vertical-align:middle}
.op-note-caps-n{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:.55rem}

/* Field Notes list (index) */
.op-note-entry{display:flex;gap:1.3rem;align-items:flex-start}
.op-note-entry-img{flex:0 0 200px;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--haze);background:var(--ink);aspect-ratio:3/2}
.op-note-entry-img img{width:100%;height:100%;object-fit:cover;display:block}
.op-note-entry-body{flex:1 1 auto;min-width:0}

/* Front-page latest-notes teaser */
.op-note-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-top:1.1rem}
.op-note-card{display:flex;text-decoration:none;border:1px solid var(--haze);border-radius:12px;overflow:hidden;background:var(--panel);transition:border-color .2s,box-shadow .2s,transform .2s}
.op-note-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--haze));box-shadow:0 8px 24px rgba(0,0,0,.4);transform:translateY(-2px)}
.op-note-card-img{flex:0 0 40%;overflow:hidden;background:var(--ink)}
.op-note-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.op-note-card-body{flex:1 1 auto;min-width:0;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.op-note-card-meta{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.op-note-card-t{font-size:1.02rem;font-weight:400;color:var(--starlight);line-height:1.25}
.op-note-card-x{font-size:.82rem;color:var(--muted);line-height:1.4}
.op-note-card-caps{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}

@media(max-width:760px){
	.op-note-cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.op-note-cards{grid-template-columns:1fr}
	.op-note-entry{flex-direction:column;gap:.8rem}
	.op-note-entry-img{flex-basis:auto;width:100%}
}
@media(max-width:430px){
	.op-note-card{flex-direction:column}
	.op-note-card-img{flex-basis:auto;aspect-ratio:16/9}
}

/* ---- All-sky coverage map (/sky/) --------------------------------------- */
.op-sky{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem 3rem}
.op-sky-intro{padding:.4rem 0 1.2rem}
.op-sky-title{font-family:'Spectral',serif;font-weight:300;font-size:1.9rem;line-height:1.2;margin:0 0 .5rem;color:var(--starlight)}
.op-sky-lede{margin:0;max-width:62ch;color:var(--muted);font-size:.95rem}
.op-sky-figure{margin:0}
/* The frame is the positioning context for the label, so the label can be
   placed in percentages of the SVG's own box and scale with it. */
.op-sky-frame{position:relative;width:100%;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--haze));border-radius:12px;overflow:hidden;background:var(--void);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.op-sky-svg{display:block;width:100%;height:auto}
.op-sky-mark{cursor:pointer}
.op-sky-dot{transition:fill-opacity .15s,stroke-width .15s}
.op-sky-mark:hover .op-sky-dot,.op-sky-mark:focus-visible .op-sky-dot{fill-opacity:1;stroke:var(--starlight);stroke-width:.012}
.op-sky-mark:focus{outline:none}
.op-sky-mark:focus-visible .op-sky-hit{stroke:var(--starlight);stroke-width:.008}

/* The hover/tap label. Sits above the map, nudged off the dot it describes. */
.op-sky-tip{position:absolute;z-index:3;transform:translate(.7rem,-50%);max-width:min(20rem,60%);
  padding:.35rem .55rem;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--haze));border-radius:6px;
  background:color-mix(in srgb,var(--ink) 92%,transparent);backdrop-filter:blur(4px);
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;line-height:1.35;letter-spacing:.02em;color:var(--starlight);
  pointer-events:none;white-space:normal;overflow-wrap:anywhere;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.op-sky-tip[hidden]{display:none}
.op-sky-tip.is-right{transform:translate(calc(-100% - .7rem),-50%)}
.op-sky-tip.is-low{transform:translate(.7rem,.6rem)}
.op-sky-tip.is-right.is-low{transform:translate(calc(-100% - .7rem),.6rem)}

.op-sky-cap{margin:.9rem 0 0;color:var(--muted);font-size:.85rem;max-width:70ch}
.op-sky-note{margin:1rem 0 0;color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.03em;line-height:1.6;max-width:74ch}
.op-sky-key{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-top:1rem}
.op-sky-key-item{display:inline-flex;align-items:center;gap:.4rem;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.op-sky-key-dot{width:.55rem;height:.55rem;border-radius:50%;flex:0 0 auto}

@media(max-width:760px){
  .op-sky{padding:0 1rem 2.4rem}
  .op-sky-title{font-size:1.5rem}
  .op-sky-lede{font-size:.9rem}
  /* A whole-sky ellipse on a narrow screen is short and wide, so the frame
     gets its own scroll rather than shrinking the dots to nothing. */
  .op-sky-frame{border-radius:10px}
  .op-sky-tip{font-size:.64rem;max-width:72%}
}
@media(prefers-reduced-motion:reduce){
  .op-sky-dot{transition:none}
}
/* Observing-conditions badges on a gallery card: how dark the sky was and what
   the Moon was doing. Same pill metrics as .op-filt so the two rows sit
   together; a badge is only ever rendered when its value is actually known. */
.op-conds{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0 0}
.op-cond{display:inline-flex;align-items:center;gap:.3rem;font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;letter-spacing:.04em;line-height:1;padding:.28rem .5rem;border-radius:2px;color:var(--muted);border:1px solid var(--haze);background:color-mix(in srgb,var(--haze) 22%,transparent)}
.op-cond-ico{font-size:.78rem;line-height:1}
/* Darker skies read cooler, a bright Moon warmer, so the two badges are
   distinguishable at a glance without needing to read the numbers. */
.op-cond-bortle{color:#8fb0d8}
.op-cond-bortle .op-cond-ico{color:#8fb0d8;font-size:.6rem}
.op-cond-moon{color:#d8c48f}
/* Revisited: the nights that built one capture ------------------------------ */
/* Gallery card badge. Same treatment as .op-vcount / .op-seqcount, offset down
   so it can sit under the version badge when a capture carries both (a
   revisited capture always has 2+ versions, so that pairing is the norm). */
.op-revisit{position:absolute;right:.7rem;top:.7rem;z-index:3;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--void) 78%,transparent);border:1px solid color-mix(in srgb,var(--accent) 55%,var(--haze));box-shadow:2px -2px 0 color-mix(in srgb,var(--accent) 22%,transparent);padding:.25rem .5rem;border-radius:2px}
.op-vcount+.op-revisit{top:2.4rem}
.op-vcount+.op-revisit+.op-seqcount{top:4.1rem}

/* Session timeline on the single capture page. */
.op-revisit-tl{margin:.1rem 0 1rem;border:1px solid var(--haze);border-radius:3px;background:color-mix(in srgb,var(--panel) 60%,transparent);padding:.7rem .8rem}
.op-revisit-hd{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.op-revisit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.op-revisit-item{display:flex;align-items:flex-start;gap:.6rem;position:relative;padding-left:.1rem}
/* The connecting rule between nights: drawn on the item, not the marker, so a
   single-row list (which cannot happen here) would still be safe. */
.op-revisit-item:not(:last-child)::before{content:'';position:absolute;left:.72rem;top:1.35rem;bottom:-.5rem;width:1px;background:var(--haze)}
.op-revisit-n{flex:0 0 auto;width:1.45rem;height:1.45rem;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--haze));color:var(--accent);background:var(--void);font-family:'IBM Plex Mono',monospace;font-size:.6rem;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.op-revisit-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .7rem;min-width:0;padding-top:.15rem}
.op-revisit-date{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--starlight)}
.op-revisit-int{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--accent)}
.op-revisit-gear{font-size:.72rem;color:var(--muted);min-width:0;overflow-wrap:anywhere}

/* The dated before/after caption under the compare button. */
.op-revisit-cmp{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.04em;color:var(--muted);margin:-.6rem 0 1rem}
.op-revisit-gap{color:var(--accent)}

@media(max-width:430px){
	.op-revisit-body{gap:.15rem .5rem}
	.op-revisit-gear{flex-basis:100%}
}

/* ---- Mobile polish for the 1.44 features -------------------------------- */
/* The map, the conditions row, the revisit timeline and the sequence controls
   were all built desktop-first. These rules are about fingers and narrow
   columns rather than looks: bigger targets, nothing that overflows the
   viewport, and no control stranded away from what it drives. */
@media(max-width:560px){
	/* An all-sky map at 375px is mostly empty ocean at the poles. Cropping the
	   viewBox is wrong (it would hide captures), so give the frame more height
	   instead and let the projection breathe. */
	.op-sky{padding:0 .9rem 2rem}
	.op-sky-title{font-size:1.45rem}
	.op-sky-lede,.op-sky-cap{font-size:.82rem}
	/* Grid labels crowd into illegibility at this width; the axis is still
	   readable from the graticule itself. */
	.op-sky-lbl{font-size:.42rem;opacity:.55}
	/* The tooltip must never hang off the edge of a narrow screen. */
	.op-sky-tip{max-width:78vw;white-space:normal}
	/* The key wraps rather than scrolling sideways: it is reference, not a
	   sequence, so wrapping loses nothing. */
	.op-sky-key{gap:.35rem .7rem}
	.op-sky-key-item{font-size:.62rem}

	/* Conditions pills: wrap, and keep them off the card title. */
	.op-conds{flex-wrap:wrap;gap:.25rem}
	.op-cond{font-size:.58rem}

	/* Revisit timeline: the date/integration/gear row is three columns on a
	   desktop and unreadable at 375px, so it stacks. */
	.op-revisit-item{flex-direction:column;align-items:flex-start;gap:.15rem}
	.op-revisit-body{width:100%}
	.op-revisit-gear{font-size:.62rem;opacity:.8}
	.op-revisit-cmp{width:100%}
}

/* A wide child must scroll inside its own box, never take the page with it.
   The sequence filmstrip laid out at about 1443px and did exactly that once
   its column became a flex container, so this is a backstop rather than the
   fix: the strip and its wrappers carry min-width:0 so they can shrink. */
/* NOT overflow-x:hidden on html or body: the theme has a sticky topbar and
   sticky gallery controls, and an overflow value on the scroll container
   silently kills position:sticky in Safari. Constrain the wide things
   themselves instead, which fixes the cause rather than hiding the symptom. */
.op-seq,.op-seq-track,.op-seq-strip,.op-seq-videos{max-width:100%}
.op-seq-videos video{max-width:100%;height:auto}

/* The meta column is a flex/grid item whose content (a 24-thumb filmstrip that
   lays out at about 1443px) was setting its width, so the column and every
   heading in it rendered off-screen. min-width:0 lets an item shrink but does
   not MAKE it: an explicit width does. Measured on the live page: the column
   goes from 1443px to 463px and the strip keeps scrolling inside it.
   width:0;min-width:100% on the strip is the same trick one level down, so the
   strip can never contribute its content width to the column's sizing. */
.op-single-meta{width:100%}
.op-seq-strip{width:0;min-width:100%}

/* Belt and braces for the videos: they are width:100% of the meta column, so
   they were 1443px only because the COLUMN was. The column fix above is the
   real one, but a video is the least forgiving thing to get wrong on a phone,
   so cap it against the viewport as well. */
.op-seq-video video{max-width:100%;height:auto}
.op-seq-videos,.op-seq-video{max-width:100%;min-width:0}